/* ==========================================================================
   avonlake.city — Public Record Design System
   ui_kits/app/app.css — the component layer

   Extracted verbatim (selectors, values, states) from index.html, the
   redesigned home page. This is the single component source of truth: the
   preview cards and every kit page load THIS file, so a change here shows up
   everywhere at once.

   Load order:
     colors_and_type.css  →  tokens.css  →  app.css
   ========================================================================== */

html{ scroll-behavior:smooth }           /* never scrollIntoView */
body{ overflow-x:hidden }

/* ---------- masthead ----------------------------------------------------- */
.topline{ height:var(--topline-h);
  background:linear-gradient(90deg,var(--forest-deep) 0 42%,var(--forest) 42% 74%,var(--volt) 74% 100%) }

header.mast{ position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in srgb,var(--canvas) 90%,transparent); backdrop-filter:blur(10px);
  border-bottom:var(--bw) solid var(--rule) }
.mast .wrap{ display:flex; align-items:center; gap:var(--sp-6); height:var(--header-h) }
.brand{ font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:var(--ls-brand);
  color:var(--ink); text-decoration:none }
.brand span{ color:var(--action) }
.mast .tag{ font-size:12px; color:var(--ink-quiet); border-left:var(--bw) solid var(--rule);
  padding-left:var(--sp-6); line-height:1.3 }
.mast nav{ margin-left:auto; display:flex; align-items:center; gap:24px }
.mast nav a{ font-size:var(--t-ui); color:var(--ink); text-decoration:none; position:relative }
.mast nav a:after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--action); transform:scaleX(0); transform-origin:left;
  transition:transform .2s var(--ease) }
.mast nav a:hover{ text-decoration:none; color:var(--action) }
.mast nav a:hover:after,.mast nav a[aria-current="page"]:after{ transform:scaleX(1) }
.mast nav a[aria-current="page"]{ color:var(--action) }
.menu-btn{ display:none; margin-left:auto; background:none; border:var(--bw) solid var(--rule);
  border-radius:var(--r-ctrl); padding:8px 11px; font-size:18px; cursor:pointer; color:var(--ink) }

.live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.05em; color:var(--ink-quiet) }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--leaf);
  animation:pulse 2.6s ease-out 3 }        /* three pulses, then stop */
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(63,143,82,.45) }
  70%{ box-shadow:0 0 0 7px rgba(63,143,82,0) }
  100%{ box-shadow:0 0 0 0 rgba(63,143,82,0) } }

.skip{ position:absolute; left:-9999px; top:0; z-index:var(--z-skip); background:var(--action);
  color:var(--action-on); padding:12px 20px; border-radius:0 0 var(--r-ctrl) 0; font-family:var(--mono);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase }
.skip:focus{ left:0 }

/* ---------- buttons ------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--mono);
  font-size:var(--t-src); letter-spacing:var(--ls-btn); text-transform:uppercase;
  padding:var(--sp-3) 18px; border-radius:var(--r-ctrl); cursor:pointer;
  border:var(--bw) solid var(--action); color:var(--action); background:transparent;
  text-decoration:none; transition:all var(--d-fast) var(--ease) }
.btn:hover{ background:var(--action); color:var(--action-on); text-decoration:none;
  transform:translateY(-1px); box-shadow:var(--shadow) }
.btn:active{ transform:translateY(0); box-shadow:var(--shadow-in) }
.btn.solid{ background:var(--action); color:var(--action-on); box-shadow:var(--shadow-sm) }
.btn.solid:hover{ background:var(--action-strong) }
.btn.ghost{ border-color:var(--rule); color:var(--ink) }
.btn.ghost:hover{ background:var(--evidence-inset); color:var(--ink); border-color:var(--action-edge) }
.btn.ondark{ border-color:rgba(255,255,255,.5); color:#fff }
.btn.ondark:hover{ background:#fff; color:var(--action-strong) }
.btn.volt{ background:var(--cta-dark); border-color:var(--cta-dark); color:var(--mark-ink) }
                                     /* volt role 3 of 4 — ONE per dark band */
.btn.volt:hover{ background:var(--volt-hover); border-color:var(--volt-hover); color:var(--volt-ink) }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; box-shadow:none }

