/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
/* Milestone 11 (final v1.0 UI refinement): the learner-facing app is now
   Light Mode only, permanently. There is no toggle here, no [data-theme]
   branching, no prefers-color-scheme media query, and nothing is read from
   or written to localStorage for theme — by design. The admin app's
   separate Dark/Light system (admin.css's [data-theme="light"] block,
   driven by admin-theme.js and the "us_admin_theme" localStorage key) is
   completely independent of this file and is untouched by this change.
   These token values are the same warm-ivory palette used by the admin
   app's light theme, reused here for one consistent brand look — but this
   file has no dark variant to fall back to; it is simply the page's only
   theme now. */
:root {
  --bg-deep:       #FBF6EC;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #F5F0E6;
  --bg-input:      #F7F3EA;
  --border:        rgba(20,18,12,0.09);
  --border-focus:  rgba(138,90,43,0.45);

  --text-primary:  #1F1B14;
  --text-secondary:#6B6356;
  --text-muted:    #9C9484;

  /* Milestone 24.2: was #5B6EF5 (indigo) — the last leftover non-gold accent
     colour in the learner runtime. Retired in favour of the Premium Report's
     own warmBronze (design-tokens.css --gold-dark / premium-bronze,
     #8A5A2B), giving --btn-primary/links/focus-rings a second, deeper tone
     within the same gold family as --gold rather than an unrelated hue —
     preserves the existing two-tier button hierarchy (bronze --accent for
     in-flow "Next"/link actions, bright --gold reserved for the terminal
     action) without introducing a competing palette. Every literal
     rgba(91,110,245,...) use elsewhere in this file was converted to the
     matching bronze rgba(138,90,43,...) in the same pass — see git history
     for the mechanical diff. */
  --accent:        #8A5A2B;
  --accent-soft:   rgba(138,90,43,0.08);
  --accent-glow:   rgba(138,90,43,0.18);
  /* Milestone 24.2: was #C8932E — reconciled to the Premium Report's own
     heroGold (design-tokens.css --gold-primary, #C9A24B) so the learner
     runtime and the Report draw from one gold value, not two near-duplicate
     ones. Every literal rgba(200,147,46,...) use elsewhere in this file was
     converted to the matching rgba(201,162,75,...) in the same pass. */
  --gold:          #C9A24B;
  --gold-soft:     rgba(201,162,75,0.10);

  /* Milestone 24 Part 2: the exact palette values from the Premium Report
     Design System (supabase-migration-learner-report-v2-premium.sql's own
     branding.heroGold/champagneGold/warmBronze/ivoryPaper/softCharcoal
     fields) — reused here, verbatim, so the browser Results screen and the
     downloadable PDF are unmistakably the same design system rather than
     two palettes that merely happen to both be "gold on ivory". Originally
     scoped to the Results/Report screen only; Milestone 24.2 then
     reconciled --gold/--bg-deep themselves (above) to these same values,
     so --premium-hero-gold/--premium-ivory are now identical to --gold/
     --bg-deep rather than a second, screen-scoped palette — these aliases
     are kept only because .results-*/.summary-card/.feedback-card already
     reference them by name; new rules elsewhere should prefer --gold/
     --bg-deep directly rather than adding new --premium-* references. */
  --premium-hero-gold:  #C9A24B;
  --premium-champagne:  #F3E3BE;
  --premium-bronze:     #8A5A2B;
  --premium-ivory:      #FBF6EC;
  --premium-charcoal:   #2E2A24;

  /* Milestone 11: darkened from their original dark-background-tuned pastel
     values (kept here for reference: leadership #5B6EF5, communication
     #F0C060, ethics #6EE7B7, empathy #F472B6, teamwork #60A5FA,
     decisionMaking #A78BFA). Those were only legible as text on the old
     near-black background; on the new ivory background they'd fall as low
     as 1.4:1. Each colour below was darkened along its own hue until it
     comfortably cleared WCAG AA (4.5:1) against --bg-deep (#FBF6EC), with a
     small margin so rounding never puts one right on the boundary.
     --skill-leadership is a darkened indigo, kept as its own literal value
     rather than tied to --accent — Milestone 24.2 repointed --accent itself
     to a bronze/gold tone (see above), and the two were only ever visually
     similar by coincidence, not the same design intent, so this palette is
     untouched by that change. These same hex values are mirrored in
     engine.js's SKILL_COLORS (used for the radar chart and inline text
     colours, which read from JS, not these CSS variables) — keep both in
     sync if this palette ever changes again. */
  --skill-leadership:     #4A5FF4;
  --skill-communication:  #95680E;
  --skill-ethics:         #157E54;
  --skill-empathy:        #D61178;
  --skill-teamwork:       #076BE5;
  --skill-decisionmaking: #794EF7;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow-card: 0 1px 3px rgba(20,18,12,0.06), 0 1px 2px rgba(20,18,12,0.04);
  --shadow-glow: 0 0 32px rgba(138,90,43,0.10);

  /* Milestone 24.2: was 'DM Serif Display', Georgia, serif — a Google Font
     load, distinct from the Premium Report's own display face
     (design-tokens.css --font-display: Georgia, 'Iowan Old Style', 'Times
     New Roman', serif — a native stack, no font load, chosen there for
     reliable Chromium PDF rendering). Aligned to that exact stack so a
     learner moving from the runtime into the Report sees the same serif,
     not two different display typefaces back to back. The Google Fonts
     <link> in platform.html/index.html was trimmed to drop the now-unused
     DM+Serif+Display family (Inter/JetBrains Mono are still loaded, both
     still referenced below). */
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; }
h3 { font-size: 1.15rem; font-weight: 400; }

