/* The Consistency Test.
 *
 * Inherits the site's tokens for everything that already exists — paper, ink,
 * rules, the serif and sans faces. Adds exactly two: a monospace utility face
 * for the parts of this page that are record-keeping rather than prose, and a
 * single tension colour used nowhere except a live conflict.
 *
 * The metaphor is a legal record, not a quiz. Hairline rules appear between
 * ledger entries, where they are functionally true, and nowhere else.
 *
 * Motion: 120 / 200 / 300 / 600ms on cubic-bezier(0.2, 0, 0, 1), every
 * animation wrapped in prefers-reduced-motion: no-preference.
 */

:root {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Reserved for tension state. Deep oxblood: it reads as a legal marking
     rather than an error, which --alert (used for unverified claims across the
     legislation pages) does not. */
  --tension: #6b2733;
  --tension-soft: #b08a90;
  --tension-wash: #f6eeea;
  --ct-ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  --tension: #c98b95;
  --tension-soft: #7a4952;
  --tension-wash: #241a1a;
}

/* ---------- Layout ---------- */

.ct-progress {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 2px;
  background: var(--rule-soft);
}
.ct-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink-mute);
}
@media (prefers-reduced-motion: no-preference) {
  .ct-progress-fill { transition: width 300ms var(--ct-ease); }
}

/* Longhand on purpose: the shorthand would reset .shell's horizontal padding
   and put the text flush against the edge of a narrow screen. */
.ct-shell { padding-top: 48px; padding-bottom: 96px; }

@media (min-width: 1024px) {
  .ct-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 56px;
    align-items: start;
  }
  .ct-col-ledger { position: sticky; top: 40px; }
}

.ct-col-main { min-width: 0; }

/* ---------- Shared type ---------- */

.ct-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 14px;
}
.ct-eyebrow-tension { color: var(--tension); }
.ct-eyebrow-note {
  color: var(--ink-mute);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12px;
}

.ct-qnum {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-fade);
  margin: 0 0 10px;
}

.ct-q {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.28;
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 34rem;
  margin: 0 0 12px;
  color: var(--ink);
}
.ct-q:focus { outline: none; }
.ct-q:focus-visible { outline: 2px solid var(--navy); outline-offset: 6px; }

.ct-help {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 32rem;
  margin: 0 0 28px;
}

/* ---------- Intro ---------- */

.ct-intro { max-width: 44rem; }
.ct-title {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.ct-rule { height: 1px; background: transparent; margin: 0 0 28px; }
.ct-rule span { display: block; height: 1px; background: var(--rule); width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .ct-rule span { width: 0; animation: ct-draw 600ms var(--ct-ease) 120ms forwards; }
  @keyframes ct-draw { to { width: 100%; } }
}

.ct-lede p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 28px;
}

.ct-expectations { list-style: none; padding: 0; margin: 0 0 36px; }
.ct-expectations li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
}
.ct-expectations li:last-child { border-bottom: 1px solid var(--rule-soft); }
.ct-ex-k {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin-bottom: 4px;
}

.ct-begin {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 13px 34px;
  cursor: pointer;
}
.ct-begin:hover { background: var(--ink-2); }

.ct-nojs-note {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-mute);
  margin: 24px 0 0;
}
.ct-js .ct-nojs-note { display: none; }
.ct-js-only { display: none; }
.ct-js .ct-js-only { display: block; }

/* ---------- Question card ---------- */

.ct-card { max-width: 36rem; }

.ct-options { display: grid; gap: 10px; margin: 0 0 32px; }
@media (min-width: 560px) {
  .ct-options { grid-auto-flow: column; grid-auto-columns: 1fr; }
}

/* Three equal buttons. "Not sure" carries the same weight as the other two —
   it is a first-class answer, and greying it out would be a thumb on the
   scale as surely as pre-selecting one would be. */
.ct-opt {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 15px 18px;
  cursor: pointer;
  text-align: center;
}
.ct-opt:hover { border-color: var(--ink-mute); }
.ct-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ct-opt.is-chosen { background: var(--paper-3); border-color: var(--ink-mute); }
@media (prefers-reduced-motion: no-preference) {
  .ct-opt { transition: border-color 120ms var(--ct-ease), background-color 120ms var(--ct-ease), opacity 120ms var(--ct-ease); }
  .ct-options.is-resolved .ct-opt { opacity: 0.4; }
  .ct-options.is-resolved .ct-opt.is-chosen { opacity: 1; }
}

