/* Product pages: the site header, the content column, cards, tables, the lesson page, the
   workbook and the admin editor. Every value here comes from theme.css; if something needs a
   colour, a radius or a size that is not a token, the token is missing, not the rule. */

/* --- The page frame ----------------------------------------------------------------------------
   Colin: "the terms is halfway down the screen, it should be at the bottom surely".
   The frame is a column the height of the window; the content takes whatever is left, so on a
   short page the footer sits on the bottom edge rather than under the last paragraph. */
.site {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
.site-main { flex: 1 0 auto; }

/* --- Site footer -------------------------------------------------------------------------------
   Her navy, so the page has a floor. The six legal links are the whole point of it;
   the brand on the left is there so the bottom of a long page still says whose site this is. */
.site-footer {
    background: var(--lc-footer-ground);
    color: var(--lc-footer-ink);
    margin-top: var(--lc-space-7);
    font-size: var(--lc-text-base);
}
.footer-inner {
    padding: var(--lc-space-6) var(--lc-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-5) var(--lc-space-7);
    align-items: center;
    justify-content: space-between;
}
.footer-brand { display: flex; gap: var(--lc-space-3); align-items: center; }
.footer-brand img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--lc-radius-pill);
    background: var(--lc-card);
    padding: 0.3rem;
}
.footer-brand div { display: flex; flex-direction: column; line-height: 1.25; }
.footer-brand strong { color: var(--lc-footer-strong); font-weight: 600; font-size: var(--lc-text-md); }
.footer-brand span { color: var(--lc-footer-muted); font-size: var(--lc-text-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--lc-space-2) var(--lc-space-5); }
.footer-legal a { color: var(--lc-footer-ink); text-decoration: none; }
.footer-legal a:hover { color: var(--lc-footer-strong); text-decoration: underline; text-decoration-color: var(--lc-highlight); }
.footer-base {
    border-top: 1px solid var(--lc-footer-rule);
    padding: var(--lc-space-4) var(--lc-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-1) var(--lc-space-5);
    justify-content: space-between;
    color: var(--lc-footer-muted);
    font-size: var(--lc-text-sm);
}

/* --- Prose pages -----------------------------------------------------------------------------
   The terms, and anything else that is words rather than a screen. */
.prose { max-width: 46rem; }
/* Two classes, so it wins over .page's wider column wherever a page is prose. */
.page.prose { max-width: 50rem; }

/* The attendee list under a date: names, not a grid. */
ul.plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.prose h2 { margin-top: var(--lc-space-6); }
.prose p, .prose li { line-height: 1.65; }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.35rem; }
.prose .updated { color: var(--lc-muted); font-size: var(--lc-text-sm); }
.prose table.grid { margin: var(--lc-space-3) 0; }

/* --- Site header -------------------------------------------------------------------------------
   Full width, as on stone-leadership.com and utrovia: the logo on the left edge, the
   account on the right, and the sections between. It sticks to the top of the window, tucks away
   as you scroll down and slides back as soon as you scroll up. */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--lc-card);
    border-bottom: 1px solid var(--lc-line);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled { box-shadow: 0 6px 22px -14px var(--lc-shadow-ink); }
.site-header.tucked { transform: translateY(-105%); }
.site-header .bar {
    padding: var(--lc-space-3) var(--lc-gutter);
    display: flex;
    align-items: center;
    gap: var(--lc-space-6);
}
/* The brand is Andrea's logo, not a word. It is the whole join between her site and this one. */
.site-header .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}
.site-header .brand img { display: block; height: 2.6rem; width: auto; }
.site-header .brand:focus-visible { outline: var(--lc-focus); outline-offset: var(--lc-focus-offset); }
.site-header .spacer { flex: 1; }

/* One type treatment for every item in the bar: links, the group labels, the account menu and the
   sign-out button are all the same face, size and weight. That was half of what Colin saw - the
   address was 13px grey, Sign out was 18px, and the sections were 15px. */
.site-header nav a,
.site-header .navgroup-panel a,
.site-header .navgroup-label,
.site-header .nav-button,
.site-header .menu-account-who {
    font: inherit;
    font-size: var(--lc-text-base);
    font-weight: 500;
    color: var(--lc-accent);
    text-decoration: none;
    line-height: 1.3;
}
.site-header nav { display: flex; gap: var(--lc-space-5); align-items: center; }
.site-header nav > a { padding: 0.45rem 0; }
.site-header nav a:hover,
.site-header .navgroup-label:hover,
.site-header .nav-button:hover { color: var(--lc-highlight); }
.site-header nav > a.current,
.site-header .navgroup.current > .navgroup-label {
    color: var(--lc-ink);
    box-shadow: inset 0 -2px 0 var(--lc-highlight);
}

/* --- A menu group: a label and a panel under it ------------------------------------------------ */
.navgroup { position: relative; }
.navgroup-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    padding: 0.45rem 0;
    cursor: pointer;
}
.navgroup-label .fa-chevron-down { font-size: 0.7em; transition: transform 0.2s ease; }
.navgroup-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: -0.9rem;
    z-index: 45;
    min-width: 14rem;
    flex-direction: column;
    padding: 0.4rem 0;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-top: 2px solid var(--lc-highlight);
    border-radius: var(--lc-radius);
    box-shadow: 0 14px 30px -16px var(--lc-shadow-ink);
}
.navgroup-end .navgroup-panel { left: auto; right: 0; }
/* Hover, keyboard focus, or the class the script sets on a tap. Any one of the three opens it. */
.navgroup:hover > .navgroup-panel,
.navgroup:focus-within > .navgroup-panel,
.navgroup.open > .navgroup-panel { display: flex; }
.navgroup:hover > .navgroup-label .fa-chevron-down,
.navgroup.open > .navgroup-label .fa-chevron-down { transform: rotate(180deg); }
.navgroup-panel a,
.navgroup-panel .nav-button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.95rem;
    text-align: left;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
}
.navgroup-panel a:hover,
.navgroup-panel .nav-button:hover { background: var(--lc-highlight-ground); color: var(--lc-ink); }
.navgroup-panel a.current { box-shadow: inset 3px 0 0 var(--lc-highlight); color: var(--lc-ink); }
.navgroup-panel form { display: block; border-top: 1px solid var(--lc-line-soft); margin-top: 0.3rem; padding-top: 0.3rem; }

/* The account menu: the address, in the same type as the sections, cut short if it is long. */
.bar-account { display: flex; align-items: center; gap: var(--lc-space-3); flex: 0 1 auto; min-width: 0; }
.account-label { max-width: 22rem; }
.account-label .fa-circle-user { font-size: 1.25em; }
.account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* --- The sections behind one button on a phone -------------------------------------------------
   A <details> element, not a script. The sign-in and registration pages sit behind this header
   and render without an interactive circuit, so a menu that needed Blazor would be a menu that
   did not open on the first page anybody sees. The browser handles the toggle and the focus. */

.site-header .menu { position: relative; }
.site-header .menu summary {
    display: none;                  /* wide screens: the panel is the row, there is no button */
    list-style: none;
    cursor: pointer;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius-sm);
    color: var(--lc-accent);
    font-size: var(--lc-text-base);
    user-select: none;
}
.site-header .menu summary::-webkit-details-marker { display: none; }
.site-header .menu summary:focus-visible { outline: var(--lc-focus); outline-offset: var(--lc-focus-offset); }

/* Three bars drawn with a background and two shadows rather than an image or an icon font: it
   inherits the ink colour, needs no request and cannot fail to load. */
.site-header .menu .bars {
    width: 1.05rem;
    height: 2px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}
.site-header .menu[open] .bars {
    box-shadow: 0 5px 0 var(--lc-highlight), 0 -5px 0 var(--lc-highlight);
}
.site-header .menu-account { display: none; }

@media (max-width: 48rem) {
    .site-header .bar { gap: 0.45rem var(--lc-space-3); padding: 0.6rem 0.9rem; flex-wrap: wrap; }
    .site-header .brand { flex: 1 1 auto; }
    .site-header .brand img { height: 2.1rem; }
    .site-header .spacer { display: none; }
    .site-header .bar-account { display: none; }

    .site-header .menu summary { display: inline-flex; }
    .site-header .menu[open] nav {
        position: absolute;
        right: 0;
        top: calc(100% + 0.45rem);
        z-index: 45;
        min-width: 15rem;
        /* Colin: the menu must never run off the bottom of a phone. Never taller than
           the screen under the header, scrolling inside itself, and the page behind it does not
           scroll when the menu reaches its end. vh first for browsers without dvh. */
        max-height: calc(100vh - 5.5rem);
        max-height: calc(100dvh - 5.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--lc-card);
        border: 1px solid var(--lc-line);
        border-top-color: var(--lc-card-edge);
        border-left-color: var(--lc-card-edge);
        border-radius: var(--lc-radius);
        box-shadow: 0 8px 24px -12px var(--lc-shadow-ink-soft);
        padding: 0.35rem 0;
    }
    /* On a phone the groups lie flat: the label becomes a small heading and its links sit under
       it, so nothing in the menu needs a second tap to reach. */
    .site-header .menu[open] .navgroup-label {
        display: block;
        width: 100%;
        padding: 0.7rem 0.9rem 0.2rem;
        font-size: var(--lc-text-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left;
        color: var(--lc-muted);
        cursor: default;
        box-shadow: none;
    }
    /* A link that belongs to no group gets a rule above it, so Survey, Coach and Admin do not
       read as the last items of whichever group happens to sit before them. */
    .site-header .menu[open] nav > a { border-top: 1px solid var(--lc-line-soft); }
    .site-header .menu[open] .navgroup-label .fa-chevron-down { display: none; }
    .site-header .menu[open] .navgroup-panel {
        display: flex;
        position: static;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .site-header .menu[open] nav a,
    .site-header .menu[open] nav .nav-button,
    .site-header .menu[open] .menu-account-who {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.55rem 0.9rem;
        font-size: var(--lc-text-body);
    }
    .site-header .menu[open] nav a.current {
        box-shadow: inset 3px 0 0 var(--lc-highlight);
        background: var(--lc-highlight-ground);
    }
    .site-header .menu-account {
        display: block;
        margin-top: 0.35rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--lc-line-soft);
    }
    .site-header .menu-account-who {
        color: var(--lc-muted) !important;
        font-size: var(--lc-text-sm) !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .site-header .menu-account form { display: block; }
    .site-header .menu-account .nav-button { background: none; border: 0; cursor: pointer; }

    .footer-inner { padding: var(--lc-space-5) var(--lc-space-4); }
    .footer-base { padding: var(--lc-space-4); }
}

/* --- Back to the top -----------------------------------------------------------------------------
   From utrovia: a round pink button with a slowly turning dashed ring. It appears once
   the page has been scrolled far enough for there to be a top to go back to. */
.to-top {
    position: fixed;
    right: 1.75rem;
    bottom: 1.75rem;
    z-index: 50;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: var(--lc-highlight);
    color: var(--lc-accent-ink);
    font-size: 1rem;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.5rem);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s, background 0.3s ease;
    box-shadow: 0 10px 24px -10px var(--lc-shadow-highlight);
}
.to-top::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed var(--lc-highlight);
    animation: lc-spin 13s linear infinite;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--lc-accent); }
.to-top:hover::before { border-color: var(--lc-accent); }
.to-top:focus-visible { outline: var(--lc-focus); outline-offset: 8px; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
@media (max-width: 48rem) {
    .to-top { right: 1rem; bottom: 1rem; width: 2.6rem; height: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .to-top::before { animation: none; }
    .site-header, .to-top { transition: none; }
}

/* --- Course badges ------------------------------------------------------------------------------
   Colin: "for the course cards, can we have a circle in the top left corner with a
   suitable font awesome icon in place with a different pastel colour". The colour comes from the
   course's code and the icon from its theme, so a course keeps the same badge on every page. */
.card-head { display: flex; gap: var(--lc-space-3); align-items: flex-start; }
.card-head h3 { margin: 0.35rem 0 0; }
.course-badge {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: var(--lc-tone-ground);
    color: var(--lc-tone-ink);
}
.course-badge.large { width: 4.25rem; height: 4.25rem; font-size: 1.85rem; }
.tone-1 { --lc-tone-ground: var(--lc-pastel-1); --lc-tone-ink: var(--lc-pastel-1-ink); }
.tone-2 { --lc-tone-ground: var(--lc-pastel-2); --lc-tone-ink: var(--lc-pastel-2-ink); }
.tone-3 { --lc-tone-ground: var(--lc-pastel-3); --lc-tone-ink: var(--lc-pastel-3-ink); }
.tone-4 { --lc-tone-ground: var(--lc-pastel-4); --lc-tone-ink: var(--lc-pastel-4-ink); }
.tone-5 { --lc-tone-ground: var(--lc-pastel-5); --lc-tone-ink: var(--lc-pastel-5-ink); }
.tone-6 { --lc-tone-ground: var(--lc-pastel-6); --lc-tone-ink: var(--lc-pastel-6-ink); }
.tone-7 { --lc-tone-ground: var(--lc-pastel-7); --lc-tone-ink: var(--lc-pastel-7-ink); }
.tone-8 { --lc-tone-ground: var(--lc-pastel-8); --lc-tone-ink: var(--lc-pastel-8-ink); }

/* The heading on the course page wears the same badge, a size up. */
.course-title { display: flex; gap: var(--lc-space-4); align-items: center; }
.course-title h1 { margin: 0; }
/* A whole card that is a link (the studio's course list). */
a.card-link { text-decoration: none; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; }
a.card-link:hover { border-color: var(--lc-highlight); transform: translateY(-2px); }
a.card-link:focus-visible { outline: 2px solid var(--lc-highlight); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.card-link, a.card-link:hover { transition: none; transform: none; } }
.studio-course-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--lc-space-4); flex-wrap: wrap; margin-bottom: var(--lc-space-3); }
.studio-course-pick { min-width: 16rem; margin: 0; }

/* The write-up on a course that is not open yet: read, not scanned, so body ink. */
.card .write-up { margin: 0; color: var(--lc-ink-soft); font-size: var(--lc-text-base); line-height: 1.55; }
.card .tagline { color: var(--lc-ink); font-weight: 500; }
.coming-gate { max-width: 40rem; }

/* --- The forms behind the legal pages -------------------------------------------------------- */
.form-card {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-top-color: var(--lc-card-edge);
    border-left-color: var(--lc-card-edge);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-4);
    max-width: 40rem;
}
.form-card .field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-card label { font-weight: 500; }
.form-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-card legend { font-weight: 500; padding: 0; margin-bottom: 0.45rem; }
.choice-list { display: flex; flex-direction: column; gap: 0.45rem; }
.choice-list label { font-weight: 400; display: flex; gap: 0.55rem; align-items: baseline; }
.consent-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--lc-space-2) var(--lc-space-5);
    align-items: start;
    padding: var(--lc-space-4) 0;
    border-bottom: 1px solid var(--lc-line);
}
.consent-row h3 { margin: 0 0 0.25rem; }
.consent-row p { margin: 0; }
/* The unsubscribe page, one switch per email that can be stopped. */
.email-choices .consent-row { align-items: center; cursor: pointer; }
.email-choices .consent-row .note { display: block; margin-top: 0.2rem; }

/* --- The content column -------------------------------------------------------------------------- */

.page {
    max-width: var(--lc-page);
    margin: 0 auto;
    padding: var(--lc-space-5) var(--lc-space-4) var(--lc-space-8);
}
/* The recording desk needs the script, the slide and the slide list side by side on a laptop. */
.page.page-wide { max-width: 96rem; }
/* Her ramp, one step down inside the application. Her h1 is 40px, which is right
   for a page that has to sell something and wrong on "My progress", so a signed-in page starts
   at her h2 and walks down her own scale from there. The public pages below take her sizes
   exactly, because they are the join between the two sites and must not read as smaller. */
