:root {
  /* --- Editorial Journal palette -----------------------------------------
     Warm off-white paper, soft white cards, dark charcoal ink, warm grey
     secondary text. Terracotta is the ONLY accent: primary actions,
     progress, active navigation. Everything else stays quiet. */
  --ivory: #F6F3EE;          /* warm paper background */
  --beige: #EDE7DD;          /* muted secondary surface */
  --charcoal: #211F1C;       /* primary ink */
  --text-soft: #57524A;      /* body / secondary ink */
  --text-muted: #938A7C;     /* warm grey — captions, labels, meta */
  --border: #E4DDD1;         /* hairline on cards */
  --border-soft: #ECE5D9;    /* even quieter separators */

  /* Terracotta — the single accent, with tints/shades for states. */
  --terracotta: #C15F3C;
  --terracotta-hover: #A94E2F;
  --terracotta-soft: #F0DDD3;   /* wash for subtle fills / selected states */
  --terracotta-tint: #FBF1EB;   /* faint background wash */

  /* Backwards-compatible aliases. The whole codebase (and existing tests)
     still reference --gold and --blush; they now resolve to terracotta so
     every legacy usage adopts the single accent without touching each
     template. New code should prefer --terracotta directly. */
  --gold: var(--terracotta);
  --blush: var(--terracotta);
  --blush-hover: var(--terracotta-hover);

  --success: #4F7D5C;
  --warning: #C27C2C;
  --danger: #A84A4A;

  /* Surfaces */
  --surface: #FFFFFF;        /* soft white cards */
  --surface-muted: var(--beige);

  /* Typefaces — serif display for headings, humanist sans for everything
     else. Fraunces has optical-size and a soft, editorial character; Inter
     keeps UI text crisp and calm. System fallbacks preserve rendering if
     the web fonts do not load. */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale — a touch more generous at the top end so whitespace can
     do real layout work (breathing room between editorial blocks). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 26px;
  --space-7: 40px;
  --space-8: 64px;

  /* Radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Shadows — soft, warm-tinted, barely-there. Depth comes from whitespace,
     not heavy elevation. */
  --shadow-sm: 0 1px 2px rgba(33, 31, 28, 0.03);
  --shadow-md: 0 10px 30px -12px rgba(33, 31, 28, 0.10);

  /* Layout */
  --page-width: 760px;
  --page-width-wide: 1060px;

  /* Type scale — editorial. Headings are large and set in the serif; the
     fluid clamps let them command the page on desktop while staying legible
     on mobile. */
  --font-size-h1: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --font-size-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --font-size-h3: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --font-size-body: 16px;
  --font-size-small: 13px;
  --font-size-micro: 11px;

  /* Comfortable reading measure for long-form body text on wide surfaces.
     ~66 characters keeps lines scannable without narrowing short content
     (narrower cards fall below this cap and are unaffected). */
  --measure: 66ch;

  /* Interactive */
  --focus-ring: 0 0 0 3px rgba(193, 95, 60, 0.30);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: var(--font-sans);

  background: var(--ivory);
  color: var(--charcoal);

  font-size: var(--font-size-body);
  line-height: 1.65;

  /* Crisper glyph rendering — perceived-quality polish, no layout change. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  padding: var(--space-6);
}

.container {
  max-width: var(--page-width);
  margin: 0 auto;
}

/* A small number of pages (tables, wide grids) read better with extra room. */
.container.container-wide {
  max-width: var(--page-width-wide);
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--font-size-h1);
  margin-bottom: var(--space-4);
  color: var(--charcoal);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  font-optical-sizing: auto;
}

h2 {
  font-family: var(--font-serif);
  font-size: var(--font-size-h2);
  margin-bottom: var(--space-3);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 500;
  font-optical-sizing: auto;
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--font-size-h3);
  margin-bottom: var(--space-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}

p {
  margin-bottom: var(--space-4);
  color: var(--text-soft);
  line-height: 1.7;
}

p:last-child {
  margin-bottom: 0;
}

small, .meta {
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-5);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition),
              border-color var(--transition);
}

.card > *:last-child {
  margin-bottom: 0;
}

/* Keep long-form body text to a comfortable reading measure on wide cards.
   Short content and narrower cards (auth, snapshot) fall below this cap and
   are unaffected, so centred and responsive layouts are preserved. */
.card p {
  max-width: var(--measure);
}

/* A compact card variant for hero/welcome areas — same surface, noticeably
   less vertical padding so the top of a page doesn't dominate the viewport. */
.card-compact {
  padding: var(--space-5) var(--space-6);
}

/* Primary-emphasis card: used sparingly (one or two per page) to make the
   single most decision-relevant card visually outrank its neighbours,
   without introducing a new colour. A slightly heavier border + a thin gold
   accent edge does the job. */
