/* ============================================================
   LUMIO DESIGN SYSTEM
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Core Neutrals */
  --ink-900: #1F1B3A;
  --ink-700: #3A3655;
  --ink-400: #8A8A9E;
  --surface-0: #FFFFFF;
  --surface-50: #FBFBFE;
  --border: #E5E5EE;

  /* Brand Spectrum */
  --violet: #7C3AED;
  --violet-tint: rgba(124,58,237,0.04);
  --violet-tint-md: rgba(124,58,237,0.06);
  --violet-border: rgba(124,58,237,0.25);
  --indigo: #4F46E5;
  --cyan: #06B6D4;
  --teal: #14B8A6;
  --orange: #F97316;
  --magenta: #D946EF;
  --yellow: #FACC15;

  /* Pillars */
  --pillar-learn: var(--indigo);
  --pillar-design: var(--orange);
  --pillar-inspire: var(--magenta);
  --pillar-ai: var(--cyan);
  --pillar-success: var(--teal);

  /* Gradients */
  --gradient-primary: linear-gradient(90deg, #7C3AED 0%, #4F46E5 55%, #06B6D4 100%);
  /* Workspace-aware gradient — derives from active --ws-* tokens so every Platform
     control using var(--ws-gradient) automatically reflects the selected Workspace
     Appearance with no JS involvement. applyWorkspaceIdentity() writes --ws-primary/
     secondary/accent; CSS resolves this reference dynamically on every paint. */
  --ws-gradient: linear-gradient(90deg, var(--ws-primary, #7C3AED) 0%, var(--ws-secondary, #4F46E5) 55%, var(--ws-accent, #06B6D4) 100%);
  --gradient-warm: linear-gradient(135deg, #F97316 0%, #D946EF 100%);
  --gradient-ai: linear-gradient(90deg, #06B6D4 0%, #7C3AED 100%);

  /* Pastels */
  --pastel-lavender: #F2EEFB;
  --pastel-cyan: #E6FAFB;
  --pastel-pink: #FDEEF6;
  --pastel-peach: #FFF3EA;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 8px 24px rgba(31, 27, 58, 0.06);
  --shadow-md: 0 12px 32px rgba(31, 27, 58, 0.10);
  --shadow-lift: 0 16px 40px var(--ws-shadow-color);
  --ws-shadow-color: rgba(124, 58, 237, 0.18);
  --ws-progress:    var(--orange);

  /* Elevation tokens — use these instead of raw shadow values.
     elevation-0: flat (no shadow)
     elevation-1: standard cards
     elevation-2: menus, dropdowns, popovers
     elevation-3: modals, dialogs */
  --elevation-0: none;
  --elevation-1: var(--shadow-soft);
  --elevation-2: var(--shadow-md);
  --elevation-3: 0 20px 48px rgba(31, 27, 58, 0.16);

  /* Type */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Premium gradients */
  --gradient-aurora: linear-gradient(120deg, #7C3AED 0%, #4F46E5 30%, #06B6D4 65%, #14B8A6 100%);
  --gradient-sunset: linear-gradient(120deg, #F97316 0%, #D946EF 60%, #7C3AED 100%);
  --gradient-mesh: radial-gradient(at 15% 20%, rgba(124,58,237,0.35) 0px, transparent 50%),
                   radial-gradient(at 85% 10%, rgba(6,182,212,0.30) 0px, transparent 50%),
                   radial-gradient(at 70% 80%, rgba(217,70,239,0.25) 0px, transparent 50%),
                   radial-gradient(at 10% 90%, rgba(20,184,166,0.25) 0px, transparent 50%);

  /* Glass — derives from workspace surface/border so it reads correctly on
     both light and dark themes. Under Lumio this is white glass; under
     Midnight it becomes a dark semi-transparent panel. */
  --glass-bg: color-mix(in srgb, var(--ws-surface, #FFFFFF) 55%, transparent);
  --glass-border: color-mix(in srgb, var(--ws-border, #E5E5EE) 50%, transparent);
  --glass-blur: 18px;

  /* Semantic */
  --color-destructive: #E5484D;
  --color-destructive-tint: #FEECEC;
  --color-success: #22A06B;
  --color-success-tint: #ECFDF5;
  --ink-300: #C4C4CC;

  /* Radius scale (complete) */
  --r-xs: 4px;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.22);

  /* Theme Designer defaults (overridable per-course at runtime).
     These values are NEVER changed on :root or #app — course overrides
     are scoped to #lesson-canvas / .lumio-learner-root / .course-landing-root
     by applyThemeVars() so the platform chrome always reads these defaults. */
  --theme-primary: var(--violet);
  --theme-secondary: var(--indigo);
  --theme-accent: var(--cyan);
  --theme-font-display: var(--font-display);
  --theme-font-body: var(--font-body);
  --theme-font-size: 16px;
  --theme-radius: var(--r-lg);
  --theme-button-style: var(--r-pill);
  --theme-bg-style: var(--surface-50);

  /* ── Platform Design Tokens ─────────────────────────────────────────────
     Hard-wired platform values that must never be overridden by any course
     theme.  All platform chrome (nav, buttons, cards, forms, dialogs) uses
     these tokens exclusively.  Course content uses --theme-* scoped to its
     own container via applyThemeVars(). */
  --plt-font-display:  var(--font-display);
  --plt-font-body:     var(--font-body);
  --plt-font-size-btn: 14px;
  --plt-font-size-sm:  13px;
  --plt-font-size-lg:  15px;
  --plt-radius-btn:    var(--r-pill);
  --plt-radius-card:   var(--r-lg);

  /* ── Workspace Identity Tokens ──────────────────────────────────────────
     These tokens govern ONLY the Lumio application shell: sidebar, topbar,
     navigation, platform dialogs, Builder chrome, notifications, and all
     platform-level interactive controls.
     They MUST NEVER be referenced inside #lesson-canvas, .lumio-learner-root,
     or .course-landing-root. Course content uses --theme-* exclusively.
     These defaults match the Lumio brand identity. applyWorkspaceIdentity()
     will override them at runtime for custom workspace configurations.
     Neither system may reference the other:
       --ws-* must never reference --theme-*
       --theme-* must never reference --ws-*                                  */
  --ws-primary:     var(--violet);        /* #7C3AED — Lumio brand primary    */
  --ws-secondary:   var(--indigo);        /* #4F46E5 — Lumio brand secondary  */
  --ws-accent:      var(--cyan);          /* #06B6D4 — Lumio brand accent     */
  --ws-surface:     var(--surface-0);     /* #FFFFFF — Platform shell surface */
  --ws-surface-alt: var(--surface-50);    /* #FBFBFE — Alternate surface      */
  --ws-border:      var(--border);        /* #E5E5EE — Platform shell border  */
  --ws-text:        var(--ink-700);       /* #3A3655 — Shell body text        */
  --ws-text-muted:  var(--ink-400);       /* #8A8A9E — Shell muted text       */
  --ws-icon:        var(--ws-primary);    /* Defaults to primary; overridden  */
                                          /* by applyWorkspaceIdentity() only */
                                          /* when icons.colour is non-null    */
  --ws-shadow:      var(--shadow-soft);   /* Platform shell elevation         */
  --ws-radius:      var(--r-lg);          /* Platform shell card radius       */
  --ws-sidebar-bg:  var(--surface-0);     /* Sidebar background               */
  --ws-topbar-bg:   var(--surface-0);     /* Top bar background               */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-700);
  background: var(--surface-50);
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; background: var(--surface-50); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0;
}

/* Theme fonts and settings are scoped to lesson/learner content areas only.
   The builder chrome (nav, panels, toolbar) always uses Lumio brand fonts. */
#lesson-canvas,
.lumio-learner-root,
.course-landing-root {
  font-family: var(--theme-font-body, var(--font-body));
  font-size: var(--theme-font-size, 16px);
}

/* Page background follows the authored Course Theme background.
   --theme-bg-style is set on .lumio-learner-root / .course-landing-root by
   themeVarStyle() — these rules ensure that variable is actually consumed as
   the visible background rather than the Platform shell's --ws-surface-alt
   bleeding through from .app-content. */
.lumio-learner-root {
  background: var(--theme-bg-style, var(--surface-50));
}
.course-landing-root {
  background: var(--theme-bg-style, var(--surface-0));
}
#lesson-canvas h1, #lesson-canvas h2, #lesson-canvas h3, #lesson-canvas h4,
.lumio-learner-root h1, .lumio-learner-root h2, .lumio-learner-root h3, .lumio-learner-root h4,
.course-landing-root h1, .course-landing-root h2, .course-landing-root h3, .course-landing-root h4 {
  font-family: var(--theme-font-display, var(--font-display));
}

p { margin: 0; line-height: 1.7; }

/* Shared Rich Text line-height — applies to every .editable-text field in the
   builder, learner preview, and all export formats. Block-specific inline
   line-height overrides have been removed; this single rule is authoritative. */
.editable-text { line-height: 1.7; }

/* Paragraph spacing inside rich text fields (builder + learner preview + export).
   <p> elements are now preserved by sanitizeRichHtml, replacing <br>-only structure. */
.editable-text p { margin: 0; line-height: 1.7; }
.editable-text p:not(:last-child) { margin-bottom: 0.65em; }

/* Platform shell links use the Workspace Identity primary.
   Learner container links restore --theme-primary so course link colour is
   controlled by the Course Theme, not the Workspace Identity. */
a { color: var(--ws-primary, var(--indigo)); text-decoration: none; }
a:hover { text-decoration: underline; }
#lesson-canvas a,
.lumio-learner-root a,
.course-landing-root a { color: var(--theme-primary, var(--indigo)); }

img { max-width: 100%; display: block; }

button { font-family: var(--font-body); cursor: pointer; }

/* Sprint: Workstream B fix. var(--pastel-lavender) (#F2EEFB) is a near-white
   tint — against white/light/theme-tinted surfaces (the majority of editable
   blocks) it has ~1.05:1 contrast and is effectively invisible, which is
   exactly the reported "light/theme/custom backgrounds = difficult
   selection" pattern; it only worked on dark/black surfaces, where the same
   near-white color reads as a strong highlight. A single semi-transparent
   indigo scales its visible contribution with whatever is underneath it
   (lighter tint on light surfaces, richer tint on dark ones), so one rule
   now gives a visible highlight across the full light-to-dark range this
   platform supports, including arbitrary photo backgrounds. */
::selection { background: color-mix(in srgb, var(--ws-primary) 35%, transparent); }

/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Workspace-token-aware gradient text — consumed by Welcome screen title */
.ws-gradient-text {
  background: linear-gradient(90deg, var(--ws-primary) 0%, var(--ws-secondary) 55%, var(--ws-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Platform-fixed typography — never affected by course theme */
  font-family: var(--plt-font-body);
  font-weight: 600;
  font-size: var(--plt-font-size-btn);
  padding: 12px 22px;
  border-radius: var(--plt-radius-btn);
  border: none;
  cursor: pointer;
  transition: all 0.18s ease-out;
  white-space: nowrap;
  outline: none;
}

/* ── Course canvas button override ───────────────────────────────────────
   Buttons rendered inside lesson/learner/landing content use the course
   theme fonts and radius, not the platform defaults above. */
#lesson-canvas .btn,
.lumio-learner-root .btn,
.course-landing-root .btn {
  font-family: var(--theme-font-body, var(--font-body));
  font-size: calc(var(--theme-font-size, 16px) - 2px);
  border-radius: var(--theme-button-style, var(--r-pill));
}
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
  transform: none;
}

/* ------------------------------------------------------------
   FOCUS RING — single consistent focus treatment for every
   interactive control in the button system (buttons, segmented
   controls, tabs, icon buttons). Replaces inconsistent browser
   default outlines (which combined with custom borders produced
   "blue on one side, dark outline on the other" artifacts).
   ------------------------------------------------------------ */
.btn:focus-visible,
.btn-icon:focus-visible,
.seg-control button:focus-visible,
.tab:focus-visible,
.content-menu-btn:focus-visible,
.nav-item:focus-visible,
.kc-option:focus-visible,
.lumio-tab-btn:focus-visible,
.lumio-accordion-header:focus-visible,
.lumio-hotspot:focus-visible,
.list-checkbox-marker:focus-visible,
.drop-zone-add:focus-visible,
.canvas-block:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn-primary:focus-visible { box-shadow: var(--elevation-1), var(--focus-ring); }

/* Platform primary button — uses Workspace Identity tokens.
   Inside learner containers, restores Course Theme tokens so course-landing
   call-to-action buttons respect the authored Course Theme, not the Workspace. */
.btn-primary {
  background: linear-gradient(90deg, var(--ws-primary, #7C3AED) 0%, var(--ws-secondary, #4F46E5) 55%, var(--ws-accent, #06B6D4) 100%);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { box-shadow: var(--shadow-lift); filter: brightness(1.04); }
#lesson-canvas .btn-primary,
.lumio-learner-root .btn-primary,
.course-landing-root .btn-primary {
  background: linear-gradient(90deg, var(--theme-primary, #7C3AED) 0%, var(--theme-secondary, #4F46E5) 55%, var(--theme-accent, #06B6D4) 100%);
}

/* Borderless by design — delineated with an inset shadow ring instead of a
   literal `border`, so there's a single crisp line on every edge rather
   than the mismatched-on-one-side artifacts a real border produced when it
   collided with hover/focus box-shadows. */
.btn-secondary {
  background: var(--ws-surface, var(--surface-0));
  color: var(--ws-text, var(--ink-700));
  border: none;
  box-shadow: inset 0 0 0 1px var(--ws-border, var(--border));
}
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--ws-primary, var(--indigo)); color: var(--ws-primary, var(--indigo)); }
#lesson-canvas .btn-secondary:hover,
.lumio-learner-root .btn-secondary:hover,
.course-landing-root .btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--theme-primary, var(--indigo)); color: var(--theme-primary, var(--indigo)); }

/* Assessment Submit — sits below Continue (btn-primary) in visual hierarchy.
   Always primary-coloured outline + text at rest; never filled. Used by the
   shared KC footer (_kcFooter) so this single rule covers every KC type. */
.btn-kc-submit {
  background: var(--surface-0);
  color: var(--theme-primary, var(--indigo));
  border: none;
  box-shadow: inset 0 0 0 1.5px var(--theme-primary, var(--indigo));
}
.btn-kc-submit:hover {
  background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--theme-primary, var(--indigo)), var(--shadow-soft);
}
.btn-kc-submit:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--theme-primary, var(--indigo)), var(--focus-ring);
}
/* Course context: match Submit button visual width to the Continue button so
   both appear centred against the same horizontal span. The two buttons use
   different base padding (btn-sm: 16px vs Continue: 28px), making Submit
   narrower and — despite sharing the same geometric centre — appearing shifted
   right when compared left-edge to left-edge. min-width:120px closes that gap
   without changing the button's style, colour, shape, or behaviour. */
#lesson-canvas .btn-kc-submit,
.lumio-learner-root .btn-kc-submit,
.course-landing-root .btn-kc-submit {
  min-width: 120px;
}

.btn-ghost {
  background: transparent;
  color: var(--ws-text, var(--ink-700));
  border: none;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
/* Learner/course context — ghost hover follows course theme, not workspace theme */
.lumio-learner-root .btn-ghost:hover,
.course-landing-root .btn-ghost:hover,
#lesson-canvas .btn-ghost:hover { background: color-mix(in srgb, var(--theme-primary) 8%, transparent); }
/* Destructive ghost buttons get a red-tint hover/focus so the intent is clear */
.btn-ghost.text-destructive:hover { background: var(--color-destructive-tint); }
.btn-ghost.text-destructive:focus-visible { outline: 2px solid var(--color-destructive); outline-offset: 2px; background: var(--color-destructive-tint); }

/* ============================================================
   COURSE BUTTON SYSTEM
   Completely independent of the Platform button system.
   Derives entirely from --theme-* tokens (Course Theme Engine).
   Used by all learner-facing course content.
   ============================================================ */
.btn-course-primary {
  background: linear-gradient(90deg, var(--theme-primary, var(--indigo)) 0%, var(--theme-secondary, #4F46E5) 55%, var(--theme-accent, #06B6D4) 100%);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-soft);
}
.btn-course-primary:hover { filter: brightness(1.04); box-shadow: var(--shadow-lift); }
.btn-course-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: none; }
.btn-course-primary:focus-visible { box-shadow: var(--shadow-lift), var(--focus-ring); }

.btn-course-secondary {
  background: var(--theme-bg-solid, var(--surface-0));
  color: var(--theme-primary, var(--indigo));
  border: none;
  box-shadow: inset 0 0 0 1px var(--theme-primary, var(--indigo));
}
.btn-course-secondary:hover { background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, transparent); }
.btn-course-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-course-secondary:focus-visible { box-shadow: inset 0 0 0 1px var(--theme-primary, var(--indigo)), var(--focus-ring); }

.btn-course-ghost {
  background: transparent;
  color: var(--theme-primary, var(--indigo));
  border: none;
}
.btn-course-ghost:hover { background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, transparent); }
.btn-course-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-course-ghost:focus-visible { box-shadow: var(--focus-ring); }

.btn-danger {
  background: var(--color-destructive);
  color: #fff;
  border: none;
  box-shadow: 0 8px 24px rgba(229, 72, 77, 0.10);
}
.btn-danger:hover { background: #C93237; box-shadow: 0 16px 40px rgba(229, 72, 77, 0.22); }
.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.3); }

/* Sizes: small / medium (default) / large — share the same radius token,
   only padding/font-size scale between them. */
.btn-sm { padding: 8px 16px; font-size: var(--plt-font-size-sm); }
.btn-lg { padding: 14px 30px; font-size: var(--plt-font-size-lg); }
#lesson-canvas .btn-sm, .lumio-learner-root .btn-sm, .course-landing-root .btn-sm {
  font-size: calc(var(--theme-font-size, 16px) - 3px);
}
#lesson-canvas .btn-lg, .lumio-learner-root .btn-lg, .course-landing-root .btn-lg {
  font-size: calc(var(--theme-font-size, 16px) - 1px);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: none;
  box-shadow: inset 0 0 0 1px var(--ws-border, var(--border));
  background: var(--ws-surface, var(--surface-0));
  color: var(--ws-text-muted, var(--ink-400));
  transition: all 0.15s ease-out;
  outline: none;
}
.btn-icon:hover { color: var(--ws-primary, var(--indigo)); box-shadow: inset 0 0 0 1px var(--ws-primary, var(--indigo)); background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.btn-icon:active { transform: scale(0.94); }
.btn-icon.danger:hover { color: var(--color-destructive); box-shadow: inset 0 0 0 1px var(--color-destructive); background: var(--color-destructive-tint); }
/* Toggle/active state — shared by any icon button representing an on/off
   formatting state (bold/italic/underline, etc.), so call sites no longer
   need inline conditional background/color styling per instance. */
.btn-icon.active,
.btn-icon[aria-pressed="true"] {
  background: var(--ws-primary, var(--indigo));
  color: #fff;
  box-shadow: none;
}
.btn-icon.active:hover,
.btn-icon[aria-pressed="true"]:hover {
  background: var(--ws-primary, var(--indigo));
  color: #fff;
  box-shadow: none;
}
/* Compact icon-button size — small reorder/move controls that don't need
   the standard 36px footprint. Shares the same radius scale as the rest of
   the icon-button system rather than an arbitrary one-off value. */
.btn-icon-xs { width: 22px; height: 22px; border-radius: var(--r-xs); }
/* Dark icon-button variant — used where an icon button sits on a light
   card but needs a filled, high-contrast affordance (e.g. list reordering). */
.btn-icon-dark { background: var(--ink-900); color: #fff; border: none; box-shadow: none; }
.btn-icon-dark:hover { background: var(--ink-900); filter: brightness(1.2); color: #fff; box-shadow: none; }

.menu-item:hover { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.menu-item.danger:hover { background: var(--color-destructive-tint); color: var(--color-destructive); }

/* Social sign-in buttons — official brand SVG marks, fixed size so they
   align consistently regardless of screen density or theme. */
.social-login-btn { gap: 10px; }
.social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.content-menu-btn:hover { color: var(--ws-primary, var(--indigo)); background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.content-title-edit:focus { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); box-shadow: 0 0 0 2px var(--ws-primary, var(--indigo)); }
.content-card.dragging { opacity: 0.5; }

/* ============================================================
   INTERACTIVE BLOCKS — CTA Button + Flashcard flip
   ============================================================ */
.lumio-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--theme-font-body, var(--font-body));
}
.lumio-cta-btn:hover { filter: brightness(1.08); }
.lumio-cta-btn:active { transform: scale(0.98); }

.flip-card { perspective: 1200px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  padding: 22px;
  text-align: center;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--border);
}
.flip-card-back { transform: rotateY(180deg); }
/* Root cause of the front/back text-bleed defect: backface-visibility:hidden
   only suppresses paint — it does not remove the hidden face from layout or
   hit-testing. Both faces are position:absolute;inset:0 on top of each
   other, so their contenteditable text regions occupy overlapping screen
   coordinates regardless of flip state; with no z-index/pointer-events
   difference, clicks/typing aimed at the visible face can land on the
   hidden one underneath (confirmed live: both faces' editable-text rects
   overlap even when unflipped). Disabling pointer events on whichever face
   isn't currently showing is the minimal, correct fix — it doesn't touch
   the flip animation, the renderer, or the data model at all. */
.flip-card-front { pointer-events: auto; }
.flip-card-back { pointer-events: none; }
.flip-card.flipped .flip-card-front { pointer-events: none; }
.flip-card.flipped .flip-card-back { pointer-events: auto; }
.flip-card-flipicon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  border: none;
  padding: 0;
  transition: background 0.15s;
}
.flip-card-flipicon:hover { background: rgba(0,0,0,0.38); }
.flip-card-flipicon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ws-text, var(--ink-700)); }
.field .hint { font-size: 12px; color: var(--ws-text-muted, var(--ink-400)); font-weight: 400; }

.input, .textarea, select.input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ws-border, var(--border));
  background: var(--ws-surface, var(--surface-0));
  color: var(--ws-text, var(--ink-900));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.input:focus, .textarea:focus, select.input:focus {
  border-color: var(--ws-primary, var(--indigo));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ws-primary, var(--indigo)) 10%, transparent);
}
.textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); }

