/* ==========================================================================
   FinE Insurance Planning — visual system
   --------------------------------------------------------------------------
   TOKENS ONLY in the :root block below. If the FinE family token file is
   available in the host repository, replace this block with an import of it;
   nothing below the token block references a raw hex value.
   ========================================================================== */

:root {
  /* Canvas and depth ------------------------------------------------------ */
  --fine-canvas:        #FFFFFF;   /* white page canvas */
  --fine-surface-1:     #F7F6F6;   /* Steam-derived Level 1 depth */
  --fine-surface-2:     #EFEDED;   /* restrained Level 2 surface */
  --fine-line:          #E2DFDF;   /* Steam-derived hairline */
  --fine-line-strong:   #8A8688;   /* >= 3:1 on canvas for control boundaries */

  /* Ink ------------------------------------------------------------------- */
  --fine-ink:           #1A1A1A;
  --fine-ink-2:         #4A4D52;
  --fine-ink-3:         #63666E;   /* Cool Gray, darkened to pass AA on Level 2 surfaces */
  --fine-ink-hover:     #000000;   /* pressed/hover state on solid controls */
  --fine-print-line:    #999999;   /* print-only rule; screen uses --fine-line */

  /* Structural anchors ---------------------------------------------------- */
  --fine-gold:          #CFB991;   /* anchor only — never a large fill */
  --fine-gold-deep:     #7C5F35;   /* Aged, darkened to pass AA on Level 2 surfaces */

  /* Radius --------------------------------------------------------------- */
  --fine-radius-sm:     3px;
  --fine-radius-md:     6px;
  --fine-radius-lg:     10px;

  /* Shadow (neutral) ------------------------------------------------------ */
  --fine-shadow-1:      0 1px 2px rgba(26, 26, 26, 0.06);
  --fine-shadow-2:      0 2px 6px rgba(26, 26, 26, 0.08);

  /* Type ----------------------------------------------------------------- */
  --fine-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --fine-font-num: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Rhythm --------------------------------------------------------------- */
  --fine-space-1: 0.25rem;
  --fine-space-2: 0.5rem;
  --fine-space-3: 0.75rem;
  --fine-space-4: 1rem;
  --fine-space-5: 1.5rem;
  --fine-space-6: 2rem;
  --fine-space-7: 3rem;
  --fine-measure: 68rem;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fine-canvas);
  color: var(--fine-ink);
  font-family: var(--fine-font);
  font-size: 1rem;
  line-height: 1.55;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--fine-space-3); font-weight: 600; }
h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }
p { margin: 0 0 var(--fine-space-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--fine-space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--fine-space-2); }
li:last-child { margin-bottom: 0; }
a { color: var(--fine-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--fine-gold-deep); }
strong { font-weight: 600; }

.wrap { max-width: var(--fine-measure); margin: 0 auto; padding: 0 var(--fine-space-5); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--fine-space-4); top: -3rem; z-index: 20;
  background: var(--fine-ink); color: var(--fine-canvas);
  padding: var(--fine-space-2) var(--fine-space-4);
  border-radius: var(--fine-radius-sm); text-decoration: none;
  transition: top 120ms ease-out;
}
.skip-link:focus { top: var(--fine-space-3); color: var(--fine-canvas); }

:focus-visible {
  outline: 3px solid var(--fine-ink);
  outline-offset: 2px;
  border-radius: var(--fine-radius-sm);
}
main:focus { outline: none; }

/* ==========================================================================
   Header / footer
   ========================================================================== */

.site-header {
  border-bottom: 2px solid var(--fine-gold);
  background: var(--fine-canvas);
}
.site-header__inner {
  display: flex; flex-wrap: wrap; gap: var(--fine-space-3);
  align-items: baseline; justify-content: space-between;
  padding-top: var(--fine-space-4); padding-bottom: var(--fine-space-4);
}
.brand { text-decoration: none; color: var(--fine-ink); display: inline-flex; gap: var(--fine-space-2); align-items: baseline; }
.brand:hover { color: var(--fine-ink); }
.brand__fine { font-weight: 700; letter-spacing: 0.02em; font-size: 1.125rem; }
.brand__sep { color: var(--fine-line-strong); }
.brand__product { font-size: 1.125rem; color: var(--fine-ink-2); }
.site-header__note { margin: 0; font-size: 0.8125rem; color: var(--fine-ink-3); }

.site-footer {
  margin-top: var(--fine-space-7);
  border-top: 1px solid var(--fine-line);
  background: var(--fine-surface-1);
  padding: var(--fine-space-5) 0;
}
.site-footer__line { margin: 0 0 var(--fine-space-1); font-size: 0.875rem; color: var(--fine-ink-2); }
.site-footer__small { margin: var(--fine-space-3) 0 0; font-size: 0.8125rem; color: var(--fine-ink-3); max-width: 46rem; }

/* ==========================================================================
   Shared pieces
   ========================================================================== */

.eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fine-gold-deep);
  margin: 0 0 var(--fine-space-2);
}
.eyebrow--ink { color: var(--fine-ink-3); }

.lede { font-size: 1.0625rem; color: var(--fine-ink-2); max-width: 44rem; }

.principle {
  margin: 0 0 var(--fine-space-5);
  padding: var(--fine-space-4) 0 var(--fine-space-4) var(--fine-space-4);
  border-left: 3px solid var(--fine-gold);
  font-size: 1.125rem; font-weight: 600; max-width: 42rem;
}
.principle--sm { font-size: 1rem; font-weight: 600; }

.panel {
  background: var(--fine-surface-1);
  border: 1px solid var(--fine-line);
  border-radius: var(--fine-radius-md);
  padding: var(--fine-space-5);
  margin-bottom: var(--fine-space-5);
}
.panel--plain { background: var(--fine-canvas); }
.panel--gold { border-top: 2px solid var(--fine-gold); }
.panel__title { margin-bottom: var(--fine-space-3); }

