/* ordromi.live/tools — only what a calculator page adds.

   Tokens, Rubik, the framed card, focus rings and the fade keyframe all come
   from /links/style.css, which every tool page loads first. Nothing is
   redefined here. The one token added below is new, and moves with the rest
   into a shared base stylesheet when phase 2 builds the home page
   (ROADMAP.md). */

/* ---------------- the calculators' own palette ----------------

   Or chose on 2026-09-30 to give the calculators their own colours; the link
   page keeps its warm espresso. Two palettes, picked by the visitor's phone
   setting: warm cream with leaf green in light mode, green-black with lime in
   dark mode. Both override the link page's tokens by name, so every rule in
   style.css and below simply follows — nothing else knows which mode is on.

   Measured (WCAG, text 4.5:1, borders 3:1):
                         light      dark
   muted text on card    6.68       8.22
   muted on result box   5.90       8.85
   accent on card        6.03      13.42
   accent on result box  5.33      14.45
   typed text on field  16.28      14.40
   field edge on card    3.53       3.51
   field edge on fill    3.74       3.16 */
:root {
  --bg: #fbf8f2;
  --bg-deep: #f0eadc;
  --surface: #e6dfcd;
  --ink: #22201a;
  --ink-muted: #5e5848;
  --caramel: #2f6b3a;          /* the accent, named for the link page */
  --on-caramel: #ffffff;
  --paprika: #c4562f;          /* focus ring */
  --btn-quiet: #ffffff;        /* field fill */
  --btn-quiet-ink: #22201a;
  --btn-quiet-edge: #ddd6c4;   /* hairlines: table rows */
  --field-edge: #8a8470;
  --shadow-lift: rgba(60, 50, 30, 0.14);
  --scale-band: #d3cbb6;
  --scale-normal: #f7f3ea;
  --scale-normal-edge: #8a8470;
  --chosen: #eef3ef;           /* a chosen card or chip: accent at 8% on the field */
  color-scheme: light;
}

/* The dark palette, twice on purpose: once for phones set to dark mode
   (unless ?theme=light forces light), once for ?theme=dark on any device.
   The address switch exists so Or and Claude can check both looks without
   changing device settings; tools.js sets data-theme from it for that visit
   only and saves nothing. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121a15;
    --bg-deep: #0b110d;
    --surface: #1d2921;
    --ink: #eef5ef;
    --ink-muted: #a3b5a9;
    --caramel: #b8f25c;
    --on-caramel: #10180f;
    --paprika: #ff8a4c;
    --btn-quiet: #1a241e;
    --btn-quiet-ink: #eef5ef;
    --btn-quiet-edge: #2b3a31;
    --field-edge: #5d7466;
    --shadow-lift: rgba(0, 0, 0, 0.45);
    --scale-band: #3a4d41;
    --scale-normal: #a3b5a9;
    --scale-normal-edge: transparent;
    --chosen: #2a3924;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
    --bg: #121a15;
    --bg-deep: #0b110d;
    --surface: #1d2921;
    --ink: #eef5ef;
    --ink-muted: #a3b5a9;
    --caramel: #b8f25c;
    --on-caramel: #10180f;
    --paprika: #ff8a4c;
    --btn-quiet: #1a241e;
    --btn-quiet-ink: #eef5ef;
    --btn-quiet-edge: #2b3a31;
    --field-edge: #5d7466;
    --shadow-lift: rgba(0, 0, 0, 0.45);
    --scale-band: #3a4d41;
    --scale-normal: #a3b5a9;
    --scale-normal-edge: transparent;
    --chosen: #2a3924;
    color-scheme: dark;
}

html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

.tool {
  padding: clamp(1.4rem, 5vw, 2.1rem) clamp(1.1rem, 4.5vw, 1.6rem) 1.6rem;
}

/* A tool loads into a task: no entrance choreography, not even the footer
   fade the link page gives its own footer. */
.tool-foot { animation: none; }

/* `hidden` always wins on the tool pages. A component's own display (grid,
   flex) beats the browser's [hidden] rule, and that bug shipped three times
   (the phone result bar, the walk results, the step-length boxes). */
.tool [hidden] { display: none !important; }

.tool ::selection { background: var(--caramel); color: var(--on-caramel); }