.page h1 { font-size: var(--lc-text-2xl); margin: 0 0 var(--lc-space-2); }
.page h2 { font-size: var(--lc-text-xl); margin: 1.75rem 0 var(--lc-space-2); }
.page h3 { font-size: var(--lc-text-lg); margin: 1.25rem 0 0.4rem; }
.page.public h1 { font-size: var(--lc-text-3xl); }
.page.public h2 { font-size: var(--lc-text-2xl); }
.page.public h3 { font-size: var(--lc-text-xl); }
/* Her body copy is navy, not grey. At 16px a muted grey read as a caption and got
   away with it; at her 18px it reads as switched-off text, and the standfirst on the arrival page
   is the first sentence anybody reads about this product. One step off the ink, not four. */
.lead { color: var(--lc-ink-soft); max-width: var(--lc-measure); }
.breadcrumb { font-size: var(--lc-text-sm); color: var(--lc-muted); margin-bottom: var(--lc-space-3); }
.breadcrumb a { color: var(--lc-accent); text-decoration: none; }

/* --- Cards --------------------------------------------------------------------------------------- */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--lc-space-4); margin-top: var(--lc-space-4); }
.card {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
}
.card h3 { margin: 0; font-size: var(--lc-text-md); }
.card .meta { color: var(--lc-muted); font-size: var(--lc-text-base); }
.card .actions { margin-top: auto; padding-top: var(--lc-space-2); }

.side-card {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-4) 1.1rem;
    margin-bottom: var(--lc-space-4);
}
.side-card h3 { margin-top: 0; }

/* --- Pills and progress ---------------------------------------------------------------------------- */

.pill {
    display: inline-block;
    align-self: start;
    width: fit-content;
    font-size: var(--lc-text-xs);
    padding: 0.15rem 0.55rem;
    border-radius: var(--lc-radius-pill);
    border: 1px solid var(--lc-line);
    color: var(--lc-muted);
    background: var(--lc-ground);
}
.pill-good { border-color: var(--lc-success); color: var(--lc-success); background: var(--lc-success-ground); }
.pill-warn { border-color: var(--lc-warning); color: var(--lc-warning); background: var(--lc-warning-ground); }
.pill-info { border-color: var(--lc-accent); color: var(--lc-accent); background: var(--lc-info-ground); }
/* The Notify me pill is a button, so it has to look pressable: the pink outline
   and a hover until pressed, then the "good" green with a tick. */
button.pill-toggle {
    font: inherit;
    font-size: var(--lc-text-xs);
    font-weight: 600;
    cursor: pointer;
    border-color: var(--lc-highlight);
    color: var(--lc-highlight);
    background: var(--lc-card);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background-color 0.15s ease;
}
button.pill-toggle:hover:not(:disabled) { background: var(--lc-highlight); color: var(--lc-on-dark); }
button.pill-toggle.is-on { border-color: var(--lc-success); color: var(--lc-success); background: var(--lc-success-ground); }
button.pill-toggle:focus-visible { outline: 2px solid var(--lc-highlight); outline-offset: 2px; }
button.pill-toggle:disabled { opacity: 0.6; cursor: wait; }

.progress { height: var(--lc-space-2); background: var(--lc-line); border-radius: var(--lc-radius-pill); overflow: hidden; }
/* Progress is the pink. It is the one number on a learner screen that should catch the eye,
   and the navy bar was indistinguishable from the rule it sat on. */
.progress > span { display: block; height: 100%; background: var(--lc-highlight); }

/* --- Tables ------------------------------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
/* Tabs that switch a view on the same page are buttons, not links; they look the same. */
button.tab { background: none; border: 0; font: inherit; cursor: pointer; }
/* An edit panel that opens above a grid (users). */
.edit-panel { background: var(--lc-card); border: 1px solid var(--lc-line); border-top: 3px solid var(--lc-highlight); border-radius: var(--lc-radius); padding: var(--lc-space-5); margin: var(--lc-space-4) 0; }
.page .edit-panel h2 { margin: 0 0 var(--lc-space-1); font-size: var(--lc-text-lg); }
.role-ticks { border: 0; padding: 0; margin: var(--lc-space-4) 0 0; display: grid; gap: var(--lc-space-2); }
.role-ticks legend { font-weight: 600; margin-bottom: var(--lc-space-2); }
.role-tick { display: flex; align-items: baseline; gap: var(--lc-space-2); }
/* Products picked from a dropdown, then one wide panel. */
/* The coach's dashboard and charts. */
.coach-tools { display: flex; align-items: flex-end; gap: var(--lc-space-3); flex-wrap: wrap; margin: 0 0 var(--lc-space-4); }
.coach-tools .field { flex: 0 1 26rem; margin: 0; }
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: var(--lc-space-4); margin: var(--lc-space-4) 0 var(--lc-space-5); }
.chart-card { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-4) var(--lc-space-5); min-width: 0; }
.page .chart-card h2 { margin: 0 0 var(--lc-space-3); font-size: var(--lc-text-lg); }
.chart-box { width: 100%; min-height: 200px; }
.shared-panel { background: var(--lc-card); border: 1px solid var(--lc-line); border-top: 3px solid var(--lc-highlight); border-radius: var(--lc-radius); padding: var(--lc-space-4) var(--lc-space-5); margin: var(--lc-space-3) 0 var(--lc-space-5); }
.shared-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lc-space-3); }
.page .shared-head h3 { margin: 0; }
.shared-answer { border-top: 1px solid var(--lc-line-soft); padding: var(--lc-space-3) 0; display: grid; gap: var(--lc-space-1); }
.shared-answer p { margin: 0; color: var(--lc-ink-soft); }
@media (max-width: 40rem) { .chart-pair { grid-template-columns: 1fr; } }

/* Email templates. */
.template-editor { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-5); }
.template-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--lc-space-5); align-items: start; }
@media (max-width: 60rem) { .template-columns { grid-template-columns: 1fr; } }
.email-preview { border: 1px solid var(--lc-line); border-top: 3px solid var(--lc-highlight); border-radius: var(--lc-radius); padding: var(--lc-space-4); display: grid; gap: var(--lc-space-2); background: var(--lc-ground); }
.email-preview-body { white-space: pre-wrap; line-height: var(--lc-leading-loose); }
/* The preview is the real email, in a frame as tall as a short email. */
.email-preview-frame { display: block; width: 100%; height: 34rem; border: 1px solid var(--lc-line); border-radius: var(--lc-radius); background: var(--lc-ground); overflow: hidden; }
.field-chip { display: inline-block; font-family: var(--lc-font-mono); font-size: var(--lc-text-xs); background: var(--lc-info-ground); border-radius: var(--lc-radius-sm); padding: 0.05rem 0.4rem; margin: 0 0.15rem; }
.input.narrow { max-width: 6rem; }

/* The indicative revenue total. */
.indicative { display: flex; flex-wrap: wrap; gap: var(--lc-space-4); align-items: flex-start; background: var(--lc-card); border: 1px dashed var(--lc-accent-light); border-radius: var(--lc-radius); padding: var(--lc-space-4); margin: var(--lc-space-4) 0; }
.indicative .note { flex: 1 1 22rem; margin: 0; }

/* The badge picker and shop ribbons. */
.badge-picker { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-5); display: grid; gap: var(--lc-space-4); margin-bottom: var(--lc-space-5); }
.badge-preview { display: flex; align-items: center; gap: var(--lc-space-4); }
.badge-row { display: flex; gap: var(--lc-space-4); flex-wrap: wrap; align-items: flex-end; }
.badge-row .field { margin: 0; }
.badge-search { flex: 1 1 18rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: var(--lc-space-1); max-height: 16rem; overflow-y: auto; padding: var(--lc-space-2); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); }
.icon-tile { aspect-ratio: 1; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: var(--lc-radius); cursor: pointer; color: var(--lc-ink-soft); font-size: 1.35rem; }
.icon-tile:hover { background: var(--lc-ground); border-color: var(--lc-line); }
.icon-tile.selected { background: var(--lc-highlight-ground); border-color: var(--lc-highlight); color: var(--lc-highlight); }
.icon-tile:focus-visible { outline: 2px solid var(--lc-highlight); outline-offset: 1px; }
.colour-pair { display: flex; align-items: center; gap: var(--lc-space-2); flex-wrap: wrap; }
.colour-pair input[type=color] { width: 2.75rem; height: 2.25rem; padding: 0; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); background: none; }
.card { position: relative; }
.ribbon { position: absolute; top: 0; right: 0; width: 7.5rem; height: 7.5rem; overflow: hidden; pointer-events: none; }
.ribbon span { position: absolute; top: 1.6rem; right: -2.2rem; width: 10rem; transform: rotate(45deg); background: var(--lc-highlight); color: var(--lc-on-dark); text-align: center; font-size: var(--lc-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0; box-shadow: 0 2px 6px var(--lc-shadow-ink-soft); }
.ribbon.andreas_pick span { background: var(--lc-accent); }

/* Messages and closing an account. */
.message-body { white-space: pre-wrap; background: var(--lc-ground); border-radius: var(--lc-radius); padding: var(--lc-space-3) var(--lc-space-4); margin: var(--lc-space-3) 0; }
.message-reply { border-left: 3px solid var(--lc-highlight); padding: var(--lc-space-2) var(--lc-space-4); margin: var(--lc-space-3) 0; white-space: pre-wrap; display: grid; gap: var(--lc-space-1); }
.close-list li { margin-bottom: var(--lc-space-2); }
.close-link { margin-top: var(--lc-space-6); font-size: var(--lc-text-sm); }
.close-link a { color: var(--lc-danger); }

/* The lesson's Watch and Workbook tabs. */
.lesson-tabs { margin-top: 0; }
.lesson-tabs .tab { display: inline-flex; align-items: center; gap: var(--lc-space-2); font-size: var(--lc-text-md); padding-bottom: var(--lc-space-2); }
.tab-count { font-size: var(--lc-text-xs); font-weight: 600; padding: 0.1rem 0.5rem; border-radius: var(--lc-radius-pill); background: var(--lc-highlight-ground); color: var(--lc-highlight-strong); }
.before-watch { border: 1px solid var(--lc-line); border-left: 4px solid var(--lc-highlight); border-radius: var(--lc-radius); padding: var(--lc-space-4); margin-bottom: var(--lc-space-5); background: var(--lc-card); }
.next-step-row { margin-top: var(--lc-space-5); }

/* Tags. */
.more-link { margin: var(--lc-space-3) 0 0; text-align: right; font-weight: 600; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--lc-space-2); align-items: center; margin: var(--lc-space-3) 0 var(--lc-space-5); }
.tag-search { max-width: 14rem; }
.tag-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: var(--lc-radius-pill); background: var(--lc-info-ground); color: var(--lc-ink); font-size: var(--lc-text-sm); }
.tag-chip .n { color: var(--lc-muted); font-variant-numeric: tabular-nums; }
.tag-grid td { vertical-align: middle; }
.tag-grid td:nth-child(2) { min-width: 18rem; }
.tag-grid .reached { color: var(--lc-ink-soft); font-size: var(--lc-text-sm); max-width: 22rem; }

/* Invitations. */
.invite-gate { display: flex; justify-content: space-between; align-items: center; gap: var(--lc-space-4); flex-wrap: wrap; background: var(--lc-card); border: 1px solid var(--lc-line); border-left: 4px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-4) var(--lc-space-5); margin: var(--lc-space-4) 0; }
.invite-gate.on { border-left-color: var(--lc-highlight); }
.page .invite-gate h2 { margin: 0 0 var(--lc-space-1); font-size: var(--lc-text-lg); }
.invite-gate .note { margin: 0; }
.invite-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--lc-space-4); margin-bottom: var(--lc-space-5); }
.invite-box { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-5); }
.page .invite-box h2 { margin-top: 0; font-size: var(--lc-text-lg); }
.product-pick { display: flex; align-items: flex-end; gap: var(--lc-space-3); flex-wrap: wrap; margin: var(--lc-space-4) 0; }
.product-pick .field { flex: 1 1 28rem; margin: 0; }
.product-panel { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-5); }
.page .product-panel h2 { margin-top: 0; }
.product-description { width: 100%; min-height: 10rem; line-height: var(--lc-leading-loose); }
.checkbox-inline { display: inline-flex; align-items: center; gap: var(--lc-space-2); align-self: flex-end; padding-bottom: var(--lc-space-2); }
/* Colin: tick boxes and counts centred both ways, times to the right. */
.grid th.center, .grid td.center { text-align: center; vertical-align: middle; }
.grid td.center input[type=checkbox] { margin: 0; vertical-align: middle; }
.grid th.end, .grid td.end { text-align: right; white-space: nowrap; }
/* A progress figure with a small bar in front of it (My progress). */
.mini-progress { display: inline-flex; align-items: center; gap: var(--lc-space-2); white-space: nowrap; }
.mini-bar { width: 4.5rem; height: 6px; border-radius: 3px; background: var(--lc-line); overflow: hidden; flex: none; }
.mini-bar > span { display: block; height: 100%; background: var(--lc-highlight); border-radius: 3px; }
tr.done .mini-bar > span { background: var(--lc-success); }
table.grid {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--lc-text-base);
    background: var(--lc-card);
}
table.grid th, table.grid td {
    text-align: left;
    padding: var(--lc-space-2) 0.6rem;
    border-bottom: 1px solid var(--lc-line);
    vertical-align: top;
}
table.grid th {
    font-size: var(--lc-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lc-muted);
}
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tr.done td { color: var(--lc-muted); }

/* --- Statistics ---------------------------------------------------------------------------------------- */

.stat-row { display: flex; gap: var(--lc-space-5); flex-wrap: wrap; margin: var(--lc-space-3) 0 var(--lc-space-4); }
.stat {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: 0.7rem var(--lc-space-4);
    min-width: 8rem;
}
.stat .n { display: block; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .l { font-size: var(--lc-text-sm); color: var(--lc-muted); }

/* --- Course structure ------------------------------------------------------------------------------------ */

.module { margin-top: var(--lc-space-5); }
.module h2 { margin-bottom: var(--lc-space-1); }
.module .intro { color: var(--lc-muted); font-size: var(--lc-text-base); max-width: var(--lc-measure); margin: 0 0 var(--lc-space-3); }
/* The free-preview picker on the admin lesson table. One per course, so it is a
   radio; the label carries the state because a bare radio in a grid cell is unreadable. */
.preview-pick { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.preview-pick span { font-size: var(--lc-text-sm); color: var(--lc-muted); }
.preview-pick input:checked + span { color: var(--lc-ink); font-weight: 600; }

.lesson-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lesson-list li {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    padding: 0.6rem 0.9rem;
    display: flex;
    gap: var(--lc-space-3);
    align-items: baseline;
    flex-wrap: wrap;
}
.lesson-list .code { font-family: var(--lc-font-mono); color: var(--lc-muted); font-size: var(--lc-text-sm); min-width: 2.2rem; }
.lesson-list a { color: var(--lc-accent); text-decoration: none; font-weight: 600; }
.lesson-list .meta { color: var(--lc-muted); font-size: var(--lc-text-sm); margin-left: auto; }

/* --- The lesson page ----------------------------------------------------------------------------------------- */

.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-5); }
@media (min-width: 60rem) { .lesson-layout { grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); } }

.video-placeholder {
    aspect-ratio: 16 / 9;
    background: var(--lc-video-ground);
    color: var(--lc-video-ink);
    border-radius: var(--lc-radius);
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--lc-space-4);
}
.video-placeholder small { display: block; color: var(--lc-video-muted); margin-top: 0.4rem; }

