/* ════════════════════════════════════════════════════════════════
   AI Decision Fluency Framework · presentation layer

   Written for reading, not for looking at. The audience is senior and
   busy, often on a phone, frequently over 45. Priorities in order:
   text contrast, comfortable measure, generous tap targets, and as
   little decorative chrome as possible between them and the words.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Neutrals. text and text-dim clear 12:1 and 8:1 on the page
     background; text-muted clears 5.5:1, so it is safe for the small
     labels but is never used for body prose. */
  --bg:          #ffffff;
  --surface:     #f6f8fc;
  --surface-2:   #edf1fa;
  --border:      #d8dfee;
  --border-firm: #b9c4dc;
  --text:        #14171d;
  --text-dim:    #333a47;
  --text-muted:  #555f70;

  --accent:       #1a46c8;
  --accent-hover: #14369e;
  --accent-tint:  rgba(26, 70, 200, 0.08);
  --accent-ink:   #ffffff;

  --green:      #12693a;
  --green-tint: rgba(18, 105, 58, 0.10);
  --amber:      #8a4d08;
  --amber-tint: rgba(138, 77, 8, 0.11);
  --red:        #a01820;
  --red-tint:   rgba(160, 24, 32, 0.09);

  --serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Roughly 66 characters, which is where long prose stops being tiring. */
  --measure: 34rem;

  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #12151b;
    --surface:     #191d26;
    --surface-2:   #212734;
    --border:      #2d3542;
    --border-firm: #414b5c;
    --text:        #eceef4;
    --text-dim:    #c5cbd8;
    --text-muted:  #98a1b2;

    --accent:       #8fabff;
    --accent-hover: #a9beff;
    --accent-tint:  rgba(143, 171, 255, 0.14);
    --accent-ink:   #0d1017;

    --green:      #57cd89;
    --green-tint: rgba(87, 205, 137, 0.14);
    --amber:      #e2a455;
    --amber-tint: rgba(226, 164, 85, 0.14);
    --red:        #ff9296;
    --red-tint:   rgba(255, 146, 150, 0.13);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

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

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

body {
  font-family: var(--sans);
  font-size: 1.0625rem;          /* 17px base. 16px is too small for this. */
  font-weight: 400;
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

/* Constrain prose, not layout. Cards may be wide; sentences may not. */
.narrative-text,
.feedback-text,
.principle-ref,
.intro-body p,
.intro-lead,
.intro-aside,
.how-item p,
.results-commentary p,
.legend-note,
.panel-note,
.menu-note,
.consequence-text,
.next-up p { max-width: var(--measure); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── HEADER ───────────────────────────────────────────────────── */

.site-header {
  text-align: center;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}

.site-header .brand {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.site-header h1 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.site-header .subtitle {
  font-size: 1.0625rem;
  color: var(--text-dim);
  max-width: 32rem;
  margin: 0 auto;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Once past the introduction the masthead is chrome. On a phone it was
   pushing the actual question below the fold on every single step. */
body.in-app .site-header { padding: 1.1rem 0 0.9rem; margin-bottom: 1.5rem; }
body.in-app .site-header .brand { margin-bottom: 0; }
body.in-app .site-header h1,
body.in-app .site-header .subtitle { display: none; }

/* ── INTRO ────────────────────────────────────────────────────── */

.intro-view { display: none; }
.intro-view.active { display: block; }
.intro-step { display: none; }
.intro-step.active { display: block; }

.intro-hook {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.4;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding: 0.3rem 0 0.3rem 1.4rem;
  margin-bottom: 1.75rem;
  max-width: 32rem;
  text-wrap: pretty;
}

.intro-body p { margin-bottom: 1.1rem; color: var(--text-dim); }
.intro-body p:last-child { margin-bottom: 0; }

.view-h {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0.85rem;
  text-wrap: balance;
}

.intro-lead { color: var(--text-dim); margin-bottom: 1.75rem; }

.intro-aside {
  color: var(--text-muted);
  font-size: 1rem;
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--border);
}

.intro-skip { text-align: center; margin-top: 2rem; }

.d-grid { display: grid; gap: 0.75rem; }

.d-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.15rem 1.35rem;
}

.d-card .d-name {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}

.d-card .d-question {
  font-size: 1.09rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 0.4rem;
  text-wrap: pretty;
}

.d-card .d-org { color: var(--text-dim); line-height: 1.6; }

.how-list { counter-reset: how; }

.how-item {
  counter-increment: how;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.6rem;
}

.how-item:last-child { margin-bottom: 0; }

.how-item::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--border-firm);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-item h3 { font-size: 1.09rem; font-weight: 600; margin-bottom: 0.3rem; }
.how-item p { color: var(--text-dim); }

.cta-row { margin-top: 2.5rem; text-align: center; }
.cta-time { display: block; margin-top: 0.85rem; font-size: 0.92rem; color: var(--text-muted); }

/* ── BUTTONS ──────────────────────────────────────────────────── */

.cta-btn, .next-btn, .restart-btn, .next-up button {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 3rem;
  padding: 0.8rem 1.9rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cta-btn, .next-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}

.restart-btn, .next-up button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-firm);
}

