/* ===================================================================
   Ready to Stand Behind — outer experience
   Civic Clarity. Tokens come from tokens.css and are never redefined.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: var(--ui); font-size: 16px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.sprite { display: none; }
:root { --reading-max: 1100px; }   /* narrower reading column; --shell-max stays at the approved 1440px */
.shell   { max-width: var(--shell-max);   margin: 0 auto; padding-inline: var(--s5); }
.reading { max-width: var(--reading-max); margin: 0 auto; padding-inline: var(--s5); }
.muted { color: var(--muted-ink); }
.note  { color: var(--muted-ink); font-size: 15px; }
.lede  { font-size: 17px; max-width: 68ch; }
.h-sub { font-size: 17px; font-weight: 500; color: var(--transit-navy); margin: 0 0 var(--s2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s4); top: -60px; z-index: 30;
  background: var(--transit-navy); color: #fff;
  padding: var(--s3) var(--s4); border-radius: var(--r-control); text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

/* ---------------- header ---------------------------------------- */
.app-header { background: var(--paper); border-top: 3px solid var(--transit-navy); }
.app-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-block: var(--s4);
}
.identity { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.identity__mark { flex-shrink: 0; }
.identity__sub { margin: var(--s1) 0 0; font-size: 18px; font-weight: 500; color: var(--transit-navy); }
.eyebrow {
  margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--evidence-teal);
}
.vantage { flex-shrink: 0; text-align: right; border-left: 1px solid var(--border); padding-left: var(--s5); }
.vantage__value { margin: var(--s1) 0 0; font-weight: 500; }

.route-rule { position: relative; height: 2px; background: var(--transit-navy); }
.route-rule__node {
  position: absolute; left: var(--s7); top: -9px; width: 20px; height: 20px;
  color: var(--evidence-teal); background: var(--canvas); padding: 0 2px;
}

/* ---------------- stage progress -------------------------------- */
.progress { background: var(--paper); border-bottom: 1px solid var(--border); }
.progress__list {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  list-style: none; margin: 0; padding-block: var(--s2);
}
.progress__item { flex: 1 1 0; min-width: 132px; }
.progress__btn {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; min-height: var(--target); padding: var(--s2) var(--s3);
  font: inherit; text-align: left; cursor: pointer;
  color: var(--muted-ink); background: transparent;
  border: 0; border-top: 3px solid transparent; border-radius: var(--r-control);
}
.progress__btn:hover { color: var(--transit-navy); background: #F4F6F6; }
.progress__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: #EBEEEE; color: var(--transit-navy); font-size: 13px; font-weight: 500;
}
.progress__name { font-size: 15px; }
.progress__btn[aria-current="step"] {
  color: var(--transit-navy); font-weight: 500; border-top-color: var(--evidence-teal);
}
.progress__btn[aria-current="step"] .progress__num { background: var(--evidence-teal); color: #fff; }
/* Completion is a real DOM element carrying an icon and the text
   equivalent "Completed". No generated content, no colour dependence. */
.progress__done { display: inline-flex; align-items: center; margin-left: auto; }
.progress__done-icon { width: 16px; height: 16px; color: var(--supported); }
.progress__btn.is-done .progress__num { background: #DCE8E3; }

/* ---------------- stages ---------------------------------------- */
.stage { padding-block: var(--s6) var(--s7); }
.stage__heading { font-size: 28px; font-weight: 500; color: var(--transit-navy); margin: var(--s2) 0 var(--s4); }

.stage--entry { max-width: 820px; padding-block: var(--s7); }
.entry__title { font-size: 40px; font-weight: 600; color: var(--transit-navy); margin: var(--s2) 0 var(--s2); line-height: 1.1; }
.entry__sub { font-size: 19px; color: var(--muted-ink); margin: 0 0 var(--s6); }
.premise {
  background: var(--paper); border: 1px solid var(--border);
  border-left: 4px solid var(--evidence-teal); border-radius: var(--r-panel);
  padding: var(--s5); margin-bottom: var(--s6);
}
.premise__text { font-family: var(--serif); font-size: 22px; line-height: 1.35; margin: var(--s2) 0 0; }
.entry__cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s6); margin-bottom: var(--s6); }
.verbs { list-style: none; margin: 0; padding: 0; }
.verb { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }
.verb:last-child { border-bottom: 0; }
.verb b { color: var(--transit-navy); }

/* ---------------- panels ---------------------------------------- */
.panel {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-panel); box-shadow: var(--shadow);
  padding: var(--s5); margin-bottom: var(--s5);
}
.panel--objective { border-left: 4px solid var(--evidence-teal); margin-top: var(--s5); }
.panel--objective p { margin: var(--s2) 0 0; }