.ct-nav { margin-top: 8px; }
.ct-back, .ct-continue {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 4px 0;
  cursor: pointer;
}
.ct-back:hover, .ct-continue:hover { color: var(--ink); border-color: var(--ink-mute); }
.ct-continue {
  border: 1px solid var(--rule);
  padding: 11px 26px;
  font-size: 14px;
  color: var(--ink);
}

/* Card transitions. Out to the left, in from the right. */
@media (prefers-reduced-motion: no-preference) {
  .ct-card, .ct-tension, .ct-results {
    transition: opacity 200ms var(--ct-ease), transform 200ms var(--ct-ease);
  }
  .ct-card.is-entering, .ct-tension.is-entering, .ct-results.is-entering {
    opacity: 0; transform: translateX(24px);
  }
  .ct-card.is-leaving, .ct-tension.is-leaving, .ct-results.is-leaving {
    opacity: 0; transform: translateX(-24px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ct-card, .ct-tension, .ct-results { transition: opacity 100ms linear; }
  .ct-card.is-entering, .ct-tension.is-entering, .ct-results.is-entering { opacity: 0; }
  .ct-card.is-leaving, .ct-tension.is-leaving, .ct-results.is-leaving { opacity: 0; }
}

/* ---------- The ledger ---------- */

.ct-ledger-head h2 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-fade);
  font-weight: 400;
  margin: 0 0 6px;
}
.ct-ledger-head p {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-fade);
  margin: 0 0 14px;
}

.ct-ledger-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ct-ledger-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-fade);
  padding: 14px 0;
  margin: 0;
}

/* Hairline rules between entries: in a ledger those are functionally true. */
.ct-le {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: baseline;
  padding: 11px 0 11px 10px;
  border-bottom: 1px solid var(--rule-soft);
  border-left: 2px solid transparent;
  position: relative;
}

.ct-le-q {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-fade);
}
.ct-le-body { min-width: 0; }
.ct-le-text {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
/* `display` on these would otherwise beat the `hidden` attribute, and an empty
   struck-through span draws a stray rule above every unrevised entry. */
.ct-le-old[hidden], .ct-le-rev[hidden], .ct-hatch-body[hidden] { display: none; }

.ct-le-old {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-fade);
  position: relative;
  margin-bottom: 2px;
}
/* The strikethrough is drawn rather than applied, so the revision reads as
   something that happened at a moment rather than a state it was always in. */
.ct-le-old::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  height: 1px;
  width: 100%;
  background: var(--ink-fade);
}
.ct-le-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  white-space: nowrap;
}
.ct-le[data-state="denied"] .ct-le-pill { border-style: dashed; }
.ct-le-rev {
  grid-column: 2 / -1;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tension);
}
.ct-le-revisit {
  grid-column: 2 / -1;
  justify-self: start;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-fade);
  padding: 1px 0;
  cursor: pointer;
}
.ct-le-revisit:hover { color: var(--ink); border-color: var(--ink-mute); }
.ct-le-revisit:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body.ct-in-tension .ct-le-revisit { visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .ct-le.is-new { animation: ct-le-in 240ms var(--ct-ease) both; }
  @keyframes ct-le-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
  .ct-le.is-new::before {
    content: "";
    position: absolute;
    left: -2px; top: 0; bottom: 0;
    width: 2px;
    background: var(--ink-mute);
    animation: ct-sweep 600ms var(--ct-ease) forwards;
  }
  @keyframes ct-sweep { from { opacity: 1; } to { opacity: 0; } }

  .ct-le.is-revising .ct-le-old::after { animation: ct-strike 300ms var(--ct-ease) both; }
  @keyframes ct-strike { from { width: 0; } to { width: 100%; } }
  .ct-le.is-revising .ct-le-text { animation: ct-fade-in 200ms var(--ct-ease) 240ms both; }
  @keyframes ct-fade-in { from { opacity: 0; } to { opacity: 1; } }

  .ct-le.is-pulse { animation: ct-pulse 500ms var(--ct-ease); }
  @keyframes ct-pulse {
    0%   { border-left-color: transparent; }
    30%  { border-left-color: var(--tension); }
    100% { border-left-color: transparent; }
  }
}
/* Without motion the same information is still carried, statically. */
@media (prefers-reduced-motion: reduce) {
  .ct-le-old { text-decoration: line-through; }
  .ct-le-old::after { display: none; }
}

