/*
  TAMESA — body-copy typesetting study

  Headline typography and authored wording are intentionally untouched. This
  sheet establishes one prose system across Home and Approach: a readable body
  tier, a quieter editorial lead tier, controlled measure, explicit paragraph
  rhythm and consistent alignment against the terminal part of each heading.
*/

:root {
  --copy-body-size: clamp(1rem, .16vw + .965rem, 1.075rem);
  --copy-body-leading: 1.62;
  --copy-body-measure: 58ch;
  --copy-card-measure: 38ch;
  --copy-lead-size: clamp(1.1875rem, .46vw + 1.08rem, 1.4rem);
  --copy-lead-leading: 1.46;
  --copy-lead-measure: 39ch;
  --copy-note-size: clamp(.875rem, .08vw + .855rem, .9375rem);
  --copy-paragraph-gap: .82em;
  --copy-callout-gap: clamp(24px, 2.4vw, 36px);
  --copy-callout-padding: clamp(18px, 1.8vw, 26px);
  --copy-heading-gap: clamp(26px, 3vw, 44px);
  --copy-rail-inset: clamp(18px, 1.8vw, 28px);
  --copy-rule: color-mix(in srgb, currentColor 28%, transparent);
}

body[data-page="home"] main p,
body[data-page="approach"] main p {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  orphans: 3;
  widows: 3;
}

/* The core reading tier. */
.home-decision__support > p:first-child,
.home-path__lead > p:not(:first-child),
.principal-record__bio,
.argument-heading__support > p:not(.takeaway),
.decision-pair article > p,
.route-conditions .route-condition--position > p,
.route-conditions .route-condition--options > p,
.river-threshold__copy > p:last-child,
.duties-interpretation > p,
.seat-record > p:not(.eyebrow),
.continuity-field > header > div:last-child > p,
.continuity-register li > div > p {
  max-width: var(--copy-body-measure);
  margin-block: 0;
  font-family: var(--font-body);
  font-size: var(--copy-body-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--copy-body-leading);
  letter-spacing: 0;
}

.principal-record__bio,
.decision-pair article > p,
.route-conditions .route-condition > p,
.continuity-register li > div > p {
  max-width: var(--copy-card-measure);
}

/* Short supporting propositions are body copy, not substitute headings. */
.opening-position,
.home-path__lead > p:first-child,
.home-choice__support,
.home-route-gate__copy > p,
.home-contact__copy > p:not(.folio),
.route-conditions .route-condition--route > p {
  max-width: var(--copy-lead-measure);
  margin-block: 0;
  font-family: var(--font-body);
  font-size: var(--copy-lead-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--copy-lead-leading);
  letter-spacing: 0;
}

/* Callouts use the editorial face, but retain prose-like leading and measure. */
.home-decision__support > p:last-child,
.argument-heading__support > .takeaway {
  max-width: var(--copy-lead-measure);
  margin-block: 0;
  font-family: var(--font-editorial);
  font-size: var(--copy-lead-size);
  font-style: italic;
  font-weight: 400;
  line-height: var(--copy-lead-leading);
  letter-spacing: 0;
}

/* One deliberate text rail positions support copy against large headings. */
.home-decision__support,
.home-path__lead,
.argument-heading__support,
.continuity-field > header > div:last-child {
  box-sizing: border-box;
  width: min(100%, var(--copy-body-measure));
  max-width: var(--copy-body-measure);
  padding-block-start: 0;
  padding-inline-start: var(--copy-rail-inset);
  border-inline-start: 1px solid var(--copy-rule);
}

.home-choice__support,
.home-route-gate__copy {
  box-sizing: border-box;
  padding-inline-start: var(--copy-rail-inset);
  border-inline-start: 1px solid var(--copy-rule);
}

.opening-position {
  box-sizing: border-box;
  padding-block-start: clamp(17px, 1.8vw, 26px);
  border-block-start: 1px solid var(--copy-rule);
}

/* Within-paragraph leading and between-paragraph spacing remain distinct. */
.home-path__lead > p + p,
.home-contact__copy > p:not(.folio) + p,
.decision-pair article > p + p,
.seat-record > p:not(.eyebrow) + p,
.continuity-field > header > div:last-child > p + p,
.continuity-register li > div > p + p {
  margin-block-start: var(--copy-paragraph-gap);
}