p { color: var(--text-secondary); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Layout Shell ────────────────────────────────────────────────────────── */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  display: none;
  flex-direction: column;
  animation: fadeSlideIn 0.35s ease both;
}
.view.active { display: flex; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; }
}

/* ─── Editorial Canvas (Milestone 12.2 — "Ivory & Gold Refinement") ──────────
   Milestone 12.1's white-filled card read as a dashboard panel dropped onto
   the ivory page — the opposite of the "elegant sheet of paper" brief. This
   removes the fill entirely: the canvas background now matches the page
   (--bg-deep) exactly, so the *only* thing that defines the assessment area
   is a faint gold hairline border, plus a soft warm-toned (not black) ambient
   shadow. A short settle-in animation on load gives it the same quiet "card
   lift" feel a printed page has when it's set down on a desk, distinct from
   the page-level fade the parent .view already does. Presentation only —
   still no new elements, IDs, event bindings, or DOM structure. */
.editorial-canvas {
  background: var(--bg-deep);
  border: 1px solid rgba(201, 162, 75, 0.2);
  box-shadow: 0 10px 40px rgba(139, 106, 18, 0.04);
  border-radius: 22px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 3.25rem);
  animation: canvasSettle var(--transition-slow) both;
  animation-delay: 0.06s;
}

@keyframes canvasSettle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* An inner text-measure column, narrower than the canvas itself, used only
   on denser screens (Question/Reflection) so line length stays comfortable
   even though the canvas's own outer width (950–1000px, per spec) is wider
   than an ideal reading column — the same "generous margins around a
   centred text column" convention as a printed editorial page. Optional:
   the Introduction and Completion canvases are sparse enough to use the
   canvas's own padding directly, with no inner wrapper needed. */
.editorial-canvas-content {
  max-width: 680px;
  margin: 0 auto;
}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
/* Milestone 12.1: more breathing room around the logo (60px → 76px).
   Milestone 12.2: border-bottom recoloured from a neutral near-black tint to
   the same muted gold used everywhere else in this file — every divider on
   the page now comes from one warm palette instead of mixing gold accents
   with grey/black-alpha structural lines. Branding itself is unchanged —
   same logo, same single accent-coloured span, no new marks. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 5vw, 3.25rem);
  height: 76px;
  /* Milestone 11: was rgba(13,15,26,0.85) — a hardcoded near-black translucent
     bar tuned for the old dark page background. Now a translucent version of
     the light --bg-deep so the sticky nav blends with the rest of the page
     instead of floating as a dark bar over light content. */
  background: rgba(251,248,242,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 162, 75, 0.15);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.nav-logo span { color: var(--accent); }

.nav-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
/* Milestone 24.2: hover was #6B7EFF (a lightened indigo) — replaced with a
   lightened version of the new bronze --accent, same lift/glow treatment,
   no blue anywhere in this state either. */
.btn-primary:hover { background: #A5713A; transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); }

.btn-gold {
  background: var(--gold);
  color: #0D0F1A;
  font-weight: 600;
}
/* Milestone 12.2: hover glow softened — warmer gold tint, lower opacity,
   slightly larger spread — reads as a gentle glow rather than a hard flash. */
.btn-gold:hover { background: #F5CC70; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(201,162,75,0.28); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ─── Cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

/* ─── Form Elements ───────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }

.input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition);
  outline: none;
  width: 100%;
}
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-muted); }

/* ─── Auth View ───────────────────────────────────────────────────────────── */
#view-auth {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
  /* Milestone 11: opacity reduced from 0.12 to 0.06 to match the same
     adjustment admin.css already made for its light theme's equivalent
     login/setup background — a stronger tint reads as muddy on a light
     page. */
  background: radial-gradient(ellipse at 50% 0%, rgba(138,90,43,0.06) 0%, transparent 70%);
}

.auth-box {
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 2.5rem;
}
.auth-logo h1 { font-size: 2rem; }
.auth-logo h1 span { color: var(--accent); }
.auth-logo p { margin-top: 0.4rem; font-size: 0.875rem; color: var(--text-muted); }

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
}

.auth-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 0.25rem;
  margin-bottom: 1.75rem;
}
.auth-tab {
  flex: 1;
  padding: 0.5rem;
  border-radius: calc(var(--radius-md) - 2px);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  background: transparent;
  font-family: var(--font-body);
}
.auth-tab.active { background: var(--bg-card); color: var(--text-primary); }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-divider {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.5rem 0;
}

.auth-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  /* Milestone 11: was #FCA5A5 — a light salmon-pink tuned for the old dark
     background. Against this box's own translucent-red background
     composited over the new light page background it measured ~1.5:1,
     well under WCAG AA. #B91C1C clears 4.5:1 with margin against both this
     box and #results-save-error's box below — using the same dark red in
     both keeps the app's "this is an error" colour consistent. */
  color: #B91C1C;
  display: none;
}
.auth-error.show { display: block; }

