/* =============================================================================================
   The Stone Leadership theme: the single source of truth for colour, type, spacing, shape and
   focus. Every other stylesheet consumes these tokens and defines no raw values of its own.

   The palette and the typeface are Andrea's, read from stone-leadership.com 2026
   rather than invented, so a learner arriving from her site through the Courses button does not
   feel handed to a different company:

     #002b41  the navy she uses for all text, every heading and the filled button
     #de3163  the pink of the Andrea Stone logo mark, sampled from the file itself. It is the
              only warm colour anywhere in her brand and appears nowhere but the logo, which is
              what makes it usable here as a real accent rather than a second primary.
     Barlow   her heading face, weight 600, self-hosted below so no page calls Google

   Rules for anything added later:
     - No literal colour, radius, shadow or font stack outside this file. Add a token instead.
     - Sizes come from the type and space scales. A one-off value is a sign the scale is wrong.
     - Focus is always :focus-visible with --lc-focus. Never remove an outline without replacing it.
     - The pink is an accent and stays one. It marks focus, the current section and progress.
       The moment it is doing the work of the navy, the page has lost her brand rather than worn it.
   ============================================================================================= */

/* --- Barlow, self-hosted -----------------------------------------------------------------------
   Served from wwwroot/fonts so the app has no dependency on Google's servers and no learner's
   address is sent there. SIL Open Font Licence. Latin and Latin Extended only; the Vietnamese
   subset is omitted until a language needs it. */

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/barlow-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/barlow-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/barlow-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/barlow-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/barlow-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* --- Ink and surface ------------------------------------------------------------------ */
    --lc-ink: #002b41;          /* her navy: body text and headings */
    --lc-ink-soft: #3f6172;     /* secondary text that still needs to be read */
    --lc-muted: #758f9d;        /* labels, meta, hints */
    --lc-line: #dce3e7;         /* borders and rules */
    --lc-line-soft: #eef2f5;    /* internal dividers inside a card */
    --lc-ground: #f3f3f3;       /* the page behind the cards */
    --lc-card: #ffffff;         /* raised surfaces: cards, tables, the header */

    /* --- Accent: the navy does the work ------------------------------------------------------ */
    --lc-accent: #002b41;
    --lc-accent-strong: #01405f; /* hover and active. Lifted, not darkened: the navy is already
                                    near-black, so going darker reads as nothing happening. */
    --lc-accent-ink: #ffffff;    /* text on the accent */
    --lc-accent-light: #7293a4;  /* the light end of her blue-grey range */
    --lc-info-ground: #eef3f6;

    /* --- Highlight: the logo pink, used sparingly ---------------------------------------------- */
    --lc-highlight: #de3163;
    --lc-highlight-strong: #bf2452;
    --lc-highlight-ground: #fdeef3;

    /* --- Semantic state ------------------------------------------------------------------- */
    --lc-success: #1f7a4d;
    --lc-success-ground: #e9f4ed;
    --lc-warning: #a4620a;
    --lc-warning-ground: #fdf2e1;
    --lc-danger: #a32118;       /* kept browner than the highlight so a warning never reads as
                                   the brand accent, and the accent never reads as an error */
    --lc-danger-ground: #f9eae8;

    /* --- The dark panel a video sits in ----------------------------------------------------- */
    --lc-video-ground: #001a28;
    --lc-video-ink: #c6d3db;
    --lc-video-muted: #7e93a1;

    /* --- Type ------------------------------------------------------------------------------ */
    --lc-font: 'Barlow', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --lc-font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    --lc-weight-heading: 600;   /* her headings are 600, not bold */

    /* Her scale, not one of my own. Read out of stone-leadership.com: the kirki
       inline block sets body 18px and headings Barlow 600 at line-height 1.3; the arkai
       stylesheet sets h1 40 / h2 36 / h3 30 / h4 24 / h5 22 / h6 18, stepping down under 767px
       to h1 36 / h2 30 / h3 24 / h4 22 with body copy at 16.
       Everything below 18 is interface furniture she has no equivalent of - table cells, meta
       lines, pills - and is sized off the 18 rather than invented. */
    --lc-text-xs: 0.75rem;      /* 12 - pills and stamps */
    --lc-text-sm: 0.8125rem;    /* 13 - breadcrumbs, hints */
    --lc-text-base: 0.9375rem;  /* 15 - table cells and meta, one step under her body */
    --lc-text-body: 1.125rem;   /* 18 - hers exactly */
    --lc-text-md: 1.25rem;      /* 20 - a card title */
    --lc-text-lg: 1.5rem;       /* 24 - her h4 */
    --lc-text-xl: 1.875rem;     /* 30 - her h3 */
    --lc-text-2xl: 2.25rem;     /* 36 - her h2 */
    --lc-text-3xl: 2.5rem;      /* 40 - her h1 */

    --lc-leading-tight: 1.3;    /* hers, on headings */
    --lc-leading: 1.6;          /* hers, on body */
    --lc-leading-loose: 1.7;    /* long prose: lesson descriptions, transcripts */

    /* --- Space ----------------------------------------------------------------------------- */
    --lc-space-1: 0.25rem;
    --lc-space-2: 0.5rem;
    --lc-space-3: 0.75rem;
    --lc-space-4: 1rem;
    --lc-space-5: 1.5rem;
    --lc-space-6: 2rem;
    --lc-space-7: 3rem;
    --lc-space-8: 4rem;

    /* --- Shape and depth --------------------------------------------------------------------
       Her buttons are square. Two pixels rather than none: it reads as square at reading
       distance without the hard corner a form control gets on a low-resolution screen. */
    --lc-radius-sm: 2px;
    --lc-radius: 3px;
    --lc-radius-pill: 999px;
    --lc-shadow-card: 0 1px 2px rgba(0, 43, 65, 0.06);

    /* --- Focus ------------------------------------------------------------------------------
       The pink. It is the one place the logo colour appears on every screen, it cannot be
       confused with any state colour, and it is unmissable on both the white card and the navy. */
    --lc-focus: 2px solid var(--lc-highlight);
    --lc-focus-offset: 2px;

    /* --- The card edge -----------------------------------------------------------------------
       A splash of the logo pink on every raised surface, one pixel on the top and the
       left. It is deliberately only two of the four edges: a pink box would read as a warning,
       whereas a corner reads as a mark. It is decoration and carries no state, so nothing in
       the product is allowed to mean anything by it. */
    --lc-card-edge: var(--lc-highlight);

    /* --- The footer: her navy, so the page has a floor ---------------------------- */
    --lc-footer-ground: #002b41;
    --lc-footer-ink: #c9d8e0;
    --lc-footer-strong: #ffffff;
    --lc-footer-muted: #8fa9b7;
    --lc-footer-rule: rgba(255, 255, 255, 0.12);

    /* --- On her navy, the pink hero and the dark studio ----------------------------------------- */
    --lc-on-dark: #ffffff;          /* text and outlines on a dark or coloured ground */
    --lc-on-dark-soft: #d5e0e6;     /* secondary text there */
    --lc-on-dark-muted: #c9d6de;    /* labels there */
    --lc-on-dark-line: rgba(255, 255, 255, 0.7);
    --lc-on-dark-glass: rgba(255, 255, 255, 0.08);
    --lc-on-dark-glass-line: rgba(255, 255, 255, 0.18);
    --lc-highlight-on-dark: #f7a8bf; /* the logo pink, lifted to read on navy */

    /* --- Shadows -------------------------------------------------------------------------------- */
    --lc-shadow-ink: rgba(0, 43, 65, 0.45);        /* her navy, for lifted cards and the header */
    --lc-shadow-ink-soft: rgba(0, 43, 65, 0.35);
    --lc-shadow-highlight: rgba(222, 49, 99, 0.65); /* under the pink call to action */
    --lc-shadow-dark: rgba(0, 0, 0, 0.35);         /* over video and the studio */
    --lc-shadow-dark-soft: rgba(0, 0, 0, 0.25);
    --lc-shadow-dark-faint: rgba(0, 0, 0, 0.18);
    --lc-scrim: rgba(0, 0, 0, 0.65);               /* a label laid over a picture or a video */

    /* --- Video and the recording studio -------------------------------------------------------- */
    --lc-video-black: #000000;      /* behind a video, so letterboxing reads as the picture's edge */
    --lc-studio-ground: #10202a;
    --lc-studio-thumb: #1b2a33;
    --lc-recording: #ff3b30;        /* the red dot while recording */
    --lc-recording-soft: #ff6b6b;
    --lc-paused: #f5b301;

    /* --- Course badges ---------------------------------------------------------------
       Eight pastels, each with an ink dark enough to carry an icon at 4.5:1 on it. They are
       decoration that tells courses apart at a glance and carry no state, so none of them is
       allowed to look like the success green or the warning amber. */
    --lc-pastel-1: #fde4ea;  --lc-pastel-1-ink: #a3284f;   /* the logo pink, softened */
    --lc-pastel-2: #e1ecf8;  --lc-pastel-2-ink: #1d4f86;   /* sky */
    --lc-pastel-3: #e0f2ec;  --lc-pastel-3-ink: #1f6650;   /* sage */
    --lc-pastel-4: #fdf0d9;  --lc-pastel-4-ink: #87560a;   /* sand */
    --lc-pastel-5: #ece5f7;  --lc-pastel-5-ink: #57388c;   /* lavender */
    --lc-pastel-6: #dcf1f3;  --lc-pastel-6-ink: #19636c;   /* sea */
    --lc-pastel-7: #fbe6da;  --lc-pastel-7-ink: #8e441a;   /* apricot */
    --lc-pastel-8: #e6ecf1;  --lc-pastel-8-ink: #2f4d5e;   /* slate */

    /* --- Measure ----------------------------------------------------------------------------- */
    --lc-gutter: clamp(1rem, 3vw, 2.5rem); /* the side margin of the full-width header and footer */
    --lc-measure: 46rem;        /* comfortable reading width for prose */
    --lc-page: 68rem;           /* the content column */
}