.card-emphasis {
  border-color: var(--terracotta-soft);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--terracotta-tint);
  box-shadow: var(--shadow-md);
  position: relative;
}

.card-emphasis::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  left: 0;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--terracotta);
}

.card-emphasis {
  padding-left: calc(var(--space-6) + 6px);
}

/* Secondary/quiet section: lower visual weight than the primary content
   above it, without a separate colour. */
.section-quiet {
  opacity: 0.92;
}

.section-label {
  display: block;
  text-transform: uppercase;
  font-size: var(--font-size-micro);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

input,
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
  color: var(--charcoal);
}

label {
  font-weight: 600;
  font-size: var(--font-size-small);
}

textarea {
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--focus-ring);
}

/* The text-input rule above (width: 100%, padding, border, background) was
   being inherited by checkboxes/radios too, since it targets every <input>
   regardless of type. A checkbox rendered as a full-width padded box pushes
   its label into a narrow remaining column -- the root cause of the
   consent-required layout bug. Checkboxes/radios opt back out to their
   native sizing here; anywhere they're laid out next to a label (e.g.
   .consent-option below) controls spacing itself. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
}

/* A group of question+answer fields (Reflect, Wheel). Replaces old <br><br>
   spacer hacks with a single, consistent rhythm. */
.field-group {
  margin-bottom: var(--space-6);
}

.field-group:last-child {
  margin-bottom: 0;
}

a {
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition), opacity var(--transition);
}

a:hover {
  color: var(--text-soft);
  opacity: .8;
}

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

.score {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.2rem);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 0 0 0 18px;
  margin-bottom: var(--space-4);
  position: relative;

  border: none;
  background: transparent;

  color: var(--text-muted);

  font-family: var(--font-sans);
  font-size: var(--font-size-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* An editorial eyebrow: a short terracotta rule precedes the label rather
   than a boxed pill. Quiet, but unmistakably part of the accent system. */
.badge::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--terracotta);
  opacity: 0.7;
}

.badge.error {
  color: var(--danger);
}

.badge.error::before {
  background: var(--danger);
  opacity: 1;
}

.success {
  color: var(--success);
}

.warning {
  color: var(--warning);
}

.error {
  color: var(--danger);
}

.rating-scale {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.rating-scale label {
  cursor: pointer;
}

/* Visually hidden but still focusable and in the tab order — keyboard and
   switch users can arrow through the scale and see a focus ring on the
   number (see `input:focus-visible + span` below). Replaces the previous
   `display:none`, which removed the radios from the tab order entirely. */
.rating-scale input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rating-scale input:focus-visible + span {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-color: var(--terracotta);
}

.rating-scale span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;
  border: 1px solid var(--border-soft);

  background: white;
  font-weight: 600;
  font-size: var(--font-size-small);
}

.rating-scale input:checked + span {
  background: var(--terracotta);
  color: #FFFFFF;
  border-color: var(--terracotta);
}

@media (max-width: 600px) {
  .rating-scale span {
    width: 36px;
    height: 36px;
  }
}

a.btn,
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;

  background: var(--terracotta);
  color: #FFFFFF;

  padding: 12px 26px;
  border-radius: var(--radius-pill);

  font-family: var(--font-sans);
  text-decoration: none;
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;

  border: 1px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(33, 31, 28, 0.06);

  transition: background var(--transition), transform var(--transition),
              box-shadow var(--transition), opacity var(--transition);
}

a.btn:hover,
button:hover,
.btn:hover {
  background: var(--terracotta-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  opacity: 1;
}

a.btn:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Disabled / in-flight feedback: applied by the double-submit guard while a
   form is submitting, and to any natively disabled button. Visual only. */
.btn:disabled,
.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary action: same shape as .btn, lower visual weight so a screen's
   primary action stands out. Used across Tracks/Journey for "other options"
   alongside a recommended choice. */
a.btn.btn-secondary,
.btn.btn-secondary {
  background: transparent;
  color: var(--charcoal);
  border: 1px solid var(--border);
}

a.btn.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--beige);
  color: var(--charcoal);
}

/* A plain-text "link-styled" button, used where an action needs to sit
   inline with body copy (e.g. activate/deactivate toggles in admin tables)
   without taking on the pill-button treatment. */
.btn-link {
  display: inline;
  min-height: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-weight: 600;
  text-decoration: underline;
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
  color: var(--charcoal);
  cursor: pointer;
}

.btn-link:hover {
  background: none;
  transform: none;
  opacity: .8;
}

.growth-opportunity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.growth-opportunity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* Generic bordered row used for list-style content: reflection history
   entries, wheel history, suggested/selected actions, ranked tracks,
   option rows. Shared instead of the same border/radius/padding repeated
   as an inline style on every list item across templates. */
.list-plain {
  list-style: none;
  padding: 0;
}