.home-decision__support > p + p:last-child,
.argument-heading__support > p + .takeaway {
  margin-block-start: var(--copy-callout-gap);
  padding-block-start: var(--copy-callout-padding);
  border-block-start: 1px solid var(--copy-rule);
}

/* Body copy that follows a heading inside the same column receives one gap. */
.home-contact__copy > h2 + p {
  margin-block-start: var(--copy-heading-gap);
}

.river-threshold__copy > h2 + p,
.seat-record > h3 + p {
  margin-block-start: 0;
}

/* The paired cards share one typographic datum: body copy starts at the same
   height beneath each label. The Decision card keeps its propositions together
   instead of distributing them across spare vertical space. */
.decision-pair .decision-pair__decision {
  display: block;
}

.decision-pair .decision-pair__decision > p {
  max-width: var(--copy-card-measure);
  margin-block: 0;
  padding-block: 0;
  transform: none;
  font-family: var(--font-body);
  font-size: var(--copy-body-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--copy-body-leading);
  letter-spacing: 0;
}

.decision-pair .decision-pair__decision > p:first-of-type,
.decision-pair .decision-pair__decision > p:last-of-type {
  align-self: auto;
  padding-block: 0;
}

/* Route-card labels and explanations are separate typographic elements, so
   every card receives the same visible paragraph break. */
.route-conditions__topology .route-condition > h3 + p {
  margin-block-start: clamp(18px, 1.4vw, 24px);
  margin-block-end: 0;
}

/* Preserve the sentence in normal reading order at compact widths. On a full
   evidence plate, the final state receives the width its copy requires and a
   deliberate descending two-line shape instead of an accidental short tail. */
.route-options-line + .route-options-line::before {
  content: " ";
}

@media (min-width: 861px) {
  .route-conditions__topology {
    grid-template-columns: minmax(0, 1.05fr) 68px minmax(0, .78fr) minmax(0, .99fr);
  }

  .route-conditions .route-condition--position,
  .route-conditions .route-condition--options {
    padding-inline: 18px;
  }

  .route-conditions .route-condition--options > p {
    max-width: none;
  }

  .route-options-line {
    display: block;
    white-space: nowrap;
  }

  .route-options-line + .route-options-line::before {
    content: none;
  }
}

/* This evidence plate belongs to the inverse executable-reality movement. A
   charcoal ground lets it read as line-work within the field rather than as a
   pale document laid on top of it. */
.executable-field .route-conditions {
  --diagram-bg: #242522;
  --diagram-zone: #2a2b28;
  --diagram-ink: #f6f5ef;
  --diagram-ink-soft: rgba(246, 245, 239, .78);
  --diagram-meta: rgba(246, 245, 239, .68);
  --diagram-mark: #f6f5ef;
  --diagram-line: rgba(246, 245, 239, .22);
  --diagram-line-strong: rgba(246, 245, 239, .52);
  border: 1px solid var(--diagram-line);
  background: var(--diagram-bg);
  color: var(--diagram-ink);
}

.executable-field .route-conditions .route-condition {
  background: var(--diagram-zone);
}

.executable-field .route-conditions .route-condition h3 {
  color: var(--diagram-ink);
}

.executable-field .route-conditions .route-condition > p {
  color: var(--diagram-ink-soft);
}

/* Dark mode keeps the plate inside its native petrol material family. The
   position and options states use the balanced canvas rather than the neutral
   charcoal assigned to the light treatment. */
html[data-theme="dark"] .executable-field .route-conditions {
  --diagram-bg: var(--tc-evidence-background);
  --diagram-zone: var(--tc-dark-canvas);
  --diagram-ink: var(--tc-dark-ink-display);
  --diagram-ink-soft: var(--tc-dark-ink-secondary);
  --diagram-meta: var(--tc-dark-ink-metadata);
  --diagram-mark: var(--tc-evidence-glint);
  --diagram-line: var(--tc-evidence-surface);
  --diagram-line-strong: var(--tc-evidence-surface);
  background: var(--diagram-bg);
}

html[data-theme="dark"] .executable-field .route-conditions .route-condition--route {
  background: var(--tc-evidence-foundation);
}

/* Records are reading objects, so their prose cannot collapse into metadata. */
.principal-record__bio {
  margin-block: 0;
}

