@layer components{
/* rxdx CALCULATOR — the look. owner: 🎨 the designer. Beside `engine.js` (the math) and `ui.js` (the screen).
   Tokens only (tokens.css) — `tools/check_style.js` gates this file exactly as it gates site.css.

   👤, 2026-09-29: *"design a clean calc app… think about every element, spacing, breathability, optically
   pleasant."* The rules this file keeps:
   ① ONE RHYTHM — 24px between the blocks of a calculator (title · formula · fields · result · actions),
     12px between fields, 32px inside the app panel. Nothing else.
   ② EVERY FIELD IS THE SAME WIDTH, right-aligned, so the numbers form one column and the eye runs straight
     down it; the unit sits INSIDE the field after the number ("1.4 mg/dL"), not in gray brackets far away.
   ③ ONE ACCENT — the SITE's rust (STYLE_GUIDE §6): the chosen tool, the chosen sex, the result, the actions. No second color.
     ⛔ It was the walk's teal until 2026-10-26 — my own choice (9-29), never a ruling; 👤's teal (8-09) is the guidance WALK's alone,
     and the Style Guide stress test found the calculator answering "which accent?" against §6. The walk keeps its teal.
   ④ THE RESULT IS THE POINT, so it is the one filled panel — quiet gray and "—" until every field is set,
     teal once there is an answer. It never moves: the panel is always there, only its content changes. */

/* ── the body (the app, the pull-up, and a clinical tool card all render this) ───────────────────────── */
.calc{display:flex;flex-direction:column;gap:var(--sp-group)}
.calc-card{gap:var(--sp-block)}

.calc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-block)}
/* the title IS the tool's short name — the largest thing in the calculator, one line, no subtitle (👤) */
.calc-nm{margin:0;min-width:0;font-family:var(--sans);color:var(--ink)}
/* the Helpers panel is narrow, so its title and answer sit one step down — the same step the other Helper tabs use */
/* Clear is a quiet button whose word, not its padding, lines up with the right edge of the fields below it. */
.calc-clear{flex:none;height:var(--ctl-sm);padding:0 var(--sp-control);margin-right:calc(-1 * var(--sp-control));color:var(--ink-2);background:none;border:0;border-radius:var(--r-1);
  cursor:pointer;transition:border-color var(--dur-1),color var(--dur-1)}
.calc-clear:hover{color:var(--ink);background:var(--surface-2)}

/* the equation — the calculator's reference, so it sits UNDER the answer; a quiet display line, not a code dump */
/* the equation under the answer: the site's ONE equation look (`.mx`, below) — 🔬 2026-10-26 it was flat monospace text from a second
   renderer, while the Formulas tab drew the same equation as real math (👤 2026-10-15: "must look like real math"). Centered, secondary ink. */
.calc-expr{color:var(--ink-2);background:var(--surface-2);border-radius:var(--r-1);padding:var(--sp-item) var(--sp-control)}
.calc-expr .mx{justify-content:center}

/* ⛳ WHAT YOU TYPED, A LINE, WHAT IT CALCULATED — every calculator (👤 2026-10-31 on Acid–Base: "the value it calculates isn't differentiated,
   maybe it should be below a line"). One hairline under the inputs; the answers sit below it. A panel whose answers have not appeared yet
   (a job calculator before its inputs are in) draws no line over nothing. */
.calc-fields{display:flex;flex-direction:column;gap:var(--sp-item);padding-bottom:var(--sp-group);border-bottom:1px solid var(--line)}
.calc-job:not(:has(.jp-results > *)) > .calc-fields{padding-bottom:0;border-bottom:0}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-block)}
.calc-lb{flex:1 1 0;min-width:0;color:var(--ink)}