/* Milestone 12.2: the standalone-mode learner identification screen reuses
   .auth-card/.input/.auth-form verbatim — those classes are shared with the
   separate admin/author login screen (#view-auth) and are deliberately left
   untouched globally (see file-header note on the admin app's independent
   design system). Scoped to #view-learner-id only, this gives the shared
   card/inputs the same ivory-fill/gold-outline/gold-focus treatment as
   every other learner-facing screen, without touching the admin login. */
#view-learner-id .auth-card {
  background: var(--bg-deep);
  border: 1px solid rgba(201, 162, 75, 0.2);
  box-shadow: 0 10px 40px rgba(139, 106, 18, 0.04);
  animation: canvasSettle var(--transition-slow) both;
  animation-delay: 0.06s;
}
#view-learner-id .input {
  border-color: rgba(201, 162, 75, 0.18);
}
#view-learner-id .input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* ─── Dashboard / Catalogue ───────────────────────────────────────────────── */
#view-dashboard {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.dashboard-header {
  margin-bottom: 2.5rem;
}
.dashboard-header h2 { color: var(--text-secondary); font-family: var(--font-body); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 0.4rem; }
.dashboard-header h1 { color: var(--text-primary); }

.assessment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.assessment-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.assessment-card:hover { transform: translateY(-3px); border-color: rgba(138,90,43,0.35); box-shadow: var(--shadow-glow); }

.assessment-card-cover {
  height: 140px;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  background: linear-gradient(135deg, #1A0A2E 0%, #2A1545 100%);
  position: relative;
  overflow: hidden;
}
.assessment-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}
.assessment-card-cover-icon {
  font-size: 2.5rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.assessment-card-body { padding: 1.25rem; }
.assessment-card-body h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.2rem; }
.assessment-card-subtitle { font-size: 0.78rem; color: var(--accent); font-weight: 500; margin-bottom: 0.6rem; }
.assessment-card-desc { font-size: 0.84rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5; }
.assessment-card-meta { display: flex; align-items: center; justify-content: space-between; }
.assessment-card-duration { font-size: 0.75rem; color: var(--text-muted); }

.assessment-card-completed {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--skill-ethics);
  background: rgba(110,231,183,0.1);
  border: 1px solid rgba(110,231,183,0.2);
  border-radius: 99px;
  padding: 0.2rem 0.55rem;
}

/* Milestone 12.4 accessibility correction: this rule's only use in the
   learner-facing app is now "In Detail" on Results (main.css and admin.css
   are separate stylesheets for separate apps — admin's own identical class
   name is unaffected). --text-muted measures ~2.8:1 on this ivory
   background, under WCAG AA; --text-secondary (~5.6:1) passes with room. */
.section-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-weight: 500;
}

.results-history { display: flex; flex-direction: column; gap: 0.75rem; }

.history-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: var(--transition);
}
.history-card:hover { border-color: rgba(138,90,43,0.3); background: var(--bg-card-hover); }
.history-card-info { flex: 1; }
.history-card-title { font-weight: 500; font-size: 0.95rem; margin-bottom: 0.15rem; }
.history-card-date { font-size: 0.78rem; color: var(--text-muted); }
.history-card-scores { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.score-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  font-family: var(--font-mono);
}

/* ─── Assessment View ─────────────────────────────────────────────────────── */
#view-assessment {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem);
}

.assessment-header {
  margin-bottom: 2rem;
}
/* Milestone 12 Phase 3: track background contrast reduced (was var(--border),
   a visible 9%-opacity line) so the bar reads as ambient rather than a
   dashboard element — the brief's own "avoid oversized progress bars"
   warning, applied to weight/contrast rather than just height (height was
   already a restrained 3px). */
/* Milestone 12.1: margin-bottom widened (1.5rem → 2.25rem) — "the page
   should breathe more," and the progress bar is the first thing on the
   canvas, so its own trailing space sets the tone for every gap below it. */
/* Milestone 12.2: track tinted warm gold instead of neutral black-alpha, to
   match the rest of the page's single gold divider language — kept very
   faint (8% opacity) so the filled gradient above it still reads as the
   only "active" colour on the bar. */
.assessment-progress-bar {
  height: 3px;
  background: rgba(139, 106, 18, 0.08);
  border-radius: 99px;
  margin-bottom: 2.25rem;
  overflow: hidden;
}
/* Milestone 12.1: single-palette gold gradient, replacing the gold→indigo
   blend — "editorial and less like application chrome" applied to the one
   remaining spot on this screen still mixing in the generic --accent
   colour. */
.assessment-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B6A12, var(--gold));
  border-radius: 99px;
  transition: width 0.4s ease;
}

.assessment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
/* Milestone 12.1 accessibility correction: --gold (#C9A24B) as small text
   on this canvas's white background measures ~2.7:1 — under WCAG AA's
   4.5:1 for normal-sized text (a pre-existing gap from Phase 3, made
   visible rather than worse by the new white canvas background, and
   corrected here while this exact rule is already being touched). Reuses
   the darker "editorial gold" value already documented in
   docs/PREMIUM_DESIGN_SYSTEM.md §1.2 (antiqueGold, #8B6A12 — there
   reserved for the PDF sidebar signature text) rather than inventing a new
   colour; measures ~5:1 on white, passing AA with margin. */