/* Bottom sheet below the desktop breakpoint. */
@media (max-width: 1023px) {
  .ct-col-ledger {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    max-height: 72vh;
    overflow-y: auto;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: 18px 20px 24px;
    transform: translateY(101%);
  }
  .ct-col-ledger.is-open { transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .ct-col-ledger { transition: transform 200ms var(--ct-ease); }
  }
  .ct-sheet-toggle {
    position: fixed;
    left: 16px; bottom: 16px;
    z-index: 41;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--paper);
    color: var(--ink-mute);
    border: 1px solid var(--rule);
    padding: 9px 13px;
    cursor: pointer;
  }
  .ct-sheet-count {
    font-size: 10px;
    background: var(--paper-3);
    border: 1px solid var(--rule-soft);
    padding: 1px 6px;
  }
  body.ct-in-tension .ct-sheet-toggle { border-color: var(--tension); color: var(--tension); }
}
@media (min-width: 1024px) {
  .ct-sheet-toggle { display: none; }
}

/* ---------- Tension takeover ---------- */

/* A full-width band rather than a fixed overlay: position: fixed dialogs are
   fragile, and a takeover reads as consequential in a way a modal does not.
   The ledger stays where it is so the pulse has something to connect to. */
.ct-tension { position: relative; padding: 40px 0 44px; }
.ct-tension > * { position: relative; z-index: 1; }
.ct-tension::before {
  content: "";
  position: absolute;
  inset: 0 -24px;
  z-index: 0;
  background: var(--tension-wash);
  border-top: 2px solid var(--tension);
  border-bottom: 1px solid var(--rule);
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax var(--tension-wash);
}
@media (prefers-reduced-motion: no-preference) {
  .ct-tension { animation: ct-panel-in 300ms var(--ct-ease) both; }
  @keyframes ct-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

.ct-tension-head {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  max-width: 32rem;
  color: var(--ink);
}
.ct-tension-head:focus { outline: none; }
.ct-tension-head:focus-visible { outline: 2px solid var(--tension); outline-offset: 6px; }

.ct-held { list-style: none; margin: 0 0 24px; padding: 0; max-width: 34rem; }
.ct-held-item {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.ct-held-q {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tension);
  padding-top: 3px;
}
.ct-held-text { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.ct-tension-statement {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 34rem;
  margin: 0 0 18px;
}
.ct-tension-supplement {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  border-left: 2px solid var(--tension);
  padding-left: 14px;
  max-width: 33rem;
  margin: 0 0 18px;
}

.ct-why { margin: 0 0 28px; max-width: 34rem; }
.ct-why summary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 6px 0;
}
.ct-why summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ct-why p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 12px 0 0;
}

/* Resolutions. Equal weight, no fill, no lift, no shadow, no autofocus — any
   hierarchy here is a recommendation, and a recommendation defeats the
   instrument. Border darkens on hover and that is the whole interaction. */
.ct-res { display: grid; gap: 8px; margin: 0 0 28px; max-width: 34rem; }
.ct-res-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 14px 16px;
  cursor: pointer;
  color: var(--ink);
}
.ct-res-btn:hover { border-color: var(--tension); }
.ct-res-btn:focus-visible { outline: 2px solid var(--tension); outline-offset: 2px; }
.ct-res-btn.is-chosen { border-color: var(--ink-mute); background: var(--paper-3); }
@media (prefers-reduced-motion: no-preference) {
  .ct-res-btn { transition: border-color 120ms var(--ct-ease); }
}
.ct-res-label { display: block; font-size: 15px; line-height: 1.45; }
.ct-res-note {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  margin-top: 6px;
}