/* ---------- highlighter -------------------------------------------------- */
.hl{ position:relative; display:inline }
.hl:before{ content:""; position:absolute; left:-.05em; right:-.05em; top:.16em; bottom:.16em;
  background:var(--mark);          /* volt role 1 of 4 */ transform:scaleX(0); transform-origin:left center;
  border-radius:var(--r-cell); z-index:-1; transition:transform var(--d-hl) var(--ease) .3s }
.hl.lit:before{ transform:scaleX(1) }

/* ---------- annotated-document grid -------------------------------------- */
.doc{ display:grid; grid-template-columns:var(--col-note) 1fr; gap:var(--sp-9); align-items:start }
.mg{ font-family:var(--mono); font-size:12px; line-height:var(--lh-mono); color:var(--ink-margin);
  border-top:var(--bw-note) solid var(--ink); padding-top:10px; letter-spacing:.01em }
.mg b{ display:block; color:var(--action); letter-spacing:.1em; text-transform:uppercase;
  font-size:10px; margin-bottom:7px; font-weight:600 }

/* ---------- bands -------------------------------------------------------- */
section.band{ padding:var(--band-y) 0; border-top:var(--bw) solid var(--rule) }
.band h2{ font-size:var(--t-h2); margin-top:9px; max-width:var(--m-h2) }
.band .head p{ color:var(--ink-quiet); font-size:var(--t-body-sm); margin:11px 0 0; max-width:var(--m-prose) }
.field{ padding:var(--field-y) 0; border-top:var(--bw) solid var(--rule); background:var(--evidence) }

/* ---------- hero --------------------------------------------------------- */
.hero{ padding:var(--hero-y) 0 var(--sp-2) }
.hero .wrap{ display:grid; grid-template-columns:var(--hero-split); gap:var(--sp-10); align-items:start }
.hero h1{ font-size:var(--t-h1); max-width:var(--m-h1); margin-top:var(--sp-4);
  line-height:var(--lh-tight); letter-spacing:var(--ls-h1) }
.hero .lede{ font-size:var(--t-lede); color:var(--ink-prose); max-width:var(--m-lede); margin:var(--sp-5) 0 0 }
.hero .under{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:var(--bw) solid var(--rule) }
@media(max-width:960px){ .hero .wrap{ grid-template-columns:1fr; gap:34px } }

/* ---------- filing-card panel -------------------------------------------- */
.panel{ border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-lg);
  border:var(--bw) solid var(--rule); background:var(--evidence) }
.panel-top{ background:var(--forest-deep); color:var(--panel-top-ink); padding:14px 17px;
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3) }
.panel-top .pl{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--volt) }
.panel-top .pt{ font-family:var(--serif); font-size:17px; margin-top:3px; color:#fff }
.panel-top :focus-visible{ outline-color:var(--volt) }
.prow{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:var(--sp-3) 17px; border-bottom:var(--bw) solid var(--rule-soft) }
.prow .k{ font-size:13px; color:var(--ink-prose) }
.prow .v{ font-family:var(--serif); font-size:var(--t-figure); font-variant-numeric:tabular-nums }
.psplit{ padding:15px 17px; border-bottom:var(--bw) solid var(--rule-soft) }
.psplit .lab{ display:flex; justify-content:space-between; font-size:var(--t-src);
  color:var(--ink-quiet); margin-bottom:var(--sp-2) }
.sbar{ display:flex; height:22px; border-radius:var(--r-bar); overflow:hidden;
  border:var(--bw) solid var(--rule) }
.sbar i{ display:block; font-style:normal; transition:width var(--d-bar) var(--ease) }
.pfoot{ padding:var(--sp-3) 17px; background:var(--evidence-inset); font-size:12px; color:var(--ink-prose) }

/* ---------- record field ------------------------------------------------- */
.fieldhead{ display:grid; grid-template-columns:1fr var(--col-cap); gap:36px;
  align-items:end; margin-bottom:24px }
.fieldhead h2{ max-width:26ch }
.fieldhead .cap{ text-align:right }
.grid197{ display:flex; flex-wrap:wrap; gap:var(--sp-1); max-width:100% }
.cell{ width:var(--cell); height:var(--cell); border-radius:var(--r-cell);
  transition:opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease) }