.assessment-meta-show { font-size: 0.76rem; color: #8B6A12; font-weight: 600; }
/* Milestone 12 Phase 3: replaces the old monospace "N / M" digit counter
   ("reads as data") with the same uppercase, letter-spaced small-caps
   treatment as .sal-eyebrow/.question-scene ("reads as editorial") —
   populated by renderQuestion() as e.g. "QUESTION 3 OF 12", not raw
   numerals alone. */
.assessment-meta-counter {
  font-size: 0.72rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.question-scene {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 1.15rem;
  font-weight: 600;
}

/* Milestone 12.1 ("Editorial Canvas Refinement"): the question is now
   treated explicitly as the editorial headline — the canvas's visual
   focal point, not a form label. Ceiling raised again (1.85rem → 2.1rem),
   generous margin below widened further (2.5rem → 3rem) so it reads with
   the same "authored moment" weight as the Report's own cover title and
   the Introduction's headline (both already this same --font-display). */
.question-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  color: var(--text-primary);
  margin-bottom: 3rem;
  line-height: 1.45;
}

/* Milestone 12.1: gap between answer options widened (1rem → 1.15rem) —
   "the page should breathe more" applied to the choice list too, not just
   the text above it. */
.options { display: flex; flex-direction: column; gap: 1.15rem; }

/* Milestone 12 Phase 3: border weight down from 2px to a near-invisible 1px
   at rest — the option card's own doctrine already diverges from the
   Report's "no boxed cards" rule (§9.2 of the Design System doc), but the
   resting border no longer competes with the question text for attention;
   the selected state (below) carries the visual weight instead. */
/* Milestone 12.1: radius widened to match .editorial-canvas's own 22px
   (was --radius-lg, 20px) — a small, deliberate echo so the option cards
   read as belonging to the same "sheet of paper" the canvas itself is, not
   a separate, slightly-different UI kit. Padding widened for more generous
   internal breathing room, per the brief. */
.option {
  background: var(--bg-card);
  border: 1px solid rgba(201, 162, 75, 0.22);
  border-radius: 22px;
  padding: 1.5rem 1.75rem;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  text-align: left;
  font-family: var(--font-body);
  position: relative;
}
/* Milestone 12.1: hover elegance — a restrained lift + soft neutral shadow
   (not a colour glow) alongside the existing gold-tint fill, matching the
   Editorial Canvas's own "extremely subtle" shadow language rather than
   introducing a new, more colourful interaction effect. */
.option:hover {
  border-color: rgba(201, 162, 75, 0.35);
  color: var(--text-primary);
  background: var(--gold-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 18, 12, 0.05);
}
/* Milestone 12 Phase 3: the selected state now carries the visual weight
   entirely through a gold-tinted fill + a thin gold left edge, rather than
   a heavier all-round border swap — "elegant interactions," not an instant
   colour snap. padding-left compensates for the border-left so option text
   doesn't visibly shift when a choice is selected. */
.option.selected {
  border-color: rgba(201, 162, 75, 0.35);
  border-left: 3px solid var(--gold);
  padding-left: calc(1.5rem - 2px);
  background: var(--gold-soft);
  color: var(--text-primary);
}
.option.selected::before {
  content: '✓';
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
}

.question-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.75rem;
  gap: 1rem;
}
/* Milestone 12.1: navigation restyled to harmonise with the Premium Design
   System's gold/ivory language — behaviour, IDs, and event bindings are
   completely unchanged (see btn-next/btn-prev/btn-abandon in app.js), this
   is presentation only, and deliberately scoped to .question-nav so the
   Learner ID form's Continue button and the Results screen's Retake button
   (out of scope for this refinement) keep their existing .btn-primary/
   .btn-ghost styling untouched. "Next" gets an ivory-and-gold secondary
   treatment (still clearly the forward action) rather than the generic
   indigo --accent fill, reserving solid gold (.btn-gold, unchanged) for
   the true primary action on the final question ("Submit"). */
/* Accessibility note: --gold (#C9A24B) as a TEXT colour on an ivory/white
   background measures ~2.5:1 contrast — well under WCAG AA's 4.5:1 for
   normal-sized text. Gold is used here only as a border/accent colour, with
   --text-primary (a near-black, comfortably >12:1 on this background)
   carrying the actual label text, so this button is at least as readable
   as the indigo-filled version it replaces — no accessibility regression,
   per this milestone's own explicit constraint. */
/* Milestone 12.2: "Next" moves from an ivory-filled pill to a true outline —
   background now transparent (it sits directly on the equally-ivory canvas,
   so there's no fill to remove visually) with the gold border carrying all
   the definition, plus a soft gold glow on hover instead of a flat colour
   swap. "Back"/"Exit" get the same outline treatment one step fainter, so
   the hierarchy between the two still reads at a glance. */
.question-nav .btn-primary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(201, 162, 75, 0.45);
  box-shadow: none;
  transition: var(--transition), box-shadow 0.3s ease;
}
.question-nav .btn-primary:hover {
  background: var(--gold-soft);
  border-color: rgba(201, 162, 75, 0.65);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 162, 75, 0.18);
}
.question-nav .btn-ghost {
  background: transparent;
  border-color: rgba(201, 162, 75, 0.22);
  transition: var(--transition), box-shadow 0.3s ease;
}
.question-nav .btn-ghost:hover {
  background: rgba(201, 162, 75, 0.05);
  border-color: rgba(201, 162, 75, 0.35);
  box-shadow: 0 6px 18px rgba(201, 162, 75, 0.10);
}