.list-item {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

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

.list-item--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.list-item--row > .list-item-body {
  flex: 1;
  min-width: 220px;
}

.list-item-title {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* A selectable option row (radio/checkbox + label), used on Tracks and
   Track Actions. */
.option-row {
  display: block;
  cursor: pointer;
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.option-row:last-child {
  margin-bottom: 0;
}

.option-row input {
  margin-right: var(--space-2);
}

/* Compact grid for secondary, "quieter" content (Now's supporting cards,
   Journey's recommended-track cards) — replaces the repeated inline
   `display:grid; grid-template-columns: repeat(auto-fit, minmax(...))`
   pattern. */
.grid-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.grid-secondary .card {
  margin-bottom: 0;
}

/* Progress bar, used by Now and Journey for track/journey completion.
   Progress is one of the reserved terracotta usages. */
.progress-track {
  background: var(--beige);
  height: 8px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: var(--space-3) 0;
}

.progress-fill {
  background: var(--terracotta);
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    max-width: 480px;
    width: 100%;
}

/* Checkbox + label row (consent-required page). Checkbox stays fixed-size
   and top-aligned; the label takes the rest of the row's width and wraps
   normally instead of being squeezed into a narrow column. */
.consent-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.consent-option input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 4px;
  cursor: pointer;
}

.consent-option label {
  flex: 1;
  font-weight: normal;
  font-size: inherit;
  line-height: 1.6;
  cursor: pointer;
}

.consent-option label a {
  color: var(--charcoal);
  text-decoration: underline;
}

/* Compact metric grid (Admin). Numbers here are informational density, not
   the single hero figure a Wheel/Journey score is — so they get their own,
   smaller scale rather than reusing .score at full size. */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.metric-label {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: var(--space-1);
}

.metric-value {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  font-weight: 700;
  color: var(--charcoal);
  line-height: 1.15;
}

/* Shared data table (Admin). Replaces per-cell inline padding/border. */
.table-wrap {
  overflow-x: auto;
  margin-top: var(--space-5);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.data-table th {
  text-align: left;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: var(--font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid #F1ECE4;
  color: var(--charcoal);
}

.data-table td.nowrap {
  white-space: nowrap;
}

@media (max-width: 768px) {
  body {
    padding: var(--space-4);
  }

  .container,
  .container.container-wide {
    max-width: 100%;
  }

  .card {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
  }

  .card-emphasis {
    padding-left: calc(var(--space-5) + 6px);
  }

  .score {
    font-size: clamp(1.7rem, 1.5rem + 1vw, 2.1rem);
  }

  .auth-wrapper {
    min-height: 90vh;
    align-items: center;
  }

  .auth-card {
    max-width: 100%;
  }

  input,
  textarea,
  select,
  button,
  .btn,
  a.btn {
    width: 100%;
  }

  /* Same fix as the base checkbox/radio reset above: this mobile rule
     targets every <input> too, and would otherwise reintroduce the
     full-width checkbox bug below 768px. */
  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
  }
}

@media (max-width: 480px) {
  body {
    padding: var(--space-3);
  }

  .card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
  }

  .card-emphasis {
    padding-left: calc(var(--space-4) + 6px);
  }

  .badge {
    font-size: var(--font-size-micro);
    padding: 4px 9px;
  }
}

.app-header {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.app-nav {
  max-width: var(--page-width-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.app-logo {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}

.nav-links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font-size: var(--font-size-small);
}

/* Grouped navigation — group labels are hidden on desktop, the horizontal
   row stays calm; a subtle divider separates the groups. */
.nav-group-label {
  display: none;
}

.nav-sep {
  width: 1px;
  height: 16px;
  background: var(--border-soft);
  display: inline-block;
}

/* Active page — terracotta, the accent reserved for active navigation.
   Not colour-only: it also carries a terracotta underline (desktop) / left
   bar (mobile) so the state survives without colour perception. */
.nav-links a.is-active {
  font-weight: 700;
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.nav-links a.is-active:hover {
  color: var(--terracotta-hover);
}

.menu-toggle:focus-visible,
.nav-links a:focus-visible,
.admin-nav-group a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Admin navigation — a coherent grouped component (Administration + Analytics),
   wrapping/stacking on narrow widths, no dropdowns, no JavaScript. */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--font-size-small);
}

.admin-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-nav-label {
  text-transform: uppercase;
  font-size: var(--font-size-micro);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.admin-nav-group a.is-active {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Profile account hub — clearly separated Danger Zone. */
.danger-zone {
  border: 1px solid #E0B4B4;
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.menu-toggle {
  display: none;
  background: transparent;
  color: var(--charcoal);
  font-size: 26px;
  padding: 0;
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 768px) {
  .app-nav {
    align-items: flex-start;
  }

  .menu-toggle {
    display: block;
    width: auto;
  }

  .nav-links {
    display: none;
    width: 100%;
    margin-top: var(--space-4);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .nav-links.active {
    display: flex;
  }

  /* The public (signed-out) header carries a single "Sign in" action and no
     hamburger. It must stay visible and inline on mobile — logo left, Sign in
     right — rather than collapsing into the drawer used by the app nav. */
  .nav-links.nav-simple {
    display: flex;
    width: auto;
    margin-top: 0;
    flex-direction: row;
    align-items: center;
  }

  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .app-nav {
    flex-wrap: wrap;
  }

  /* In the mobile drawer the groups become visible headings; the desktop
     divider is hidden and the active marker becomes a left bar. */
  .nav-group-label {
    display: block;
    text-transform: uppercase;
    font-size: var(--font-size-micro);
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: var(--space-3);
    margin-bottom: 2px;
  }

  .nav-sep {
    display: none;
  }

  .nav-links a.is-active {
    text-decoration: none;
    border-left: 3px solid var(--terracotta);
    padding-left: var(--space-2);
    margin-left: -11px;
  }
}

.app-footer {
  margin-top: var(--space-8);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-soft);
}

.app-footer-inner {
  max-width: var(--page-width-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.app-footer-links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.app-footer-inactive {
  color: var(--text-muted);
  opacity: 0.6;
  cursor: default;
}

.app-footer-meta {
  color: var(--text-muted);
  font-size: var(--font-size-small);
  margin: 0;
}

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

  a.btn:hover,
  button:hover,
  .btn:hover {
    transform: none;
  }

  .card:hover {
    transform: none;
  }
}

/* ==========================================================================
   NOW — Editorial Journal composition (Phase 1)
   An expansive two-column hero, a substantial atmospheric landscape, and an
   asymmetric editorial body. Structure comes from whitespace, alignment,
   typography and hairlines — only the Weekly Focus / primary action carries
   a real surface. Everything below is presentation only.
   ========================================================================== */

.now {
  max-width: 1120px;
  margin: 0 auto;
}

/* A quiet editorial eyebrow — plain warm-grey small caps, no rule. Distinct
   from the global .badge; used to title each movement of the NOW page. */
.now-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

/* Provenance caption for user-authored dashboard content (the user's last
   reflection commitment). Muted and small so it reads as attribution — "this
   came from you" — rather than as a Lotus-generated line. */
.now-provenance {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

/* An accent-coloured "→" text action for editorial (non-button) links. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--terracotta);
  font-weight: 600;
  font-size: var(--font-size-small);
  letter-spacing: 0.01em;
}

.link-cta:hover {
  color: var(--terracotta-hover);
  opacity: 1;
  gap: 10px;
}

.now-hair {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-7) 0;
}

/* --- HERO ---------------------------------------------------------------- */
/* Expansive: fills most of the first viewport. Deliberately asymmetric —
   the copy takes the wider column, the landscape the rest. */
.now-hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: var(--space-8);
  padding: 68px 0;
}

.now-hero-copy {
  max-width: 34rem;
}

.now-hero-copy h1 {
  font-size: clamp(2.9rem, 2rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-5);
}

.now-hero-lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 30ch;
  margin-bottom: 0;
}

.now-hero-lede strong {
  color: var(--charcoal);
  font-weight: 600;
}

.now-hero-cta {
  margin-top: var(--space-7);
}

/* The atmospheric landscape — substantial on desktop, decorative only. */
/* Substantial but integrated: capped so the landscape never outweighs the
   headline, aligned to the right of its column, and (via the SVG's own fade
   mask) dissolving into the warm paper rather than sitting in a panel. */
.now-hero-art {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
}

.now-hero-art svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* --- BODY: asymmetric two columns --------------------------------------- */
/* Left (main): the Weekly Focus surface + the single primary action.
   Right (side): Progress and Reflection, editorial and lightweight. */
.now-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

.now-col-side {
  padding-top: var(--space-2);
}

/* The featured focus — an editorial composition, not a dashboard card. A
   restrained terracotta left rule and a whisper of warm tint set it apart;
   no border, no rounded box, no heavy shadow. */
.now-focus {
  border-left: 3px solid var(--terracotta);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  background: linear-gradient(
    90deg,
    var(--terracotta-tint) 0%,
    rgba(251, 241, 235, 0) 62%
  );
}

.now-focus-title {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.now-focus-note {
  color: var(--text-soft);
  max-width: 52ch;
}

/* The Weekly Focus progress line: a big percentage, a caption, a bar. */
.now-focus-progress {
  margin-top: var(--space-6);
}

.now-focus-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.now-focus-pct {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1;
}

.now-focus-count {
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

/* Today's Action — editorial, no border. A terracotta marker opens the
   single small next step. Sits directly under the focus surface. */
.now-action {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-7);
}

.now-action-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 5px var(--terracotta-soft);
}

.now-action-body {
  flex: 1;
  min-width: 0;
}

.now-action-body h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1.2;
  margin-bottom: var(--space-3);
}

/* --- PROGRESS (side, editorial) ----------------------------------------- */
.now-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.now-stat-value {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.1rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin-bottom: var(--space-2);
}

.now-stat-label {
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

.now-stat-label strong {
  color: var(--charcoal);
  font-weight: 600;
}

/* Progress — a clear vertical reading order, no repetition, no card:
   streak (label + value), the momentum line, then the steps bar + caption. */
.now-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.now-progress-streak .now-stat-value {
  margin-bottom: 0;
}

.now-progress-momentum {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--charcoal);
  margin: 0;
}

.now-progress-steps {
  margin-top: var(--space-1);
}

/* Visually-hidden but present in the DOM — keeps exact locked strings for
   assistive tech and tests without visually duplicating a label. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.now-mini-track {
  background: var(--beige);
  height: 6px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-3);
  max-width: 220px;
}

.now-mini-fill {
  background: var(--terracotta);
  height: 100%;
  border-radius: var(--radius-pill);
}

/* --- REFLECTION (side, editorial) --------------------------------------- */
.now-reflect h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  margin-bottom: var(--space-3);
}

.now-reflect p {
  color: var(--text-soft);
  margin-bottom: 0;
}

/* --- IDENTITY (full-width close) ---------------------------------------- */
.now-identity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-8);
  align-items: center;
}

.now-identity-copy .now-kv {
  margin-bottom: var(--space-5);
}

.now-identity-copy .now-kv:last-of-type {
  margin-bottom: var(--space-6);
}

.now-kv-label {
  display: block;
  font-size: var(--font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.now-kv-value {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.15;
}

.now-identity-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.now-wheel-figure {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

.now-vignette {
  display: block;
  width: 150px;
  height: auto;
  pointer-events: none;
  opacity: 0.85;
}

/* ==========================================================================
   NOW — responsive. Mobile is composed intentionally, not merely stacked:
   the landscape is dropped, type tightens, the primary surface leads, and
   Progress becomes a compact three-up row.
   ========================================================================== */

/* Tablet / small desktop: hero and body collapse to single column; the
   landscape moves below the greeting at a reduced height. */
@media (max-width: 960px) {
  .now-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--space-6);
    padding: var(--space-7) 0 var(--space-6);
  }

  .now-hero-copy {
    max-width: none;
  }

  .now-hero-art {
    max-width: 460px;
    margin: 0 auto;
  }

  .now-body {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .now-col-side {
    padding-top: 0;
  }

  .now-identity {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    justify-items: start;
  }
}

/* Phone: a distinct composition. No landscape, tighter hero, primary card
   leads, Progress as a compact three-up row. */
@media (max-width: 600px) {
  /* Tighten the header-to-hero gap so the greeting sits high on the screen. */
  .app-header {
    margin-bottom: var(--space-4);
  }

  .now-hero {
    padding: var(--space-3) 0 var(--space-2);
  }

  .now-hero-art {
    display: none;
  }

  /* Less air between header/eyebrow and greeting. */
  .now-hero .now-label {
    margin-bottom: var(--space-3);
  }

  .now-hero-copy h1 {
    font-size: clamp(2.4rem, 1.8rem + 6vw, 3rem);
  }

  .now-hero-lede {
    max-width: none;
  }

  /* Less space below the CTA so the first focus card appears earlier. */
  .now-hero-cta {
    margin-top: var(--space-5);
  }

  .now-hair {
    margin: var(--space-5) 0;
  }

  .now-focus {
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
  }

  .now-stat-value {
    font-size: 1.6rem;
  }

  .now-mini-track {
    max-width: none;
  }

  .now-vignette {
    display: block;
    margin: var(--space-3) 0 0;
    width: 104px;
  }
}

/* ==========================================================================
   LANDING — the public introduction, in the same Editorial Journal language
   as the authenticated NOW page. Reuses the NOW hero (.now-hero), eyebrow
   (.now-label), hairline (.now-hair) and link/button styles; adds only the
   pieces specific to the landing narrative. Presentation only.
   ========================================================================== */

/* Landing hero — the same spacious editorial hero as NOW, but with a slightly
   tighter top so the header sits closer to the greeting (~12% less gap) and
   the start of "The Method" reaches into the first viewport. Landing-scoped;
   the authenticated NOW hero is unaffected. */
.now-hero--tight {
  padding-top: 54px;
}

/* A more compact hero for the Career Wheel introduction — shortens the
   opening so the reader reaches "Begin" sooner (~28% less vertical space
   than the standard hero), while keeping the eyebrow, title and supporting
   text intact. Wheel-intro-scoped; NOW and Landing heroes are unaffected. */
.now-hero--compact {
  padding: 44px 0;
}

.now-hero--compact .now-hero-copy h1 {
  margin-bottom: var(--space-4);
}

.now-hero--compact .now-hero-cta {
  margin-top: var(--space-6);
}

.lp-intro {
  max-width: 46ch;
  color: var(--text-soft);
}

/* The method — Assess → Focus → Act → Reflect. Lightweight editorial steps,
   no bordered cards; a short terracotta rule tops each one. */
.lp-method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.lp-step {
  padding-top: var(--space-4);
  border-top: 2px solid var(--terracotta-soft);
}

.lp-step-index {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-3);
}

.lp-step h3 {
  margin-bottom: var(--space-2);
}

.lp-step p {
  color: var(--text-soft);
  margin-bottom: 0;
}

/* Supporting "getting started" — deliberately quieter and smaller than the
   method above; it explains the mechanics without competing for attention. */
.lp-supporting {
  max-width: 62ch;
}

.lp-support-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.lp-support-list li {
  color: var(--text-soft);
  padding-left: var(--space-5);
  position: relative;
}

.lp-support-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  opacity: 0.55;
}

.lp-support-list strong {
  color: var(--charcoal);
  font-weight: 600;
}

.lp-note {
  color: var(--text-muted);
  font-size: var(--font-size-small);
  max-width: 60ch;
  margin-bottom: 0;
}

/* Closing call to action — centred, calm, the single clear next step. */
.lp-cta {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-6);
}

.lp-cta-label {
  color: var(--terracotta);
  margin-bottom: var(--space-4);
}

.lp-cta h2 {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem);
  margin-bottom: var(--space-4);
}