.grid197.focused .cell{ opacity:.13 }
.grid197.focused .cell.on{ opacity:1; transform:scale(1.18) }
.legend{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-6) }
.lg{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--t-ui-sm); padding:6px 11px;
  border:var(--bw) solid var(--rule); border-radius:var(--r-pill); cursor:pointer;
  background:var(--evidence); transition:all var(--d-fast) var(--ease) }
.lg:hover{ border-color:var(--action-edge); background:var(--evidence-inset) }
.lg[aria-pressed="true"]{ border-color:var(--action); background:var(--stamp-live-bg) }
.lg .sw{ width:10px; height:10px; border-radius:var(--r-cell); flex:none }
.lg .n{ font-family:var(--mono); font-size:var(--t-src); color:var(--ink-quiet) }

/* ---------- dark featured band ------------------------------------------- */
.feat{ background:var(--forest-deep); color:var(--on-dark-1); padding:var(--band-y-dark) 0;
  position:relative; overflow:hidden }
.feat:before{ content:""; position:absolute; top:-45%; right:-8%; width:55%; height:190%;
  background:radial-gradient(circle,rgba(63,143,82,.30),transparent 62%); pointer-events:none }
.feat .wrap{ position:relative }
.feat .eyebrow{ color:var(--volt) }
.feat h2{ color:#fff; font-size:var(--t-h2-dark); max-width:var(--m-h2-dark); margin-top:11px }
.feat .fl{ color:var(--on-dark-2); font-size:16px; max-width:56ch; margin:var(--sp-4) 0 0 }
.feat :focus-visible{ outline-color:var(--volt) }
.fgrid{ display:grid; grid-template-columns:var(--feat-split); gap:44px; align-items:center }
.ledger{ border:var(--bw) solid rgba(255,255,255,.18); border-radius:var(--r-card); overflow:hidden }
.lrow{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4);
  padding:15px 18px; border-bottom:var(--bw) solid rgba(255,255,255,.13) }
.lrow:last-child{ border-bottom:0 }
.lrow .lk{ font-size:var(--t-ui); color:var(--on-dark-3); max-width:24ch }
.lrow .lv{ font-family:var(--serif); font-size:var(--t-figure-xl); color:#fff;
  font-variant-numeric:tabular-nums; white-space:nowrap }
.lrow .lv.volt{ color:var(--figure-lead) }   /* volt role 2 of 4 — ONE per data block */
.cta{ margin-top:var(--sp-7); display:flex; gap:11px; flex-wrap:wrap }

/* ---------- method rows + callout ---------------------------------------- */
.mlist{ border-top:var(--bw) solid var(--rule) }
.mrow{ display:grid; grid-template-columns:var(--method-split); gap:var(--sp-6);
  align-items:baseline; padding:19px var(--sp-3) 19px 4px; border-bottom:var(--bw) solid var(--rule);
  transition:background var(--d-fast) var(--ease), padding var(--d-fast) var(--ease) }
.mrow:hover{ background:var(--evidence); padding-left:14px }
.mrow .num{ font-family:var(--mono); font-size:var(--t-src); color:var(--action); letter-spacing:.1em }
.mrow h3{ font-size:19px }
.mrow p{ font-size:14px; color:var(--ink-prose); margin:0 }
.rule{ margin-top:24px; background:var(--evidence-inset); border-left:var(--bw-accent) solid var(--action);
  border-radius:var(--r-inset); padding:17px 22px; font-size:var(--t-body-sm); color:var(--ink-prose) }
.rule b{ color:var(--ink) }

/* ---------- filing-tab card ---------------------------------------------- */
.cat,.catrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:34px }
.cat.four{ grid-template-columns:repeat(4,1fr) }   /* four tracks, one row */
.ic{ position:relative; background:var(--evidence); border:var(--bw) solid var(--rule);
  border-radius:var(--r-tab); padding:var(--sp-6) var(--sp-5) var(--sp-5); text-decoration:none;
  color:var(--ink); box-shadow:var(--shadow-sm); transition:all .2s var(--ease); display:block }