/* The streaming player. 16:9 with the iframe filling it, so the page never jumps as it loads. */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--lc-video-ground);
    border-radius: var(--lc-radius);
    overflow: hidden;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lesson-nav { display: flex; gap: var(--lc-space-4); margin-top: var(--lc-space-4); }
.lesson-nav a { color: var(--lc-accent); text-decoration: none; }

/* The placeholder tiles that used to say "Slide 1, Slide 2" are gone: the real
   watermarked images are rendered instead, and their rules are at the end of this file. */

/* --- The workbook ---------------------------------------------------------------------------------------------- */

.workbook {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: 1.25rem var(--lc-space-5);
    margin-top: var(--lc-space-5);
}
.workbook .wb-head { display: flex; align-items: baseline; gap: var(--lc-space-4); flex-wrap: wrap; }
.workbook .wb-head h2 { margin: 0; }
.workbook .wb-status { margin-left: auto; font-size: var(--lc-text-base); color: var(--lc-muted); }
.workbook .wb-status.error { color: var(--lc-danger); }
/* A workbook section heading was set in twelve-pixel uppercase monospace with letter
   spacing, on top of source text that was already in capitals - so it shouted twice and was hard
   to read doing it. It is now what Colin asked for: mixed case, her typeface, a step up the scale
   and carrying its weight rather than its capitals. */
.workbook h4 {
    font-size: var(--lc-text-md);
    font-weight: var(--lc-weight-heading);
    line-height: var(--lc-leading-tight);
    color: var(--lc-accent);
    margin: 1.6rem 0 var(--lc-space-2);
    padding-top: var(--lc-space-3);
    border-top: 1px solid var(--lc-line-soft);
}
.workbook h4:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--lc-space-4); }
.workbook p {
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-loose);
    color: var(--lc-muted);
    margin: 0 0 var(--lc-space-3);
    max-width: var(--lc-measure);
}
/* The lead-in was twelve-pixel letter-spaced monospace, which was a second way of
   shouting the same words the data was already shouting. It is now her typeface, carrying the
   emphasis in weight rather than in width. */
.workbook p .lead-in {
    color: var(--lc-ink);
    font-weight: var(--lc-weight-heading);
}
.workbook hr { border: none; border-top: 1px solid var(--lc-line); margin: 1.1rem 0 0.7rem; }

/* Every answer box on a line of its own, under its words, the width of the workbook. */
.wb-inputs { display: grid; gap: var(--lc-space-1); margin: 0 0 var(--lc-space-4); font-size: var(--lc-text-base); line-height: 1.6; color: var(--lc-muted); }
.wb-inputs .wb-label { color: var(--lc-ink); }
.wb-text {
    display: block;
    width: 100%;
    margin: 0;
    resize: vertical;
    padding: 0.35rem var(--lc-space-2);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius-sm);
    font: inherit;
    line-height: 1.4;
}
.wb-text.saved { border-color: var(--lc-success); }
.wb-options { display: flex; flex-wrap: wrap; gap: var(--lc-space-2) 1.2rem; margin: 0 0 0.9rem; font-size: var(--lc-text-base); align-items: center; }
.wb-options .wb-label { flex-basis: 100%; color: var(--lc-ink); }
.wb-options label { display: flex; align-items: center; gap: 0.35rem; }
.wb-scale { display: flex; align-items: center; gap: var(--lc-space-2) 0.9rem; flex-wrap: wrap; margin: 0 0 0.9rem; font-size: var(--lc-text-base); }
.wb-scale > .wb-label { flex-basis: 100%; color: var(--lc-ink); }
/* Required questions, and the ones still to answer. */
.wb-req { display: inline-block; margin-left: var(--lc-space-2); padding: 0 0.45rem; border: 1px solid var(--lc-danger); border-radius: 999px;
          color: var(--lc-danger); font-size: 0.72rem; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; line-height: 1.5; }
.wb-missing .wb-text { border-color: var(--lc-danger); }
.wb-finished { display: inline-flex; align-items: center; gap: var(--lc-space-2); color: var(--lc-success); font-weight: 600; }
.wb-required { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--lc-text-sm); color: var(--lc-ink-soft); }
/* The lesson's side card: what is done. */
.progress-ticks { list-style: none; padding: 0; margin: 0 0 var(--lc-space-2); display: grid; gap: var(--lc-space-1); font-size: var(--lc-text-sm); color: var(--lc-ink-soft); }
.progress-ticks li { display: flex; align-items: center; gap: var(--lc-space-2); }
.progress-ticks li > i { color: var(--lc-line); }
.progress-ticks li.done { color: var(--lc-ink); }
.progress-ticks li.done > i { color: var(--lc-success); }
.wb-scale label { display: flex; align-items: center; gap: var(--lc-space-1); }
.wb-foot {
    margin-top: 1.25rem;
    padding-top: var(--lc-space-4);
    border-top: 1px solid var(--lc-line);
    display: flex;
    align-items: center;
    gap: var(--lc-space-4);
    flex-wrap: wrap;
}

.continuum { margin: var(--lc-space-2) 0 1.25rem; }
/* The labels at each end of the continuum stop shouting too. They are on the same
   screen and were part of the same complaint. */
.continuum .ends {
    display: flex;
    justify-content: space-between;
    font-size: var(--lc-text-sm);
    color: var(--lc-ink-soft);
}
.continuum .track {
    height: 4px;
    background: linear-gradient(90deg, var(--lc-accent), var(--lc-accent-light));
    border-radius: 2px;
    margin: 0.35rem 0;
}
.continuum .ticks { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--lc-muted); text-align: center; }

/* --- Admin forms and the lesson editor ------------------------------------------------------------------------------- */

.form-row { display: flex; gap: var(--lc-space-3); align-items: flex-end; flex-wrap: wrap; margin: var(--lc-space-3) 0 var(--lc-space-4); }
.form-row .field { margin: 0; min-width: 14rem; }
select.input { width: auto; min-width: 12rem; }
/* A select with long options (the lesson editor's "Before the video") must never
   push past its card; the option text is clipped by the browser instead. */
select.input { max-width: 100%; text-overflow: ellipsis; }
.side-card select.input { width: 100%; min-width: 0; }
.edit-grid > * { min-width: 0; }

.edit-grid { display: grid; gap: var(--lc-space-5); align-items: start; }
@media (min-width: 62rem) { .edit-grid { grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr); } }
.field { display: block; margin-bottom: 1.1rem; }
.field > span { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.field > small { display: block; color: var(--lc-muted); margin-bottom: 0.35rem; }
.field .input { width: 100%; }
.field textarea.input { resize: vertical; line-height: 1.5; }
.input.mono { font-family: var(--lc-font-mono); font-size: var(--lc-text-sm); }
.edit-actions { display: flex; gap: var(--lc-space-3); align-items: center; flex-wrap: wrap; margin-top: var(--lc-space-2); }

/* --- The failed-read notice ------------------------------------------------------------------------------------------- */

/* Shown when a read behind a page failed: an empty table must never be mistaken for lost work. */
.load-failed {
    background: var(--lc-warning-ground);
    border: 1px solid var(--lc-warning);
    border-left-width: 3px;
    border-radius: var(--lc-radius-sm);
    padding: 0.7rem 0.9rem;
    margin: 0 0 var(--lc-space-4);
    font-size: var(--lc-text-base);
}
.load-failed strong { display: block; }

/* --- The arrival page ------------------------------------------------------------------------------------------------ */

/* Almost everyone signed out has just clicked "Courses" on stone-leadership.com. This is the
   join between the two sites, so it is given a little more room than an ordinary page. */
/* The arrival page is the whole join between Andrea's site and this one, so it is the one
   screen that gets a treatment rather than a layout: her white ground and navy type, with the
   logo pink as a single rule above the heading. Nothing here is a colour of its own. */
.arrival {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-top: 3px solid var(--lc-highlight);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-6) var(--lc-space-6) var(--lc-space-6);
    margin-bottom: var(--lc-space-6);
}
.arrival h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 var(--lc-space-4);
    letter-spacing: -0.01em;
}
.arrival .lead {
    font-size: var(--lc-text-md);
    line-height: var(--lc-leading-loose);
    color: var(--lc-ink-soft);
    max-width: var(--lc-measure);
    margin: 0;
}
.arrival .button-row { margin: var(--lc-space-6) 0 0; }

@media (max-width: 48rem) {
    .arrival { padding: var(--lc-space-5) var(--lc-space-4); }
}

.arrival-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--lc-space-5);
    margin-top: var(--lc-space-6);
    padding-top: var(--lc-space-5);
    border-top: 1px solid var(--lc-line);
}
.arrival-points h3 { margin: 0 0 var(--lc-space-2); font-size: var(--lc-text-body); }
.arrival-points p { margin: 0; color: var(--lc-muted); font-size: var(--lc-text-base); line-height: var(--lc-leading-loose); }

/* --- The hero and the picture bands -----------------------------------------------------------
   Colin: Andrea's photograph on the left, a solid panel on the right for the words,
   the join cut on a diagonal. The panel is her navy; the cut carries a stripe of the logo pink, so
   the pink is a line and not a field, the way it is everywhere else. The hero breaks out of the
   content column to the full width of the window, and the page is clipped sideways so the
   breakout never produces a horizontal scrollbar. */
body { overflow-x: clip; }

.hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--lc-space-5));
    margin-bottom: var(--lc-space-7);
    display: grid;
    grid-template-columns: 46% 1fr;
    min-height: clamp(26rem, 62vh, 40rem);
    background: var(--lc-accent);
    overflow: hidden;
}
.hero-picture { position: relative; min-height: 100%; }
.hero-picture img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* The panel starts a little left of the picture's edge and is cut back on the diagonal, so the
   photograph shows through the triangle. The pink stripe is the panel's own edge, drawn by a
   second clip one stripe-width wider behind it. */
.hero-panel {
    position: relative;
    margin-left: -7rem;
    display: flex;
    align-items: center;
    padding: var(--lc-space-7) clamp(1.5rem, 6vw, 5rem) var(--lc-space-7) 9rem;
    background: var(--lc-accent);
    color: var(--lc-accent-ink);
    clip-path: polygon(7rem 0, 100% 0, 100% 100%, 0 100%);
}
.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--lc-highlight);
    clip-path: polygon(7rem 0, calc(7rem + 10px) 0, 10px 100%, 0 100%);
}
.hero-text { position: relative; max-width: 34rem; }
.hero .eyebrow {
    display: block;
    font-size: var(--lc-text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lc-highlight-on-dark);
    margin-bottom: var(--lc-space-3);
}
.page .hero h1 {
    color: var(--lc-accent-ink);
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 0 var(--lc-space-5);
}
.hero-sub {
    color: var(--lc-on-dark-soft);
    font-size: var(--lc-text-md);
    line-height: var(--lc-leading);
    margin: 0;
    max-width: 32rem;
}

/* His three phrases, one at a time: each holds for four seconds and crossfades over one. CSS
   only, so it runs on a page with no circuit. Asked for less motion, all three simply sit there
   as a list. */
.hero-phrases {
    position: relative;
    height: 2.2em;
    margin: 0 0 var(--lc-space-6);
    font-size: var(--lc-text-lg);
    color: var(--lc-on-dark-soft);
}
.hero-phrases span {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    animation: lc-phrase 15s infinite;
}
.hero-phrases span:nth-child(2) { animation-delay: 5s; }
.hero-phrases span:nth-child(3) { animation-delay: 10s; }
/* The one line a closed site says, under the phrases and above the buttons. */
.hero-closed {
    margin: calc(-1 * var(--lc-space-3)) 0 var(--lc-space-5);
    color: var(--lc-on-dark);
    font-weight: 600;
}
@keyframes lc-phrase {
    0%   { opacity: 0; transform: translateY(0.3em); }
    7%   { opacity: 1; transform: none; }
    30%  { opacity: 1; transform: none; }
    37%  { opacity: 0; transform: translateY(-0.3em); }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-phrases { height: auto; }
    .hero-phrases span { position: static; display: block; opacity: 1; animation: none; }
}

.hero .button-row { margin: 0; }
.hero .btn-primary { background: var(--lc-highlight); border-color: var(--lc-highlight); color: var(--lc-on-dark); }
.hero .btn-primary:hover { background: var(--lc-highlight-strong); border-color: var(--lc-highlight-strong); }
.hero .btn-secondary { background: transparent; border-color: var(--lc-on-dark-line); color: var(--lc-on-dark); }
.hero .btn-secondary:hover { background: var(--lc-on-dark); border-color: var(--lc-on-dark); color: var(--lc-accent); }

/* Banner height, for the survey and the course pages. */
.hero-compact { min-height: 15rem; grid-template-columns: 34% 1fr; margin-bottom: var(--lc-space-6); }
.hero-compact .hero-panel { padding-top: var(--lc-space-6); padding-bottom: var(--lc-space-6); }
.page .hero-compact h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: var(--lc-space-3); }

/* On a phone the picture goes on top and the cut turns to run across the page instead. */
@media (max-width: 48rem) {
    .hero, .hero-compact { grid-template-columns: 1fr; min-height: 0; }
    .hero-picture { height: 18rem; }
    .hero-compact .hero-picture { height: 9rem; }
    .hero-panel {
        margin-left: 0;
        margin-top: -2.5rem;
        padding: calc(2.5rem + var(--lc-space-5)) var(--lc-space-4) var(--lc-space-6);
        clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
    }
    .hero-panel::before { clip-path: polygon(0 2.5rem, 100% 0, 100% 8px, 0 calc(2.5rem + 8px)); }
    .hero-phrases { height: 3.4em; font-size: var(--lc-text-md); }
}

/* The text-only banner (PageBand): the hero's navy at banner height for pages with no picture of
   their own. It breaks out to the full window like the hero, and pads itself back in so the words
   line up with the column underneath. The right-hand end repeats the hero's diagonal: a lighter
   navy wedge with the pink stripe along its edge. */
.page-band {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: calc(-1 * var(--lc-space-5));
    margin-bottom: var(--lc-space-6);
    padding: var(--lc-space-6) calc(50vw - 50%);
    background: var(--lc-accent);
    color: var(--lc-accent-ink);
    overflow: hidden;
}
.page-band::before,
.page-band::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: clamp(6rem, 22vw, 20rem);
}
.page-band::before {
    background: var(--lc-accent-strong);
    clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
}
.page-band::after {
    background: var(--lc-highlight);
    clip-path: polygon(45% 0, calc(45% + 8px) 0, 8px 100%, 0 100%);
}
.page-band-text { position: relative; z-index: 1; max-width: 46rem; }
.page-band.has-leading { display: flex; align-items: center; gap: var(--lc-space-5); }
.page-band-leading { position: relative; z-index: 1; flex: none; }
.page-band a.eyebrow { text-decoration: none; }
.page-band a.eyebrow:hover { color: var(--lc-on-dark); text-decoration: underline; }
.page-band .stat-row { margin: var(--lc-space-4) 0 0; }
.page-band .stat { background: var(--lc-on-dark-glass); border-color: var(--lc-on-dark-glass-line); }
.page-band .stat .n { color: var(--lc-on-dark); }
.page-band .stat .l { color: var(--lc-on-dark-muted); }

/* Colin: the About tab was a column of grey paragraphs. The pitch leads;
   who it is for and why it works sit side by side as two cards; Andrea is named beside them. */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--lc-space-6); align-items: start; }