/* ─── Completion sequence (Milestone 12 Phase 5, §5.6) ───────────────────────
   Full-screen, non-interactive, calm — the brief's "this should create
   anticipation, not artificial delay" taken literally: the ring is ambient
   (slow scale+opacity pulse, no rotation) rather than a loading spinner,
   and the copy crossfades on --transition-slow rather than snapping. */
.completion-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
/* Milestone 12.1: .editorial-canvas's own default max-width (960px) is
   tuned for text-heavy screens — this content is a small, centred ring +
   one line of copy, so the canvas itself is capped narrower and sized to
   its content rather than stretched full-width. Still the same ivory-
   outline/border/shadow/radius "sheet of paper" as every other canvas. */
.completion-canvas {
  max-width: 480px;
  text-align: center;
}
.completion-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0.32;
  margin: 0 auto 2.75rem;
  animation: completion-pulse 2.6s ease-in-out infinite;
}
@keyframes completion-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.24; }
  50%      { transform: scale(1.06); opacity: 0.5; }
}
.completion-line {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 400;
  color: var(--text-primary);
  max-width: 420px;
  line-height: 1.55;
  opacity: 0;
  transition: opacity var(--transition-slow);
}
.completion-line.visible { opacity: 1; }

/* ─── Report hand-off (Milestone 12 Phase 5, §5.7) ────────────────────────────
   A single, calm "it's ready" beat before any data appears — the Premium
   Report itself is untouched; this screen only bridges the wait into it. */
.handoff-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}
.handoff-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--text-primary);
  max-width: 480px;
  line-height: 1.35;
  margin-bottom: 2.25rem;
}

/* ─── Results View ────────────────────────────────────────────────────────── */
#view-results {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.results-hero {
  text-align: center;
  padding: 2rem 1rem 3rem;
  position: relative;
}
.results-hero::before {
  content: '';
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  /* Milestone 24 Part 2: warm-gold glow re-tuned to the Premium Report's own
     heroGold, echoing that Template's cover-page hero treatment (was the
     same shape/opacity but plain --gold since Milestone 12.2). */
  background: radial-gradient(ellipse, rgba(201,162,75,0.16) 0%, transparent 70%);
  pointer-events: none;
}
/* Milestone 24 Part 2: thin champagne/bronze double rule under the eyebrow —
   the same "ceremonial divider" language the Premium PDF uses under its own
   cover-page title, in CSS rather than an ornamental image. */
.results-hero-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--premium-bronze);
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
}
.results-hero-eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--premium-hero-gold), transparent);
}
.results-hero h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); margin-bottom: 0.5rem; }
.results-hero p { font-size: 0.9rem; color: var(--text-secondary); }

.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; } }

/* Milestone 12.2: fill dropped from solid white to the page's own ivory
   (matching the Editorial Canvas treatment on every other learner screen),
   border recoloured from neutral grey to the same faint gold hairline —
   these panels no longer read as white dashboard cards sitting on ivory. */
.results-chart-card {
  background: var(--premium-ivory);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.results-chart-card h3 { font-family: var(--font-display); font-size: 1rem; margin-bottom: 1.25rem; color: var(--text-secondary); font-weight: 400; }

.chart-wrap { position: relative; width: 100%; max-width: 240px; }

.skill-bars { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; }

.skill-bar-row { display: flex; flex-direction: column; gap: 0.3rem; }
.skill-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.skill-bar-label .score-val { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; }
/* Milestone 12.2: track tinted warm gold, matching .assessment-progress-bar's
   own already-converted track — one consistent "faint gold rail" language
   for every progress/level indicator in the app. */
.skill-bar-track {
  height: 6px;
  background: rgba(138, 90, 43, 0.10);
  border-radius: 99px;
  overflow: hidden;
}
.skill-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

.feedback-cards { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }

/* Milestone 24 Part 2: same ivory-fill/hairline treatment as
   .results-chart-card above, tuned to the Premium palette so this card and
   the PDF's own editorial cards read as the same design system. */
.feedback-card {
  background: var(--premium-ivory);
  border: 1px solid rgba(201, 162, 75, 0.25);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.feedback-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 0.3rem;
  flex-shrink: 0;
}
.feedback-card h4 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.feedback-card p { font-size: 0.875rem; }
.feedback-card-band-label {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  opacity: 0.75;
}
.feedback-card-recommendation {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(138, 90, 43, 0.3);
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.9;
}

/* Milestone 24 Part 2: this is the browser echo of the Premium PDF's own
   hero score/medal card (ScoreCardPremium) — same champagne-to-transparent
   gradient fill and bronze hairline the PDF uses around its score ring, so
   "What This Means" reads as the same design system's hero panel rather
   than a generic highlighted box. */
.summary-card {
  background: linear-gradient(135deg, rgba(243,227,190,0.55) 0%, rgba(201,162,75,0.06) 100%);
  border: 1px solid rgba(138, 90, 43, 0.35);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.summary-card h3 { margin-bottom: 0.5rem; font-size: 1.3rem; color: var(--premium-charcoal); }
.summary-card p { font-size: 0.875rem; max-width: 500px; margin: 0 auto; }

/* Milestone 12.4: "Key Strengths" / "Growth Opportunity" — the exact same
   strengths/growth data the narrative sentence above already draws on
   (summarise(), engine-pure.js), surfaced a second time as two quiet
   labelled callouts rather than left buried inside one run-on sentence.
   Deliberately understated — small caps label + serif value, no chips/
   pills/icons — so this reads as an editorial aside, not a stats widget. */
.summary-highlights {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 162, 75, 0.18);
}
.summary-highlight {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.summary-highlight-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8B6A12;
}
.summary-highlight-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text-primary);
}