.lp-cta p {
  color: var(--text-soft);
  margin-bottom: var(--space-6);
}

.lp-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

@media (max-width: 860px) {
  .lp-method {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6) var(--space-5);
  }
}

@media (max-width: 520px) {
  .lp-method {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ==========================================================================
   CAREER WHEEL — editorial reflection experience (E6.3)
   The questionnaire becomes a calm, one-area-at-a-time diagnosis in the same
   Editorial Journal language as NOW and Landing: narrative before
   interaction, generous whitespace, no cards, a slim terracotta progress
   line, and an anchored, keyboard-accessible rating scale. Presentation only.
   ========================================================================== */

/* A lede used on the Wheel intro hero and the experience lead-in. */
.wheel-hero-lede {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 42ch;
}

.wheel-hero-lede strong {
  color: var(--charcoal);
  font-weight: 600;
}

/* --- The experience: narrative lead-in before the questions --------------- */
.wheel-lead {
  max-width: 44ch;
  margin-bottom: var(--space-6);
}

.wheel-lead .now-label {
  margin-bottom: var(--space-3);
}

.wheel-lead h1 {
  margin-bottom: var(--space-3);
}

.wheel-lead p {
  color: var(--text-soft);
  margin-bottom: var(--space-3);
}

.wheel-error {
  color: var(--danger);
  margin-bottom: var(--space-6);
}

/* --- Progress: a slim, calm terracotta line (one-at-a-time mode only) ----- */
.wheel-progress-head {
  display: none;
  margin-bottom: var(--space-6);
}

.wheel-form.js-steps .wheel-progress-head {
  display: block;
}

.wheel-track {
  height: 5px;
  background: var(--terracotta-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.wheel-track-fill {
  height: 100%;
  width: 0;
  background: var(--terracotta);
  border-radius: var(--radius-pill);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.wheel-progress {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-small);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* --- One reflection area — editorial, no card, generous space ------------- */
/* One-at-a-time paging: only enabled once JS adds `.js-steps`. Without JS,
   every area stays visible and the Wheel is a single accessible page. */
.wheel-form.js-steps .wheel-step {
  display: none;
}

.wheel-form.js-steps .wheel-step.is-active {
  display: block;
}

.wheel-step {
  padding: var(--space-2) 0;
}

.wheel-step-index {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-3);
}

.wheel-q-title {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.wheel-q-text {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 42ch;
  margin-bottom: var(--space-6);
}

/* --- Rating scale — anchored, larger targets, keyboard-friendly ----------- */
.wheel-scale {
  max-width: 540px;
}

.wheel-scale-anchors {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

/* The wheel overrides the base circular scale with a full-width, evenly
   spaced row of larger, rounded targets. Base `.rating-scale` still provides
   the hidden-input + checked-state behaviour. */
.rating-scale.wheel-rating {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--space-2);
  margin-top: 0;
}

.wheel-rating label {
  width: 100%;
}

.wheel-rating span {
  width: 100%;
  height: 52px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  border-color: var(--border);
}

/* --- Navigation controls -------------------------------------------------- */
.wheel-controls {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-8);
}

/* The one-at-a-time paging JS shows/hides these controls via the `hidden`
   attribute (Back/Continue on the first area, Continue on the final area).
   The global `button { display: inline-flex }` rule above is an author style,
   so it overrides the user-agent `[hidden] { display: none }` default and the
   `hidden` attribute stops taking effect — leaving a visible but dead
   "Continue" on the final area (E6.3 regression). This higher-specificity
   rule restores the intended `hidden` behaviour for the wheel controls only. */
.wheel-controls .btn[hidden] {
  display: none;
}

.wheel-hint {
  min-height: 1.2em;
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
  font-size: var(--font-size-small);
}

/* --- Mobile: one-handed, minimal scrolling, calm rhythm ------------------- */
@media (max-width: 600px) {
  .wheel-lead {
    margin-bottom: var(--space-5);
  }

  .wheel-q-title {
    font-size: clamp(1.7rem, 1.4rem + 4vw, 2.2rem);
  }

  .wheel-q-text {
    font-size: 1.05rem;
    margin-bottom: var(--space-6);
  }

  /* Two calm rows of five keep every target ≥44px on a narrow screen. */
  .rating-scale.wheel-rating {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
  }

  .wheel-rating span {
    height: 48px;
  }

  /* Primary action sits at the bottom, within easy thumb reach; Back is a
     quieter full-width secondary above it. */
  .wheel-controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    margin-top: var(--space-7);
  }
}

/* ==========================================================================
   CAREER SNAPSHOT — the editorial payoff of the Career Wheel (E6.4)
   A calm, asymmetric editorial spread: a reveal, the signature wheel
   visualization (inline SVG, no chart dependency), an identity reading, a
   featured-but-non-graded score, and a bridge into the Compass. Presentation
   only, over the payload already provided by the /snapshot route.
   ========================================================================== */

.cs-page {
  max-width: 1080px;
  margin: 0 auto;
}

/* --- 1. Reveal ----------------------------------------------------------- */
.cs-reveal {
  padding-top: var(--space-2);
  max-width: 40ch;
}

.cs-reveal h1 {
  font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem);
  margin-bottom: var(--space-2);
}

.cs-lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: 0;
}

/* Tighten only the reveal → radar transition so the signature visualization
   arrives sooner, without touching the calm rhythm of the later dividers. */
.cs-reveal + .now-hair {
  margin: var(--space-4) 0;
}

/* --- 2 + 4. Read-out: the wheel beside the score/interpretation ---------- */
.cs-readout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}