.about-grid .lead { margin-top: 0; }
.about-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--lc-space-4); margin-top: var(--lc-space-5); }
.about-point {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-5);
}
.about-point i { color: var(--lc-highlight); font-size: 1.35rem; }
.page .about-point h3 { margin: var(--lc-space-2) 0 var(--lc-space-2); font-size: var(--lc-text-md); }
.about-point p { margin: 0; color: var(--lc-ink-soft); line-height: var(--lc-leading-loose); }
.curator {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-top: 3px solid var(--lc-highlight);
    border-radius: var(--lc-radius);
    padding: var(--lc-space-5);
    text-align: center;
}
/* A photograph's picture element takes no space; the img inside keeps the rules written for it. */
.site-picture { display: contents; }
.curator img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; object-position: 50% 25%; display: block; margin: 0 auto var(--lc-space-3); }
.curator strong { display: block; font-size: var(--lc-text-md); }
.curator span { display: block; color: var(--lc-ink-soft); font-size: var(--lc-text-base); margin-top: var(--lc-space-1); }
@media (max-width: 56rem) { .about-grid { grid-template-columns: 1fr; } }
.page-band .eyebrow {
    display: block;
    font-size: var(--lc-text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lc-highlight-on-dark);
    margin-bottom: var(--lc-space-2);
}
.page .page-band h1 {
    color: var(--lc-accent-ink);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin: 0;
    text-wrap: balance;
}
.page-band .hero-sub { margin-top: var(--lc-space-2); }
.page-band .hero-sub p { margin: 0; }
@media (max-width: 48rem) {
    .page-band { padding-top: var(--lc-space-5); padding-bottom: var(--lc-space-5); }
    .page-band-text { max-width: 78%; }
}

/* The shop with nothing in it yet. One clear message, then three useful things to do
   instead, rather than a currency picker over a single grey sentence. */
.shop-empty {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--lc-space-5);
    align-items: start;
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-top: 3px solid var(--lc-highlight);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-6);
}
.shop-empty h2 { margin: 0 0 var(--lc-space-2); }
.shop-empty p { margin: 0; color: var(--lc-ink-soft); max-width: var(--lc-measure); }
.shop-empty .badge-lg {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--lc-highlight-ground);
    color: var(--lc-highlight);
    font-size: 1.6rem;
}
@media (max-width: 48rem) {
    .shop-empty { grid-template-columns: 1fr; padding: var(--lc-space-5); }
}
.next-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--lc-space-4);
    margin-top: var(--lc-space-5);
}
.next-step {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-2);
    padding: var(--lc-space-4) var(--lc-space-5);
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    text-decoration: none;
    color: var(--lc-ink);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.next-step:hover { border-color: var(--lc-highlight); transform: translateY(-2px); }
.next-step:focus-visible { outline: 2px solid var(--lc-highlight); outline-offset: 2px; }
.next-step i { color: var(--lc-highlight); font-size: 1.25rem; }
.next-step strong { font-size: var(--lc-text-md); font-weight: 600; }
.next-step span { color: var(--lc-ink-soft); font-size: var(--lc-text-base); }
@media (prefers-reduced-motion: reduce) { .next-step { transition: none; } .next-step:hover { transform: none; } }

/* The currency choice, as a quiet line above the cards rather than a form on its own. */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--lc-space-3);
    margin-bottom: var(--lc-space-4);
}
.shop-toolbar .currency-picker { margin: 0; }

/* The bands: picture one side, words the other, alternating, easing up into place as they
   arrive. Hidden only once the layout script has run (html.lc-js), so nothing is ever lost. */
.bands { display: flex; flex-direction: column; gap: var(--lc-space-8); margin-bottom: var(--lc-space-7); }
.picture-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
}
.picture-band.flip .picture-band-image { order: 2; }
.picture-band-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--lc-radius);
    box-shadow: 0 18px 40px -24px var(--lc-shadow-ink);
}
.picture-band-text .eyebrow {
    display: block;
    font-size: var(--lc-text-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lc-highlight);
    margin-bottom: var(--lc-space-2);
}
.page .picture-band-text h2 { margin: 0 0 var(--lc-space-3); text-wrap: balance; }
.picture-band-text p { color: var(--lc-ink-soft); line-height: var(--lc-leading-loose); max-width: 32rem; }
@media (max-width: 48rem) {
    .picture-band { grid-template-columns: 1fr; }
    .picture-band.flip .picture-band-image { order: 0; }
    .bands { gap: var(--lc-space-7); }
}
html.lc-js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.8s ease, transform 0.8s ease; }
html.lc-js .reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html.lc-js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- The survey ------------------------------------------------------------------------------
   Sixty Likert questions is a lot of the same shape in a row, so the work here is making it
   possible to keep your place: the section is a heading, an answered question loses its weight,
   and a bar at the top says how far there is left to go. */

.survey-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--lc-ground);
    padding: var(--lc-space-3) 0;
    border-bottom: 1px solid var(--lc-line);
    margin-bottom: var(--lc-space-5);
}
.survey-count { margin: var(--lc-space-2) 0 0; font-size: var(--lc-text-base); }

.survey-section { margin-bottom: var(--lc-space-7); }
.survey-section h2 { margin-bottom: var(--lc-space-4); }

.survey-question {
    border: 1px solid var(--lc-line);
    border-left: 3px solid var(--lc-line);
    border-radius: var(--lc-radius);
    background: var(--lc-card);
    padding: var(--lc-space-4);
    margin: 0 0 var(--lc-space-3);
}
/* An answered question steps back so the eye lands on what is left. Colin: its top
   and left edges take the pink too, so answered reads at a glance down a long page; the thick
   left edge is kept. */
.survey-question.answered {
    border-top: 2px solid var(--lc-highlight);
    border-left-color: var(--lc-highlight);
    background: var(--lc-ground);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) { .survey-question.answered { transition: none; } }
/* Colin: the statement "is clashing with the border of the card ... The statement should be
   inside." A legend straddles its fieldset's top edge; floated, it sits inside like any other line. */
.survey-question legend { padding: 0; font-size: var(--lc-text-body); line-height: var(--lc-leading); float: left; width: 100%; }
.survey-question legend + * { clear: both; }

.scale { display: flex; flex-wrap: wrap; gap: var(--lc-space-2) var(--lc-space-5); margin-top: var(--lc-space-3); }
.scale label { display: flex; align-items: center; gap: var(--lc-space-2); cursor: pointer; font-size: var(--lc-text-base); }

.survey-foot { border-top: 1px solid var(--lc-line); padding-top: var(--lc-space-5); }

@media (max-width: 48rem) {
    .scale { flex-direction: column; gap: var(--lc-space-2); }
}

/* --- Results ---------------------------------------------------------------------------------- */

.score-list { display: grid; gap: var(--lc-space-4); margin: var(--lc-space-5) 0; }
.score-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lc-space-3); }
.score-name { font-weight: 500; }
.score-value { font-size: var(--lc-text-base); color: var(--lc-muted); }
.score .progress { margin-top: var(--lc-space-2); }
.score .meta { display: block; margin-top: var(--lc-space-1); }

.plain-list { margin: 0; padding-left: 1.2rem; }

/* --- Buying ----------------------------------------------------------------------------------- */

.currency-picker, .filter-row {
    display: flex;
    align-items: center;
    gap: var(--lc-space-3);
    margin: 0 0 var(--lc-space-5);
}
.currency-picker .input, .filter-row .input { width: auto; }
/* "slightly larger search box - we have the real estate". */
.filter-row .field.search-field { flex: 1 1 24rem; max-width: 36rem; margin: 0; }
.filter-row .field.search-field .input { width: 100%; }
/* (/admin/users): the page's main button on the left, its filters on the same line to the right. */
.grid-bar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--lc-space-3); margin: var(--lc-space-4) 0; }
.grid-bar .filter-row { margin: 0; align-items: flex-end; flex-wrap: wrap; }
.grid-bar .filter-row .field { margin: 0; }

/* An on/off switch for every yes/no setting on an admin page. Still a real checkbox,
   so @bind, the keyboard, labels and the browser tests all work exactly as before. */
input[type=checkbox].switch {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 2.4rem;
    height: 1.35rem;
    margin: 0;
    border-radius: 999px;
    background: var(--lc-line);
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}
input[type=checkbox].switch::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--lc-card);
    box-shadow: 0 1px 2px var(--lc-shadow-dark-soft);
    transition: transform 0.15s ease;
}
input[type=checkbox].switch:checked { background: var(--lc-accent); }
input[type=checkbox].switch:checked::after { transform: translateX(1.05rem); }
input[type=checkbox].switch:focus-visible { outline: 2px solid var(--lc-highlight); outline-offset: 2px; }
input[type=checkbox].switch:disabled { opacity: 0.5; cursor: not-allowed; }
.field.checkbox label, label.checkbox-inline { display: inline-flex; align-items: center; gap: var(--lc-space-2); cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
    input[type=checkbox].switch, input[type=checkbox].switch::after { transition: none; }
}

.price { font-size: var(--lc-text-xl); margin: var(--lc-space-3) 0 0; }
/* "about $149" beside the rupee price. A guide, never charged, so it reads as an aside. */
.price-guide { display: block; font-size: var(--lc-text-base); color: var(--lc-muted); margin-top: var(--lc-space-1); }

.buy-box {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-5);
    margin: var(--lc-space-5) 0 var(--lc-space-6);
}

.checkout-total { max-width: 26rem; margin: var(--lc-space-4) 0; }

.refund-box {
    background: var(--lc-ground);
    border-left: 3px solid var(--lc-highlight);
    padding: var(--lc-space-4);
}
.refund-box h3 { margin-top: 0; }

.course-pick { display: flex; align-items: center; gap: var(--lc-space-2); margin: var(--lc-space-1) 0; font-size: var(--lc-text-base); }

/* --- The card edge -------------------------------------------------------------------------------
   One pixel of the logo pink on the top and the left of every raised surface. Two edges rather
   than four on purpose: a pink box reads as a warning, a pink corner reads as a mark. It is
   decoration and never carries meaning, so no screen is allowed to use it as a signal.
   Three surfaces are deliberately left out. The arrival page already wears a three-pixel pink
   rule across the top and would end up with two different pinks meeting at the corner. A survey
   question uses its left border to say "answered", and a permanent pink one would destroy the
   only signal on that screen. And the video panel is dark, where the pink goes muddy. */
.card,
.side-card,
.stat,
.workbook,
.buy-box,
.master-detail > .detail,
.chart-card {
    border-top-color: var(--lc-card-edge);
    border-left-color: var(--lc-card-edge);
}

/* --- Tabs ----------------------------------------------------------------------------------------
   Two views of one fact. Buttons rather than links because nothing about the address of the page
   changes, and the underline is the pink so it reads as the same "you are here" mark the header
   uses. */
.tabs { display: flex; gap: var(--lc-space-4); border-bottom: 1px solid var(--lc-line); margin: var(--lc-space-4) 0; }
.tab {
    font: inherit;
    font-size: var(--lc-text-body);
    background: none;
    border: 0;
    padding: 0.5rem 0.1rem 0.6rem;
    color: var(--lc-ink-soft);
    cursor: pointer;
    box-shadow: inset 0 -2px 0 transparent;
}
.tab:hover { color: var(--lc-highlight); }
.tab.current { color: var(--lc-ink); box-shadow: inset 0 -2px 0 var(--lc-highlight); }
.tab:focus-visible { outline: var(--lc-focus); outline-offset: var(--lc-focus-offset); }

/* --- The gateway references --------------------------------------------------------------------
   Stacked rather than in a row: a Razorpay identifier is long enough that three of them side by
   side push the money off the screen, and the money is why the page exists. */
td.refs { min-width: 15rem; }
td.refs .ref { display: block; line-height: 1.35; }
td.refs .ref .l {
    display: inline-block;
    min-width: 4.4rem;
    color: var(--lc-muted);
    font-size: var(--lc-text-xs);
}
td.refs code { font-size: var(--lc-text-xs); word-break: break-all; }
td.refs .tries { color: var(--lc-warning); font-size: var(--lc-text-xs); }
td.refs .muted { color: var(--lc-muted); font-size: var(--lc-text-xs); }

/* --- List on the left, content on the right ----------------------------------------------------
   The pattern for any admin screen that edits one of many things. On a phone the list becomes a
   dropdown above the panel rather than a column beside it, which is the shape Colin asked for and
   also the only one that works at 390 pixels. */
.master-detail { display: grid; grid-template-columns: minmax(12rem, 17rem) 1fr; gap: var(--lc-space-5); align-items: start; }
.master-detail > .master { display: flex; flex-direction: column; gap: 2px; }
.master-detail > .master .pick {
    font: inherit;
    font-size: var(--lc-text-base);
    text-align: left;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    padding: 0.5rem 0.7rem;
    color: var(--lc-ink-soft);
    cursor: pointer;
    border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
}
.master-detail > .master .pick:hover { background: var(--lc-line-soft); color: var(--lc-ink); }
.master-detail > .master .pick.current {
    background: var(--lc-card);
    border-left-color: var(--lc-highlight);
    color: var(--lc-ink);
    font-weight: 500;
}
.master-detail > .master .pick:focus-visible { outline: var(--lc-focus); outline-offset: -2px; }
.master-detail > .master .pick .sub { display: block; color: var(--lc-muted); font-size: var(--lc-text-xs); }
.master-detail > .detail {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-5);
}
.master-detail > .detail h2:first-child { margin-top: 0; }
.master-pick-mobile { display: none; }

@media (max-width: 48rem) {
    .master-detail { grid-template-columns: 1fr; }
    .master-detail > .master { display: none; }
    .master-pick-mobile { display: block; margin-bottom: var(--lc-space-4); }
}

/* --- Charts --------------------------------------------------------------------------------------
   Drawn in the page. A third-party charting script on an administrator screen that shows money is
   a supply-chain risk taken for a bar chart, and a bar chart is not worth it. */
.chart-card {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-5);
    margin: var(--lc-space-4) 0 var(--lc-space-5);
}
.chart-card h3 { margin-top: 0; }
.chart { display: flex; align-items: flex-end; gap: 2px; height: 9rem; margin: var(--lc-space-4) 0 var(--lc-space-2); }
.chart .bar { flex: 1 1 0; min-width: 2px; background: var(--lc-line); }
.chart .bar.has { background: var(--lc-accent); }
.chart .bar.today { background: var(--lc-highlight); }
.chart-axis { display: flex; justify-content: space-between; color: var(--lc-muted); font-size: var(--lc-text-xs); }

.bar-list { display: flex; flex-direction: column; gap: var(--lc-space-3); margin: var(--lc-space-4) 0; }
.bar-list .row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: var(--lc-space-3); align-items: center; }
.bar-list .track { background: var(--lc-line-soft); height: 0.85rem; border-radius: var(--lc-radius-pill); overflow: hidden; display: flex; }
.bar-list .fill { display: block; height: 100%; background: var(--lc-accent); }
.bar-list .fill.refunded { background: var(--lc-warning); }
.bar-list .amount { font-variant-numeric: tabular-nums; }
@media (max-width: 48rem) {
    .bar-list .row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* --- Asking before something irreversible-ish --------------------------------------------------
   Not a browser confirm() and not a modal: an inline panel that says exactly what is about to
   happen and how much of it. It sits in the flow so it cannot be dismissed by accident and so it
   reads the same on a phone. The pink rule is the same one the arrival page uses - it means "look
   here", and this is the one place on a learner screen where that is true. */
.confirm {
    background: var(--lc-card);
    border: 1px solid var(--lc-line);
    border-top: 3px solid var(--lc-highlight);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow-card);
    padding: var(--lc-space-5);
    margin: var(--lc-space-4) 0 var(--lc-space-5);
    max-width: var(--lc-measure);
}
.confirm h2 { margin-top: 0; }
.confirm p { color: var(--lc-ink-soft); }

