/*
 * Design System — Eleven Spectrums
 * Visual identity: "The Naturalist Field Guide"
 * Philosophy: Scientific precision with human warmth. A well-designed
 * reference work that knows you're here to reflect on yourself, not to
 * be scored by a machine.
 *
 * Typography:  DM Sans (geometric sans) · Nunito (humanist sans) · DM Mono (scores)
 * Palette:     Cool slate base · dark navy nav · terracotta accent
 * Density:     Moderate — information-present but not cramped
 * Surface:     Elevated cards — white paper lifting off the slate background
 * Composition: Structured two-column (assessment), single-column editorial (results)
 *
 * This is the canonical, authoritative design token file.
 * All component CSS references variables defined here.
 * Do not define token values in any other file.
 */

/* ------------------------------------------------------------------ */
/* Fonts                                                                */
/* ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Mono:ital,wght@0,400;0,500&display=swap');

/* ------------------------------------------------------------------ */
/* Design Tokens                                                         */
/* ------------------------------------------------------------------ */
:root {
  /* --- Color: Base Surfaces (cool slate register) --- */
  --color-bg-base:           #ECEEF2;  /* cool blue-slate — site background */
  --color-bg-surface:        #FFFFFF;  /* card surface — clean white */
  --color-bg-surface-hover:  #F5F6F9;  /* hover state on white cards */
  --color-bg-elevated:       #FFFFFF;  /* modals — same as surface */
  --color-bg-inset:          #F0F2F5;  /* inset/code/textarea background */
  --color-bg-section:        #E4E8EF;  /* section band background */

  /* --- Color: Borders --- */
  --color-border-default:    #D0D5DF;  /* cool gray border */
  --color-border-strong:     #B0B8C8;  /* stronger visible divider */
  --color-border-focus:      #C05028;  /* focus ring — terracotta */

  /* --- Color: Text --- */
  --color-text-primary:      #1A2638;  /* deep blue-gray — main body text */
  --color-text-secondary:    #2A3C52;  /* medium cool — supporting copy (WCAG AA on white) */
  --color-text-muted:        #4A5A6E;  /* lighter cool — placeholders, group labels (WCAG AA on white) */
  --color-text-on-accent:    #FFFFFF;
  --color-text-on-dark:      #ECEEF2;

  /* --- Color: Accent (terracotta — warm counterpoint to cool base) --- */
  --color-accent:            #C05028;  /* terracotta rust */
  --color-accent-hover:      #A83F1E;
  --color-accent-subtle:     #F5EAE6;  /* very light terracotta tint — selected states */
  --color-accent-text:       #7A2810;  /* deep terracotta for body-copy use (≥3:1 on accent-subtle) */

  /* --- Color: Semantic --- */
  --color-danger:            #D42B1E;
  --color-danger-hover:      #B22218;
  --color-danger-bg:         #FDECEA;
  --color-success:           #2A7A54;
  --color-success-bg:        #E8F5EE;

  /* --- Color: UI States --- */
  --color-disabled-bg:       #E8EAF0;
  --color-disabled-text:     #9AA4B2;

  /* --- Color: Spectrum Slider --- */
  --color-slider-track:      #D0D5DF;
  --color-slider-fill:       #C05028;  /* terracotta fill from left end */
  --color-slider-thumb:      #C05028;
  --color-slider-thumb-hover:#A83F1E;

  /* --- Color: Navigation --- */
  --color-nav-bg:            #1A2638;  /* dark navy — structural, like a book spine */
  --color-nav-border:        #253548;
  --color-nav-text:          #B8C4D4;
  --color-nav-text-hover:    #FFFFFF;
  --color-nav-active:        #C05028;  /* terracotta active state */

  /* --- Color: Progress Map --- */
  --color-progress-completed: #2A7A54;
  --color-progress-current:   #1A2638;
  --color-progress-upcoming:  #9AA4B2;
  --color-progress-group:     #6A7A8E;

  /* ---------------------------------------------------------------- */
  /* Typography                                                         */
  /* ---------------------------------------------------------------- */
  --font-display:     'DM Sans', 'Helvetica Neue', sans-serif;   /* headings, UI labels, navigation */
  --font-body:        'Nunito', 'Segoe UI', sans-serif;          /* body text, reflective prompts */
  --font-mono:        'DM Mono', 'Courier New', monospace;       /* score numerals, data values */

  /* Type scale — derived from --font-size-base via --font-scale-ratio.
     Change --font-size-base to rescale the entire system proportionally.
     Ratio 1.2 = "minor third" — calm, structured, well-suited to dense UI. */
  --font-size-base:    1.0625rem;                                    /* 17px */
  --font-scale-ratio:  1.2;

  --font-size-xs:   max(0.75rem, calc(var(--font-size-base) / var(--font-scale-ratio) / var(--font-scale-ratio))); /* floored at 12px */
  --font-size-sm:   calc(var(--font-size-base) / var(--font-scale-ratio));                          /* base ÷ r   */
  --font-size-md:   var(--font-size-base);                                                          /* base       */
  --font-size-lg:   calc(var(--font-size-base) * var(--font-scale-ratio));                          /* base × r   */
  --font-size-xl:   calc(var(--font-size-base) * var(--font-scale-ratio) * var(--font-scale-ratio));/* base × r²  */
  --font-size-2xl:  calc(var(--font-size-base) * var(--font-scale-ratio) * var(--font-scale-ratio) * var(--font-scale-ratio));            /* base × r³ */
  --font-size-3xl:  calc(var(--font-size-base) * var(--font-scale-ratio) * var(--font-scale-ratio) * var(--font-scale-ratio) * var(--font-scale-ratio)); /* base × r⁴ */

  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:   1.2;
  --line-height-snug:    1.45;
  --line-height-body:    1.65;
  --line-height-heading: 1.2;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.03em;
  --letter-spacing-caps:    0.07em;

  /* ---------------------------------------------------------------- */
  /* Spacing (moderate rhythm)                                          */
  /* ---------------------------------------------------------------- */
  --spacing-1:   0.25rem;   /* 4px */
  --spacing-2:   0.5rem;    /* 8px */
  --spacing-3:   0.75rem;   /* 12px */
  --spacing-4:   1rem;      /* 16px */
  --spacing-5:   1.25rem;   /* 20px */
  --spacing-6:   1.5rem;    /* 24px */
  --spacing-8:   2rem;      /* 32px */
  --spacing-10:  2.5rem;    /* 40px */
  --spacing-12:  3rem;      /* 48px */
  --spacing-16:  4rem;      /* 64px */
  --spacing-20:  5rem;      /* 80px */
  --spacing-24:  6rem;      /* 96px */
  --spacing-32:  8rem;      /* 128px */

  /* Semantic spacing aliases — these are what component CSS references */
  --spacing-xs:      var(--spacing-2);   /* 8px — tight intra-element gaps */
  --spacing-sm:      var(--spacing-3);   /* 12px — small gaps, button padding */
  --spacing-md:      var(--spacing-5);   /* 20px — component internal padding */
  --spacing-lg:      var(--spacing-10);  /* 40px — between major elements */
  --spacing-xl:      var(--spacing-16);  /* 64px — between page sections */
  --spacing-2xl:     var(--spacing-24);  /* 96px — extra-large breaks */
  --spacing-section: var(--spacing-16);  /* 64px — between page sections */

  /* ---------------------------------------------------------------- */
  /* Border Radius                                                       */
  /* ---------------------------------------------------------------- */
  --radius-none:   0;
  --radius-sm:     3px;
  --radius-md:     6px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --radius-full:   9999px;

  /* ---------------------------------------------------------------- */
  /* Shadows (pronounced — cards float above the slate surface)         */
  /* ---------------------------------------------------------------- */
  --shadow-none:   none;
  --shadow-sm:     0 1px 4px rgba(26, 38, 56, 0.08), 0 1px 2px rgba(26, 38, 56, 0.04);
  --shadow-md:     0 4px 12px rgba(26, 38, 56, 0.10), 0 2px 4px rgba(26, 38, 56, 0.06);
  --shadow-lg:     0 8px 28px rgba(26, 38, 56, 0.12), 0 4px 8px rgba(26, 38, 56, 0.08);
  --shadow-hover:  0 6px 20px rgba(26, 38, 56, 0.14), 0 2px 6px rgba(26, 38, 56, 0.08);

  /* ---------------------------------------------------------------- */
  /* Transitions                                                         */
  /* ---------------------------------------------------------------- */
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* ---------------------------------------------------------------- */
  /* Layout                                                              */
  /* ---------------------------------------------------------------- */
  --container-max:         740px;
  --container-wide:        1120px;
  --container-reading:     740px;  /* optimal line-length for body text */
  --sidebar-width:         268px;
  --nav-height:            56px;
  --content-padding:       var(--spacing-8);
  --content-padding-sm:    var(--spacing-4);

  /* ---------------------------------------------------------------- */
  /* Focus ring                                                          */
  /* ---------------------------------------------------------------- */
  --focus-ring:   0 0 0 3px rgba(192, 80, 40, 0.35);
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent-text); text-decoration: underline; }
a:hover { color: var(--color-accent-hover); }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* Auto-injected dimension cross-reference links (see js/autolink-dimensions.js).
   Quieter than a normal link so prose stays readable, but clearly clickable on hover. */