/* a field = the number + its unit, one bordered box of one fixed width */
.calc-field{flex:none;display:inline-flex;align-items:center;width:11rem;height:var(--ctl);overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-1);transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.calc-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.calc-in{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;padding:0 var(--sp-item) 0 var(--sp-control);
  font-family:var(--body);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
/* touch targets (site.css "TOUCH TARGETS"): a text field cannot carry the invisible --tap square, so on touch it is simply --tap tall */
@media (pointer:coarse){ .calc-field{height:var(--tap)} }
.calc-in:focus{outline:none}
.calc-in::-webkit-inner-spin-button,.calc-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.calc-sfx{flex:none;padding-right:var(--sp-control);color:var(--ink-2);white-space:nowrap}
/* a value carried in from IBW / AdjBW says where it landed */
.calc-field.is-carried{background:var(--accent-bg);border-color:var(--accent)}

/* Sex / kg | lb are the site bar's size variants (.seg-field · .seg-inset, site.css) — the calculator draws no bar of its own */
/* ⛳ RESTORED 2026-10-31 (👤: "How did this get messed up?" — the Calculator list ran its rows together; scores and every result
   read as run-together text). 🔬 0ac81c20 (10-30, modular step 1) replaced 119 lines here with one comment while retiring the old
   segmented control: the result panel, Send/Insert, the score checklist, the band, the notes, the picker and its groups went with it.
   Put back verbatim (minus the retired seg control and the old name-chip pull-up). Guard: design gate A5 tools/check_classes.js (every
   class the front end draws must have a rule) — it blocks the deploy. */
/* the answer — always present, quiet until complete */
.calc-result{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-block);
  padding:var(--sp-block);background:var(--surface-2);border-radius:var(--r-2);transition:background-color var(--dur-1)}
.calc-res-lb{color:var(--ink-2)}
.calc-res-v{display:inline-flex;align-items:baseline;gap:var(--sp-inside);white-space:nowrap}
.calc-out{color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.calc-res-u{color:var(--ink-3)}
.calc.has-result .calc-result{background:var(--accent-bg)}
.calc.has-result .calc-res-lb{color:var(--ink)}
.calc.has-result .calc-out{color:var(--accent-press)}
.calc.has-result .calc-res-u{color:var(--ink-2)}

/* what to do with the answer — carry it on (IBW → AdjBW → Cockcroft-Gault), or insert it into a decision */
.calc-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-item)}
.calc-send,.calc-insert{height:var(--ctl);padding:0 var(--sp-control);font-family:var(--sans);
  border-radius:var(--r-1);cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1)}
.calc-send{color:var(--accent-press);background:var(--surface);border:1px solid var(--accent)}
.calc-send:hover:not(:disabled){background:var(--accent-bg)}
.calc-insert{color:var(--on-accent);background:var(--accent);border:1px solid var(--accent)}
.calc-insert:hover:not(:disabled){background:var(--accent-press);border-color:var(--accent-press)}
.calc-send:disabled,.calc-insert:disabled{color:var(--ink-3);background:var(--surface);border-color:var(--line-2);cursor:default}

/* ── a risk score: a checklist, the total, the band ─────────────────────────────────────────────────────── */
/* one quiet grouped list, like the fields: the label reads left, the points sit in one column on the right */
.calc-items{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-2);overflow:hidden}
.calc-item{display:flex;align-items:center;gap:var(--sp-item);width:100%;min-height:var(--ctl-2l);padding:var(--sp-item) var(--sp-control);
  background:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background-color var(--dur-1)}