.note {
  border-left: 3px solid var(--fine-line-strong);
  padding-left: var(--fine-space-4);
  font-size: 0.9375rem; color: var(--fine-ink-2);
  margin-bottom: var(--fine-space-4);
}

.divider { border: 0; border-top: 1px solid var(--fine-line); margin: var(--fine-space-5) 0; }

.num { font-family: var(--fine-font-num); font-variant-numeric: tabular-nums; }

/* Disclosures — definitions available without hover -------------------- */
details.disclose {
  border: 1px solid var(--fine-line);
  border-radius: var(--fine-radius-md);
  background: var(--fine-canvas);
  margin-bottom: var(--fine-space-4);
}
details.disclose > summary {
  cursor: pointer; padding: var(--fine-space-3) var(--fine-space-4);
  font-weight: 600; font-size: 0.9375rem;
  border-radius: var(--fine-radius-md);
  list-style: none;
}
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before {
  content: "+"; display: inline-block; width: 1rem;
  color: var(--fine-gold-deep); font-weight: 700;
}
details.disclose[open] > summary::before { content: "\2212"; }
details.disclose[open] > summary { border-bottom: 1px solid var(--fine-line); border-radius: var(--fine-radius-md) var(--fine-radius-md) 0 0; }
.disclose__body { padding: var(--fine-space-4); font-size: 0.9375rem; color: var(--fine-ink-2); }
.disclose__body p { margin-bottom: var(--fine-space-3); }

/* Buttons -------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--fine-radius-sm);
  border: 1px solid var(--fine-ink);
  background: var(--fine-ink); color: var(--fine-canvas);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--fine-ink-hover); color: var(--fine-canvas); }
.btn--secondary { background: var(--fine-canvas); color: var(--fine-ink); border-color: var(--fine-ink-3); }
.btn--secondary:hover { background: var(--fine-surface-1); color: var(--fine-ink); border-color: var(--fine-ink); }
.btn--quiet {
  background: none; border: 0; padding: 0.3rem 0; color: var(--fine-ink);
  text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--fine-surface-2); color: var(--fine-ink-3);
  border-color: var(--fine-line); cursor: not-allowed;
}
.btn-row {
  display: flex; flex-wrap: wrap; gap: var(--fine-space-3);
  align-items: center; margin-top: var(--fine-space-5);
}
.btn-row--split { justify-content: space-between; }

/* ==========================================================================
   Module layout: reasoning rail + content
   ========================================================================== */

.module { padding-top: var(--fine-space-5); }

.module__grid {
  display: grid; gap: var(--fine-space-6);
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 60rem) {
  .module__grid { grid-template-columns: minmax(0, 1fr); gap: var(--fine-space-5); }
}

/* Progress ------------------------------------------------------------- */
.progress { margin-bottom: var(--fine-space-4); }
.progress__label { font-size: 0.8125rem; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-2); }
.progress__track { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.progress__seg {
  height: 5px; flex: 1 1 0; background: var(--fine-surface-2);
  border-radius: 1px; margin: 0;
}
.progress__seg--done { background: var(--fine-line-strong); }
.progress__seg--current { background: var(--fine-ink); }

/* Reasoning rail (signature element) ----------------------------------- */
.rail { border-top: 2px solid var(--fine-gold); padding-top: var(--fine-space-4); }
.rail__title {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-3);
}
.rail__list { list-style: none; margin: 0; padding: 0; counter-reset: rq; }
.rail__item {
  counter-increment: rq;
  border-left: 3px solid var(--fine-line);
  padding: var(--fine-space-2) 0 var(--fine-space-2) var(--fine-space-3);
  margin: 0 0 var(--fine-space-1);
  font-size: 0.8125rem; color: var(--fine-ink-3);
}
.rail__item::before {
  content: counter(rq); display: inline-block; width: 1.1rem;
  font-family: var(--fine-font-num); color: var(--fine-ink-3);
}
.rail__item--active {
  border-left-color: var(--fine-gold);
  color: var(--fine-ink); font-weight: 600;
  background: var(--fine-surface-1);
}
.rail__item--active::before { color: var(--fine-gold-deep); font-weight: 700; }
.rail__item--active .rail__tag { color: var(--fine-ink-2); }
.rail__tag { display: block; margin-left: 1.1rem; font-weight: 400; font-size: 0.75rem; color: var(--fine-ink-3); }
.rail__now { display: block; margin-left: 1.1rem; font-size: 0.75rem; font-weight: 700; color: var(--fine-gold-deep); letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 60rem) {
  .rail { border-top-width: 2px; }
  .rail__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--fine-space-1); }
}

/* Step header ---------------------------------------------------------- */
.step__anchor {
  border-left: 3px solid var(--fine-gold);
  padding-left: var(--fine-space-4);
  margin-bottom: var(--fine-space-4);
}
.step__anchor-q { margin: 0; font-size: 1rem; font-weight: 700; }
.step__anchor-tag { margin: 0; font-size: 0.8125rem; color: var(--fine-ink-3); }
.step__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-1); }

/* ==========================================================================
   Household snapshot
   ========================================================================== */

.snapshot__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--fine-space-4); margin: 0;
}
.snapshot__item {
  border-top: 1px solid var(--fine-line); padding-top: var(--fine-space-3);
}
.snapshot__dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-1); }
.snapshot__dd { margin: 0; font-size: 0.9375rem; }
.snapshot__figure { font-family: var(--fine-font-num); font-variant-numeric: tabular-nums; font-size: 1.125rem; font-weight: 600; }

.snapshot-mini { margin-bottom: var(--fine-space-5); }

/* ==========================================================================
   Exposure switcher + exposure card
   ========================================================================== */