.next-btn { display: none; margin-top: 1.5rem; }
.next-btn.visible { display: inline-block; }
.restart-btn { margin-top: 1.5rem; }

.reset-link, .footer-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  min-height: 2.75rem;          /* 44px tap target */
  padding: 0.7rem 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reset-link { margin-top: 0.5rem; }

@media (hover: hover) and (pointer: fine) {
  .cta-btn:hover, .next-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .restart-btn:hover, .next-up button:hover { border-color: var(--accent); background: var(--accent-tint); }
  .reset-link:hover, .footer-link:hover { color: var(--accent); }
}

/* ── MENU ─────────────────────────────────────────────────────── */

#scenarioSelector { display: none; }
#scenarioSelector.active { display: block; }

.menu-note { color: var(--text-dim); margin-bottom: 2rem; }

.track-heading {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 2.25rem 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.scenario-grid { display: grid; gap: 0.9rem; margin-bottom: 1.5rem; }

.scenario-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.5rem 1.6rem;
  cursor: pointer;
  position: relative;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .scenario-card:hover { background: var(--surface-2); box-shadow: var(--shadow); }
}

.scenario-card.done { border-left-color: var(--green); }

.scenario-card.done::after {
  content: '✓ Completed';
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--green);
}

.scenario-card .card-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  padding-right: 6.5rem;         /* clears the completed flag */
}

.scenario-card h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0.55rem;
  color: var(--text);
  text-wrap: balance;
}

.scenario-card p { color: var(--text-dim); line-height: 1.6; }

.scenario-card .tags { margin-top: 0.9rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }

.tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  background: var(--accent-tint);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--accent);
}