.results-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}
/* Milestone 12.4 button hierarchy: Download Premium Report is the one
   primary action and simply uses the existing, unscoped .btn-gold — no
   override needed, it already matches Begin/Submit/View Report elsewhere.
   "← Back to Skill Audit Library" (.btn-ghost) keeps the Milestone 12.2
   gold-outline secondary treatment. Retake is new: deliberately the
   quietest element on the row — no border, no fill, smaller text, only an
   underline on hover — so it reads as a low-key option, not a third
   competing button, and is rendered at all only when the attempt policy
   still permits it (unchanged gating logic in renderResults(), app.js). */
.results-actions .btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid rgba(201, 162, 75, 0.22);
  transition: var(--transition), box-shadow 0.3s ease;
}
.results-actions .btn-ghost:hover {
  background: rgba(201, 162, 75, 0.05);
  border-color: rgba(201, 162, 75, 0.35);
  color: var(--text-primary);
  box-shadow: 0 6px 18px rgba(201, 162, 75, 0.10);
}
.results-actions .btn-quiet {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.55rem 0.6rem;
  text-decoration: none;
  transition: color var(--transition);
}
.results-actions .btn-quiet:hover {
  color: #8B6A12;
  text-decoration: underline;
}

/* Milestone 12.4: the Continue Learning section (Milestone 12 Phase 6,
   §5.8) and its .cl-divider/.continue-learning/.cl-grid rules are retired
   along with the HTML/JS that used them — see RELEASE_NOTES for why. */

/* ─── Loading / Empty States ──────────────────────────────────────────────── */
/* Milestone 12.2: this spinner appears on the Skill Audit Library and
   Results while data loads — track/arc recoloured from grey+indigo to the
   same gold used everywhere else, rather than being the one leftover
   generic-accent element on an otherwise fully gold-themed screen. */
.loading-ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(201, 162, 75, 0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 3rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state p { font-size: 0.9rem; margin-top: 0.5rem; }

/* Milestone 11 production-architecture fix: used only for a genuine load
   failure (missing Supabase configuration, or any other real error) — never
   for "nothing published yet", which is .empty-state alone and is a normal,
   non-alarming state. Deliberately styled to look different at a glance so
   a learner (or an admin checking a deployment) can immediately tell "this
   is broken" apart from "this is just empty". Same dark red as .auth-error/
   #results-save-error for one consistent "error" colour across the app. */
.empty-state.error {
  color: #B91C1C;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius-lg);
  max-width: 480px;
  margin: 2rem auto 0;
}
.empty-state.error p { color: #B91C1C; }

/* ─── Toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  opacity: 0;
  z-index: 999;
  white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .results-actions { flex-direction: column; }
  .results-actions .btn { justify-content: center; }
}

/* ─── Multiple Selection (checkbox-style options) ────────────────────────────
   Reuses .option as the base class for visual consistency, but suppresses
   the single-choice checkmark pseudo-element and adds an explicit checkbox
   indicator instead, since multiple options can be selected at once.
──────────────────────────────────────────────────────────────────────────── */
.option-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.option-checkbox.selected::before { content: none; } /* suppress single-choice tick */

/* Milestone 12.2 gap fix: this multi-select checkbox variant of the answer
   option was missed in the original ivory/gold pass (only the single-choice
   `.option` border was converted) — same grey border, same generic --accent
   selected-state fill. Brought in line with `.option`'s own gold language. */
.option-checkbox-box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(201, 162, 75, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  margin-top: 0.1rem;
  transition: var(--transition);
}
.option-checkbox.selected .option-checkbox-box {
  background: var(--gold);
  border-color: var(--gold);
}
.option-checkbox-text { flex: 1; }

/* ─── Reflection (free-text response) — Milestone 12 Phase 4 ─────────────────
   §5.4: "should feel different from scoring questions" and "encourage
   reflection rather than completion." The eyebrow signals it before the
   learner reads a word; the ivory-fill, border-only-on-focus textarea reads
   as an open page rather than a boxed form field. */
.reflection-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  /* Milestone 12.1 accessibility correction: same reasoning as
     .assessment-meta-show above — --gold fails AA contrast as small text
     on this canvas's white background; the darker editorial-gold value
     passes. */
  color: #8B6A12;
  margin-bottom: 1.15rem;
}

.reflection-wrap { display: flex; flex-direction: column; }

.reflection-textarea {
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.65;
  resize: vertical;
  min-height: 160px;
  outline: none;
  transition: var(--transition);
}
.reflection-textarea:focus { border-color: var(--gold); background: var(--gold-soft); }
.reflection-textarea::placeholder { color: var(--text-muted); }

/* Milestone 12 Phase 4: quieter still — body font instead of monospace
   ("data" framing), smaller, letter-spaced like the rest of this screen's
   editorial chrome rather than reading as a form-field character count. */
.reflection-word-counter {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.6rem;
  font-family: var(--font-body);
}
.reflection-word-counter.over { color: #F472B6; font-weight: 600; }

/* ─── Ranking question ───────────────────────────────────────────────────────── */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Milestone 12.2 gap fix: same "missed sibling of .option" issue as
   .option-checkbox-box above — grey border + generic --accent hover/drag
   states, now the same gold as every other answer-choice element. */
.ranking-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--bg-card);
  border: 2px solid rgba(201, 162, 75, 0.22);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  cursor: grab;
  transition: var(--transition);
  user-select: none;
}
.ranking-item:hover       { border-color: rgba(201, 162, 75, 0.5); }
.ranking-item.drag-over   { border-color: rgba(201, 162, 75, 0.5); background: var(--gold-soft); }
.ranking-item.dragging    { opacity: 0.4; cursor: grabbing; }