/* The courses a product opens, laid out across the width instead of down the page.
   Sixteen of them in one column was the whole complaint - the panel got taller every time a
   course was added, and choosing one meant scrolling past most of the catalogue. */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.15rem var(--lc-space-4);
    margin: var(--lc-space-2) 0 var(--lc-space-4);
}
.edit-grid + h3, .pick-grid + .button-row { margin-top: var(--lc-space-4); }
.button-row { display: flex; gap: var(--lc-space-3); flex-wrap: wrap; margin: var(--lc-space-4) 0; }
.master-pick-mobile label { display: block; font-size: var(--lc-text-base); color: var(--lc-muted); margin-bottom: 0.2rem; }

/* The order count belongs under the course name, not trailing off the end of it. */
.bar-list .row .note { display: block; }

/* A pill is a label, not a sentence: two words wrapping inside a rounded border reads as broken
   rather than as emphasis. */
.pill { white-space: nowrap; }

/* The tabs on the course page are links, so they need the anchor treatment as well as
   the button one - same look, whichever element carries it. */
.tabs a.tab { text-decoration: none; color: var(--lc-ink-soft); }
.tabs a.tab:hover { color: var(--lc-highlight); }
.tabs a.tab.current { color: var(--lc-ink); }

/* All three panels are in the page; two of them are simply not shown. A crawler, a reader with
   stylesheets off, and anybody who lands on the address without a tab in it all still get the
   whole description rather than a third of it. */
.tab-panel.away { display: none; }
.tab-panel > h3:first-child { margin-top: var(--lc-space-4); }
.outcomes { max-width: var(--lc-measure); }
.outcomes li { margin-bottom: var(--lc-space-2); }

/* Slides are pixels, not files. Nothing here can stop a screenshot and nothing pretends
   to - the watermark is the deterrent. These rules only remove the obvious invitations: no drag,
   no long-press save sheet on a phone, no text selection. */
.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--lc-space-2); }
.slides .slide {
    position: relative;
    display: block;
    border: 1px solid var(--lc-line);
    border-top-color: var(--lc-card-edge);
    border-left-color: var(--lc-card-edge);
    border-radius: var(--lc-radius-sm);
    overflow: hidden;
    background: var(--lc-line-soft);
    line-height: 0;
}
.slides .slide img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}
.slides .slide .n {
    position: absolute;
    left: 0; bottom: 0;
    background: var(--lc-accent);
    color: var(--lc-accent-ink);
    font-size: var(--lc-text-xs);
    line-height: 1;
    padding: 3px 6px;
    border-radius: 0 var(--lc-radius-sm) 0 0;
}
.slides .slide:focus-visible { outline: var(--lc-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   The recording studio.

   Colin: the slides run across the page in a row of small boxes, with
   arrows either end, so the desk below gets the full width. The row is the
   progress bar - Andrea reads it to see what is left, so what is not yet
   recorded is the thing that has to stand out.
   --------------------------------------------------------------------------- */
.slide-strip { margin: var(--lc-space-4) 0; display: grid; gap: var(--lc-space-2); }
.slide-strip-head .note { margin: 0; }
.slide-strip-row { display: flex; align-items: stretch; gap: var(--lc-space-2); min-width: 0; }
.strip {
    display: flex;
    gap: var(--lc-space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 2px var(--lc-space-1);
}
.strip-arrow {
    flex: 0 0 auto;
    width: 2.25rem;
    font: inherit;
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    background: var(--lc-card);
    color: var(--lc-ink-soft);
    cursor: pointer;
}
.strip-arrow:hover { border-color: var(--lc-accent-light); color: var(--lc-ink); }
.strip-arrow:focus-visible { outline: var(--lc-focus); outline-offset: 2px; }
/* Colin: "it has a simple black border ... it is not in theme." Cards on the theme's
   lines, the one being worked on marked in pink as the other lists are. */
.strip-box {
    flex: 0 0 8.5rem;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font: inherit;
    text-align: left;
    background: var(--lc-card);
    color: var(--lc-ink-soft);
    border: 1px solid var(--lc-line);
    border-top: 3px solid var(--lc-line);
    border-radius: var(--lc-radius);
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.strip-box:hover:not(:disabled) { border-color: var(--lc-accent-light); color: var(--lc-ink); }
.strip-box.current {
    border-color: var(--lc-highlight);
    border-top-color: var(--lc-highlight);
    background: var(--lc-highlight-ground);
    color: var(--lc-ink);
}
.strip-box:disabled { cursor: not-allowed; opacity: 0.7; }
.strip-box:focus-visible { outline: var(--lc-focus); outline-offset: 2px; }
.strip-box .slide-no { font-weight: 600; color: var(--lc-ink); white-space: nowrap; }
.strip-box .slide-no .fa-film { margin-left: 0.2rem; font-size: 0.85em; }
.strip-box .sub { font-size: var(--lc-text-xs); color: var(--lc-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip-box .sub.not-yet { color: var(--lc-warning); font-weight: 600; }
.strip-box .sub.approved { color: var(--lc-success); font-weight: 600; }
.strip-box .sub.to-approve { color: var(--lc-highlight); font-weight: 600; }

/* Browsing for the deck. Its own block above the two columns, because on a lesson with
   no slides it is the only thing on the page that does anything. */
.deck-upload { margin: var(--lc-space-4) 0; }
.deck-upload > label { display: block; font-weight: 600; margin-bottom: var(--lc-space-2); }
.deck-row { display: flex; gap: var(--lc-space-3); align-items: center; flex-wrap: wrap; }
.deck-row input[type="file"] { flex: 1 1 22rem; min-width: 0; }
.deck-extra { margin-top: var(--lc-space-3); }

/* Folded away by default: making a new edition is rare and irreversible-ish, and a
   button for it sitting beside Publish is a button somebody eventually presses by accident. */
.new-edition { margin: var(--lc-space-4) 0; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); padding: var(--lc-space-3); }
.new-edition > summary { cursor: pointer; font-weight: 600; }

/* Up, down, out. Buttons rather than dragging: dragging is nicer on a mouse and
   unusable on a trackpad with one hand on a microphone. */
.slide-order { display: flex; gap: var(--lc-space-2); flex-wrap: wrap; }

.studio-desk { min-width: 0; }
.studio-desk > h2 { margin-bottom: var(--lc-space-2); }
/* Move up, Move down and Remove at the left; what this slide is recorded as, and whether
   it's approved, at the right of the same line. */
.desk-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lc-space-2) var(--lc-space-4); flex-wrap: wrap; }
.desk-status { margin: 0; flex: 1 1 24rem; text-align: right; color: var(--lc-ink-soft); font-size: var(--lc-text-sm); }
.desk-status .is-approved { color: var(--lc-success); }
.desk-status .is-to-approve { color: var(--lc-highlight); }
@media (max-width: 47.9375rem) { .desk-status { text-align: left; } }

/* The row above the script box: what state the script is in, how long it takes to say,
   and the two buttons. It wraps rather than scrolls, because on a laptop beside a microphone the
   Save button going off the edge is the same as not having one. */
.studio-script-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lc-space-3);
    flex-wrap: wrap;
    margin-top: var(--lc-space-4);
}
.studio-script-tools {
    display: flex;
    align-items: center;
    gap: var(--lc-space-2);
    flex-wrap: wrap;
}
.btn-small { padding: 0.3rem 0.7rem; font-size: var(--lc-text-sm); }

/* Colin: the slide, her camera, and a divider she drags. Colin:
   "the slide image then a separator then the content i need to read and another separator then my
   video image (when I am recording video also) the separator moves left and right". --slide-w and
   --self-w are set by dragging and remembered in the browser. The words take what is left, and the
   row is as tall as the slide. */
.studio-stage {
    --slide-w: 42%;
    --self-w: 20%;
    display: grid;
    grid-template-columns: var(--slide-w) 14px minmax(14rem, 1fr);
    /* Tall enough to read from even when the slide has been made narrow. */
    grid-template-rows: minmax(22rem, auto);
    align-items: stretch;
    margin-top: var(--lc-space-4);
}
.studio-stage.with-self { grid-template-columns: var(--slide-w) 14px minmax(14rem, 1fr) 14px var(--self-w); }
.studio-stage .studio-frame { align-self: start; width: 100%; }
.studio-script { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.studio-script .studio-script-head { margin-top: 0; }
/* Room between the buttons and the box, so the pink focus ring around the box no longer
   runs through Draft it again and Save. The box fills the height beside the slide, and
   the words are a size she can read from while speaking. */
.studio-script textarea {
    flex: 1 1 auto;
    min-height: 12rem;
    margin-top: var(--lc-space-3);
    line-height: var(--lc-leading-loose);
    font-size: 1.125rem;
    resize: vertical;
}
.studio-self {
    position: relative;
    align-self: start;
    aspect-ratio: 4 / 3;
    min-width: 0;
    background: var(--lc-studio-ground);
    border-radius: var(--lc-radius-sm);
    overflow: hidden;
}
.studio-self video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.studio-self-label {
    position: absolute; left: var(--lc-space-2); bottom: var(--lc-space-2);
    padding: 0.1rem 0.5rem; border-radius: var(--lc-radius-pill);
    background: var(--lc-scrim); color: var(--lc-on-dark); font-size: var(--lc-text-xs); font-weight: 600;
}
.vsplit { cursor: col-resize; touch-action: none; position: relative; }
.vsplit::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 6px; width: 2px;
    background: var(--lc-line);
}
.vsplit::after {
    content: "";
    position: absolute; top: 3rem; left: 3px; width: 8px; height: 3rem;
    border-radius: 4px; background: var(--lc-accent-light);
}
.vsplit:hover::before, .vsplit.dragging::before, .vsplit:focus-visible::before { background: var(--lc-highlight); }
.vsplit:focus-visible { outline: none; }
.vsplit:focus-visible::after, .vsplit.dragging::after { background: var(--lc-highlight); }
.clip-missing { margin: var(--lc-space-2) 0 0; }
.unsaved-bar { display: grid; gap: var(--lc-space-2); scroll-margin: var(--lc-space-6); }
.unsaved-bar p { margin: 0; }
@media (max-width: 60rem) {
    .studio-stage, .studio-stage.with-self { grid-template-columns: 1fr; gap: var(--lc-space-3); }
    .studio-self { width: 50%; }
    .vsplit { display: none; }
}

/* Colin: "on the playback we should be able see the waveform and the duration and skip
   like you can move forward in Youtube." The part played is coloured in; a click goes there. */
.take-bar { display: flex; align-items: stretch; gap: var(--lc-space-2); margin-top: var(--lc-space-3); }
.take-wave {
    --wave: var(--lc-line);
    --wave-played: var(--lc-highlight);
    --wave-head: var(--lc-ink);
    flex: 1 1 auto;
    min-width: 0;
    height: 3.25rem;
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    background: var(--lc-card);
    cursor: pointer;
}
.take-bar .strip-arrow { width: 2.5rem; }
.take-time { align-self: center; font-variant-numeric: tabular-nums; color: var(--lc-ink-soft); font-size: var(--lc-text-sm); white-space: nowrap; min-width: 6.5rem; text-align: right; }

/* Playing a take back: the take appears in the corner where the lesson will show it, and the live
   camera steps aside while it plays. */
.studio-take {
    position: absolute; right: 1.875%; bottom: 3.33%; width: 25%; aspect-ratio: 16 / 9;
    object-fit: cover; border: 2px solid var(--lc-on-dark); border-radius: 2px; background: var(--lc-studio-thumb);
    box-shadow: 0 4px 14px var(--lc-shadow-dark); display: none;
}
.studio-frame.playing .studio-take { display: block; }
.studio-frame.playing .studio-camera { display: none; }
.studio-playing {
    position: absolute; left: var(--lc-space-3); top: var(--lc-space-3);
    padding: 0.2rem 0.6rem; border-radius: var(--lc-radius-pill);
    background: var(--lc-scrim); color: var(--lc-on-dark); font-size: var(--lc-text-sm); font-weight: 600;
    display: none;
}
.studio-frame.playing .studio-playing { display: block; }

/* The frame the slide sits in. The camera is placed on it at the size and position the assembler
   uses (a quarter of the width, 24 pixels in from the corner of a 1280 frame), so the preview is
   the lesson. Mirrored, as every camera preview is, because that is what people expect to see;
   the recording itself is not. */
.studio-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--lc-video-black);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius-sm);
    overflow: hidden;
}
.studio-slide-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.studio-camera {
    position: absolute;
    right: 1.875%;
    bottom: 3.33%;
    width: 25%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--lc-studio-thumb);
    border: 2px solid var(--lc-on-dark);
    border-radius: 2px;
    box-shadow: 0 4px 14px var(--lc-shadow-dark);
    transform: scaleX(-1);
    display: none;
}
.studio-camera.on { display: block; }
/* Her picture can sit in any corner, so it never covers the slide's words. The same
   distances from the edges as the assembler's (24 pixels on a 1280 by 720 frame). */
.studio-camera.corner-bottom-left, .studio-take.corner-bottom-left { right: auto; left: 1.875%; }
.studio-camera.corner-top-right, .studio-take.corner-top-right { bottom: auto; top: 3.33%; }
.studio-camera.corner-top-left, .studio-take.corner-top-left { right: auto; left: 1.875%; bottom: auto; top: 3.33%; }
.studio-live {
    position: absolute;
    left: var(--lc-space-3);
    top: var(--lc-space-3);
    padding: 0.2rem 0.6rem 0.2rem 1.4rem;
    border-radius: var(--lc-radius-pill);
    background: var(--lc-scrim);
    color: var(--lc-on-dark);
    font-size: var(--lc-text-sm);
    font-weight: 600;
}
.studio-live::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-radius: 50%;
    background: var(--lc-recording);
    animation: lc-live 1.2s ease-in-out infinite;
}
.studio-live.paused::before { background: var(--lc-paused); animation: none; }
@keyframes lc-live { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .studio-live::before { animation: none; } }
.studio-rec-icon { color: var(--lc-recording-soft); font-size: 0.7em; vertical-align: 0.15em; }

.studio-playback { display: flex; align-items: center; gap: var(--lc-space-3); flex-wrap: wrap; margin-top: var(--lc-space-3); }
.studio-playback video { width: 16rem; max-width: 100%; border-radius: var(--lc-radius-sm); background: var(--lc-video-black); }
.take-video { width: 12rem; border-radius: var(--lc-radius-sm); background: var(--lc-video-black); }

.studio-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-space-2);
    margin-top: var(--lc-space-3);
}
.studio-controls audio { max-width: 20rem; }
.mode-pick + .studio-controls-one-line { margin-top: var(--lc-space-3); }

/* The captions Amazon wrote for a built lesson, with the video to check them against.
   The time is fixed and the words are editable, which is the whole of what correcting them means. */
.studio-captions { margin-top: var(--lc-space-4); display: grid; gap: var(--lc-space-2); max-width: 48rem; }
.studio-captions h3 { margin: 0; }
.studio-watch { width: 100%; max-width: 40rem; border-radius: var(--lc-radius-sm); background: var(--lc-video-black); }
.caption-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lc-space-1); max-height: 28rem; overflow-y: auto; }
.caption-list li { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: var(--lc-space-2); }
.caption-time { font-variant-numeric: tabular-nums; color: var(--lc-muted); font-size: .9em; }

/* The microphone check. The faint band is where her voice should sit (-32 to -8 dBFS
   on a -60 to 0 scale); the bar is what it hears, moment to moment. */
/* The full width of the desk (the warning was wrapping at half of it), and the band
   lowered to -42 to -8 dBFS: a headset at a normal input volume read as too quiet. */
.mic-check { margin-top: var(--lc-space-3); display: grid; gap: var(--lc-space-2); }
.mic-check p { margin: 0; }
.mic-level { position: relative; height: .7rem; border-radius: 999px; overflow: hidden;
    background: linear-gradient(to right, transparent 30%, var(--lc-success-ground) 30%, var(--lc-success-ground) 86.7%, transparent 86.7%), var(--lc-line-soft); }
