/* ==========================================================================
   Bearing: the one stylesheet, from the Claude Design export
   (docs/design/claude-design/bearing.css). Change the design there first.
   Order: tokens, base, type, layout, chrome, controls, status, data,
   documents, questionnaire, rose, screens, motion, print.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-opsz.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-opsz-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --paper: #F3F6F5;          /* page background, chart white */
  --sheet: #FFFFFF;          /* documents */
  --ink: #142238;            /* text, linework, primary buttons. 14.7:1 on paper */
  --ink-hover: #24385A;      /* primary button hover, derived from ink */
  --ink-muted: #4B5B70;      /* secondary text, labels. 6.4:1 on paper */
  --rule: #C8D3DA;           /* hairlines, tracks. non-text only */
  --shoal: #A9CBDD;          /* data fill 50 to 74 */
  --shoal-deep: #4F86A8;     /* data fill 75+, focus ring. graphics only */
  --shoal-pale: #DCEAF1;     /* selected rows, quiet highlights */
  --magenta: #A21C6C;        /* gaps, overdue, draft, scores below 50. 6.6:1 on paper */
  --magenta-tint: #F6E1EC;   /* draft/overdue badges, quote marks */
  --green: #1D6A50;          /* verified, approved. 6.0:1 on paper */
  --green-tint: #DCEDE5;

  /* type families */
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* type scale, px */
  --fs-13: 13px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px;
  --fs-32: 32px; --fs-44: 44px; --fs-64: 64px; --fs-88: 88px;

  /* width axis */
  --wdth-display: 72%;   /* headlines, port signage */
  --wdth-numeric: 85%;   /* scores, counts, dates in tables */
  --wdth-ui: 100%;

  /* space, 4px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* shape */
  --r-control: 2px;   /* inputs, badges, buttons */
  --r-panel: 6px;     /* panels */
  --r-doc: 0;         /* documents are sheets of paper */
  --r-pill: 999px;    /* status badges only */
  --hairline: 1px solid var(--rule);
  --sheet-shadow: 0 1px 2px rgba(20, 34, 56, 0.06);

  /* layout */
  --content-max: 1200px;
  --measure: 68ch;
  --gutter: 32px;

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --grow-step: 40ms;   /* delay between rose wedges, a to j */
  --grow-dur: 140ms;   /* one wedge. 9 x 40 + 140 = 500ms total */
  --respond-dur: 600ms;/* row arriving, state switch */
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); }
.app {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-17);
  line-height: 1.5;
  font-weight: 420;
  font-stretch: var(--wdth-ui);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
.app h1, .app h2, .app h3, .app h4, .app p, .app ol, .app ul, .app dl, .app dd, .app figure, .app blockquote { margin: 0; }
.app a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.app a:hover { text-decoration-thickness: 2px; }
.app :focus-visible, .is-focus { outline: 2px solid var(--shoal-deep) !important; outline-offset: 2px; }
.app ::selection { background: var(--shoal-pale); }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Type ---------- */
.t-display { font-size: var(--fs-88); line-height: 1.02; font-stretch: var(--wdth-display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.t-h1 { font-size: var(--fs-44); line-height: 1.1; font-stretch: var(--wdth-display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.t-h2 { font-size: var(--fs-32); line-height: 1.15; font-stretch: var(--wdth-display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.t-h3 { font-size: var(--fs-24); line-height: 1.2; font-stretch: 80%; font-weight: 650; letter-spacing: -0.01em; text-wrap: balance; }
.t-h4 { font-size: var(--fs-20); line-height: 1.3; font-weight: 600; }
.t-lede { font-size: var(--fs-20); line-height: 1.5; max-width: 52ch; text-wrap: pretty; }
.t-body { font-size: var(--fs-17); line-height: 1.5; }
.t-small { font-size: var(--fs-15); line-height: 1.45; }
.t-meta { font-size: var(--fs-13); line-height: 1.4; }
.t-muted { color: var(--ink-muted); }
.t-strong { font-weight: 600; }
.serif {
  font-family: var(--serif); font-size: var(--fs-17); line-height: 1.6; font-weight: 400;
  font-optical-sizing: auto; max-width: 72ch; text-wrap: pretty;
}
.serif--small { font-size: var(--fs-15); line-height: 1.6; }
.num { font-variant-numeric: tabular-nums lining-nums; font-stretch: var(--wdth-numeric); font-weight: 650; }
.letter { font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; color: var(--ink-muted); }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.page { padding-block: var(--s-7) var(--s-9); }
.page-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: var(--measure); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--lg { gap: var(--s-6); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); }
.rule-top { border-top: var(--hairline); }
.section { padding-block: var(--s-8); }
.section + .section { border-top: var(--hairline); }

/* ---------- 5. Chrome: top bar and footer ---------- */
.topbar { background: var(--paper); border-bottom: var(--hairline); }
.topbar__in {
  max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter);
  min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-6);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  text-decoration: none; color: var(--ink) !important;
  font-size: 22px; font-weight: 700; font-stretch: var(--wdth-display); letter-spacing: -0.01em;
}
.brand svg { width: 22px; height: 22px; flex: none; }
.nav { display: flex; gap: var(--s-1); flex: 1 1 auto; }
.nav a {
  display: inline-flex; align-items: center; min-height: 56px; padding-inline: var(--s-3);
  text-decoration: none; color: var(--ink-muted); font-size: var(--fs-15); font-weight: 500;
  box-shadow: inset 0 -2px 0 transparent; white-space: nowrap;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.topbar__meta { display: flex; align-items: center; gap: var(--s-4); margin-left: auto; }
.company { font-size: var(--fs-15); color: var(--ink-muted); white-space: nowrap; }
.lang { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--sheet); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 36px;
  font-size: var(--fs-13); font-weight: 600; text-decoration: none; color: var(--ink-muted);
}
.lang a + a { border-left: 1px solid var(--rule); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--sheet); }
.footer { border-top: var(--hairline); padding-block: var(--s-6) var(--s-7); color: var(--ink-muted); font-size: var(--fs-13); }
.footer__in { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; }
.footer p { max-width: 64ch; }

/* ---------- 6. Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 10px 20px; border-radius: var(--r-control); border: 1px solid transparent;
  font: inherit; font-size: var(--fs-15); font-weight: 600; line-height: 1.25; text-align: center;
  text-decoration: none !important; cursor: pointer; background: none;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--sheet) !important; }
.btn--primary:hover, .btn--primary.is-hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn--secondary { background: var(--sheet); border-color: var(--ink); color: var(--ink) !important; }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--shoal-pale); }
.btn--quiet { padding-inline: var(--s-2); color: var(--ink) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px; }
.btn--quiet:hover, .btn--quiet.is-hover { text-decoration-thickness: 2px !important; }
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  background: transparent; border: 1px dashed var(--ink-muted); color: var(--ink-muted) !important; cursor: not-allowed;
}
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.btn-note { font-size: var(--fs-13); color: var(--ink-muted); max-width: 40ch; }

/* Text inputs */
.field { display: grid; gap: 6px; max-width: 520px; }
.field__label { font-size: var(--fs-15); font-weight: 600; }
.field__hint { font-size: var(--fs-13); color: var(--ink-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: var(--fs-17); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--ink-muted); border-radius: var(--r-control);
}
.select { appearance: none; padding-right: 40px; background-image: none; }
.select-wrap { position: relative; display: block; }
.select-wrap svg { position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none; }
.textarea { min-height: 132px; font-family: var(--serif); line-height: 1.6; resize: vertical; }
.check-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-15); cursor: pointer; }
.check-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }

/* Segmented yes/no and 0 to 3 scale. Real radios, visually hidden, labels carry the look. */
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; border: 1px solid var(--ink-muted); border-radius: var(--r-control); background: var(--sheet); }
.seg--scale { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 720px; }
.seg__opt { position: relative; display: flex; min-width: 0; }
.seg__opt + .seg__opt { border-left: 1px solid var(--rule); }
.seg__opt label {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 8px 12px; text-align: center; cursor: pointer;
  font-size: var(--fs-15); font-weight: 500; line-height: 1.3;
}
.seg--scale .seg__opt label { min-height: 72px; }
.seg__opt label:hover, .seg__opt label.is-hover { background: var(--shoal-pale); }
.seg__opt input:checked + label, .seg__opt label.is-checked { background: var(--ink); color: var(--sheet); font-weight: 600; }
.seg__opt input:focus-visible + label { outline: 2px solid var(--shoal-deep); outline-offset: 2px; position: relative; z-index: 1; }
.seg__n { font-size: var(--fs-20); line-height: 1; font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; }
.seg__l { font-size: var(--fs-13); line-height: 1.3; }
.seg--stacked { grid-template-columns: 1fr; max-width: none; }
.seg--stacked .seg__opt + .seg__opt { border-left: 0; border-top: 1px solid var(--rule); }
.seg--stacked .seg__opt label { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; text-align: left; padding-inline: 16px; }
.seg--stacked .seg__l { font-size: var(--fs-15); }

/* Choice options */
.choices { display: grid; gap: var(--s-2); max-width: 680px; }
.choice { position: relative; }
.choice label {
  display: flex; gap: 12px; align-items: flex-start; min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--rule); border-radius: var(--r-control); background: var(--sheet);
  font-size: var(--fs-17); line-height: 1.4; cursor: pointer;
}
.choice label::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--ink-muted); background: var(--sheet);
}
.choice label:hover, .choice label.is-hover { border-color: var(--ink-muted); }
.choice input:checked + label, .choice label.is-checked { border-color: var(--ink); background: var(--shoal-pale); }
.choice input:checked + label::before, .choice label.is-checked::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--sheet); }
.choice input:focus-visible + label { outline: 2px solid var(--shoal-deep); outline-offset: 2px; }

/* Option cards (profile choice) */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s-4); }
.option-card label {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px 14px; height: 100%;
  padding: 20px 22px; border: 1px solid var(--rule); border-radius: var(--r-panel); background: var(--sheet); cursor: pointer;
}
.option-card label::before { content: ""; grid-row: 1; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--ink-muted); }
.option-card input:checked + label { border: 2px solid var(--ink); padding: 19px 21px; background: var(--shoal-pale); }
.option-card input:checked + label::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 4px var(--sheet); }
.option-card input:focus-visible + label { outline: 2px solid var(--shoal-deep); outline-offset: 2px; }
.option-card__title { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; }
.option-card__body { grid-column: 2; font-size: var(--fs-15); color: var(--ink-muted); }