.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;
}

/* ---------------- heading ---------------- */

.tool-head h1 {
  margin: 0;
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tool-head p {
  margin: 0.45rem 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* ---------------- the form ---------------- */

/* 5.5rem minimum: three fields side by side from a ~380px phone up; below
   that, two. The box's content — three digits and a unit — needs ~88px. */
.tool-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 1.5rem;
}

.field-name {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 500;
}

.field-optional { font-weight: 400; }

/* The box is a <label>, so every pixel of it focuses the input. */
.control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 56px;
  padding: 0 12px;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--btn-quiet-ink);
  cursor: text;
}

.control:focus-within { outline: 3px solid var(--paprika); outline-offset: 3px; }

/* 1.25rem, never under 1rem: iOS zooms into any input under 16px. Numbers
   are LTR inside an RTL page, aligned to the reading edge. */
.control input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  caret-color: var(--caramel);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: right;
}

.control input:focus { outline: none; }

.unit {
  color: var(--ink-muted);
  font-size: var(--text-small);
  white-space: nowrap;
}

/* A field that is wrong says so in words, next to itself; the caramel edge
   only points at it. */
.field.is-invalid .control { border-color: var(--caramel); }

.field-error {
  margin: 0.45rem 0 0;
  color: var(--ink);
  font-size: var(--text-small);
  line-height: 1.45;
}

.field-error [data-msg] { display: none; }
.field-error[data-msg-shown="range"] [data-msg="range"],
.field-error[data-msg-shown="metres"] [data-msg="metres"] { display: inline; }

/* 44px tall although they sit in a sentence: they are buttons, not inline
   links, so WCAG 2.5.8's inline exception does not cover them. */
.field-fix,
.tool-forget {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  border: 0;
  background: none;
  color: var(--caramel);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tool-saved {
  margin: 0.7rem 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* ---------------- choices: switch and cards ---------------- */

/* Pages with more than number fields group their inputs here. */
/* minmax(0, 1fr), never a bare track: an implicit track is sized by its
   widest child's min-content, and at 320px one row of chips pushed the column
   past the card, where main's overflow clipped it out of reach (audit
   2026-10-03). The same rule holds for every grid below. */
.tool-inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.tool-inputs > .tool-form { margin-top: 0; }

.seg-field,
.act-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg-field legend,
.act-field legend { padding: 0; }

/* A two- or three-way switch: real radio buttons, drawn as one control.
   The chosen side fills with the accent; the words stay, so colour is never
   the only sign of which is on. */
.seg {
  display: flex;
  min-height: 56px;
  overflow: hidden;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
}

.seg label {
  position: relative;
  display: grid;
  flex: 1;
  place-items: center;
  padding: 0.5rem;
  color: var(--btn-quiet-ink);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.seg label + label { border-inline-start: 1px solid var(--field-edge); }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--caramel); color: var(--on-caramel); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--paprika); outline-offset: -3px; }

/* Activity levels: each choice carries its own description, because the
   level decides the number more than anything typed. */
.act-cards { display: grid; gap: 10px; }

.act-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 14px;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--btn-quiet-ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}

.act-card input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--caramel);
}

.act-card b { display: block; font-size: var(--text-title); }

.act-card > span > span {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* Edge and tint together, as the clearest competitors do (TDEEcal,
   Precision Nutrition; docs/research/Activity_Input_Competitor_Audit_2026-10-01.md). */
.act-card:has(input:checked) {
  border-color: var(--caramel);
  box-shadow: inset 0 0 0 1px var(--caramel);
  background: var(--chosen);
}

.act-card:has(input:focus-visible) { outline: 3px solid var(--paprika); outline-offset: 3px; }

.act-note {
  margin: 0.6rem 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* A small switch for units, inside the result. */
.unit-switch {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 0.9rem;
  padding: 3px;
  border: 1px solid var(--field-edge);
  border-radius: 999px;
  font-size: var(--text-small);
}

.unit-switch label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  color: var(--ink-muted);
  cursor: pointer;
}

.unit-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.unit-switch label:has(input:checked) { background: var(--caramel); color: var(--on-caramel); font-weight: 700; }
.unit-switch label:has(input:focus-visible) { outline: 3px solid var(--paprika); outline-offset: -3px; }

/* "What does that mean in minutes?" — the source's own minutes, on request,
   under the four cards. */
.act-minutes { margin-top: 0.5rem; }

.act-minutes > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--caramel);
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.act-minutes > summary::-webkit-details-marker { display: none; }