.card-facets {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.card-facets strong { color: var(--text-dim); font-weight: 600; }

/* ── PLAY ─────────────────────────────────────────────────────── */

.scenario-play { display: none; }
.scenario-play.active { display: block; }

/* Sticky so there is always an answer to "how far in am I?" */
.progress-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.step-counter {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.consequence-box {
  border-left: 4px solid var(--amber);
  background: var(--amber-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.consequence-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0.4rem;
}

.consequence-text { color: var(--text-dim); line-height: 1.65; }

.narrative-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.75rem;
}

.narrative-box .context-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.narrative-box .narrative-text {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
}

.narrative-box .narrative-text strong { font-weight: 600; color: var(--text); }

/* Was mono uppercase at 11px. It is a signal, so it should be legible. */
.tests-label {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 0.9rem;
}

.tests-label strong { color: var(--accent); font-weight: 700; }

.question-text {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 1.55rem);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.options-list { display: grid; gap: 0.7rem; }

.option-btn {
  background: var(--bg);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.option-btn .option-key {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

@media (hover: hover) and (pointer: fine) {
  .option-btn:hover { background: var(--surface); border-color: var(--accent); }
}

.option-btn.revealed-good { border-color: var(--green); background: var(--green-tint); }
.option-btn.revealed-ok   { border-color: var(--amber); background: var(--amber-tint); }
.option-btn.revealed-poor { border-color: var(--red);   background: var(--red-tint); }

.option-btn.selected { border-width: 2px; padding: calc(1.15rem - 1px) calc(1.35rem - 1px); }

.option-btn .score-badge {
  display: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

.option-btn.revealed-good .score-badge,
.option-btn.revealed-ok .score-badge,
.option-btn.revealed-poor .score-badge { display: inline-block; }

.option-btn.revealed-good .score-badge { background: var(--green-tint); color: var(--green); }
.option-btn.revealed-ok .score-badge   { background: var(--amber-tint); color: var(--amber); }
.option-btn.revealed-poor .score-badge { background: var(--red-tint);   color: var(--red); }

/* ── FEEDBACK ─────────────────────────────────────────────────── */

.feedback-box {
  display: none;
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  scroll-margin-top: 1.5rem;
}

.feedback-box.visible { display: block; animation: fadeSlideUp 0.35s ease; }

.feedback-box .feedback-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 0.7rem;
}

.feedback-box .feedback-title.good { color: var(--green); }
.feedback-box .feedback-title.ok   { color: var(--amber); }
.feedback-box .feedback-title.poor { color: var(--red); }

/* The most important prose in the tool. It used to be the smallest. */
.feedback-box .feedback-text {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dim);
}

.feedback-box .principle-ref {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.feedback-box .principle-ref em { color: var(--accent); font-style: normal; font-weight: 600; }

/* ── RESULTS ──────────────────────────────────────────────────── */

.results-view { display: none; }
.results-view.active { display: block; }

.results-header { text-align: center; margin-bottom: 1.5rem; }

.results-header h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.6vw, 2.1rem);
  font-weight: 400;
}

.score-ring { width: 10rem; height: 10rem; margin: 1.75rem auto; position: relative; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }

.score-ring .ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s ease;
}

.score-ring .score-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-ring .score-number { font-family: var(--serif); font-size: 2.6rem; line-height: 1; }
.score-ring .score-total { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; }

.dimension-scores { display: grid; gap: 0.6rem; margin: 1.75rem 0; }

.dim-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dim-row .dim-name { font-size: 1rem; font-weight: 600; width: 9.5rem; flex-shrink: 0; }
.dim-row .dim-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.dim-row .dim-bar-fill { height: 100%; border-radius: 4px; transition: width 0.9s ease; }

.dim-row .dim-score {
  font-family: var(--mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-dim);
  width: 3rem;
  text-align: right;
  flex-shrink: 0;
}

.results-commentary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin: 1.75rem 0;
}

.results-commentary h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0.9rem;
  text-wrap: balance;
}

.results-commentary p { color: var(--text-dim); line-height: 1.75; margin-bottom: 0.9rem; }
.results-commentary p:last-child { margin-bottom: 0; }

/* The one question on the results screen. Quiet by design: it sits
   between the commentary and the suggestion, and answering it has to
   feel optional, because it is. */
.run-feedback {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  margin: 1.75rem 0;
}

