/* House-default brand tokens. The current tenant's ThemeProvider injects a
   per-tenant :root block after this file, overriding these — so the whole UI
   recolours from configuration with no per-tenant build. */
:root {
    --brand-primary: #1E3A8A;
    --brand-secondary: #0EA5E9;
    --brand-accent: #F59E0B;
    --brand-font: 'Inter', system-ui, sans-serif; /* the platform's UI face (design $font-ui, 2026-10-15) */
}

html, body {
    font-family: var(--brand-font);
}

/* Plain links follow the page chrome's accent (see --chrome-link). */
a {
    color: var(--chrome-link);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--on-brand);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Phase 9e — motion tokens + micro-interactions (§13). Small, fast, purposeful; one house
   easing; GPU-cheap (transform/opacity only); honours prefers-reduced-motion. Tunable per
   tenant alongside the brand tokens. */
:root {
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* Tactility — a subtle press on buttons. */
.mud-button-root {
    transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.mud-button-root:active {
    transform: scale(.98);
}

/* The learner course list's MudCard (Learn/Courses.razor) lifts on hover. A MudCard's root
   never receives a scoped-CSS attribute, so the rules live on this global class. Named apart
   from Manage's `bsl-course-card` (Quorcel.Components), which this rule used to hit as well —
   putting a square Mud shadow behind the rounded card on hover (2026-10-15). */
.bsl-learn-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.bsl-learn-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mud-elevation-8);
}

/* Accessibility + polish: respect reduced-motion everywhere. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Colour scheme ──────────────────────────────────────────────────────────────
   Quorcel's own surfaces — the platform pages, workspace, course outline, builder, Theme
   editor and landing designer — follow the visitor's OS light/dark preference: the .pen
   design's `mode` axis. Every scheme-aware token is declared ONCE as light-dark(light, dark)
   and resolves against the nearest `color-scheme`, so:
     · :root is `light dark` → prefers-color-scheme decides;
     · <html data-theme="light|dark"> pins a scheme — App.razor pins an ORG'S SITE light,
       because an org's brand is one authored palette and its rendered pages never go dark;
     · .theme-light pins a subtree light inside a dark chrome: the builder canvas, the Theme
       editor's specimens and the landing preview show the org's page as its visitors see it.
   MudBlazor's palette follows the same three rules (Layout/MudSchemeStyle). Tokens without
   light-dark() (--on-brand, the state colours, the marketing landing) are scheme-fixed. */