.input-icon-wrap { position: relative; }
.input-icon-wrap .input { padding-left: 40px; }
.input-icon-wrap .icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ws-text-muted, var(--ink-400)); font-size: 16px; pointer-events: none;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--ws-surface);
  border-radius: var(--ws-radius);
  box-shadow: var(--ws-shadow);
  border: 1px solid var(--ws-border);
}
/* Course content override — cards inside exported surfaces follow the Course
   Theme, not the Platform Appearance. Uses --theme-* tokens only. */
.course-landing-root .card,
.lumio-learner-root .card,
#lesson-canvas .card {
  background: var(--theme-bg-solid, var(--surface-0));
  border-radius: var(--theme-radius, var(--r-lg));
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.card-pad { padding: 24px; }

/* Inspector cards — elevated above the inspector panel background.
   Panel uses --ws-surface-alt; these cards use --ws-surface to create
   one clear level of elevation without any new tokens or colours.
   Color is declared explicitly because the builder panel sits outside
   the .app-shell text cascade and would otherwise inherit the body
   primitive instead of the Workspace text token. */
.inspector-card {
  background: var(--ws-surface);
  border-radius: var(--ws-radius);
  border: 1px solid var(--ws-border);
  box-shadow: var(--ws-shadow);
  color: var(--ws-text);
  padding: 14px 16px;
  margin-top: 12px;
}