a.dim-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a.dim-link:hover {
  color: var(--color-accent-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------------ */
/* Typography                                                            */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

h1 { font-size: var(--font-size-2xl); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }

p + p { margin-top: var(--spacing-3); }

.lead {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-weight: var(--font-weight-light);
}

.eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  margin-bottom: var(--spacing-3);
}

/* ------------------------------------------------------------------ */
/* Layout Containers                                                     */
/* ------------------------------------------------------------------ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

/* ------------------------------------------------------------------ */
/* Skip Navigation Link (WCAG 2.4.1)                                    */
/* ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 10000;
  background-color: var(--color-bg-surface);
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus {
  position: fixed;
  top: var(--spacing-3);
  left: var(--spacing-4);
  width: auto;
  height: auto;
  padding: var(--spacing-3) var(--spacing-5);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Mobile Navigation                                                     */
/* ------------------------------------------------------------------ */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-nav-text-hover);
  font-size: var(--font-size-lg);
  padding: var(--spacing-2);
  border-radius: var(--radius-sm);
  line-height: 1;
  flex-shrink: 0;
}
.nav-hamburger:hover { background-color: rgba(255,255,255,0.08); }
.nav-hamburger:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }

.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-nav-bg);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--spacing-3) var(--content-padding);
  z-index: 99;
  box-shadow: var(--shadow-md);
}
.nav-mobile-menu.is-open { display: block; }
.nav-mobile-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.nav-mobile-menu .nav-link {
  display: block;
  padding: var(--spacing-3) var(--spacing-2);
  font-size: var(--font-size-base);
}