.ranking-handle {
  color: var(--text-muted);
  font-size: 1rem;
  cursor: grab;
  flex-shrink: 0;
}

/* Accessibility note: same correction as .results-hero-eyebrow etc. — the
   raw --gold token fails AA as small text, so the position number uses the
   darker "editorial gold" (#8B6A12, ~4.75:1) instead. */
.ranking-position {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: #8B6A12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.ranking-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ranking-arrows {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-shrink: 0;
}

.ranking-arrow {
  background: transparent;
  border: 1px solid rgba(201, 162, 75, 0.22);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
  line-height: 1;
  transition: var(--transition);
}
.ranking-arrow:hover:not(:disabled) {
  background: var(--gold-soft);
  color: #8B6A12;
  border-color: rgba(201, 162, 75, 0.5);
}
.ranking-arrow:disabled { opacity: 0.25; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   Skill Audit Library (Milestone 21 — "Premium Learner Experience")
   Reverse-engineers the frozen Learner Report v2.0 Premium Edition's design
   language (docs/PREMIUM_DESIGN_SYSTEM.md) into this interactive surface —
   see docs/MILESTONE_12_PREMIUM_LEARNER_EXPERIENCE_PLAN.md Part B for the
   full component-by-component rationale. Deliberately additive: nothing
   above this point is touched, and `.assessment-card`'s own old rules
   (further up this file) are left in place, unused but harmless, per the
   migration plan's own "retire once confirmed working, don't delete
   mid-migration" discipline.

   Category accent colours reuse the existing --skill-* custom properties
   defined in :root above (already WCAG-AA tuned against --bg-deep) — see
   app.js's skillAccentVar(), which maps a Skill Audit's Primary Skill to
   one of these. This is not a new palette invented for this component.
   ═══════════════════════════════════════════════════════════════════════ */

.sal-page {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

/* ── Hero section — storytelling stays the hero, no dashboard widgets ──── */
.sal-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
}
.sal-headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.18;
  color: var(--text-primary);
  max-width: 640px;
  margin-bottom: 1.1rem;
}
.sal-headline .sal-gold { color: var(--gold); }
.sal-rule {
  width: 56px;
  height: 3px;
  background: var(--gold);
  border: none;
  border-radius: 2px;
  margin: 0 0 1.35rem;
}
.sal-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 2.75rem;
}

/* ── Card grid ────────────────────────────────────────────────────────── */
.sal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}

.sal-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(20,18,12,0.08), 0 2px 6px rgba(20,18,12,0.05);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.sal-card:not(.sal-card--locked):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(20,18,12,0.12), 0 4px 10px rgba(20,18,12,0.06);
}
.sal-card--locked { cursor: default; box-shadow: 0 4px 14px rgba(20,18,12,0.05); }

.sal-card-hero {
  position: relative;
  height: 160px;
  display: flex;
  align-items: flex-start;
  padding: 0.9rem;
  overflow: hidden;
}
.sal-card-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Milestone 21 "Image Behaviour" requirement: Cover mode — crops
     intelligently to fill the card, never stretches/distorts. A future
     round may add focal-point/contain-mode configuration (see
     docs/MILESTONE_12_..._PLAN.md's own "future enhancement, not this
     milestone" note) — object-fit is deliberately the only image-fit rule
     here so that future addition only ever needs one new property, not a
     structural change to this element. */
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.sal-card-hero-icon {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
/* A darkening scrim so a badge/icon overlay stays legible on any hero
   image, exactly like the PDF report's own header band always guarantees
   contrast for its overlaid text — never assume a bright image is safe. */
.sal-card-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, transparent 45%);
  z-index: 1;
  pointer-events: none;
}

.sal-card-body {
  padding: 1.2rem 1.2rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sal-badge-row { display: flex; min-height: 1.4rem; margin-bottom: 0.6rem; }
.sal-badge {
  background: var(--text-primary);
  color: var(--gold-soft, var(--gold));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.sal-series { font-size: 0.74rem; font-weight: 600; margin-bottom: 0.35rem; }

.sal-card-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.28;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.sal-card-desc {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 1rem;
}

/* Milestone 12.2: recoloured from neutral grey to the same muted gold as
   every other divider in the app; .sal-card's own white fill/shadow is
   deliberately left untouched (see RELEASE_NOTES A2 addendum §A2.5) — a
   photographic browsing card in a grid is a different, working pattern
   from the single-canvas "sheet of paper" screens this milestone's ivory
   treatment targets. */
.sal-divider { height: 1px; background: rgba(201, 162, 75, 0.18); margin-bottom: 1rem; }

.sal-meta-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  min-height: 1.6rem;
}
.sal-skill-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}
.sal-meta-item { font-size: 0.74rem; color: var(--text-muted); }