.run-feedback h4 {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.run-feedback p { color: var(--text-dim); margin-bottom: 1rem; max-width: var(--measure); }

.run-feedback-choices {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.run-feedback-choices button {
  flex: 0 1 auto;
  min-height: 2.75rem;
  padding: 0.6rem 1.4rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .run-feedback-choices button:hover { border-color: var(--accent); background: var(--accent-tint); }
}

.run-feedback-comment {
  display: block;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.run-feedback textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.7rem 0.9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  resize: vertical;
}

.dim-legend, .profile-panel, .next-up {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  background: var(--surface);
}

.dim-legend { margin: 1.75rem 0; }
.profile-panel { margin-bottom: 2rem; }
.next-up { margin: 1.75rem 0; }

.dim-legend h4, .profile-panel h4, .next-up h4 {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.dim-legend dt { font-weight: 700; font-size: 1.02rem; color: var(--text); margin-top: 0.9rem; }
.dim-legend dt:first-of-type { margin-top: 0; }
.dim-legend dd { color: var(--text-dim); line-height: 1.6; }

.legend-note, .panel-note { color: var(--text-muted); line-height: 1.65; margin-bottom: 1rem; }
.panel-note { margin-top: 1rem; margin-bottom: 0; }
.legend-note strong, .panel-note strong { color: var(--text-dim); font-weight: 600; }

.profile-panel .dim-row { background: transparent; border: none; padding: 0.35rem 0; }
.next-up p { color: var(--text-dim); margin-bottom: 1rem; }

/* ── FOOTER ───────────────────────────────────────────────────── */

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.site-footer p { margin-bottom: 0.35rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.site-footer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── PREVIEW LANDING ──────────────────────────────────────────── */

.preview-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-tint);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.75rem;
}

/* The gate is one short screen, centred on a single column. Everything is
   narrower than the tool's measure because centred text reads better in a
   tighter column, and the whole page is only a few lines long. */
.gate { text-align: center; }

.gate .site-header { padding: 2rem 0 1.5rem; margin-bottom: 1.75rem; }
.gate .site-footer { margin-top: 2.5rem; }

.gate .intro-body p {
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

.gate .access-panel {
  max-width: 30rem;
  margin: 2rem auto 0;
}

.gate .access-label,
.gate .access-error,
.gate .access-request { text-align: center; }

/* Inputs inherit text-align, so this would happen anyway. Stated explicitly
   so it reads as a decision: the typed passphrase sits centred in the field
   to match the panel around it. */
.gate .access-input { text-align: center; }

.access-panel {
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-top: 3rem;
}

.access-label {
  display: block;
  font-size: 1.09rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.access-row { display: flex; gap: 0.7rem; align-items: stretch; }

.access-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  padding: 0.75rem 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
}

.access-input::placeholder { color: var(--text-muted); }
.access-row .cta-btn { flex: 0 0 auto; }

.access-error {
  margin-top: 0.85rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--red);
}

.access-request {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.access-request a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 40rem) {
  .access-panel { padding: 1.25rem; }
  .access-row { flex-wrap: wrap; }
  .access-input { flex: 1 1 100%; }
  .access-row .cta-btn { flex: 1 1 100%; width: 100%; }
}

/* ── DEV ──────────────────────────────────────────────────────── */

.validation-banner {
  border: 1px solid var(--red);
  background: var(--red-tint);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--red);
}

.validation-banner strong { display: block; margin-bottom: 0.5rem; }

/* ── MOTION ───────────────────────────────────────────────────── */

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

.fade-in { animation: fadeSlideUp 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── SMALL SCREENS ────────────────────────────────────────────── */

@media (max-width: 40rem) {
  .container { padding: 1rem 1.1rem 2.5rem; }

  .site-header { padding: 1.75rem 0 1.5rem; margin-bottom: 2rem; }

  .narrative-box { padding: 1.25rem; border-radius: var(--radius); }
  .narrative-box .narrative-text { font-size: 1.0625rem; }

  .scenario-card { padding: 1.25rem 1.3rem; }
  .scenario-card .card-meta { padding-right: 0; }
  .scenario-card.done::after { position: static; display: block; margin-bottom: 0.5rem; }

  .feedback-box, .results-commentary, .dim-legend, .profile-panel, .next-up { padding: 1.25rem; }

  .option-btn { padding: 1rem 1.1rem; gap: 0.75rem; flex-wrap: wrap; }
  .option-btn.selected { padding: calc(1rem - 1px) calc(1.1rem - 1px); }
  .option-btn .score-badge { margin-left: 0; margin-top: 0.6rem; width: 100%; text-align: center; }

  /* A fixed name column squeezed the bar to nothing on a phone. */
  .dim-row { flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0.85rem 1rem; }
  .dim-row .dim-name { width: auto; flex: 1 1 auto; }
  .dim-row .dim-score { width: auto; }
  .dim-row .dim-bar { flex: 1 1 100%; order: 3; }

  .run-feedback { padding: 1.25rem; }
  .run-feedback-choices button { flex: 1 1 100%; }

  .score-ring { width: 8.5rem; height: 8.5rem; }
  .score-ring .score-number { font-size: 2.2rem; }

  .cta-btn, .next-btn, .restart-btn { width: 100%; }
  .cta-row { margin-top: 2rem; }

  .how-item { padding-left: 2.6rem; }
  .d-card { padding: 1rem 1.15rem; }
}


/* ════════════════════════════════════════════════════════════════
   ACCOUNTS
   Registration, sign in, the profile form and the account page.
   Built on the same tokens as everything else; nothing new is
   introduced here except the form controls, which did not exist
   while the only input was a passphrase.
   ════════════════════════════════════════════════════════════════ */

.form-page { max-width: 32rem; }
.form-page .site-header { padding: 2rem 0 1.25rem; margin-bottom: 1.5rem; }

/* The way out, inserted after the header on every page that is not a
   home. Sits above the content rather than in the footer so that it is
   reachable without reading to the end of a long page, which is exactly
   the case that was broken on the privacy notice. */
.chrome-back {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.95rem;
}

.chrome-back a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;          /* 44px tap target */
  padding-right: 0.5rem;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .chrome-back a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
}

.form-lead {
  color: var(--text-dim);
  margin-bottom: 1.75rem;
  max-width: var(--measure);
}

.form-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}