.need__cols { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: var(--s5); align-items: start; }
.constraints { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.constraint { padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.constraint:last-child { border-bottom: 0; }
.constraint__text { display: block; }

/* ---------------- trace ----------------------------------------- */
.trace-link {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: var(--target); padding: var(--s1) 0;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  color: var(--evidence-teal); background: none; border: 0;
}
.trace-link:hover { text-decoration: underline; }
.trace-link .icon { width: 14px; height: 14px; transition: transform 160ms ease; }
.trace-link[aria-expanded="true"] .icon { transform: rotate(90deg); }
.trace-record, .trace-list {
  margin: var(--s2) 0 0; padding: var(--s3) var(--s4);
  background: var(--canvas); border-radius: var(--r-control);
  border-left: 3px solid var(--evidence-teal); font-size: 15px;
}
.trace-list { list-style: none; }
.trace-list li { padding: var(--s1) 0; }
.trace-wrap { margin-top: var(--s4); }

.trace-target {
  display: inline-block; width: 100%; text-align: left;
  min-height: var(--target); padding: var(--s2) var(--s3);
  font: inherit; font-family: var(--ui); font-size: 15px; cursor: pointer;
  color: var(--transit-navy); background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--r-control);
}
.trace-target:hover { border-color: var(--evidence-teal); background: #F4F8F8; }

/* ---------------- prototype frame · voice boundary -------------- */
.proto-frame {
  border: 2px solid var(--transit-navy); border-radius: var(--r-panel);
  overflow: hidden; margin: var(--s5) 0; background: var(--paper);
}
.proto-frame__chrome {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5); background: var(--transit-navy); color: #fff;
}
.proto-frame__mode {
  margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: #A9C3CC;
}
.proto-frame__title { margin: var(--s1) 0 0; font-size: 20px; font-weight: 500; }
.proto-frame__place { margin: 0; font-size: 14px; color: #A9C3CC; white-space: nowrap; }
.proto-frame__body { padding: var(--s5); }
.proto-sign {
  margin: var(--s4) 0; padding: var(--s3) var(--s4);
  background: var(--transit-navy); color: #fff; border-radius: var(--r-control); font-size: 15px;
}



/* ---------------- provenance table ------------------------------ */
.table-wrap { overflow-x: auto; margin-top: var(--s4); }
.prov-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.prov-table th, .prov-table td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
.prov-table thead th { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-ink); font-weight: 500; }
.prov-table tbody th { font-weight: 500; }

/* ---------------- findings -------------------------------------- */
.findings { display: grid; gap: var(--s4); margin-block: var(--s5); }
.finding {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-panel); box-shadow: var(--shadow); padding: var(--s5);
}
.finding__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.finding__title { font-size: 19px; font-weight: 500; margin: var(--s2) 0 var(--s2); }
.finding__summary { margin: 0 0 var(--s3); }
.finding__owner { display: flex; gap: var(--s3); align-items: baseline; margin: 0 0 var(--s4); font-size: 15px; }
.finding__detail { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); }

.fields { margin: 0; }
.fields__row { display: grid; grid-template-columns: minmax(0,30%) minmax(0,70%); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.fields__row:last-child { border-bottom: 0; }
.fields dd { margin: 0; }

.status { display: inline-flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 500; }
.status .icon { width: 16px; height: 16px; flex-shrink: 0; }
.status--supported { color: var(--supported); }
.status--revision { color: var(--needs-review); }
.status--unresolved { color: var(--unresolved); }
.status--awaiting { color: var(--transit-navy); }
.status--disclosed { color: var(--needs-review); }

/* ---------------- comparison ------------------------------------ */
.comparison { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--shadow); padding: var(--s5); margin-block: var(--s5); }
.comparison__title { font-size: 21px; font-weight: 500; color: var(--transit-navy); margin: var(--s1) 0 var(--s4); }

.switcher { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--s4); background: #EBEEEE; border-radius: var(--r-control); }
.switcher__btn {
  display: flex; flex-direction: column; gap: 2px;
  min-height: var(--target); padding: var(--s2) var(--s4);
  font: inherit; text-align: left; cursor: pointer;
  background: var(--paper); color: var(--muted-ink);
  border: 1px solid var(--border); border-radius: var(--r-control);
}
.switcher__btn:hover { border-color: var(--muted-ink); color: var(--transit-navy); }
.switcher__name { font-weight: 500; }
.switcher__cap { font-size: 13px; }
.switcher__btn[aria-pressed="true"] { background: var(--transit-navy); border-color: var(--transit-navy); color: #fff; }
.switcher__btn[aria-pressed="true"] .switcher__cap { color: #A9C3CC; }
/* state carried by more than colour */
.switcher__btn[aria-pressed="true"] .switcher__name::before { content: "\2713\00a0"; }

.decision { margin-top: var(--s5); padding-left: var(--s4); border-left: 4px solid var(--transit-navy); }
.decision p { margin: 0 0 var(--s3); }
.decision .label { margin-bottom: var(--s1); }

.change { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--border); }
.change__rows { margin: var(--s3) 0 0; }
.change__row { display: grid; grid-template-columns: minmax(0,26%) minmax(0,74%); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--border); }
.change__row:last-child { border-bottom: 0; }
.change__row dt { color: var(--muted-ink); }
.change__row dd { margin: 0; }