.act-minutes > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.act-minutes[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.act-minutes > summary:focus-visible { outline: 3px solid var(--paprika); outline-offset: 3px; }

.act-minutes p,
.act-minutes li { color: var(--ink-muted); font-size: var(--text-small); line-height: 1.55; }
.act-minutes p { margin: 0.3rem 0 0; }
.act-minutes ul { margin: 0.4rem 0 0; padding-inline-start: 1.1rem; }
.act-minutes b { color: var(--ink); }

/* ---------------- "my day" (D2) ----------------
   Rows for each part of the day, a 24-hour bar that fills as they are
   described, and the result split by part. Activity rows, tiles, pairs and
   small boxes below are the removed week builder's (commit cf84ceb). */
.tool-form-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.day-field { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.day-field legend { padding: 0; margin-bottom: 0.4rem; }

.clock { display: flex; gap: 2px; height: 14px; }
.clock i { border-radius: 4px; background: var(--g); flex: var(--h, 0) 0 0; min-width: 0; }
.clock-k { margin: 0 0 0.2rem; color: var(--ink-muted); font-size: 0.82rem; line-height: 1.45; }

[data-clock="sleep"], [data-split="sleep"], [data-g="sleep"], .day-row[data-group="sleep"] { --g: color-mix(in srgb, var(--ink-muted) 40%, transparent); }
[data-clock="work"], [data-split="work"], [data-g="work"], .day-row[data-group="work"] { --g: color-mix(in srgb, var(--caramel) 35%, transparent); }
[data-clock="life"], [data-split="life"], [data-g="life"], .day-row[data-group="life"] { --g: color-mix(in srgb, var(--caramel) 60%, transparent); }
[data-clock="move"], [data-split="move"], [data-g="move"], .act-row { --g: var(--caramel); }
[data-clock="rest"], [data-split="rest"], [data-g="rest"], .day-row[data-group="rest"] { --g: color-mix(in srgb, var(--ink-muted) 18%, transparent); }

.day-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }

.day-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  min-height: 52px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
}

/* Each part of the day carries the same small square as its line in the
   result's legend, so a row and its share of the total read as one. */
.day-k::before,
.act-row-head > b::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: 0.5rem;
  border-radius: 4px;
  background: var(--g);
  vertical-align: -1px;
}

.day-k { flex: 1 1 8rem; font-size: var(--text-small); font-weight: 700; }
.day-amt { display: flex; align-items: center; gap: 0.45rem; font-size: var(--text-small); white-space: nowrap; }
.day-amt .mini { width: 3.6rem; padding: 0 4px; }
.day-row-wide .mini-select { flex: 1 1 100%; min-width: 0; }
.day-row-rest { border-style: dashed; color: var(--ink-muted); }
.day-auto { font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.day-hint { margin: 0; color: var(--ink-muted); font-size: 0.82rem; line-height: 1.45; }

.split { display: flex; gap: 2px; height: 16px; margin: 1rem 0 0.6rem; border-radius: 999px; overflow: hidden; }
.split i { flex: var(--k, 0) 0 0; min-width: 0; background: var(--g); }
.split-legend { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; text-align: start; font-size: var(--text-small); }
.split-legend li { display: flex; align-items: center; gap: 0.5rem; }
.split-legend bdi { margin-inline-start: auto; font-variant-numeric: tabular-nums; font-weight: 700; }
.split-legend .sw { width: 12px; height: 12px; border-radius: 4px; background: var(--g); }
.tool-result[data-state="over"] [data-when="over"] { display: block; }
form[data-tool="day"] .tool-result:not([data-state="ok"]) .bmr-math { display: none; }

/* Each box keeps its words on one line; the second pair drops below the
   first rather than breaking "פעמים בשבוע" in two. */
.pair { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.pair label { display: flex; align-items: center; gap: 0.45rem; font-size: var(--text-small); white-space: nowrap; }
.pair .mini { flex: 0 0 3.4rem; width: 3.4rem; padding: 0 4px; }

/* One activity: what, how fast or which kind, how often, how long. */
.act-rows { display: grid; gap: 0.6rem; }

.act-row {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.7rem;
  border-radius: 16px;
  background: var(--bg-deep);
}

.act-row-head { display: flex; align-items: center; gap: 0.5rem; }
.act-row-head b { flex: 1; }

.tag {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--field-edge);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.row-x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.row-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.row-x:focus-visible { outline: 3px solid var(--paprika); outline-offset: -3px; }

/* Speeds as tiles, two a row: the pace's name, and under it the speed it
   means. Then a full-width box for your own speed. */
.chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; }

.chip {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 52px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--btn-quiet-ink);
  font-size: var(--text-small);
  line-height: 1.3;
  cursor: pointer;
}