.expswitch { margin-bottom: var(--fine-space-4); }
.expswitch__label { font-size: 0.8125rem; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-2); }
.expswitch__list { display: flex; flex-wrap: wrap; gap: var(--fine-space-2); list-style: none; margin: 0; padding: 0; }
.expswitch__list li { margin: 0; }
.expswitch__btn {
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  background: var(--fine-canvas); border: 1px solid var(--fine-line-strong);
  color: var(--fine-ink-2); border-radius: var(--fine-radius-sm);
  padding: 0.3rem 0.6rem; cursor: pointer;
}
.expswitch__btn:hover { background: var(--fine-surface-1); }
.expswitch__btn[aria-current="true"] {
  background: var(--fine-ink); color: var(--fine-canvas); border-color: var(--fine-ink);
}
.expswitch__state { font-weight: 400; }

.exposure {
  border: 1px solid var(--fine-line);
  border-top: 2px solid var(--fine-gold);
  border-radius: var(--fine-radius-md);
  background: var(--fine-canvas);
  padding: var(--fine-space-5);
  margin-bottom: var(--fine-space-5);
  box-shadow: var(--fine-shadow-1);
}
.exposure__id { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-1); }
.exposure__title { font-size: 1.125rem; margin-bottom: var(--fine-space-3); }
.exposure__fact { margin: 0; font-size: 1rem; color: var(--fine-ink); }

.recap { list-style: none; margin: var(--fine-space-4) 0 0; padding: var(--fine-space-4) 0 0; border-top: 1px solid var(--fine-line); }
.recap li { display: flex; flex-wrap: wrap; gap: var(--fine-space-2); font-size: 0.875rem; margin-bottom: var(--fine-space-2); }
.recap__k { color: var(--fine-ink-3); min-width: 12rem; }
.recap__v { font-weight: 600; }

/* ==========================================================================
   Choice groups
   ========================================================================== */

fieldset.choices {
  border: 0; margin: 0 0 var(--fine-space-4); padding: 0;
}
fieldset.choices > legend {
  padding: 0; margin-bottom: var(--fine-space-3);
  font-weight: 600; font-size: 1rem;
}
.choices__hint { font-size: 0.875rem; color: var(--fine-ink-3); margin: -0.25rem 0 var(--fine-space-3); }

.choice {
  display: flex; gap: var(--fine-space-3); align-items: flex-start;
  border: 1px solid var(--fine-line);
  border-radius: var(--fine-radius-md);
  background: var(--fine-canvas);
  padding: var(--fine-space-3) var(--fine-space-4);
  margin-bottom: var(--fine-space-2);
  cursor: pointer;
}
.choice:hover { background: var(--fine-surface-1); }
.choice input { accent-color: var(--fine-ink); margin: 0.3rem 0 0; flex: none; width: 1.05rem; height: 1.05rem; }
.choice__text { font-size: 0.9375rem; }
.choice:has(input:checked) {
  border-color: var(--fine-ink); border-width: 2px;
  padding: calc(var(--fine-space-3) - 1px) calc(var(--fine-space-4) - 1px);
  background: var(--fine-surface-1);
}
.choice:has(input:focus-visible) { outline: 3px solid var(--fine-ink); outline-offset: 2px; }
.choices--inline { display: flex; flex-wrap: wrap; gap: var(--fine-space-2); }
.choices--inline .choice { margin: 0; flex: 1 1 12rem; }

/* Feedback ------------------------------------------------------------- */
.feedback:not(:empty) {
  border-left: 3px solid var(--fine-ink);
  background: var(--fine-surface-1);
  padding: var(--fine-space-3) var(--fine-space-4);
  border-radius: 0 var(--fine-radius-sm) var(--fine-radius-sm) 0;
  margin: var(--fine-space-3) 0 var(--fine-space-4);
  font-size: 0.9375rem;
}
.feedback__label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fine-ink-3);
  margin: 0 0 var(--fine-space-2);
}
.feedback p { margin-bottom: var(--fine-space-3); }
.feedback--reconsider { border-left-color: var(--fine-gold-deep); }

/* ==========================================================================
   Evidence grammar
   ========================================================================== */

.ev {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.15rem 0.5rem;
  border-radius: var(--fine-radius-sm); white-space: nowrap;
  color: var(--fine-ink); background: var(--fine-canvas);
}
.ev::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
.ev--known { border: 1px solid var(--fine-ink); }
.ev--known::before { background: var(--fine-ink); }
.ev--inference { border: 1px dashed var(--fine-ink-2); }
.ev--inference::before { background: linear-gradient(90deg, var(--fine-ink-2) 50%, transparent 50%); border: 1px solid var(--fine-ink-2); }
.ev--unknown { border: 1px dotted var(--fine-ink-2); color: var(--fine-ink-2); }
.ev--unknown::before { border: 1px solid var(--fine-ink-2); }
.ev--verify { background: var(--fine-ink); color: var(--fine-canvas); border: 1px solid var(--fine-ink); }
.ev--verify::before { background: var(--fine-gold); }

.evlist { list-style: none; margin: 0 0 var(--fine-space-4); padding: 0; }
.evlist li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fine-space-3);
  align-items: start; padding: var(--fine-space-3) 0; border-top: 1px solid var(--fine-line);
  font-size: 0.9375rem; margin: 0;
}
.evlist__flag { margin-top: var(--fine-space-2); }

/* A plain evlist is one logical text column: the two-column grid above is for
   rows whose first child is a short identifier, and a long lead sentence in
   that auto column forces the row wider than the viewport. Block display lets
   the locked text wrap naturally at any width. */
.evlist--plain li { display: block; }
.evlist--plain li > strong { display: block; margin-bottom: var(--fine-space-1); }

/* A held pre-routing row carries a long clarification note as a third child.
   In the two-column grid that note lands in the auto-sized column and forces
   the row wider than the viewport, so the row becomes a single text column and
   the note takes its own line. Backward-compatible: it changes only rows that
   are currently held, and removes the same reflow defect wherever they appear. */