/* ── Assessment Theme ───────────────────────────────────────────────────────
   Design token system for all KC visual design.
   All KC component rules below consume these tokens — nothing is hardcoded.
   Future settings (submit style, card radius, feedback position, spacing
   scale, animation, review-mode colours) belong here as additional tokens.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Answer card base */
  --kc-card-bg:          var(--surface-1);
  --kc-card-border:      transparent;
  --kc-card-radius:      var(--r-md);
  --kc-card-padding:     12px 16px;
  --kc-card-font-size:   14px;
  --kc-card-font-weight: 500;
  --kc-card-line-height: 1.45;
  /* Hover state */
  --kc-hover-bg:     color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, var(--surface-1));
  --kc-hover-border: color-mix(in srgb, var(--theme-primary, var(--indigo)) 35%, transparent);
  /* Selected state */
  --kc-selected-bg:     color-mix(in srgb, var(--theme-primary, var(--indigo)) 12%, var(--surface-0));
  --kc-selected-border: color-mix(in srgb, var(--theme-primary, var(--indigo)) 55%, transparent);
  /* Correct state */
  --kc-correct-bg:     color-mix(in srgb, var(--teal) 8%, var(--surface-0));
  --kc-correct-border: var(--teal);
  /* Wrong state */
  --kc-wrong-bg:     color-mix(in srgb, var(--color-destructive) 7%, var(--surface-0));
  --kc-wrong-border: var(--color-destructive);
  /* Matching column tints */
  --kc-match-right-bg:     color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, var(--surface-1));
  --kc-match-right-border: color-mix(in srgb, var(--theme-primary, var(--indigo)) 25%, transparent);
}

/* ── Course Theme KC token override ─────────────────────────────────────────
   The --kc-* tokens above are computed on :root, which resolves
   var(--theme-primary) against the Platform default (violet) at that time.
   Redeclaring them here ensures KC components inside a course surface
   compute color-mix() against the active Course Theme primary instead.
   Selectors mirror those used by applyThemeVars() in app.js.
   ──────────────────────────────────────────────────────────────────────── */
#lesson-canvas-wrap,
#lesson-canvas,
.lumio-learner-root,
.course-landing-root {
  --kc-hover-bg:           color-mix(in srgb, var(--theme-primary, var(--indigo))  8%, var(--surface-1));
  --kc-hover-border:       color-mix(in srgb, var(--theme-primary, var(--indigo)) 35%, transparent);
  --kc-selected-bg:        color-mix(in srgb, var(--theme-primary, var(--indigo)) 12%, var(--surface-0));
  --kc-selected-border:    color-mix(in srgb, var(--theme-primary, var(--indigo)) 55%, transparent);
  --kc-match-right-bg:     color-mix(in srgb, var(--theme-primary, var(--indigo))  8%, var(--surface-1));
  --kc-match-right-border: color-mix(in srgb, var(--theme-primary, var(--indigo)) 25%, transparent);
}

/* ── Shared Answer Card — MC, MR, Matching, Ordering ────────────────────────
   All selectable answer components share one visual system.
   Default state: filled background row, no visible border.
   State is communicated through background + indicator, not thick outlines. */
.kc-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--kc-card-padding);
  border: 1.5px solid var(--kc-card-border);
  border-radius: var(--kc-card-radius);
  background: var(--kc-card-bg);
  font-size: var(--kc-card-font-size);
  font-weight: var(--kc-card-font-weight);
  line-height: var(--kc-card-line-height);
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.kc-option.selected {
  background: var(--kc-selected-bg);
  border-color: var(--kc-selected-border);
}
/* Matching left items keep a border highlight since they have no radio indicator */
.kc-option.lp-match-left.selected {
  border-color: var(--theme-primary, var(--indigo));
}
.kc-option.correct {
  border-color: var(--kc-correct-border);
  background: var(--kc-correct-bg);
}
.kc-option.wrong {
  border-color: var(--kc-wrong-border);
  background: var(--kc-wrong-bg);
}

/* Hover — only on interactive (non-submitted) options */
.kc-option.kc-interactive:hover:not(.correct):not(.wrong):not(.selected) {
  border-color: var(--kc-hover-border);
  background: var(--kc-hover-bg);
  cursor: pointer;
}

/* Matching left/right items — consistent component standard */
.kc-option.lp-match-left,
.kc-option.lp-match-right {
  min-height: 48px;
  align-items: center;
  padding: 10px 14px;
  font-size: var(--kc-card-font-size);
  font-weight: var(--kc-card-font-weight);
  line-height: 1.4;
  border-radius: var(--kc-card-radius);
  word-break: break-word;
}

/* Matching right-column items — theme-tinted background */
.kc-option.lp-match-right {
  background: var(--kc-match-right-bg);
  border-color: var(--kc-match-right-border);
}
.kc-option.lp-match-right.selected {
  border-color: var(--theme-primary, var(--indigo));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, var(--indigo)) 20%, transparent);
}

/* Visually hide native radio/checkbox — keep accessible for screen readers */
.kc-option input[type="radio"],
.kc-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom choice indicator (radio circle or checkbox square) */
.kc-choice-indicator {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface-0);
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kc-choice-indicator.kc-choice-check { border-radius: var(--r-sm, 4px); }

/* Radio: selected — filled circle with white dot */
.kc-option.selected .kc-choice-indicator {
  border-color: var(--theme-primary, var(--indigo));
  background: var(--theme-primary, var(--indigo));
}
.kc-option.selected .kc-choice-indicator:not(.kc-choice-check)::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
/* Checkbox: selected — white checkmark */
.kc-option.selected .kc-choice-indicator.kc-choice-check::after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* Correct state — green with checkmark */
.kc-option.correct .kc-choice-indicator {
  border-color: var(--teal);
  background: var(--teal);
}
.kc-option.correct .kc-choice-indicator::after {
  content: '';
  display: block;
  width: 4px;
  height: 7px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg) translate(-1px, -1px);
}
/* Wrong state — red with × */
.kc-option.wrong .kc-choice-indicator {
  border-color: var(--color-destructive);
  background: var(--color-destructive);
}
.kc-option.wrong .kc-choice-indicator::after {
  content: '✕';
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

/* Ordering items — same Answer Card token system as .kc-option */
.kc-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--kc-card-padding);
  border: 1.5px solid var(--kc-card-border);
  border-radius: var(--kc-card-radius);
  background: var(--kc-card-bg);
  font-size: var(--kc-card-font-size);
  font-weight: var(--kc-card-font-weight);
  transition: border-color 0.15s, background 0.15s;
}
.kc-order-item.correct {
  border-color: var(--kc-correct-border);
  background: var(--kc-correct-bg);
}
.kc-order-item.wrong {
  border-color: var(--kc-wrong-border);
  background: var(--kc-wrong-bg);
}
.kc-order-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 12%, transparent);
  color: var(--theme-primary, var(--indigo));
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fill-the-gap input */
.kc-fill-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-0);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-900);
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  margin-top: 12px;
  box-sizing: border-box;
}
.kc-fill-input:focus {
  border-color: var(--theme-primary, var(--indigo));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, var(--indigo)) 18%, transparent);
}
.kc-fill-input:disabled {
  background: var(--surface-1);
  color: var(--ink-600);
  cursor: default;
}

/* Question / instruction heading — 16px default across all KC types */
.kc-question {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-900);
  margin: 0 0 16px;
  padding: 0;
  border: none;
  float: none;
}

/* Correct/wrong inline label text beside each option */
.kc-label-correct {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
}
.kc-label-wrong {
  margin-left: auto;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-destructive);
}

/* Feedback bar — replaces hardcoded inline colours */
.kc-feedback {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.kc-feedback-correct  { background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); }
.kc-feedback-incorrect { background: color-mix(in srgb, var(--color-destructive) 8%, transparent); color: var(--color-destructive); }
.kc-feedback-neutral  { background: var(--surface-1); color: var(--ink-700); }
/* Prefix label ("✓ Correct" / "✕ Not quite") — bold inline label before explanation */
.kc-feedback-prefix { font-weight: 700; flex-shrink: 0; margin-right: 4px; }