.chip > span { color: var(--ink-muted); font-size: 0.8rem; }
.chip input[type="radio"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip bdi { font-variant-numeric: tabular-nums; }
.chip:has(input[type="radio"]:checked),
.chip-own.is-on { border-color: var(--caramel); box-shadow: inset 0 0 0 1px var(--caramel); background: var(--chosen); }
.chip:has(input[type="radio"]:checked) b { color: var(--caramel); }
.chip:has(input[type="radio"]:focus-visible) { outline: 3px solid var(--paprika); outline-offset: 3px; }

.chip-own {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  cursor: text;
}

.chip-own > span { color: inherit; font-size: var(--text-small); }
.chip-own .mini { width: 4.5rem; min-height: 44px; padding: 0 4px; }

.speed-note,
.week-error { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.speed-note { color: var(--ink-muted); }
.week-error { color: var(--ink); font-weight: 500; }
.week-error::before { content: "• "; color: var(--caramel); }

.add-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.add {
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px dashed var(--caramel);
  border-radius: 999px;
  background: none;
  color: var(--caramel);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
}

.add:focus-visible { outline: 3px solid var(--paprika); outline-offset: 3px; }

/* Small boxes for the helper; 44px tall, 16px text so iOS does not zoom. */
.mini,
.mini-select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--btn-quiet-ink);
  font: inherit;
  font-size: 1rem;
}

.mini {
  width: 4.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: center;
  caret-color: var(--caramel);
}

.mini-select.wide { width: 100%; }
.mini:focus,
.mini-select:focus { outline: none; }
.mini:focus-visible,
.mini-select:focus-visible { outline: 3px solid var(--paprika); outline-offset: 3px; }
.is-invalid .mini,
.mini[aria-invalid="true"] { border-color: var(--caramel); box-shadow: inset 0 0 0 1px var(--caramel); }


/* A short line under a box saying what goes in it; always visible, so the
   error under it is rarely needed (Or, 2026-10-03). */
.field-hint { margin: 0.3rem 0 0; color: var(--ink-muted); font-size: 0.8rem; line-height: 1.4; }

/* "Still missing: …" under an empty result, listing only what is missing,
   so a refused or forgotten value is never silent (Or, 2026-10-03). */
.missing-line { margin: 0.5rem 0 0; color: var(--ink); font-size: var(--text-small); font-weight: 500; line-height: 1.6; }
.missing-line [data-missing]:not([hidden]) ~ [data-missing]:not([hidden])::before { content: " · "; color: var(--ink-muted); }
.how-out [data-steplen-msg="odd"] { color: var(--ink); font-weight: 700; }

/* ---------------- steps (P2) ----------------
   "How do we know your step length?" as a three-way switch; only the
   chosen way's boxes show. */