.evlist li.evlist__locked { display: block; }
.evlist li.evlist__locked > .evlist__flag { display: block; margin-top: var(--fine-space-2); }

/* ==========================================================================
   Likelihood x severity — accessible table view (no drag and drop)
   ========================================================================== */

.viewtoggle { display: flex; gap: var(--fine-space-2); margin-bottom: var(--fine-space-3); flex-wrap: wrap; }
.viewtoggle__btn {
  font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  background: var(--fine-canvas); border: 1px solid var(--fine-line-strong);
  color: var(--fine-ink-2); border-radius: var(--fine-radius-sm); padding: 0.3rem 0.7rem;
}
.viewtoggle__btn[aria-pressed="true"] { background: var(--fine-ink); color: var(--fine-canvas); border-color: var(--fine-ink); }

.table-scroll { overflow-x: auto; margin-bottom: var(--fine-space-4); }
table.grid {
  border-collapse: collapse; width: 100%; font-size: 0.875rem;
  min-width: 34rem;
}
table.grid caption { text-align: left; font-size: 0.8125rem; color: var(--fine-ink-3); padding-bottom: var(--fine-space-2); }
table.grid th, table.grid td {
  border: 1px solid var(--fine-line); padding: var(--fine-space-3);
  vertical-align: top; text-align: left;
}
table.grid thead th { background: var(--fine-surface-2); font-size: 0.8125rem; }
table.grid tbody th { background: var(--fine-surface-1); font-size: 0.8125rem; width: 9rem; }
table.grid td ul { margin: 0; padding-left: 1rem; }
table.grid td li { margin-bottom: var(--fine-space-1); }
.grid__empty { color: var(--fine-ink-3); }

/* ==========================================================================
   Authored response
   ========================================================================== */

.authored { margin-bottom: var(--fine-space-5); }
.authored__label { display: block; font-weight: 600; margin-bottom: var(--fine-space-2); }
.authored__hint { font-size: 0.875rem; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-2); }
textarea.authored__input {
  width: 100%; font: inherit; font-size: 0.9375rem; line-height: 1.5;
  padding: var(--fine-space-3); color: var(--fine-ink); background: var(--fine-canvas);
  border: 1px solid var(--fine-line-strong); border-radius: var(--fine-radius-md);
  min-height: 6.5rem; resize: vertical;
}
textarea.authored__input:focus-visible { outline: 3px solid var(--fine-ink); outline-offset: 1px; }

.selfcheck {
  border: 1px solid var(--fine-line); border-top: 2px solid var(--fine-gold);
  border-radius: var(--fine-radius-md); background: var(--fine-surface-1);
  padding: var(--fine-space-5); margin-top: var(--fine-space-4);
}
.selfcheck__list { list-style: none; margin: 0 0 var(--fine-space-4); padding: 0; }
.selfcheck__list > li { border-top: 1px solid var(--fine-line); padding-top: var(--fine-space-3); margin-bottom: var(--fine-space-3); }
.selfcheck__k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-1); }
.selfcheck__q { margin: 0; font-size: 0.9375rem; }
.example { background: var(--fine-canvas); border: 1px solid var(--fine-line); border-radius: var(--fine-radius-md); padding: var(--fine-space-4); }
.example__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fine-ink-3); margin: 0 0 var(--fine-space-2); }
.example p { font-size: 0.9375rem; }
.example__caveat { font-size: 0.8125rem; color: var(--fine-ink-3); margin-top: var(--fine-space-3); }

/* ==========================================================================
   Tradeoffs
   ========================================================================== */

.tradeoffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--fine-space-4); margin-bottom: var(--fine-space-5); }
.tradeoff {
  border: 1px solid var(--fine-line); border-left: 3px solid var(--fine-gold);
  border-radius: 0 var(--fine-radius-md) var(--fine-radius-md) 0;
  background: var(--fine-canvas); padding: var(--fine-space-4);
}
.tradeoff h3 { margin-bottom: var(--fine-space-3); font-size: 1rem; }
.tradeoff h4 { margin: 0 0 var(--fine-space-2); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fine-ink-3); }
.tradeoff ul { font-size: 0.875rem; margin-bottom: var(--fine-space-4); }
.tradeoff ul:last-child { margin-bottom: 0; }

/* ==========================================================================
   Summary (Step 10)
   ========================================================================== */

.summary { border-top: 2px solid var(--fine-gold); padding-top: var(--fine-space-5); }
.summary__exposure {
  border: 1px solid var(--fine-line); border-radius: var(--fine-radius-md);
  padding: var(--fine-space-5); margin-bottom: var(--fine-space-5); background: var(--fine-canvas);
}
.summary__q { border-top: 1px solid var(--fine-line); padding-top: var(--fine-space-3); margin-top: var(--fine-space-4); }
.summary__q:first-of-type { border-top: 0; margin-top: var(--fine-space-3); padding-top: 0; }
.summary__qlabel { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fine-gold-deep); margin: 0 0 var(--fine-space-2); }
.summary__value { margin: 0; font-size: 0.9375rem; }
.summary__value ul { margin: 0; }
.summary__learner {
  background: var(--fine-surface-1); border-left: 3px solid var(--fine-ink);
  padding: var(--fine-space-3) var(--fine-space-4); font-size: 0.9375rem;
  white-space: pre-wrap; margin: 0;
}
.summary__closing {
  border-top: 2px solid var(--fine-gold); padding-top: var(--fine-space-4);
  font-size: 1.0625rem; font-weight: 600; max-width: 44rem;
}

/* ==========================================================================
   Insurance Home shell
   ========================================================================== */