/* ============================================================
   MATCHING CARDS KNOWLEDGE CHECK
   ============================================================ */

/* ── Shared card size — matches Flip Card medium (≈180×180px) ── */
:root { --kc-mc-sz: 180px; }

/* Base card — active top card and stacked ghost cards */
.kc-mc-card {
  width: var(--kc-mc-sz);
  height: var(--kc-mc-sz);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  border: none;
  border-radius: var(--r-md);
  background: var(--surface-0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.08);
  font-size: 14px;
  font-weight: 600;
  cursor: grab;
  user-select: none;
  text-align: center;
  line-height: 1.4;
  transition: box-shadow 0.18s, transform 0.18s, opacity 0.18s, background 0.15s;
}

/* Active top card — hover lifts */
.kc-mc-card.kc-mc-top:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.09);
  transform: translateY(-3px);
}

/* Selected via click-to-place */
.kc-mc-card.selected {
  box-shadow: 0 0 0 2.5px var(--theme-primary, var(--indigo)), 0 6px 16px rgba(0,0,0,0.12);
  background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 6%, var(--surface-0));
}

/* Non-top stacked ghost — passive card-back shape */
.kc-mc-card.kc-mc-ghost {
  cursor: default;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  background: var(--surface-1, #f4f4f5);
}

/* Dragging */
.kc-mc-card.dragging {
  opacity: 0.3;
  cursor: grabbing;
  transform: scale(1.03);
}

/* Correctly placed card fills its zone — same square shape */
.kc-mc-card.correct {
  width: 100%;
  height: 100%;
  cursor: default;
  box-shadow: none;
  background: var(--surface-0);
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  flex-direction: column;
  padding: 16px;
  border-radius: calc(var(--r-md) - 4px);
}

/* ── Deck container ─────────────────────────────────────────── */
.kc-mc-deck {
  position: relative;
  margin: 0 auto 40px;
  /* width/height set inline based on card count */
}

/* ── Category grid ──────────────────────────────────────────── */
.kc-mc-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Each category tile wrapper — zone + label below */
.kc-mc-cat-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Square drop zone — same dimensions as a card */
.kc-mc-zone {
  width: var(--kc-mc-sz);
  height: var(--kc-mc-sz);
  border: 2px dashed var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.kc-mc-zone.drag-over {
  border-color: var(--theme-primary, var(--indigo));
  border-style: solid;
  background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, var(--indigo)) 20%, transparent);
}

/* Category label — sits below the zone tile */
.kc-mc-zone-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-600);
  text-align: center;
  letter-spacing: 0.01em;
  max-width: var(--kc-mc-sz);
}

/* Empty-state hint inside an unoccupied zone */
.kc-mc-zone-empty {
  font-size: 12px;
  color: var(--ink-300);
  text-align: center;
  pointer-events: none;
}

.kc-mc-correct-tick {
  color: var(--teal);
  font-size: 18px;
  line-height: 1;
}

/* ── Completion — results card replaces deck, same footprint ── */
.kc-mc-results-card {
  flex-direction: column;
  gap: 14px;
  cursor: default !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.08);
}
.kc-mc-results-card:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.11), 0 1px 3px rgba(0,0,0,0.08) !important;
}

.kc-mc-score-headline {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 16px;
}

.kc-mc-replay-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--r-md);
  transition: color 0.15s;
}
.kc-mc-replay-btn:hover { color: var(--ink-900); }
.kc-mc-replay-btn .kc-mc-replay-icon { font-size: 22px; line-height: 1; }

/* Matching Cards — zone feedback states */
.kc-mc-zone-correct {
  border-color: var(--teal, #0d9488) !important;
  border-style: solid !important;
  background: color-mix(in srgb, var(--teal, #0d9488) 8%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal, #0d9488) 20%, transparent);
}
.kc-mc-zone-incorrect {
  border-color: var(--red, #ef4444) !important;
  border-style: solid !important;
  background: color-mix(in srgb, var(--red, #ef4444) 8%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red, #ef4444) 20%, transparent);
}
.kc-mc-feedback-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  padding: 12px;
  pointer-events: none;
  animation: kc-mc-feedback-in 0.15s ease;
}
.kc-mc-feedback-correct { color: var(--teal, #0d9488); }
.kc-mc-feedback-incorrect { color: var(--red, #ef4444); }
.kc-mc-feedback-icon { font-size: 22px; line-height: 1; }

@keyframes kc-mc-feedback-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes kc-card-shake {
  0%, 100% { transform: translateX(0) translateY(0); }
  20%       { transform: translateX(-9px) translateY(0); }
  40%       { transform: translateX(9px) translateY(0); }
  60%       { transform: translateX(-6px) translateY(0); }
  80%       { transform: translateX(6px) translateY(0); }
}
.kc-mc-card-shake { animation: kc-card-shake 0.42s ease; }

/* ============================================================
   PILLS / BADGES
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}
.pill-indigo { background: rgba(79,70,229,0.10); color: var(--indigo); }
.pill-orange { background: rgba(249,115,22,0.12); color: var(--orange); }
.pill-teal { background: rgba(20,184,166,0.12); color: var(--teal); }
.pill-magenta { background: rgba(217,70,239,0.10); color: var(--magenta); }
.pill-cyan { background: rgba(6,182,212,0.12); color: var(--cyan); }
.pill-grey { background: var(--pastel-lavender); color: var(--ink-400); }

.proj-lang-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--ws-radius, var(--r-pill));
  background: color-mix(in srgb, var(--ws-primary) 10%, transparent);
  color: var(--ws-primary);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================================
   APP SHELL / SIDEBAR
   ============================================================ */
/* App shell is pinned to the viewport so the sidebar (logo, nav, sign out,
   user profile) never shifts with page content/scroll — only .app-content
   scrolls. */
.app-shell { display: flex; height: 100vh; overflow: hidden; color: var(--ws-text, var(--ink-700)); accent-color: var(--ws-primary); }

/* Platform heading cascade — follows workspace appearance */
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4 { color: var(--ws-text, var(--ink-900)); }

/* Platform-scoped text-muted — follows workspace appearance */
.app-shell .text-muted { color: var(--ws-text-muted, var(--ink-400)); }

/* Course container isolation — wins over .app-shell rules via higher specificity.
   Course content sets its own text colors via --theme-* and --ink-* tokens. */
.app-shell .lumio-learner-root,
.app-shell .course-landing-root,
.app-shell #lesson-canvas { color: var(--ink-900); }
.app-shell .lumio-learner-root h1, .app-shell .lumio-learner-root h2,
.app-shell .lumio-learner-root h3, .app-shell .lumio-learner-root h4,
.app-shell .course-landing-root h1, .app-shell .course-landing-root h2,
.app-shell .course-landing-root h3, .app-shell .course-landing-root h4,
.app-shell #lesson-canvas h1, .app-shell #lesson-canvas h2,
.app-shell #lesson-canvas h3, .app-shell #lesson-canvas h4 { color: var(--ink-900); }
.app-shell .lumio-learner-root .text-muted,
.app-shell .course-landing-root .text-muted,
.app-shell #lesson-canvas .text-muted { color: var(--ink-400); }

.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ws-sidebar-bg);
  border-right: 1px solid var(--ws-border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 4px;
  height: 100%;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 20px 10px;
  cursor: pointer;
}
/* .sidebar-logo img sizing transferred to .ws-logo--sidebar (Sprint 5) */
.sidebar-logo span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ws-text);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--ws-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}
.nav-item .ic { font-size: 18px; width: 20px; text-align: center; }
.nav-item:hover { background: color-mix(in srgb, var(--ws-primary) 10%, var(--ws-surface)); }
.nav-item.active {
  background: color-mix(in srgb, var(--ws-primary) 14%, var(--ws-surface));
  color: var(--ws-primary, var(--indigo));
  font-weight: 600;
  border-left: 3px solid var(--ws-primary, var(--indigo));
}
.nav-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ws-text-muted);
  font-weight: 700;
  margin: 18px 12px 6px;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--ws-border);
  background: var(--ws-topbar-bg);
  color: var(--ws-text);
  gap: 16px;
  flex-shrink: 0;
}
.app-topbar h1, .app-topbar h2, .app-topbar h3, .app-topbar h4 { color: var(--ws-text); }

.app-content {
  flex: 1;
  min-height: 0;
  padding: 32px;
  position: relative;
  overflow-y: auto;
  background: var(--ws-surface-alt);
}
/* When app-content is presenting exported course content, the entire
   presentation area belongs to the Course Theme Engine, not the Platform.
   --theme-bg-style is set via inline style on the <main> element by
   renderCourseLanding / renderLessonBuilder when course content is active. */
.app-content:has(.course-landing-root) {
  background: var(--theme-bg-style, var(--surface-50));
}

/* ambient blobs */
.ambient-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.45;
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ws-gradient);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ws-border); }
.tab {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ws-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  outline: none;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.tab:hover { color: var(--ws-text); }
.tab.active { color: var(--ws-primary, var(--indigo)); border-bottom: 2px solid var(--ws-primary, var(--indigo)); }

/* ============================================================
   AI ELEMENTS
   ============================================================ */
.ai-card {
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--ws-primary) 18%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ws-primary) 6%, transparent), color-mix(in srgb, var(--ws-accent) 6%, transparent));
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.ai-spark {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gradient-ai);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  --nav-tips-pulse-color: #06B6D4;
  animation: pulse-glow 2.4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nav-tips-pulse-color) 35%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* ============================================================
   MODALS / OVERLAYS
   ============================================================ */
.overlay {
  position: fixed; inset: 0;
  background: rgba(31,27,58,0.35);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--ws-surface-alt, var(--ws-surface, var(--surface-0)));
  color: var(--ws-text, var(--ink-900));
  border-radius: var(--r-lg);
  box-shadow: var(--ws-shadow, var(--shadow-md));
  max-width: 92vw;
  max-height: 88vh;
  overflow-y: auto;
  animation: modalIn 0.25s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Headings inside modals and overlays must follow the Workspace Theme.
   The global h1–h4 rule uses an element selector that wins over inherited
   colour, so modals outside .app-shell rendered dark headings under Midnight.
   This class-level rule has higher specificity and fixes all Platform dialogs. */
.modal h1, .modal h2, .modal h3, .modal h4,
.overlay h1, .overlay h2, .overlay h3, .overlay h4 {
  color: var(--ws-text, var(--ink-900));
}
.modal .text-muted,
.overlay .text-muted {
  color: var(--ws-text-muted, var(--ink-400));
}