/* Her own step-down, at her own breakpoint. Under 767px stone-leadership.com drops to
   h1 36 / h2 30 / h3 24 / h4 22 and sets body copy back to 16, which is why the phone screens
   read as the same site rather than a shrunk version of it. Only the tokens move; no component
   below knows this happened. */
@media (max-width: 47.9375rem) {
    :root {
        --lc-text-body: 1rem;       /* 16 - hers on a phone */
        --lc-text-md: 1.125rem;     /* 18 */
        --lc-text-lg: 1.375rem;     /* 22 - her h4 */
        --lc-text-xl: 1.5rem;       /* 24 - her h3 */
        --lc-text-2xl: 1.875rem;    /* 30 - her h2 */
        --lc-text-3xl: 2.25rem;     /* 36 - her h1 */
    }
}

/* --- Base ------------------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--lc-font);
    font-size: var(--lc-text-body);
    line-height: var(--lc-leading);
    color: var(--lc-ink);
    background: var(--lc-ground);
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
    font-weight: var(--lc-weight-heading);
    line-height: var(--lc-leading-tight);
    text-wrap: balance;
}

/* The navy is both the text and the link colour, exactly as on her site. In a product full of
   links that would be unreadable on its own, so a link is a link because it is underlined, and
   the pink on hover confirms it. */