.home { padding-top: var(--fine-space-6); }
.home__hero { max-width: 44rem; margin-bottom: var(--fine-space-6); }
.modlist { list-style: none; margin: 0; padding: 0; }
.modlist > li {
  border-top: 1px solid var(--fine-line); padding: var(--fine-space-4) 0;
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--fine-space-4); align-items: start; margin: 0;
}
@media (max-width: 40rem) {
  .modlist > li { grid-template-columns: 3rem minmax(0, 1fr); }
}
.modlist__id { font-family: var(--fine-font-num); font-weight: 700; font-size: 0.9375rem; }
.modlist__title { margin: 0 0 var(--fine-space-1); font-size: 1rem; font-weight: 600; }
.modlist__sub { margin: 0; font-size: 0.875rem; color: var(--fine-ink-3); }
.modlist__status { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fine-ink-3); }
.modlist > li.is-ready { border-left: 3px solid var(--fine-gold); padding-left: var(--fine-space-4); }

/* ==========================================================================
   IN2 — document excerpt panel and comparison
   All colours come from the token block; nothing below introduces a raw hex.
   ========================================================================== */

.doc {
  border: 1px solid var(--fine-line);
  border-left: 3px solid var(--fine-gold);
  border-radius: var(--fine-radius-md);
  background: var(--fine-surface-1);
  padding: var(--fine-space-5);
  margin: var(--fine-space-5) 0;
}

.doc__title { margin: 0 0 var(--fine-space-2); font-size: 1.0625rem; }

.doc__label {
  margin: 0 0 var(--fine-space-4);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fine-gold-deep);
  border: 1px dashed var(--fine-line-strong);
  border-radius: var(--fine-radius-sm);
  padding: var(--fine-space-2) var(--fine-space-3);
  background: var(--fine-canvas);
}

.doc__schedule {
  width: 100%; border-collapse: collapse; margin-bottom: var(--fine-space-5);
  background: var(--fine-canvas);
}
.doc__schedule caption {
  text-align: left; font-size: 0.8125rem; color: var(--fine-ink-3);
  padding-bottom: var(--fine-space-2);
}
.doc__schedule th, .doc__schedule td {
  border: 1px solid var(--fine-line); padding: var(--fine-space-2) var(--fine-space-3);
  text-align: left; font-size: 0.9375rem;
}
.doc__schedule td {
  font-family: var(--fine-font-num); font-variant-numeric: tabular-nums; width: 9rem;
}

.doc__section { margin-bottom: var(--fine-space-5); }
.doc__section:last-child { margin-bottom: 0; }

.doc__secheading {
  margin: 0 0 var(--fine-space-3); font-size: 0.9375rem;
  padding-bottom: var(--fine-space-2); border-bottom: 1px solid var(--fine-line);
}
.doc__secid { font-family: var(--fine-font-num); color: var(--fine-ink-3); }

.doc__provlist { list-style: none; margin: 0; padding: 0; }
.doc__prov {
  display: flex; gap: var(--fine-space-3);
  margin-bottom: var(--fine-space-3); font-size: 0.9375rem; line-height: 1.6;
}
.doc__provid {
  flex: none; width: 4.25rem;
  font-family: var(--fine-font-num); font-size: 0.8125rem; font-weight: 600;
  color: var(--fine-ink-3); padding-top: 0.15rem;
}
.doc__provtext { flex: 1 1 auto; }

.doc__term {
  font-style: normal; font-weight: 700;
  border-bottom: 2px solid var(--fine-gold);
}
.doc__termflag { font-size: 0.75rem; color: var(--fine-ink-3); }

.doc__section--endorsement {
  border: 1px solid var(--fine-line-strong);
  border-radius: var(--fine-radius-md);
  background: var(--fine-canvas);
  padding: var(--fine-space-4);
  margin-top: var(--fine-space-5);
}
.doc__endorserel {
  margin: 0 0 var(--fine-space-3); font-size: 0.875rem; color: var(--fine-ink-2);
  background: var(--fine-surface-2); border-radius: var(--fine-radius-sm);
  padding: var(--fine-space-2) var(--fine-space-3);
}

.doc--summary p { font-size: 0.9375rem; }
.doc__strong { font-weight: 600; }

.cite { list-style: none; margin: var(--fine-space-3) 0; padding: 0; }
.cite li {
  display: flex; gap: var(--fine-space-3);
  border-left: 2px solid var(--fine-line-strong);
  padding: var(--fine-space-2) 0 var(--fine-space-2) var(--fine-space-3);
  margin-bottom: var(--fine-space-2); font-size: 0.9375rem;
}
.cite__none { font-size: 0.9375rem; color: var(--fine-ink-3); font-style: italic; }

.rail__list--sub .rail__item { margin-bottom: var(--fine-space-4); }
.rail__q { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.03em; }
.rail__sub { display: block; margin-top: var(--fine-space-1); font-weight: 400; font-size: 0.75rem; color: var(--fine-ink-3); }
.rail__item--active .rail__sub { color: var(--fine-ink-2); }

.l1item { margin-bottom: var(--fine-space-5); }
.l2block {
  border: 1px solid var(--fine-line); border-radius: var(--fine-radius-md);
  padding: var(--fine-space-4); margin: var(--fine-space-5) 0;
  background: var(--fine-surface-1);
}
.l2block__prompt { margin: var(--fine-space-2) 0; }