.seg-how label { font-size: var(--text-small); line-height: 1.25; text-align: center; }
.tool-form-1 { grid-template-columns: minmax(0, 1fr); max-width: 14rem; }
.how { display: grid; gap: 0.5rem; }
.how[hidden] { display: none; }
.how-line { margin: 0; color: var(--ink-muted); font-size: var(--text-small); line-height: 1.55; }
.how-out { margin: 0; padding: 0.7rem 0.9rem; border-radius: 16px; background: var(--bg-deep); font-size: var(--text-small); line-height: 1.5; }
.how-out b { color: var(--caramel); }
.cal-part { display: grid; gap: 0.6rem; min-width: 0; margin: 0.6rem 0 0; padding: 0; border: 0; }
.cal-part legend { padding: 0; margin-bottom: 0.4rem; }
.cal-part .sub { margin: 0.2rem 0 0; font-size: var(--text-small); font-weight: 700; }
/* The speed question, its tiles and its error message, as one field. */
.own-field { display: grid; gap: 0.6rem; min-width: 0; }
.walk-out { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; margin-top: 1rem; }
.walk-out[hidden] { display: none; }
.walk-out > div { display: grid; gap: 0.15rem; padding: 0.8rem 0.6rem; border-radius: 16px; background: var(--btn-quiet); }
.walk-out span { color: var(--ink-muted); font-size: 0.8rem; }
.walk-out b { color: var(--ink); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.walk-out small { color: var(--ink-muted); font-size: 0.78rem; line-height: 1.4; }

/* ---------------- running (R1) ---------------- */
.dist-part { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.dist-part legend { padding: 0; margin-bottom: 0.4rem; }
.dchips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dchip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--field-edge); border-radius: 999px; background: var(--btn-quiet); color: var(--btn-quiet-ink); font-size: var(--text-small); cursor: pointer; }
.dchip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.dchip:has(input:checked) { border-color: var(--caramel); box-shadow: inset 0 0 0 1px var(--caramel); background: var(--chosen); color: var(--caramel); font-weight: 700; }
.dchip:has(input:focus-visible) { outline: 3px solid var(--paprika); outline-offset: 3px; }
.walk-one { grid-template-columns: minmax(0, 1fr); }
/* Time as one box per unit (T1): clock order left to right, so hours |
   minutes | seconds read as 1 | 05 | 30. */
.time-field { display: grid; gap: 0.45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.time-field legend { padding: 0; margin-bottom: 0.4rem; }
.trio, .duo { display: grid; gap: 0.5rem; direction: ltr; }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 15rem; margin-left: auto; }
.tbox { display: grid; gap: 0.25rem; min-width: 0; }
.tbox .control { min-width: 0; padding: 0 8px; }
.tbox .control input { width: 100%; text-align: center; }
.tbox small { color: var(--ink-muted); font-size: 0.8rem; text-align: center; }
.time-field.is-invalid .control { border-color: var(--caramel); }
.pred-k { margin: 1rem 0 0.4rem; font-size: var(--text-small); font-weight: 700; text-align: start; }
.pred { width: 100%; border-collapse: collapse; font-size: var(--text-small); font-variant-numeric: tabular-nums; }
.pred th { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--btn-quiet-edge); color: var(--ink-muted); font-weight: 500; text-align: start; }
.pred td { padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--btn-quiet-edge); text-align: start; }
.pred td:nth-child(2) { font-weight: 800; }
.pred-wait { color: var(--ink-muted); }

/* ---------------- the hub (/tools/) ----------------
   One card per tool: its name and one line, the whole card a link. */
.hub-list { display: grid; gap: 10px; margin: 0.4rem 0 1.4rem; padding: 0; list-style: none; }
.hub-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 64px;
  padding: 14px;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--btn-quiet-ink);
  text-decoration: none;
}
.hub-card > span { display: grid; flex: 1; gap: 0.2rem; }
.hub-card b { font-size: var(--text-title); }
.hub-card > span > span { color: var(--ink-muted); font-size: var(--text-small); line-height: 1.5; }
.hub-card svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--caramel); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.hub-card:hover { border-color: var(--caramel); }
.hub-card:focus-visible { outline: 3px solid var(--paprika); outline-offset: 3px; }
.tool-hub .tool-foot { margin-top: 1.4rem; }

/* Phones: the result is below the cards, so once it is scrolled out of
   view this bar carries it and jumps back. tools.js shows it; desktop never
   needs it (the result sits beside the form there). */
.result-peek {
  position: fixed;
  inset-inline: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--bg-deep);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px var(--shadow-lift);
}

/* display: flex above would otherwise beat the hidden attribute. */
.result-peek[hidden] { display: none; }

.result-peek bdi { color: var(--caramel); font-variant-numeric: tabular-nums; }
.result-peek-go { color: var(--caramel); font-weight: 500; }

@media (min-width: 64rem) {
  .result-peek { display: none; }
}