.ct-hatch { border-top: 1px solid var(--rule); padding-top: 18px; max-width: 34rem; }
.ct-hatch-toggle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 3px 0;
  cursor: pointer;
  text-align: left;
}
.ct-hatch-toggle:hover { border-color: var(--ink-mute); }
.ct-hatch-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ct-hatch-body { margin-top: 14px; }
.ct-hatch-label, .ct-press-label {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.ct-hatch-text, .ct-press-text {
  display: block;
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 12px;
  margin-bottom: 12px;
  resize: vertical;
}
.ct-hatch-text:focus-visible, .ct-press-text:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.ct-hatch-go {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 11px 20px;
  cursor: pointer;
}
.ct-hatch-go:hover { border-color: var(--ink-mute); }

/* ---------- Press ---------- */

.ct-press { max-width: 38rem; }
.ct-press-priv { font-family: var(--sans); font-size: 12px; color: var(--ink-fade); margin: 0 0 16px; }

.ct-excerpts { display: grid; gap: 16px; margin: 0 0 26px; }
@media (min-width: 720px) { .ct-excerpts { grid-template-columns: 1fr 1fr; } }
.ct-excerpt { margin: 0; border: 1px solid var(--rule); padding: 16px; background: var(--paper-2); }
.ct-excerpt-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 10px;
}
.ct-excerpt-quote { margin: 0 0 12px; }
.ct-excerpt-quote p {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.ct-excerpt-cite {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-fade);
}
.ct-excerpt-cite a { color: var(--ink-mute); }

/* ---------- Results ---------- */

.ct-results { max-width: 44rem; }
.ct-results-head {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.ct-results-head:focus { outline: none; }
.ct-restored {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  border-left: 2px solid var(--rule);
  padding-left: 14px;
  margin: 0 0 28px;
}
.ct-results-section {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-fade);
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin: 44px 0 20px;
}
.ct-subsection {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-fade);
  margin: 36px 0 14px;
}

/* ---------- Findings ----------

   The one part of the results screen that is an argument rather than a record,
   so it is the one part set in reading type at reading width. A finding is
   given the tension colour it was raised in and nothing else: no fill, no
   shadow, no icon. The left rule carries the state — solid where the
   respondent settled it, dashed where they did not — and the status word says
   the same thing in text, because a border is not a label. */

.ct-findings-lede, .ct-findings-none {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 34rem;
  margin: 0 0 24px;
}
.ct-findings-none { font-family: var(--serif); font-size: 16.5px; color: var(--ink-2); }

.ct-finding {
  border-left: 2px solid var(--tension);
  padding: 2px 0 4px 20px;
  margin: 0 0 40px;
}
.ct-finding.is-open { border-left-style: dashed; }
.ct-finding:last-child { margin-bottom: 0; }

.ct-finding-top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.ct-finding-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--tension);
}
.ct-finding-status {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  border: 1px solid var(--rule);
  padding: 3px 7px;
}
.ct-finding.is-open .ct-finding-status { color: var(--tension); border-color: var(--tension-soft); }

/* The statement is the finding. It gets the largest type on the page after the
   headline itself, and it is never truncated to its first sentence the way the
   map's legend truncates it. */
.ct-finding-statement {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 33rem;
  margin: 0 0 20px;
}

.ct-finding-key {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 8px;
}
.ct-finding-why { margin: 0 0 22px; max-width: 34rem; }
.ct-finding-why-p {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.ct-finding-why-p:last-child { margin-bottom: 0; }

.ct-finding-you { margin: 0 0 22px; max-width: 34rem; }
.ct-finding-you-v {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.ct-finding-you-v strong { font-weight: 600; }
.ct-finding-quote { margin: 10px 0 0; padding-left: 14px; border-left: 1px solid var(--rule); }
.ct-finding-quote p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

.ct-finding-links { margin: 0; }

@media (max-width: 700px) {
  .ct-finding { padding-left: 14px; }
  .ct-finding-statement { font-size: 18px; }
}

/* Belief map */
.ct-map-wrap { overflow-x: auto; margin-bottom: 20px; }
.ct-map { min-width: 560px; font-family: var(--sans); }
.ct-map-cluster {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  fill: var(--ink-fade);
}
.ct-map-box { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1; }
.ct-map-node.is-open .ct-map-box { stroke-dasharray: 3 3; fill: transparent; }
.ct-map-label { font-size: 12px; fill: var(--ink-2); }
.ct-map-state {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--ink-fade);
}
.ct-map-node.is-revised .ct-map-state { fill: var(--tension); }
.ct-mk-aff { fill: var(--ink-2); stroke: none; }
.ct-mk-den { fill: transparent; stroke: var(--ink-2); stroke-width: 1.2; }
.ct-map-mk-bar { stroke: var(--ink-2); stroke-width: 1.2; }
.ct-mk-open { fill: none; stroke: var(--ink-fade); stroke-width: 1.2; stroke-dasharray: 2 2; }
.ct-map-edge { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.ct-map-edge.is-held { stroke: var(--ink-fade); stroke-dasharray: none; }
.ct-map-hub rect { fill: var(--paper-2); stroke: var(--rule); }
.ct-map-hub.is-fired rect { stroke: var(--tension); }
.ct-map-hub.is-unresolved rect { stroke: var(--tension); stroke-dasharray: 3 2; }
.ct-map-hub-n { font-family: var(--mono); font-size: 10px; fill: var(--ink-mute); }
.ct-map-hub.is-fired .ct-map-hub-n { fill: var(--tension); }
.ct-map-hub-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--ink-fade); }