.sal-cta {
  margin-top: auto;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: filter var(--transition);
}
.sal-cta:hover { filter: brightness(1.08); text-decoration: none; }

/* ── Completed state — full colour, per the brief's explicit instruction ── */
.sal-completed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--skill-ethics);
  background: rgba(110,231,183,0.12);
  border: 1px solid rgba(110,231,183,0.25);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  margin-bottom: 0.75rem;
  width: fit-content;
}

/* ── Locked state — visible, attractive, never fully greyed out ─────────── */
.sal-card--locked .sal-card-hero {
  filter: grayscale(55%) brightness(0.9);
}
.sal-card--locked .sal-card-body > *:not(.sal-locked-row) { opacity: 0.5; }
.sal-card--locked .sal-badge,
.sal-card--locked .sal-series { opacity: 0.5; }
.sal-locked-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-input);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  margin-top: auto;
}

/* ── Reassurance strip ────────────────────────────────────────────────── */
.sal-strip {
  margin-top: 2.75rem;
  background: var(--bg-input);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  justify-content: space-between;
}
.sal-strip-item { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 210px; }
.sal-strip-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}
.sal-strip-text { font-size: 0.76rem; color: var(--text-primary); line-height: 1.4; }

/* ── Locked-assessment full-page state (direct ?id= deep link guard) ────── */
/* Milestone 12.2: a rare, single-message full-page state (a direct ?id=
   link to a locked assessment) — structurally closer to a one-off
   .editorial-canvas "sheet" than to the card grid it lives next to, so it
   gets the same ivory-fill/gold-outline/soft-warm-shadow/settle-in
   treatment rather than the grid's white-card shadow language. */
.sal-locked-page {
  text-align: center;
  max-width: 480px;
  margin: 3rem auto;
  padding: 2.5rem 2rem;
  background: var(--bg-deep);
  border: 1px solid rgba(201, 162, 75, 0.2);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px rgba(139, 106, 18, 0.04);
  animation: canvasSettle var(--transition-slow) both;
  animation-delay: 0.06s;
}
.sal-locked-page-icon { font-size: 2.4rem; margin-bottom: 1rem; }
.sal-locked-page-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.sal-locked-page-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.sal-locked-page-back {
  display: inline-block;
  background: var(--gold);
  width: auto;
  padding: 0.75rem 1.4rem;
}

/* ── Skill Audit Introduction (Milestone 12 Phase 2) ─────────────────────
   Full-bleed hero + editorial copy block, reusing the Skill Audit Library's
   own sal-eyebrow/sal-headline/sal-rule/sal-subtitle/sal-meta-row classes so
   the two screens read as one continuous storytelling surface. Only the
   hero treatment and page wrapper below are new. */
.si-hero {
  position: relative;
  height: 38vh;
  min-height: 220px;
  max-height: 420px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #1A0A2E 0%, #2A1545 100%);
}
.si-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.si-hero-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  opacity: 0.85;
}
/* Same darkening-scrim principle as .sal-card-hero::after, but taller and
   stronger — this hero sits directly above dark editorial text on an ivory
   page, not a small overlaid badge, so the scrim only needs to protect the
   seam where the hero meets .si-page, not the whole image. */
.si-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
/* Milestone 12.1: horizontal width/centering is now handled by
   .editorial-canvas-content (shared with Question/Reflection) — .si-page
   itself only adds this screen's own text-align and a touch of extra
   bottom breathing room before the canvas's own padding ends, so the CTA
   button never feels flush against the canvas edge. */
.si-page {
  padding-bottom: 0.5rem;
}
/* Milestone 12.1: the outer wrapper positioning the canvas below the
   full-bleed hero — vertical spacing from the hero and from the viewport
   edges, horizontal centring is the canvas's own job (margin:0 auto). */
.si-canvas-wrap {
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 4.5rem);
}
/* Milestone 12.1: the Question/Reflection canvas has no hero image above it
   (unlike the Introduction), so it gets its own generous top/bottom
   breathing room directly. Deliberately top-flowing, not vertically
   centred — a ranking question or a long reflection prompt can run taller
   than the viewport, and centring would risk clipping its top edge. */
.qa-canvas-wrap {
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}
/* Milestone 12.1 accessibility correction: --gold-dark was never actually
   defined anywhere, so this always silently fell back to plain --gold —
   ~2.7:1 contrast on this screen's (now white-canvas) background, under
   WCAG AA. Same corrected editorial-gold value as .assessment-meta-show/
   .reflection-eyebrow above (~5:1, passes). */
.si-tagline {
  font-size: 1rem;
  font-weight: 500;
  color: #8B6A12;
  margin-top: -0.6rem;
  margin-bottom: 1.35rem;
}

@media (max-width: 640px) {
  .sal-grid { grid-template-columns: 1fr; }
}