.calc-item + .calc-item{border-top:1px solid var(--line)}
@media (hover:hover){.calc-item:hover{background:var(--surface-2)}}   /* ⛔ a tap on a phone left the shade stuck */
.calc-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.calc-item-lb{flex:1 1 auto;min-width:0;font-family:var(--body);line-height:1.35;color:var(--ink-2)}
.calc-pts{flex:none;font-family:var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
/* the tick: a square for a checkbox, a circle for one of a group (only one can be true) */
.calc-tick{flex:none;position:relative;width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:var(--r-1);
  background:var(--surface);transition:background-color var(--dur-1),border-color var(--dur-1)}
.calc-item.is-radio .calc-tick{border-radius:50%}
.calc-item.on .calc-tick{background:var(--accent);border-color:var(--accent)}
.calc-item.on .calc-tick::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.calc-item.is-radio.on .calc-tick::after{left:5px;top:5px;width:7px;height:7px;border:0;border-radius:50%;
  background:var(--on-accent);transform:none}
.calc-item.on .calc-item-lb{color:var(--ink)}
.calc-item.on .calc-pts{color:var(--accent-press)}

/* the answer: the total on the first line, then the band and what to do */
.calc-result-score{flex-direction:column;align-items:stretch;gap:var(--sp-item);padding:var(--sp-block)}
.calc-res-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-block)}
.calc-band{display:flex;flex-direction:column;gap:var(--sp-inside)}
.calc-band:empty{display:none}
.calc-band-lb{font-family:var(--sans);color:var(--ink-2)}
.calc-band-act{font-family:var(--body);line-height:1.4;color:var(--ink-2)}
.calc-band-warn{font-family:var(--body);line-height:1.45;color:var(--ink);
  background:var(--warn-bg);border-radius:var(--r-1);padding:var(--sp-item) var(--sp-control);margin-top:var(--sp-inside)}
.calc.has-result .calc-band-lb{color:var(--accent-press)}
.calc.has-result .calc-band-act{color:var(--ink)}

/* a tool whose data marks it not reproducible says why, instead of computing */
.calc-note{font-family:var(--body);color:var(--ink-2);line-height:1.5;
  background:var(--warn-bg);border-radius:var(--r-1);padding:var(--sp-item) var(--sp-control)}

/* ── the picker ─────────────────────────────────────────────────────────────────────────────────────────── */
.calcpick-it{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--sp-inside);min-width:0;
  text-align:left;cursor:pointer;transition:border-color var(--dur-1),background-color var(--dur-1)}
.calcpick-nm{font-family:var(--sans);color:var(--ink);white-space:nowrap}
.calcpick-it.on .calcpick-nm{color:var(--accent-press)}

/* The one list row (the side panel template): every calculator list, on the page, in the panel and on a phone, is the same flush row as
   Abbreviations and Lab Values. The name starts on the panel's left edge, a hairline separates rows, the chevron says the row opens a tool,
   and the chosen row keeps the quiet surface fill with its name in full ink. */
.calcpick-list{display:flex;flex-direction:column;gap:var(--sp-group)}
.calcgrp{display:flex;flex-direction:column;gap:var(--sp-item)}
.calcgrp-lb{color:var(--ink-2)}
.calcgrp-items{display:flex;flex-direction:column}
.calcpick-list .calcpick-it{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-item);width:100%;
  padding:var(--sp-item) 0;background:none;border:0;border-radius:0;font:inherit;color:var(--ink)}
.calcpick-list .calcpick-it + .calcpick-it{border-top:1px solid var(--line)}
.calcpick-list .calcpick-nm{color:var(--ink)}
.calcpick-list .calcpick-it::after{content:"\203A";flex:none;line-height:1;color:var(--ink-3)}
.calcpick-list .calcpick-it.on{background:var(--surface-2)}
.calcpick-list .calcpick-it.on .calcpick-nm{color:var(--ink)}
@media (hover:hover){.calcpick-list .calcpick-it:hover{background:var(--surface-2)}}

/* ── the pull-up sheet ──────────────────────────────────────────────────────────────────────────────────── */
/* ⛔ no per-sheet column width: every pull-up shares the one --sheet-col (👤 10-10: "all your reference slide ups look different") */
.calcpane{padding-top:var(--sp-block)}

/* ── the app page ───────────────────────────────────────────────────────────────────────────────────────── */
.calcapp{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--sp-group);align-items:start;
  width:100%;max-width:1000px;margin:0 auto;padding:0 0 var(--sp-group)}   /* top = the page's start line (R2) */