.mic-level span { display: block; height: 100%; width: calc(var(--level, 0) * 100%); background: var(--lc-highlight); transition: width 60ms linear; }
@media (prefers-reduced-motion: reduce) { .mic-level span { transition: none; } }
.status-ok { background: var(--lc-success-ground); color: var(--lc-success); }

/* Tabular figures so the timer does not jiggle the button as the seconds change. */
.elapsed {
    font-variant-numeric: tabular-nums;
    margin-left: var(--lc-space-1);
}

.takes { margin-top: var(--lc-space-4); }
.takes summary { cursor: pointer; color: var(--lc-ink-soft); }
.takes audio { max-width: 14rem; }

/* ---------------------------------------------------------------------------
   Suggestions. A reading screen: the words people wrote get the
   width and the weight, and everything about them sits underneath in the
   quiet colour. A grid would have squeezed the one valuable thing on the
   page into a column.
   --------------------------------------------------------------------------- */
.suggestion .said {
    font-size: var(--lc-text-body);
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 0 0 var(--lc-space-2);
}
.suggest textarea { width: 100%; }

/* ---------------------------------------------------------------------------
   The course advisor. One card per match, read top to bottom rather
   than compared side by side - the order is the recommendation, so a grid that
   let the eye start anywhere would undo it.

   The stars are the only decorative thing on the page and they earn it: they
   are the one part somebody takes in before reading a word.
   --------------------------------------------------------------------------- */
.matches {
    display: flex;
    flex-direction: column;
    gap: var(--lc-space-3);
    margin: var(--lc-space-4) 0;
}
.matches .match { border-left: 3px solid var(--lc-accent); }
.stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--lc-space-1);
}
.star { color: var(--lc-line); line-height: 1; }
/* The logo pink, and the only place on a learner page it is used at size: a filled
   star is a judgement, and it should look like one. */
.star.on { color: var(--lc-highlight); }
.stars .meta { margin-left: var(--lc-space-2); }
.matches .headline {
    font-weight: 600;
    margin: 0 0 var(--lc-space-1);
}
.matches .reason { margin: 0 0 var(--lc-space-2); }

/* --- The course build workflow ------------------------------------------------------
   One page that holds the stages a course goes through. The tick is the whole design: it has three
   states, not two, because "9 of 12" is what lets somebody pick up work they left a fortnight ago,
   and a two-state tick has to call that unfinished. */

.build-group { margin-top: var(--lc-space-6); }
.build-group > h2 { display: flex; align-items: baseline; gap: var(--lc-space-2); }
.build-group > h2 > .count { font-size: var(--lc-text-xs); color: var(--lc-muted); font-weight: 400; }

.build-list { display: flex; flex-direction: column; gap: var(--lc-space-2); }

.build-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto auto;
    align-items: center;
    gap: var(--lc-space-3);
    padding: var(--lc-space-3);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    background: var(--lc-card);
    text-decoration: none;
    color: inherit;
}
.build-row:hover { border-color: var(--lc-highlight); }
.build-row-name { display: flex; flex-direction: column; min-width: 0; }
.build-row-name > strong { overflow-wrap: anywhere; }
.build-row-state { display: flex; flex-direction: column; gap: var(--lc-space-1); min-width: 0; }
.build-row-pills { display: flex; gap: var(--lc-space-1); flex-wrap: wrap; }
.build-row-when { text-align: right; white-space: nowrap; }

.build-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lc-space-4); flex-wrap: wrap; }
.build-head-state { display: flex; flex-direction: column; align-items: flex-end; gap: var(--lc-space-1); }
/* The course's badge beside its title, here and on the new-course page. */
.build-head-title { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--lc-space-3); align-items: center; }
.build-head-title h1 { margin: 0; }
.build-head-title .lead { grid-column: 2; }
.title-with-badge { display: flex; align-items: center; gap: var(--lc-space-2); }
.title-with-badge .input { flex: 1; min-width: 0; }
/* From a lesson's words to its slides and recording, and back. */
.lesson-goes { display: flex; flex-wrap: wrap; gap: var(--lc-space-2); margin: var(--lc-space-2) 0 var(--lc-space-4); }
.lesson-goes-wide { margin: var(--lc-space-2) 0 var(--lc-space-4); }
.build-grid td .lesson-goes { margin: var(--lc-space-2) 0 var(--lc-space-1); }

/* Colin: "can we not have them as nice pill buttons". The way between pages, and the
   small actions on a row: navy outline on white, filled navy on hover; the -go one is the pink for
   the action that changes what learners see. */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--lc-accent-light);
    border-radius: var(--lc-radius-pill);
    background: var(--lc-card);
    color: var(--lc-accent);
    font: inherit;
    font-size: var(--lc-text-sm);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-pill i { font-size: 0.9em; }
.btn-pill:hover:not(:disabled) { background: var(--lc-accent); border-color: var(--lc-accent); color: var(--lc-accent-ink); text-decoration: none; }
.btn-pill:focus-visible { outline: var(--lc-focus); outline-offset: 2px; }
.btn-pill:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-pill-go { border-color: var(--lc-highlight); color: var(--lc-highlight); }
.btn-pill-go:hover:not(:disabled) { background: var(--lc-highlight); border-color: var(--lc-highlight); color: var(--lc-on-dark); }
.btn-pill-small { padding: 0.15rem 0.6rem; font-size: var(--lc-text-xs); }

/* A lesson's row on the build page. The ticks and the pill under them sit on one
   centre line. */
.build-cell .btn-pill { margin-top: var(--lc-space-1); }
.build-grid td.build-length { text-align: center; color: var(--lc-ink-soft); white-space: nowrap; }
.build-grid .lesson-name { display: block; font-weight: 600; color: var(--lc-ink); }

/* Colin: "Record audio via Polly, no video avatar", "Record audio, no video" and
   "Record audio and Video". One choice of three, shown as three joined buttons. */
.mode-pick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--lc-space-3);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
    overflow: hidden;
}
.mode-pick .mode {
    display: flex;
    align-items: center;
    gap: var(--lc-space-2);
    padding: 0.55rem 0.8rem;
    border: 0;
    border-left: 1px solid var(--lc-line);
    background: var(--lc-card);
    color: var(--lc-ink-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.mode-pick .mode:first-child { border-left: 0; }
.mode-pick .mode i { font-size: 1.15rem; color: var(--lc-accent-light); }
.mode-pick .mode span { display: flex; flex-direction: column; line-height: 1.25; }
.mode-pick .mode strong { color: var(--lc-ink); font-weight: 600; }
.mode-pick .mode small { font-size: var(--lc-text-xs); color: var(--lc-muted); }
.mode-pick .mode:hover:not(:disabled):not(.on) { background: var(--lc-line-soft); }
.mode-pick .mode.on { background: var(--lc-accent); color: var(--lc-accent-ink); }
.mode-pick .mode.on i, .mode-pick .mode.on strong, .mode-pick .mode.on small { color: var(--lc-accent-ink); }
.mode-pick .mode:focus-visible { outline: var(--lc-focus); outline-offset: -3px; }
.mode-pick .mode:disabled { cursor: not-allowed; }
@media (max-width: 40rem) {
    .mode-pick { grid-template-columns: 1fr; }
    .mode-pick .mode { border-left: 0; border-top: 1px solid var(--lc-line); }
    .mode-pick .mode:first-child { border-top: 0; }
}

/* A label and a small select on the same line as the buttons. */
.inline-field { display: inline-flex; align-items: center; gap: var(--lc-space-2); font-size: var(--lc-text-sm); color: var(--lc-ink-soft); }
.inline-field .input { width: auto; padding-top: 0.45rem; padding-bottom: 0.45rem; }
/* "Draft with AI" beside a box's label on Course details. */
/* A box's hint on the left, its AI controls on the right, on one line under the label. */
.hint-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lc-space-1, 0.25rem) var(--lc-space-3); margin-bottom: var(--lc-space-1, 0.25rem); }
.hint-row .ai-tools { display: inline-flex; align-items: center; gap: var(--lc-space-2); margin-left: auto; }
.hint-row .ai-one { padding: 0; }

/* A toast - "Saved." where the eye is, gone by itself. */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 2000; display: flex; align-items: center; gap: var(--lc-space-2);
         max-width: min(28rem, calc(100vw - 48px)); padding: 0.8rem 1.1rem; border-radius: var(--lc-radius-sm);
         background: var(--lc-accent); color: var(--lc-accent-ink); box-shadow: 0 8px 24px var(--lc-shadow-dark-faint);
         font-size: var(--lc-text-sm); animation: toast-in 160ms ease-out; }
.toast-error { background: var(--lc-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* A lesson's opening and ending, in the studio. */
.lesson-ends { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2) var(--lc-space-4); margin: var(--lc-space-3) 0; }

/* The workbook, a section of the lesson's words page. */
.lesson-workbook { margin-top: var(--lc-space-6, 2.5rem); padding-top: var(--lc-space-4); border-top: 1px solid var(--lc-line); }

/* The workbook editor. */
.wb-editor { list-style: none; margin: var(--lc-space-4) 0; padding: 0; display: grid; gap: var(--lc-space-3); }
.wb-item { border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); background: var(--lc-card); padding: var(--lc-space-3); display: grid; gap: var(--lc-space-2); }
.wb-item-heading { border-left: 3px solid var(--lc-accent, var(--lc-ink)); }
.wb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); }
.wb-kind { font-size: var(--lc-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lc-ink-soft); }
.wb-moves { margin-left: auto; display: inline-flex; gap: 2px; }
.wb-heading-input { font-weight: 600; font-size: 1.05rem; }
.wb-parts, .wb-options-edit { display: grid; gap: var(--lc-space-2); }
.wb-part { display: flex; align-items: center; gap: var(--lc-space-2); }
.wb-part .input { flex: 1 1 auto; }
.wb-box { flex: 1 1 auto; padding: 0.55rem 0.8rem; border: 1px dashed var(--lc-line); border-radius: var(--lc-radius-sm); color: var(--lc-ink-soft); font-size: var(--lc-text-sm); }
.wb-mark { color: var(--lc-ink-soft); width: 1.2rem; text-align: center; }
.wb-adds { display: flex; gap: var(--lc-space-2); }
.wb-add-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); margin: var(--lc-space-3) 0; }
.wb-empty { border: 1px dashed var(--lc-line); border-radius: var(--lc-radius-sm); padding: var(--lc-space-3); margin: var(--lc-space-3) 0; }
.wb-answered { margin: var(--lc-space-2) 0; }
.wb-preview { margin-top: var(--lc-space-5); }
.wb-preview summary { cursor: pointer; font-weight: 600; }
.input-small { width: auto; padding-top: 0.3rem; padding-bottom: 0.3rem; font-size: var(--lc-text-sm); }
/* What a course needs before it is published, on its build page. */
.ready-list { list-style: none; margin: var(--lc-space-2) 0; padding: 0; display: grid; gap: var(--lc-space-2); }
.ready-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--lc-space-2); }
.ready-list li > i { width: 1rem; flex: none; }
.ready-list li.unmet > i { color: var(--lc-danger); }
.ready-list li.met > i { color: var(--lc-success); }
.ready-list li > span { flex: 1 1 20rem; }
.ready-list small { color: var(--lc-ink-soft); }
.ready-done { margin: var(--lc-space-2) 0 var(--lc-space-4); }
.ready-done summary { cursor: pointer; color: var(--lc-ink-soft); }
.check-line { display: flex; align-items: center; gap: var(--lc-space-2); font-weight: 600; }
/* The pauses either side of what is said over a slide. */
.slide-pauses { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2) var(--lc-space-4); margin-top: var(--lc-space-2); }
.slide-pauses .pause-input { width: 5rem; }
.slide-pauses .note { margin: 0; }

/* Signing a slide off. Green, because it is the "done" of this desk. */
.btn-approve { background: var(--lc-success); border-color: var(--lc-success); color: var(--lc-on-dark); }
.btn-approve:hover:not(:disabled) { background: var(--lc-success); border-color: var(--lc-success); filter: brightness(0.92); color: var(--lc-on-dark); }
.pill-big { font-size: var(--lc-text-sm); padding: 0.3rem 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; }
.btn.is-playing { border-color: var(--lc-highlight); color: var(--lc-highlight); }
.publish-refused { display: block; margin-top: 4px; max-width: 18rem; font-size: .85em; }
/* Drafting a lesson's words, and which fields are still the model's. */
.draft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); margin-bottom: var(--lc-space-3); }
.drafted-pill { margin-left: var(--lc-space-2); font-size: .75em; vertical-align: .1em; }

.build-checks { display: flex; flex-direction: column; gap: var(--lc-space-2); }
.build-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--lc-space-3);
    padding: var(--lc-space-3);
    border: 1px solid var(--lc-line);
    border-radius: var(--lc-radius);
}
.build-check > div { display: flex; flex-direction: column; }

/* The tick. Green for done, pink for part-done, a dash for not started - a dash rather than a cross
   because not started is not a failure and a page full of crosses reads as one. */
.tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 1px solid var(--lc-line);
    font-size: var(--lc-text-xs);
    text-decoration: none;
    flex: none;
}
a.tick:hover { border-color: var(--lc-highlight); }
.tick-done { border-color: var(--lc-success); color: var(--lc-success); background: var(--lc-success-ground); }
.tick-part { border-color: var(--lc-highlight); color: var(--lc-highlight); background: var(--lc-highlight-ground); }
.tick-none { color: var(--lc-muted); background: var(--lc-ground); }

.build-cell { display: flex; flex-direction: column; align-items: center; gap: var(--lc-space-1); text-align: center; }
.build-grid td { vertical-align: top; }
/* One width per stage column in every module's table, so the ticks line up down
   the page; and a locked stage is a grey padlock rather than a link to an empty screen. */
.build-grid { table-layout: fixed; width: 100%; }
.build-grid th:first-child, .build-grid td:first-child { width: 34%; }
.build-grid th:not(:first-child) { text-align: center; }
/* Adding and renaming modules and lessons in place. */
.build-add { display: flex; align-items: flex-end; gap: var(--lc-space-3); flex-wrap: wrap; margin: var(--lc-space-3) 0; }
.build-add .field { flex: 1 1 16rem; margin: 0; }
.build-module-head { display: flex; align-items: baseline; gap: var(--lc-space-3); }
.page .build-module-head h2 { margin-right: auto; }
.tick-locked { color: var(--lc-muted); background: var(--lc-ground); border-style: dashed; font-size: 0.7rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.build-grid td .meta { display: block; }

.plain-list { margin: var(--lc-space-2) 0; padding-left: var(--lc-space-4); color: var(--lc-ink-soft); }

@media (max-width: 40rem) {
    .build-row { grid-template-columns: minmax(0, 1fr); }
    .build-row-when { text-align: left; }
    .build-check { grid-template-columns: auto minmax(0, 1fr); }
    .build-check > .btn { grid-column: 2; justify-self: start; }
}

/* The one live action on a course that has no deck yet. Deliberately loud: it is the
   whole answer to "what do I do next" and everything below it is waiting on it. */
.build-next {
    margin-top: var(--lc-space-5);
    padding: var(--lc-space-4);
    border: 1px solid var(--lc-highlight);
    border-left-width: 4px;
    border-radius: var(--lc-radius);
    background: var(--lc-highlight-ground);
}
.build-next > h2 { margin-top: 0; }
.build-module { margin-top: var(--lc-space-4); }
.input-narrow { width: 5.5rem; display: inline-block; }
.nowrap { white-space: nowrap; }

/* The price form. A currency needs a few characters, not a third of the row. */
.price-grid { display: grid; gap: var(--lc-space-4); align-items: start; }
@media (min-width: 40rem) { .price-grid { grid-template-columns: max-content minmax(0, 24rem); } }
.price-grid > * { min-width: 0; }
.price-grid select.input { width: auto; min-width: 6rem; }

/* A slide's video clip, shown over the slide in the desk the way it will fill the screen
   in the lesson; and, while recording, where she has said it plays. */
.studio-clip {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; background: var(--lc-video-black); z-index: 2;
}
.studio-clip-marked {
    position: absolute; right: var(--lc-space-3); top: var(--lc-space-3);
    padding: 0.2rem 0.6rem; border-radius: var(--lc-radius-pill);
    background: var(--lc-scrim); color: var(--lc-on-dark);
    font-size: var(--lc-text-sm); font-weight: 600;
}


/* Videos a lesson links to: Andrea's table on the lesson editor, and the learner's list. */
.lesson-links { margin-top: var(--lc-space-6); }
.links-grid td { vertical-align: middle; }
.links-grid td .input { min-width: 14rem; }
.links-grid td.actions { white-space: nowrap; }
.link-add { display: grid; gap: var(--lc-space-3); align-items: end; margin-top: var(--lc-space-4); }
@media (min-width: 48rem) { .link-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } }
.link-add .field { margin-bottom: 0; }
.watch-links { list-style: none; padding: 0; margin: 0 0 var(--lc-space-5); display: grid; gap: var(--lc-space-2); }
.watch-links a { font-weight: 600; }
.watch-links .meta { margin-left: var(--lc-space-2); }