.principal-record address {
  margin-block-start: clamp(28px, 2.6vw, 38px);
}

.continuity-register li > div {
  display: flow-root;
}

/* Captions and mobile diagram explanations remain subordinate but readable. */
.evidence-figure figcaption {
  gap: clamp(14px, 2.6vw, 32px);
  font-size: var(--copy-note-size);
  line-height: 1.58;
}

.evidence-figure figcaption > p {
  max-width: 54ch;
  margin: 0;
}

@media (min-width: 861px) {
  .canonical-graph--residual > figcaption {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr);
  }

  .canonical-graph--residual > figcaption > p {
    max-width: none;
  }

  .canonical-graph--residual > figcaption > p:last-child {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }
}

/* The endpoint labels and the two interpretations mirror one another around
   the shared unknown. */
.duties-node--first {
  justify-content: flex-start;
  padding-inline: clamp(24px, 2.4vw, 36px);
  text-align: left;
  white-space: nowrap;
}

.duties-node--second {
  justify-content: flex-end;
  padding-inline: clamp(24px, 2.4vw, 36px);
  text-align: right;
  white-space: nowrap;
}

.unknown-field .duties-interpretation {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(56px, 8vw, 128px);
  width: min(100%, 1180px);
}

.duties-interpretation > p:first-child {
  justify-self: start;
  max-width: 49ch;
  text-align: left;
}

.duties-interpretation > p:last-child {
  justify-self: end;
  max-width: 56ch;
  text-align: right;
}

/* The two themes now have independent river canvases and independent colour
   environments: warm charcoal for the inverted light movement, native petrol
   depth for dark mode. */
.river-threshold {
  background: #242522;
  color: #f6f5ef;
}

html[data-theme="dark"] body[data-page="approach"] .river-threshold {
  background: linear-gradient(
    180deg,
    var(--tc-dark-canvas) 0%,
    var(--tc-dark-depth-field) 27%,
    var(--tc-dark-depth-field) 73%,
    var(--tc-dark-canvas) 100%
  );
  color: var(--tc-dark-ink-display);
}

.river-threshold__copy {
  max-width: 38ch;
}

.river-threshold__copy .eyebrow {
  color: rgba(246, 245, 239, .72);
}

.river-threshold__copy h2 {
  color: #f6f5ef;
  font-family: var(--font-editorial);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

.river-threshold__copy > p:last-child {
  color: rgba(246, 245, 239, .78);
}

html[data-theme="dark"] .river-threshold__copy .eyebrow {
  color: var(--tc-dark-ink-metadata);
}

html[data-theme="dark"] .river-threshold__copy h2 {
  color: var(--tc-dark-ink-display);
}

html[data-theme="dark"] .river-threshold__copy > p:last-child {
  color: var(--tc-dark-ink-secondary);
}

@media (min-width: 1100px) {
  .river-threshold {
    grid-template-columns: minmax(610px, 1.18fr) minmax(0, .82fr);
    gap: clamp(36px, 4vw, 72px);
  }

  .river-threshold__copy {
    max-width: 68ch;
  }

  .river-threshold__copy > p:last-child {
    max-width: none;
    white-space: nowrap;
  }
}

.river-threshold .river-artwork__canvas--light {
  opacity: 1;
  visibility: visible;
}

.river-threshold .river-artwork__canvas--dark {
  opacity: 0;
  visibility: hidden;
}

html[data-theme="dark"] .river-threshold .river-artwork__canvas--light {
  opacity: 0;
  visibility: hidden;
}

html[data-theme="dark"] .river-threshold .river-artwork__canvas--dark {
  opacity: 1;
  visibility: visible;
}

.river-threshold .river-stage::before {
  background: radial-gradient(ellipse, rgba(246, 245, 239, .20) 0%, rgba(246, 245, 239, .07) 46%, transparent 74%);
}

html[data-theme="dark"] body[data-page="approach"] .river-stage::before {
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--tc-evidence-surface) 45%, transparent) 0%,
    color-mix(in srgb, var(--tc-evidence-surface) 14%, transparent) 46%,
    transparent 74%
  );
}