/* While a result exists the bar may cover the bottom of the screen, so the
   page keeps room under the footer links, and a field reached with Tab or
   the keyboard's "next" stops above the bar (audit 2026-10-03). tools.js
   sets the class. */
@media (max-width: 63.99rem) {
  html.has-peek { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  html.has-peek .tool-foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Calories + BMR on one page (mockup C1). The unit switch, the scope note
   and the working belong to both the "rest" and "ok" states, so they sit
   outside the state blocks and hide in the others. */
.tool-result:not([data-state="rest"]):not([data-state="ok"]) [data-person] { display: none; }

/* The ladder (mockup S1): every level priced, BMR as the bottom rung, a bar
   to scale behind each number. The chosen rung takes the accent edge and a
   deeper bar; the BMR rung is dashed, since it is not a choice. NASEM has
   one equation per level, so these steps are the honest shape of the
   answer, and seeing them explains why the number jumps. */
.ladder { display: grid; gap: 0.35rem; margin-top: 0.9rem; text-align: start; }

.rung {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--field-edge);
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--ink);
  font: inherit;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

.rung i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: -1;
  width: calc(var(--w, 0) * 1%);
  background: color-mix(in srgb, var(--caramel) 12%, transparent);
}

.rung .rt { font-size: var(--text-small); text-align: start; }
.rung b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rung.is-on { border-color: var(--caramel); box-shadow: inset 0 0 0 1px var(--caramel); }
.rung.is-on i { background: color-mix(in srgb, var(--caramel) 28%, transparent); }
.rung.is-on .rt,
.rung.is-on b { color: var(--caramel); font-weight: 800; }
.rung:focus-visible { outline: 3px solid var(--paprika); outline-offset: 3px; }
.rung-rest { border-style: dashed; color: var(--ink-muted); cursor: default; }
.rung-rest b { color: var(--ink-muted); }

.ladder-lead { margin: 0; color: var(--ink); font-weight: 500; }

.ladder-note {
  margin: 0.6rem 0 0;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* "How did the numbers come out?" — the formulas with your numbers. */
.bmr-math { margin-top: 0.9rem; text-align: start; }

.bmr-math > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--caramel);
  font-size: var(--text-small);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.bmr-math > summary::-webkit-details-marker { display: none; }