/* People on a course: a company's private course, given from a spreadsheet until a date. */
.access-course { max-width: 34rem; }
.access-add { margin: var(--lc-space-4) 0 var(--lc-space-5); }
.access-add-grid { display: grid; gap: var(--lc-space-5); }
@media (min-width: 56rem) { .access-add-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.access-add .check, .access-bulk .check { display: inline-flex; align-items: center; gap: var(--lc-space-2); font-weight: 400; margin-top: var(--lc-space-2); }
.access-result { border-top: 1px solid var(--lc-line); margin-top: var(--lc-space-4); padding-top: var(--lc-space-3); }
.access-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-3); background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-3) var(--lc-space-4); margin: var(--lc-space-3) 0; position: sticky; top: 4.5rem; z-index: 2; }
.access-bulk .check { margin-top: 0; }
.field-inline { display: inline-flex; align-items: center; gap: var(--lc-space-2); }
.access-grid td.center, .access-grid th.center { width: 2.5rem; text-align: center; }
.access-bulk input[type=date], .access-add input[type=date] { width: 11.5rem; max-width: 100%; }

/* "Would just have a pop up saying are you sure when you are to make it available to
   everyone." The one place the admin side uses a pop-up: making a company's course public can't be
   taken back from anybody who saw it, so it is in the way on purpose. Same panel as .confirm. */
.modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--lc-ink) 45%, transparent); z-index: 1000; }
.modal.confirm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto; margin: 0; }
.modal .actions { display: flex; flex-wrap: wrap; gap: var(--lc-space-3); margin-top: var(--lc-space-4); }
.access-counts { margin: 0 0 var(--lc-space-2); }

/* --- Modules and lessons, moved by dragging ----------------------------------------------------
   Colin: "create new modules and drag drop into them." Used by the proposal (StructureEditor) and
   by the Modules and lessons page. A lesson is a row with a handle; a module is a box that takes a
   drop anywhere in it. The pink line above a row is where the dragged lesson will land. */
.structure { display: grid; gap: var(--lc-space-4); }
.structure-module { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-3) var(--lc-space-4); }
.structure-module.drop-here { border-color: var(--lc-highlight); box-shadow: 0 0 0 2px var(--lc-highlight-ground); }
.structure-module-head { display: flex; align-items: center; gap: var(--lc-space-3); flex-wrap: wrap; }
.structure-module-head .input, .structure-module-head h2 { flex: 1 1 16rem; margin: 0; }
.structure-module-head h2 { font-size: var(--lc-text-lg, 1.15rem); }
.structure-lessons { list-style: none; margin: var(--lc-space-3) 0 0; padding: 0; display: grid; gap: var(--lc-space-2); }
.structure-lesson { display: grid; grid-template-columns: auto 5.2rem minmax(0, 1fr) auto; align-items: start; gap: var(--lc-space-2) var(--lc-space-3);
    background: var(--lc-card); border: 1px solid var(--lc-line); border-left: 2px solid var(--lc-highlight); border-radius: var(--lc-radius); padding: var(--lc-space-2) var(--lc-space-3); cursor: grab; }
/* Colin: "the left hand side of the lesson cards to have the pink vertical left border, just 2 pixels wide". */
.structure-add-lesson { display: flex; justify-content: flex-start; }
.structure-lesson.is-dragged { opacity: .45; }
.structure-lesson.drop-before { box-shadow: 0 -3px 0 0 var(--lc-highlight); }
.structure-lesson .drag-handle { color: var(--lc-ink-soft); font-size: 1.2rem; line-height: 2.2rem; user-select: none; }
.structure-code { font-weight: 600; line-height: 2.2rem; font-variant-numeric: tabular-nums; }
.structure-fields { display: grid; gap: var(--lc-space-2); min-width: 0; }
.structure-nums { display: flex; flex-wrap: wrap; gap: var(--lc-space-3); align-items: center; font-size: var(--lc-text-sm, .9rem); color: var(--lc-ink-soft); }
.structure-nums label { display: inline-flex; align-items: center; gap: var(--lc-space-1, .25rem); font-weight: 400; margin: 0; }
.structure-why { font-size: var(--lc-text-sm, .9rem); }
.structure-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--lc-space-1, .25rem); }
.structure-drop { border: 1px dashed var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-2) var(--lc-space-3); color: var(--lc-ink-soft); font-size: var(--lc-text-sm, .9rem); text-align: center; }
/* Always there, never appearing mid-drag: anything that moves when a drag starts moves the target out from under the pointer. */
.structure-drop { padding-top: var(--lc-space-1); padding-bottom: var(--lc-space-1); }
.structure-add { display: flex; gap: var(--lc-space-3); flex-wrap: wrap; align-items: center; }
.structure-add .input { flex: 1 1 16rem; }
.input-tiny { width: 4.5rem; display: inline-block; }
.input-small { padding-top: .3rem; padding-bottom: .3rem; font-size: var(--lc-text-sm, .9rem); max-width: 14rem; }
@media (max-width: 40rem) {
    .structure-lesson { grid-template-columns: 5.2rem minmax(0, 1fr); }
    .structure-lesson .drag-handle { display: none; }
    .structure-actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}
.structure-length { align-items: flex-end; gap: var(--lc-space-3); }
.structure-length .form-block { margin-bottom: 0; }
.structure-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); color: var(--lc-danger); font-size: var(--lc-text-sm); }
.structure-module > .structure-add { margin-top: var(--lc-space-3); }

/* "Module 1" and "Lesson 1.1" in words, because 1.1 and 1.2 read as two modules. */
.structure-kind { font-size: var(--lc-text-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lc-highlight); white-space: nowrap; }
.structure-code .structure-kind { color: var(--lc-ink-soft); margin-right: .2rem; }

/* "an animated fontawesome icon instructing the user to wait and not navigate away." */
.busy { display: flex; align-items: center; gap: var(--lc-space-3); background: var(--lc-info-ground); border-radius: var(--lc-radius-sm);
    padding: var(--lc-space-3) var(--lc-space-4); margin: var(--lc-space-3) 0 var(--lc-space-4); }
.busy-icon { font-size: 1.9rem; color: var(--lc-highlight); flex: none; }
.busy strong { display: block; color: var(--lc-ink); }
.busy span { color: var(--lc-ink-soft); font-size: var(--lc-text-sm); }

/* The Publish check: every slide, how it is narrated, and whether it is good to go;
   then the video, built and watched. Wider than a confirm, because it is a list to read. */
.modal.confirm.publish-check { width: min(54rem, calc(100vw - 2rem)); }
.publish-slides td { vertical-align: middle; }
.publish-thumb { width: 8rem; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); display: block; }
.publish-check .verdict { font-weight: 600; }
.publish-check .verdict.good, .publish-video li.good > i { color: var(--lc-success); }
.publish-check .verdict.held, .publish-video li.held > i { color: var(--lc-danger); }
.publish-check .verdict.warn, .publish-check .note > .fa-triangle-exclamation { color: var(--lc-warning); }
.publish-video { list-style: none; padding: 0; margin: var(--lc-space-4) 0 0; display: grid; gap: var(--lc-space-2); }
.publish-video li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); }
.publish-watch { display: inline-flex; gap: var(--lc-space-2); margin-left: auto; }

/* A setting that is a list of words: a full-width box rather than a keyhole. */
.setting-list .setting-what { margin: 0 0 var(--lc-space-2); }
.setting-list-box { width: 100%; min-height: 10rem; resize: vertical; font-family: inherit; line-height: 1.5; }
.setting-list-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--lc-space-3); margin-top: var(--lc-space-2); }

/* The video encoding page. */
.pill-bad { border-color: var(--lc-danger); color: var(--lc-danger); }
.encode-workers { list-style: none; padding: 0; margin: 0 0 var(--lc-space-4); display: grid; gap: var(--lc-space-2); }
.encode-workers li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); }
.encode-course { display: block; }
.encode-error { color: var(--lc-danger); }
.admin-filter { display: flex; justify-content: flex-end; margin-top: var(--lc-space-4); }
.admin-filter .input { width: min(20rem, 100%); }

/* A lesson's own switches across the top of its words page and in the studio. */
.edit-single > * { min-width: 0; }
.lesson-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--lc-space-3);
                   margin: var(--lc-space-4) 0; padding: var(--lc-space-3) var(--lc-space-4);
                   border: 1px solid var(--lc-line); border-radius: var(--lc-radius); background: var(--lc-card); }
.lesson-setting { display: flex; gap: var(--lc-space-2); align-items: flex-start; flex-wrap: wrap; margin: 0; }
.lesson-setting > span { display: flex; flex-direction: column; gap: 2px; }
.lesson-setting small { color: var(--lc-muted); font-size: var(--lc-text-sm); line-height: 1.4; }
.lesson-setting .setting-label { font-weight: 600; color: var(--lc-ink); flex-basis: 100%; }
.lesson-setting input.switch { margin-top: 2px; flex: none; }
.pre-watch { margin-top: var(--lc-space-5); }
.input.input-auto { width: auto; max-width: 100%; }
.lead.lead-wide { max-width: none; }
.modal.confirm.modal-video { width: min(56rem, calc(100vw - 2rem)); }
.modal-video video { width: 100%; max-height: 70vh; background: var(--lc-video-black); border-radius: var(--lc-radius); }
.input.input-number { max-width: 10rem; }
.setting-switch { display: inline-flex; gap: var(--lc-space-2); align-items: center; }

/* A course's time with Andrea. */
.course-coaching { display: grid; gap: var(--lc-space-3); }
.coaching-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); margin: 0; }
.coaching-pick > span:first-of-type { min-width: 15rem; font-weight: 500; }
.coaching-pick .input-number { width: 5.5rem; }
.form-row .field.field-short { min-width: 7rem; }
.modal.confirm.modal-wide { width: min(64rem, calc(100vw - 2rem)); }
/* The email template pop-up is one column. */
.modal.confirm.modal-email { width: min(46rem, calc(100vw - 2rem)); }
.template-single { display: grid; gap: var(--lc-space-4); }
.template-single .email-preview h3 { margin: 0 0 var(--lc-space-2); font-size: var(--lc-text-md); }
/* My answers' Download menu, and headings that use the page's width. */
.answers-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--lc-space-3); margin: var(--lc-space-3) 0 var(--lc-space-4); }
.answers-share { margin-left: auto; display: flex; gap: var(--lc-space-3); flex-wrap: wrap; }
.menu-button { position: relative; }
.menu-button > summary { list-style: none; cursor: pointer; }
.menu-button > summary::-webkit-details-marker { display: none; }
.menu-button .menu-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 12rem; display: grid;
    background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow-card); }
.menu-button .menu-list a { padding: var(--lc-space-2) var(--lc-space-3); color: var(--lc-ink); text-decoration: none; }
.menu-button .menu-list a:hover, .menu-button .menu-list a:focus-visible { background: color-mix(in srgb, var(--lc-accent) 10%, transparent); }
h2.heading-wide { max-width: none; text-wrap: wrap; }
td.row-actions > * + * { margin-left: var(--lc-space-2); }
div.row-actions { display: flex; gap: var(--lc-space-2); flex-wrap: wrap; justify-content: flex-end; }
div.row-actions.start { justify-content: flex-start; }
/* one-to-one slots generated, then moved by hand. */
.slot-list { display: grid; gap: var(--lc-space-2); margin: 0 0 var(--lc-space-4); }
.slot-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-3); padding: var(--lc-space-2) var(--lc-space-3);
            border: 1px solid var(--lc-line); border-radius: var(--lc-radius); background: var(--lc-card); }
.slot-row.clash { border-color: var(--lc-highlight); }
.slot-row .slot-n { font-weight: 600; min-width: 4rem; }
.slot-row .form-error { margin: 0; }
/* A booking on one row: what and when on the left, the buttons and the rule on the right. */
.card.booking-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when buttons" "what rule";
    align-items: center; gap: var(--lc-space-2) var(--lc-space-5);
}
.booking-when { grid-area: when; margin: 0; }
.booking-what { grid-area: what; display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2) var(--lc-space-3); }
.booking-buttons { grid-area: buttons; display: flex; gap: var(--lc-space-2); justify-content: flex-end; }
.booking-rule { grid-area: rule; margin: 0; text-align: right; max-width: 26rem; justify-self: end; align-self: start; }
@media (max-width: 40rem) {
    .card.booking-card { grid-template-columns: 1fr; grid-template-areas: "when" "what" "buttons" "rule"; }
    .booking-buttons { justify-content: flex-start; }
    .booking-rule { text-align: left; justify-self: start; }
}
/* Refunded is red on the sales ledger; the decide pop-up's two choices side by side. */
.pill-bad { background: var(--lc-danger-ground); }
.decide-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--lc-space-4); margin-top: var(--lc-space-4); }
.decide-choices section { border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-3); display: grid; gap: var(--lc-space-2); align-content: start; }
.decide-choices h3 { margin: 0; font-size: var(--lc-text-md); }
p.quote { font-style: italic; color: var(--lc-ink-soft); }
.refs a.ref { text-decoration: none; }
/* revenue's top ten in the top card, and taken (green) and refunded (red) day by day. */
.indicative .top-courses { flex: 1 1 100%; }
.indicative .top-courses h3 { margin: 0; font-size: var(--lc-text-md); }
.chart.chart-in-out { gap: 2px; }
.chart-in-out .day { flex: 1 1 0; min-width: 3px; height: 100%; display: flex; align-items: flex-end; gap: 1px; }
.chart-in-out .bar { flex: 1 1 0; min-width: 1px; }
.chart-in-out .bar.in { background: var(--lc-line); }
.chart-in-out .bar.in.has { background: var(--lc-success); }
.chart-in-out .bar.out { background: var(--lc-danger); }
.chart-key { display: flex; gap: var(--lc-space-2); align-items: center; color: var(--lc-muted); font-size: var(--lc-text-sm); margin: 0; }
.chart-key .key { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; }
.chart-key .key.in { background: var(--lc-success); }
.chart-key .key.out { background: var(--lc-danger); margin-left: var(--lc-space-3); }
/* A grid is as tall as its rows and the window scrolls; only a grid given a MaxHeight scrolls inside. */
.lc-grid.lc-grid-capped .e-gridcontent .e-content { max-height: var(--lc-grid-max); overflow-y: auto !important; }

