/* arx-free (v0.3.0) - layout and components, rebuilt on the structure of the original software.

   The frame never changes: dark header (who, where, context actions) - body - footer with the way back on the left
   and the one green forward action on the right; in every motion state the stop bar takes the footer's place.
   Grouping rules: every control group is ONE enclosed region with its label; gaps inside a group (--space-in) are
   clearly smaller than gaps between groups (--space-group) and sections (--space-section). Colours and sizes come
   from tokens.css. Touch targets: primary >= 72 px, secondary >= 56 px, stop bar >= 160 px. */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--size-body); line-height: 1.35;
  overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; display: grid; grid-template-rows: var(--header) minmax(0, 1fr) auto;
}
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1 { font-size: var(--size-title); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: var(--size-large); font-weight: 700; letter-spacing: -.01em; }
h3 { font-size: var(--size-small); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.hint { color: var(--ink-3); font-size: var(--size-small); }
.grow { flex: 1 1 auto; min-width: 0; min-height: 0; }
.row { display: flex; align-items: center; gap: var(--space-group); }
.row.tight { gap: var(--space-in); }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--space-group); min-height: 0; }
.col.tight { gap: var(--space-in); }
.spread { justify-content: space-between; }
.center { align-items: center; justify-content: center; text-align: center; }
.scroll { overflow: auto; min-height: 0; }

/* --- frame: header ------------------------------------------------------------------------------------------ */
/* the right zone keeps its natural width (it grew by the "ARX Insight" button, 0.8.1) - the middle gives way, its arrow
   buttons shorten with an ellipsis; nothing overlaps (found by the click-path test: "Pull Down ->" under "Edit routine") */
.header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto; align-items: center; gap: var(--space-group); padding: 0 24px;
  background: var(--bar); color: var(--bar-ink); }
.header .left, .header .right { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header .right { justify-content: flex-end; flex-shrink: 0; gap: 10px; }
/* the clock in two lines (date over time), the three buttons after it icons only, the routine's actions one word each
   with one word for the group (owner 2026-09-23: on the kiosk's 1920 px the header's groups overlapped) */
.header .clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-size: clamp(13px, .8vw, 15px);
  font-weight: 700; opacity: .85; white-space: nowrap; letter-spacing: .02em; padding: 0 4px; }