/* ---------------- recommendation · client artifact -------------- */
.recommendation {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-document); padding: var(--s6); margin-block: var(--s5);
  font-family: var(--serif);
}
.recommendation .label, .recommendation .btn, .recommendation .trace-link { font-family: var(--ui); }
.rec__identity { list-style: none; margin: 0 0 var(--s5); padding: 0 0 var(--s4); border-bottom: 2px solid var(--transit-navy); }
.rec__identity li { font-size: 15px; color: var(--muted-ink); font-family: var(--ui); }
.rec__headline { margin-bottom: var(--s6); }
.rec__text { font-size: 20px; line-height: 1.45; margin: var(--s2) 0 0; }
.rec__sections { margin: 0; padding-left: var(--s5); }
.rec__section { padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.rec__section:last-child { border-bottom: 0; }
.rec__section-title { font-size: 17px; font-weight: 600; color: var(--transit-navy); margin: 0 0 var(--s2); }
.rec__section p { margin: 0 0 var(--s2); }

/* ---------------- buttons --------------------------------------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.btn {
  font: inherit; font-weight: 500; cursor: pointer;
  min-height: var(--target); padding: var(--s3) var(--s5);
  border: 1px solid var(--transit-navy); border-radius: var(--r-control);
  background: var(--paper); color: var(--transit-navy);
}
.btn:hover:not(:disabled) { background: #E7EDED; }
.btn--primary { background: var(--transit-navy); color: #fff; }
.btn--primary:hover:not(:disabled) { background: #102C3B; }
.btn--quiet { border-color: var(--border); color: var(--muted-ink); padding-inline: var(--s4); }
.btn--quiet:hover { color: var(--transit-navy); border-color: var(--muted-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- footer ---------------------------------------- */
.app-footer {
  border-top: 1px solid var(--border); background: var(--paper);
  padding-block: var(--s5) var(--s6); margin-top: var(--s6); font-size: 14px;
}
.app-footer p { margin: 0 0 var(--s1); }

.credit { font-size: 14px; color: var(--muted-ink); margin: var(--s5) 0 0; }
.closing-panel {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.print-only { display: none; }

/* ===================================================================
   RESPONSIVE — approved breakpoints
   =================================================================== */
@media (max-width: 1279px) { .shell, .reading { padding-inline: var(--s4); } }

/* 600-959px — compact indicator. Items wrap to two rows; every stage
   stays reachable and nothing scrolls horizontally. */
@media (max-width: 959px) {
  .progress__item { flex: 1 1 44%; min-width: 0; }
  .progress__name { font-size: 14px; }
  .need__cols, .entry__cols { grid-template-columns: minmax(0,1fr); }
  .app-header__inner { flex-wrap: wrap; gap: var(--s3); }
  .vantage { border-left: 0; padding-left: 0; text-align: left; }
  .route-rule__node { left: var(--s5); }
}

@media (max-width: 599px) {
  .shell, .reading { padding-inline: var(--s3); }
  .entry__title { font-size: 30px; }
  .premise__text { font-size: 18px; }
  .stage__heading { font-size: 23px; }
  .panel, .finding, .comparison { padding: var(--s4); }
  .recommendation { padding: var(--s4); }
  .fields__row, .change__row { grid-template-columns: minmax(0,1fr); gap: var(--s1); }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  /* 320-599px — vertical treatment. One stage per row, no scrolling. */
  .progress__list { flex-direction: column; gap: var(--s1); }
  .progress__item { flex: 1 1 auto; min-width: 0; width: 100%; }
  .progress__btn { border-top: 0; border-left: 3px solid transparent; }
  .progress__btn[aria-current="step"] { border-left-color: var(--evidence-teal); }
  .rec__sections { padding-left: var(--s4); }
  .switcher { flex-direction: column; align-items: stretch; }
}

input, select, textarea { font-size: 16px; }

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

@media print {
  .progress, .app-header, .skip-link, .actions, .trace-link,
  .trace-target, .app-footer, .closing-panel { display: none !important; }
  body { background: #fff; }
  .stage[hidden] { display: none !important; }
  .recommendation { border: 0; padding: 0; box-shadow: none; }
  .print-only { display: block !important; }
  .print-note   { font-size: 12px; color: #5C6E74; margin-top: 24px; }
  .print-footer { font-size: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #CED8D7; }
}