:root { color-scheme: light dark; }
:root[data-theme="light"], .theme-light { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── PoC identity & public pages ────────────────────────────────────────────────
   Product-branded chrome (landing, sign in, register) + the nav's signed-in block.
   Neutrals come from the fixed scale below (the one place neutrals are defined);
   accents derive from the brand tokens; darken/overlay via color-mix(in oklch). The dark
   values are the .pen's chrome tokens (chrome-bg / -panel / -elevated / -border, text-*). */
:root {
    --surface:        light-dark(oklch(100% 0 0), oklch(23% 0.014 285)); /* the page */
    --surface-raised: light-dark(oklch(100% 0 0), oklch(26% 0.017 285)); /* cards, panels, modals */
    --surface-muted:  light-dark(oklch(97% 0 0),  oklch(30% 0.022 285)); /* rows, chips, wells */
    --ink:            light-dark(oklch(24% 0 0),  oklch(97% 0.004 286));
    --ink-soft:       light-dark(oklch(45% 0 0),  oklch(75% 0.013 281));
    --ink-faint:      light-dark(oklch(60% 0 0),  oklch(62% 0.012 280));
    --line:           light-dark(oklch(90% 0 0),  oklch(34% 0.016 286));
    --on-brand: oklch(99% 0 0);
    /* Semantic state colours — fixed (not tenant-branded), defined once here and referenced
       via these tokens everywhere (replaces the default-template hex validation/error colours). */
    --color-danger: oklch(55% 0.20 28);
    --color-success: oklch(62% 0.13 150);
    --color-warn: oklch(66% 0.15 70);
}

/* ── Elevation (2026-10-15, Manage → Courses redesign) ─────────────────────────────
   The sunken page sits a step below --surface so raised panels and cards lift off it; the
   elevation tokens compose a key shadow, a tight ambient shadow and a one-pixel top
   highlight (black- and white-alpha, never a hue — the dark scheme needs more of each).
   Reference the composed tokens; never write a box-shadow colour by hand. */
:root {
    --surface-sunken: light-dark(oklch(94% 0.005 286), oklch(19% 0.012 285));
    --shadow-key:     light-dark(oklch(0% 0 0 / .18), oklch(0% 0 0 / .45));
    --shadow-ambient: light-dark(oklch(0% 0 0 / .1), oklch(0% 0 0 / .3));
    --edge-highlight: light-dark(oklch(100% 0 0 / .7), oklch(100% 0 0 / .1));
    --scrim:          oklch(0% 0 0 / .4);
    --elevation-card:  0 12px 28px -4px var(--shadow-key), 0 2px 4px var(--shadow-ambient), inset 0 1px 0 var(--edge-highlight);
    --elevation-panel: 0 16px 36px -6px var(--shadow-key), 0 2px 5px var(--shadow-ambient), inset 0 1px 0 var(--edge-highlight);
    /* The lift a card takes on hover (2026-10-16): a longer key shadow than a panel, same ambient + edge. */
    --elevation-lift:  0 22px 44px -8px var(--shadow-key), 0 3px 6px var(--shadow-ambient), inset 0 1px 0 var(--edge-highlight);
    --elevation-sheet: 0 -8px 32px var(--shadow-key), inset 0 1px 0 var(--edge-highlight);
}

/* ── Quorcel's own palette (the .pen `accent` / `quorcel-ink` / `quorcel-tint`) ──────────
   The platform's tooling is Quorcel's, not the org's (user rule 2026-09-10): its primary
   actions and the Q mark take the fixed violet accent in both schemes, and its links, active
   tabs and icon tiles take quorcel-ink — the accent itself on the light chrome, the same hue
   lifted on the dark (never the navy of the default org brand, user call 2026-09-11).
   MudBlazor on the platform host follows the same palette (BrandingTheme.Quorcel). */
:root {
    --quorcel-accent: oklch(56% 0.22 300);
    --quorcel-accent-2: oklch(77% 0.119 208);
    --quorcel-ink:    light-dark(var(--quorcel-accent), oklch(66% 0.13 300));
    --quorcel-tint:   light-dark(color-mix(in oklch, var(--quorcel-ink), transparent 92%),
                                color-mix(in oklch, var(--quorcel-ink), transparent 85%));
}

/* The chrome accent — what the page chrome's filled buttons, marks, links and cover
   fallbacks are painted with. Everywhere on the platform host it is Quorcel's palette (user
   rule 2026-09-11: org colours appear only on the org's own URL, and inside the design
   canvas); an org's site (.public--org) overrides it with the org's brand, so one rule set
   serves both hosts. */
:root {
    --chrome-accent: var(--quorcel-accent);
    --chrome-accent-2: var(--quorcel-accent-2);
    --on-chrome-accent: oklch(99% 0 0);
    --chrome-link: var(--quorcel-ink);
    --chrome-tint: var(--quorcel-tint);
}

/* The org's brand wins on its own site, and inside the two places the platform host shows
   the org's page as its visitors see it: the builder frame and the landing preview (both
   carry the org's --brand-* inline). */
.public--org,
.bslb__frame,
.lpv__site {
    --chrome-accent: var(--brand-primary);
    --chrome-accent-2: var(--brand-accent);
    --on-chrome-accent: var(--on-brand);
    --chrome-link: var(--brand-primary);
    --chrome-tint: color-mix(in oklch, var(--brand-primary), transparent 90%);
}

/* Public chrome */
.public { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); color: var(--ink); }
.public__bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.public__brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); font-weight: 700; }
.public__brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--chrome-accent); color: var(--on-chrome-accent); font-weight: 800; }
.public__brand-name { font-size: 1.1rem; letter-spacing: -.01em; }
.public__actions { display: inline-flex; align-items: center; gap: 1.25rem; }
.public__link { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.public__link:hover, .public__link--active { color: var(--chrome-link); }
/* The current section of the platform nav (Marketplace / Workspace) carries the accent and an underline. */
.public__link--active { text-decoration: underline; text-underline-offset: .45em; text-decoration-thickness: 2px; }
.public__cta { text-decoration: none; font-weight: 700; color: var(--on-chrome-accent); background: var(--chrome-accent); padding: .55rem 1rem; border-radius: .55rem; }
.public__cta:hover { background: color-mix(in oklch, var(--chrome-accent), var(--ink) 14%); }
.public__main { flex: 1; width: min(1080px, 92vw); margin: 0 auto; padding: 3rem 0; }
.public__footer { border-top: 1px solid var(--line); padding: 1.5rem 2rem; color: var(--ink-faint); font-size: .85rem; }
.public__brand-logo { height: 2rem; width: auto; display: block; }
/* The Quorcel logo carries its wordmark under the mark, so it stands taller than an org's. */
.public__brand-logo--quorcel { height: 4rem; }
/* The marketing landing's header (2026-09-30): dark whatever the OS prefers, in the landing's
   own palette, so the bar and the page below it are one surface. color-scheme resolves every
   light-dark() token used inside it (the focus ring, the signed-in name) to its dark value. */
.public__bar--landing { color-scheme: dark; background: var(--qland-bg); border-bottom-color: var(--qland-hairline); }
/* Its footer closes the same dark page. */
.public__footer--landing { color-scheme: dark; background: var(--qland-bg); border-top-color: var(--qland-hairline); color: var(--qland-ink-2); }
.public__bar--landing .public__link,
.public__bar--landing .public__user { color: var(--qland-ink-2); }
.public__bar--landing .public__link:hover,
.public__bar--landing .public__link--active { color: var(--qland-ink); }

/* Org landing page (Phase 4) — the widget-built page at the org domain root. The layout
   engine drives the internal structure; this wraps the content edge-to-edge of the column. */
.public--org .public__main { padding: 2rem 0; }
/* The org landing page (2026-09-09): full-bleed — its Sections decide width (Full / Boxed) and spacing. */
.public__main--bleed,
.public--org .public__main--bleed { width: 100%; padding: 0; } /* the org selector above is more specific: name it, or its 2rem stays (2026-09-29) */

/* Site chrome (2026-09-08): an org's authored header/footer regions run edge to edge; the
   layout tree inside decides its own inner width. */
/* Each region and the page are QUERY CONTAINERS (2026-09-22). Every responsive rule of the
   layout engine is an @container rule — Rows stacking at 640px, the author's per-breakpoint
   overrides, the Nav links' mobile menu — and with no container on the live page none of them
   ever matched: the builder canvas responded to its device frame, the published site did not. */
.org-chrome { width: 100%; container-type: inline-size; }
/* Above the page, so the mobile menu's panel — which hangs below the header — is not painted
   over by the page's own container (a later sibling in the same stacking order). */
.org-chrome--header { border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.org-chrome--footer { border-top: 1px solid var(--line); margin-top: auto; }
/* The "Powered by" strip standing alone (no authored footer): the landmark's rule is its top line. */
.org-chrome--footer > .bsl-poweredby:first-child { border-top: 0; }
.org-landing { width: 100%; container-type: inline-size; }
.org-landing > .bsl-lesson__block + .bsl-lesson__block { margin-top: 1.25rem; }

/* Landing buttons — shared by the auth cards and marketplace CTAs (the landing page
   itself uses the .qland-btn family in Home.razor.css). */
.landing-btn { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.3rem; border-radius: .6rem; font-weight: 700; text-decoration: none; border: 1px solid transparent; cursor: pointer; font: inherit; }
.landing-btn--primary { background: var(--chrome-accent); color: var(--on-chrome-accent); }
.landing-btn--primary:hover { background: color-mix(in oklch, var(--chrome-accent), var(--ink) 14%); }
.landing-btn--ghost { background: transparent; color: var(--chrome-link); border-color: color-mix(in oklch, var(--chrome-link), transparent 60%); }
.landing-btn--ghost:hover { background: var(--chrome-tint); }

/* ── Marketing-landing tokens (the platform's own dark palette — deliberately NOT
   tenant-branded: the Quorcel landing is Quorcel's own surface). OKLCH equivalents of the
   prototype palette in docs/landing/index.html; the sRGB twins for the WebGL scene live
   in js/landing.js. Every variant on the page derives from these via color-mix. */
:root {
    --qland-bg:       oklch(13% 0.012 285);
    --qland-bg-2:     oklch(15% 0.015 285);
    --qland-panel:    oklch(18% 0.018 285);
    --qland-panel-2:  oklch(20% 0.02 285);
    --qland-border:   oklch(25% 0.018 285);
    --qland-hairline: oklch(29% 0.018 285);
    --qland-ink:      oklch(97% 0.004 285);
    --qland-ink-2:    oklch(78% 0.012 285);
    --qland-ink-3:    oklch(57% 0.015 285);
    /* The three accents are the design's own (2026-09-30: #6E4BEA, #55C9E8, #BC55E6 in the
       .pen). They had drifted duller and the cyan greener, so every gradient read as washed. */
    --qland-accent:   oklch(54.6% 0.226 286.4);  /* violet */
    --qland-accent-2: oklch(78.2% 0.112 218.5);  /* cyan */
    --qland-accent-3: oklch(63.9% 0.221 314.7);  /* purple */
    --qland-grad: linear-gradient(110deg, var(--qland-accent) 0%, var(--qland-accent-3) 45%, var(--qland-accent-2) 100%);
    --qland-font-display: "Space Grotesk", "Roboto", system-ui, sans-serif;
}

/* Auth (sign in / register) */
.auth-card { width: min(440px, 92vw); margin: 1rem auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; padding: 2rem; box-shadow: 0 10px 30px color-mix(in oklch, var(--ink), transparent 90%); }
.auth-title { font-size: 1.6rem; margin: 0 0 .35rem; }
.auth-sub { color: var(--ink-soft); margin: 0 0 1.25rem; }
.auth-stub { display: inline-block; color: var(--ink-faint); font-size: .85rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; color: var(--ink); }
.auth-hint { font-weight: 400; font-size: .8rem; color: var(--ink-faint); }
.auth-input { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .55rem; font: inherit; color: var(--ink); background: var(--surface); }
.auth-input:focus { outline: 2px solid color-mix(in oklch, var(--chrome-link), transparent 40%); border-color: var(--chrome-link); }
.auth-roles { border: 1px solid var(--line); border-radius: .55rem; padding: .6rem .8rem; display: flex; gap: 1.25rem; align-items: center; }
.auth-roles legend { padding: 0 .35rem; font-weight: 600; font-size: .9rem; }
.auth-radio { font-weight: 500; display: inline-flex; align-items: center; gap: .35rem; }
.auth-submit { width: 100%; margin-top: .25rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--ink-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-providers { display: flex; flex-direction: column; gap: .6rem; }
.auth-provider { width: 100%; }
.auth-code { letter-spacing: .35em; font-size: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.auth-resend { margin-top: .5rem; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.auth-label-row a { font-weight: 500; font-size: .85rem; }
.auth-link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--chrome-link); text-decoration: underline; cursor: pointer; }
.auth-alt { margin: 1.1rem 0 0; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.auth-error { background: color-mix(in oklch, var(--color-danger), transparent 86%); border: 1px solid color-mix(in oklch, var(--color-danger), transparent 55%); color: var(--ink); padding: .7rem .85rem; border-radius: .55rem; margin: 0 0 1rem; }

/* ── Builder chrome tokens (Phase 9 WYSIWYG builder) ────────────────────────────
   These tokens are builder-scoped: only .bslb and its children reference them.
   Values are fixed OKLCH neutrals in BOTH schemes — light-dark(light, dark): the light
   values are the .pen's light `mode` (chrome-bg / -panel / -elevated / -border, text-*),
   the dark ones the tuned design-tool chrome. The builder, Theme editor and landing
   designer are Quorcel configuration surfaces, so NOTHING in their chrome reads --brand-*;
   the org's brand is painted only on the canvas stage that previews the org's page. */
:root {
    /* Backgrounds — three distinct depth layers */
    --builder-bg:              light-dark(oklch(97% 0.004 286), oklch(16% 0.012 275)); /* deepest: icon rail, bp-switcher */
    --builder-surface:         light-dark(oklch(100% 0 0),      oklch(19% 0.014 275)); /* main panel surface (top bar, left, right) */
    --builder-surface-raised:  light-dark(oklch(97% 0.004 286), oklch(23% 0.018 275)); /* raised layer (palette tiles, inputs) */

    /* Borders */
    --builder-border:          light-dark(oklch(92% 0.011 286), oklch(27% 0.014 275)); /* all panel dividers, tile strokes */

    /* Text tiers */
    --builder-ink:             light-dark(oklch(22% 0.016 285), oklch(97% 0.004 275)); /* primary: headings, active tab, button labels */
    --builder-ink-soft:        light-dark(oklch(45% 0.016 286), oklch(75% 0.012 280)); /* secondary: field labels, inactive tabs — dark 75% keeps an even step between tertiary (62%) and primary (97%) */
    --builder-ink-faint:       light-dark(oklch(54% 0.019 286), oklch(62% 0.012 280)); /* tertiary: section headers, captions, dim icons — dark 62% clears WCAG AA 4.5:1 on every panel surface (48% measured 2.6–3.0:1, 2026-09-09) */

    /* Canvas — the same light grey in both schemes: the stage previews the org's page */
    --builder-canvas-bg:       oklch(93% 0.006 275); /* light grey backdrop behind the lesson card */

    /* Section indicator dot (teal) — fixed, not tenant-branded */
    --builder-dot:             oklch(76% 0.11 210); /* expanded-section indicator, responsive banner */
    /* The dot's hue as TEXT (revert link, breakpoint banner): the raw teal is ~2:1 on the light
       panels, so it is darkened there (audit item 177). */
    --builder-dot-ink:         light-dark(oklch(from var(--builder-dot) 48% c h), var(--builder-dot));
    /* Error text on the chrome: the danger token, lifted on the dark panels. */
    --builder-danger-ink:      light-dark(var(--color-danger), oklch(from var(--color-danger) 70% c h));
}

/* Accent — Quorcel's fixed violet (the .pen `accent`), never the org's brand:
   the tooling belongs to the platform, and the user's org brand is not the platform's
   (user rule 2026-09-10). Selection chrome drawn over the branded canvas — hover/selected
   tints, drag handles, region tags, drop placeholders — uses it too. As a GLYPH on the
   chrome (--builder-accent-ink) it needs no lift on the light panels but is lifted a step
   on the dark ones, where the raw violet fell short of 3:1. */
:root {
    --builder-accent:          var(--quorcel-accent);
    --builder-accent-ghost:    color-mix(in oklch, var(--builder-accent), transparent 80%); /* 20% alpha: chip/tile bg */
    --builder-accent-ink:      light-dark(var(--builder-accent), oklch(from var(--builder-accent) 70% c h));
    --builder-accent-ink-hover: light-dark(oklch(from var(--builder-accent) 46% c h), oklch(from var(--builder-accent) 78% c h));
}

/* ── Builder: drag-and-drop ghost (global — the dragged element crosses CSS-isolation
   scopes: palette tiles land in the canvas, canvas nodes in the layers tree). The ghost
   is SortableJS's placeholder in the target list. ─────────────────────────────── */
.bslb-ghost {
    opacity: .5;
    outline: 2px solid var(--builder-accent);
    outline-offset: 1px;
}

/* A palette tile's ghost collapses to an insertion line at the drop slot. */
.bslb-ghost[data-block-kind],
.bslb-ghost[data-container-kind] {
    display: block;
    height: 3px;
    min-height: 3px;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    border: none;
    outline: none;
    border-radius: 2px;
    background: var(--builder-accent);
}

/* ── Builder: the one dropdown chevron ────────────────────────────────────────
   Every native <select> in the builder chrome sits in a .bslb-select-wrap, which hides the
   OS arrow (heavy and black on Windows) and draws the same 12px keyboard_arrow_down the
   MudSelects use, in the faint ink, 5px from the field edge. Global because the selects
   live in several scoped components (LengthInput, SpacingBox, BuilderInspector). */
.bslb-select-wrap {
    position: relative;
    display: inline-flex;
    flex: none;
}

.bslb-select-wrap > select {
    appearance: none;
    -webkit-appearance: none;
}

.bslb-select-wrap::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--builder-ink-faint);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/></svg>") center / contain no-repeat;
}

/* ── Builder: global MudBlazor popover/overlay overrides ───────────────────────
   MudSelect dropdowns portal out of the scoped CSS tree, so builder selects opt in
   with PopoverClass="bslb-popover" — the supported MudBlazor mechanism. (The previous
   [data-builder] ~ * sibling selectors could never match from the layout's ancestor
   branch and data-builder-popover was never emitted — both were dead.) */
.bslb-popover.mud-popover {
    background: var(--builder-surface-raised);
    border: 1px solid var(--builder-border);
    color: var(--builder-ink);
}

.bslb-popover .mud-list-item {
    color: var(--builder-ink-soft);
    min-height: 30px;
    padding: 4px 12px;
}

/* Options at the inspector's control size (errata 2026-09-09: list text was too large). */
.bslb-popover .mud-list-item-text,
.bslb-popover .mud-list-item-text .mud-typography {
    font-family: inherit; /* the builder's Inter, not Mud's Roboto stack */
    font-size: 0.78rem;
    line-height: 1.3;
}

.bslb-popover .mud-list-item:hover,
.bslb-popover .mud-list-item.mud-selected-item {
    background: color-mix(in oklch, var(--builder-surface-raised), var(--builder-ink) 8%);
    color: var(--builder-ink);
}
/* ── Builder chrome dialogs (Pencil "Create Course" · "Add Module" · "Add Lesson", 2026-10-16)
   MudDialog portals out of the scoped CSS tree, so a chrome dialog opts in with
   Class="bsl-dialog" (+ TitleClass / ContentClass / ActionsClass) and its shell is drawn here:
   the 560px panel (480px with bsl-dialog--narrow) on --builder-surface in a hairline with a
   14px radius, the head and foot bands over hairlines, the body on a 16px rhythm. The .bsld__
   vocabulary is what the dialogs render inside — the head text and close glyph, labelled
   fields on a 7px rhythm, 13px wells on --builder-bg in the hairline, list rows, chips, the
   dropzone and the two foot buttons. Global because three dialogs and StringListField share
   it. All colour via the --builder-* chrome tokens (Quorcel configuration surfaces). */
.mud-dialog.bsl-dialog {
    max-width: 560px;
    background: var(--builder-surface);
    color: var(--builder-ink);
    border: 1px solid var(--builder-border);
    border-radius: 14px;
    box-shadow: var(--elevation-panel);
    font-family: 'Inter', system-ui, sans-serif;
}

.mud-dialog.bsl-dialog--narrow {
    max-width: 480px;
}

.mud-dialog.bsl-dialog .bsl-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--builder-border);
}