@media (max-width: 1023px) {
  .nav-hamburger { display: block; }
  .nav-inner > nav { display: none; }
  .nav-header { position: relative; }
}

/* ------------------------------------------------------------------ */
/* Navigation Header (dark navy bar)                                    */
/* ------------------------------------------------------------------ */
.nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-nav-bg);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--content-padding);
  gap: var(--spacing-8);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: var(--letter-spacing-tight);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: var(--spacing-5);
  align-items: center;
}

.nav-link {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-nav-text);
  text-decoration: none;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-link:hover { color: var(--color-nav-text-hover); background-color: rgba(255,255,255,0.08); }
.nav-link.is-active { color: var(--color-nav-active); }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }

/* ------------------------------------------------------------------ */
/* Footer                                                                */
/* ------------------------------------------------------------------ */
.site-footer {
  margin-top: var(--spacing-section);
  padding: var(--spacing-8) var(--content-padding);
  background-color: var(--color-nav-bg);
  color: var(--color-nav-text);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
  border-top: 1px solid var(--color-nav-border);
}

.site-footer p { max-width: var(--container-reading); margin: 0 auto; }
.site-footer a { color: var(--color-nav-text-hover); text-decoration: underline; }
.site-footer a:hover { color: #FFFFFF; }

/* ------------------------------------------------------------------ */
/* Buttons                                                               */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  line-height: 1;
  padding: var(--spacing-3) var(--spacing-6);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
  letter-spacing: 0.01em;
}

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background-color: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.btn-secondary {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
  box-shadow: var(--shadow-md);
  background-color: var(--color-bg-surface-hover);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding-left: var(--spacing-2);
  padding-right: var(--spacing-2);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--color-text-primary);
  background-color: var(--color-bg-inset);
}

.btn-danger {
  background-color: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) { background-color: var(--color-danger-bg); }

/* ------------------------------------------------------------------ */
/* Cards                                                                 */
/* ------------------------------------------------------------------ */
.card {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-6);
  border: 1px solid transparent;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-6);
  border: 1px solid var(--color-border-default);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-link:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.card-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-2);
  color: var(--color-text-primary);
}

.card-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-4);
}

.card-cta {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* ------------------------------------------------------------------ */
/* Nav Card Grid (Home page 2×2 grid)                                   */
/* ------------------------------------------------------------------ */
.nav-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-5);
  margin-top: var(--spacing-lg);
}

/* ------------------------------------------------------------------ */
/* Hero Section                                                          */
/* ------------------------------------------------------------------ */
.hero {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-10) var(--spacing-8);
  margin: var(--spacing-8) 0;
  text-align: center;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-4);
}

.hero-description {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  max-width: 580px;
  margin: 0 auto var(--spacing-4);
}

.hero-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ------------------------------------------------------------------ */
/* Differentiation Section (below card grid on Home)                    */
/* ------------------------------------------------------------------ */
.differentiation-section {
  background-color: var(--color-bg-section);
  border-radius: var(--radius-lg);
  padding: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.differentiation-section .section-heading {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-5);
}

/* ------------------------------------------------------------------ */
/* Assessment Layout                                                      */
/* ------------------------------------------------------------------ */
.assessment-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--spacing-8);
  align-items: start;
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-section);
}

.assessment-main {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  min-width: 0;
}

.assessment-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + var(--spacing-4));
}

/* ------------------------------------------------------------------ */
/* Dimension Header (always visible; never collapses)                   */
/* ------------------------------------------------------------------ */
.dimension-header {
  padding-bottom: var(--spacing-6);
  margin-bottom: var(--spacing-6);
  border-bottom: 2px solid var(--color-border-default);
}