/* Question block */
.q { border: 0; margin: 0; padding: var(--s-5) 0; border-top: var(--hairline); min-width: 0; }
.q__legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-size: var(--fs-17); font-weight: 600; line-height: 1.4; max-width: var(--measure); }
.q__legend + * { clear: both; }
.q__help { font-size: var(--fs-15); color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--s-3); }
.q__body { padding-top: 6px; }
.q__foot { display: flex; align-items: center; gap: var(--s-3); min-height: 24px; margin-top: var(--s-2); }
.q__open { font-size: var(--fs-13); color: var(--magenta); font-weight: 600; }
.saved { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--ink-muted); }
.saved svg { width: 12px; height: 12px; color: var(--green); }

/* ---------- 7. Status: badges and stamps ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--fs-13); font-weight: 600; line-height: 1; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; flex: none; }
.badge--draft, .badge--overdue { background: var(--magenta-tint); color: var(--magenta); }
.badge--approved, .badge--closed { background: var(--green-tint); color: var(--green); }
.badge--unknown { background: var(--sheet); color: var(--ink-muted); border-color: var(--rule); }
.badge--drafting, .badge--edited, .badge--progress { background: var(--shoal-pale); color: var(--ink); }
.badge--error { background: var(--sheet); color: var(--magenta); border-color: var(--magenta); }
.badge--open { background: var(--sheet); color: var(--magenta); border-color: var(--magenta); }
.spin { animation: spin 1s linear infinite; transform-origin: 50% 50%; }
.stamp {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--green);
  border-radius: var(--r-control); background: var(--green-tint); color: var(--green); font-size: var(--fs-13); font-weight: 600; line-height: 1.2;
}
.stamp svg { width: 12px; height: 12px; }
.stamp--rejected { border-color: var(--magenta); background: var(--magenta-tint); color: var(--magenta); }

/* ---------- 8. Data: facts, score rows, tracks, tables ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--s-4) var(--s-6); }
.facts dt { font-size: var(--fs-13); color: var(--ink-muted); line-height: 1.4; }
.facts dd { margin: 2px 0 0; font-size: var(--fs-17); font-weight: 500; }
.facts--inline { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.facts--inline dd { font-size: var(--fs-15); }

.scores { list-style: none; margin: 0; padding: 0; }
.score {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(96px, 168px) 44px; gap: 4px 14px;
  align-items: center; padding: 11px 0; border-top: var(--hairline); scroll-margin-top: 24px;
}
.score:last-child { border-bottom: var(--hairline); }
.score:target, .score.is-target { background: var(--shoal-pale); box-shadow: -12px 0 0 var(--shoal-pale), 12px 0 0 var(--shoal-pale); }
.score__letter { font-size: var(--fs-15); }
.score__name { font-size: var(--fs-15); line-height: 1.35; text-wrap: pretty; }
.score__value { font-size: var(--fs-20); text-align: right; }
.score__value.is-low { color: var(--magenta); }
.track { position: relative; height: 12px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.track__bar { position: absolute; left: 0; top: 2px; bottom: 2px; background: var(--shoal); }
.track__bar--low { background: var(--magenta-tint); box-shadow: inset 0 0 0 1px var(--magenta); }
.track__bar--high { background: var(--shoal-deep); }
.track__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.track__tick--25 { left: 25%; } .track__tick--50 { left: 50%; } .track__tick--75 { left: 75%; }
.track--prev .track__prev { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--ink-muted); }

.key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-13); color: var(--ink-muted); }
.key span { display: inline-flex; align-items: center; gap: 8px; }
.key i { display: inline-block; width: 16px; height: 10px; }
.key .k-low { background: var(--magenta-tint); box-shadow: inset 0 0 0 1px var(--magenta); }
.key .k-mid { background: var(--shoal); }
.key .k-high { background: var(--shoal-deep); }
.key .k-prev { height: 0; border-top: 1.5px dashed var(--ink-muted); }

.table-box { overflow-x: auto; border: var(--hairline); border-radius: var(--r-panel); background: var(--sheet); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.tbl th { text-align: left; font-size: var(--fs-13); font-weight: 600; color: var(--ink-muted); padding: 12px 16px; border-bottom: var(--hairline); white-space: nowrap; }
.tbl td { padding: 14px 16px; border-bottom: var(--hairline); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover, .tbl tbody tr.is-hover { background: var(--paper); }
.tbl tbody tr.is-selected { background: var(--shoal-pale); }
.tbl .tbl__num { text-align: right; font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; }
.tbl .tbl__date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl__title { font-weight: 600; }
.tbl__sub { display: block; font-size: var(--fs-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 600; margin-top: 2px; }
.delta { font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; }
.delta--none { color: var(--ink-muted); font-weight: 500; }

/* ---------- 9. Documents ---------- */
.sheet { background: var(--sheet); border: var(--hairline); border-radius: var(--r-doc); box-shadow: var(--sheet-shadow); }
.sheet--doc { padding: 56px 64px; }
.panel { background: var(--sheet); border: var(--hairline); border-radius: var(--r-panel); }
.doc-head { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); border-bottom: var(--hairline); }
.doc-body h2 { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; margin: var(--s-6) 0 var(--s-2); font-family: var(--sans); }
.doc-body p, .doc-body li { font-family: var(--serif); font-size: var(--fs-17); line-height: 1.6; max-width: 72ch; }
.doc-body p + p { margin-top: var(--s-3); }
.doc-body ul { padding-left: 1.2em; display: grid; gap: 6px; }
.disclaimer {
  display: flex; align-items: flex-start; gap: 10px; padding: 16px 0 0; border-top: 1px solid var(--ink);
  font-size: var(--fs-15); font-weight: 600; line-height: 1.45;
}
.disclaimer small { display: block; font-weight: 420; font-size: var(--fs-13); color: var(--ink-muted); margin-top: 2px; }
.disclaimer-bar { position: sticky; bottom: 0; background: var(--sheet); padding-bottom: 20px; z-index: 2; }