.ic:before{ content:attr(data-tab); position:absolute; top:-21px; left:-1px; background:var(--evidence);
  border:var(--bw) solid var(--rule); border-bottom:0; border-radius:6px 6px 0 0; padding:4px 13px;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--action) }
.ic:hover{ transform:translateY(var(--lift)); box-shadow:var(--shadow); border-color:var(--action-edge);
  text-decoration:none }
.ic:hover:before{ background:var(--action); color:#fff; border-color:var(--action) }
.ic h3{ font-size:var(--t-h3); margin-bottom:var(--sp-2) }
/* Optional figure slot. Serif and tabular, like every headline number in the
   system — a card that leads with a quantity still has to set it as one. */
.ic .fig{ font-family:var(--serif); font-size:var(--t-figure); font-variant-numeric:tabular-nums;
  line-height:1.1; margin:0 0 var(--sp-2) }
.ic p{ font-size:var(--t-ui); color:var(--ink-quiet); margin:0 0 var(--sp-4); line-height:var(--lh-prose) }
.icf{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  border-top:var(--bw) solid var(--rule-soft); padding-top:13px }
.icf .go{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--action) }

/* ---------- stamps ------------------------------------------------------- */
.stamp{ font-family:var(--mono); font-size:var(--t-stamp); letter-spacing:.11em; text-transform:uppercase;
  padding:3px var(--sp-2); border-radius:var(--r-bar); border:var(--bw) solid currentColor; opacity:.9 }
.stamp.live{ color:var(--status-held); background:var(--status-held-bg) }
.stamp.prep{ color:var(--status-pending); background:var(--status-pending-bg) }
/* The neutral chip IMPLEMENTATION.md § Status vocabulary has always specified
   for draft / open / withdrawn. It existed as a token and a table row before it
   existed as a class; asserted, not corroborated. */
.stamp.quiet{ color:var(--status-quiet); background:var(--status-quiet-bg) }
.stamp.quiet.struck{ text-decoration:line-through }

/* ---------- standards strip ---------------------------------------------- */
.stand{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:var(--bw) solid var(--rule);
  border-radius:var(--r-card); overflow:hidden; background:var(--evidence) }
.stand .st{ padding:var(--sp-7) 24px; border-right:var(--bw) solid var(--rule) }
.stand .st:last-child{ border-right:0 }
.stand .sn{ font-family:var(--mono); font-size:10.5px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--action); margin-bottom:var(--sp-3) }
.stand h3{ font-size:var(--t-h3-sm); margin-bottom:var(--sp-2) }
.stand p{ font-size:var(--t-ui); color:var(--ink-prose); margin:0; line-height:1.55 }

/* ---------- footer ------------------------------------------------------- */
footer{ background:var(--ink-band); color:var(--on-ink-2); padding:var(--footer-y) 0 56px }
.foot-grid{ display:grid; grid-template-columns:var(--foot-split); gap:40px }
footer .brand{ color:#fff } footer .brand span{ color:var(--wordmark-tld) }  /* volt role 4 of 4 */
footer :focus-visible{ outline-color:var(--volt) }
.disclaimer{ max-width:var(--m-lede); font-size:var(--t-ui-sm); color:var(--on-ink-3); line-height:1.65 }
.disclaimer b{ color:var(--on-ink-1) }
footer a{ color:var(--on-ink-2); font-size:var(--t-ui) }
footer a:hover{ color:var(--volt) }
.fh{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sage); margin-bottom:var(--sp-3) }
.fl-list div{ padding:5px 0 }
.colophon{ margin-top:34px; padding-top:var(--sp-5); border-top:var(--bw) solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; color:var(--on-ink-4); letter-spacing:.03em }

/* ==========================================================================
   EXTENSIONS — not observed in index.html.
   Built strictly from the tokens and posture above so the remaining
   avonlake.city pages have a table, a form and a tab set that belong to this
   system. Flagged so nobody mistakes them for source evidence.
   ========================================================================== */

/* Record table — the .prow row logic widened to columns. */
.rt{ width:100%; border-collapse:collapse; background:var(--evidence);
  border:var(--bw) solid var(--rule); border-radius:var(--r-card); overflow:hidden }