a {
    color: var(--lc-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}
a:hover { color: var(--lc-highlight); text-decoration-color: var(--lc-highlight); }

code, kbd, samp, pre { font-family: var(--lc-font-mono); }

img { max-width: 100%; }

/* Digits that sit in columns line up. */
table, .num { font-variant-numeric: tabular-nums; }

/* One focus treatment for everything a person can tab to, and it is never removed.
   tabindex="-1" is excluded on purpose: Blazor focuses the page heading after navigating so a
   screen reader announces it, and a ring drawn round the heading on every page load looks like
   a fault. That focus is programmatic, never a keyboard stop. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--lc-focus);
    outline-offset: var(--lc-focus-offset);
}

/* Blazor moves focus to the page heading after navigating, so a screen reader announces where
   it has arrived. That is programmatic, not a keyboard stop, and a ring drawn round the heading
   on every page load reads as a fault. Nothing else has its focus removed. */
h1:focus, h2:focus, h3:focus { outline: none; }

/* --- Form controls ---------------------------------------------------------------------------- */

.input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius-sm);
    background: var(--lc-card);
    color: var(--lc-ink);
    font: inherit;
}
.input:hover:not(:disabled) { border-color: var(--lc-accent-light); }

/* Checkboxes and radios are drawn by the browser, and left alone they arrive in the operating
   system's blue, which belongs to no palette. This is the one line that puts them on hers. */