.form-panel + .form-panel { margin-top: 1.25rem; }

.form-panel h2 {
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}

.field { margin-bottom: 1.15rem; }
.field:last-of-type { margin-bottom: 0; }

.field > label,
.field-group > legend {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.field-help {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.55;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  -webkit-appearance: none;
  appearance: none;
}

.field select {
  /* The chevron is inline SVG in a data URI so the page stays
     self-contained and works offline. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555f70' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
}

@media (prefers-color-scheme: dark) {
  .field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2398a1b2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  }
}

.field textarea { min-height: 6rem; resize: vertical; line-height: 1.6; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.field [aria-invalid="true"] { border-color: var(--red); }

.field-error {
  display: block;
  font-size: 0.88rem;
  color: var(--red);
  margin-top: 0.4rem;
}

/* Checkbox and radio groups. */
.field-group { border: 0; padding: 0; margin: 0 0 1.15rem; }

.checks { display: grid; gap: 0.5rem; margin-top: 0.5rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.5;
  font-size: 0.97rem;
  color: var(--text-dim);
}

.check input { margin-top: 0.15rem; flex: 0 0 auto; accent-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); color: var(--text); }

@media (hover: hover) {
  .check:hover { border-color: var(--border-firm); }
}

/* The consent line at the bottom of registration. Deliberately not
   styled as a card: it is a statement being agreed to, not an option
   being picked. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-top: 1.25rem;
}

.consent input { margin-top: 0.2rem; accent-color: var(--accent); }

/* The honeypot. Off-screen rather than display:none, because some bots
   skip hidden fields and the point is that they fill this one in. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { margin-top: 1.5rem; }
.form-actions .cta-btn { width: 100%; }

.form-links {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.9;
}

.form-links a, .form-links button {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Messages: form-level errors, confirmations, and the standing
   prompts about verification or anonymous play. */
.notice {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
}

.notice-error   { border-color: var(--red);   background: var(--red-tint);   color: var(--text); }
.notice-success { border-color: var(--green); background: var(--green-tint); color: var(--text); }
.notice-info    { border-color: var(--accent); background: var(--accent-tint); color: var(--text); }

.notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.notice button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}

/* A quieter version for the banner strip above the menu. */
.app-notice {
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
}

.app-notice p { margin: 0; flex: 1 1 18rem; }

/* Signed-in identity strip, top right of the app pages. */
.account-strip {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.9rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: -0.5rem;
  flex-wrap: wrap;
}

.account-strip a, .account-strip button {
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .account-strip a:hover, .account-strip button:hover { color: var(--accent); }
}

/* Account page rows. */
.account-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.96rem;
}

.account-row:last-child { border-bottom: 0; }
.account-row dt { color: var(--text-muted); }
.account-row dd { color: var(--text); text-align: right; margin: 0; }

.danger-zone { border-color: var(--red); }
.danger-zone h2 { color: var(--red); }

.danger-btn {
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--red);
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
  cursor: pointer;
}

@media (hover: hover) {
  .danger-btn:hover { background: var(--red-tint); }
}

/* The profile form is the longest thing here, so it gets a progress
   line rather than leaving people guessing how much is left. */