/* Gap item */
.gaps { list-style: none; margin: 0; padding: 0; }
.gap { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 var(--s-4); padding: var(--s-5) 0; border-top: var(--hairline); }
.gap__n { font-size: var(--fs-44); line-height: 0.95; font-stretch: var(--wdth-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.gap__q { font-size: var(--fs-17); font-weight: 600; line-height: 1.4; max-width: var(--measure); text-wrap: pretty; }
.gap__facts { margin-top: var(--s-3); }
.gap__advice { margin-top: var(--s-3); }
.gap--fragment { grid-template-columns: 44px minmax(0, 1fr); border-top: 0; padding: 0; }
.gap--fragment .gap__n { font-size: var(--fs-32); }

/* Citation block */
.cite { border: var(--hairline); border-radius: var(--r-doc); background: var(--sheet); padding: 16px 20px 18px; display: grid; gap: 10px; }
.cite__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cite__id { font-size: var(--fs-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; }
.cite__title { font-size: var(--fs-15); font-weight: 600; }
.cite__excerpt { font-family: var(--serif); font-size: var(--fs-15); line-height: 1.65; color: var(--ink-muted); max-width: 72ch; }
.cite__excerpt mark, mark.q-mark {
  background: var(--magenta-tint); color: var(--ink); padding: 1px 2px; border-bottom: 1px solid var(--magenta);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cite__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cite__foot a { font-size: var(--fs-13); }
.cite--rejected { border-style: dashed; }
.cite--rejected .cite__excerpt { text-decoration: line-through; text-decoration-color: var(--magenta); }

/* Verifier note */
.verifier { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-15); line-height: 1.45; }
.verifier svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* Audit trail */
.audit { list-style: none; margin: 0; padding: 0; display: grid; }
.audit li { position: relative; display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); gap: 0 10px; padding: 5px 0; font-size: var(--fs-15); line-height: 1.4; }
.audit li::before { content: ""; position: absolute; left: 59px; top: 20px; bottom: -6px; width: 1px; background: var(--rule); }
.audit li:last-child::before { display: none; }
.audit__time { font-size: var(--fs-13); color: var(--ink-muted); font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; padding-top: 1px; }
.audit__dot { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--ink-muted); background: var(--sheet); position: relative; z-index: 1; }
.audit .is-approved .audit__dot { background: var(--green); border-color: var(--green); }
.audit .is-edited .audit__dot { background: var(--shoal-deep); border-color: var(--shoal-deep); }

/* ---------- 10. Readiness check ---------- */
.check { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.rail-box summary { display: none; }
.rail-mob { display: none; }
.rail-summary__count { font-size: var(--fs-13); color: var(--ink-muted); white-space: nowrap; }
.rail { list-style: none; margin: 0; padding: 0; display: grid; }
.rail__item { position: relative; }
.rail__item::before { content: ""; position: absolute; left: 21px; top: 38px; bottom: -8px; width: 1px; background: var(--rule); }
.rail__item:last-child::before { display: none; }
.rail__link {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; align-items: start;
  min-height: 44px; padding: 8px 10px 8px 8px; border-radius: var(--r-control);
  text-decoration: none !important; color: var(--ink) !important;
}
.rail__link:hover { background: rgba(220, 234, 241, 0.6); }
.rail__marker {
  grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink-muted);
  font-size: var(--fs-13); font-weight: 650; font-stretch: var(--wdth-numeric);
}
.rail__name { font-size: var(--fs-15); line-height: 1.35; font-weight: 500; padding-top: 3px; }
.rail__state { font-size: var(--fs-13); color: var(--ink-muted); line-height: 1.35; }
.rail__item.is-done .rail__marker { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.rail__item.is-current .rail__link { background: var(--shoal-pale); }
.rail__item.is-current .rail__marker { border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); }
.rail__item.is-current .rail__name { font-weight: 650; }
.rail__item.is-incomplete .rail__marker { border-color: var(--magenta); background: var(--magenta-tint); color: var(--magenta); }
.rail__item.is-incomplete .rail__state { color: var(--magenta); font-weight: 600; }
.rail__item.is-new .rail__marker { animation: settle var(--respond-dur) var(--ease-out); }
.theme-head { display: grid; gap: var(--s-3); padding-bottom: var(--s-5); }
.theme-head__count { font-size: var(--fs-15); color: var(--ink-muted); }
.check-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-6); border-top: var(--hairline); }
.notice { display: grid; gap: var(--s-2); padding: 16px 20px; border: 1px solid var(--magenta); background: var(--sheet); border-radius: var(--r-panel); }
.notice__title { font-weight: 600; color: var(--magenta); }
.notice--quiet { border-color: var(--rule); }
.notice--quiet .notice__title { color: var(--ink); }

/* ---------- 11. Report ---------- */
.report-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.report-overview { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--s-7); align-items: start; padding-block: var(--s-6); }
.report-overview__rose { display: grid; gap: var(--s-4); }
.report-section { padding-top: var(--s-6); }
.report-section > .t-h2 { margin-bottom: var(--s-2); }