.dimension-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  margin-bottom: var(--spacing-3);
  color: var(--color-text-primary);
}

.dimension-poles {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  font-size: var(--font-size-xs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  margin-bottom: var(--spacing-4);
}

.dimension-poles .pole-divider {
  flex: 1;
  height: 2px;
  background: var(--color-border-default);
}

.dimension-description {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------------ */
/* Question Layer Panel                                                  */
/* Animates in when the layer transitions                                */
/* ------------------------------------------------------------------ */
.layer-panel {
  animation: layerIn var(--transition-slow) ease forwards;
}

/* Spectrum direction hint inside the prompts panel */
.spectrum-hint {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-body);
}

/* Label above layer content (eyebrow pattern — uppercase category label) */
.layer-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-3);
}

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

.question-text {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-5);
  line-height: var(--line-height-snug);
}

/* ------------------------------------------------------------------ */
/* Reflective Prompt Panel                                              */
/* Prompts are READ-ONLY text blocks — never form elements.            */
/* No radio buttons, checkboxes, or any input associated with prompts. */
/* The spectrum slider is the sole interactive input per dimension.     */
/* ------------------------------------------------------------------ */
.reflective-prompts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-8);
}

.reflective-prompt {
  padding: var(--spacing-4) var(--spacing-5);
  border: 1.5px solid var(--color-border-default);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-inset);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

/* Layer 2 and deeper prompts — terracotta left border signals depth */
.reflective-prompt.is-layer-2,
.reflective-prompt.is-layer-3 {
  border-left-color: var(--color-accent);
  background-color: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------------ */
/* Layer Deeper Action                                                  */
/* "I'm still not sure — help me think more"                           */
/* User-invoked only — never shown automatically.                       */
/* ------------------------------------------------------------------ */
.layer-deeper-action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-top: var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
  background: none;
  border: none;
  padding: var(--spacing-2) 0;
  cursor: pointer;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.layer-deeper-action:hover { color: var(--color-accent-hover); text-decoration: none; }
.layer-deeper-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------ */
/* Spectrum Slider                                                        */
/* Sole interactive input per dimension screen.                          */
/* Appears only after reflective prompts have been presented.            */
/* ------------------------------------------------------------------ */
.spectrum-slider {
  margin: var(--spacing-8) 0;
  padding: var(--spacing-6);
  background-color: var(--color-bg-inset);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-default);
}

.slider-intro {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  margin-bottom: var(--spacing-4);
}

.slider-pole-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--spacing-3);
}

.slider-track-container {
  position: relative;
  margin-bottom: var(--spacing-4);
}

input[type="range"].slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px; /* WCAG 2.5.5 — minimum touch target height */
  background: transparent;
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}

input[type="range"].slider-input::-webkit-slider-runnable-track {
  height: 5px;
  background: linear-gradient(to right,
    var(--color-slider-track) var(--fill-left, 50%),
    var(--color-slider-fill) var(--fill-left, 50%),
    var(--color-slider-fill) var(--fill-right, 50%),
    var(--color-slider-track) var(--fill-right, 50%)
  );
  border-radius: var(--radius-full);
}

input[type="range"].slider-input::-moz-range-track {
  height: 5px;
  background: linear-gradient(to right,
    var(--color-slider-track) var(--fill-left, 50%),
    var(--color-slider-fill) var(--fill-left, 50%),
    var(--color-slider-fill) var(--fill-right, 50%),
    var(--color-slider-track) var(--fill-right, 50%)
  );
  border-radius: var(--radius-full);
}

input[type="range"].slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-slider-thumb);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-md);
}

input[type="range"].slider-input::-webkit-slider-thumb:hover {
  background: var(--color-slider-thumb-hover);
  transform: scale(1.15);
}

input[type="range"].slider-input:focus-visible { box-shadow: var(--focus-ring); }

.slider-position-label {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.slider-position-score {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
}

/* ------------------------------------------------------------------ */
/* Action Row                                                             */
/* ------------------------------------------------------------------ */
.action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 2px solid var(--color-border-default);
}

/* ------------------------------------------------------------------ */
/* Progress Map                                                          */
/* Sidebar "field guide checklist" showing all 11 dimensions.           */
/* ------------------------------------------------------------------ */
.progress-map {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-5);
  border: 1px solid var(--color-border-default);
}

/* Flat list — no bullets, no default padding */
.progress-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.progress-map-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 2px solid var(--color-border-default);
}

.progress-group-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-progress-group);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--spacing-4) 0 var(--spacing-2);
}

.progress-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  color: var(--color-progress-upcoming);
  margin-bottom: 2px;
  transition: background-color var(--transition-fast);
}

.progress-item.is-completed {
  color: var(--color-progress-completed);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}
.progress-item.is-completed:hover { background-color: var(--color-bg-inset); }

