/* 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 walk's teal: the chosen tool, the chosen sex, the result, the actions. No second color.
   ④ 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(--s-5)}
.calc-card{gap:var(--s-4)}

.calc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
/* 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);font-size:var(--t-h1);font-weight:600;line-height:1.2;color:var(--ink)}
.calc-clear{flex:none;height:var(--ctl-sm);padding:0 var(--s-3);font-family:var(--sans);font-size:var(--t-meta);
  font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-1);
  cursor:pointer;transition:border-color var(--dur-1),color var(--dur-1)}
.calc-clear:hover{color:var(--ink);border-color:var(--ink-3)}

/* the equation — the calculator's reference, so it sits UNDER the answer; a quiet display line, not a code dump */
.calc-expr{font-family:var(--mono);font-size:var(--t-meta);line-height:1.9;color:var(--ink-2);text-align:center;
  background:var(--surface-2);border-radius:var(--r-1);padding:var(--s-3) var(--s-4);overflow-wrap:anywhere}
.calc-expr sup{font-size:.75em;line-height:0}

.calc-fields{display:flex;flex-direction:column;gap:var(--s-3)}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--ctl)}
.calc-lb{flex:1 1 0;min-width:0;font-family:var(--body);font-size:var(--t-body);line-height:1.35;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);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(--walk-accent);box-shadow:0 0 0 3px var(--walk-tint)}
.calc-in{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;padding:0 var(--s-2) 0 var(--s-3);
  font-family:var(--body);font-size:var(--t-body);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;appearance:textfield}
.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(--s-3);font-family:var(--body);font-size:var(--t-meta);color:var(--ink-3);white-space:nowrap}
/* a value carried in from IBW / AdjBW says where it landed */
.calc-field.is-carried{background:var(--walk-tint);border-color:var(--walk-accent)}

/* Sex — one joined control, the same width as a field so the right edge stays straight */
.calc-segctl{flex:none;display:inline-flex;width:11rem;height:var(--ctl);border:1px solid var(--line-2);
  border-radius:var(--r-1);overflow:hidden;background:var(--surface)}
.calc-segbtn{flex:1 1 0;border:0;background:none;font-family:var(--body);font-size:var(--t-body);color:var(--ink-2);
  cursor:pointer;transition:background-color var(--dur-1),color var(--dur-1)}
.calc-segbtn + .calc-segbtn{border-left:1px solid var(--line-2)}
.calc-segbtn:hover{color:var(--ink);background:var(--surface-2)}
.calc-segbtn.on{color:var(--on-accent);background:var(--walk-accent)}

/* the answer — always present, quiet until complete */
.calc-result{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--ctl-2l);
  padding:var(--s-3) var(--s-5);background:var(--surface-2);border-radius:var(--r-2);transition:background-color var(--dur-1)}
.calc-res-lb{font-family:var(--sans);font-size:var(--t-body);font-weight:600;color:var(--ink-2)}
.calc-res-v{display:inline-flex;align-items:baseline;gap:var(--s-2);white-space:nowrap}
.calc-out{font-family:var(--sans);font-size:var(--t-h1);font-weight:700;line-height:1;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.calc-res-u{font-family:var(--body);font-size:var(--t-meta);color:var(--ink-3)}
.calc.has-result .calc-result{background:var(--walk-tint)}
.calc.has-result .calc-res-lb{color:var(--ink)}
.calc.has-result .calc-out{color:var(--walk-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(--s-2)}
.calc-send,.calc-insert{height:var(--ctl);padding:0 var(--s-4);font-family:var(--sans);font-size:var(--t-meta);font-weight:600;
  border-radius:var(--r-1);cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1)}
.calc-send{color:var(--walk-accent-press);background:var(--surface);border:1px solid var(--walk-accent)}
.calc-send:hover:not(:disabled){background:var(--walk-tint)}
.calc-insert{padding:0 var(--s-5);font-size:var(--t-body);color:var(--on-accent);background:var(--walk-accent);border:1px solid var(--walk-accent)}
.calc-insert:hover:not(:disabled){background:var(--walk-accent-press);border-color:var(--walk-accent-press)}
.calc-send:disabled,.calc-insert:disabled{color:var(--ink-3);background:var(--surface);border-color:var(--line-2);cursor:default}

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

/* ── the picker ─────────────────────────────────────────────────────────────────────────────────────────── */
.calcpick-it{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;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);font-size:var(--t-body);font-weight:600;color:var(--ink);white-space:nowrap}
.calcpick-it.on .calcpick-nm{color:var(--walk-accent-press)}