.cs-wheel-figure {
  margin: 0;
}

.cs-wheel-figure svg {
  display: block;
  width: 100%;
  max-width: 510px;
  height: auto;
  margin: 0 auto;
}

/* The supporting sentence reads as narrative, not a technical SVG caption. */
.cs-wheel-caption {
  margin: var(--space-5) auto 0;
  max-width: 42ch;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-soft);
  text-align: center;
}

/* SVG wheel parts — warm terracotta language, quiet grid, no borders. */
.cs-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.cs-axis { stroke: var(--border); stroke-width: 1; }
.cs-shape { fill: rgba(193, 95, 60, 0.15); stroke: var(--terracotta); stroke-width: 2; stroke-linejoin: round; }
.cs-dot { fill: var(--terracotta); }
.cs-axis-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--text-soft);
}

/* Score — featured as a display numeral, framed so it never reads as a grade. */
.cs-readout-side .now-label {
  margin-bottom: var(--space-3);
}

.cs-score {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.cs-score-unit {
  font-size: 0.32em;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-left: 0.35em;
  font-family: var(--font-sans);
}

.cs-band {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.cs-score-note {
  margin-top: var(--space-3);
  font-size: var(--font-size-small);
  color: var(--text-muted);
  max-width: 34ch;
}

.cs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.cs-fact-label {
  display: block;
  font-size: var(--font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.cs-fact-value {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  line-height: 1.15;
}

/* --- 3. Identity reading ------------------------------------------------- */
.cs-identity {
  max-width: 60ch;
}

.cs-identity h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  margin-bottom: var(--space-4);
}

.cs-identity-narrative {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 0;
}

/* --- 5. Direction -------------------------------------------------------- */
.cs-direction {
  max-width: 60ch;
}

.cs-direction-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.cs-phase {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0;
}

.cs-phase .cs-phase-arrow {
  color: var(--terracotta);
  font-weight: 700;
}

/* --- 6. Next / CTA ------------------------------------------------------- */
.cs-next {
  max-width: 52ch;
}

.cs-next-note {
  color: var(--text-soft);
  margin-bottom: var(--space-8);
}

/* --- Mobile: reveal quickly, wheel legible, easy CTA, not too long ------- */
@media (max-width: 760px) {
  .cs-readout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .cs-wheel-figure svg {
    max-width: 340px;
  }

  .cs-readout-side {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .cs-reveal {
    padding-top: var(--space-3);
  }

  .cs-lede {
    font-size: 1.1rem;
  }

  .cs-facts {
    gap: var(--space-4);
  }
}

/* ==========================================================================
   JOURNEY — the narrative bridge from understanding to action (E6.5)
   A calm editorial spine: pause → one direction → why → progression →
   commitment → CTA, with the rest of the journey kept as quiet supporting
   material below. Minimal cards, soft dividers, generous whitespace.
   Presentation only.
   ========================================================================== */

.jn-page {
  max-width: 820px;
  margin: 0 auto;
}

.jn-flash {
  margin-bottom: var(--space-5);
}

/* --- Step 1 · Pause ------------------------------------------------------ */
.jn-intro {
  padding-top: var(--space-2);
  max-width: 46ch;
}

.jn-intro h1 {
  margin-bottom: var(--space-4);
}

.jn-lede {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: var(--space-4);
}

.jn-intro-note {
  color: var(--text-soft);
  margin-bottom: 0;
}

/* --- Step 2 + 3 · The one direction (emotional centre) ------------------- */
/* A featured editorial block — a restrained terracotta left rule and a faint
   wash, no boxed card, no shadow. */
/* The hero of the page — the one direction. More air, a larger focus name,
   and a quiet lead-in, so the eye naturally stops here. */
.jn-direction {
  border-left: 3px solid var(--terracotta);
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  background: linear-gradient(90deg, var(--terracotta-tint) 0%, rgba(251, 241, 235, 0) 66%);
}

/* Dimension leads — first and strongest, with room to breathe above and
   below. The supporting line now sits beneath it. */
.jn-direction h2 {
  font-size: clamp(2.6rem, 1.9rem + 3vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.jn-direction-kicker {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--text-soft);
  margin-bottom: var(--space-5);
  max-width: 38ch;
}

.jn-direction-reason,
.jn-direction-strategy {
  color: var(--text-soft);
  max-width: 52ch;
}

.jn-actions-label {
  margin-top: var(--space-5);
  font-weight: 600;
  color: var(--charcoal);
}

.jn-actions {
  margin-top: var(--space-3);
}

.jn-progress {
  margin-top: var(--space-5);
  color: var(--text-muted);
}

.jn-progress strong {
  color: var(--charcoal);
}

.jn-change-focus {
  margin-top: var(--space-5);
}

/* --- Step 4 · Progression arc ------------------------------------------- */
.jn-arc-lead {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--charcoal);
  margin-bottom: var(--space-4);
}

.jn-arc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
}

.jn-arc-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-size-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.jn-arc-title {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.jn-arc-sub {
  color: var(--text-soft);
  margin-bottom: 0;
}

.jn-arc-sub strong {
  color: var(--charcoal);
}

.jn-arc-arrow {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--terracotta);
  margin: var(--space-2) 0 var(--space-2) 2px;
}

.jn-arc-next .jn-arc-title {
  color: var(--text-soft);
}

.jn-arc-narrative,
.jn-arc-transition {
  color: var(--text-soft);
  max-width: 56ch;
}

.jn-arc-transition {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--charcoal);
}

.jn-arc-rec {
  color: var(--charcoal);
}

.jn-arc-note {
  color: var(--text-muted);
  font-size: var(--font-size-small);
  max-width: 56ch;
}

/* --- Step 5 · Commitment ------------------------------------------------- */
.jn-commit {
  max-width: 44ch;
}

.jn-commit-line {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin-bottom: var(--space-3);
}

.jn-commit-note {
  color: var(--text-soft);
  margin-bottom: 0;
}

/* --- Step 6 · CTA -------------------------------------------------------- */
.jn-cta {
  margin-top: var(--space-6);
}

/* --- Supporting · quieter than the narrative above ---------------------- */
.jn-more {
  margin-top: 0;
}

.jn-more > .now-label {
  margin-bottom: var(--space-5);
}

.jn-block {
  margin-bottom: var(--space-7);
}

.jn-block:last-child {
  margin-bottom: 0;
}

.jn-block h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-3);
}

.jn-tracks {
  margin-bottom: var(--space-4);
}

.jn-tracks .list-item {
  margin-bottom: var(--space-3);
}

.jn-history {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}

.jn-history li {
  padding: 6px 0;
  color: var(--text-soft);
  border-bottom: 1px solid var(--border-soft);
}

.jn-history li:last-child {
  border-bottom: none;
}

.jn-stand-value {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--charcoal);
}

.jn-ad-progress {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: 0;
}

.jn-track-complete {
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: 3px solid var(--terracotta);
}

@media (max-width: 600px) {
  .jn-direction {
    padding-left: var(--space-5);
  }

  .jn-lede {
    font-size: 1.1rem;
  }
}