.mud-dialog.bsl-dialog .bsl-dialog__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.mud-dialog.bsl-dialog .bsl-dialog__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--builder-border);
}

/* Head */
.bsld__hl {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bsld__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--builder-ink);
}

.bsld__sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--builder-ink-faint);
}

.bsld__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: -6px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--builder-ink-faint);
    cursor: pointer;
}

.bsld__close:hover {
    background: var(--builder-surface-raised);
    color: var(--builder-ink);
}

.bsld__close .mud-icon-root {
    width: 16px;
    height: 16px;
}

/* Fields */
.bsld__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 0;
    min-width: 0;
}

.bsld__field--short {
    flex: none;
    width: 180px;
    max-width: 100%;
}

.bsld__row {
    display: flex;
    gap: 16px;
}

.bsld__lbl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bsld__lbl {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--builder-ink-soft);
}

.bsld__hint {
    font-size: 11px;
    line-height: 1.3;
    text-align: right;
    color: var(--builder-ink-faint);
}

.bsld__note {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--builder-ink-faint);
}

/* The well: every input, the wrapped inputs, the chips box and the textarea. */
.bsld__input,
.bsld__well,
.bsld__textarea {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--builder-ink);
    background: var(--builder-bg);
    border: 1px solid var(--builder-border);
    border-radius: 8px;
}