.progress-item.is-current {
  color: var(--color-progress-current);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-accent-subtle);
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--spacing-2) - 3px);
}

.progress-item-check {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

/* Button used inside completed progress-map items to revisit a dimension */
.btn-progress-nav {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  flex: 1;
  min-width: 0;
}

/* Score badge shown on completed progress items */
.progress-item-score {
  margin-left: auto;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  min-width: 1.5em;
  text-align: right;
}

/* ------------------------------------------------------------------ */
/* Results                                                                */
/* Single-column editorial layout. No sidebar.                          */
/* ------------------------------------------------------------------ */
.results-header {
  background-color: var(--color-bg-surface);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-8);
}

.results-intro {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}

/* Page intro body paragraphs (content pages) */
.page-intro-body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.page-intro-body + .page-intro-body {
  margin-top: var(--spacing-4);
}

/* Session storage unavailable warning (assessment page) */
#session-warning {
  padding-top: var(--spacing-4);
}

.dimension-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Mobile: allow horizontal scroll instead of cell wrapping. Wrap the
   <table> in a parent with this class, or rely on the page layout. */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
  .dimension-table { font-size: var(--font-size-xs); }
  .dimension-table th,
  .dimension-table td { padding: var(--spacing-2) var(--spacing-3); }
}

.dimension-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-bg-section);
  padding: var(--spacing-3) var(--spacing-5);
}

.dimension-table td {
  padding: var(--spacing-3) var(--spacing-5);
  border-bottom: 1px solid var(--color-border-default);
  vertical-align: middle;
}

.dimension-table tr:last-child td { border-bottom: none; }

.dimension-table tr.group-header td,
.dimension-table tr.group-header th {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-text-muted);
  background-color: var(--color-bg-section);
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-2);
  text-align: left;
}

.score-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
}

.position-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.results-section {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-8);
  margin-bottom: var(--spacing-6);
}

.section-heading {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-5);
  padding-bottom: var(--spacing-3);
  border-bottom: 2px solid var(--color-border-default);
}

.resemblance-card {
  background-color: var(--color-bg-inset);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-5);
  margin-bottom: var(--spacing-4);
}

.resemblance-card-name {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

.resemblance-framing {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-3);
}

.export-actions {
  display: flex;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  margin-top: var(--spacing-6);
}

.export-note {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-body);
}

.export-disclaimer {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-5);
  line-height: var(--line-height-body);
}

.modal-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

.fallback-label {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
}

.framing-note {
  background-color: var(--color-accent-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-6);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.retake-action {
  margin-top: var(--spacing-8);
  text-align: center;
  display: flex;
  justify-content: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
}

/* Edit-mode banner shown above the assessment when arriving via "Edit Scores" */
.edit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  flex-wrap: wrap;
  background-color: var(--color-accent-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-3) var(--spacing-5);
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.edit-banner-text { flex: 1 1 320px; }
.edit-banner-action { flex: 0 0 auto; }

/* ------------------------------------------------------------------ */
/* Modal                                                                 */
/* ------------------------------------------------------------------ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 38, 56, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--spacing-4);
}

.modal {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-8);
  max-width: 580px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal-body { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: var(--spacing-4); }

.modal-textarea {
  width: 100%;
  height: 220px;
  background: var(--color-bg-inset);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  resize: none;
}

.modal-actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Form Elements                                                          */
/* ------------------------------------------------------------------ */
.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-2);
}

.form-input {
  width: 100%;
  padding: var(--spacing-3) var(--spacing-4);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg-inset);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring);
}

.form-hint {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--spacing-2);
}

.label-optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------------------ */
/* Inline message states                                                  */
/* ------------------------------------------------------------------ */
.message-error {
  background-color: var(--color-danger-bg);
  border-left: 4px solid var(--color-danger);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  margin-bottom: var(--spacing-5);
}

.message-success {
  background-color: var(--color-success-bg);
  border-left: 4px solid var(--color-success);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-sm);
  color: var(--color-success);
  margin-bottom: var(--spacing-5);
}

/* ------------------------------------------------------------------ */
/* Accordion (Learn the Dimensions page)                                 */
/* ------------------------------------------------------------------ */
.accordion-item {
  border-bottom: 1px solid var(--color-border-default);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.accordion-trigger:hover { color: var(--color-accent-text); }
.accordion-trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.accordion-icon {
  transition: transform var(--transition-base);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }

.accordion-panel {
  display: none;
  padding: 0 0 var(--spacing-6) 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.accordion-panel.is-open { display: block; }

/* ------------------------------------------------------------------ */
/* Responsive                                                             */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  :root { --content-padding: var(--spacing-4); }

  .assessment-layout {
    grid-template-columns: 1fr;
    gap: var(--spacing-5);
  }
  .assessment-sidebar {
    position: static;
    order: -1;
  }
  .assessment-main { padding: var(--spacing-5); }
  .nav-card-grid { grid-template-columns: 1fr; }

  .action-row {
    flex-direction: column-reverse;
    gap: var(--spacing-3);
    align-items: stretch;
  }
  .action-row .btn { width: 100%; justify-content: center; }

  .export-actions { flex-direction: column; }
  .nav-links { display: none; }
}

/* Smallest phones — bump line-height for breathing room and reduce base
   so 2xl/3xl headlines don't dominate the viewport. All other sizes
   recompute proportionally because they're derived from --font-size-base. */
@media (max-width: 480px) {
  :root { --font-size-base: 1rem; }   /* 16px */
  body { line-height: 1.75; }
  p { margin-bottom: var(--spacing-4); }
}

/* Honor the user's "reduce motion" OS preference (vestibular,
   cognitive-load, photosensitivity). Disable, don't shorten, animations. */
@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;
  }
}