/* Media Picker dropzone */
.mp-dropzone {
  border: 2px dashed var(--ws-border, var(--border));
  border-radius: var(--r-md);
  background: var(--ws-surface-alt, var(--surface-50));
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mp-dropzone:hover {
  border-color: var(--ws-primary, var(--indigo));
}
.mp-dropzone.drag-active {
  border-color: var(--ws-primary, var(--indigo));
  background: color-mix(in srgb, var(--ws-primary, var(--indigo)) 8%, var(--surface-50));
}
.mp-dropzone-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center;
}
.mp-dropzone-icon { font-size: 32px; opacity: 0.6; }
.mp-preview-img {
  width: 100%; max-height: 240px;
  object-fit: contain;
  display: block;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.text-muted { color: var(--ws-text-muted, var(--ink-400)); }
.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.fade-in { animation: fadeInUp 0.35s ease-out; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* spinner / shimmer for AI generation */
.shimmer {
  background: linear-gradient(90deg, var(--pastel-lavender) 25%, var(--pastel-cyan) 50%, var(--pastel-lavender) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   GLASSMORPHISM
   ============================================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

/* Mesh / aurora backdrops */
.mesh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gradient-mesh);
}

/* Workspace-token-aware mesh — same layout as .mesh-bg, colours from --ws-* tokens.
   Uses CSS relative color syntax (oklch(from … l c h / alpha)) instead of
   color-mix(…, transparent): the latter mixes toward rgba(0,0,0,0) in sRGB, darkening
   the output; relative color syntax preserves the hue and only sets alpha. */
.ws-mesh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(at 15% 20%, oklch(from var(--ws-primary) l c h / 0.35) 0px, transparent 50%),
    radial-gradient(at 85% 10%, oklch(from var(--ws-primary) l c h / 0.20) 0px, transparent 50%),
    radial-gradient(at 70% 80%, oklch(from var(--ws-secondary) l c h / 0.25) 0px, transparent 50%),
    radial-gradient(at 10% 90%, oklch(from var(--ws-accent) l c h / 0.25) 0px, transparent 50%);
  opacity: 0.9;
}
.aurora-panel {
  background: var(--gradient-aurora);
  background-size: 200% 200%;
  animation: auroraShift 18s ease-in-out infinite;
}
@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================
   PREMIUM / INTERACTIVE CARDS
   ============================================================ */
.card-premium {
  background: var(--ws-surface, var(--surface-0));
  border-radius: var(--ws-radius);
  border: 1px solid var(--ws-border);
  box-shadow: var(--ws-shadow);
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}
.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px var(--ws-shadow-color);
  border-color: color-mix(in srgb, var(--ws-primary) 25%, transparent);
}
.card-interactive {
  cursor: pointer;
}

/* Big choice cards (Welcome screen, Create New, Help Me Decide) */
.choice-card {
  position: relative;
  border-radius: var(--ws-radius);
  border: 1px solid var(--ws-border);
  background: var(--ws-surface, var(--surface-0));
  padding: 28px 24px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}
.choice-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 40px var(--ws-shadow-color);
  border-color: transparent;
}
.choice-card .choice-glow {
  position: absolute; inset: -40% -40% auto auto; width: 220px; height: 220px;
  border-radius: 50%; filter: blur(50px); opacity: 0.35; z-index: 0;
  transition: opacity 0.22s ease-out;
}
.choice-card:hover .choice-glow { opacity: 0.55; }
.choice-card > * { position: relative; z-index: 1; }
/* Welcome tour progress bars */
.tour-progress {
  height: 4px; flex: 1; border-radius: var(--r-pill);
  background: var(--ws-border);
}
.tour-progress--active {
  background: linear-gradient(90deg, var(--ws-primary) 0%, var(--ws-secondary) 55%, var(--ws-accent) 100%);
}

/* Tour step icon — workspace-gradient background instead of hardcoded aurora */
.choice-icon--ws-gradient {
  background: linear-gradient(135deg, var(--ws-primary) 0%, var(--ws-secondary) 55%, var(--ws-accent) 100%);
}

.choice-icon {
  width: 56px; height: 56px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 16px; color: #fff;
  box-shadow: var(--ws-shadow);
}

/* ============================================================
   THEME DESIGNER
   ============================================================ */
.swatch-wheel {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.swatch {
  width: 100%; aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform .12s, border-color .12s;
}
.swatch:hover { transform: scale(1.12); }
.swatch.selected { border-color: var(--ink-900); transform: scale(1.12); }

.color-input-row {
  display: flex; align-items: center; gap: 12px;
}
.color-input-row input[type="color"] {
  width: 44px; height: 44px; border-radius: var(--r-md); border: 1px solid var(--border);
  padding: 2px; cursor: pointer; background: var(--surface-0);
}

.theme-preview-card {
  border-radius: var(--theme-radius, var(--r-lg));
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
  font-family: var(--theme-font-body, var(--font-body));
}
.theme-preview-card .tp-hero {
  padding: 28px;
  background: linear-gradient(135deg, var(--theme-primary, var(--violet)), var(--theme-secondary, var(--indigo)));
  color: #fff;
}
.theme-preview-card .tp-hero h3 {
  font-family: var(--theme-font-display, var(--font-display));
  color: #fff;
  font-size: calc(var(--theme-font-size, 16px) + 8px);
}
.theme-preview-card .tp-body { padding: 20px; background: var(--surface-0); }
.theme-preview-card .tp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; font-weight: 600; font-size: 13px;
  border-radius: var(--theme-button-style, var(--r-pill));
  background: var(--theme-accent, var(--cyan)); color: #fff; margin-top: 12px;
}

/* ============================================================
   LANDING PAGE LAYOUTS
   ============================================================ */
/* ============================================================
   INLINE RICH TEXT TOOLBAR (Heading & Paragraph block)
   ============================================================ */
.rt-toolbar {
  display: none;
  position: fixed;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--ink-900);
  border-radius: var(--r-md, 8px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.25));
  z-index: 10000;
}
.rt-toolbar .rt-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #fff;
  border: none; border-radius: var(--r-xs);
  font-size: 13px; cursor: pointer;
}
.rt-toolbar .rt-btn:hover {
  background: rgba(255,255,255,0.15);
}
.rt-toolbar .rt-sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.2);
  margin: 0 2px;
}
.rt-toolbar .rt-size {
  height: 28px;
  border-radius: var(--r-xs);
  border: none;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 12px;
  padding: 0 4px;
}
/* Dropdown list (popup) for any toolbar <select> — option text must stay
   readable as black-on-white regardless of the closed control's dark styling. */
.rt-toolbar select option {
  color: #000;
  background: #fff;
}
.rt-toolbar select option:hover,
.rt-toolbar select option:checked,
.rt-toolbar select option:focus {
  color: #000;
  background: var(--pastel-lavender, #e6e6fa);
}
.rt-toolbar .rt-color {
  width: 28px; height: 28px;
  border: none; border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

.layout-thumb {
  border-radius: var(--r-md);
  border: 2px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
  background: var(--surface-0);
}
.layout-thumb:hover { transform: translateY(-2px); }
.layout-thumb.selected { border-color: var(--ws-primary); }
.layout-thumb .lt-frame { padding: 10px; height: 70px; display: flex; gap: 4px; }
.lt-block { background: color-mix(in srgb, var(--ws-primary) 10%, var(--surface-0)); border-radius: var(--r-xs); }

/* ============================================================
   ACCORDION / EXPANDABLE BLOCKS (no layout jump)
   ============================================================ */
.acc-item { border-radius: var(--r-md); overflow: hidden; margin-bottom: 8px; border: 1px solid var(--border); }
.acc-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
  background: var(--surface-0); transition: background .12s;
}
.acc-header:hover { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.course-landing-root .acc-header:hover,
.lumio-learner-root .acc-header:hover,
#lesson-canvas .acc-header:hover {
  background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, transparent);
}
.acc-body {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease-out;
}
.acc-body.open { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body-inner { padding: 0 16px; }
.acc-body.open .acc-body-inner { padding: 12px 16px; }

/* ============================================================
   PROPERTIES PANEL
   ============================================================ */
.prop-section { margin-bottom: 18px; }
.prop-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ws-text-muted, var(--ink-400)); margin-bottom: 10px;
}
.prop-row { display: flex; gap: 8px; }

/* Numbered list — marker visual styles */
.list-num-marker {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-weight: 700; line-height: 1; cursor: text;
  transition: box-shadow .1s;
}
.list-num-marker[contenteditable]:focus {
  outline: none; box-shadow: var(--focus-ring); border-radius: 3px;
}
.list-num-marker-plain  { min-width: 24px; }
.list-num-marker-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid; font-size: 12px; }
.list-num-marker-filled { width: 28px; height: 28px; border-radius: 50%; font-size: 12px; }
.list-num-marker-square { width: 28px; height: 28px; border: 2px solid; font-size: 12px; }
.list-num-marker-rounded { width: 28px; height: 28px; border: 2px solid; border-radius: 6px; font-size: 12px; }
.list-num-marker-none   { display: none; }

/* Design system utilities */
.text-destructive { color: var(--color-destructive); }
.text-success { color: var(--color-success); }
.prop-section input[type="checkbox"],
.prop-panel input[type="checkbox"],
#right-panel-scroll input[type="checkbox"] {
  accent-color: var(--ws-primary); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
/* All workspace modal and overlay form controls follow the active Workspace Theme */
.modal input[type="checkbox"],
.modal input[type="radio"],
.overlay input[type="checkbox"],
.overlay input[type="radio"] {
  accent-color: var(--ws-primary);
}
/* Prop panel baseline typography — overrides scattered inline font-size:13px */
.prop-section .input,
.prop-section .textarea,
.prop-section label:not(.prop-section-title),
.prop-section select {
  font-size: 13px;
}
.seg-control {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; flex: 1;
}
.seg-control button {
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; min-width: max-content; height: 34px; padding: 0 14px;
  border: none; box-shadow: inset 0 0 0 1px var(--ws-border, var(--border)); border-radius: var(--plt-radius-btn); background: var(--ws-surface, var(--surface-0));
  font-size: var(--plt-font-size-sm); font-weight: 600; color: var(--ws-text, var(--ink-700)); white-space: nowrap;
  cursor: pointer; transition: all .12s; outline: none;
}
.seg-control button:hover { box-shadow: inset 0 0 0 1px var(--ws-primary, var(--indigo)); color: var(--ws-primary, var(--indigo)); }
.seg-control button.active {
  background: var(--ws-gradient); color: #fff; box-shadow: none;
}
.seg-control button.active:hover { color: #fff; }

/* ============================================================
   NOTIFICATION SYSTEM — Sprint 9
   Unified notification stack (top-right) + slide-in centre panel.
   All toasts go through NotifySystem; the old toast() is a wrapper.
   ============================================================ */

/* Stack container — fixed top-right, stacks downward */
#notify-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 40px);
  pointer-events: none;
}