/* ---------- 12. Questionnaire ---------- */
.drop {
  display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-6);
  border: 1.5px dashed var(--ink-muted); border-radius: var(--r-panel); background: var(--sheet);
}
.drop.is-over { border-style: solid; border-color: var(--shoal-deep); background: var(--shoal-pale); }
.drop.is-error { border-style: solid; border-color: var(--magenta); }
.drop__icon { width: 40px; height: 40px; color: var(--ink); }
.drop__title { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; }
.drop__hint { font-size: var(--fs-15); color: var(--ink-muted); max-width: 60ch; }
.drop__error { font-size: var(--fs-15); color: var(--ink); max-width: 64ch; }
.drop__error strong { color: var(--magenta); }
.progress { width: min(420px, 100%); height: 6px; background: var(--shoal-pale); position: relative; }
.progress span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--shoal-deep); }

.summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding: 16px 20px;
  border: var(--hairline); border-radius: var(--r-panel); background: var(--sheet); margin-bottom: var(--s-5);
}
.summary__counts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.summary__counts dt { font-size: var(--fs-13); color: var(--ink-muted); }
.summary__counts dd { margin: 0; font-size: var(--fs-24); line-height: 1.1; font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; }
.summary__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.summary__note { flex-basis: 100%; font-size: var(--fs-13); color: var(--ink-muted); text-align: right; }

.review { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: var(--s-5); align-items: start; }
.qlist { list-style: none; margin: 0; padding: 0; border: var(--hairline); border-radius: var(--r-panel); background: var(--sheet); overflow: hidden; }
.qlist li + li { border-top: var(--hairline); }
.qrow {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 14px;
  width: 100%; padding: 14px 16px; cursor: pointer; align-items: start; font-family: var(--sans);
}
.qrow:hover { background: var(--paper); }
.qrow[aria-current="true"] { background: var(--shoal-pale); box-shadow: inset 3px 0 0 var(--ink); }
.qrow:focus-visible { outline: 2px solid var(--shoal-deep); outline-offset: -2px; }
.qrow__n { grid-row: span 3; font-size: var(--fs-15); color: var(--ink-muted); font-variant-numeric: tabular-nums; font-stretch: var(--wdth-numeric); font-weight: 650; padding-top: 1px; }
.qrow__domain { font-size: var(--fs-13); color: var(--ink-muted); line-height: 1.35; }
.qrow__q { font-size: var(--fs-15); font-weight: 600; line-height: 1.4; color: var(--ink); }
.qrow__a { font-family: var(--serif); font-size: var(--fs-15); line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.qrow__a.is-unknown { font-family: var(--sans); color: var(--ink-muted); }
.qrow__a.is-pending { font-family: var(--sans); color: var(--ink-muted); }
.qrow__a.is-error { font-family: var(--sans); color: var(--magenta); }
.qrow__status { grid-column: 3; grid-row: 1 / span 3; display: grid; justify-items: end; gap: 6px; }
.qrow.is-arrived { animation: arrive var(--respond-dur) var(--ease-out); }
.row-retry { display: flex; justify-content: flex-end; padding: 0 16px 14px 70px; margin-top: -6px; }

.detail { display: grid; gap: var(--s-5); align-content: start; padding: var(--s-5); background: var(--sheet); border: var(--hairline); border-radius: var(--r-panel); box-shadow: var(--sheet-shadow); }
.detail__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.detail__back { display: none; }
.detail__q { font-size: var(--fs-20); font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.detail__block { display: grid; gap: var(--s-2); }
.detail__label { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-13); color: var(--ink-muted); }
.detail__label span:first-child { font-weight: 600; }
.unknown-box { padding: 16px 18px; border: 1px dashed var(--ink-muted); background: var(--paper); display: grid; gap: 6px; }
.unknown-box strong { font-size: var(--fs-17); }
.approve { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--hairline); }
.approve__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.approve__row .field { flex: 1 1 200px; }
.approved-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 12px 16px; background: var(--green-tint); color: var(--green); font-weight: 600; font-size: var(--fs-15); border-radius: var(--r-control); }
.approved-box.is-arrived { animation: settle var(--respond-dur) var(--ease-out); }
.approved-box .btn--quiet { color: var(--green) !important; font-weight: 600; }

/* Run list */
.runs { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.run { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-4); align-items: center; padding: 16px 0; border-bottom: var(--hairline); }
.run__title { font-weight: 600; }
.run__meta { font-size: var(--fs-13); color: var(--ink-muted); }
.demo-action { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--ink); border-radius: var(--r-panel); background: var(--paper); }

/* Empty and error states */
.empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7) var(--s-6); border: var(--hairline); border-radius: var(--r-panel); background: var(--sheet); }
.empty__title { font-size: var(--fs-24); font-stretch: 80%; font-weight: 650; line-height: 1.2; }
.empty p { max-width: 56ch; color: var(--ink-muted); }
.empty--error { border-color: var(--magenta); }
.empty--error .empty__title { color: var(--magenta); }
.contour { width: 120px; height: 56px; color: var(--rule); }

/* History */
.checks { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.check-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 96px auto; gap: var(--s-4) var(--s-5); align-items: center; padding: 20px 0; border-bottom: var(--hairline); }
.check-row__mini { width: 104px; }
.check-row__score { font-size: var(--fs-44); line-height: 1; text-align: right; font-stretch: var(--wdth-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.check-row__score.is-low { color: var(--magenta); }
.check-row__score small { display: block; font-size: var(--fs-13); font-weight: 420; font-stretch: 100%; color: var(--ink-muted); letter-spacing: 0; }
.progress-ring { width: 104px; height: 104px; }

/* Comparison */
.compare-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.lists-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--s-6); }
.change-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.change-list li { display: grid; gap: 6px; padding: 16px 0; border-bottom: var(--hairline); }
.change-list__q { font-weight: 600; font-size: var(--fs-15); line-height: 1.4; }

