/* SCND: "second meter". Night-blue ink, sun-yellow accent, a dial for the signature.
   Pixel face for display only (h1, h2, the answer headline, the LCD panel): its capital C closes up and reads as O
   at small sizes, so buttons, summaries, labels and h3 use the system font. */
@font-face { font-family:"Pixelify Sans"; font-weight:400; font-display:swap; src:url("/fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Pixelify Sans"; font-weight:700; font-display:swap; src:url("/fonts/pixelify-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"DSEG7 Classic"; font-weight:400; font-display:swap; src:url("/fonts/dseg7-classic-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"DSEG7 Classic"; font-weight:700; font-display:swap; src:url("/fonts/dseg7-classic-latin-700-normal.woff2") format("woff2"); }
/* Fonts: Pixelify Sans and DSEG7 Classic, both SIL OFL 1.1, self-hosted (licences in /fonts). Body text stays in the system font. */
:root {
  color-scheme: light;
  --bg:#F3F6FA; --card:#FFFFFF; --soft:#EAF0F7; --ink:#0E1B2C; --muted:#54657B; --line:#D6DFEA; --edge:#9FB1C6; --shadow:#C9D5E3; --grid:rgba(14,27,44,.05); --link:#0B5FB0;
  --sun:#FFC83D; --sun-ink:#0E1B2C; --btn-edge:#0E1B2C;
  --focus:#0B5FB0; --field:#74879E; /* focus ring and input border: both at least 3:1 on --bg and --card (WCAG 1.4.11) */
  --green:#17794F; --green-bg:#E1F4EA; --amber:#9A5B00; --amber-bg:#FFF0D3; --red:#B3261E; --red-bg:#FBE4E2;
  --d-green:#2FB67A; --d-amber:#F0A020; --d-red:#E2534A; --d-track:#D6DFEA; --d-grey:#9AA6B5;
  --c-save:#0B5FB0; --c-promise:#B45309;
  --pixel: "Pixelify Sans", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --lcd: "DSEG7 Classic", ui-monospace, "SF Mono", Menlo, monospace;
  --display: var(--pixel);
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme:dark;
  --bg:#0A1424; --card:#122239; --soft:#0E1B2E; --ink:#E8EEF6; --muted:#9DB0C7; --line:#233650; --edge:#35506F; --shadow:#050B14; --grid:rgba(255,255,255,.035); --link:#7DB8F5;
  --btn-edge:#050B14; --focus:#FFC83D; --field:#5E7A9A;
  --green:#5FD3A0; --green-bg:#123326; --amber:#F5B24A; --amber-bg:#3A2B0D; --red:#FF8E85; --red-bg:#3F1D1B;
  --d-green:#3FCB8C; --d-amber:#F5B24A; --d-red:#FF7A70; --d-track:#233650; --d-grey:#6B7A8D;
  --c-save:#3D8BDB; --c-promise:#C4820F;
} }
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0A1424; --card:#122239; --soft:#0E1B2E; --ink:#E8EEF6; --muted:#9DB0C7; --line:#233650; --edge:#35506F; --shadow:#050B14; --grid:rgba(255,255,255,.035); --link:#7DB8F5;
  --btn-edge:#050B14; --focus:#FFC83D; --field:#5E7A9A;
  --green:#5FD3A0; --green-bg:#123326; --amber:#F5B24A; --amber-bg:#3A2B0D; --red:#FF8E85; --red-bg:#3F1D1B;
  --d-green:#3FCB8C; --d-amber:#F5B24A; --d-red:#FF7A70; --d-track:#233650; --d-grey:#6B7A8D;
  --c-save:#3D8BDB; --c-promise:#C4820F;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
[x-cloak] { display:none !important; }
body { margin:0; background-color:var(--bg); background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:22px 22px; color:var(--ink); font:16px/1.5 var(--body); -webkit-font-smoothing:antialiased; }
main { max-width:640px; margin:0 auto; padding:16px 16px 72px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
::selection { background:var(--sun); color:var(--sun-ink); }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
h1, h2, h3 { font-family:var(--pixel); font-weight:700; letter-spacing:.01em; line-height:1.15; margin:0; }
h2 { font-size:22px; } h3 { font-family:var(--body); font-size:18px; letter-spacing:0; }
p { margin:0 0 10px; } .sub, .help { color:var(--muted); font-size:14px; } .help { margin:6px 0 0; }
.num, dd, .dial-num { font-variant-numeric:tabular-nums; }

/* header */
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 0 14px; }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand img { display:block; height:38px; width:auto; flex:none; border-radius:6px; box-shadow:2px 2px 0 var(--shadow); }
.tools { display:flex; gap:2px; align-items:center; }
button.theme { display:inline-flex; align-items:center; gap:6px; }
button.theme svg { width:18px; height:18px; flex:none; }

/* hero and steps */
.hero { padding:6px 0 6px; display:grid; gap:14px; }
.hero .row button { flex:1 1 160px; }   /* side by side when they fit, full-width stacked when they wrap */
.hero h1 { font-size:34px; } .hero p { color:var(--muted); font-size:16px; max-width:34em; margin:0; }
.lcd-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#0E1B2C; border:1.5px solid var(--edge); border-radius:14px; padding:12px 16px; box-shadow:4px 4px 0 var(--shadow); }
.lcd-panel .digits { font:700 44px/1 var(--lcd); color:var(--sun); letter-spacing:.06em; position:relative; }
.lcd-panel .digits::before { content:"8.8.8"; position:absolute; inset:0; color:#fff; opacity:.08; }
.lcd-panel .digits span { position:relative; }
.lcd-panel small { color:#B9C7D8; font:400 15px/1.2 var(--pixel); text-align:right; }
.steps { display:flex; gap:8px; list-style:none; margin:14px 0 6px; padding:0; }
.steps li { flex:1; padding:8px 10px; border-radius:10px; background:var(--soft); color:var(--muted); font:600 15px/1.2 var(--body); border:1.5px solid transparent; }
.steps li b { display:block; font:600 12px/1.4 var(--body); letter-spacing:.06em; text-transform:uppercase; }
.steps li.on { background:var(--card); color:var(--ink); border-color:var(--ink); box-shadow:2px 2px 0 var(--sun); }
.steps li.done { color:var(--green); }

/* explainer */
.explainer { margin:12px 0 0; }
.explainer-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.explainer-body { margin:4px 0 0; }
.explainer .why { font-size:16px; }
.tiles { list-style:none; margin:12px 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tiles li { background:var(--soft); border:1.5px solid var(--line); border-radius:12px; padding:10px; }
.tiles svg { width:100%; max-width:84px; height:auto; display:block; margin-bottom:6px; }
.tiles h3 { font-size:16px; } .tiles .ltr { color:var(--c-save); font-size:20px; }
.tiles p { font-size:14px; color:var(--muted); margin:4px 0 0; }
.flow { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; }
.flow li { display:flex; gap:10px; align-items:center; font-size:15px; }
.flow b { flex:none; width:24px; height:24px; border-radius:50%; background:var(--sun); color:var(--sun-ink); font:700 14px/24px var(--body); text-align:center; }
@media (min-width:520px) { .tiles { grid-template-columns:repeat(4,1fr); } }

/* cards and forms */
.card { background:var(--card); border:1.5px solid var(--edge); border-radius:14px; padding:16px; margin:14px 0; box-shadow:3px 3px 0 var(--shadow); }
.card.flush { padding:0; overflow:hidden; }
.grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 12px; } .grid > * { min-width:0; } .grid .wide { grid-column:1 / -1; }
label { display:flex; flex-direction:column; font-size:14px; font-weight:600; }
label span.hint { display:block; margin:2px 0 4px; font-weight:400; color:var(--muted); font-size:13px; }
input, select { display:block; width:100%; min-width:0; max-width:100%; font:inherit; font-weight:400; padding:10px 12px; margin-top:auto; border:1.5px solid var(--field); border-radius:10px; background:var(--bg); color:var(--ink); min-height:46px; text-align:left; -webkit-appearance:none; appearance:none; }
input:focus, select:focus { border-color:var(--focus); }
/* Example hints must not read as entered values: muted and italic (muted still passes 4.5:1). Same for a select still on its prompt. */
input::placeholder { color:var(--muted); opacity:1; font-style:italic; }
select.empty { color:var(--muted); font-style:italic; }
input[type=number] { -moz-appearance:textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* Safari gives date and month inputs their own intrinsic width and centres the text: reset both. */
input[type=date], input[type=month] { line-height:1.2; }
input::-webkit-date-and-time-value { text-align:left; min-height:1.2em; }
input::-webkit-datetime-edit { padding:0; }
select { padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a838d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
input[hidden] { display:none; }
input[type=checkbox] { -webkit-appearance:auto; appearance:auto; flex:none; width:22px; height:22px; min-height:0; margin:0; accent-color:var(--sun); }
label.check { flex-direction:row; align-items:flex-start; gap:12px; font-weight:400; font-size:15px; line-height:1.4; }
button { font:600 16px/1.2 var(--body); min-height:46px; padding:12px 16px; border-radius:10px; border:1.5px solid var(--edge); background:var(--card); color:var(--ink); cursor:pointer; box-shadow:0 2px 0 var(--shadow); }
button:active { transform:translateY(2px); box-shadow:none; }
button:disabled, button[aria-disabled="true"] { opacity:.55; cursor:default; }
button.primary { background:var(--sun); border-color:var(--btn-edge); color:var(--sun-ink); font-weight:700; box-shadow:0 3px 0 var(--btn-edge); }
button.primary:active { transform:translateY(3px); box-shadow:none; }
button.link { display:inline-flex; align-items:center; border:0; padding:0 8px; min-height:44px; color:var(--link); background:none; box-shadow:none; font-size:16px; } button.link:active { transform:none; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.err { color:var(--red); font-size:14px; margin:8px 0 0; }
.flag { background:var(--amber-bg); color:var(--amber); border-radius:12px; padding:10px 12px; margin:10px 0 0; font-size:14px; }
/* Two-low-months block: neutral surface so the copy, not the colour, carries it; red only on the marker and label. */
.raise { margin:12px 0 4px; padding:14px; background:var(--card); border:1.5px solid var(--line); border-radius:12px; font-size:15px; text-align:left; }
.raise p { margin:0 0 4px; }
.raise .raise-label { display:flex; align-items:center; gap:8px; margin:0 0 6px; color:var(--red); font-weight:700; }
.raise .raise-label i { width:10px; height:10px; border-radius:50%; background:var(--d-red); flex:none; }
.raise .row { margin-top:10px; gap:6px 12px; }
.flag.red { background:var(--red-bg); color:var(--red); } .flag.ok { background:var(--green-bg); color:var(--green); }
.banner { background:var(--soft); border:1px dashed var(--line); border-radius:12px; padding:10px 12px; font-size:14px; display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.optional { margin-top:6px; } .optional summary, details.sec summary, details.inputs summary { list-style:none; cursor:pointer; }
.optional summary::-webkit-details-marker, details.sec summary::-webkit-details-marker, details.inputs summary::-webkit-details-marker { display:none; }
.optional summary { color:var(--link); font-weight:600; font-size:15px; padding:12px 0; }
.optional summary::before, details.sec summary::after { content:"+"; display:inline-block; width:1.2em; font-weight:700; }
.optional[open] summary::before { content:"\2212"; }
.summary-line { display:flex; justify-content:space-between; align-items:center; gap:10px; }

/* bill card */
.bill-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.bill-head h3 { font:700 17px/1.3 var(--body); letter-spacing:0; }
.bill-title { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.bill-title .chip { margin-left:0; }
.bill-title h3:focus { outline:none; } .bill-title h3:focus-visible { outline:3px solid var(--focus); }
/* Remove confirm: the only destructive action in the card, so it gets the red tint and asks in words. */
.confirm { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:0 0 12px; padding:10px 12px; border-radius:12px; background:var(--red-bg); color:var(--red); font-size:14px; }
button.danger { background:var(--card); border-color:var(--red); color:var(--red); }
fieldset.src input:invalid { border-color:var(--red); }   /* bill numbers carry min=0; a minus sign shows here and in the message below */
.chip { display:inline-block; margin-left:8px; padding:1px 10px; border-radius:6px; font:700 13px/1.7 var(--body); vertical-align:middle; }
.chip.green { background:var(--green-bg); color:var(--green); } .chip.amber { background:var(--amber-bg); color:var(--amber); } .chip.red { background:var(--red-bg); color:var(--red); } .chip.none { background:var(--soft); color:var(--muted); } .chip.check { background:var(--amber-bg); color:var(--amber); }
details.inputs > summary { font:600 15px/1.2 var(--body); color:var(--muted); padding:12px 0 14px; display:flex; justify-content:space-between; }
details.inputs > summary::after { content:"Edit"; color:var(--link); font-weight:600; } details.inputs[open] > summary::after { content:"Hide"; }
/* Bill inputs in three source groups: tight rows inside a group, a rule and more air between groups. */
fieldset.src { border:0; margin:0; padding:0; min-width:0; }
fieldset.src + fieldset.src { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
fieldset.src legend { float:left; width:100%; padding:0; margin:0 0 14px; font:700 17px/1.3 var(--body); color:var(--ink); }
fieldset.src legend + * { clear:both; }
fieldset.src .grid { row-gap:12px; }
.grid .help-row { margin-top:-8px; }   /* the toggle belongs to the fields above it */
.grid .help-row + label { margin-top:4px; }
fieldset.src .grid > .help-row:last-child { margin-bottom:-12px; }   /* summary padding already gives the air before the next group */
.grid .help-row + .help-row { margin-top:-20px; }   /* two toggles in a row read as one list */
.nudge { margin:14px 0 0; padding:12px; background:var(--soft); border-radius:12px; color:var(--muted); font-size:14px; }

/* the answer: dial + plain sentence */
.answer { margin:16px -16px 0; padding:18px 16px 6px; border-top:1px solid var(--line); background:linear-gradient(var(--soft), transparent 70%); }
.dial { max-width:290px; margin:0 auto; }
.dial svg { display:block; width:100%; height:auto; }
.dial .arc { fill:none; stroke-width:14; stroke-linecap:butt; }
.dial .needle { transform-origin:100px 100px; transform:rotate(var(--a)); animation:sweep .9s cubic-bezier(.2,.8,.2,1) both; }
.dial .needle line { stroke:var(--ink); stroke-width:3; stroke-linecap:round; } .dial .needle circle { fill:var(--ink); }
.dial .scale { fill:var(--muted); font:600 10px var(--body); }
.dial .lcd-num { font:700 23px var(--lcd); fill:#FFC83D; } .dial .lcd-ghost { font:700 23px var(--lcd); fill:#fff; opacity:.09; } .dial .lcd-lbl { font:400 9px var(--pixel); fill:#B9C7D8; }
@keyframes sweep { from { transform:rotate(-90deg); } }
/* Dial for a PR above what panels can make: everything grey (arc via --d-grey in app.js). */
.dial .is-check .needle line { stroke:var(--d-grey); } .dial .is-check .needle circle { fill:var(--d-grey); } .dial .is-check .lcd-num { fill:#B9C7D8; }
@media (prefers-reduced-motion: reduce) { .dial .needle { animation:none; } }
.headline { font:700 24px/1.2 var(--pixel); text-align:center; margin:8px 0 6px; }
.answer .sub { text-align:center; max-width:30em; margin:0 auto 10px; }

/* result sections: tap to open */
details.sec { border-top:1px solid var(--line); margin:0 -16px; padding:0 16px; }
details.sec:last-child { margin-bottom:-16px; }
details.sec > summary { display:flex; align-items:center; gap:10px; padding:15px 0; font:600 16px/1.25 var(--body); }
details.sec > summary::after { order:3; color:var(--muted); margin-left:2px; }
details.sec[open] > summary::after { content:"\2212"; }
details.sec .teaser { margin-left:auto; white-space:nowrap; flex:none; color:var(--muted); font:600 14px/1.2 var(--body); font-variant-numeric:tabular-nums; }
details.sec > div { padding:0 0 14px; }
dl { display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:8px 0; } dt { color:var(--muted); font-size:14px; } dd { margin:0; text-align:right; font-weight:700; }
ol.steps-list { padding-left:20px; margin:8px 0; } ol.steps-list li { margin-bottom:10px; }

/* charts, payback */



/* payback chart */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:12px 0; }
.stat { border:1.5px solid var(--edge); border-radius:10px; padding:8px 12px; background:var(--soft); }
.stat:last-child:nth-child(odd) { grid-column:1 / -1; }
.stat small { display:block; color:var(--muted); font:600 12px/1.4 var(--body); text-transform:uppercase; letter-spacing:.06em; }
.stat .early-tag { display:block; width:fit-content; max-width:100%; margin:2px 0 4px; padding:1px 8px; border-radius:6px; background:var(--amber-bg); color:var(--amber); font:600 12px/1.6 var(--body); }   /* pace tiles before a year of bills */
.stat b { font:700 22px/1.25 var(--body); font-variant-numeric:tabular-nums; } .stat em { display:block; font-style:normal; color:var(--muted); font-size:13px; }
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--muted); margin:6px 0 2px; }
.key { display:inline-block; width:16px; border-top:3px solid; margin-right:6px; vertical-align:middle; border-radius:2px; }
.chartbox { position:relative; touch-action:pan-y; outline-offset:4px; }
.chartbox svg { display:block; width:100%; height:auto; }
.chartbox .grid-l { stroke:var(--line); stroke-width:1; } .chartbox .axis-l { stroke:var(--edge); stroke-width:1; }
.chartbox text { fill:var(--muted); font:12px var(--body); }
.chartbox text.endlbl { fill:var(--ink); font-weight:700; }
.chartbox .cross { stroke:var(--muted); stroke-width:1; }
.tip { position:absolute; top:6px; pointer-events:none; white-space:nowrap; background:var(--card); border:1.5px solid var(--edge); border-radius:10px; padding:8px 10px; font-size:13px; box-shadow:3px 3px 0 var(--shadow); min-width:190px; z-index:2; }
.tip .d { color:var(--muted); font-size:12px; margin-bottom:2px; } .tip .r { display:flex; justify-content:space-between; gap:14px; align-items:center; } .tip .r b { font-variant-numeric:tabular-nums; }
.chart-table { margin-top:6px; } .chart-table summary { color:var(--link); font-size:15px; font-weight:600; padding:12px 0; cursor:pointer; }
.chart-table table { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; } .chart-table th, .chart-table td { text-align:right; padding:4px 6px; border-bottom:1px solid var(--line); } .chart-table th:first-child, .chart-table td:first-child { text-align:left; } .chart-table th { color:var(--muted); font-weight:600; }

/* save nudge, footer */
.nudge-save { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.foot { display:block; margin-top:28px; color:var(--muted); font-size:14px; max-width:62ch; } .foot a { color:var(--link); display:inline-block; padding:12px 0; margin:-12px 0; }
label.check { min-height:44px; }

/* Findings sheet: a report page. Paper-white in every colour mode, so the screen preview matches the print.
   Fonts: Source Serif 4 (headings) and Source Sans 3 (text and tables), SIL OFL 1.1, self-hosted in /fonts.
   They only download when the sheet is opened. Their Latin subset has no peso sign, so the sheet writes PHP. */
@font-face { font-family:"Source Serif 4"; font-weight:600; font-display:swap; src:url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Serif 4"; font-weight:700; font-display:swap; src:url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:400; font-display:swap; src:url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:600; font-display:swap; src:url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:700; font-display:swap; src:url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }
#findings.paper { --focus:#0B5FB0; /* paper is white in every mode, so the dark-mode yellow ring would be 1.55:1 */ --p-ink:#1b2430; --p-muted:#566374; --p-rule:#b9c2cd; --p-faint:#e2e7ec; --p-accent:#1F3A5F; --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  background:#fff; color:var(--p-ink); border:1px solid #cfd6de; border-radius:4px; box-shadow:0 10px 28px rgba(0,0,0,.18); padding:22px 20px 18px;
  font:400 14px/1.45 "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric:tabular-nums lining-nums; }
#findings .toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px dashed var(--p-rule); color:var(--p-muted); font-size:13px; }
#findings .toolbar strong { color:var(--p-ink); }
#findings button { font:600 14px/1 "Source Sans 3", system-ui, sans-serif; }
.rpt-head { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding-bottom:8px; border-bottom:2px solid var(--p-accent); }
.rpt-brand { display:flex; align-items:center; gap:10px; color:var(--p-muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.rpt-brand img { height:22px; width:auto; border-radius:3px; display:block; }
.rpt-meta { text-align:right; font-size:12px; color:var(--p-muted); line-height:1.4; white-space:nowrap; } .rpt-meta b { color:var(--p-ink); font-weight:600; }
.rpt-title { font:700 25px/1.15 var(--serif); color:var(--p-accent); margin:14px 0 2px; }
.rpt-sub { color:var(--p-muted); margin:0 0 6px; font-size:14px; }
#findings h3 { font:600 14.5px/1.3 var(--serif); color:var(--p-accent); margin:14px 0 5px; padding-bottom:3px; border-bottom:1px solid var(--p-rule); text-transform:none; letter-spacing:0; }
#findings .lead { font-size:15px; margin:8px 0 6px; }
.figures { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border:1px solid var(--p-rule); margin:8px 0; }
.figures div { padding:7px 10px; border-left:1px solid var(--p-rule); } .figures div:first-child { border-left:0; }
.figures small { display:block; color:var(--p-muted); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; }
.figures b { font:700 20px/1.25 var(--serif); } .figures em { display:block; font-style:normal; color:var(--p-muted); font-size:12px; }
dl.kv { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:3px 14px; margin:6px 0; font-size:13.5px; }
dl.kv .kvp { display:contents; }
dl.kv dt { color:var(--p-muted); font-size:13.5px; } dl.kv dd { margin:0; text-align:left; font-weight:600; font-size:13.5px; }
table.rt { width:100%; border-collapse:collapse; font-size:12.5px; margin:4px 0 2px; }
.rt th { color:var(--p-muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; text-align:right; border-top:1px solid var(--p-ink); border-bottom:1px solid var(--p-ink); padding:4px 6px; vertical-align:bottom; }
.rt td { padding:4px 6px; text-align:right; border-bottom:1px solid var(--p-faint); }
.rt th:first-child, .rt td:first-child, .rt th:nth-child(5), .rt td:nth-child(5) { text-align:left; }
.rt td.low { font-weight:700; }
#findings .note { color:var(--p-muted); font-size:12px; margin:4px 0 0; }
#findings ol.q { list-style:none; counter-reset:q; margin:4px 0 6px; padding:0; }
#findings ol.q li { counter-increment:q; position:relative; padding-left:30px; margin:0 0 7px; }
#findings ol.q li::before { content:"Q" counter(q); position:absolute; left:0; top:0; font:700 13px/1.5 var(--serif); color:var(--p-accent); }
#findings ul { margin:4px 0 6px; padding-left:18px; } #findings li { margin-bottom:3px; }
.notes { border:1px solid var(--p-rule); height:74px; margin:6px 0 0; padding:4px 8px; color:var(--p-muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; background:repeating-linear-gradient(transparent 0 21px, var(--p-faint) 21px 22px); background-position:0 16px; }
.rpt-foot { margin-top:12px; padding-top:6px; border-top:1px solid var(--p-rule); color:var(--p-muted); font-size:11px; line-height:1.4; }
@media screen and (max-width:600px) {
  .figures { grid-template-columns:1fr; } .figures div { border-left:0; border-top:1px solid var(--p-rule); } .figures div:first-child { border-top:0; }
  dl.kv { grid-template-columns:auto 1fr; }
  .rt thead { display:none; }
  .rt, .rt tbody, .rt tr { display:block; }
  .rt tr { border-bottom:1px solid var(--p-rule); padding:6px 0; }
  .rt td { display:flex; justify-content:space-between; gap:12px; border:0; padding:2px 0; text-align:right !important; }
  .rt td::before { content:attr(data-label); color:var(--p-muted); text-align:left; }
  .rpt-head { flex-direction:column; align-items:flex-start; } .rpt-meta { text-align:left; }
}
@media print {
  @page { margin:14mm 16mm; }
  :root:root:root { --bg:#fff; --card:#fff; --ink:#111; --muted:#4a5563; --line:#c9d0d9; --edge:#c9d0d9; --shadow:transparent; --grid:transparent; }
  body { background:#fff; background-image:none; color:#111; }
  main { padding:0; max-width:none; }
  main.sheet-open > *:not(#findings) { display:none !important; }
  main.sheet-open #findings { display:block !important; border:0; box-shadow:none; border-radius:0; padding:0; margin:0; font-size:9pt; line-height:1.3; }
  #findings [data-noprint] { display:none !important; }
  .rpt-head { padding-bottom:5px; } .rpt-brand { font-size:7.5pt; } .rpt-brand img { height:16px; } .rpt-meta { font-size:8pt; }
  .rpt-title { font-size:18pt; margin:7px 0 1px; } .rpt-sub { font-size:9pt; margin-bottom:2px; }
  #findings h3 { font-size:10pt; margin:6px 0 2px; padding-bottom:2px; break-after:avoid; }
  #findings .lead { font-size:10pt; margin:4px 0 3px; }
  .figures { margin:4px 0; } .figures div { padding:3px 8px; } .figures small { font-size:6.5pt; } .figures b { font-size:13pt; line-height:1.15; } .figures em { font-size:7.5pt; }
  dl.kv, dl.kv dt, dl.kv dd { font-size:8.5pt; } dl.kv { gap:0 12px; margin:2px 0; }
  table.rt { font-size:8pt; } .rt th { font-size:6.5pt; padding:2px 4px; } .rt td { padding:1.5px 4px; white-space:nowrap; }
  #findings .note { font-size:7.5pt; margin-top:3px; }
  #findings ol.q li { margin-bottom:2px; padding-left:24px; } #findings ol.q li::before { font-size:8.5pt; }
  #findings ul { margin:1px 0 2px; padding-left:14px; } #findings li { margin-bottom:1pt; }
  .notes { height:36px; font-size:6.5pt; margin-top:3px; background:repeating-linear-gradient(transparent 0 11px, #d9dee4 11px 12px); background-position:0 10px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .rpt-foot { font-size:7pt; margin-top:6px; padding-top:3px; }
  h3, .rt tr, ol.q li { break-inside:avoid; }
}

.bill-head > .row { flex-wrap:nowrap; gap:4px; flex:none; } .bill-head > .row .link { white-space:nowrap; }

label > .err { font-size:13px; font-weight:500; margin:2px 0 0; } input[aria-invalid=true], select[aria-invalid=true] { border-color:var(--red); }
@media (max-width:480px) { .bill-head { flex-wrap:wrap; } }

p.err[role=alert] { margin:0 0 12px; } label > .err { margin-top:4px; }