.sidebyside { display: grid; gap: var(--fine-space-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .sidebyside { grid-template-columns: 1fr 1fr; } }
.sidebyside__col {
  border: 1px solid var(--fine-line); border-radius: var(--fine-radius-md);
  padding: var(--fine-space-4); background: var(--fine-canvas);
}
.sidebyside__col h3, .sidebyside__col h4 { margin-top: 0; font-size: 0.9375rem; }

.chiprow { display: flex; flex-wrap: wrap; gap: var(--fine-space-2); margin-bottom: var(--fine-space-4); }
.chip {
  font: inherit; font-size: 0.875rem; cursor: pointer;
  background: var(--fine-canvas); color: var(--fine-ink);
  border: 1px solid var(--fine-line-strong); border-radius: var(--fine-radius-sm);
  padding: var(--fine-space-2) var(--fine-space-3);
}
.chip--on { border-color: var(--fine-gold-deep); border-width: 2px; font-weight: 600; }

.qlist { list-style: none; margin: 0 0 var(--fine-space-5); padding: 0; }
.qlist li { margin-bottom: var(--fine-space-2); }
.qbtn {
  font: inherit; font-size: 0.9375rem; text-align: left; width: 100%; cursor: pointer;
  background: var(--fine-canvas); color: var(--fine-ink);
  border: 1px solid var(--fine-line); border-radius: var(--fine-radius-sm);
  padding: var(--fine-space-3);
}
.qbtn--on { border-color: var(--fine-gold-deep); border-width: 2px; font-weight: 600; }
.qbtn--done { border-left: 3px solid var(--fine-gold); }
.qbtn__id { font-family: var(--fine-font-num); font-size: 0.8125rem; color: var(--fine-ink-3); }
.qbtn__done { font-size: 0.8125rem; color: var(--fine-ink-3); }

table.cmp { width: 100%; border-collapse: collapse; margin: var(--fine-space-4) 0; }
table.cmp caption { text-align: left; font-size: 0.8125rem; color: var(--fine-ink-3); padding-bottom: var(--fine-space-2); }
table.cmp th, table.cmp td {
  border: 1px solid var(--fine-line); padding: var(--fine-space-3);
  text-align: left; vertical-align: top;
}
table.cmp thead th { background: var(--fine-surface-2); font-size: 0.8125rem; }

table.fn-table, table.evtable, table.snapshot {
  width: 100%; border-collapse: collapse; margin: var(--fine-space-4) 0;
}
table.fn-table caption, table.evtable caption, table.snapshot caption {
  text-align: left; font-size: 0.8125rem; color: var(--fine-ink-3); padding-bottom: var(--fine-space-2);
}
table.fn-table th, table.fn-table td,
table.evtable th, table.evtable td,
table.snapshot th, table.snapshot td {
  border: 1px solid var(--fine-line); padding: var(--fine-space-3);
  text-align: left; vertical-align: top; font-size: 0.9375rem;
}
table.fn-table thead th, table.evtable thead th { background: var(--fine-surface-2); font-size: 0.8125rem; }
table.fn-table tbody th, table.evtable tbody th, table.snapshot tbody th {
  background: var(--fine-surface-1); font-weight: 600;
}

.startq { padding-left: 1.25rem; }
.startq li { margin-bottom: var(--fine-space-3); }
.startq__q { margin: 0; font-weight: 600; }
.startq__src { margin: 0; font-size: 0.875rem; color: var(--fine-ink-3); }

.destdefs { display: grid; gap: var(--fine-space-3); margin: var(--fine-space-4) 0; }
.destdef {
  border-left: 3px solid var(--fine-gold); background: var(--fine-surface-1);
  border-radius: var(--fine-radius-sm); padding: var(--fine-space-3);
}
.destdef__name { margin: 0 0 var(--fine-space-1); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; }
.destdef p { margin: 0; font-size: 0.9375rem; }

.verifyrow {
  border: 1px solid var(--fine-line); border-radius: var(--fine-radius-md);
  padding: var(--fine-space-4); margin-bottom: var(--fine-space-4);
}
.verifyrow legend { font-weight: 600; font-size: 0.9375rem; padding: 0 var(--fine-space-2); }
.verifyrow__meta { margin: 0 0 var(--fine-space-3); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--fine-ink-3); }
.choices__list--row { display: flex; flex-wrap: wrap; gap: var(--fine-space-3); }
.choice--tight { flex: 1 1 14rem; }
.choice__hint { display: block; font-size: 0.8125rem; color: var(--fine-ink-3); }
.feedback--sm p { font-size: 0.875rem; }

.authored { margin: var(--fine-space-6) 0; }
.authored textarea {
  width: 100%; font: inherit; font-size: 0.9375rem; padding: var(--fine-space-3);
  border: 1px solid var(--fine-line-strong); border-radius: var(--fine-radius-sm);
  background: var(--fine-canvas); color: var(--fine-ink);
}

.sum { padding-left: 1.25rem; }
.sum li { margin-bottom: var(--fine-space-4); }
.sum__q { margin: 0 0 var(--fine-space-1); font-weight: 600; }
.sum__a { margin: 0; font-size: 0.9375rem; }
.sum__written {
  margin: var(--fine-space-2) 0 var(--fine-space-5); padding: var(--fine-space-3);
  border-left: 3px solid var(--fine-line-strong); background: var(--fine-surface-1);
  white-space: pre-wrap; font-size: 0.9375rem;
}

.viewtoggle__label { font-size: 0.8125rem; color: var(--fine-ink-3); align-self: center; }

/* ==========================================================================
   IN3 — calculation tables, fact lists, gap entry
   Tokens only; no raw hex below the token block.
   ========================================================================== */