/* Landing */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: var(--s-7); align-items: center; padding-block: var(--s-8) var(--s-9); }
.hero__text { display: grid; gap: var(--s-5); align-content: start; }
.hero__figure { display: grid; gap: var(--s-3); }
.hero__figure figcaption { font-size: var(--fs-13); color: var(--ink-muted); }
.tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: var(--s-7) var(--s-6); }
.tool { display: grid; gap: var(--s-4); align-content: start; }
.fragment { background: var(--sheet); border: var(--hairline); box-shadow: var(--sheet-shadow); padding: 24px; display: grid; gap: var(--s-4); }
.fragment__label { font-size: var(--fs-13); color: var(--ink-muted); }
.nots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--s-6); }
.nots li { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--ink); align-content: start; }
.nots strong { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; }

/* Records */
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
.filters .field { width: 240px; }
.overdue-note { display: block; margin-top: 6px; }

/* ---------- 13. Bearing rose ---------- */
.rose-wrap { width: 100%; container-type: inline-size; }
.rose { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.rose-wrap .rose--letters { display: none; }
.rose-wrap--letters .rose--names, .rose-wrap--mini .rose--names { display: none; }
.rose-wrap--letters .rose--letters, .rose-wrap--mini .rose--letters { display: block; }
@container (max-width: 470px) {
  .rose-wrap--full .rose--names { display: none; }
  .rose-wrap--full .rose--letters { display: block; }
}
.rose__ring { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rose__ring--outer { stroke: var(--ink-muted); }
.rose__sounding { font-size: 12px; fill: var(--ink-muted); text-anchor: middle; font-stretch: var(--wdth-numeric); font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--sheet); stroke-width: 4px; stroke-linejoin: round; }
.rose--on-paper .rose__sounding { stroke: var(--paper); }
.rose__w { stroke-linejoin: round; }
.rose__w--low { fill: var(--magenta-tint); stroke: var(--magenta); stroke-width: 1.5; }
.rose__w--mid { fill: var(--shoal); stroke: none; }
.rose__w--high { fill: var(--shoal-deep); stroke: none; }
.rose__prev { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.rose a { cursor: pointer; }
.rose a:hover .rose__w, .rose a:focus-visible .rose__w { stroke: var(--ink); stroke-width: 2.5; }
.rose a:focus { outline: none; }
.rose a:focus-visible .rose__hit { stroke: var(--shoal-deep); stroke-width: 3; }
.rose__hit { fill: transparent; stroke: none; }
.rose__hub { fill: var(--sheet); stroke: var(--ink); stroke-width: 1; }
.rose--on-paper .rose__hub { fill: var(--paper); }
.rose__overall { font-size: 50px; font-stretch: var(--wdth-display); font-weight: 700; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rose__overall.is-low { fill: var(--magenta); }
.rose__overall-label { font-size: 12px; fill: var(--ink-muted); text-anchor: middle; }
.rose__letter { font-size: 16px; font-weight: 650; font-stretch: var(--wdth-numeric); fill: var(--ink); }
.rose__name { font-size: 16px; font-weight: 420; fill: var(--ink-muted); }
.rose--letters .rose__letter { font-size: 19px; text-anchor: middle; }
.rose-wrap--mini .rose__label, .rose-wrap--mini .rose__ring--inner, .rose-wrap--mini .rose__sounding, .rose-wrap--mini .rose__hubtext { display: none; }
.rose-wrap--mini .rose__w--low { stroke-width: 3; }
.rose-wrap--mini .rose__prev { stroke-width: 3; }

.rose__w--empty { fill: none; stroke: var(--ink-muted); stroke-width: 1; stroke-dasharray: 3 4; }

/* ---------- 13b. Home page ---------- */
/* Hero: headline, line, rose, actions. On phones the order is headline, line, rose, actions. */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: ". fig" "title fig" "lede fig" "act fig" ". fig";
  column-gap: var(--s-7); row-gap: var(--s-5); padding-block: var(--s-8) var(--s-8);
}
.home-hero__title { grid-area: title; }
.home-hero__lede { grid-area: lede; }
.home-hero__act { grid-area: act; }
.home-hero__fig { grid-area: fig; display: grid; gap: var(--s-3); align-content: center; }
.home-hero__fig figcaption { font-size: var(--fs-13); color: var(--ink-muted); }
.home-hero__fig .empty-line { font-size: var(--fs-15); color: var(--ink); max-width: 44ch; }

/* Attention log: one ruled line of facts, like a log entry. Not KPI cards. */
.log { display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--ink); border-bottom: var(--hairline); }
.log__when { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 24px 12px 0; border-right: var(--hairline); font-size: var(--fs-13); color: var(--ink-muted); white-space: nowrap; }
.log__when b { color: var(--ink); font-weight: 600; }
.log__items { list-style: none; margin: 0; padding: 0; display: flex; }
.log__item { flex: 1 1 0; min-width: 0; display: flex; }
.log__item + .log__item { border-left: var(--hairline); }
.log__item a { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; min-height: 60px; padding: 12px 24px; text-decoration: none; color: var(--ink); align-content: center; }
.log__item a:hover { background: var(--shoal-pale); }
.log__item a:hover .log__text { text-decoration: underline; text-underline-offset: 3px; }
.log__label { font-size: var(--fs-13); color: var(--ink-muted); }
.log__text { font-size: var(--fs-15); line-height: 1.4; font-weight: 500; }
.log__text .num { font-size: var(--fs-17); }
.log__item--attention .log__label, .log__item--attention .log__text { color: var(--magenta); }
.log__item--attention .log__text { font-weight: 600; }

/* Tools, shown with real fragments */
.home-tool { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-6) var(--s-8); align-items: start; }
.home-tool--wide { grid-template-columns: 1fr; }
.home-tool__text { display: grid; gap: var(--s-4); align-content: start; max-width: 54ch; }
.home-tool--wide .home-tool__text { max-width: none; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
.home-note { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding-top: var(--s-3); border-top: var(--hairline); font-size: var(--fs-15); color: var(--ink-muted); line-height: 1.45; }
.home-note svg { width: 16px; height: 16px; margin-top: 2px; color: var(--ink); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.pair__item { display: grid; gap: var(--s-2); align-content: start; }
.pair__cap { font-size: var(--fs-13); color: var(--ink-muted); }
.pair__cap b { color: var(--ink); font-weight: 600; }
.pair .fragment { height: 100%; align-content: start; }
.fragment__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nots--4 { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--s-6) var(--s-7); }

@media (max-width: 1100px) {
  .home-hero { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "title" "lede" "fig" "act"; padding-block: var(--s-6) var(--s-7); row-gap: var(--s-5); }
  .home-tool, .home-tool--wide .home-tool__text { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; gap: var(--s-4); }
  .log { grid-template-columns: 1fr; }
  .log__when { flex-direction: row; gap: 6px; border-right: 0; border-bottom: var(--hairline); padding: 10px 0; white-space: normal; }
  .log__items { flex-direction: column; }
  .log__item + .log__item { border-left: 0; border-top: var(--hairline); }
  .log__item a { padding: 12px 0; min-height: 52px; }
}

/* ---------- 15. Motion ---------- */
@keyframes rose-grow { from { transform: scale(0.25); } to { transform: scale(1); } }
.rose--grow .rose__w, .rose--grow .rose__prev { transform-box: view-box; transform-origin: 0 0; animation: rose-grow var(--grow-dur) var(--ease-out) both; }
.rose--grow .w-b .rose__w { animation-delay: calc(var(--grow-step) * 1); }
.rose--grow .w-c .rose__w { animation-delay: calc(var(--grow-step) * 2); }
.rose--grow .w-d .rose__w { animation-delay: calc(var(--grow-step) * 3); }
.rose--grow .w-e .rose__w { animation-delay: calc(var(--grow-step) * 4); }
.rose--grow .w-f .rose__w { animation-delay: calc(var(--grow-step) * 5); }
.rose--grow .w-g .rose__w { animation-delay: calc(var(--grow-step) * 6); }
.rose--grow .w-h .rose__w { animation-delay: calc(var(--grow-step) * 7); }
.rose--grow .w-i .rose__w { animation-delay: calc(var(--grow-step) * 8); }
.rose--grow .w-j .rose__w { animation-delay: calc(var(--grow-step) * 9); }
@keyframes arrive { from { background-color: var(--shoal-pale); } to { background-color: transparent; } }
@keyframes settle { 0% { transform: scale(0.96); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rose--grow .rose__w, .rose--grow .rose__prev, .qrow.is-arrived, .approved-box.is-arrived, .rail__item.is-new .rail__marker, .spin { animation: none !important; }
}

/* ---------- 16. Responsive ---------- */
@media (max-width: 1100px) {
  .review { grid-template-columns: 1fr; }
  .detail { display: none; }
  .detail.is-open { display: grid; position: fixed; inset: 0; z-index: 30; overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; padding: 16px 16px 40px; }
  .detail__back { display: inline-flex; }
  .report-overview, .compare-grid { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .check { grid-template-columns: 1fr; gap: var(--s-5); }
  .rail-desk { display: none; }
  .rail-mob { display: block; }
  .rail-box { border: var(--hairline); border-radius: var(--r-panel); background: var(--sheet); }
  .rail-box summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; cursor: pointer; list-style: none; font-size: var(--fs-15); }
  .rail-box summary::-webkit-details-marker { display: none; }
  .rail-box .rail { padding: 4px 8px 12px; border-top: var(--hairline); }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .topbar__in { column-gap: var(--s-4); }
  .nav { order: 3; flex-basis: 100%; margin-inline: -12px; overflow-x: auto; }
  .nav a { min-height: 44px; }
  .company { display: none; }
  .t-display { font-size: var(--fs-44); line-height: 1.05; }
  .t-h1 { font-size: var(--fs-32); }
  .t-h2 { font-size: var(--fs-24); }
  .t-lede { font-size: var(--fs-17); }
  .page { padding-block: var(--s-5) var(--s-8); }
  .hero { padding-block: var(--s-6) var(--s-7); gap: var(--s-6); }
  .sheet--doc { padding: 24px 16px; margin-inline: calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
  .score { grid-template-columns: 28px minmax(0, 1fr) 40px; }
  .score .track { grid-column: 2 / 4; grid-row: 2; }
  .score__value { grid-row: 1; grid-column: 3; }
  .gap { grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s-3); }
  .gap__n { font-size: var(--fs-32); }
  .summary__actions { margin-left: 0; width: 100%; }
  .summary__actions .btn { flex: 1 1 auto; }
  .summary__note { text-align: left; }
  .qrow { grid-template-columns: 36px minmax(0, 1fr); }
  .qrow__status { grid-column: 2; grid-row: auto; justify-items: start; margin-top: 6px; }
  .qrow__n { grid-row: span 4; }
  .row-retry { padding-left: 52px; justify-content: flex-start; }
  .check-row { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .check-row__mini { width: 72px; }
  .check-row__actions { grid-column: 1 / -1; }
  .check-row__score { font-size: var(--fs-32); }
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td { display: block; width: 100%; }
  .tbl--stack tr { padding: 12px 16px; border-bottom: var(--hairline); }
  .tbl--stack tbody tr:last-child { border-bottom: 0; }
  .tbl--stack td { padding: 2px 0; border: 0; }
  .tbl--stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-muted); font-size: var(--fs-13); }
  .tbl--stack td.tbl__lead::before { content: none; }
  .filters .field { width: 100%; }
  .drop { padding: var(--s-5); }
  .empty { padding: var(--s-6) var(--s-4); }
}
@media (max-width: 600px) {
  .seg--scale { grid-template-columns: 1fr; }
  .seg--scale .seg__opt + .seg__opt { border-left: 0; border-top: 1px solid var(--rule); }
  .seg--scale .seg__opt label { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 52px; text-align: left; padding-inline: 16px; }
  .seg--scale .seg__l { font-size: var(--fs-15); }
  .seg { max-width: none; }
  .check-nav .btn { flex: 1 1 140px; }
}

/* ---------- 17. Print (A4 portrait, same markup) ---------- */
@page { size: A4 portrait; margin: 16mm 16mm 18mm; }
@media print {
  :root { --paper: #FFFFFF; }
  .app { background: #FFFFFF; font-size: 10.5pt; }
  .topbar, .footer, .report-tools, .no-print, .rail-box { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .page { padding: 0; }
  .sheet, .sheet--doc { border: 0; box-shadow: none; padding: 0; }
  .t-h1 { font-size: 26pt; }
  .t-h2 { font-size: 17pt; }
  .report-overview { grid-template-columns: 78mm minmax(0, 1fr); gap: 8mm; padding-block: 6mm; }
  .score { padding: 2.2mm 0; grid-template-columns: 7mm minmax(0, 1fr) 30mm 9mm; }
  .score__name { font-size: 9pt; }
  .disclaimer-bar { position: static; }
  .report-gaps { break-before: page; }
  .gap { break-inside: avoid; }
  .rose--grow .rose__w { animation: none !important; }
  a { text-decoration: none; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* Fixed A4 print preview pages (canvas only): mirror of @media print at 96px/in */
.a4 { width: 794px; height: 1123px; background: #FFFFFF; color: var(--ink); font-family: var(--sans); padding: 60px 60px 56px; display: flex; flex-direction: column; gap: 22px; overflow: hidden; font-size: 14px; line-height: 1.45; font-weight: 420; }
.a4__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 12px; color: var(--ink-muted); }
.a4__head .brand { font-size: 18px; min-height: 0; }
.a4__head .brand svg { width: 18px; height: 18px; }
.a4 .facts dt { font-size: 12px; }
.a4 .facts dd { font-size: 14px; }
.a4 .score { grid-template-columns: 26px minmax(0, 1fr) 104px 34px; padding: 7px 0; gap: 2px 10px; }
.a4 .score__name { font-size: 12.5px; line-height: 1.3; }
.a4 .score__letter { font-size: 12.5px; }
.a4 .score__value { font-size: 16px; }
.a4 .gap { padding: 14px 0; grid-template-columns: 40px minmax(0, 1fr); }
.a4 .gap__n { font-size: 30px; }
.a4 .gap__q { font-size: 14px; }
.a4 .gap__advice { font-size: 13.5px; line-height: 1.55; }
.a4 .facts--inline dd { font-size: 13px; }
.a4 .gap__facts { margin-top: 6px; gap: 4px 24px; }
.a4 .gap__facts > div { display: flex; gap: 6px; align-items: baseline; }
.a4 .gap__facts dd { margin: 0; }
.a4 .gap__advice { margin-top: 6px; }
.a4 .disclaimer { font-size: 13px; }
.a4__foot { margin-top: auto; display: grid; gap: 8px; }
.a4__pageno { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-muted); }

/* ---------- 18. Application additions (not in the design export) ---------- */
.skip { position: absolute; left: var(--s-4); top: -100px; z-index: 10; padding: var(--s-2) var(--s-3); background: var(--ink); color: var(--sheet); }
.skip:focus { top: var(--s-2); }
/* Beside the rose, the score list is too narrow for the official theme names on one line
   next to a bar, so the name gets the full width with the bar under it, as on phones. */
@media screen {
  .report-overview .score, .compare-grid .score { grid-template-columns: 32px minmax(0, 1fr) 44px; }
  .report-overview .score .track, .compare-grid .score .track { grid-column: 2 / 3; grid-row: 2; }
  .report-overview .score__value, .compare-grid .score__value { grid-row: 1 / 3; grid-column: 3; }
}
/* On a phone the sticky disclaimer would cover a sixth of the screen while reading; it stays
   at the end of the sheet instead (and in the footer). */
@media (max-width: 600px) {
  .disclaimer-bar { position: static; }
}