.calcapp .calcpane{padding:var(--sp-page);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
/* the loader spans the page, not the list's column (🔬 it sat 15rem wide on the left while the page loaded) */
.calcapp > .wait{grid-column:1/-1}

/* The pull-up shows the list first, in the one list row above; a chosen tool replaces the list, and "‹ All Calculators" brings it back. */
.calcsheet:not(.is-detail) .calcsheet-detail{display:none}
.calcsheet.is-detail > .calcpick-list{display:none}
.calcsheet > .calcpick-list{padding:0}   /* the sheet body already pads the sides: one left edge with the tool title */
.calcsheet-back{position:relative;display:inline-flex;align-items:center;margin:0;padding:0;border:0;background:none;
  font:inherit;color:var(--accent);cursor:pointer}

/* ── phone ──────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .calc-field{width:9.5rem}
  .calc-actions{justify-content:stretch}
  .calc-send,.calc-insert{flex:1 1 100%}


  /* the app: the list is the first screen; a tool opens full width (Back in the top bar returns) */
  .calcapp{display:block;padding:0 0 var(--sp-group)}
  .calcapp.is-detail .calcpick-list{display:none}
  .calcapp:not(.is-detail) .calcapp-main{display:none}
  .calcapp .calcpane{padding:var(--sp-block)}
}

/* ── THE KIDNEY & DOSING PANEL (✍️-2 + 👤, 2026-10-03) — one form, every answer ──────────────────────────────
   The weights read as a small ledger (label left, number right, the same right edge as the fields), then the one
   decision — the weight it doses on, and why, in quiet words. Then the two answers side by side: CrCl "for drug
   dosing", eGFR "for staging". Each answer lights up on its own once its inputs are in. */
.kp-wts{display:flex;flex-direction:column;gap:var(--sp-item);padding:var(--sp-block);background:var(--surface-2);border-radius:var(--r-2)}
.kp-w{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-block);font-family:var(--body);color:var(--ink-2)}
.kp-w-v{font-variant-numeric:tabular-nums;color:var(--ink-2);}
.kp-w-v b{font-family:var(--sans);color:var(--ink)}
.kp-pick{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-inside) var(--sp-block);margin-top:var(--sp-item);padding-top:var(--sp-item);
  border-top:1px solid var(--line)}
.kp-pick-q{white-space:nowrap;color:var(--ink-2)}
.kp-pick-v{text-align:right;color:var(--ink-2)}
.kp-pick-v b{font-family:var(--sans);color:var(--accent-press);font-variant-numeric:tabular-nums}
.kp-why{flex-basis:100%;text-align:right;font-family:var(--body);color:var(--ink-2)}
.kp-why:empty{display:none}
.kp-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-item)}
.kp-res{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--sp-item);padding:var(--sp-block)}
.kp-res-l{display:flex;flex-direction:column;gap:var(--sp-inside)}
.kp-use{color:var(--ink-3)}
.kp-res.is-on{background:var(--accent-bg)}
.kp-res.is-on .calc-res-lb{color:var(--ink)}
.kp-res.is-on .calc-out{color:var(--accent-press)}
.kp-res.is-on .kp-use,.kp-res.is-on .calc-res-u{color:var(--ink-2)}
@media (max-width:420px){ .kp-results{grid-template-columns:minmax(0,1fr)} .kp-res{flex-direction:row;align-items:center} }
/* height as feet + inches: two fields that together keep the ONE field width, so the right edge stays straight (👤 2026-10-30) */
.calc-field.calc-field-pair{display:inline-flex;gap:var(--sp-item);height:auto;background:none;border:0;box-shadow:none}
.calc-field-pair > .calc-field{flex:1 1 0;width:auto;min-width:0}
/* THE WORKING (👤 2026-10-30: "see those values in the equation (on desktop mode)") — each line the equation with the patient's numbers.
   Desktop only (a wide screen with a mouse); on a phone the panel stays the short form. */