.bsld__input,
.bsld__textarea {
    padding: 9px 12px;
}

.bsld__input::placeholder,
.bsld__textarea::placeholder,
.bsld__tag-input::placeholder,
.bsld__list-input::placeholder {
    color: var(--builder-ink-faint);
    opacity: 1;
}

.bsld__input:focus-visible,
.bsld__textarea:focus-visible,
.bsld__well:focus-within {
    outline: none;
    border-color: var(--builder-accent);
    box-shadow: 0 0 0 2px var(--builder-accent-ghost);
}

.bsld__well {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
}

.bsld__well > .bsld__input--bare,
.bsld__well > .bsld__select {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    color: var(--builder-ink);
}

.bsld__well > .bsld__input--bare:focus-visible,
.bsld__well > .bsld__select:focus-visible {
    outline: none;
    box-shadow: none;
}

.bsld__input--number {
    appearance: textfield;
    -moz-appearance: textfield;
}

.bsld__input--number::-webkit-outer-spin-button,
.bsld__input--number::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.bsld__unit {
    flex: none;
    font-size: 12px;
    color: var(--builder-ink-faint);
}

/* A slug reads muted while the title still writes it. */
.bsld__well--muted > .bsld__input--bare {
    color: var(--builder-ink-faint);
}

.bsld__glyph {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin: -3px -3px -3px 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--builder-ink-faint);
    cursor: pointer;
}