.form-progress {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

@media (max-width: 600px) {
  .form-panel { padding: 1.25rem; }
  .account-row { flex-direction: column; gap: 0.15rem; }
  .account-row dd { text-align: left; }
}


/* ════════════════════════════════════════════════════════════════
   OBJECTIVES
   The three objectives: the page where they are agreed, and the
   panel that carries them into the menu and the results screen.
   ════════════════════════════════════════════════════════════════ */

.objective {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  margin-bottom: 1rem;
  background: var(--bg);
}

.objective:last-of-type { margin-bottom: 0; }
.objective.busy { opacity: 0.55; }

.objective-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.objective-competency {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.objective-flag {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.objective-question {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  line-height: 1.5;
}

.objective textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  resize: vertical;
}

.objective textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* The one-line "why this one, for you". Set apart from the objective
   itself, because it is the model talking about the objective rather
   than part of it. */
.objective-rationale {
  margin-top: 0.6rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--border-firm);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.objective-actions {
  margin-top: 0.85rem;
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.objective-actions button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.objective-actions button:disabled {
  color: var(--text-muted);
  cursor: default;
  text-decoration: none;
}

/* Waiting for the model. A few seconds is long enough that a blank
   panel reads as broken. */
.generating { text-align: center; }
.generating h2 { margin-bottom: 0.4rem; }
.generating .field-help { max-width: 26rem; margin: 0 auto; }

.spinner {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 auto 1rem;
  border: 2px solid var(--border-firm);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: adf-spin 0.8s linear infinite;
}

@keyframes adf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* ── The panel on the menu and the results screen ── */

.objectives-panel { margin-bottom: 2rem; }

.objectives-panel ol {
  list-style: none;
  counter-reset: obj;
  margin: 0;
  padding: 0;
}

.objectives-panel li {
  counter-increment: obj;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.9rem;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: var(--measure);
}

.objectives-panel li:last-child { margin-bottom: 0; }

.objectives-panel li::before {
  content: counter(obj);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* `.obj-competency` lived here: a mono uppercase tag for a one-word
   competency name. Phase 2 replaced competencies with focus areas, whose
   labels are full phrases, and the tag styling turned three sentences
   into uppercase monospace. Removed rather than resized, because the
   item no longer has a tag and a body, only prose. */

/* On the results screen an objective is marked against how the run
   went for its competency. */
.objectives-panel li.met::before    { background: var(--green-tint); color: var(--green); }
.objectives-panel li.missed::before { background: var(--red-tint);   color: var(--red); }

.objectives-panel .obj-verdict {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .objective { padding: 1rem; }
  .objective-actions { gap: 0.9rem; }
}

/* The focus-area picker sits above the wording it belongs to. */
.objective-focus {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius);
  padding: 0.6rem 2.4rem 0.6rem 0.85rem;
  margin-bottom: 0.6rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555f70' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

@media (prefers-color-scheme: dark) {
  .objective-focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2398a1b2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  }
}

.objective-focus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.objective-focus:disabled { opacity: 0.6; }

/* A checkbox that is unavailable because the pick limit is reached.
   Dimmed rather than hidden: the option still needs to be readable, it
   just cannot be chosen until something else is unticked. */
.check-muted { opacity: 0.45; cursor: default; }
.check-muted:hover { border-color: var(--border); }

/* ════════════════════════════════════════════════════════════════
   THE CHOSEN BLOCK
   Three scenarios lifted out of the library, with the reader's own
   answers quoted back as the reason. The rest stays below, quieter.
   ════════════════════════════════════════════════════════════════ */

.chosen-block { margin-bottom: 2.75rem; }

.chosen-intro {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--text);
  max-width: var(--measure);
  margin-bottom: 0.9rem;
}

.chosen-intro strong { color: var(--accent); font-weight: 600; }

.chosen-note {
  border-left: 2px solid var(--border-firm);
  padding-left: 1rem;
  margin-bottom: 1.6rem;
  max-width: var(--measure);
}

.chosen-note p {
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 0.7rem;
}

.chosen-note p:last-child { margin-bottom: 0; }

/* Why this card is in the chosen three. Sits above the sector line so
   the reason reads before the metadata. */
.card-why {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--accent);
}

/* The library below is deliberately lower contrast: available, not
   competing with the three above it. */
.rest-block { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.rest-block .track-heading { color: var(--text-muted); }
.rest-block .menu-note { margin-bottom: 1.25rem; font-size: 0.94rem; }
.rest-block .scenario-card h3 { font-size: 1.06rem; }

/* The transferable decision, under the card description. Quieter than
   the description and set apart, because it is the author speaking
   about the scenario rather than part of it. */
.card-transfer {
  margin-top: 0.7rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--border-firm);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* The rest of the library, folded away. A reader whose sector is not
   represented in the chosen three should not have to scroll past seven
   settings that are not theirs to find out. */
.rest-block > .rest-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.5rem 0;
}

.rest-block > .rest-summary::-webkit-details-marker { display: none; }

.rest-block > .rest-summary::before {
  content: '+';
  display: inline-block;
  width: 1.1rem;
  font-size: 0.95rem;
  color: var(--accent);
}

.rest-block[open] > .rest-summary::before { content: '\2212'; }
.rest-block > .rest-summary span { color: var(--border-firm); letter-spacing: 0; }

@media (hover: hover) {
  .rest-block > .rest-summary:hover { color: var(--accent); }
}

.rest-block > .rest-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ════════════════════════════════════════════════════════════════
   THE FRONT DOOR
   index.html, login.html and register.html. One claim, one field, and
   as little else as the page can get away with. Everything that used to
   sit here has moved to where it is actually needed.
   ════════════════════════════════════════════════════════════════ */

.landing-body { background: var(--bg); }

.landing {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing.narrow { max-width: 34rem; }

/* ── Top bar ── */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 3rem;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
}

/* Sized by height: the mark is 0.71 as wide as it is tall. */
.brand-mark {
  display: block;
  height: 1.9rem;
  color: var(--accent);
  flex: 0 0 auto;
}

.brand-mark svg { height: 100%; width: auto; display: block; }

.brand-word {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.top-nav { display: flex; align-items: center; gap: 1.25rem; }

.top-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
}

@media (hover: hover) {
  .top-nav a:hover { color: var(--accent); }
}

/* ── Hero ── */

.hero {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 4rem;
}

.hero .notice { max-width: 34rem; }

/* Big, and allowed to be big. clamp() keeps it from wrapping badly on a
   phone without needing a breakpoint for every size in between. */
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7.5vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 16ch;
  margin-bottom: 1.4rem;
}