input[type=checkbox], input[type=radio] { accent-color: var(--lc-accent); }
.input:disabled { background: var(--lc-ground); color: var(--lc-muted); cursor: not-allowed; }

/* "Let's have a nicer look for choose file. Bootstrap does this very well." The same
   trick Bootstrap uses: the browser's own button is restyled as a grey segment joined to the box,
   and the browser still writes the chosen file's name beside it. No script, so it works for
   InputFile and for the plain inputs the studio reads from JavaScript alike. */
input[type=file].input { padding: 0; overflow: hidden; cursor: pointer; line-height: 2.4rem; color: var(--lc-muted); }
input[type=file].input::file-selector-button {
    margin: 0 0.75rem 0 0;
    padding: 0 1rem;
    height: 2.4rem;
    border: 0;
    border-right: 1px solid var(--lc-line);
    border-radius: 0;
    background: var(--lc-ground);
    color: var(--lc-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
input[type=file].input:hover:not(:disabled)::file-selector-button { background: var(--lc-line); }
input[type=file].input:focus-visible { outline: 2px solid var(--lc-highlight); outline-offset: 2px; }
input[type=file].input:disabled::file-selector-button { cursor: not-allowed; color: var(--lc-muted); }

/* --- Buttons ------------------------------------------------------------------------------------
   Navy fill with white text, and the inverse outline, which is exactly her pair. */

.btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: var(--lc-radius-sm);
    border: 1px solid var(--lc-accent);
    background: var(--lc-accent);
    color: var(--lc-accent-ink);
    font: inherit;
    font-weight: 500;
    line-height: var(--lc-leading-tight);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn:hover:not(:disabled) {
    background: var(--lc-accent-strong);
    border-color: var(--lc-accent-strong);
    color: var(--lc-accent-ink);
    text-decoration: none;
}

.btn-secondary { background: var(--lc-card); color: var(--lc-accent); }
.btn-secondary:hover:not(:disabled) {
    background: var(--lc-accent);
    border-color: var(--lc-accent);
    color: var(--lc-accent-ink);
}

.btn-danger { background: var(--lc-danger); border-color: var(--lc-danger); color: var(--lc-accent-ink); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); background: var(--lc-danger); border-color: var(--lc-danger); }

/* A disabled control must look disabled. Without this a greyed-out Save button is
   indistinguishable from a live one, and people click it and believe nothing happened. */
.btn:disabled {
    background: var(--lc-ground);
    border-color: var(--lc-line);
    color: var(--lc-muted);
    cursor: not-allowed;
}

.btn-link {
    background: none;
    border: none;
    color: var(--lc-accent);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.btn-link:hover { color: var(--lc-highlight); }

.button-row { display: flex; gap: var(--lc-space-3); flex-wrap: wrap; align-items: center; }

/* --- Status messages ------------------------------------------------------------------------------ */

.status {
    padding: var(--lc-space-3) var(--lc-space-4);
    border-radius: var(--lc-radius-sm);
    margin-bottom: var(--lc-space-4);
}
.status-info { background: var(--lc-info-ground); }
.status-error { background: var(--lc-danger-ground); color: var(--lc-danger); }
/* Not an error and not a note: a preview band has to be noticed every time, because
   the thing it is sitting on top of looks exactly like the published article. */
.status-warning { background: var(--lc-warning-ground); color: var(--lc-warning); }

.form-ok { color: var(--lc-success); }
.form-error { color: var(--lc-danger); }

.hint, .muted { color: var(--lc-muted); font-size: var(--lc-text-base); }
.note { color: var(--lc-ink-soft); font-size: var(--lc-text-base); }
.empty { color: var(--lc-muted); font-style: italic; }

/* Blazor's own validation classes, brought onto the palette so a form does not suddenly
   show two greens and two reds that belong to no theme. */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--lc-success); }
.invalid { outline: 1px solid var(--lc-danger); }
.validation-message { color: var(--lc-danger); font-size: var(--lc-text-base); }
.validation-summary ul { margin: 0 0 var(--lc-space-4); padding-left: 1.2rem; color: var(--lc-danger); }