.bsld__glyph:hover {
    color: var(--builder-ink);
}

.bsld__glyph .mud-icon-root {
    width: 14px;
    height: 14px;
}

/* A well that offers choices: a datalist text input or a native select under the one
   builder chevron, never the browser's own indicator. */
.bsld__well--select > .bsld__input--bare,
.bsld__well--select > .bsld__select {
    padding-right: 16px;
}

.bsld__select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.bsld__input--list::-webkit-calendar-picker-indicator {
    display: none;
}

.bsld__chevron {
    position: absolute;
    right: 12px;
    top: 50%;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    color: var(--builder-ink-faint);
    pointer-events: none;
}

.bsld__chevron .mud-icon-root {
    width: 12px;
    height: 12px;
}

/* Chips: tags in a well, spec references in a bare row, prerequisites in the accent tint. */
.bsld__chips {
    flex-wrap: wrap;
    padding: 8px 10px;
}

.bsld__chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bsld__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--builder-border);
    border-radius: 7px;
    background: var(--builder-surface-raised);
    font-size: 12px;
    line-height: 1.2;
    color: var(--builder-ink);
}

.bsld__chip--accent {
    padding: 5px 9px;
    border: 0;
    border-radius: 6px;
    background: var(--builder-accent-ghost);
    color: var(--builder-accent-ink);
}