/* The table scrolls inside its own container at EVERY width. Before the
   390px pass this only applied under 960px, so a narrow viewport pushed the
   whole page sideways instead of the table. */
.rt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--r-card) }
.rt-scroll .rt{ min-width:520px }
.rt th{ text-align:left; font-family:var(--mono); font-size:10px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--action); font-weight:600; padding:11px 14px;
  background:var(--evidence-inset); border-bottom:var(--bw) solid var(--rule); white-space:nowrap }
.rt td{ padding:13px 14px; border-bottom:var(--bw) solid var(--rule-soft);
  font-size:var(--t-ui); vertical-align:baseline }
.rt tbody tr:last-child td{ border-bottom:0 }
.rt tbody tr{ transition:background var(--d-fast) var(--ease) }
.rt tbody tr:hover{ background:var(--evidence-inset) }
.rt td.num{ font-family:var(--serif); font-size:17px; font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap }
.rt td.meta{ font-family:var(--mono); font-size:var(--t-src); color:var(--ink-quiet) }
.rt caption{ caption-side:bottom; text-align:left; font-family:var(--mono); font-size:var(--t-src);
  color:var(--ink-quiet); padding-top:10px }

/* Labelled bar row — the .sbar fill logic unrolled into a list, for when a
   quantity has parts that each need naming. Encodes with fills, never
   outlines; every row carries its own value, so the chart is readable
   without the axis. */
.brow{ display:grid; grid-template-columns:150px 1fr 92px; align-items:center;
  gap:var(--sp-3); padding:9px 0; border-bottom:var(--bw) solid var(--rule-soft) }
.brow:last-child{ border-bottom:0 }
.brow .bl{ font-size:var(--t-ui) }
.brow .bt{ height:16px; background:var(--evidence-inset); border-radius:var(--r-cell);
  overflow:hidden }
.brow .bf{ display:block; height:100%; border-radius:var(--r-cell); background:var(--action);
  transition:width var(--d-bar) var(--ease) }
.brow .bv{ font-family:var(--serif); font-size:15px; font-variant-numeric:tabular-nums;
  text-align:right }

/* Stated-limits list — this system names a gap as loudly as a finding, so
   "what we can't show" is a component with a fixed shape, not a paragraph
   someone remembers to write. */
.gaps{ background:var(--evidence-inset); border:var(--bw) solid var(--rule);
  border-radius:var(--r-card); padding:20px 22px }
.gaps .gl{ font-family:var(--mono); font-size:10.5px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--action); margin-bottom:var(--sp-3) }
.gaps ul{ margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px 24px }
.gaps li{ font-size:var(--t-ui); color:var(--ink-prose); padding-left:16px; position:relative;
  line-height:var(--lh-prose) }
.gaps li:before{ content:"—"; position:absolute; left:0; color:var(--action) }
.gaps p{ font-size:var(--t-ui); color:var(--ink-prose); margin:0 0 12px }

/* The filing-tab card, promoted to a tab trigger. Same card, one state added:
   selected inverts the tab exactly the way hover does, so the affordance and
   the state read as the same gesture. */
button.ic{ width:100%; text-align:left; font-family:inherit; cursor:pointer }
.ic[aria-selected="true"]{ border-color:var(--action); box-shadow:var(--shadow) }
.ic[aria-selected="true"]:before{ background:var(--action); color:#fff; border-color:var(--action) }

/* A legend chip that isn't a control shouldn't claim to be one. */
li.lg,span.lg{ cursor:default }

/* Five-cell standards strip, for a process rail. Same divided box. */
.stand.five{ grid-template-columns:repeat(5,1fr) }

/* Form — quiet and official. Forest focus ring, no decorative chrome. */
.fld{ margin-bottom:18px }
.fld label{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--action); margin-bottom:6px; font-weight:600 }
.fld .hint{ font-family:var(--mono); font-size:var(--t-src); color:var(--ink-quiet); margin-top:6px }
/* Form control edges use --rule-strong, not --rule. A control's boundary is a
   non-text UI element and WCAG 2.2 AA asks 3:1 for it; --rule is a 1.29:1
   hairline meant for organising a page, not for saying "this is an input". */