.bmr-math > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.bmr-math[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.bmr-math > summary:focus-visible { outline: 3px solid var(--paprika); outline-offset: 3px; }
.bmr-math p { margin: 0.4rem 0 0; color: var(--ink-muted); font-size: var(--text-small); line-height: 1.55; }

.bmr-math .bmr-eq-k { margin-top: 0.8rem; color: var(--ink); font-weight: 700; }

.bmr-math .bmr-eq {
  padding: 0.7rem 0.8rem;
  border-radius: 16px;
  background: var(--btn-quiet);
  color: var(--ink);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------------- the result ---------------- */

/* A recess in the card rather than a card on it (DESIGN.md: two surfaces
   only). 1.09:1 against the card: felt, not outlined. */
.tool-result {
  margin-top: 1.25rem;
  padding: 1.25rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: var(--bg-deep);
  text-align: center;
}

.tool-result [data-when] { display: none; }
.tool-result[data-state="empty"] [data-when="empty"],
.tool-result[data-state="rest"] [data-when="rest"],
.tool-result[data-state="ok"] [data-when="ok"],
.tool-result[data-state="minor"] [data-when="minor"] { display: block; }

.result-kicker {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* Display size, not a new one: The Four Tier Rule in DESIGN.md. */
.result-value {
  margin: 0.15rem 0 0;
  color: var(--caramel);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.result-label {
  margin: 0.3rem 0 0;
  font-size: var(--text-title);
  font-weight: 700;
}

.result-voice,
.result-note {
  margin: 0.75rem auto 0;
  max-inline-size: 26rem;
  font-size: var(--text-small);
  line-height: 1.55;
}

.result-voice { color: var(--ink); }
.result-note { color: var(--ink-muted); }

/* An age warning (under 19, Or, 2026-10-20): shown with the result, above
   it, and meant to be read, so full ink and weight rather than the muted
   note style. */
.result-warn {
  margin: 0.4rem auto 0.9rem;
  max-inline-size: 26rem;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.55;
}

.result-voice a,
.result-note a,
.ladder-note a,
.tool-extra-lead a {
  color: var(--caramel);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The way on, not a button: one primary per page, and this is a
   suggestion. 44px tall so a thumb finds it. */
.result-next {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  margin-top: 0.4rem;
  color: var(--caramel);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
}

.result-next svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .result-next:hover span { text-decoration: underline; text-underline-offset: 3px; }
}

/* ---------------- the BMI scale ---------------- */

/* 15 to 40 on a straight line, low at the inline start (the right edge in
   RTL). No traffic lights: every band is the same brown except the normal
   one, a step lighter — distance from the middle, not good and bad. Caramel
   marks only "you": the marker and your word. */
.bmi-scale {
  position: relative;
  margin: 1.1rem 0 0;
  padding-top: 14px;
}

.bmi-marker {
  position: absolute;
  top: 0;
  inset-inline-start: calc(var(--pos, 0) * 1%);
  width: 14px;
  height: 10px;
  margin-inline-start: -7px;
  background: var(--caramel);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: inset-inline-start 240ms var(--ease);
}

.bmi-track {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
}

/* flex-basis 0 and grow by the band's width in BMI units: proportional.
   The 2px separators come out of the bands, under 1% of the track. */
.bmi-seg {
  flex: var(--w) 1 0;
  background: var(--scale-band);
}

.bmi-seg + .bmi-seg { border-inline-start: 2px solid var(--bg-deep); }
.bmi-seg[data-seg="normal"] {
  background: var(--scale-normal);
  box-shadow: inset 0 0 0 1px var(--scale-normal-edge);
}

.bmi-ticks {
  position: relative;
  height: 1.3rem;
  margin-top: 0.3rem;
}

.bmi-ticks span {
  position: absolute;
  inset-inline-start: calc(var(--at) * 1%);
  width: 2.5rem;
  margin-inline-start: -1.25rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.3rem;
  /* isolate, but NOT direction: ltr — inset-inline-start follows the
     element's own direction, and an LTR tick would measure from the left
     edge, mirroring the scale. A number renders correctly in RTL anyway. */
  unicode-bidi: isolate;
}

.bmi-words {
  display: flex;
  margin-top: 0.15rem;
}

.bmi-words span {
  flex: var(--w) 1 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
  white-space: nowrap;
}

/* The narrowest band's word is wider than the band; anchor it to the edge
   it belongs to instead of centring it off the track. */
.bmi-words span:first-child { text-align: start; }

.bmi-words span.is-current { color: var(--caramel); font-weight: 700; }

/* ---------------- the second measure: waist-to-height ---------------- */

.tool-extra { margin-top: 2rem; }

.tool-extra h2,
.tool-about h2 {
  margin: 2rem 0 0.6rem;
  font-size: var(--text-title);
  font-weight: 700;
}

.tool-extra h2 { margin-top: 0; }

.tool-extra-lead {
  margin: 0;
  max-inline-size: 30rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

.tool-form.is-single { grid-template-columns: minmax(0, 13rem); margin-top: 1rem; }

/* Disclosure that looks like part of the text, not a widget. 44px tall. */
.tool-howto summary,
.tool-faq summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--caramel);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.tool-howto summary::-webkit-details-marker,
.tool-faq summary::-webkit-details-marker { display: none; }

/* The chevron points down when closed, up when open; drawn, not a glyph. */
.tool-howto summary::after,
.tool-faq summary::after {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.tool-howto[open] summary::after,
.tool-faq details[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }

.tool-howto p,
.tool-faq p {
  margin: 0 0 0.8rem;
  max-inline-size: 30rem;
  font-size: var(--text-small);
  line-height: 1.7;
}

.whtr-result { margin-top: 0.4rem; }
.whtr-result [data-when] { display: none; }
.whtr-result[data-state="empty"] [data-when="empty"],
.whtr-result[data-state="ok"] [data-when="ok"],
.whtr-result[data-state="na"] [data-when="na"],
.whtr-result[data-state="noheight"] [data-when="noheight"] { display: block; }
.whtr-result .result-note { margin-inline: 0; }

.whtr-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  margin: 0;
  font-size: var(--text-title);
  font-weight: 700;
}

.whtr-value {
  color: var(--caramel);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

/* ---------------- explanation ---------------- */

/* 30rem keeps a 14px line under ~75 characters once the card reaches its
   36rem width on a desktop. */
.tool-about p,
.tool-about ul {
  max-inline-size: 30rem;
}

.tool-about p,
.tool-about li {
  margin: 0 0 0.7rem;
  font-size: var(--text-small);
  line-height: 1.7;
}

.tool-about ul { margin: 0 0 0.7rem; padding-inline-start: 1.15rem; }

/* Every class and its weight for the typed height. Lines, not boxes: a
   table inside the card, not another card. Your row: bold, and said in
   words, not only in colour. */
.bmi-table {
  width: 100%;
  max-inline-size: 30rem;
  margin: 0 0 0.8rem;
  border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.bmi-table th,
.bmi-table td {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--btn-quiet-edge);
  text-align: start;
  vertical-align: top;
}

/* "מתחת ל-18.5" wrapped onto two lines on a phone; ranges stay whole. */
.bmi-table td:first-child { white-space: nowrap; }

.bmi-table th { color: var(--ink-muted); font-weight: 500; }

.bmi-table[data-height="no"] th:nth-child(3),
.bmi-table[data-height="no"] td:nth-child(3) { display: none; }
.bmi-table tr[aria-current="true"] td { font-weight: 700; }
.bmi-table .here { color: var(--caramel); }

.tool-note {
  color: var(--ink-muted);
}

/* No divider lines: each question is its own 44px row, and an open answer
   sits under it with space, not inside a box. */
.tool-faq details + details { margin-top: 0.1rem; }

.tool-sources { padding-inline-start: 1.15rem; }

/* Share the tool, never the numbers: the link carries only the page URL. */
.tool-share {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 0.4rem;
  color: var(--caramel);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tool-about a,
.tool-fineprint a {
  color: var(--caramel);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tool-about .ltr { direction: ltr; unicode-bidi: isolate; }

.tool-fineprint {
  margin-top: 1.5rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.6;
}

/* ---------------- footer ---------------- */

.tool-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.1rem;
  margin-top: 1rem;
  font-size: var(--text-small);
}

.tool-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.2rem;
  color: var(--caramel);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------------- desktop ---------------- */

/* On a phone the page is one column in the 36rem card. On a computer that
   column made you scroll past the fields to see the answer, then back up to
   change a number. From 64rem the card widens and the answer sits beside the
   form, staying in view (sticky) while the waist section and the notes go by —
   the layout calculator.net and every desktop tool Or pointed to use.
   Reading order is unchanged: form first at the inline start (the right), the
   result at the end. */
@media (min-width: 64rem) {
  .phone.tool {
    max-width: 72rem;
    padding: 2.5rem 3rem 2rem;
    /* clip, not hidden: hidden makes the card a scroll container, and a sticky
       child then sticks to a box that never scrolls. */
    overflow: clip;
  }

  .tool-head { margin-bottom: 0.25rem; }

  .tool-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
    grid-template-areas:
      "fields result"
      "saved  result"
      "extra  result";
    grid-template-rows: auto auto 1fr;
    column-gap: 3rem;
    align-items: start;
  }

  .tool-body > .tool-form,
  .tool-body > .tool-inputs { grid-area: fields; }
  .tool-body > .tool-saved { grid-area: saved; }
  .tool-body > .tool-extra { grid-area: extra; }

  .tool-result {
    grid-area: result;
    position: sticky;
    top: 1.5rem;
    margin-top: 1.5rem;
    padding: 1.6rem 1.4rem 1.3rem;
  }

  .tool-about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
    margin-top: 1rem;
  }

  .tool-about p,
  .tool-about ul,
  .bmi-table,
  .tool-faq p { max-inline-size: none; }
}

/* ---------------- motion ---------------- */

/* One moment: the result arriving. Everything else is still. */
@media (prefers-reduced-motion: no-preference) {
  .tool-result[data-state="rest"] [data-when="rest"],
  .tool-result[data-state="ok"] [data-when="ok"],
  .tool-result[data-state="minor"] [data-when="minor"] {
    animation: fade 220ms var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bmi-marker { transition: none; }
}