.bsld__chip-x {
    display: grid;
    place-items: center;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--builder-ink-faint);
    cursor: pointer;
}

.bsld__chip--accent .bsld__chip-x {
    width: 11px;
    height: 11px;
    color: var(--builder-accent-ink);
}

.bsld__chip-x:hover {
    color: var(--builder-ink);
}

.bsld__chip-x .mud-icon-root {
    width: 12px;
    height: 12px;
}

.bsld__add-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid var(--builder-border);
    border-radius: 7px;
    color: var(--builder-ink-faint);
}

.bsld__add-tag:focus-within {
    border-color: var(--builder-accent);
}

.bsld__add-tag .mud-icon-root {
    width: 12px;
    height: 12px;
}

.bsld__tag-input {
    min-width: 7ch;
    field-sizing: content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    color: var(--builder-ink);
}

.bsld__tag-input:focus-visible,
.bsld__list-input:focus-visible {
    outline: none;
}

/* List rows: objectives — a well-like row per entry with a tick, then the "Add objective" ghost row. */
.bsld__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsld__list-row,
.bsld__list-add {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--builder-border);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.bsld__list-row {
    background: var(--builder-bg);
    color: var(--builder-ink);
}

.bsld__list-icon .mud-icon-root {
    display: block;
    width: 15px;
    height: 15px;
    color: var(--color-success);
}

.bsld__list-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bsld__list-x {
    display: grid;
    place-items: center;
    flex: none;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--builder-ink-faint);
    cursor: pointer;
}

.bsld__list-x:hover {
    color: var(--builder-ink);
}

.bsld__list-x .mud-icon-root {
    width: 13px;
    height: 13px;
}

.bsld__list-add {
    gap: 6px;
    color: var(--builder-ink-faint);
    cursor: text;
}

.bsld__list-add:focus-within {
    border-color: var(--builder-accent);
}

.bsld__list-add .mud-icon-root {
    width: 14px;
    height: 14px;
}

.bsld__list-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    color: var(--builder-ink);
}

.bsld__textarea {
    display: block;
    line-height: 1.5;
    resize: vertical;
}

/* The cover dropzone: a file input laid invisibly over the zone, so a drop lands on it too. */
.bsld__dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    min-height: 88px;
    border: 1px solid var(--builder-border);
    border-radius: 10px;
    background: var(--builder-bg);
    color: var(--builder-ink-soft);
    font-size: 12px;
    overflow: hidden;
}

.bsld__dropzone:focus-within,
.bsld__dropzone:hover {
    border-color: var(--builder-accent);
}

.bsld__dropzone .mud-icon-root {
    width: 20px;
    height: 20px;
    color: var(--builder-ink-faint);
}

.bsld__dropzone > input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bsld__dropzone--filled {
    min-height: 140px;
    background: var(--cover-url) center / cover no-repeat;
}

.bsld__cover-actions {
    display: flex;
    gap: 12px;
}

.bsld__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--builder-accent-ink);
    cursor: pointer;
}

.bsld__link:hover {
    color: var(--builder-accent-ink-hover);
}

/* Foot */
.bsld__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.bsld__btn--ghost {
    border: 1px solid var(--builder-border);
    background: transparent;
    color: var(--builder-ink);
    font-weight: 500;
}

.bsld__btn--ghost:hover {
    background: color-mix(in oklch, var(--builder-surface-raised), transparent 40%);
}

.bsld__btn--accent {
    padding: 7px 14px;
    border: 0;
    background: var(--builder-accent);
    color: var(--on-brand);
    font-weight: 600;
}

.bsld__btn--accent:hover:not(:disabled) {
    background: color-mix(in oklch, var(--builder-accent), var(--builder-ink) 14%);
}

.bsld__btn--accent:disabled {
    opacity: 0.5;
    cursor: default;
}