.fld input,.fld select,.fld textarea{ width:100%; font-family:var(--sans); font-size:var(--t-body);
  color:var(--ink); background:var(--evidence); border:var(--bw) solid var(--rule-strong);
  border-radius:var(--r-ctrl); padding:11px var(--sp-3); transition:border-color var(--d-fast) var(--ease) }
.fld input:hover,.fld select:hover,.fld textarea:hover{ border-color:var(--action-edge) }
.fld textarea{ min-height:104px; resize:vertical; line-height:var(--lh-body) }
.fld .req{ color:var(--amber-ink) }

/* Tabs — the filing tab, promoted to navigation. */
.tabs{ display:flex; gap:4px; border-bottom:var(--bw) solid var(--rule); margin-bottom:var(--sp-6) }
.tabs button{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:9px 14px; background:transparent; border:var(--bw) solid transparent; border-bottom:0;
  border-radius:6px 6px 0 0; color:var(--ink-quiet); cursor:pointer; margin-bottom:-1px;
  transition:all var(--d-fast) var(--ease) }
.tabs button:hover{ color:var(--action); background:var(--evidence-inset) }
.tabs button[aria-selected="true"]{ background:var(--evidence); border-color:var(--rule-strong);
  color:var(--action) }

/* ---------- responsive (all four source breakpoints) --------------------- */
@media(max-width:1000px){
  .doc{ grid-template-columns:1fr; gap:18px }
  .mg{ border-top-width:var(--bw) }
  .cat,.catrow,.stand,.stand.five{ grid-template-columns:1fr }
  .cat.four{ grid-template-columns:1fr 1fr }   /* four tracks fold to two, then one */
  .brow{ grid-template-columns:120px 1fr 84px }
  .stand .st{ border-right:0; border-bottom:var(--bw) solid var(--rule) }
  .stand .st:last-child{ border-bottom:0 }
  .foot-grid{ grid-template-columns:1fr 1fr }
}
@media(max-width:960px){
  .mast .tag{ display:none }
  .mast nav{ display:none; position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0; background:var(--evidence);
    border-bottom:var(--bw) solid var(--rule); padding:var(--sp-2) var(--gutter) 14px }
  .mast nav.open{ display:flex }
  .mast nav a{ padding:13px 0; width:100%; border-bottom:var(--bw) solid var(--rule-soft) }
  .menu-btn{ display:block }
  .fgrid{ grid-template-columns:1fr; gap:34px }
  .mrow{ grid-template-columns:44px 1fr; gap:14px }
  .mrow p{ grid-column:2 }
  .rt{ display:block; overflow-x:auto }
}
@media(max-width:860px){
  .fieldhead{ grid-template-columns:1fr; gap:14px }
  .fieldhead .cap{ text-align:left }
}
@media(max-width:560px){
  .cell{ width:11px; height:11px }
  .foot-grid{ grid-template-columns:1fr }
  .cat.four{ grid-template-columns:1fr }
}

/* ---------- 430px — the narrow pass -------------------------------------
   The product requires a structurally complete 390px layout, which is below
   every breakpoint the source declared. These three rules are what 390px
   actually needed; verified in preview/narrow-390.html. */
@media(max-width:430px){
  /* A 21px serif figure beside a wrapping sans key crowds at this width.
     Stack them so the figure keeps its own line. */
  .prow{ display:grid; grid-template-columns:1fr; gap:2px; align-items:start }
  .prow .v{ justify-self:start }
  .psplit .lab{ flex-wrap:wrap; gap:4px }

  /* The filing tab is absolutely positioned and can exceed the card width.
     Let it wrap and give the card room to receive it. */
  .ic{ padding-top:var(--sp-7) }
  .ic:before{ position:static; display:inline-block; margin:0 0 10px -1px;
              border-bottom:var(--bw) solid var(--rule); border-radius:var(--r-bar) }

  /* Ledger labels lose their ch cap so the figure is never squeezed. */
  .lrow{ flex-direction:column; align-items:flex-start; gap:4px }
  .lrow .lk{ max-width:none }
}