table.calc, table.facts {
  width: 100%; border-collapse: collapse; margin: var(--fine-space-5) 0;
}
table.calc caption, table.facts caption {
  text-align: left; font-size: 0.8125rem; color: var(--fine-ink-3);
  padding-bottom: var(--fine-space-2);
}
table.calc th, table.calc td, table.facts th, table.facts td {
  border: 1px solid var(--fine-line); padding: var(--fine-space-3);
  text-align: left; vertical-align: top; font-size: 0.9375rem;
}
table.calc thead th, table.facts thead th {
  background: var(--fine-surface-2); font-size: 0.8125rem;
}
table.calc tbody th, table.facts tbody th {
  background: var(--fine-surface-1); font-weight: 600;
}
table.calc tfoot th, table.calc tfoot td {
  background: var(--fine-surface-2); font-weight: 700;
  border-top: 2px solid var(--fine-line-strong);
}
table.calc .num {
  font-family: var(--fine-font-num); font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.calc .calc__outside th, table.calc .calc__outside td {
  background: var(--fine-canvas); font-style: normal;
  border-top: 2px dashed var(--fine-line-strong);
}
table.calc--result { max-width: 40rem; }
table.calc--result .calc__result th, table.calc--result .calc__result td {
  border-top: 2px solid var(--fine-gold-deep); font-weight: 700;
}
.calc__text {
  font-size: 0.875rem; color: var(--fine-ink-2);
  border-left: 3px solid var(--fine-line-strong);
  padding: var(--fine-space-2) var(--fine-space-3);
  margin: 0 0 var(--fine-space-5);
  background: var(--fine-surface-1);
}
.unq {
  font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.03em;
  color: var(--fine-ink-2); border-bottom: 2px dotted var(--fine-line-strong);
}

.factlist { list-style: none; margin: var(--fine-space-4) 0; padding: 0; }
.factlist li {
  display: flex; gap: var(--fine-space-3); font-size: 0.9375rem;
  border-left: 2px solid var(--fine-line-strong);
  padding: var(--fine-space-2) 0 var(--fine-space-2) var(--fine-space-3);
  margin-bottom: var(--fine-space-2);
}
.factid {
  flex: none; width: 3.25rem; font-family: var(--fine-font-num);
  font-size: 0.8125rem; font-weight: 600; color: var(--fine-ink-3);
}

.gapentry {
  border: 1px solid var(--fine-line-strong); border-radius: var(--fine-radius-md);
  padding: var(--fine-space-4); margin: var(--fine-space-4) 0;
  background: var(--fine-surface-1);
}
.gapentry label { display: block; font-weight: 600; margin-bottom: var(--fine-space-2); }
.gapentry input {
  font: inherit; font-family: var(--fine-font-num); font-size: 1.0625rem;
  padding: var(--fine-space-2) var(--fine-space-3); width: 12rem;
  border: 1px solid var(--fine-line-strong); border-radius: var(--fine-radius-sm);
  background: var(--fine-canvas); color: var(--fine-ink);
}
.gapentry .btn { margin-top: var(--fine-space-3); }

.choice--hc label { font-weight: 600; }
.verifyrow__sub {
  margin: var(--fine-space-3) 0 var(--fine-space-2);
  font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fine-ink-3);
}

/* ==========================================================================
   IN4 — phase list, definition stages, calculation steps
   Tokens only; no raw hex below the token block.
   ========================================================================== */

.phaselist { list-style: none; margin: var(--fine-space-4) 0; padding: 0; counter-reset: phase; }
.phaselist > li {
  counter-increment: phase;
  border: 1px solid var(--fine-line); border-left: 3px solid var(--fine-gold);
  border-radius: var(--fine-radius-md);
  padding: var(--fine-space-4); margin-bottom: var(--fine-space-3);
  background: var(--fine-surface-1);
}
.phaselist__name { margin: 0 0 var(--fine-space-2); font-weight: 700; font-size: 0.9375rem; }
.phaselist .sum__a { margin-bottom: var(--fine-space-1); }

.calcsteps { list-style: none; margin: var(--fine-space-3) 0; padding: 0; }
.calcsteps li {
  font-family: var(--fine-font-num); font-variant-numeric: tabular-nums;
  font-size: 0.9375rem; padding: var(--fine-space-1) 0;
}
.calcsteps li:last-child { border-top: 1px solid var(--fine-line-strong); font-weight: 700; padding-top: var(--fine-space-2); }

.stages { margin: var(--fine-space-4) 0; }
.stages dt {
  font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fine-ink-2); margin-top: var(--fine-space-4);
}
.stages dd {
  margin: var(--fine-space-2) 0 0; padding: var(--fine-space-3);
  border-left: 3px solid var(--fine-line-strong); background: var(--fine-surface-1);
  border-radius: var(--fine-radius-sm); font-size: 0.9375rem;
}

/* ==========================================================================
   IN5 — premium/cost-sharing pairing
   Tokens only; no raw hex below the token block.
   ========================================================================== */

.sidebyside {
  display: grid; gap: var(--fine-space-4);
  grid-template-columns: 1fr; margin: var(--fine-space-4) 0;
}
@media (min-width: 46rem) {
  .sidebyside { grid-template-columns: 1fr 1fr; }
}
.sidebyside__col {
  border: 1px solid var(--fine-line); border-radius: var(--fine-radius-md);
  padding: var(--fine-space-4); background: var(--fine-surface-1);
}
.sidebyside__col h3 { margin-top: 0; }

/* ==========================================================================
   Motion / print
   ========================================================================== */

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

@media print {
  .site-header, .site-footer, .rail, .progress, .btn-row, .btn, .expswitch, .viewtoggle, .skip-link, .chiprow, .qlist, .gapentry { display: none !important; }
  .module__grid { display: block; }
  body { font-size: 11pt; }
  .summary__exposure, .panel, .doc, .verifyrow, .sum li, table.calc, .phaselist > li, .sidebyside__col { break-inside: avoid; border-color: var(--fine-print-line); }
  a[href]::after { content: ""; }
}


/* ==========================================================================
   IN8 Household Risk Map — two representations of identical content
   --------------------------------------------------------------------------
   Wide: a real 4x7 semantic table. Narrow: one stacked labelled block per row
   carrying all seven field labels. Only one is in the accessibility tree at a
   time, so a screen reader never traverses the map twice, and the narrow form
   is a stacked list rather than a horizontally scrolled table.
   ========================================================================== */

.riskmap__narrow { display: none; }
/* Fixed layout so seven columns of prose wrap inside the content column
   instead of pushing the table past it; the content is unchanged. */