.bsld__btn:focus-visible {
    outline: 2px solid var(--builder-accent);
    outline-offset: 2px;
}

.bsld__btn .mud-icon-root {
    width: 15px;
    height: 15px;
}

/* A phone-width dialog stacks a two-field row. */
@media (max-width: 480px) {
    .bsld__row {
        flex-direction: column;
    }

    .bsld__field--short {
        width: 100%;
    }
}

/* ── Signed-in platform header ────────────────────────────────────────────────── */
.public__user { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }
.public__signout { margin: 0; }
.public__signout .public__link { background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

/* Phase 5b — the stubbed checkout panel on a paid course. */
.bsl-checkout { max-width: 32rem; }

/* The course-detail cover hero (learner surface). */
.bsl-course-cover { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: .9rem; border: 1px solid var(--line); margin-bottom: 1.25rem; }

/* ── Workspace (platform surface): /workspace + /workspace/orgs/{id} ─────────── */
/* The workspace column: fluid, with gutters that settle at 90px on a wide screen (user rule
   2026-10-15 — "about half" the old 180) and shrink on narrow ones; capped only at 1920. */
.ws { --page-gutter: clamp(1rem, 6.25vw, 5.625rem); width: min(calc(100% - 2 * var(--page-gutter)), 120rem); margin: 0 auto; color: var(--ink); }
.ws__crumbs { margin-bottom: 1rem; }
.ws__crumbs a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ws__crumbs a:hover { color: var(--chrome-link); }
.ws__head { margin-bottom: 1.25rem; }
.ws__head--org { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ws__title { font-size: 1.8rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.ws__sub { color: var(--ink-soft); margin: 0; }
.ws__visit { color: var(--chrome-link); text-decoration: none; font-weight: 700; }
.ws__visit:hover { text-decoration: underline; }
.ws__sec { margin: 0 0 1.5rem; }
.ws__sec-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .75rem; }
.ws__orgs { display: grid; gap: .7rem; }
.ws__org { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .8rem; }
.ws__org-id { display: inline-flex; align-items: center; gap: .7rem; }
.ws__org-mark { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--chrome-tint); color: var(--chrome-link); font-weight: 800; }
/* An uploaded logo takes the mark's square — contained, like a favicon (same rule as OrgIdentityBand). */
.ws__org-mark--logo { box-sizing: border-box; padding: .25rem; object-fit: contain; background: var(--surface-raised); border: 1px solid var(--line); }
.ws__org-name { font-weight: 700; font-size: 1.05rem; }
.ws__org-links { display: inline-flex; align-items: center; gap: 1.1rem; }
.ws__org-links a { color: var(--chrome-link); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ws__org-links a:hover { text-decoration: underline; }
.ws__org-manage { padding: .45rem 1rem; border: 1px solid var(--line); border-radius: .55rem; }
.ws__new-org { display: inline-block; margin-top: .9rem; color: var(--chrome-link); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ws__tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--line); margin: 0 0 1.5rem; }
.ws__tab { padding: .6rem 0; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ws__tab:hover { color: var(--ink); }
.ws__tab--active { color: var(--chrome-link); border-bottom-color: var(--chrome-link); }
.ws__learning { display: grid; gap: .7rem; }
.ws__course { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.25rem; align-items: center; padding: 1rem 1.2rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .8rem; }
.ws__course-title { font-weight: 700; font-size: 1.05rem; display: block; }
.ws__course-org { color: var(--ink-soft); font-size: .9rem; }
.ws__course-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--ink-soft); }
.ws__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--chrome-tint); overflow: hidden; }
.ws__bar-fill { height: 100%; border-radius: inherit; background: var(--chrome-link); }
.ws__course-done { color: var(--color-success); font-weight: 600; }
.ws__empty { color: var(--ink-soft); }
/* Platform console (Phase E) */
.adm__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; border-bottom: 1px solid var(--line); margin: 0 0 1.5rem; }
.adm__tab { padding: .6rem 0; font-weight: 600; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.adm__tab:hover { color: var(--ink); }
.adm__tab--active { color: var(--chrome-link); border-bottom-color: var(--chrome-link); }
.adm__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.adm__tile { display: grid; gap: .15rem; padding: 1.1rem 1.2rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .8rem; }
.adm__tile-value { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.adm__tile-label { font-weight: 600; color: var(--ink); }
.adm__tile-sub { font-size: .85rem; color: var(--ink-faint); }
.adm__table { width: 100%; border-collapse: collapse; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; font-size: .92rem; }
.adm__table th { text-align: left; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.adm__table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm__table tr:last-child td { border-bottom: 0; }
.adm__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm__when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm__ref { white-space: nowrap; }
.adm__name { display: block; font-weight: 600; color: var(--ink); text-decoration: none; }
.adm__sub { display: block; font-size: .82rem; color: var(--ink-faint); }
.adm__status { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; text-transform: capitalize; background: var(--chrome-tint); color: var(--chrome-link); }
.adm__status--suspended { background: color-mix(in oklch, var(--color-danger), transparent 85%); color: var(--color-danger); }
.adm__chip { display: inline-block; margin: .1rem .3rem .1rem 0; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--ink-soft); }
.adm__inline { display: inline-flex; gap: .4rem; align-items: center; }
.adm__select { padding: .35rem .5rem; }
.adm__danger { color: var(--color-danger); border-color: color-mix(in oklch, var(--color-danger), transparent 55%); }
.adm__search { display: flex; gap: .5rem; margin: 0 0 1.2rem; max-width: 520px; }
.adm__search input { flex: 1; }
.adm__done { margin: 0 0 1rem; color: var(--color-success); font-weight: 600; }
.adm__log { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.adm__log li { padding: .7rem .9rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .6rem; }
.adm__log time { color: var(--ink-faint); font-size: .85rem; margin-right: .5rem; font-variant-numeric: tabular-nums; }
.adm__log .adm__sub { display: inline; margin-left: .4rem; }
.ws__empty-hint { color: var(--ink-faint); font-size: .9rem; }
.ws__input { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .55rem; font: inherit; color: var(--ink); background: var(--surface); }
.ws__input:focus { outline: 2px solid color-mix(in oklch, var(--chrome-link), transparent 45%); border-color: var(--chrome-link); }
.ws__btn { padding: .55rem 1.1rem; border: 1px solid transparent; border-radius: .55rem; background: var(--chrome-accent); color: var(--on-chrome-accent); font: inherit; font-weight: 700; cursor: pointer; }
.ws__btn:hover { background: color-mix(in oklch, var(--chrome-accent), var(--ink) 14%); }
.ws__btn:disabled { opacity: .5; cursor: default; }
.ws__btn--ghost { background: transparent; color: var(--chrome-link); border-color: var(--line); font-weight: 600; }
.ws__btn--ghost:hover { background: var(--chrome-tint); }

/* ── Marketplace / explore (platform surface) ───────────────────────────────── */
.explore { width: min(1080px, 94vw); margin: 0 auto; color: var(--ink); }
.explore__title { font-size: 1.9rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.explore__sub { color: var(--ink-soft); margin: 0 0 1.75rem; }
.explore__empty { color: var(--ink-faint); }
.explore__crumbs { margin-bottom: 1rem; }
.explore__crumbs a { color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.explore__crumbs a:hover { color: var(--chrome-link); }
.explore__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.explore__card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform var(--motion-base, 200ms) var(--ease-out, ease), box-shadow var(--motion-base, 200ms) var(--ease-out, ease); }
.explore__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in oklch, var(--ink), transparent 90%); border-color: color-mix(in oklch, var(--chrome-link), transparent 60%); }
.explore__card-cover { display: block; width: 100%; height: 140px; object-fit: cover; }
.explore__card-cover--fallback { display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; color: var(--on-chrome-accent); background: linear-gradient(120deg, var(--chrome-accent), color-mix(in oklch, var(--chrome-accent), var(--chrome-accent-2) 55%)); }
.explore__card-body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.1rem; flex: 1; }
.explore__card-title { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.explore__card-summary { color: var(--ink-soft); font-size: .9rem; line-height: 1.45; flex: 1; }
.explore__card-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; }
.explore__card-price { font-weight: 800; font-size: .9rem; color: var(--chrome-link); background: var(--chrome-tint); padding: .2rem .6rem; border-radius: 1rem; }
.explore__card-org { color: var(--ink-faint); font-size: .78rem; font-weight: 600; }

/* Quorcel-branded course detail (/explore/{org}/{slug}) */
.explore-detail { max-width: 760px; }
.explore-detail__cover { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 1rem; border: 1px solid var(--line); margin-bottom: 1.5rem; }
.explore-detail__cover--fallback { display: grid; place-items: center; font-size: 4rem; font-weight: 800; color: var(--on-chrome-accent); background: linear-gradient(120deg, var(--chrome-accent), color-mix(in oklch, var(--chrome-accent), var(--chrome-accent-2) 55%)); }
.explore-detail__head { margin-bottom: 1.5rem; }
.explore-detail__meta { display: flex; align-items: center; gap: .6rem; margin: .75rem 0 1.1rem; }
.explore-detail__price { font-weight: 800; color: var(--chrome-link); background: var(--chrome-tint); padding: .3rem .8rem; border-radius: 1rem; }
.explore-detail__chip { color: var(--ink-soft); background: var(--surface-muted); border: 1px solid var(--line); padding: .3rem .8rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; }
.explore-detail__enrol { display: inline-flex; }
.explore-detail__note { color: var(--ink-faint); font-size: .85rem; margin: .6rem 0 0; }
.explore-detail__description { color: var(--ink-soft); line-height: 1.6; margin: 0 0 1.75rem; }
.explore-detail__modules { margin: 0 0 1.75rem; }
.explore-detail__modules-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .75rem; }
.explore-detail__module { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; background: var(--surface-muted); border: 1px solid var(--line); border-radius: .7rem; margin-bottom: .5rem; }
.explore-detail__module-text { display: flex; flex-direction: column; gap: .15rem; }
.explore-detail__module-title { font-weight: 700; }
.explore-detail__module-summary { color: var(--ink-soft); font-size: .9rem; }
.explore-detail__module-count { color: var(--ink-faint); font-size: .85rem; white-space: nowrap; }
.explore-detail__foot { color: var(--ink-faint); font-size: .9rem; }