.hero-sub {
  font-size: 1.13rem;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 38rem;
  margin-bottom: 2.4rem;
}

/* One field and one button, joined into a single object on a desktop
   and stacked on a phone. */
.hero-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 30rem;
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: calc(var(--radius-lg) + 2px);
  padding: 0.4rem;
  position: relative;
}

.hero-form input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: 0;
  padding: 0.8rem 0.5rem 0.8rem 0.9rem;
}

.hero-form input:focus { outline: none; }
.hero-form input::placeholder { color: var(--text-muted); }

.hero-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.hero-form .cta-btn { flex: 0 0 auto; margin: 0; }

.hero-form .field-error {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0.4rem;
  text-align: left;
}

.hero-alt { margin-top: 2.5rem; font-size: 0.96rem; }

.hero-alt a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (hover: hover) {
  .hero-alt a:hover { color: var(--accent); }
}

.hero-closed { color: var(--text-dim); padding: 0.9rem; }
.hero-closed a { color: var(--accent); }

/* ── Sign in and register ── */

.auth-panel { flex: 1 0 auto; padding-bottom: 3rem; }

.auth-heading {
  font-family: var(--serif);
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}

.auth-sub {
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: 1.9rem;
  max-width: var(--measure);
}

.auth-panel .form-actions .cta-btn { width: 100%; }

/* ── Footer ── */
/* The attribution stays in full — it is an obligation rather than
   decoration — but it sits quietly at the bottom, out of the way of the
   one thing the page is asking somebody to do. */

.landing-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.landing-footer p { margin-bottom: 0.45rem; max-width: 46rem; }
.landing-footer p:last-child { margin-bottom: 0; }
.landing-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

@media (hover: hover) {
  .landing-footer a:hover { color: var(--accent); }
}