/* Dark-mode token overrides. Applied when:
     - the user picked "dark" via the toggle (data-theme="dark"), OR
     - the user hasn't picked anything (no data-theme="light") AND the OS
       prefers dark.
   The toggle writes data-theme on <html>; an inline pre-paint script in
   each page reads localStorage and sets it before first paint to avoid
   FOUC. Contrast: text ≥ 7:1, muted ≥ 4.5:1 on bg-base. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base:           #11161F;
    --color-bg-surface:        #1A2230;
    --color-bg-surface-hover:  #232C3C;
    --color-bg-elevated:       #1F2836;
    --color-bg-inset:          #161D28;
    --color-bg-section:        #0E131B;

    --color-border-default:    #2C3949;
    --color-border-strong:     #455265;
    --color-border-focus:      #E9764D;

    --color-text-primary:      #F1F4F9;
    --color-text-secondary:    #C9D2DF;
    --color-text-muted:        #97A3B5;
    --color-text-on-accent:    #FFFFFF;
    --color-text-on-dark:      #F1F4F9;

    --color-accent:            #E9764D;
    --color-accent-hover:      #F18B65;
    --color-accent-subtle:     #3B2218;
    --color-accent-text:       #F4A380;

    --color-danger:            #F47267;
    --color-danger-hover:      #FF8A80;
    --color-danger-bg:         #3A1B17;
    --color-success:           #6FBE94;
    --color-success-bg:        #18301F;

    --color-disabled-bg:       #232B38;
    --color-disabled-text:     #6E7A8C;

    --color-slider-track:      #2C3949;
    --color-slider-fill:       #E9764D;
    --color-slider-thumb:      #E9764D;
    --color-slider-thumb-hover:#F18B65;

    --color-nav-bg:            #0B1018;
    --color-nav-border:        #161D28;
    --color-nav-text:          #B8C4D4;
    --color-nav-text-hover:    #FFFFFF;
    --color-nav-active:        #E9764D;

    --color-progress-completed:#6FBE94;
    --color-progress-current:  #F1F4F9;
    --color-progress-upcoming: #6E7A8C;
    --color-progress-group:    #97A3B5;

    --shadow-sm:    0 1px 4px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.35);
    --shadow-lg:    0 8px 28px rgba(0,0,0,0.65), 0 4px 8px rgba(0,0,0,0.40);
    --shadow-hover: 0 6px 20px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.40);

    --focus-ring:   0 0 0 3px rgba(233, 118, 77, 0.55);
  }
}

/* Explicit dark choice from the toggle — overrides the OS preference. */
:root[data-theme="dark"] {
  --color-bg-base:           #11161F;
  --color-bg-surface:        #1A2230;
  --color-bg-surface-hover:  #232C3C;
  --color-bg-elevated:       #1F2836;
  --color-bg-inset:          #161D28;
  --color-bg-section:        #0E131B;

  --color-border-default:    #2C3949;
  --color-border-strong:     #455265;
  --color-border-focus:      #E9764D;

  --color-text-primary:      #F1F4F9;
  --color-text-secondary:    #C9D2DF;
  --color-text-muted:        #97A3B5;
  --color-text-on-accent:    #FFFFFF;
  --color-text-on-dark:      #F1F4F9;

  --color-accent:            #E9764D;
  --color-accent-hover:      #F18B65;
  --color-accent-subtle:     #3B2218;
  --color-accent-text:       #F4A380;

  --color-danger:            #F47267;
  --color-danger-hover:      #FF8A80;
  --color-danger-bg:         #3A1B17;
  --color-success:           #6FBE94;
  --color-success-bg:        #18301F;

  --color-disabled-bg:       #232B38;
  --color-disabled-text:     #6E7A8C;

  --color-slider-track:      #2C3949;
  --color-slider-fill:       #E9764D;
  --color-slider-thumb:      #E9764D;
  --color-slider-thumb-hover:#F18B65;

  --color-nav-bg:            #0B1018;
  --color-nav-border:        #161D28;
  --color-nav-text:          #B8C4D4;
  --color-nav-text-hover:    #FFFFFF;
  --color-nav-active:        #E9764D;

  --color-progress-completed:#6FBE94;
  --color-progress-current:  #F1F4F9;
  --color-progress-upcoming: #6E7A8C;
  --color-progress-group:    #97A3B5;

  --shadow-sm:    0 1px 4px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-lg:    0 8px 28px rgba(0,0,0,0.65), 0 4px 8px rgba(0,0,0,0.40);
  --shadow-hover: 0 6px 20px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.40);

  --focus-ring:   0 0 0 3px rgba(233, 118, 77, 0.55);
}