/* --- Receipt ("a button to get my receipt") ------------------------------------------------------- */
.receipt-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--lc-space-3); margin-bottom: var(--lc-space-4); }
.receipt { background: var(--lc-card); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-6); }
.receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--lc-space-3); border-bottom: 1px solid var(--lc-line); padding-bottom: var(--lc-space-4); }
.receipt-head h1 { margin: 0 0 var(--lc-space-2); }
.receipt-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--lc-space-4); margin: var(--lc-space-5) 0; }
.receipt-parties h2 { font-size: var(--lc-text-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--lc-muted); margin: 0 0 var(--lc-space-2); }
.receipt-parties p { margin: 0; }
.receipt-lines { width: 100%; }
.receipt-lines tfoot td { border-top: 1px solid var(--lc-line); }
.receipt-lines .receipt-total td { font-weight: 700; font-size: var(--lc-text-lg, 1.15rem); }
.receipt-refs { display: grid; grid-template-columns: max-content 1fr; gap: var(--lc-space-2) var(--lc-space-4); margin: var(--lc-space-5) 0 var(--lc-space-3); }
.receipt-refs dt { color: var(--lc-muted); }
.receipt-refs dd { margin: 0; }
@media print {
    .site-header, .site-footer, .no-print, #blazor-error-ui, .components-reconnect-show { display: none !important; }
    body { background: var(--lc-card); }
    .receipt { border: 0; padding: 0; }
}
/* Buttons inside a grid cell sit in one line, left to right. */
.grid-actions { justify-content: flex-start; flex-wrap: nowrap; }

/* Who can take a survey: three choices, and for "only the people I choose", the lists and addresses. */
.survey-who { border: 0; padding: 0; margin: 0; display: grid; gap: var(--lc-space-2); }
.survey-who legend { font-weight: 600; margin-bottom: var(--lc-space-2); }
.survey-who .choice { display: flex; gap: var(--lc-space-3); align-items: flex-start; padding: var(--lc-space-3); border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); background: var(--lc-card); cursor: pointer; }
.survey-who .choice:has(input:checked) { border-color: var(--lc-accent); background: var(--lc-info-ground); }
.survey-who .choice span { display: grid; gap: 2px; }
.survey-who .choice small { color: var(--lc-ink-soft); }
.survey-chosen { border-left: 3px solid var(--lc-highlight); padding-left: var(--lc-space-4); display: grid; gap: var(--lc-space-3); }
.tick-list { display: flex; flex-wrap: wrap; gap: var(--lc-space-2) var(--lc-space-5); }

/* A refund Razorpay refused is said loudly, and a refund made elsewhere can be recorded. */
.refund-problem { margin: var(--lc-space-3) 0; }
.refund-problem p { margin: 0; font-weight: 600; }
.record-refund { border: 1px dashed var(--lc-line); border-radius: var(--lc-radius-sm); padding: var(--lc-space-3) var(--lc-space-4); margin-bottom: var(--lc-space-3); }
.record-refund h3 { margin: 0 0 var(--lc-space-2); font-size: var(--lc-text-base); }
.setting-address { width: 100%; min-width: 18rem; resize: vertical; line-height: 1.5; }
/* Messages, the AI draft of an answer to a suggestion. */
.draft-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-3); margin: var(--lc-space-3) 0; }
.draft-row .menu-list button { padding: var(--lc-space-2) var(--lc-space-3); display: flex; gap: var(--lc-space-2); align-items: center; width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.draft-row .menu-list button:hover, .draft-row .menu-list button:focus-visible { background: color-mix(in srgb, var(--lc-accent) 10%, transparent); }


/* Colin: the pop-ups "are probably better as a side bar animated from the right hand side ... no change
   to the content, just how they are shown"; and "for things like confirmation yes/no these are popups. Anything else
   we can do with the sidebar." So the eight that hold a form, a message or a check slide in from the right at full
   height; the yes/no confirmations stay centred. Esc closes either (learning.js). */
.modal.confirm.modal-panel {
    top: 0; right: 0; bottom: 0; left: auto;
    transform: none;
    height: 100vh; max-height: 100vh;
    margin: 0;
    border-radius: 0;
    border: 0;
    border-left: 4px solid var(--lc-accent);
    box-shadow: -18px 0 40px color-mix(in srgb, var(--lc-ink) 22%, transparent);
    padding: var(--lc-space-6) var(--lc-space-6) var(--lc-space-7);
    /* Colin: the panel showed a scrollbar it didn't need. The padding sat on top of 100vh. */
    box-sizing: border-box;
    animation: lc-panel-in .28s cubic-bezier(.2, .8, .2, 1);
}
.modal.confirm.modal-panel:not(.modal-email):not(.publish-check):not(.modal-video) { width: min(40rem, 100vw); }
.modal.confirm.modal-panel.modal-email { width: min(46rem, 100vw); }
.modal.confirm.modal-panel.publish-check { width: min(54rem, 100vw); }
.modal.confirm.modal-panel.modal-video { width: min(56rem, 100vw); }
.modal-backdrop { animation: lc-fade-in .2s ease-out; }
@keyframes lc-panel-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes lc-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 40rem) { .modal.confirm.modal-panel { padding: var(--lc-space-5) var(--lc-space-4); border-left-width: 0; } }
@media (prefers-reduced-motion: reduce) { .modal.confirm.modal-panel, .modal-backdrop { animation: none; } }
/* Colin: "it is showing a scrollbar and none needed and it still scrolls the screen", and Emails
   "still shows 2 scrollbars". The page behind kept its own scrollbar and kept scrolling under the wheel; while a panel
   or pop-up is open it is held still, so the only scrollbar is the panel's, and only when its content needs one. */
html:has(.modal-backdrop), html:has(.modal-backdrop) body { overflow: hidden; }
.modal.confirm.modal-panel { overscroll-behavior: contain; }
/* The video panel: the heading, the video filling what's left of the window, and Close, with no scrolling. */
.modal.confirm.modal-panel.modal-video { display: flex; flex-direction: column; overflow: hidden; }
/* Colin: "2 large black bands above and below the video". The video was stretched to fill the panel's height and
   letterboxed in black; now it is as tall as its own picture, and shrinks only when the window is too short. */
.modal.confirm.modal-panel.modal-video video { flex: 0 1 auto; min-height: 0; max-height: 100%; width: 100%; height: auto; object-fit: contain; background: transparent;
    /* Colin: "Andrea's pink colour ... border: 1px solid" round the video. */
    border: 1px solid var(--lc-highlight); box-sizing: border-box; }
.modal.confirm.modal-panel.modal-video .actions { flex: none; }


/* A course's theme and audience levels, and the page that keeps the two lists. */
.form-block > .label { display: block; font-weight: 500; margin-bottom: var(--lc-space-1); }
.level-picks { display: flex; flex-wrap: wrap; gap: var(--lc-space-2) var(--lc-space-4); padding: var(--lc-space-2) 0; }
.level-pick { display: inline-flex; align-items: center; gap: var(--lc-space-2); font-weight: 400; cursor: pointer; }
.lists-columns { display: grid; gap: var(--lc-space-6); margin-top: var(--lc-space-4); }
@media (min-width: 64rem) { .lists-columns { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.lists-columns .add-row { margin-top: var(--lc-space-3); display: flex; flex-wrap: wrap; }
.lists-columns .add-row .input { min-width: 16rem; }
/* Colin: "values and the buttons are top aligned vertically. Can we centre align them?" */
.lists-columns .grid td { vertical-align: middle; }

.course-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--lc-space-3) var(--lc-space-4); margin: 0 0 var(--lc-space-4); }
.course-filters .field { margin: 0; }
.course-facts { color: var(--lc-ink-soft); }

/* A course's links to the survey on its details page. */
.survey-links { margin-top: var(--lc-space-6); padding-top: var(--lc-space-4); border-top: 1px solid var(--lc-line); }
/* Rebuilt: one list of saved links across surveys, new rows below, Add underneath. */
.survey-links-grid td { vertical-align: middle; }
.survey-links-grid td:first-child { min-width: 10rem; }
.survey-links-grid td:nth-child(2) { min-width: 11rem; }
.survey-links-grid td:nth-child(3) { width: auto; }
.survey-links-grid td:nth-child(3) textarea { width: 100%; }
.survey-links-grid td.row-actions { white-space: nowrap; }
.survey-links-grid tr.link-new td { background: color-mix(in srgb, var(--lc-accent) 6%, transparent); }
.survey-links-grid tr.link-new .pill { margin-left: var(--lc-space-2); }
.survey-links .links-none { margin: var(--lc-space-2) 0 var(--lc-space-3); }
/* Survey, Section, How strongly and Add across the full width. */
.survey-links .links-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--lc-space-3);
    align-items: end; margin: var(--lc-space-3) 0 var(--lc-space-4); }
.survey-links .links-add .field { margin: 0; }
@media (max-width: 48rem) { .survey-links .links-add { grid-template-columns: 1fr; } }
.input-static { display: inline-block; padding: var(--lc-space-2) 0; font-weight: 500; }
.survey-links-grid tr.unlinked td:first-child strong { color: var(--lc-ink-soft); font-weight: 500; }

/* The coaching diary's People tab, and whether somebody came. */
.coaching-people th.group-head { text-align: center; border-bottom: 1px solid var(--lc-line); }
.coaching-people td.warn { color: var(--lc-danger); font-weight: 600; }
.meta.block { display: block; }
.person-dates li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); padding: var(--lc-space-1) 0; }
.attendance { display: inline-flex; gap: var(--lc-space-1); margin-left: var(--lc-space-2); vertical-align: middle; }
.btn.btn-danger-soft { background: color-mix(in srgb, var(--lc-danger) 12%, white); color: var(--lc-danger); border-color: var(--lc-danger); }
.move-date .form-row { margin-top: var(--lc-space-2); }

/* Readings to approve, and what the AI has learned. */
.reading-item, .ai-learning { margin: var(--lc-space-4) 0; display: grid; gap: var(--lc-space-2); }
.reading-item-head, .ai-learning-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--lc-space-3); }
.reading-item-head h2, .ai-learning-head h2 { margin: 0; font-size: var(--lc-text-lg); }
.reading-scores { display: flex; flex-wrap: wrap; gap: var(--lc-space-1) var(--lc-space-2); }
.reading-score { border: 1px solid var(--lc-line); border-radius: 999px; padding: 2px 10px; font-size: var(--lc-text-sm); background: var(--lc-ground); }
.reading-text { min-height: 18rem; line-height: var(--lc-leading-loose); }
.reading-held { border-left: 4px solid var(--lc-accent); }
.label-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); }
.survey-switch { display: flex; flex-wrap: wrap; gap: var(--lc-space-2); margin: var(--lc-space-3) 0; }
.pill-danger { border-color: var(--lc-danger); color: var(--lc-danger); background: color-mix(in srgb, var(--lc-danger) 10%, white); }
.ai-asked { margin: 0 0 var(--lc-space-3); padding: var(--lc-space-3) var(--lc-space-4); background: var(--lc-surface-2, color-mix(in srgb, var(--lc-ink) 4%, transparent)); border-radius: var(--lc-radius); max-width: 70ch; }
/* About Andrea, in the site's own look. */
.about-intro { display: grid; gap: var(--lc-space-5); align-items: start; margin-bottom: var(--lc-space-5); }
@media (min-width: 48rem) { .about-intro { grid-template-columns: 16rem minmax(0, 1fr); } }
.about-photo img { width: 100%; height: auto; border-radius: var(--lc-radius); display: block; }
@media (max-width: 47.99rem) { .about-photo { max-width: 18rem; } }
.about-intro .lead { margin-top: 0; }
.about-more { margin-top: var(--lc-space-5); }

/* The product form in one column, in the order Colin set. */
.product-panel .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--lc-space-4); flex-wrap: wrap; margin-bottom: var(--lc-space-4); }
.page .product-panel .panel-head h2 { margin: 0; }
.product-panel .panel-switch { display: flex; align-items: center; gap: var(--lc-space-2); font-weight: 500; }
.product-form { max-width: 48rem; }
/* Colin: "Move Available for purchase to align with the end of the title box", and the course picker as wide as the other boxes. */
.product-panel .panel-head { max-width: 48rem; }
.product-form .course-adder .e-input-group, .product-form .course-adder .e-control-wrapper { width: 100% !important; }
/* Its height, type and border: the general rule for Syncfusion boxes in a .field, at the end of this file. */
.product-form .table-wrap { margin: 0 0 var(--lc-space-4); }
.product-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--lc-space-4); }
.product-numbers .field { margin-bottom: var(--lc-space-2); }
.product-numbers-hint { margin: 0 0 var(--lc-space-4); }

/* The super admin's view of an AI instruction, word for word. */
.ai-prompt-box { margin: var(--lc-space-3) 0 var(--lc-space-5); border: 1px solid var(--lc-line); border-radius: var(--lc-radius); padding: var(--lc-space-3) var(--lc-space-4); background: var(--lc-ground); }
.ai-prompt-box summary { cursor: pointer; font-weight: 600; }
.ai-prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--lc-font-mono); font-size: var(--lc-text-sm); line-height: 1.55; max-height: 32rem; overflow: auto; margin: var(--lc-space-2) 0 0; color: var(--lc-ink); }
/* The links list fills the width, most of it for the why. */
.survey-links .survey-links-grid { width: 100%; }
.survey-links .survey-links-grid th:nth-child(1) { width: 22%; }
.survey-links .survey-links-grid th:nth-child(2) { width: 16%; }
.survey-links .survey-links-grid th:nth-child(4) { width: 1%; }

/* The System health page. */
.health-summary { display: flex; align-items: center; gap: var(--lc-space-3); flex-wrap: wrap; padding: var(--lc-space-3) var(--lc-space-4); border-radius: var(--lc-radius); border: 1px solid; margin: var(--lc-space-4) 0 var(--lc-space-5); }
.health-summary.ok { border-color: var(--lc-success); background: var(--lc-success-ground); color: var(--lc-success); }
.health-summary.bad { border-color: var(--lc-warning); background: var(--lc-warning-ground); color: var(--lc-ink); }
.health-summary.bad i { color: var(--lc-warning); }
.health-summary .meta { margin-left: auto; }
.health-services td { vertical-align: top; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--lc-space-4); margin-top: var(--lc-space-5); }
.health-grid .card h3 { margin-top: 0; }
.health-list { list-style: none; margin: 0; padding: 0; }
.health-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--lc-space-3); padding: 0.35rem 0; border-bottom: 1px solid var(--lc-line-soft); }
.health-list li:last-child { border-bottom: 0; }
.health-list .n { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--lc-text-md); }
.health-list .n.small { font-size: var(--lc-text-base); font-weight: 500; text-align: right; }
.health-list .n.warn { color: var(--lc-warning); }
.health-list .n.bad { color: var(--lc-danger); }
.health-services .disk-warn { color: var(--lc-warning); font-weight: 600; }
.health-services .disk-bad { color: var(--lc-danger); font-weight: 600; }

/* Syncfusion pickers and dropdowns in a form field look like the site's own boxes: the same height, type and border
   as .input (the product page's course dropdown was the first; the diary's date pickers are the same). */
.field .e-input-group.e-control-wrapper:not(.e-small) { height: auto; min-height: 2.725rem; border-color: var(--lc-line); border-radius: var(--lc-radius-sm); }
.field .e-input-group.e-control-wrapper:not(.e-small) input.e-input { height: 2.6rem; font-family: var(--lc-font); font-size: var(--lc-text-body); color: var(--lc-ink); padding-left: 0.7rem; }