@media (prefers-reduced-motion: no-preference) {
  .ct-map .ct-map-node, .ct-map .ct-map-hub, .ct-map .ct-map-cluster { opacity: 0; }
  .ct-map.is-in .ct-map-node,
  .ct-map.is-in .ct-map-hub,
  .ct-map.is-in .ct-map-cluster {
    animation: ct-fade-in 200ms var(--ct-ease) var(--d, 0ms) forwards;
  }
  .ct-map .ct-map-edge { stroke-dasharray: 400; stroke-dashoffset: 400; }
  .ct-map.is-in .ct-map-edge {
    animation: ct-edge-draw 800ms var(--ct-ease) var(--d, 0ms) forwards;
  }
  @keyframes ct-edge-draw { to { stroke-dashoffset: 0; } }
  .ct-map.is-in .ct-map-edge.is-held { animation-name: ct-edge-draw-solid; }
  @keyframes ct-edge-draw-solid { to { stroke-dashoffset: 0; stroke-dasharray: 400; } }
}

.ct-map-table-wrap { overflow-x: auto; margin-bottom: 8px; }
.ct-map-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13px; }
.ct-map-table caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-fade);
  padding-bottom: 10px;
}
.ct-map-table th, .ct-map-table td {
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
  font-weight: 400;
  color: var(--ink-2);
}
.ct-map-table thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-fade);
  border-bottom: 1px solid var(--rule);
}
.ct-map-table tbody td:nth-child(3),
.ct-map-table tbody td:nth-child(4),
.ct-map-table tbody td:last-child { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }

.ct-map-key { list-style: none; margin: 16px 0 0; padding: 0; }
.ct-map-key li {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  padding: 6px 0;
}
.ct-map-key-n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--tension); margin-right: 6px; }
.ct-map-key-s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-fade); }

/* Revision log */
.ct-log-list { list-style: none; margin: 0; padding: 0; }
.ct-log-item { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.ct-log-line {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.ct-log-line strong { font-weight: 600; }
.ct-log-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-fade);
  margin: 6px 0 0;
}
.ct-log-item.is-revision { border-left: 2px solid var(--tension); padding-left: 14px; }
.ct-log-item.is-unresolved { border-left: 2px solid var(--rule); padding-left: 14px; }
.ct-log-quote { margin: 10px 0 0; padding-left: 14px; border-left: 1px solid var(--rule); }
.ct-log-quote p { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.ct-log-none, .ct-log-empty {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-mute);
  margin: 0 0 16px;
}

/* Landing */
.ct-landing-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 14px;
}
.ct-landing-body {
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.ct-open { margin-top: 18px; }
.ct-open-head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 8px;
}
.ct-open-list { margin: 0; padding-left: 18px; }
.ct-open-list li { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-mute); margin-bottom: 6px; }

/* Follow through. Used inside a finding and again for the leftovers, so it
   carries no margin of its own — the container decides the spacing. */