.notify-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--ws-shadow, var(--shadow-md));
  background: var(--ws-surface, var(--surface-0));
  border: 1px solid var(--ws-border);
  border-left-width: 4px;
  pointer-events: all;
  animation: notifyIn 0.25s ease-out forwards;
}
.notify-item.notify-leaving {
  animation: notifyOut 0.2s ease-in forwards;
}

.notify-success { border-left-color: var(--color-success); }
.notify-info    { border-left-color: var(--indigo); }
.notify-warning { border-left-color: var(--orange); }
.notify-error   { border-left-color: var(--color-destructive); background: var(--color-destructive-tint); }
.notify-ai      { border-left-color: var(--violet); }
.notify-export  { border-left-color: var(--indigo); }
.notify-publish { border-left-color: var(--indigo); }
.notify-system  { border-left-color: var(--ws-text-muted, var(--ink-400)); }
.notify-review  { border-left-color: var(--indigo); }
.notify-progress { border-left-color: var(--indigo); }

.notify-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.notify-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.notify-msg  { font-size: 13px; font-weight: 500; color: var(--ws-text, var(--ink-900)); line-height: 1.4; }
.notify-detail { font-size: 12px; color: var(--ws-text-muted, var(--ink-400)); line-height: 1.3; }
.notify-progress-bar {
  height: 4px; background: var(--ws-border, var(--border)); border-radius: 2px;
  overflow: hidden; margin-top: 4px;
}
.notify-progress-fill {
  height: 100%; background: var(--indigo); border-radius: 2px;
  transition: width 0.3s ease; width: 0%;
}
.notify-action {
  align-self: flex-start;
  background: none; border: 1px solid var(--ws-border);
  border-radius: var(--r-sm); font-size: 12px; font-weight: 500;
  padding: 3px 10px; cursor: pointer; color: var(--ws-text, var(--ink-700));
  margin-top: 2px; transition: background 0.1s;
}
.notify-action:hover { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.notify-close {
  flex-shrink: 0; background: none; border: none;
  cursor: pointer; font-size: 18px; color: var(--ws-text-muted, var(--ink-400));
  padding: 0 2px; line-height: 1; margin-top: -1px;
  opacity: 0.6; transition: opacity 0.1s;
}
.notify-close:hover { opacity: 1; }

@keyframes notifyIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes notifyOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── Notification Centre Panel ── */
.notif-centre-backdrop {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.15); animation: fadeIn 0.2s ease-out;
}
.notif-centre {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 100vw;
  background: var(--ws-surface, var(--surface-0));
  box-shadow: -4px 0 24px rgba(31,27,58,0.12);
  z-index: 8001; display: flex; flex-direction: column;
  animation: notifCentreIn 0.22s ease-out;
}
.notif-centre.notif-centre-leaving {
  animation: notifCentreOut 0.18s ease-in forwards;
}
@keyframes notifCentreIn {
  from { transform: translateX(100%); } to { transform: translateX(0); }
}
@keyframes notifCentreOut {
  from { transform: translateX(0); } to { transform: translateX(100%); }
}
.notif-centre-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 0; flex-shrink: 0;
}
.notif-centre-header h2 {
  font-size: 15px; font-weight: 700; color: var(--ws-text, var(--ink-900)); margin: 0;
}
.notif-centre-header-actions { display: flex; gap: 4px; align-items: center; }
.notif-centre-header-actions button {
  background: none; border: none; font-size: 12px;
  color: var(--ws-text-muted, var(--ink-400)); cursor: pointer; padding: 4px 8px;
  border-radius: var(--r-sm); transition: color 0.1s;
}
.notif-centre-header-actions button:hover { color: var(--ws-text, var(--ink-700)); background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.notif-centre-tabs {
  display: flex; padding: 8px 18px 0;
  border-bottom: 1px solid var(--ws-border); flex-shrink: 0;
}
.notif-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px; font-size: 13px; font-weight: 500;
  color: var(--ws-text-muted, var(--ink-400)); cursor: pointer; margin-bottom: -1px;
  transition: color 0.1s;
}
.notif-tab.active {
  color: var(--ws-text, var(--ink-900));
  border-bottom-color: var(--ws-primary, var(--indigo));
}
.notif-centre-list { flex: 1; overflow-y: auto; }
.notif-centre-empty {
  padding: 48px 24px; text-align: center;
  color: var(--ws-text-muted, var(--ink-400)); font-size: 13px;
}
.notif-centre-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--ws-border);
  transition: background 0.1s; position: relative;
}
.notif-centre-item.unread  { background: color-mix(in srgb, var(--ws-primary) 8%, transparent); }
.notif-centre-item.clickable { cursor: pointer; }
.notif-centre-item:hover { background: color-mix(in srgb, var(--ws-primary) 5%, transparent); }
.notif-centre-item.unread:hover { background: color-mix(in srgb, var(--ws-primary) 12%, transparent); }
.nc-icon  { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.nc-body  { flex: 1; min-width: 0; }
.nc-msg   { font-size: 13px; color: var(--ws-text, var(--ink-900)); font-weight: 500; line-height: 1.4; }
.notif-centre-item.unread .nc-msg { font-weight: 600; }
.nc-detail { font-size: 12px; color: var(--ws-text-muted, var(--ink-400)); margin-top: 2px; line-height: 1.3; }
.nc-time   { font-size: 11px; color: var(--ws-text-muted, var(--ink-400)); margin-top: 4px; }
.nc-dot {
  width: 7px; height: 7px; background: var(--indigo);
  border-radius: 50%; flex-shrink: 0; margin-top: 6px;
}

@media (max-width: 640px) {
  .image-text-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   INTERACTIVE BLOCKS — Accordion / Tabs / Labelled Graphic /
   Process / Scenario
   ============================================================ */

/* --- Accordion --- */
.lumio-accordion-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
}
.lumio-accordion-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lumio-accordion-title > * { margin: 0; }
/* Marker and chevron use currentColor (not a hardcoded var) so they
   always inherit whatever colour the accordion header's own `color:`
   is set to (archATextColor(ds), the same single source of truth the
   title text already uses) — themed text colour, custom colour, and
   dark/light backgrounds all stay consistent with zero extra controls. */
.lumio-accordion-marker { font-weight: 700; color: currentColor; flex-shrink: 0; }
.lumio-accordion-chevron {
  flex-shrink: 0; width: 18px; height: 18px; position: relative;
  transition: transform 0.25s ease;
}
.lumio-accordion-chevron::before {
  content: ''; position: absolute; inset: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  width: 8px; height: 8px; margin: auto; transform: rotate(45deg);
}
.lumio-accordion-chevron[data-style="plusminus"]::before {
  border-right: none; border-bottom: none;
  border-top: 2px solid currentColor; width: 10px; height: 0; transform: none;
  top: 8px;
}
.lumio-accordion-chevron[data-style="plusminus"]::after {
  content: ''; position: absolute; left: 4px; top: 0;
  border-left: 2px solid currentColor; width: 0; height: 10px;
  transition: opacity 0.2s ease;
}
.lumio-accordion-row.open .lumio-accordion-chevron[data-style="plusminus"]::after { opacity: 0; }
.lumio-accordion-row.open .lumio-accordion-chevron[data-style="chevron"],
.lumio-accordion-row.open .lumio-accordion-chevron[data-style="arrow"] { transform: rotate(180deg); }
.lumio-accordion-chevron[data-style="arrow"]::before { width: 10px; height: 10px; }
.lumio-accordion-body { overflow: hidden; transition: max-height 0.3s ease; }
.lumio-accordion-body-inner { padding: 14px 16px; }

/* --- Tabs --- */
.lumio-tabs-strip {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.lumio-tab-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--ink-400);
  border-radius: var(--r-md) var(--r-md) 0 0; transition: color 0.15s ease, background 0.15s ease;
}
.lumio-tab-btn:hover { color: var(--ink-700); }
.lumio-tabs[data-tabstyle="underline"] .lumio-tab-btn {
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
}
.lumio-tabs[data-tabstyle="underline"] .lumio-tab-btn.active {
  color: var(--theme-primary, var(--indigo)); border-bottom-color: var(--theme-primary, var(--indigo));
}
.lumio-tabs[data-tabstyle="pill"] .lumio-tabs-strip { border-bottom: none; padding-bottom: 8px; }
.lumio-tabs[data-tabstyle="pill"] .lumio-tab-btn { border-radius: var(--r-pill); }
.lumio-tabs[data-tabstyle="pill"] .lumio-tab-btn.active {
  color: #fff; background: var(--theme-primary, var(--indigo));
}
.lumio-tabs[data-tabstyle="boxed"] .lumio-tabs-strip { border-bottom: none; gap: 6px; }
.lumio-tabs[data-tabstyle="boxed"] .lumio-tab-btn { border: none; box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--r-md); }
.lumio-tabs[data-tabstyle="boxed"] .lumio-tab-btn.active {
  color: var(--theme-primary, var(--indigo)); box-shadow: inset 0 0 0 1px var(--theme-primary, var(--indigo));
  background: color-mix(in srgb, var(--theme-primary, var(--indigo)) 8%, var(--surface-0));
}
.lumio-tabs-panels { padding: 18px; }
.lumio-tab-panel { display: none; }
.lumio-tab-panel.active { display: block; }
.lumio-tabs[data-animate="1"] .lumio-tab-panel.active { animation: fadeInUp 0.25s ease-out; }

/* --- Labelled Graphic --- */
.lumio-lg-imagewrap { width: 100%; }
.lumio-hotspot {
  position: absolute; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid #fff;
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: none;
  transition: transform 0.15s ease;
  padding: 0; line-height: 1;
}
.lumio-hotspot:hover { transform: translate(-50%, -50%) scale(1.1); }
.lumio-hotspot.pulse:not(.pulse-off)::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--hotspot-pulse-color, currentColor); opacity: 0.6;
  animation: lumio-hotspot-pulse 1.8s ease-out infinite;
}
@keyframes lumio-hotspot-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.lumio-labelled-graphic[data-visitedstyle="theme"] .lumio-hotspot.visited {
  background: var(--theme-primary, var(--indigo)) !important;
}
.lumio-hotspot-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(320px, 90%); max-height: 80%; overflow: auto;
  background: var(--surface-0); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 18px; z-index: 5;
}
.lumio-hotspot-close {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  border: none; background: var(--surface-50); border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink-700);
}
.lumio-hotspot-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.lumio-hotspot-counter { font-size: 12px; color: var(--ink-400); font-weight: 600; }