/* in the pull-up: one row of name chips (names only — 👤: "you don't need sub text") */
.calcpick-grid{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:var(--s-2);
  padding:0 var(--s-5) var(--s-4);border-bottom:1px solid var(--line)}
.calcpick-grid .calcpick-it{justify-content:center;height:var(--ctl);padding:0 var(--s-4);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-1)}
.calcpick-grid .calcpick-it:hover{border-color:var(--walk-accent)}
.calcpick-grid .calcpick-it.on{border-color:var(--walk-accent);background:var(--walk-tint);box-shadow:inset 0 0 0 1px var(--walk-accent)}

/* in the app: a grouped list, the way a settings page lists its sections */
.calcgrp + .calcgrp{margin-top:var(--s-5)}
.calcgrp-lb{padding:0 var(--s-3);margin-bottom:var(--s-2);font-family:var(--sans);font-size:var(--t-eye);
  letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--w-cap-strong);color:var(--ink-3)}
.calcgrp-items{display:flex;flex-direction:column;gap:2px}
.calcpick-list .calcpick-it{width:100%;min-height:var(--ctl);padding:var(--s-2) var(--s-3);background:none;border:0;border-radius:var(--r-1)}
.calcpick-list .calcpick-it:hover{background:var(--surface-2)}
.calcpick-list .calcpick-it.on{background:var(--walk-tint);box-shadow:inset 3px 0 0 var(--walk-accent)}

/* ── the pull-up sheet ──────────────────────────────────────────────────────────────────────────────────── */
/* a little wider than the glossary sheet so all nine name chips sit on two rows */
#toolcalc-host .sheet-inner{max-width:780px}
.calcpane{padding-top:var(--s-5)}

/* ── the app page ───────────────────────────────────────────────────────────────────────────────────────── */
.calcapp{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:var(--s-6);align-items:start;
  width:100%;max-width:1000px;margin:0 auto;padding:var(--s-6) 0 var(--s-7)}
.calcapp .calcpane{padding:var(--s-6);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}

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

  /* the pull-up's name chips wrap — every calculator visible, none hidden behind a swipe */
  .calcpick-grid{padding:0 var(--s-4) var(--s-3)}

  /* the app: the list is the first screen; a tool opens full width (Back in the top bar returns) */
  .calcapp{display:block;padding:var(--s-5) 0 var(--s-7)}
  .calcapp.is-detail .calcpick-list{display:none}
  .calcapp:not(.is-detail) .calcapp-main{display:none}
  .calcapp .calcpane{padding:var(--s-5) var(--s-4)}
  .calcgrp-lb{padding:0 var(--s-1)}
  .calcgrp-items{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:0 var(--s-4)}
  .calcpick-list .calcpick-it{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s-3);
    min-height:var(--ctl-2l);padding:var(--s-3) 0}
  /* a straight hairline between rows — ⛔ not `border-top`: the row keeps its small radius, and a border bends
     with it, so every divider had curled ends */
  .calcpick-list .calcpick-it{position:relative}
  .calcpick-list .calcpick-it + .calcpick-it::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
  .calcpick-list .calcpick-it:hover,.calcpick-list .calcpick-it.on{background:none;box-shadow:none}
  .calcpick-list .calcpick-it::after{content:"\203A";flex:none;font-size:var(--t-h2);line-height:1;color:var(--ink-3)}
}