.kp-work{display:none}
@media (min-width:1181px) and (hover:hover){
  .calc-panel.has-work .kp-work{display:block;padding:var(--sp-block);background:var(--surface-2);border-radius:var(--r-2)}
}
.kp-work-h{font-family:var(--sans);color:var(--ink-2);margin-bottom:var(--sp-item)}
.kp-work-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-item)}
.kp-work-l li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:var(--sp-item);align-items:baseline}
.kp-work-k{font-family:var(--sans);color:var(--ink-2)}
.kp-work-t sup{line-height:0}
.kp-work-t{font-family:var(--body);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ═══ FORMULAS — the site's ONE equation look and ONE formula entry (built by calc/ui.js `mathHTML` · `formulaRef`).
   ⛳ REAL MATH (👤 2026-10-15) — a fraction stacks on a rule, a power rises, a root draws its bar; long formulas wrap BETWEEN terms, never
   inside a fraction. One line per statement. ═══ */
.mx{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-inside) .3em;line-height:1.3;font-variant-numeric:tabular-nums}
.mx + .mx{margin-top:var(--sp-item)}
/* ⛳ 👤 2026-10-19: no gap inside a bracket group — a gap put a space between "(" and its contents. */
.mx-g,.mx-b{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0}
.mx-t{display:inline}   /* plain text keeps its subscripts attached (HCO₃, PaCO₂) */
.mx-t sub{line-height:0;vertical-align:-.25em}
.mx-o{color:var(--ink-2);padding:0 .2em}   /* operators get the same space on both sides */
.mx-c{margin-left:-.25em;margin-right:.2em}
.mx-sup{align-self:flex-start;margin-left:.05em;display:inline-flex;gap:.2em}
/* the fraction bar spans the WIDER of the two lines, as in print (🔬 2026-10-26: it was the numerator's own underline, so a longer
   denominator — the ABI's "higher brachial systolic pressure" — stuck out past it). Both lines stretch to the fraction's width. */
.mx-f{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;margin:0 .15em}
.mx-fn,.mx-fd{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0 .25em;padding:0 .3em}
.mx-fn{border-bottom:1.5px solid var(--ink-2);padding-bottom:3px}
.mx-fd{padding-top:3px}
.mx-sq{display:inline-flex;align-items:stretch}
.mx-sqs{line-height:1}
.mx-sqr{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 .25em;border-top:1.5px solid var(--ink-2);padding:2px .2em 0}
/* ONE FORMULA AS A REFERENCE ENTRY (the Formulas tab). 👤 2026-10-26: "what are the units or things in a lighter color? it feels random."
   Three parts, each one look: the name (Body `--ink`; the official short name beside it in `--ink-2`, never a third gray) · the equation
   (Body `--ink`, `.mx`) · the units in words (Meta `--ink-2`, two lines: "Answer kg" / "Inputs IBW kg · actual body weight kg", the two keys 600; a unit is
   tied to its input by a no-break space, so a long label wraps but never strands its unit). */
.fx{padding:var(--sp-item) 0;border-bottom:1px solid var(--line)}
.fx:last-child{border-bottom:0}
.fx-n{font-family:var(--body);color:var(--ink)}
.fx-short{color:var(--ink-2)}
.fx-x{margin-top:var(--sp-inside);font-family:var(--body);color:var(--ink)}
.fx-u{margin-top:var(--sp-inside);font-family:var(--sans);line-height:1.5;color:var(--ink-2)}
.fx-u-k{margin-right:var(--sp-inside)}



/* PREVENT's one table (👤 "keep it simple"): outcome · 10-year · 30-year, numbers right-aligned and tabular */
.jp-table{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-item) var(--sp-block);align-items:baseline;padding:var(--sp-block)}
.jp-table [role="columnheader"]{font-family:var(--sans);color:var(--ink-2);text-align:right}
.jp-table [role="rowheader"]{font-family:var(--body);color:var(--ink)}
.jp-table b{font-family:var(--sans);color:var(--accent-press);text-align:right;font-variant-numeric:tabular-nums}
.jp-results:has(.jp-table){grid-template-columns:minmax(0,1fr)}
.jp-notes{margin:0;font-family:var(--body);color:var(--ink-2)}

}

/* a touch row reaches the tap floor */
@media (pointer:coarse){
  .calcpick-list .calcpick-it{min-height:var(--tap)}
}