@media (max-width: 640px) {
  .landing { padding: 1.1rem 1.1rem 2rem; }
  .top-bar { padding-bottom: 2rem; }

  /* Four nav links plus the wordmark do not fit a phone on one line, so
     tighten first and stack below. Nothing is hidden behind a menu
     button: there are only four destinations and they all earn a tap
     target. */
  .top-nav { gap: 1rem; }
  .top-nav a { font-size: 0.9rem; }
  .hero { padding-bottom: 2.5rem; }
  .hero-headline { max-width: 100%; }

  .hero-form { flex-direction: column; gap: 0.4rem; padding: 0.5rem; }
  .hero-form input { padding: 0.75rem 0.6rem; text-align: center; }
  .hero-form .cta-btn { width: 100%; }
  .hero-form .field-error { position: static; text-align: center; margin-top: 0.4rem; }
}

/* Narrow phones: the header becomes two rows — brand, then the nav spread
   across the full width. Wrapping alone will not do it, because a wrapped
   flex item keeps its content width and bunches to the left. */
@media (max-width: 30rem) {
  .top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding-bottom: 1.75rem;
  }

  .brand-lockup { align-self: flex-start; }

  .top-nav {
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
  }

  .top-nav a { font-size: 0.95rem; padding: 0.15rem 0; }
}

/* Centred, at Alan's request. The paragraphs keep a max-width so the
   attribution does not run the full width of a desktop, and auto margins
   keep that block centred rather than sitting left inside a centred box. */
.landing-footer { text-align: center; }
.landing-footer p { margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════════════════════════════
   THE ABOUT PAGE
   A reading column. Reuses the .d-card grid from the introduction
   screens so the four competencies look the same wherever they appear.
   ════════════════════════════════════════════════════════════════ */

.prose {
  flex: 1 0 auto;
  max-width: 40rem;
  margin: 0 auto;
  padding-bottom: 3.5rem;
}

.prose h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}

.prose h2 {
  font-family: var(--sans);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 2.6rem 0 0.85rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}

.prose p {
  color: var(--text-dim);
  line-height: 1.75;
  margin-bottom: 1.15rem;
}

.prose-lead {
  font-size: 1.16rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.prose em { font-style: italic; }

/* The competency cards want air above and below when they sit inside
   running text rather than on their own screen. */
.prose .d-grid { margin: 1.5rem 0 1.75rem; }

.prose-cta {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.prose-alt {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: 0.96rem;
}

@media (hover: hover) {
  .prose-alt:hover { color: var(--accent); }
}

/* The page you are already on, in the top bar. */
.top-nav a.here { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .prose-cta { flex-direction: column; align-items: stretch; gap: 1rem; }
  .prose-cta .cta-btn { width: 100%; text-align: center; }
  .prose-alt { text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   THE FIELD GUIDE
   Core rules per competency, with the full set folded underneath.
   ════════════════════════════════════════════════════════════════ */

.prose-note {
  border-left: 2px solid var(--border-firm);
  padding-left: 1rem;
  font-size: 0.94rem;
  color: var(--text-muted);
}

.guide-section { margin-top: 2.6rem; }

.guide-section h2 {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  padding-top: 1.75rem;
}

.guide-question {
  font-size: 1.06rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.guide-definition {
  font-size: 0.94rem;
  color: var(--text-muted);
  margin-bottom: 1.2rem;
}

.guide-lead {
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1.6rem;
}

/* The six. Numbered, because people refer back to them by position. */
.rules { list-style: none; counter-reset: rule; margin: 0 0 1.5rem; padding: 0; }

.rules li {
  counter-increment: rule;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.5rem;
}

.rules li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rule-text {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 0.3rem;
}

.rule-note {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* The full set, folded away. Denser than the six, because this is for
   looking something up rather than reading. */
.rule-reference { border-top: 1px solid var(--border); padding-top: 0.4rem; }

.rule-list { list-style: none; margin: 0.4rem 0 1rem; padding: 0; }

.rule-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.rule-list li:last-child { border-bottom: 0; }
.rule-list .rule-text { display: block; font-size: 1rem; }
.rule-list .rule-note { display: block; margin-top: 0.2rem; }

.rule-list .rule-from {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--border-firm);
}

.transfer { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.transfer li { color: var(--text-dim); line-height: 1.7; margin-bottom: 0.9rem; }
.transfer strong { color: var(--text); }