.riskmap table.riskmap { table-layout: fixed; width: 100%; font-size: 0.875rem; }
.riskmap table.riskmap th, .riskmap table.riskmap td { overflow-wrap: break-word; }
/* The Exposure column is the row header and carries the most text; it is not
   width-constrained. The A-to-D identifier sits inside that cell. */
.riskmap__rowid { display: block; font-weight: 600; }
.riskmap th, .riskmap td { vertical-align: top; }
.riskrow { border-top: 1px solid var(--fine-line); padding: var(--fine-space-3) 0; }
.riskrow__name { margin: 0 0 var(--fine-space-2); }
.riskrow__fields { margin: 0; }
.riskrow__k { font-weight: 600; margin-top: var(--fine-space-2); }
.riskrow__v { margin: 0 0 var(--fine-space-2); }

/* The stacked representation is the default up to a width at which seven
   columns of prose are actually readable. Below it the wide table is not
   rendered at all — it is never a horizontally scrolled table. */
@media (max-width: 1100px) {
  .riskmap__wide { display: none; }
  .riskmap__narrow { display: block; }
}

/* ==========================================================================
   Release-shell sequence-completion block (RC1, additive)

   Home-page only. Reports the shape of the sequence and the absence of any
   judgment. It carries no instructional content and no state, so it is styled
   as quiet shell prose rather than as a result, an award or a callout: no
   accent colour, no badge, no icon, and no emphasis that would read as a
   completion verdict.
   ========================================================================== */
.seqdone {
  max-width: 44rem;
  margin-top: var(--fine-space-6);
  padding-top: var(--fine-space-4);
  border-top: 1px solid var(--fine-line);
}
.seqdone__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--fine-space-2);
}
.seqdone p {
  margin: 0 0 var(--fine-space-2);
  font-size: 0.875rem;
  color: var(--fine-ink-3);
  overflow-wrap: break-word;
}
.seqdone p:last-child { margin-bottom: 0; }

/* ==========================================================================
   RC2 — responsive reflow repair (WCAG 2.2 AA, SC 1.4.10)

   Rendering-only. No locked instructional content is altered, abbreviated,
   clipped, hidden or removed by anything below; no column is dropped and no
   font is reduced. Every rule is additive and narrow-width-scoped, so desktop
   rendering is materially unchanged.
   ========================================================================== */

/* --- Instructional tables ------------------------------------------------

   These tables set width:100% but size columns by content, so a long cell
   forces the table past its container and the page scrolls horizontally.
   Fixing the layout algorithm at narrow widths distributes the columns and
   lets long cell text wrap, which is how the IN8 risk map already behaves.
   word-break stays normal so words break only where they legitimately can. */
@media (max-width: 40rem) {
  table.calc,
  table.facts,
  table.cmp,
  table.evtable,
  table.snapshot,
  table.fn-table {
    table-layout: fixed;
  }
  table.calc th, table.calc td,
  table.facts th, table.facts td,
  table.cmp th, table.cmp td,
  table.evtable th, table.evtable td,
  table.snapshot th, table.snapshot td,
  table.fn-table th, table.fn-table td {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* --- Two-column list rows at the reflow condition ------------------------

   .evlist li is a grid of "auto minmax(0, 1fr)". The auto column resolves to
   max-content, so at the 320 CSS-px reflow condition a long identifier or lead
   phrase pushes the row wider than the viewport. This is the same failure the
   .evlist--plain rule above already documents; below the phone breakpoint the
   row becomes a single column so the locked text wraps naturally. All content
   is retained and simply stacks. */
@media (max-width: 24rem) {
  .evlist li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fine-space-1);
  }
  .evlist li > .evlist__flag { margin-top: var(--fine-space-2); }
}

/* --- Flex rows at the reflow condition -----------------------------------

   A flex item defaults to min-width:auto, so a long label refuses to shrink
   below its content and overflows its row. Allowing these items to shrink lets
   the label wrap; nothing is truncated. */
@media (max-width: 24rem) {
  .choice > *:not(input) { min-width: 0; }
  .choices__list--row { flex-wrap: wrap; }
  .choice--tight { flex: 1 1 100%; }
}

/* --- Citation rows at the reflow condition -------------------------------
   .cite li is a flex row; its items default to min-width:auto and so refuse to
   shrink below their content. Allowing them to shrink lets the locked excerpt
   text wrap. Nothing is truncated. */
@media (max-width: 24rem) {
  .cite li { flex-wrap: wrap; }
  .cite li > * { min-width: 0; overflow-wrap: break-word; }
}

/* --- Table cell padding at the reflow condition --------------------------
   At 320 CSS px the four-column instructional tables leave a numeric column
   narrower than a stated figure such as $198,000, which .num keeps on one line.
   Reclaiming horizontal padding gives the figure the room it needs, so the
   number is neither broken across lines nor wrapped mid-value. This is spacing
   only: no figure, column or qualification is altered. */
@media (max-width: 24rem) {
  table.calc th, table.calc td,
  table.facts th, table.facts td,
  table.cmp th, table.cmp td,
  table.evtable th, table.evtable td,
  table.snapshot th, table.snapshot td,
  table.fn-table th, table.fn-table td {
    padding: var(--fine-space-2);
  }
}

/* --- Qualification labels inside numeric cells ---------------------------
   .num keeps a stated figure on one line, which is correct for a numeral. A
   qualification label such as NOT QUANTIFIED IN THIS CASE is prose that also
   sits in that column and inherits the nowrap, so at narrow widths it forces
   the page sideways. Only the qualification is released to wrap; actual
   figures keep their nowrap and are never broken across lines. */
@media (max-width: 40rem) {
  table.calc td.num .unq,
  table.calc th.num .unq,
  table.facts td.num .unq {
    white-space: normal;
  }
}