/* Theme toggle button — sits in the nav header. */
.theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-nav-text);
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-right: var(--spacing-2);
  padding: 0;
}
.theme-toggle:hover { background-color: rgba(255,255,255,0.10); color: var(--color-nav-text-hover); border-color: rgba(255,255,255,0.30); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.45); }
.theme-toggle .theme-toggle-icon { width: 18px; height: 18px; display: block; }

/* Tri-state toggle: icon reflects the *current* chosen mode.
     - data-theme="light"  → sun
     - data-theme="dark"   → moon
     - no data-theme set   → system (monitor / auto)
   Click cycles system → light → dark → system (handled in nav.js). */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon,
.theme-toggle .icon-system { display: none; }
.theme-toggle .icon-system { display: block; } /* default: no choice → system */
:root[data-theme="light"] .theme-toggle .icon-system { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun    { display: block; }
:root[data-theme="dark"]  .theme-toggle .icon-system { display: none; }
:root[data-theme="dark"]  .theme-toggle .icon-moon   { display: block; }

@media print {
  .nav-header,
  .assessment-sidebar,
  .export-actions,
  .export-fallback,
  .retake-action,
  .retake-dialog,
  .modal-overlay,
  .nav-mobile-menu,
  .skip-link,
  .edit-banner,
  #edit-mode-banner,
  .action-row { display: none !important; }

  :root {
    --color-bg-base:    #FFFFFF;
    --color-bg-surface: #FFFFFF;
    --color-bg-section: #FFFFFF;
    --color-bg-inset:   #FFFFFF;
    --color-text-primary:   #000000;
    --color-text-secondary: #1F1F1F;
    --color-text-muted:     #404040;
  }

  body {
    background: white;
    color: black;
    font-size: 11pt;
    line-height: 1.45;
  }
  .assessment-main, .results-section, .results-header, .card { box-shadow: none; border: 1px solid #ccc; }
  h1, h2, h3 { page-break-after: avoid; }
  .results-section, .dimension-card, .pattern-card { page-break-inside: avoid; }
  a { color: black; text-decoration: underline; }
}

/* ------------------------------------------------------------------ */
/* Results page layout                                                    */
/* ------------------------------------------------------------------ */
.results-page { padding: var(--spacing-8) 0 var(--spacing-xl); }

/* ------------------------------------------------------------------ */
/* Narrative prose section                                               */
/* ------------------------------------------------------------------ */
.narrative-prose {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.narrative-prose h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
  padding-top: var(--spacing-4);
  border-top: 1px solid var(--color-border-default);
}

.narrative-prose h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

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

/* ------------------------------------------------------------------ */
/* Combination pattern items                                             */
/* ------------------------------------------------------------------ */
.pattern-item { margin-bottom: var(--spacing-5); }
.pattern-item:last-child { margin-bottom: 0; }

.pattern-name {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}

.pattern-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------------ */
/* No-match notes (patterns / resemblances empty states)                */
/* ------------------------------------------------------------------ */
.no-match-note {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
}

/* ------------------------------------------------------------------ */
/* Resemblance card extras                                               */
/* ------------------------------------------------------------------ */
.resemblance-desc {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-3);
}

.resemblance-differ {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
  margin-top: var(--spacing-3);
}

.resemblance-driven-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-text);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-1);
}

.resemblance-driven-dims {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------------ */
/* Retake confirmation dialog                                            */
/* ------------------------------------------------------------------ */
.retake-dialog {
  position: fixed;
  inset: 0;
  background-color: rgba(26, 38, 56, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--spacing-4);
}

/* Ensure [hidden] attribute overrides display:flex on the dialog */
.retake-dialog[hidden] { display: none !important; }

/* Ensure [hidden] attribute overrides display:flex on the modal overlay */
.modal-overlay[hidden] { display: none !important; }

.retake-dialog-box {
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-8);
  max-width: 420px;
  width: 100%;
}

.retake-dialog-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-3);
}

.retake-dialog-body {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-body);
  margin-bottom: var(--spacing-6);
}

.retake-dialog-actions {
  display: flex;
  gap: var(--spacing-3);
  justify-content: flex-end;
}

/* ------------------------------------------------------------------ */
/* Utility                                                               */
/* ------------------------------------------------------------------ */
/* JS-driven visibility: add/remove via classList — never inline styles */
.js-hidden { display: none; }