/* --- Process --- */
.lumio-process-panel { padding: 20px; }
.lumio-process-step { display: none; }
.lumio-process-step.active { display: block; animation: fadeInUp 0.25s ease-out; }
.lumio-process-stepnum {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--theme-primary, var(--indigo)); margin-bottom: 4px;
}
.lumio-process-indicators { flex: 1; justify-content: center; }
.lumio-process-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
  font-size: 11px; color: transparent;
}
.lumio-process-dot.active {
  background: var(--theme-primary, var(--indigo)); transform: scale(1.2);
}
.lumio-process-indicators[data-style="numbers"] .lumio-process-dot {
  width: 24px; height: 24px; border-radius: 50%; background: var(--surface-50);
  color: var(--ink-700); font-weight: 700;
}
.lumio-process-indicators[data-style="numbers"] .lumio-process-dot.active {
  background: var(--theme-primary, var(--indigo)); color: #fff;
}
.lumio-process-prev:disabled, .lumio-process-next:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Scenario --- */
.lumio-scenario-scene { display: none; }
.lumio-scenario-scene.active { display: block; }
.lumio-scenario-bg {
  position: relative; min-height: 420px; display: flex; align-items: flex-end;
}
.lumio-scenario-bgvideo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.lumio-scenario-overlay { position: absolute; inset: 0; }
.lumio-scenario-character {
  position: absolute; bottom: 0; max-height: 85%; object-fit: contain; z-index: 1;
}
.lumio-scenario-character.pos-left { left: 4%; }
.lumio-scenario-character.pos-right { right: 4%; }
.lumio-scenario-character.pos-center { left: 50%; transform: translateX(-50%); }
.lumio-scenario-content {
  position: relative; z-index: 2; width: 100%; padding: 20px; box-sizing: border-box;
}
.lumio-scenario-dialogue { color: #fff; }
/* Sprint 3B audit correction: this border is NOT the hardcoded grey
   --border token (unlike Tabs/Accordion) — it's already rgba(255,255,255,0.6),
   a deliberately translucent white edge designed to stay visible against an
   arbitrary, author-uploaded SCENE photo, which has nothing to do with the
   Landing Page/course theme. Re-pointing it at --surface-separator would
   replace a purpose-built, background-agnostic solution with a theme-tinted
   opaque one — the wrong fix for a control that was never theme-grey to
   begin with. Left unchanged. */
.lumio-scenario-dialogue[data-style="card"] {
  background: rgba(255,255,255,0.96); color: var(--ink-900);
  border-radius: var(--r-lg); padding: 18px 20px; box-shadow: none; border: 1px solid rgba(255,255,255,0.6);
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.lumio-scenario-dialogue[data-style="banner"] {
  background: rgba(0,0,0,0.55); border-radius: var(--r-md); padding: 16px 20px;
}
.lumio-scenario-dialogue[data-style="minimal"] { padding: 8px 4px; }
.lumio-scenario-character-name {
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px; opacity: 0.8;
}
.lumio-scenario-dialogue-text { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.lumio-scenario-dialogue[data-style="card"] .lumio-scenario-character-name { color: var(--ink-400); }
.lumio-scenario-choices { display: flex; flex-direction: column; gap: 8px; }
.lumio-scenario-choice {
  appearance: none; text-align: left; padding: 12px 16px; border-radius: var(--r-md);
  border: none; box-shadow: inset 0 0 0 1px var(--border); background: var(--surface-0); color: var(--ink-900);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: box-shadow 0.15s ease, background 0.15s ease;
}
.lumio-scenario-choice:hover { box-shadow: inset 0 0 0 1px var(--theme-primary, var(--indigo)); background: var(--pastel-lavender); }
.lumio-scenario-dialogue[data-style="banner"] .lumio-scenario-choice,
.lumio-scenario-dialogue[data-style="minimal"] .lumio-scenario-choice {
  background: rgba(255,255,255,0.95); border-color: transparent;
}
.lumio-scenario-feedback { animation: fadeInUp 0.25s ease-out; }
.lumio-scenario-final-msg { font-weight: 600; margin: 0; }
.lumio-scenario-continue { margin-top: 10px; }

/* --- Charts (Bar / Line / Pie) --- */
.lumio-chart-wrap { box-sizing: border-box; }
.lumio-chart-title { margin: 0 0 14px; font-weight: 700; color: inherit; }
.lumio-chart-svg { width: 100%; height: auto; overflow: visible; display: block; }
.lumio-chart-axis-label { font-size: 13px; text-align: center; margin-top: 6px; opacity: 0.75; }
.lumio-chart-legend { font-size: 13px; }
.lumio-chart-legend-item { display: flex; align-items: center; gap: 8px; }
.lumio-chart-legend-item + .lumio-chart-legend-item { margin-top: 8px; }
.lumio-chart-legend-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lumio-chart-bar.animate {
  animation: lumio-bar-grow 0.6s ease-out;
  transform-origin: bottom;
  transform-box: fill-box;
}
@keyframes lumio-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
.lumio-chart-line.animate {
  animation: lumio-line-draw 0.8s ease-out forwards;
}
@keyframes lumio-line-draw {
  from { stroke-dashoffset: var(--lumio-line-length, 1000); }
  to { stroke-dashoffset: 0; }
}
.lumio-chart-point.animate { animation: fadeIn 0.4s ease-out 0.5s both; }
.lumio-chart-pie.animate { animation: lumio-pie-grow 0.6s ease-out; }
@keyframes lumio-pie-grow {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lumio-chart-pie-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lumio-chart-pie-circle { width: 160px; height: 160px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 480px) {
  .lumio-chart-pie-circle { width: 120px; height: 120px; }
}

/* ── WORKSPACE THEME CARDS (Workspace Settings > Appearance) ──────────────
   Preview swatches use inline background colours from the theme definition —
   they never reference --ws-* tokens so the live application theme is never
   modified during a hover or focus event. */
.ws-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.ws-theme-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--surface-0);
  outline: none;
}
.ws-theme-card:hover {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 12%, transparent);
}
.ws-theme-card:focus-visible {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 20%, transparent);
}
.ws-theme-card--selected {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 18%, transparent);
}
.ws-theme-card__preview {
  display: flex;
  height: 72px;
  overflow: hidden;
}
.ws-theme-swatch { flex: 1; }
.ws-theme-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-0);
}
.ws-theme-card__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
}
.ws-theme-card__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ws-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Icon Pack Cards (Workspace Appearance > Icon Pack, Sprint 8) ── */
.ws-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.ws-pack-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--surface-0);
  outline: none;
}
.ws-pack-card:hover:not(.ws-pack-card--disabled) {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 12%, transparent);
}
.ws-pack-card:focus-visible {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 20%, transparent);
}
.ws-pack-card--selected {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 18%, transparent);
}
.ws-pack-card--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.ws-pack-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 68px;
  padding: 0 16px;
  background: var(--surface-alt);
  font-size: 20px;
}
.ws-pack-card__preview--empty {
  font-size: 10px;
  color: var(--ink-400);
  font-style: italic;
  text-align: center;
}
.ws-pack-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-0);
}
.ws-pack-card__name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
}
.ws-pack-card__desc {
  font-size: 11px;
  color: var(--ink-500);
  padding: 0 12px 10px;
}
.ws-pack-grid--compact .ws-pack-card {
  cursor: not-allowed;
}

/* ── Shared section helpers (Sprint 9) ──────────────────────────── */
.ws-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ws-subsection-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ── Live Preview section (Sprint 9) ────────────────────────────── */
.ws-prev-frame {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-0);
}
.ws-prev-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.ws-prev-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.ws-prev-url {
  flex: 1;
  font-size: 11px;
  color: var(--ink-400);
  text-align: center;
  margin: 0 8px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
}
.ws-prev-shell {
  display: flex;
  height: 200px;
}
.ws-prev-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--ws-sidebar-bg, var(--surface-alt));
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  gap: 4px;
}
.ws-prev-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.ws-prev-sidebar__logo .ws-logo--sidebar {
  width: 28px;
  height: 28px;
}
.ws-prev-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}
.ws-prev-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-md);
  cursor: default;
  font-size: 12px;
  color: var(--ink-600);
}
.ws-prev-nav--active {
  background: color-mix(in srgb, var(--ws-primary, #7C3AED) 12%, transparent);
  color: var(--ws-primary, #7C3AED);
  font-weight: 600;
}
.ws-prev-nav__ic {
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.ws-prev-nav__ic .ic--lumio { font-size: 14px; }
.ws-prev-nav__ic .ic--svg svg { width: 14px; height: 14px; }
.ws-prev-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ws-prev-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-0);
  gap: 8px;
}
.ws-prev-topbar__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
}
.ws-prev-topbar__btn {
  font-size: 11px;
  font-weight: 600;
  background: var(--ws-primary, #7C3AED);
  color: #fff;
  border-radius: var(--ws-radius, var(--r-md));
  padding: 4px 10px;
  cursor: default;
}
.ws-prev-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  overflow: hidden;
}
.ws-prev-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--ws-radius, var(--r-md));
  padding: 8px 12px;
}
.ws-prev-card__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.ws-prev-card__meta {
  font-size: 10px;
  color: var(--ink-400);
}
.ws-prev-swatches {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.ws-prev-swatch-cell {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ws-prev-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  flex-shrink: 0;
}
.ws-prev-swatch-label {
  font-size: 10px;
  color: var(--ink-400);
  text-transform: capitalize;
}
.ws-prev-radius-label {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-400);
}

/* ── Workspace Identity section (Sprint 9) ──────────────────────── */
.ws-identity-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ws-identity-logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ws-identity-logo-frame {
  width: 64px;
  height: 64px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-identity-logo-hint {
  font-size: 10px;
  color: var(--ink-400);
}
.ws-identity-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ws-identity-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-identity-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.ws-identity-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
}
.ws-identity-note {
  font-size: 11px;
  color: var(--ink-400);
}
.ws-identity-future-note {
  font-size: 11px;
  color: var(--ink-500);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 10px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}
.ws-identity-future-note .ic--lumio,
.ws-identity-future-note .ic--svg svg { font-size: 13px; width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }

/* ── Workspace Logo Slots section (Sprint 9) ─────────────────────── */
.ws-logo-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.ws-logo-slot-grid--reserved {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ws-logo-slot-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
}
.ws-logo-slot-card--reserved {
  opacity: 0.6;
}
.ws-logo-slot-preview {
  height: 80px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.ws-logo-slot-preview--reserved {
  font-style: italic;
}
.ws-logo-slot-preview .ws-logo--sidebar       { width: 34px; height: 34px; }
.ws-logo-slot-preview .ws-logo--sidebar-large { max-width: 140px; max-height: 40px; }
.ws-logo-slot-preview .ws-logo--compact       { width: 32px; height: 32px; }
.ws-logo-slot-preview .ws-logo--login-badge   { width: 40px; height: 40px; }
.ws-logo-slot-preview .ws-logo--welcome       { max-width: 56px; max-height: 56px; }
.ws-logo-slot-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.ws-logo-slot-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ws-logo-slot-desc {
  font-size: 11px;
  color: var(--ink-500);
  line-height: 1.5;
}
.ws-logo-slot-specs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0;
}
.ws-logo-slot-spec {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-500);
}

/* ── Logo upload controls (Sprint 10) ──────────────────────────── */
.ws-logo-slot-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ws-logo-slot-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.ws-logo-upload-label {
  position: relative;
  cursor: pointer;
  flex: 1;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-logo-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.ws-logo-remove-btn {
  flex-shrink: 0;
  color: var(--ink-400);
  font-size: 12px;
}
.ws-logo-remove-btn:hover {
  color: #dc2626;
}
.ws-logo-upload-error {
  display: none;
  font-size: 11px;
  color: #dc2626;
  background: color-mix(in srgb, #dc2626 8%, transparent);
  border: 1px solid color-mix(in srgb, #dc2626 20%, transparent);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  line-height: 1.4;
}
.ws-logo-upload-error--visible {
  display: block;
}

/* ── Login Branding section (Sprint 9) ──────────────────────────── */
.ws-login-brand-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.ws-login-mini-frame {
  flex-shrink: 0;
  width: 260px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-0);
}
.ws-login-mini-chrome {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.ws-login-mini-body {
  display: flex;
  flex-direction: row;
  height: 130px;
}
.ws-login-mini-backdrop {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
}
.ws-login-mini-backdrop > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  display: block;
}
.ws-login-mini-badge {
  position: absolute;
  top: 6px;
  left: 6px;
}
.ws-login-mini-badge .ws-logo--login-badge {
  width: 24px;
  height: 24px;
}
.ws-login-mini-auth {
  flex: 0 0 auto;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 10px;
  border-left: 1px solid var(--border);
}
.ws-login-mini-heading {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 2px;
}
.ws-login-mini-field {
  width: 100%;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-alt);
}
.ws-login-mini-btn {
  width: 100%;
  height: 20px;
  border-radius: var(--r-sm);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ws-login-brand-slots {
  flex: 1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

/* ── pill-teal variant ──────────────────────────────────────────── */
.pill-teal {
  background: color-mix(in srgb, #0891b2 15%, transparent);
  color: #0891b2;
}

/* ── Workspace Logo Renderer ─────────────────────────────── */
/* All sizing owned here. Pages must not set inline dimensions on logo imgs. */
.ws-logo                    { object-fit: contain; display: block; flex-shrink: 0; }
.ws-logo--login-badge       { width: 40px; height: 40px; }
.ws-logo--login-background  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; display: block; }
.ws-logo--sidebar           { width: 34px; height: 34px; border-radius: var(--r-sm); }
.ws-logo--sidebar-large     { max-width: 140px; height: auto; }
.ws-logo--compact           { width: 32px; height: 32px; cursor: pointer; }
.ws-logo--welcome           { max-width: 240px; max-height: 240px; margin: 0 auto; }

/* ── Platform Icon Infrastructure (Sprint 6) ─────────────────── */
/* ic--lumio: emoji pack — inherits font-size from context, no special sizing */
.ic--lumio { line-height: 1; }

/* ic--svg: SVG pack container — sizes the SVG to match context font-size */
.ic--svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}
.ic--svg svg { width: 1em; height: 1em; display: block; }

/* Nav icons use --ws-icon as stroke colour when SVG pack is active */
.nav-item .ic--svg { color: var(--ws-icon, var(--ink-700)); }
.nav-item.active .ic--svg { color: var(--ws-icon, var(--ws-primary, var(--indigo))); }

/* ── Workspace Identity — editable inputs (Sprint 11) ─────────────────── */
.ws-identity-input {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--surface-0);
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.ws-identity-input:focus {
  outline: none;
  border-color: var(--ws-primary, var(--violet));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary) 8%, transparent);
}
.ws-identity-input--short { max-width: 160px; }
.ws-identity-input-error {
  font-size: 12px;
  color: var(--red, #DC2626);
  min-height: 18px;
  margin-top: 4px;
}
.ws-identity-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.ws-identity-save-feedback {
  font-size: 13px;
  color: var(--green, #16A34A);
  font-weight: 500;
}

/* ── Workspace Appearance — page-level section labels (Sprint 12) ──────── */
.ws-page-section {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 8px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ws-border);
}

/* ── Live Preview — workspace name beside sidebar logo (Sprint 12) ──────── */
.ws-prev-sidebar__name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* ── Theme card — disabled / custom coming-soon state (Sprint 12) ───────── */
.ws-theme-card--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
.ws-theme-card__preview--custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 72px;
  background: var(--surface-50);
}
.ws-theme-card__custom-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  opacity: 0.8;
}

/* ── Theme card — mini chrome preview (Sprint 13) ──────────────────────── */
.ws-tc-sidebar {
  width: 28%;
  flex-shrink: 0;
  height: 100%;
}
.ws-tc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ws-tc-topbar {
  height: 14px;
  flex-shrink: 0;
}
.ws-tc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
}
.ws-tc-bar {
  height: 7px;
  border-radius: 3px;
  width: 72%;
}
.ws-tc-bar--sm { width: 50%; }
.ws-tc-bar--xs { width: 85%; opacity: 0.45; }

/* ic--missing: stable layout placeholder for unregistered semantic IDs.
   Fixed dimensions prevent layout shift. Low opacity ensures it is
   visually neutral. Never contains text — developers see console.warn instead. */
.ic--missing {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.25;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── CUSTOM THEME EDITOR (Sprint 16 — Phase 4) ──────────────────────────────
   Inline colour-token editor, visible only when Custom theme is selected.
   All writes go through applyWorkspaceIdentity() — no direct --ws-* writes. */

.ws-cte-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  background: var(--surface-alt);
}
.ws-cte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px 24px;
}
.ws-cte-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-cte-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-cte-color-input {
  width: 36px;
  height: 28px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px;
  cursor: pointer;
  background: var(--surface-0);
  flex-shrink: 0;
}
.ws-cte-hex {
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  color: var(--ink-500);
  width: 54px;
  flex-shrink: 0;
}
.ws-cte-text-input {
  flex: 1;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  background: var(--surface-0);
  color: var(--ink-900);
  min-width: 0;
}
.ws-cte-text-input:focus {
  outline: none;
  border-color: var(--ws-primary);
}

.ws-cte-row--shadow .ws-cte-shadow-editor {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ws-cte-shadow-range {
  flex: 1;
  accent-color: var(--ws-primary);
  cursor: pointer;
  min-width: 0;
}
.ws-cte-shadow-pct {
  min-width: 32px;
  text-align: right;
}

/* ── WORKSPACE APPEARANCE MANAGER (Sprint 16) ────────────────────────────────
   Profile cards for the Appearance Manager. Preview strips use inline
   background colours from stored profile token values — they never reference
   --ws-* custom properties so the live theme is not disturbed on hover. */

.ws-ap-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.ws-ap-card {
  width: 200px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg, 12px);
  background: var(--surface-0);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.ws-ap-card:hover { border-color: var(--ws-primary, var(--violet)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary, var(--violet)) 10%, transparent); }
.ws-ap-card:focus-visible { outline: 2px solid var(--ws-primary, var(--violet)); outline-offset: 2px; }

.ws-ap-card--active {
  border-color: var(--ws-primary, var(--violet));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ws-primary, var(--violet)) 12%, transparent);
}

.ws-ap-card__preview {
  display: flex;
  height: 80px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: calc(var(--r-lg, 12px) - 1.5px) calc(var(--r-lg, 12px) - 1.5px) 0 0;
}
.ws-ap-card__preview-sidebar {
  width: 28px;
  flex-shrink: 0;
}
.ws-ap-card__preview-main {
  flex: 1;
  padding: 10px 10px 0;
}

/* Add card preview area — dashed + centred + icon */
.ws-ap-card__preview--add {
  align-items: center;
  justify-content: center;
  background: var(--surface-50, #FBFBFE);
}

.ws-ap-card__add-icon {
  font-size: 28px;
  font-weight: 300;
  color: var(--ink-400);
  line-height: 1;
}

.ws-ap-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  min-height: 52px;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 10;
}

.ws-ap-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-ap-card__subtitle {
  font-size: 11px;
  color: var(--ink-400);
  margin-top: 1px;
}
.ws-ap-card__add-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-400);
}

.ws-ap-card--add {
  border-style: dashed;
  border-color: var(--border);
  cursor: pointer;
}
.ws-ap-card--add:hover { border-color: var(--ws-primary, var(--violet)); }
.ws-ap-card--add .ws-ap-card__add-icon,
.ws-ap-card--add:hover .ws-ap-card__add-label { color: var(--ws-primary, var(--violet)); }

.ws-ap-card__active-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--ws-primary, var(--violet));
  background: color-mix(in srgb, var(--ws-primary, var(--violet)) 10%, transparent);
  border-radius: 99px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* Card meta block (name + status line) */
.ws-ap-card__meta {
  flex: 1;
  min-width: 0;
}
.ws-ap-card__status {
  font-size: 11px;
  font-weight: 600;
  color: var(--ws-primary, var(--violet));
  margin-top: 2px;
}

/* Overflow ⋯ menu */
.ws-ap-overflow-wrap {
  position: relative;
  flex-shrink: 0;
}
.ws-ap-overflow-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-400);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}
.ws-ap-overflow-btn:hover { background: var(--border); color: var(--ink-900); }

.ws-ap-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  box-shadow: var(--ws-shadow);
  min-width: 130px;
  z-index: 200;
  overflow: hidden;
}
.ws-ap-menu[hidden] { display: none; }

.ws-ap-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}
.ws-ap-menu-item:hover { background: var(--surface-50, #FBFBFE); }
.ws-ap-menu-item--danger { color: #DC2626; }
.ws-ap-menu-item--danger:hover { background: #FEF2F2; }

/* "✓ Active" informational row — not a button */
.ws-ap-menu-active-row {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-primary, var(--violet));
  cursor: default;
  user-select: none;
}

/* Separator between top action and edit/dupe/delete group */
.ws-ap-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

/* ── APPEARANCE EDITOR CHROME (Sprint 16) ─────────────────────────────────── */

.ws-editor-chrome {
  /* No visual wrapper — just a semantic grouping div. */
}

.ws-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ws-editor-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}