.river-threshold .river-artwork__veil {
  background:
    linear-gradient(90deg, #242522 0 27%, rgba(36, 37, 34, .82) 44%, transparent 72%),
    linear-gradient(180deg, #242522 0%, transparent 22% 74%, #242522 100%);
}

html[data-theme="dark"] body[data-page="approach"] .river-artwork__veil {
  background:
    linear-gradient(90deg, rgba(5, 15, 18, .98) 0 25%, rgba(5, 15, 18, .78) 44%, transparent 72%),
    linear-gradient(180deg, var(--tc-dark-canvas) 0%, rgba(11, 21, 26, .84) 10%, transparent 28% 72%, rgba(11, 21, 26, .84) 90%, var(--tc-dark-canvas) 100%);
}

/* On the charcoal movement, remap the route control semantically: inactive
   states recede into the field and the current state becomes the light marker. */
html:not([data-theme="dark"])[data-route-state="04"] body[data-page="approach"] .route-progress {
  background: rgba(23, 23, 23, .72);
}

html:not([data-theme="dark"])[data-route-state="04"] body[data-page="approach"] .route-progress a {
  border-color: rgba(246, 245, 239, .48);
  background: #242522;
  color: #f6f5ef;
}

html:not([data-theme="dark"])[data-route-state="04"] body[data-page="approach"] .route-progress a:hover {
  border-color: #f6f5ef;
}

html:not([data-theme="dark"])[data-route-state="04"] body[data-page="approach"] .route-progress a[aria-current="step"] {
  border-color: #f6f5ef;
  background: #f6f5ef;
  color: #242522;
}

.canonical-graph > .diagram-mobile li p {
  margin: .55em 0 0;
  font-size: var(--copy-note-size);
  line-height: 1.58;
}

/* Keep the legal close quiet without making it cramped. */
.site-footer__identity > p {
  line-height: 1.45;
  white-space: nowrap;
}

.site-footer {
  padding-block: 10px 12px;
  padding-inline: 0;
}

.site-footer__identity {
  gap: 3px;
}

.site-footer__links {
  gap: 3px;
}

@media (min-width: 861px) {
  /* At wide measures, support copy meets the heading at its terminal line. */
  .opening-position {
    align-self: end;
    margin-block-end: clamp(28px, 5vh, 72px);
  }

  .home-decision__support,
  .home-path__lead,
  .argument-heading__support,
  .continuity-field > header > div:last-child,
  .home-choice__support,
  .home-route-gate__copy {
    align-self: end;
    margin-block-end: clamp(6px, 1vw, 16px);
  }

  .calibration-grid > .seat-record {
    align-self: end;
  }
}

@media (max-width: 860px) {
  :root {
    --copy-rail-inset: 0px;
    --copy-heading-gap: clamp(24px, 6vw, 36px);
  }

  /* A horizontal entry rule replaces the desktop rail in stacked layouts. */
  .home-decision__support,
  .home-path__lead,
  .argument-heading__support,
  .continuity-field > header > div:last-child,
  .home-choice__support,
  .home-route-gate__copy {
    width: min(100%, var(--copy-body-measure));
    max-width: var(--copy-body-measure);
    margin-block: 0;
    padding-block-start: clamp(16px, 4vw, 22px);
    padding-inline-start: 0;
    border-block-start: 1px solid var(--copy-rule);
    border-inline-start: 0;
  }

  .opening-position {
    max-width: 30ch;
    margin-block: 0;
  }

  .caption-break--desktop {
    display: none;
  }

  .river-threshold .river-artwork__veil {
    background: linear-gradient(180deg, #242522 0 18%, rgba(36, 37, 34, .72) 40%, transparent 64%, #242522 100%);
  }

  html[data-theme="dark"] body[data-page="approach"] .river-artwork__veil {
    background: linear-gradient(180deg, var(--tc-dark-canvas) 0 16%, rgba(11, 21, 26, .76) 39%, transparent 61%, var(--tc-dark-canvas) 100%);
  }
}

@media (max-width: 1099px) {
  .river-copy-break {
    display: none;
  }
}

@media (max-width: 760px) {
  .duties-node--first,
  .duties-node--second {
    justify-content: center;
    padding-inline: 18px;
    text-align: center;
    white-space: normal;
  }

  .unknown-field .duties-interpretation {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    width: 100%;
  }

  .duties-interpretation > p:first-child,
  .duties-interpretation > p:last-child {
    justify-self: start;
    max-width: var(--copy-body-measure);
    text-align: left;
  }
}

@media (max-width: 720px) {
  .site-footer__identity > p {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Shared section datum and authored prototype lineation

   The opening and closing movements already establish the page datum.
   Intermediate headings now resolve to that same edge instead of inheriting a second,
   centred max-width. The five blueprint propositions use explicit line units,
   so their architecture is stable across theme palettes and font loading.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) {
  body[data-page="home"],
  body[data-page="approach"] {
    --section-datum: clamp(24px, 7vw, 120px);
  }

  body[data-page="home"] :is(
    .home-opening,
    .home-decision,
    .home-path,
    .home-choice,
    .home-route-gate,
    .home-contact
  ),
  body[data-page="approach"] :is(
    .approach-opening,
    .argument-movement,
    .analysis-field,
    .executable-field,
    .unknown-field,
    .calibration-field,
    .continuity-field,
    .approach-close
  ) {
    padding-inline: var(--section-datum);
  }

  body[data-page="home"] :is(
    .home-decision__copy,
    .home-path__intro,
    .home-choice__head,
    .home-route-gate__inner
  ),
  body[data-page="approach"] :is(
    .argument-heading,
    .calibration-grid
  ),
  body[data-page="approach"] .continuity-field > header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  body[data-page="approach"] .river-threshold {
    margin-inline: calc(-1 * var(--section-datum));
  }

  .blueprint-heading {
    max-width: none !important;
  }
}

.blueprint-heading {
  width: auto;
}

.blueprint-heading__line {
  display: block;
}

@media (min-width: 861px) {
  .blueprint-heading__line {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  :root {
    --copy-body-size: 1rem;
    --copy-body-leading: 1.64;
    --copy-body-measure: 100%;
    --copy-card-measure: 100%;
    --copy-lead-size: 1.1875rem;
    --copy-lead-leading: 1.5;
    --copy-lead-measure: 32ch;
    --copy-note-size: .875rem;
    --copy-paragraph-gap: .88em;
  }

  .principal-record__bio,
  .decision-pair article > p,
  .route-conditions .route-condition > p,
  .continuity-register li > div > p {
    max-width: 100%;
  }

  .evidence-figure figcaption {
    gap: 9px;
  }

  .site-footer {
    padding-block: 14px 16px;
    padding-inline: 0;
  }
}

/* The composer has a fixed, generous working height and remains vertically
   scrollable. Removing the native resize grip prevents it from colliding with
   the Send control without reducing access to longer questions. */
.ask-panel .ask-form textarea {
  overflow-y: auto;
  resize: none;
}

/* Approach uses diagonal geometry only when the state of the argument changes:
   a shallow entry into analysis, a decisive cut into executable reality, then
   an opposing, quieter release from the river into the duties section. The
   intervening analytical fields remain rectilinear. */
@media (min-width: 861px) {
  body[data-page="approach"] .analysis-field,
  body[data-page="approach"] .executable-field,
  body[data-page="approach"] .unknown-field {
    position: relative;
    isolation: isolate;
  }

  body[data-page="approach"] .analysis-field {
    background: var(--page-muted);
  }

  body[data-page="approach"] .analysis-field::before,
  body[data-page="approach"] .executable-field::before,
  body[data-page="approach"] .unknown-field::before {
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    pointer-events: none;
    content: "";
  }

  body[data-page="approach"] .analysis-field::before {
    height: clamp(26px, 2.5vw, 42px);
    background: var(--page);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  body[data-page="approach"] .executable-field::before {
    height: clamp(68px, 6vw, 96px);
    background: var(--page-muted);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  body[data-page="approach"] .unknown-field::before {
    height: clamp(28px, 2.8vw, 46px);
    background: #242522;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }

  html[data-theme="dark"] body[data-page="approach"] .unknown-field::before {
    display: none;
  }

  body[data-page="approach"] .analysis-field > *,
  body[data-page="approach"] .executable-field > *,
  body[data-page="approach"] .unknown-field > * {
    position: relative;
    z-index: 1;
  }
}

/* The shared unknown is raised by value, not hue: a neutral graphite keeps
   the central condition legible without introducing another dark-theme colour. */
html[data-theme="dark"] .shared-unknown {
  background: var(--tc-dark-neutral-raised);
}

/* Match the live site's terminal-depth sequence. The final movement fades
   into the depth field and the footer continues that colour without a hard
   horizontal seam. */
html[data-theme="dark"] body {
  --tc-closing-depth-fade: clamp(280px, 30vw, 480px);
}

html[data-theme="dark"] .home-contact,
html[data-theme="dark"] .approach-close {
  background: linear-gradient(
    to bottom,
    var(--tc-dark-canvas) 0%,
    var(--tc-dark-canvas) 10%,
    var(--tc-dark-depth-field) 78%,
    var(--tc-dark-depth-field) 100%
  );
}

html[data-theme="dark"] body[data-page="approach"] .approach-close::before,
html[data-theme="dark"] body[data-page="home"] .home-route-gate::after {
  background: linear-gradient(to bottom, transparent 0%, var(--tc-dark-canvas) 100%);
}

html[data-theme="dark"] .site-footer {
  background: var(--tc-dark-depth-field);
  border-top-color: transparent;
}

/* --------------------------------------------------------------------------
   Palette refinement studies

   The complete recommendation is the default. `palette=baseline`, `body`,
   `rules` and `river` expose controlled comparisons without changing content,
   geometry or spacing. Theme changes remain semantic token remaps: no colour
   is calculated by inversion.
   -------------------------------------------------------------------------- */

/* Long-form light copy moves from optical black to the existing route
   charcoal. Display headings continue to use #171717. Inverse movements keep
   their own explicitly mapped copy colours. */
html:not([data-theme="dark"]):is(
  [data-palette-study="body"],
  [data-palette-study="recommended"]
) body:is([data-page="home"], [data-page="approach"]) :is(
  .home-decision__support > p:first-child,
  .principal-record__bio,
  .argument-heading__support > p:not(.takeaway),
  .decision-pair article > p,
  .duties-interpretation > p,
  .seat-record > p:not(.eyebrow),
  .continuity-field > header > div:last-child > p,
  .continuity-register li > div > p
) {
  color: var(--tc-palette-light-body);
}

/* Dark copy stays on the softer stone tier; display and metadata retain their
   independent near-white and muted-grey roles. */
html[data-theme="dark"] body:is([data-page="home"], [data-page="approach"]) :is(
  .home-decision__support > p:first-child,
  .home-path__lead > p:not(:first-child),
  .principal-record__bio,
  .argument-heading__support > p:not(.takeaway),
  .decision-pair article > p,
  .route-conditions .route-condition > p,
  .river-threshold__copy > p:last-child,
  .duties-interpretation > p,
  .seat-record > p:not(.eyebrow),
  .continuity-field > header > div:last-child > p,
  .continuity-register li > div > p
) {
  color: var(--tc-dark-ink-secondary);
}

/* Passive frames recede; connectors, arrows, route strokes and commitment
   marks continue to consume the full-strength functional line tokens. */
html:not([data-theme="dark"]):is(
  [data-palette-study="rules"],
  [data-palette-study="recommended"]
) {
  --tc-color-evidence-line: var(--tc-color-evidence-line-passive);
}

html[data-theme="dark"]:is(
  [data-palette-study="rules"],
  [data-palette-study="recommended"]
) {
  --tc-color-evidence-line: var(--tc-color-evidence-line-passive);
}

html:not([data-theme="dark"]):is(
  [data-palette-study="rules"],
  [data-palette-study="recommended"]
) .executable-field .route-conditions {
  --diagram-line: rgba(246, 245, 239, .15);
}

html[data-theme="dark"]:is(
  [data-palette-study="rules"],
  [data-palette-study="recommended"]
) .executable-field .route-conditions {
  --diagram-line: var(--tc-evidence-line-passive);
  --diagram-line-strong: var(--tc-evidence-surface);
}

html[data-theme="dark"]:is(
  [data-palette-study="rules"],
  [data-palette-study="recommended"]
) .canonical-graph {
  --tc-canonical-graph-boundary: rgba(193, 196, 200, .40);
}

html[data-theme="dark"]:is(
  [data-palette-study="rules"],
  [data-palette-study="recommended"]
) :is(
  .route-conditions .route-condition,
  .duties-node,
  .shared-unknown
) {
  border-color: var(--tc-evidence-line-passive);
}

/* The refined dark river keeps static atmosphere close to petrol-black; teal
   is carried chiefly by the animated surface rather than by a broad glow. */
html[data-theme="dark"]:is(
  [data-palette-study="river"],
  [data-palette-study="recommended"]
) body[data-page="approach"] .river-stage::before {
  background: radial-gradient(
    ellipse,
    color-mix(in srgb, var(--tc-evidence-surface) 22%, transparent) 0%,
    color-mix(in srgb, var(--tc-evidence-surface) 5%, transparent) 46%,
    transparent 74%
  );
}

/* Interaction states are deliberately independent of passive framing. Rest,
   hover/pressed, keyboard focus and disabled states each consume semantic
   theme roles rather than inherited or inverted colours. */
.primary-nav a:active {
  color: var(--tc-interaction-ink-active);
}

.ask-panel :is(
  .ask-new-conversation,
  .suggested-questions button,
  .ask-note__action,
  .ask-retry-action
):is(:hover, :focus-visible, :active) {
  color: var(--tc-interaction-ink-active);
}

.ask-panel :is(.ask-close, .ask-submit):is(:hover, :active) {
  border-color: var(--tc-interaction-surface-active);
  background: var(--tc-interaction-surface-active);
  color: var(--tc-interaction-ink-on-active);
}

html[data-theme] .ask-panel :is(button, textarea):disabled {
  cursor: not-allowed;
  opacity: 1;
  border-color: var(--tc-interaction-disabled-line);
  background: var(--tc-interaction-disabled-surface);
  color: var(--tc-interaction-disabled-ink);
}

html[data-theme] .ask-panel :is(button, textarea):disabled::placeholder {
  color: var(--tc-interaction-disabled-ink);
}

/* --------------------------------------------------------------------------
   Final compositional refinements

   Equal terminal cells restore the route plate's symmetry; the short
   calibration chapter occupies a complete reading field; section 05 returns
   to the native petrol family; and the footer closes in two legal rows.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .route-conditions__topology {
    grid-template-columns: minmax(0, 1.05fr) 68px repeat(2, minmax(0, .885fr));
  }

  .route-conditions .route-condition--position,
  .route-conditions .route-condition--options {
    padding-inline: 18px;
  }

  .route-conditions .route-condition--position > p,
  .route-conditions .route-condition--options > p {
    max-width: 28ch;
    overflow-wrap: normal;
    text-wrap: pretty;
  }
}

@media (min-width: 861px) {
  body[data-page="approach"] .calibration-field {
    box-sizing: border-box;
    display: grid;
    min-height: 100svh;
    align-items: center;
    padding-block: clamp(150px, 16vh, 220px);
  }

  body[data-page="approach"] .continuity-field {
    padding-block: clamp(160px, 15vh, 220px);
  }
}

html[data-theme="dark"] .shared-unknown {
  background: var(--tc-palette-petrol-section-05);
}

.site-footer__identity {
  gap: 2px;
}

.site-footer .site-footer__company-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: clamp(8px, .8vw, 14px);
}

.site-footer__company-line strong,
.site-footer__company-line span {
  flex: 0 0 auto;
}

@media (min-width: 721px) {
  .site-footer .site-footer__company-line {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Blueprint heading measures

   Candidate A's section propositions are vertical compositional armatures,
   not full-track banners. Restore the prototype's authored character measures
   after the later grid-safety rule that flattened them to max-width: 100%.
   -------------------------------------------------------------------------- */

@media (min-width: 721px) {
  :is(
    .home-decision h2,
    .home-path h2,
    .home-route-gate h2,
    .home-contact h2
  ) {
    width: auto;
    max-width: 9ch;
  }

  .home-choice__head h2 {
    width: auto;
    max-width: 10ch;
  }

  .argument-heading h2 {
    width: auto;
    max-width: 10.6ch;
  }

  .continuity-field > header h2 {
    width: auto;
    max-width: 9.4ch;
  }

  .approach-close h2 {
    width: auto;
    max-width: 9ch;
  }
}

@media (max-width: 720px) {
  :is(
    .home-decision h2,
    .home-path h2,
    .home-choice h2,
    .home-route-gate h2,
    .home-contact h2,
    .argument-heading h2,
    .calibration-grid h2,
    .continuity-field h2,
    .approach-close h2
  ) {
    width: auto;
    max-width: 8.4ch;
  }
}