/* ------------------------------------------------------------------ */
/* Modal close button                                                    */
/* ------------------------------------------------------------------ */
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.modal-close:hover { color: var(--color-text-primary); }
.modal-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Prevent scroll on page background when a modal is open */
body.modal-open { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Export fallback (download unavailable)                               */
/* ------------------------------------------------------------------ */
.export-fallback {
  margin-top: var(--spacing-4);
  padding: var(--spacing-4);
  background-color: var(--color-bg-inset);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border-default);
}

.export-fallback-msg {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-3);
}

.export-fallback-textarea {
  width: 100%;
  height: 200px;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  resize: vertical;
}

/* ================================================================== */
/* Editorial Flourishes                                                 */
/* ------------------------------------------------------------------ */
/* Decorative pass layered on top of the base system. All effects use  */
/* existing tokens, are CSS-only, and either apply globally to surfaces */
/* (body wash, card accent, selection) or are opt-in utilities          */
/* (.has-dropcap, .pullquote, .rule-ornament). Safe to remove this      */
/* whole block to revert to the plain base system.                      */
/* ================================================================== */

/* --- Warm paper wash + faint fiber noise on body ---
   Two layered ::before pseudo-elements behind all content (z-index:-1).
   The body's existing background-color (--color-bg-base) shows through.
   Both layers are pointer-events:none and aria-irrelevant. */
body { position: relative; }

body::before {
  /* Warm terracotta-tinted radial wash, anchored top-center,
     fading into the cool slate base. Tints the page warm without
     altering text contrast. */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%,
      rgba(192, 80, 40, 0.08) 0%,
      rgba(192, 80, 40, 0.03) 35%,
      transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 100%,
      rgba(26, 38, 56, 0.04) 0%,
      transparent 60%);
}

body::after {
  /* Inline SVG fiber/noise for a subtle paper texture. Opacity is
     deliberately very low so it reads as tactile, not as "noise". */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.15 0 0 0 0 0.22 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: no-preference) {
  /* No animation; reduced-motion users get the same static texture. */
}

/* --- Editorial eyebrow: short hairline rule before the text ---
   Targets both .eyebrow and .hero-eyebrow. Uses ::before so the
   markup is unchanged. */
.eyebrow,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
}
.eyebrow::before,
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Hero ornament: tiny centered field-guide mark under the title ---
   Opt-in via .hero (already present on the home hero). Uses the
   triangular glyphs as a quiet decorative anchor. */
.hero { text-align: inherit; }
.hero .hero-title + .hero-description::before {
  content: "▲ ▽";
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-accent);
  opacity: 0.55;
  margin: var(--spacing-3) 0 var(--spacing-4);
}

/* --- Card top accent: thin terracotta bar that grows on hover ---
   Applies to .card-link only (interactive cards). The static .card
   keeps its current look. */
.card-link {
  position: relative;
  overflow: hidden;
}
.card-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-accent) 0%,
    var(--color-accent) 30%,
    transparent 100%);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
.card-link:hover::before,
.card-link:focus-visible::before {
  transform: scaleX(1);
}

/* --- Drop cap utility (opt-in) ---
   Add `class="has-dropcap"` to a container; the first letter of its
   first <p> becomes a display-font terracotta drop cap. */
.has-dropcap > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 3.4em;
  line-height: 0.85;
  float: left;
  padding: 0.1em 0.12em 0 0;
  margin-right: 0.05em;
  color: var(--color-accent-text);
}

/* --- Pull quote utility (opt-in) ---
   <blockquote class="pullquote">…</blockquote> */
.pullquote {
  position: relative;
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-10);
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
  border-left: 2px solid var(--color-accent);
}
.pullquote::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  left: var(--spacing-3);
  top: -0.15em;
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.85;
}
.pullquote cite {
  display: block;
  margin-top: var(--spacing-3);
  font-style: normal;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  letter-spacing: var(--letter-spacing-wide);
}
.pullquote cite::before { content: "— "; }

/* --- Section divider ornament (opt-in) ---
   <hr class="rule-ornament"> — hairline · dot · hairline. */
hr.rule-ornament {
  border: none;
  height: var(--spacing-6);
  margin: var(--spacing-lg) auto;
  max-width: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}
hr.rule-ornament::before,
hr.rule-ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--color-border-strong);
}
hr.rule-ornament::before { margin-right: var(--spacing-3); }
hr.rule-ornament::after  { margin-left:  var(--spacing-3); }
/* The center dot is rendered by a background on the element itself. */
hr.rule-ornament {
  background:
    radial-gradient(circle, var(--color-accent) 0 3px, transparent 3px) center/auto no-repeat;
}

/* --- Selection color: terracotta tint, AA-safe text ---
   --color-accent-text on --color-accent-subtle is the documented
   AA-safe pairing in the token system. */
::selection {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-text);
}