.hbtn.two { flex-direction: column; justify-content: center; gap: 0; line-height: 1.12; padding: 4px 14px; font-size: clamp(13px, .8vw, 15px); }   /* "Session / bearbeiten" in two lines */
.hbtn.icon { padding: 0 12px; }
.dots { display: grid; grid-template-columns: repeat(2, 11px); gap: 4px; }
.dots .dot { width: 11px; height: 11px; }
.header .brand, .header #add-buddy { flex: none; }
.header .title { font-size: var(--size-large); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.brand { font-weight: 800; font-size: var(--size-large); letter-spacing: -.03em; color: var(--bar-ink); background: none; border: 0;
  font-family: inherit; padding: 0 8px; min-height: var(--touch-small); cursor: pointer; }
.brand span, .brand-hero span { color: #4fc1c9; }
.brand-hero span { color: var(--accent); }
.hbtn { min-height: var(--touch-small); padding: 0 18px; border-radius: var(--radius-small); border: 2px solid rgba(255, 253, 248, .28);
  background: transparent; color: var(--bar-ink); font: inherit; font-weight: 650; font-size: var(--size-small); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hbtn.go { background: var(--go); border-color: var(--go); }
.hbtn.caution { background: var(--caution); border-color: var(--caution); color: #16181b; }
.hbtn.back { background: var(--back); border-color: var(--back); }
.hbtn.attention { border-color: var(--caution); box-shadow: inset 0 0 0 2px var(--caution); }
.hbtn.danger { border-color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); }
/* the athlete switcher gives way first: a long name is cut with an ellipsis (the whole name is in the list), nothing
   overlaps - but never below 180 px (owner 2026-09-23: with a full header the name vanished, only the arrow was left) */
select.hbtn { appearance: none; -webkit-appearance: none; padding-right: 34px; max-width: 320px; min-width: 180px; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; font-size: var(--size-small);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select.hbtn option { color: #16181b; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink-3); display: inline-block; flex: none; }
.dot.ok { background: #35b56a; } .dot.attention { background: var(--caution); } .dot.danger { background: #ff5b52; }

/* --- frame: body and footer ------------------------------------------------------------------------------------ */
.screen { min-height: 0; overflow: hidden; padding: 24px; display: flex; flex-direction: column; gap: var(--space-group); }
.screen.narrow { align-items: center; overflow: auto; }
/* a narrow screen (Admin, History) SCROLLS - nothing in it may give way; a box with overflow hidden inside a flex column
   otherwise shrinks to a bar when the column is full (seen on Admin with the bring-up panel, 2026-09-22; lesson 2026-09-21) */
.screen.narrow > *, .screen.narrow .col > * { width: min(1180px, 100%); flex-shrink: 0; }
.screen.narrow .col > * { width: auto; }
.footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-group); min-height: var(--footer);
  padding: 14px 24px; background: var(--surface); border-top: 1px solid var(--line); }
.footer .left { display: flex; gap: 14px; justify-content: flex-start; }
.footer .centre { display: flex; gap: 14px; align-items: center; justify-content: center; text-align: center; color: var(--ink-2); }
.footer .right { display: flex; gap: 14px; justify-content: flex-end; }
.footer .btn { min-width: 220px; }
.stopbar { display: grid; grid-template-columns: 1fr; min-height: var(--stopbar); }
.stopbar.with-cancel { grid-template-columns: minmax(260px, 1fr) 3fr; }
.stopbar button { border: 0; font: inherit; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.stopbar .stop { background: var(--stop); color: var(--stop-ink); font-size: clamp(48px, 5vw, 84px); }
.stopbar .cancel { background: var(--bar); color: var(--bar-ink); font-size: var(--size-title); }
.stopbar small { display: block; font-size: var(--size-small); font-weight: 600; letter-spacing: 0; opacity: .88; }

/* --- buttons ------------------------------------------------------------------------------------------------------ */
.btn { min-height: var(--touch); padding: 0 28px; border-radius: var(--radius-small); border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 700; font-size: var(--size-large); display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.btn:active { transform: scale(.985); }
.btn.go { background: var(--go); border-color: var(--go); color: var(--go-ink); }
.btn.back { background: var(--back); border-color: var(--back); color: #fff; }
.btn.caution { background: var(--caution); border-color: var(--caution); color: #16181b; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.quiet { background: transparent; }
.btn.small { min-height: var(--touch-small); padding: 0 18px; font-size: var(--size-body); }
.btn.huge { min-height: 132px; font-size: var(--size-title); border-radius: var(--radius); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .35; cursor: default; transform: none; }
.btn.holding { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* --- enclosed regions: panels, title bars, boxes -------------------------------------------------------------------- */
.panel-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel-box > .body { padding: 20px; display: flex; flex-direction: column; gap: var(--space-group); min-height: 0; }
.panel-box > .body.tight { gap: 14px; }
.titlebar { background: var(--bar); color: var(--bar-ink); padding: 12px 20px; font-weight: 750; font-size: var(--size-large);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.titlebar small { font-weight: 600; font-size: var(--size-small); opacity: .8; }
.box { border: 2px solid var(--line); border-radius: var(--radius-small); padding: 14px 16px; background: var(--surface); }
.box > h3 { margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; }
.kv dt { color: var(--ink-2); font-weight: 650; }
.kv dd { font-weight: 650; }
.warning-band { background: var(--danger); color: #fff; padding: 10px 16px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
/* coaching card (coaching.js): start / path / end, the cues with the colour of their phase (like the live chart), safety points */
.box.coaching { display: flex; flex-direction: column; gap: 10px; }
.box.coaching > h3 { margin-bottom: 0; }
.box.coaching .kv dd { font-weight: 550; }
.box.coaching .cues, .box.coaching .safety ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.box.coaching .cue { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; font-weight: 650; }
.box.coaching .cue .tag { font-size: var(--size-small); font-weight: 750; padding: 1px 8px; border-radius: 999px; border: 2px solid currentColor; color: var(--ink-2); white-space: nowrap; }
.box.coaching .cue.phase-C .tag { color: var(--concentric); }
.box.coaching .cue.phase-E .tag { color: var(--eccentric); }
.box.coaching .safety { border-top: 2px solid var(--line); padding-top: 8px; color: var(--danger); font-weight: 650; display: flex; flex-direction: column; gap: 4px; }
.box.coaching.brief .safety { border-top: 0; padding-top: 0; }
.box.coaching .remember { display: flex; flex-direction: column; gap: 10px; }
.box.coaching .safety li::before { content: "! "; font-weight: 800; }
.steps { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; }
.steps b { white-space: nowrap; }

/* --- stepper: ONE capsule [ - value + ] --------------------------------------------------------------------------------- */
.stepper { display: inline-grid; grid-template-columns: var(--touch-small) minmax(74px, 1fr) var(--touch-small); align-items: stretch;
  height: var(--touch-small); border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--surface); width: 100%;
  max-width: 230px; }
.stepper button { border: 0; background: var(--surface-2); font: inherit; font-size: 28px; font-weight: 700; color: var(--ink); cursor: pointer; }
.stepper button:first-child { border-right: 2px solid var(--ink); }
.stepper button:last-child { border-left: 2px solid var(--ink); }
.stepper button:active { background: var(--accent-soft); }
.stepper .value { display: flex; align-items: baseline; justify-content: center; gap: 4px; align-self: center; font-size: var(--size-large);
  font-weight: 750; white-space: nowrap; }
.stepper .unit { font-size: var(--size-small); color: var(--ink-2); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: var(--space-in); min-width: 0; }
.field > label { font-size: var(--size-small); color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* --- segmented control --------------------------------------------------------------------------------------------------- */
.segmented { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; height: var(--touch-small); }
.segmented button { border: 0; background: var(--surface); padding: 0 20px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; white-space: nowrap; }
.segmented button + button { border-left: 2px solid var(--ink); }
.segmented button.on { background: var(--ink); color: var(--paper); }
.segmented button:disabled { color: var(--ink-3); cursor: default; }

/* --- the repetition table: rows in the order they happen, colour-coded like the rail ------------------------------------------ */
.reptable { border: 2px solid var(--ink); border-radius: var(--radius-small); overflow: hidden; flex-shrink: 0; }   /* a full panel shrinks the history list, never the End row (seen 2026-09-21) */
.reptable .head, .reptable .leg { display: grid; grid-template-columns: minmax(190px, 1.1fr) 1fr 1fr; align-items: center; gap: 14px; padding: 10px 16px; }
.reptable .head { background: var(--surface-2); font-size: var(--size-small); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; }
.reptable .leg + .leg { border-top: 2px solid var(--ink); }
.reptable .leg.to-end { border-left: 12px solid var(--end-marker); }
.reptable .leg.to-start { border-left: 12px solid var(--start-marker); }
.reptable .where { display: flex; flex-direction: column; }
.reptable .where b { font-size: var(--size-large); }
.reptable .where span { font-size: var(--size-body); color: var(--ink-2); font-weight: 650; }

/* --- inputs, lists ---------------------------------------------------------------------------------------------------------- */
.input { min-height: var(--touch); border-radius: var(--radius-small); border: 2px solid var(--ink); background: var(--surface); padding: 0 20px;
  font: inherit; font-size: var(--size-large); color: var(--ink); width: 100%; -webkit-user-select: text; user-select: text; }
.input:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
textarea.input { padding: 16px 20px; min-height: 140px; resize: none; }
.chip { min-height: var(--touch-small); padding: 0 20px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface);
  font: inherit; font-size: var(--size-body); font-weight: 650; color: var(--ink); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.list { display: flex; flex-direction: column; gap: var(--space-in); }
.list-item { display: flex; align-items: center; gap: 14px; min-height: var(--touch-small); padding: 8px 16px; border-radius: var(--radius-small);
  background: var(--surface); border: 2px solid var(--line); font: inherit; font-weight: 650; color: var(--ink); text-align: left; width: 100%; }
button.list-item { cursor: pointer; min-height: var(--touch); }
.list-item.active { border-color: var(--go); box-shadow: inset 6px 0 0 var(--go); }
.list-item .pictogram { width: 84px; height: 54px; flex: none; }
.list-item.done { color: var(--ink-3); background: var(--surface-2); }
.badge { padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: var(--size-small); font-weight: 700; white-space: nowrap; }
.badge.go { background: var(--go); color: #fff; }
.titlebar .badge { color: var(--ink); }
.titlebar .badge.go { color: #fff; }

/* --- drag-and-drop routine ---------------------------------------------------------------------------------------------------- */
.sortable { position: relative; display: flex; flex-direction: column; gap: var(--space-in); }
.sortable .list-item { touch-action: none; cursor: grab; transition: transform .12s ease; }
.sortable .list-item.dragging { transition: none; z-index: 5; box-shadow: var(--shadow); border-color: var(--accent); cursor: grabbing; }
.sortable .grip { font-size: 26px; color: var(--ink-3); line-height: 1; }
.xbtn { width: 48px; height: 48px; border-radius: var(--radius-small); border: 0; background: var(--back); color: #fff; font-size: 22px; font-weight: 800;
  cursor: pointer; flex: none; }

/* --- choose exercises ----------------------------------------------------------------------------------------------------------- */
.choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(340px, 1.25fr); gap: var(--space-group); flex: 1; min-height: 0; }
.choose .group { display: flex; flex-direction: column; gap: var(--space-in); min-height: 0; overflow: auto; }
.choose .group > h1, .choose .routine > h1 { text-align: center; padding-bottom: 6px; }
.exercise-tile { min-height: 76px; border-radius: var(--radius-small); border: 2px solid var(--ink-3); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--size-large); font-weight: 700; padding: 4px 14px 4px 8px; display: flex; align-items: center; gap: 12px; cursor: pointer;
  position: relative; text-align: left; }
.exercise-tile:active { background: var(--accent-soft); border-color: var(--accent); }
.exercise-tile .pictogram { width: 104px; height: 66px; flex: none; }
.exercise-tile .name { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
.exercise-tile .count { min-width: 34px; height: 34px; border-radius: 17px; background: var(--go); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; font-size: var(--size-body); flex: none; }
.choose .routine { display: flex; flex-direction: column; gap: var(--space-in); min-height: 0; }

/* --- workout screen: chart left, panel right - the same frame before, during and after the set ---------------------------------------- */
.workout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(430px, 1fr); gap: var(--space-group); flex: 1; min-height: 0; }
.workout .left { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; min-height: 0; }
.chart-card { position: relative; min-height: 0; }
.chart-card canvas { position: absolute; inset: 12px 12px 8px 8px; width: calc(100% - 20px); height: calc(100% - 20px); }
.chart-card .legend { position: absolute; top: 12px; right: 16px; z-index: 1; }
/* The live force sits over the chart's bottom right corner: see-through and modest, so the curve underneath stays
   readable (owner at L5, 2026-09-22: it covered important details). */
.force-tile { position: absolute; right: 16px; bottom: 44px; z-index: 1; background: var(--accent); color: #fff; border-radius: var(--radius-small);
  padding: 6px 10px; min-width: 120px; text-align: right; box-shadow: var(--shadow); opacity: .55; }
.force-tile .value { font-size: calc(var(--size-number) * .8); font-weight: 800; line-height: 1; }
.force-tile .label { font-size: var(--size-small); font-weight: 700; opacity: .9; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.force-tile button { border: 2px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; border-radius: 8px; font: inherit; font-weight: 700;
  font-size: var(--size-small); padding: 4px 10px; cursor: pointer; }
.under-chart { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: var(--space-section); align-items: center; padding: 4px 8px 0; }
.bignum { text-align: center; }
.bignum .label { font-size: var(--size-body); font-weight: 750; }
.bignum .value { font-size: var(--size-number); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.bignum .value.better { color: #fff; background: var(--go); border-radius: 8px; padding: 0 12px; }
.bignum .value.worse { color: #16181b; background: var(--caution); border-radius: 8px; padding: 0 12px; }
.legend { display: flex; gap: 16px; font-size: var(--size-small); color: var(--ink-2); font-weight: 650; }
.legend i { display: inline-block; width: 20px; height: 5px; border-radius: 3px; vertical-align: middle; margin-right: 6px; }
.legend-reference { background: var(--reference); } .legend-eccentric { background: var(--eccentric); } .legend-concentric { background: var(--concentric); }

/* position rail: 0 ... 33 in with the Start (red) and End (dark) flags and the live flag on top */
.rail { position: relative; height: 88px; margin: 0 64px; }        /* room for flags at both ends of the axis */
.rail .line { position: absolute; left: 0; right: 0; top: 40px; height: 4px; background: var(--ink-3); border-radius: 2px; }
.rail .span { position: absolute; top: 34px; height: 16px; background: var(--accent-soft); border: 2px solid var(--accent); border-radius: 8px; }
.rail .flag { position: absolute; transform: translateX(-50%); font-size: var(--size-small); font-weight: 750; padding: 2px 8px; border-radius: 6px;
  white-space: nowrap; color: #fff; }
.rail .flag::after { content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; background: inherit; }
.rail .flag.start { top: 58px; background: var(--start-marker); } .rail .flag.start::after { bottom: 100%; height: 16px; }
.rail .flag.end { top: 58px; background: var(--end-marker); color: #fff; } .rail .flag.end::after { bottom: 100%; height: 16px; }
/* the flag of the lower position hangs to the left of its mark, the other one to the right: they never cover each other */
.rail .flag.low { transform: translateX(-100%); border-bottom-right-radius: 0; } .rail .flag.low::after { left: auto; right: 0; margin: 0; }
.rail .flag.high { transform: none; border-bottom-left-radius: 0; } .rail .flag.high::after { left: 0; margin: 0; }
.rail .flag.live { top: 0; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); font-size: var(--size-body); }
.rail .flag.live::after { top: 100%; height: 12px; background: var(--ink); }
.rail .edge { position: absolute; top: 28px; font-size: var(--size-small); font-weight: 700; color: var(--ink-2); border: 2px solid var(--line); border-radius: 6px;
  padding: 2px 6px; background: var(--surface); }
.rail .edge.min { right: 100%; margin-right: 8px; } .rail .edge.max { left: 100%; margin-left: 8px; white-space: nowrap; }

/* tiles: live and result figures in the original's 4 x 2 grid */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-in); }
.tile { background: var(--bar); color: var(--bar-ink); border-radius: var(--radius-small); padding: 10px 8px; text-align: center; min-width: 0; }
.tile .label { font-size: var(--size-small); font-weight: 700; opacity: .85; white-space: nowrap; }
.tile .value { font-size: var(--size-title); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.tile .value small { font-size: .5em; font-weight: 650; margin-left: 3px; opacity: .85; }
.tile .delta { font-size: var(--size-small); font-weight: 700; min-height: 1.3em; }
.tile.better { background: var(--go); } .tile.worse { background: var(--caution); color: #16181b; }
.tile.light { background: var(--surface); color: var(--ink); border: 2px solid var(--line); }

/* --- tables ------------------------------------------------------------------------------------------------------------------------ */
table.data { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
table.data th { text-align: right; font-weight: 700; padding: 8px 10px; position: sticky; top: 0; background: var(--bar); color: var(--bar-ink); white-space: nowrap; }
table.data th:first-child, table.data td:first-child, table.data .left { text-align: left; }
table.data td { text-align: right; padding: 0 10px; height: 44px; border-top: 1px solid var(--line); white-space: nowrap; }
table.data.tall td { height: var(--touch-small); font-size: var(--size-body); }
table.data td.wrap { white-space: normal; height: auto; padding: 10px; }
table.data tr.group td { background: var(--surface-2); font-weight: 750; height: 40px; }
table.data tr.selected td, table.data tr.reference td { background: var(--highlight); }
table.data tr.junk td { color: var(--ink-3); text-decoration: line-through; }
table.data tr.unfinished td { color: var(--ink-2); font-style: italic; }
table.data .actions { display: flex; gap: 6px; justify-content: flex-end; }
table.data .actions .btn { padding: 0 12px; min-height: 44px; font-size: var(--size-small); }

/* --- set positions: instruction column left, the machine right ------------------------------------------------------------------------ */
.positions { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(360px, 440px); gap: var(--space-group); flex: 1; min-height: 0; }
.positions .guide { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: auto; }
.positions .guide > * { flex-shrink: 0; }     /* a long text scrolls the column - it never squeezes the step's title away */
.instruction { background: var(--bar); color: var(--bar-ink); border-radius: var(--radius-small); overflow: hidden; }
.instruction h2 { padding: 12px 16px; text-align: center; font-size: var(--size-title); }
.instruction .note { padding: 10px 16px; border-top: 1px solid rgba(255, 253, 248, .25); font-weight: 650; }
.stage { position: relative; min-height: 0; }
.stage .graphic { position: absolute; inset: 0; }
.stage .graphic svg { width: 100%; height: 100%; }
.stage .legendbox { position: absolute; top: 14px; right: 14px; border: 2px solid var(--ink); border-radius: var(--radius-small); background: var(--surface);
  padding: 10px 14px; font-weight: 700; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: var(--size-body); }
.jog { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-in); }
.jog .speed { grid-column: 1 / -1; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; text-align: center; font-weight: 750;
  border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; height: var(--touch-small); background: var(--surface); }
.jog .speed button { border: 0; height: 100%; background: var(--surface-2); font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
.video { width: 100%; border-radius: var(--radius-small); background: #000; aspect-ratio: 16 / 9; display: block; }
.video-missing { aspect-ratio: 16 / 9; border-radius: var(--radius-small); background: var(--bar); color: var(--bar-ink); display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 16px; font-size: var(--size-small); opacity: .9; }

/* --- start, lobby, closing, history ------------------------------------------------------------------------------------------------------ */
.hero { font-size: var(--size-hero); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.tiles-start { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-group); }
.lobby { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: var(--space-group); flex: 1; min-height: 0; overflow: auto; }
.lobby .add { border: 3px dashed var(--line); border-radius: var(--radius); background: transparent; font: inherit; font-size: var(--size-large); font-weight: 700;
  color: var(--ink-2); cursor: pointer; min-height: 200px; }
.closing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: var(--space-group); align-content: start; overflow: auto; min-height: 0; flex: 1; }
.history { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-group); flex: 1; min-height: 0; }
/* "How did it feel?" (0.13.0): one big slider on the closing page, four words with an emoji, up by itself until answered */
.feelcard { border: 3px solid var(--go); }
/* the athlete's word on ONE set (1.14.0): the same slider inside the result panel, the words smaller; the badge on the closing tiles */
.box.feelset { display: flex; flex-direction: column; gap: 4px; }
.box.feelset .feltword { font-size: var(--size-title); font-weight: 800; text-align: center; }
.box.feelset .feltscale { display: flex; justify-content: space-between; font-size: var(--size-small); }
.feltbadge { font-weight: 600; color: var(--muted); }
.feelcard .feltword { font-size: calc(var(--size-title) * 1.2); font-weight: 800; text-align: center; margin: 4px 0 8px; }
.feelcard .feltthanks { font-size: var(--size-title); font-weight: 700; text-align: center; margin: 12px 0; }
.feelcard input.feel, .feelset input.feel { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 18px 0; border-radius: 999px; outline: none;
  background: linear-gradient(90deg, #7fc8a9 0%, #4a9d6f 33%, #e0a72c 66%, #c4302b 100%); touch-action: none; }
.feelcard input.feel::-webkit-slider-thumb, .feelset input.feel::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 72px; height: 72px; border-radius: 50%; background: var(--paper);
  border: 5px solid var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); cursor: grab; }
.feelcard input.feel::-moz-range-thumb, .feelset input.feel::-moz-range-thumb { width: 72px; height: 72px; border-radius: 50%; background: var(--paper); border: 5px solid var(--ink); cursor: grab; }
.feelcard .feltscale { display: flex; justify-content: space-between; font-weight: 700; color: var(--ink-2); }
.feelcard .small { font-size: var(--size-small); }
/* the trend view (0.12.0): the chart left, the motivation card right; the window chips sit in the dark titlebar -
   outlined when off, filled white when on (the default chip's ink fill would vanish there) */
.history.trend { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.history.trend .titlebar .chip { background: transparent; color: var(--paper); border-color: var(--paper); }
.history.trend .titlebar .chip.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.trendcard .big { display: flex; align-items: center; gap: 16px; font-size: calc(var(--size-title) * 1.6); font-weight: 800; line-height: 1.1; margin-bottom: 8px; }
.trendcard .big .emoji { font-size: calc(var(--size-title) * 1.5); }
.trendcard .note-line { font-weight: 650; }
.trendcard .small { font-size: var(--size-small); }
.trendcard .list-item .emoji { flex: none; font-size: 1.3em; }
.chart-box { position: relative; flex: 1; min-height: 220px; }
.chart-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- overlays -------------------------------------------------------------------------------------------------------------------------------- */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(22, 24, 27, .62); display: flex; align-items: center; justify-content: center; padding: 40px; }
.overlay.solid { background: var(--paper); }
.overlay.alarm { background: var(--danger); }
.dialog { background: var(--surface); color: var(--ink); border-radius: var(--radius); width: min(1000px, 100%); max-height: 100%; overflow: auto;
  box-shadow: var(--shadow); display: flex; flex-direction: column; }
.dialog.wide { width: min(1500px, 100%); }
.dialog > .body { padding: 28px; display: flex; flex-direction: column; gap: var(--space-group); }
.banner { background: var(--bar); color: var(--bar-ink); padding: 26px 40px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 18px; align-items: center; min-width: min(900px, 90vw); }
.banner .big { font-size: clamp(48px, 6vw, 110px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.banner .where { font-size: clamp(30px, 3.4vw, 64px); font-weight: 700; }
.countdown { font-size: clamp(200px, 30vw, 520px); font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.toast { position: fixed; left: 50%; top: calc(var(--header) + 14px); transform: translateX(-50%); z-index: 40; background: var(--bar); color: var(--bar-ink);
  padding: 16px 26px; border-radius: 999px; font-weight: 700; box-shadow: var(--shadow); max-width: 90vw; }
.health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-in); }
.health-grid .cell { border: 2px solid var(--line); border-radius: var(--radius-small); padding: 14px; text-align: center; display: flex; flex-direction: column;
  gap: 6px; align-items: center; font-weight: 750; }
.health-grid .cell .mark { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff;
  background: var(--ink-3); }
.health-grid .cell.ok .mark { background: var(--go); } .health-grid .cell.attention .mark { background: var(--caution); color: #16181b; }
.health-grid .cell.danger .mark { background: var(--danger); }
.health-grid .cell small { font-weight: 600; color: var(--ink-2); }
.legend-start { background: var(--start-marker); } .legend-end { background: var(--end-marker); }

/* --- v0.3.1: buddy search (inline panel and header popover), progress of machine actions, routines side by side ------ */
.popover { position: fixed; z-index: 30; width: min(440px, 92vw); background: var(--surface); color: var(--ink); border: 2px solid var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow: auto; }
.buddy-search .list-item { min-height: var(--touch-small); }
.progress { width: min(760px, 80vw); height: 26px; border-radius: 13px; background: rgba(255, 253, 248, .22); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--go); border-radius: 13px; transition: width .25s linear; }
.banner.success { background: var(--go); }
.banner .mark { width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center;
  font-size: 58px; font-weight: 800; }
.ready-strip { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: var(--radius-small); background: #dff1e6; color: #12522c;
  font-weight: 700; border: 2px solid var(--go); }
[data-theme="dark"] .ready-strip { background: #12361f; color: #bfe8cd; }
.choose.with-buddies { grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(var(--athletes, 1), minmax(230px, 1.15fr)); }
.choose .routine.other { opacity: .78; }
.choose .routine .who { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.choose .routine.mine { border-top: 6px solid var(--go); padding-top: 6px; }
.choose .routine.other { border-top: 6px solid var(--line); padding-top: 6px; }

/* "Video / Setup" pop-up: the clip large on the left, setup card and the athlete's positions on the right */
.info-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--space-group); align-items: start; }
@media (max-width: 1100px) { .info-grid { grid-template-columns: 1fr; } }

/* set positions v0.3.2: ONE cluster for everything that is done - step, hold-to-move, the step's action, the way back */
.cluster .titlebar { justify-content: center; }
.stepdots { display: flex; gap: 8px; font-size: var(--size-body); }
.stepdots span { padding: 4px 14px; border-radius: 999px; border: 2px solid rgba(255, 253, 248, .35); opacity: .6; white-space: nowrap; }
.stepdots span.on { background: var(--bar-ink); color: var(--bar); border-color: var(--bar-ink); opacity: 1; font-weight: 800; }
.cluster .jog .btn.huge { min-height: 150px; font-size: 56px; }
/* bring-up panel in Admin (ladder L1-L3): the two hold-to-move buttons like the set-positions cluster, a bit lower */
.bringup .jog .btn.huge { min-height: 96px; font-size: 44px; }
.bringup .titlebar small { margin-left: auto; }
.valuechip { flex: 1; text-align: center; padding: 10px 8px; border-radius: var(--radius-small); color: #fff; font-weight: 750; font-size: var(--size-large); }
.valuechip.start { background: var(--start-marker); } .valuechip.end { background: var(--end-marker); }

/* the change-of-direction countdown: big, but see-through and out of the way of the curve's newest part */
.reversal { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); z-index: 1; pointer-events: none; font-size: clamp(120px, 14vw, 240px);
  font-weight: 800; line-height: 1; color: var(--ink); opacity: .22; letter-spacing: -.04em; display: flex; flex-direction: column; align-items: center; }
.reversal small { font-size: clamp(26px, 2.6vw, 48px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }   /* "Pause" above the digits of a hold (0.10.0) */
/* hold-to-move buttons own their touches: a finger that drifts while pressing must not become a pan gesture that cancels the
   hold (owner 2026-09-23: the touch jog "starts and stops at once") */
.btn.hold { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cluster .btn { white-space: normal; text-align: center; line-height: 1.15; padding-top: 10px; padding-bottom: 10px; }
.cluster .btn.huge { font-size: var(--size-large); min-height: 110px; }
.cluster .jog .btn.huge { font-size: 56px; }
.valuechip { font-size: var(--size-body); white-space: nowrap; }

/* v0.3.3: Start above End with the swap arrows between them; settings wait (dimmed) until the positions are set */
.reptable { position: relative; }
.reptable .swap { position: absolute; left: 166px;       /* right of the position values, left of the steppers */ top: calc(35px + (100% - 35px) / 2); transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font-size: 26px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: var(--shadow); }
.reptable .swap:active { background: var(--accent-soft); }
.stepper.off, .reptable.off .where { opacity: .38; }
.reptable .swap { z-index: 2; }
.reptable .swap:disabled { color: var(--ink-3); border-color: var(--line); box-shadow: none; cursor: default; }   /* solid: the line never shows through */
.stepper.off button { cursor: default; }
.box.notice { border-color: var(--go); background: #e6f4ea; }
.box.notice.fatigue-target { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; flex-shrink: 0; padding-block: 10px; }
.box.notice.fatigue-target p { margin: 0; }
[data-theme="dark"] .box.notice { background: #12361f; }
.fields3 { align-items: flex-end; }
.fields3 .field { flex: 1 1 0; }
.fields3 .stepper { max-width: none; }

/* v0.3.4 lobby: numbered flat athlete rows (1 = who started the session), routine as a line of pictogram chips */
.lobby-rows { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.athlete-row { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: 12px 18px;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 118px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); width: 100%; }
.athlete-row.active { border-color: var(--go); box-shadow: inset 10px 0 0 var(--go), var(--shadow); }
.athlete-row.finished { opacity: .6; cursor: default; }
.athlete-row.empty { min-height: 64px; border-style: dashed; box-shadow: none; background: transparent; color: var(--ink-2); font-weight: 700; font-size: var(--size-large); }
.athlete-row .who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.athlete-row .nr { width: 44px; height: 44px; border-radius: 50%; background: var(--bar); color: var(--bar-ink); display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--size-large); flex: none; }
.athlete-row.empty .nr { background: var(--surface-2); color: var(--ink-2); }
.athlete-row .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 420px; }
.track { display: flex; gap: 8px; overflow-x: auto; align-items: stretch; padding: 2px; }
.chipx { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 112px; padding: 6px 8px; border: 2px solid var(--line); border-radius: var(--radius-small);
  background: var(--surface); font-size: var(--size-small); font-weight: 700; text-align: center; position: relative; line-height: 1.15; }
.chipx .pictogram { width: 84px; height: 54px; }
.chipx.next { border-color: var(--go); box-shadow: inset 0 -6px 0 var(--go); }
.chipx.done { background: var(--surface-2); color: var(--ink-2); }
.chipx b { position: absolute; top: 2px; right: 6px; color: var(--go); font-size: 18px; }
.lasttime { display: flex; flex-direction: column; gap: 8px; }
.hbtn .person { margin: -4px 0; }

/* the step that is due draws the eye: a calm pulse on the ONE button to press now */
@keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(30, 132, 73, .55); } 50% { transform: scale(1.035); box-shadow: 0 0 0 14px rgba(30, 132, 73, 0); } }
.btn.pulse { animation: pulse 1.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }
.stepdots.dark { margin-top: 10px; }
.stepdots.dark span { border-color: var(--ink-3); color: var(--ink-2); }
.stepdots.dark span.on { background: var(--go); border-color: var(--go); color: #fff; }

/* v0.3.5 lobby: chips of ONE width (names may take two lines), open chips sortable in the row, last training under its athlete */
.chipx { width: 128px; min-width: 128px; flex: none; }
.chipx > span { min-height: 2.35em; display: flex; align-items: center; justify-content: center; }
.track.inner { overflow: visible; padding: 0; }
.sortable.sort-x { flex-direction: row; }
.sortable.sort-x .chipx { touch-action: none; cursor: grab; transition: transform .12s ease; }
.sortable.sort-x .chipx.dragging { transition: none; z-index: 5; box-shadow: var(--shadow); border-color: var(--accent); cursor: grabbing; }
.btn.plus { min-width: var(--touch-small); padding: 0; font-size: 32px; line-height: 1; }
.btn.small.icon { min-width: var(--touch-small); padding: 0 12px; }                  /* history as a chart mark, repeat as an arrow (0.10.1) */
.athlete-block { display: flex; flex-direction: column; gap: 4px; }
/* the last two trainings under the athlete (0.10.1): dimmed pictograms that are tappable, the arrow after the row repeats the day;
   compact enough for eight exercises (the track scrolls sideways beyond that) */
.lasttime { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 12px; margin-left: 76px; padding: 4px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-small); background: var(--surface-2); }
.lasttime .label { display: flex; flex-direction: column; font-size: var(--size-small); }
.lasttime .track { align-items: center; }
.lasttime .repeat { flex: none; margin-left: 4px; }
.chipx.mini { width: 88px; min-width: 88px; padding: 3px 4px; font-size: 12px; background: var(--surface); font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.chipx.mini.dim { opacity: .55; }
.chipx.mini.dim:active { opacity: 1; border-color: var(--go); }
.chipx.mini .pictogram { width: 52px; height: 32px; }
.chipx.mini > span { min-height: 2.2em; }
.picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-group); }
.picker .group { display: flex; flex-direction: column; gap: var(--space-in); }
.picker .group h2 { text-align: center; }

/* header: the exercise framed, previous / next around it */
.exnav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; }
.exnav > :first-child { justify-self: end; } .exnav > :last-child { justify-self: start; }
.exnav .hbtn { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.header .title.framed { border: 2px solid var(--exercise); background: var(--exercise); color: #fff; border-radius: var(--radius-small); padding: 8px 22px; }   /* the current exercise in blue, numbered (owner 2026-09-23) */
/* one tap to START / END / rest (0.10.0) - 0.15.1 (owner 2026-09-24: "completely mixed up, not fitting"): three pills of one
   height under the speed, quiet small type on one line that never runs over the edge */
.cluster .row.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-in); }
.cluster .row.moves .btn { min-height: 48px; padding: 0 8px; border-radius: 999px; font-size: clamp(14px, .85vw, 16px); font-weight: 700;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 44px; }
/* gamepad keys as badges (0.15.1, owner: "show the blue cross and the red circle, and the index-finger key for the test") */
.padkey { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  font-size: 17px; font-weight: 800; line-height: 1; color: #fff; background: var(--ink-3); vertical-align: middle; flex: none; }
.padkey.cross { background: #2e6ad1; }
.padkey.circle { background: #d13b3b; }
.padkey.shoulder { border-radius: 8px; background: var(--ink-2); font-size: 15px; }
/* the question after the range test (0.15.0): a modest window, two answers that never run over its edge (0.15.1) */
.dialog.ask { width: min(820px, 100%); }
.dialog.ask .answers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-group); }
.dialog.ask.three { width: min(1180px, 100%); } .dialog.ask.three .answers { grid-template-columns: 1fr 1fr 1fr; }
.dialog.ask .answers .btn { white-space: normal; min-height: 96px; padding: 12px 16px; font-size: var(--size-large); gap: 12px; line-height: 1.15; }
.test .keys { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.btn.tostart { border-color: var(--start-marker); color: var(--start-marker); }
.btn.toend { border-color: var(--end-marker); color: var(--end-marker); }
.force-tile button.zero { padding: 3px 8px; display: inline-flex; align-items: center; }   /* the scale icon: tap = zero the force (owner 2026-09-23) */

.list-item .nr { width: 36px; height: 36px; border-radius: 50%; background: var(--bar); color: var(--bar-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }

/* pop-up layers let the screen behind them shine through a little (owner 2026-09-21): the machine and the moving scale
   stay visible - about 85 % cover for banners, a bit more for dialogs with text to read */
.overlay { background: rgba(22, 24, 27, .38); }
.overlay.alarm { background: rgba(196, 48, 43, .9); }
.banner { background: rgba(22, 24, 27, .85); }
.banner.success { background: rgba(30, 132, 73, .88); }
.dialog { background: rgba(255, 253, 248, .93); }
[data-theme="dark"] .dialog { background: rgba(27, 30, 33, .93); }

/* set positions v0.3.10: ONE screen. "Test ROM" sits on top of the cluster, above the status dots (owner 2026-09-21);
   the two capture buttons carry the stored value as their second line, so what changes is read where it is changed */
.cluster .titlebar { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
.cluster .stepdots { justify-content: center; gap: 6px; }
.cluster .stepdots span { padding: 4px 10px; }
.stepdots span.done { opacity: 1; border-color: var(--go); }
.cluster .btn.test, .cluster .btn.capture { flex-direction: column; gap: 2px; }
.cluster .btn.test { min-height: 84px; }
.cluster .btn.test b { font-size: var(--size-large); line-height: 1.1; font-weight: 800; }
.cluster .btn.test small { opacity: .85; }
.cluster .btn.capture { min-height: var(--touch); padding-left: 10px; padding-right: 10px; }
.cluster .btn.capture b { font-size: var(--size-body); font-weight: 800; white-space: nowrap; }
.cluster > .body > * { flex-shrink: 0; }                  /* a narrow screen scrolls the cluster, it never squeezes a button */
.cluster .btn.capture small, .cluster .btn.test small { font-weight: 600; font-size: var(--size-small); }
.cluster .btn.capture small { opacity: .92; }
.cluster .btn.small { min-height: var(--touch-small); font-size: var(--size-body); }
.cluster .jog .btn.huge { min-height: 124px; }
.box.confirmed { border-color: var(--go); color: var(--go); font-weight: 750; text-align: center; }

/* the instruction clip v0.3.10: a play symbol ON the picture while it stands, and two round arrows below it - turning
   left = 3 s back (far left), turning right = 3 s forward (far right). Own drawings, no icon font. */
.clipbox { position: relative; }
.clipbox .playmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; height: 112px; border-radius: 50%; border: 0;
  background: rgba(22, 24, 27, .62); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.clipbox .playmark svg { width: 56px; height: 56px; margin-left: 8px; fill: #fff; }
.clipbox .playmark:active { background: rgba(22, 24, 27, .8); }
.clipbar { display: flex; justify-content: space-between; align-items: center; }
.seek { width: 68px; height: 68px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); padding: 0; cursor: pointer; position: relative; }
.seek svg { width: 100%; height: 100%; display: block; }
.seek span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--size-small); padding-top: 4px; }
.seek:active { color: var(--accent); }
.clipprogress { flex: 1; height: 6px; margin: 0 14px; border-radius: 3px; background: var(--line); overflow: hidden; }
.clipprogress i { display: block; height: 100%; width: 0; background: var(--ink-2); }
.clipbox .silent { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(22, 24, 27, .7); color: #fff;
  font-weight: 700; font-size: var(--size-small); pointer-events: none; }
.cluster > .body { overflow: auto; }

/* set positions v0.3.10: the instruction clip sits in the free top left corner of the machine's frame, larger than the
   narrow text column could show it; the machine is drawn flush at the bottom and just small enough that nothing of it
   (the axis begins at 100 of the drawing's 665 units) reaches under the clip. 96px = the clip's control bar + margins. */
.stage { container-type: size; }
.stage .clipcorner { position: absolute; left: 14px; top: 14px; width: 46cqw; z-index: 1; }
.stage .graphic { inset: auto 0 0 0; height: min(100cqh, calc((100cqh - (46cqw * 9 / 16 + 96px)) * 1.177)); }
/* the owner's local photo of the machine has a white background: it melts into the panel instead of standing on it as a box */
.stage .graphic image { mix-blend-mode: multiply; }
[data-theme="dark"] .stage .graphic image { mix-blend-mode: normal; }

/* set positions v0.3.10: the last three ranges that were used, one tap brings one back - start green, end red like everywhere */
.earlier .label { font-size: var(--size-small); font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.earlier .row { display: flex; gap: 6px; }
.rangechip { flex: 1; min-height: 52px; border-radius: var(--radius-small); border: 2px solid var(--line); background: var(--surface); color: var(--ink-3);
  font: inherit; font-weight: 800; font-size: var(--size-body); cursor: pointer; white-space: nowrap; padding: 0 6px; }
.rangechip .s { color: var(--start-marker); } .rangechip .e { color: var(--end-marker); }
.rangechip:active { background: var(--accent-soft); }
.cluster .jog .btn.huge { min-height: 108px; }
.cluster .btn.huge { min-height: 92px; }
.cluster > .body.tight { padding: 16px 20px; gap: 12px; }          /* everything of "set positions" fits a 1080p kiosk without scrolling */

/* session photos v0.4.0: the camera mark blinks while the burst runs - top left of the live chart, away from the
   curve's newest part and the repetition counter */
#cammark { position: fixed; left: 40px; top: 104px; z-index: 40; width: 68px; height: 68px; border-radius: 50%; background: rgba(22, 24, 27, .78);
  display: flex; align-items: center; justify-content: center; animation: camblink .36s steps(2, jump-none) infinite; pointer-events: none; }
#cammark svg { width: 40px; height: 40px; }
@keyframes camblink { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { #cammark { animation: none; } }

/* closing page with the day's panel on the left: saying, times (headline = time under load), pictures */
.closing { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); gap: var(--space-group); flex: 1; min-height: 0; }
.closing > .closing-grid:only-child { grid-column: 1 / -1; }
.dayphotos { min-height: 0; }
.dayphotos .body { overflow: auto; }
.titlebar.saying { justify-content: center; text-align: center; font-size: var(--size-title); padding: 18px 20px; }
.tiles.times { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-in); }
.photogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photo { position: relative; padding: 0; border: 3px solid transparent; border-radius: var(--radius-small); overflow: hidden; background: var(--bar); cursor: pointer;
  aspect-ratio: 16 / 9; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo.print { aspect-ratio: 16 / 11; background: transparent; }         /* the composed print keeps its own white frame (0.11.1) */
.photo.print img { object-fit: contain; }
.photo.fav { border-color: var(--caution); }
.photo .star { position: absolute; right: 6px; top: 2px; color: var(--caution); font-size: 22px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.photolarge { width: 100%; max-height: 62vh; object-fit: contain; background: #000; border-radius: var(--radius-small); }
.list-row { display: flex; gap: 8px; align-items: stretch; }
.list-row .list-item { flex: 1; }
@media (max-width: 1100px) { .closing { grid-template-columns: 1fr; } }
.tiles.times .tile { min-width: 0; }
.tiles.times .tile .label { white-space: normal; line-height: 1.15; min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
.dayphotos .body { overflow-x: hidden; }

/* admin: the coach's voice clips - which are there, listen to them */
/* no scroll area of its own: a list inside a scrolling page that scrolls itself hides rows from finger and eye */
.voicelist { display: flex; flex-direction: column; gap: 6px; }
.voicerow { display: flex; align-items: center; gap: 12px; }
.voicerow code { min-width: 110px; color: var(--ink-3); font-size: var(--size-small); }
.voicerow.missing .grow { color: var(--ink-3); }
.voicerow .btn.small { min-width: 56px; padding: 0; }

/* ARX Insight, one tap away from an athlete's name: a brain with a lit bulb; the pop-up shows plan and last session side by side */
.insightbtn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.insightbtn:active { background: var(--accent-soft); }
.brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-group); align-items: start; }
.brief .note-line { font-weight: 650; }
.brief .list-item.miss { border-color: var(--caution); }
.brief .list-item { cursor: default; flex-wrap: wrap; row-gap: 8px; }                  /* a full row grows downwards, never off to the right (0.11.1) */
.brief .list-item .grow { flex: 1 1 auto; min-width: 12ch; }
.brief .list-item .hint.num { white-space: nowrap; flex: none; }
.brief .list-item .badge { white-space: normal; text-align: left; line-height: 1.25; max-width: 100%; }

/* the coach's speech bubble (owner 2026-09-21): an oval, dark blue line and letters on a light blue fill, narrow - two
   or three words per line, so the eye reads it in one or two fixations. Top of the screen, never in the way of a tap
   or of the stop bar. */
#speech { --speech-line: #14366f; --speech-fill: #e4eefc; position: fixed; left: 50%; top: 100px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 18px; pointer-events: none; opacity: 0; transition: opacity .22s ease, transform .22s cubic-bezier(.2, 1.4, .4, 1); }
#speech.in { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
#speech:not(.in) { transform: translateX(-50%) translateY(-8px) scale(.94); }
#speech .coach { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--speech-line); color: #fff; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow); }
/* The bubble is a rectangle with strongly rounded corners and a slimmer type at the same size (owner 2026-09-24 15:05:
   the oval "looked unprofessional" - it was an ellipse since L5, when the text stuck out of it); a touch of
   transparency lets the screen show through. */
#speech .bubble { position: relative; background: var(--speech-fill); color: var(--speech-line); border: 3px solid var(--speech-line); border-radius: 28px;
  padding: 18px 30px; max-width: 24ch; box-sizing: content-box; text-align: center; text-wrap: balance; font-size: calc(var(--size-title) * .88); font-weight: 500;
  line-height: 1.2; box-shadow: 0 10px 30px rgba(20, 54, 111, .28); opacity: .9; }
#speech .bubble.long { padding: 20px 34px; max-width: 32ch; font-size: calc(var(--size-title) * .8); }
#speech .bubble .numbers { display: block; margin-top: 6px; font-size: var(--size-small); font-weight: 600; letter-spacing: .02em; opacity: .85; }   /* the numbers line (0.11.0) */
#speech .bubble::before, #speech .bubble::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
#speech .bubble::before { left: -22px; width: 30px; height: 30px; background: var(--speech-line); }
#speech .bubble::after { left: -11px; width: 24px; height: 19px; background: var(--speech-fill); }
@media (prefers-reduced-motion: reduce) { #speech { transition: none; } }

/* result page: what the set was worth, in words - and "once more, now" when it missed its fatigue target */
/* the verdict of a set: the text in full width, the button below it - side by side the long German sentences overflowed the
   right panel (owner 2026-09-23, "scroll bars"); the box may never be wider than its column */
.box.verdict { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; font-size: var(--size-body); overflow-wrap: anywhere; }
.box.verdict .btn { align-self: flex-end; white-space: normal; text-align: center; line-height: 1.15; padding-top: 10px; padding-bottom: 10px; }
.box.verdict.ok { border-color: var(--go); background: #e6f4ea; }
.box.verdict.miss { border-color: var(--caution); background: #fff6df; }
.box.verdict .record { color: var(--go); }
[data-theme="dark"] .box.verdict.ok { background: #12361f; } [data-theme="dark"] .box.verdict.miss { background: #3a2f10; }

/* closing page: one picture of the set next to its four figures */
.closing-grid.photos { grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); }
.closing-grid .tiles.with-photo { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(170px, 1.25fr); }
/* the picture takes the height of the figures next to it - it never makes the row taller */
.closing-grid .tiles.with-photo .photo.beside { aspect-ratio: auto; height: 100%; min-height: 96px; position: relative; }
.closing-grid .tiles.with-photo .photo.beside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* v0.9.0 admin: the masked field for an API key - one row with its button, never wider than a sentence */
.input.key { flex: 1 1 320px; max-width: 560px; font-size: var(--size-body); min-height: var(--touch-small); }

/* v0.9.0 check-in by code (docs/feature-checkin-code.md): the QR on the profile and after "Create" - large, on white,
   next to what to do with it; the camera dialog; the print card that is the only thing on paper */
.codeshow { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-group); align-items: center; }
svg.qr { width: 300px; height: 300px; border: 2px solid var(--line); border-radius: var(--radius-small); background: #fff; display: block; }
.codecard { flex-shrink: 0; }
.dialog.scan { width: min(1100px, 100%); }
.scanbox { background: #000; border-radius: var(--radius-small); overflow: hidden; aspect-ratio: 16 / 9; max-height: 52vh; }
.scanvideo { width: 100%; height: 100%; object-fit: cover; display: block; }
.printcard { display: none; }
@media print {
  body { display: block; overflow: visible; background: #fff; }
  body > :not(.printcard) { display: none !important; }
  .printcard { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; color: #000; }
  .printcard svg.qr { width: 70mm; height: 70mm; border: 0; }
}

/* ARX Insight as a screen inside arx-free: the frame takes the room, the notice sits under it until Insight allows framing */

/* --- the analysis screens (1.3.0, web/js/features/insight/): the report and the daily check-in ------------------------------ */
.report { display: flex; flex-direction: column; gap: var(--space-group); padding-right: 6px; }
.report .accent { color: var(--danger); } .report .good { color: var(--go); } .report .warn { color: var(--caution); }
.report .ink2 { color: var(--ink-2); } .report .ink3 { color: var(--ink-3); } .report .fc { color: var(--forecast, #8b6fc7); }
.report .right { text-align: right; }
.report-main { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-group); align-items: start; }
@media (max-width: 1279px) { .report-main { grid-template-columns: 1fr; } }
.report .side { position: sticky; top: 0; max-height: calc(100vh - var(--header) - var(--footer) - 40px); overflow-y: auto; padding-right: 4px; }  /* scrolls on its own (owner 2026-09-25: its end was out of reach) */
.report .sbox { border: 2px solid var(--ink); border-radius: var(--radius-small); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.report .bhead { font-size: var(--size-small); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 700; }
.report .bhead.warn { color: var(--caution); }
.report .sline { font-weight: 600; } .report .ss { color: var(--ink-2); font-size: 15px; }
.report .bx { display: flex; gap: 10px; align-items: center; } .report .bx .f { width: 26px; flex: none; text-align: center; }
.report .bn { font-size: var(--size-small); }
.report .bo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.report .bo i { font-style: normal; color: var(--danger); font-weight: 700; }
.report .bwatch { font-size: 15px; }
.report .mainframe { min-width: 0; }
.report .chapnav { position: sticky; top: 0; background: var(--paper); z-index: 2; padding: 6px 0; }
.report .chapnav b { color: var(--headline); margin-right: 4px; }
.report .chaphead { display: flex; align-items: baseline; gap: 14px; border-top: 3px solid var(--ink); padding-top: 14px; margin-top: 10px; }
.report .chaphead .no { font-size: 34px; line-height: 1; color: var(--headline); font-weight: 800; font-variant-numeric: tabular-nums; }
.report .chaphead h2 { margin: 0; font-size: clamp(22px, 1.8vw, 28px); }
.report .eyebrow { color: var(--headline); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.report .eyebrow::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.report h2.sec, .report h3.sec { margin: 0; font-size: clamp(19px, 1.4vw, 23px); color: var(--ink-2); }
.report .lead { font-size: 19px; }
.report .panel { background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-small); padding: 18px; }
.report .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--line); border: 2px solid var(--ink); }
@media (max-width: 720px) { .report .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.report .kpis .tile { background: var(--surface); padding: 12px 14px; min-width: 0; }
.report .kpis .tile .value { font-size: clamp(24px, 3vw, 36px); font-weight: 750; }
.report .kpis .tile .label { color: var(--ink-3); font-size: var(--size-small); text-transform: uppercase; letter-spacing: .06em; }
.report .interp { font-size: 15px; color: var(--ink-2); border-left: 3px solid var(--line); padding: 6px 12px; }
.report .interp.warn { border-color: var(--caution); } .report .interp.good { border-color: var(--go); }
.report .interp .act { display: block; color: var(--ink); margin-top: 2px; }
.report .verdict { display: grid; grid-template-columns: auto 1fr; gap: 16px; border-left: 8px solid var(--line); align-items: start; }
.report .verdict.good { border-left-color: var(--go); } .report .verdict.warn { border-left-color: var(--caution); } .report .verdict.accent { border-left-color: var(--danger); }
.report .verdict .big { font-size: clamp(32px, 2.6vw, 44px); font-weight: 800; line-height: 1; display: flex; flex-direction: column; }
.report .verdict .big small { font-size: var(--size-small); font-weight: 600; color: var(--ink-3); }
@media (max-width: 560px) { .report .verdict { grid-template-columns: 1fr; } }
.report .hero { border: 2px solid var(--ink); border-radius: var(--radius-small); padding: 14px 18px; gap: 22px; font-size: var(--size-body); text-align: left; }  /* NOT the start screen's .hero (its logo size) - the cause of the giant chapter 2 (owner 2026-09-25) */
.report .hero .when { color: var(--headline); font-size: clamp(24px, 1.9vw, 32px); text-transform: uppercase; font-weight: 800; line-height: 1; display: flex; flex-direction: column; }
.report .hero .when small { font-size: var(--size-small); color: var(--ink-3); text-transform: none; font-weight: 600; }
.report ol.plan { list-style: none; counter-reset: plan; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.report ol.plan li.v4 { counter-increment: plan; display: grid; grid-template-columns: 56px 1fr; gap: 12px; border-top: 2px solid var(--line); padding-top: 12px; }
.report ol.plan li.v4::before { content: counter(plan); font-size: 28px; font-weight: 800; color: var(--headline); line-height: 1; grid-row: 1 / span 6; }
.report ol.plan .ex { font-size: 21px; font-weight: 700; }
.report ol.plan .nums { font-size: 17px; } .report ol.plan .nums b { font-size: 21px; }
.report ul.why { margin: 0; padding-left: 20px; } .report ul.why li { margin: 4px 0; }
.report .strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(56px, 1fr); gap: 4px; overflow-x: auto; }
.report .strip .day { text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; font-size: var(--size-small); display: flex; flex-direction: column; gap: 4px; }
.report .strip .day.sess { border-color: var(--ink); } .report .strip .day b { font-size: 18px; }
.report .strip .dots { display: flex; justify-content: center; gap: 3px; }
.report .strip .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--go); display: inline-block; }
.report .strip .dots i.partial { border-radius: 1px; background: var(--caution); }
.report .strip .dots i.recovering { background: transparent; border: 2px solid var(--danger); box-sizing: border-box; }
.report .meter { height: 12px; background: var(--surface-2); border-radius: 6px; overflow: hidden; } .report .meter i { display: block; height: 100%; background: var(--go); }
.report .meter.high i { background: var(--caution); }
.report .finding { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
.report .grid-prog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-in); }
@media (max-width: 760px) { .report .grid-prog { grid-template-columns: 1fr; } }
.report .excard { background: var(--surface); border: 2px solid var(--line); border-radius: 6px; padding: 14px 16px; min-width: 0; }
.report .excard .exname { font-size: 20px; font-weight: 700; } .report .excard .cur { font-size: 22px; font-weight: 750; }
.report .meta { font-size: 15px; }
.report details.more { border-top: 2px solid var(--line); padding-top: 10px; }
.report details.more > summary { cursor: pointer; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; padding: 8px 0; }
.report .chip { display: inline-flex; align-items: center; min-height: 0; padding: 2px 10px; font-size: var(--size-small); font-weight: 600; line-height: 1.3; cursor: default; }
.report .chip.up { background: var(--go); color: #fff; border-color: var(--go); } .report .chip.flat { background: var(--caution); color: #111; border-color: var(--caution); }
.report .chip.low { background: var(--surface-2); color: var(--ink-3); } .report .chip.warn { border-color: var(--caution); color: var(--caution); }
.report .chip.outline { background: transparent; } .report .chip.outline.good { border-color: var(--go); color: var(--go); }
.report .chip.outline.warn { border-color: var(--caution); color: var(--caution); } .report .chip.outline.accent { border-color: var(--danger); color: var(--danger); }
.report .chip.outline.ink2 { border-color: var(--line); color: var(--ink-2); }
.report .grp { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--ink-3); padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.report .grp.Push { background: #3E86A8; } .report .grp.Pull { background: #5E9138; } .report .grp.Drive { background: #C9552F; }
.report .grp.warn { background: var(--caution); color: #111; } .report .grp.accent { background: var(--danger); }
.report .box.warn { border-color: var(--caution); }
.report .rep-svg { width: 100%; height: auto; display: block; } .report .ex-svg { width: 100%; height: auto; display: block; margin-top: 8px; }
.report .spk { flex: none; }
.report table.data { width: 100%; } .report table.data td, .report table.data th { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.report table.data td.num, .report table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report .big { font-size: 24px; }
.hl { color: var(--headline); }
.header .title .count { font-size: .62em; font-weight: 600; opacity: .85; margin-left: 4px; vertical-align: super; white-space: pre; }  /* "exercise 1 of 4" (owner 2026-09-25) */
/* the photo wall in the athlete's profile (1.7.0): every picture over time, the favourites first, date and exercise below */
.photowall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photowall .wallitem { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.photowall .photo { aspect-ratio: 4 / 3; } .photowall .photo.print { aspect-ratio: 16 / 11; }
.photowall .cap { font-size: var(--size-small); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brief .planned h3 { margin: 0; } .brief .planned .row.spread { align-items: center; }
/* the check-in's tiles: a body part or an exercise, its level in colour */
.chip.tile { display: inline-flex; flex-direction: column; align-items: center; min-width: 118px; min-height: 78px; padding: 8px 12px; border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); }  /* a chip, not the report's dark stat tile (.tile) */
.chip.tile.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.tile .tilename { font-weight: 700; } .chip.tile .hint { font-size: var(--size-small); }
.chip.tile.careful, .chip.tile.t_careful { border-color: var(--caution); background: color-mix(in srgb, var(--caution) 14%, var(--surface)); }
.chip.tile.injury, .chip.tile.t_injury { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.chip.tile.l_careful, .chip.tile.l_injury { border-color: var(--forecast, #8b6fc7); background: color-mix(in srgb, var(--forecast, #8b6fc7) 12%, var(--surface)); }
/* the goal screen (1.4.0): the interview's tiles, the focus and exclusion states, the two sliders, the mix */
.goal .tiles6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-in); }
.goal .tiles6 .chip.tile { min-width: 0; align-items: flex-start; text-align: left; }
.goal .tiles6 .chip.tile .hint { white-space: normal; text-align: left; }
.chip.tile.on .hint { color: var(--paper); opacity: .85; }
.chip.tile.on .hint.price { opacity: 1; font-weight: 700; }
.chip.tile.more { border-color: var(--go); color: var(--go); } .chip.tile.less { border-color: var(--caution); } .chip.tile.off { border-color: var(--danger); color: var(--danger); }
.chip.tile.elsewhere, .chip.tile.unwanted { border-color: var(--ink-3); color: var(--ink-2); }
.goal input.goal-range { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; margin: 12px 0; border-radius: 999px; background: var(--line); outline: none; touch-action: none; }
.goal input.goal-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); cursor: grab; }
.goal input.goal-range::-moz-range-thumb { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); cursor: grab; }
.goal .poles { display: flex; justify-content: space-between; font-weight: 700; }
.goal .mix { display: flex; gap: var(--space-group); } .goal .mix .v { font-size: var(--size-title); font-weight: 800; } .goal .mix .k { font-size: var(--size-small); color: var(--ink-3); font-weight: 700; }
.goal .input.short { max-width: 200px; }
.goal details.more > summary { font-weight: 700; cursor: pointer; }
/* the AI coach on the report (1.5.0): Insight's coach boxes, the ✎ marks in the plan, the chat panel */
.coach { border: 2px solid var(--line); border-left: 6px solid var(--danger); border-radius: var(--radius-small); padding: 14px 18px; margin: 10px 0 6px; background: var(--surface); font-size: 18px; line-height: 1.5; }
.coach .who { font-size: var(--size-small); letter-spacing: .12em; text-transform: uppercase; color: var(--danger); font-weight: 700; display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.coach .who small { color: var(--ink-3); letter-spacing: .04em; text-transform: none; font-weight: 600; }
.coach h3 { font-size: 24px; margin: 0 0 6px; text-transform: none; }
.coach p { margin: 0 0 8px; } .coach .then { font-weight: 600; } .coach .then.big { font-size: 20px; }
.coach ul { margin: 8px 0 0; padding: 0; list-style: none; } .coach li { position: relative; padding-left: 22px; margin-bottom: 6px; font-size: 17px; color: var(--ink-2); }
.coach li::before { content: "›"; position: absolute; left: 4px; color: var(--danger); font-weight: 700; }
.coach .verd { display: grid; gap: 6px; margin-top: 10px; } .coach .verd div { font-size: 16px; color: var(--ink-2); } .coach .verd b { color: var(--ink); }
.coach.skel { color: var(--ink-3); border-left-color: var(--line); } .coach.off { border-left-color: var(--caution); }
.coach.skel .bar { height: 14px; border-radius: 7px; background: var(--surface-2); margin: 10px 0; animation: coachpulse 1.4s ease-in-out infinite; }
@keyframes coachpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.coach .btn.small { margin-left: 8px; }
.pen { color: var(--danger); font-weight: 700; }
.report .coachfocus { font-weight: 600; }
.chat { position: fixed; right: 0; top: var(--header); bottom: var(--footer); width: min(520px, 100vw); z-index: 30; background: var(--surface); border-left: 3px solid var(--ink); display: none; flex-direction: column; box-shadow: -8px 0 24px rgba(0, 0, 0, .25); }
.chat.open { display: flex; }
.chat .chathead { padding: 12px 16px; border-bottom: 2px solid var(--line); align-items: center; }
.chat .chathead b { font-size: 20px; text-transform: uppercase; color: var(--danger); }
.chat .chatlog { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat .msg { max-width: 92%; padding: 10px 14px; border-radius: 12px; font-size: 17px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat .msg.q { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 3px; }
.chat .msg.a { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 3px; }
.chat .msg.err { align-self: flex-start; background: color-mix(in srgb, var(--caution) 14%, var(--surface)); color: var(--ink); border: 1px solid var(--caution); }
.chat .chatsug { padding: 0 16px 8px; } .chat .chatsug .chip { font-size: 15px; min-height: 44px; }
.chat .chatform { padding: 10px 16px; border-top: 2px solid var(--line); align-items: stretch; }
.chat .chattext { flex: 1; min-height: 52px; max-height: 140px; resize: none; font: inherit; font-size: 17px; padding: 10px 12px; }
.chat .chatsend { min-height: 52px; min-width: 64px; }
.hint.caution { color: var(--caution); }