.ct-follow-lede {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 34rem;
  margin: 0 0 16px;
}
.ct-follow-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 520px) { .ct-follow-row { grid-template-columns: 1fr; gap: 4px; } }
.ct-follow-kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-fade);
  padding-top: 3px;
}
.ct-follow-list { list-style: none; margin: 0; padding: 0; }
.ct-follow-list li { margin-bottom: 5px; }
.ct-follow-list a {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.ct-follow-list a:hover { color: var(--ochre); border-color: var(--ochre); }

/* Footer actions */
.ct-actions-wrap { margin-top: 44px; border-top: 1px solid var(--rule); padding-top: 20px; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-action {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 11px 18px;
  cursor: pointer;
}
.ct-action:hover { border-color: var(--ink-mute); }
.ct-action:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ct-actions-status {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 12px 0 0;
  word-break: break-all;
}

/* ---------- noscript ---------- */

.ct-ns { padding: 40px 0 80px; max-width: 44rem; }
.ct-ns-head {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  margin: 40px 0 10px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.ct-ns-intro { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 24px; }
.ct-ns-list { list-style: none; margin: 0; padding: 0; }
.ct-ns-q, .ct-ns-t { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.ct-ns-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-fade);
  margin: 0 0 6px;
}
.ct-ns-prompt { font-family: var(--serif); font-size: 19px; line-height: 1.4; color: var(--ink); margin: 0 0 8px; }
.ct-ns-help, .ct-ns-req, .ct-ns-press, .ct-ns-hatch, .ct-ns-note {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin: 0 0 8px;
}
.ct-ns-statement { font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.ct-ns-why { font-family: var(--serif); font-size: 15px; line-height: 1.65; color: var(--ink-2); margin: 0 0 12px; }
.ct-ns-opts, .ct-ns-res, .ct-ns-branch { margin: 0 0 8px; padding-left: 20px; }
.ct-ns-opts li, .ct-ns-res li, .ct-ns-branch li {
  font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-bottom: 5px;
}
.ct-ns-opt { font-family: var(--mono); font-size: 12px; }
.ct-ns-reslabel {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-fade); margin: 12px 0 6px;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 400px) {
  .ct-shell { padding-top: 28px; }
  .ct-title { font-size: 32px; }
  .ct-q { font-size: 23px; }
  .ct-tension-head { font-size: 24px; }
  .ct-results-head { font-size: 26px; }
  .ct-tension::before { inset: 0 -16px; }
  .ct-le { grid-template-columns: 2rem minmax(0, 1fr); }
  .ct-le-pill { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ---------- Print ---------- */

/* Church leaders will print this. It prints as a record: the results only,
   no navigation, no controls, no colour, hairlines intact. */
@media print {
  .ct-progress,
  .ct-sheet-toggle,
  .ct-actions-wrap,
  .ct-le-revisit,
  .ct-col-ledger,
  .ct-restored { display: none !important; }

  .ct-shell { display: block; padding: 0; }
  .ct-results { max-width: none; }
  .ct-results-head { font-size: 22pt; margin-bottom: 12pt; }
  .ct-results-section {
    font-size: 8pt;
    margin: 18pt 0 8pt;
    border-top: 0.5pt solid #999;
    padding-top: 6pt;
    break-after: avoid;
  }
  .ct-log-item, .ct-map-table tr { break-inside: avoid; }
  .ct-log-line { font-size: 11pt; }
  .ct-landing-body { font-size: 11pt; }
  .ct-finding {
    border-left: 1pt solid #666;
    padding-left: 10pt;
    margin-bottom: 18pt;
    break-inside: avoid;
  }
  .ct-finding.is-open { border-left-style: dashed; }
  .ct-finding-statement { font-size: 13pt; }
  .ct-finding-why-p { font-size: 10pt; }
  .ct-finding-you-v { font-size: 11pt; }
  .ct-finding-n, .ct-finding-status { color: #000; }
  .ct-subsection { font-size: 8pt; margin: 14pt 0 6pt; break-after: avoid; }
  .ct-map-wrap { display: none; }          /* the table is the printable form */
  .ct-map-table { font-size: 9pt; }
  .ct-map-table th, .ct-map-table td { border-bottom: 0.5pt solid #ccc; }
  .ct-follow-list a { text-decoration: none; border: 0; }
  .ct-log-item.is-revision, .ct-log-item.is-unresolved { border-left: 1pt solid #666; }
  .ct-why[open] p { font-size: 10pt; }
}