/* =====================================================================
   Race screens (Camp, Runde, Packliste, Inventar, Übersicht) — component
   styles. Every color, radius and shadow comes from tokens.css. The layout
   rules below were tuned in a real race; the v2 redesign changes surfaces,
   type and chrome, not where things sit.
   ===================================================================== */

* { box-sizing:border-box; } html, body { overflow-x:clip; }
html { background:var(--bg); -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--text);
  background:radial-gradient(120% 60% at 50% -10%, var(--bg-glow), transparent 60%) fixed, var(--bg);
  font:15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent; }
/* Body fade-in — index.html adds .ready on DOMContentLoaded. */
body { opacity:0; transition:opacity .3s ease; } body.ready { opacity:1; }
::selection { background:var(--accent-soft); color:var(--text); }
.hidden { display:none !important; }
[hidden] { display:none !important; }
button { font-family:inherit; cursor:pointer; color:inherit; }
input, select, textarea { font-family:inherit; color:var(--text); }
input[type=checkbox] { accent-color:var(--accent); width:20px; height:20px; flex:0 0 auto; }
input::placeholder { color:var(--text-3); }
/* Focus is not optional: accent border + soft ring, everywhere. */
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft); }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* --- topbar ------------------------------------------------------------- */
.topbar { display:flex; align-items:center; gap:.6rem;
  padding:calc(.55rem + env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) .6rem max(.9rem, env(safe-area-inset-left));
  background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-edge);
  position:sticky; top:0; z-index:30; }
/* A short accent bar in front of the clock, which IS the title of this app. */
.clockwrap { display:flex; flex-direction:column; line-height:1.15; min-width:0;
  position:relative; padding-left:.75rem; }
.clockwrap::before { content:""; position:absolute; left:0; top:.2rem; bottom:.2rem;
  width:3px; border-radius:999px; background:var(--accent); }
.big-time { font-family:var(--font-display); font-size:1.75rem; font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
#loop-line { font-size:.82rem; font-variant-numeric:tabular-nums; }
/* 072: race time on a phone in another zone — the zone's short name, small, after the clock. */
.big-time[data-zone]::after { content:attr(data-zone); margin-left:.35rem; font-size:.72rem; font-weight:500;
  letter-spacing:0; color:var(--text-2); vertical-align:.15em; }
.tz-hint { font-size:.72rem; font-weight:500; color:var(--text-2); }
.ov-settings-grid .tz-hint { grid-column:1 / -1; }
.ov-settings-grid .tz-hint:empty { display:none; }
.ov-tz-select { width:100%; min-width:0; }
/* 077: zone line under the place (Neuer Backyard) — text + „Ändern", or the quiet „noch offen" link */
.ov-zone { display:flex; flex-wrap:wrap; align-items:center; column-gap:.75rem; row-gap:.3rem; min-width:0; }
.ov-zone-line { flex:1 1 0; min-width:0; font-size:.82rem; }
.ov-zone .btn-link, .btn-link.ov-zone-open { flex:0 0 auto; width:auto; min-height:44px; padding:.4rem 0; background:none;
  text-align:left; font-size:.86rem; }
/* „noch offen": quiet, a hint and not a call to action */
.ov-zone.is-open .btn-link, .btn-link.ov-zone-open { color:var(--text-2); font-weight:520; }
.ov-zone .ov-tz-select { flex:1 1 100%; }
.topweather { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; white-space:nowrap; }
.tw-temp { font-family:var(--font-display); font-size:1.3rem; font-weight:700; font-variant-numeric:tabular-nums; }
#tw-sub { font-size:.74rem; }
.topbar #conn-dot { margin-left:.5rem; }
.wx-rec { font-weight:600; }
/* Race-window forecast in Camp: one compact, sideways-scrolling hour strip. */
.wx-hours { display:flex; gap:.15rem; overflow-x:auto; margin-top:.45rem; padding-bottom:.2rem;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.wx-h { flex:0 0 auto; min-width:2.6rem; display:flex; flex-direction:column; align-items:center;
  gap:.1rem; font-size:.78rem; font-variant-numeric:tabular-nums; line-height:1.2; }
.wx-h b { font-size:.9rem; font-weight:650; }
.wx-h span:last-child { min-height:1em; }
.yardnav { display:flex; align-items:center; gap:.5rem; margin-bottom:.2rem; flex-wrap:wrap; }
.yardnav .yardnav-label { font-weight:650; color:var(--accent); font-variant-numeric:tabular-nums; min-width:5.5rem; text-align:center; }
.yardnav button { padding:.45rem .8rem; min-height:38px; }
.yardnav button:disabled { opacity:.45; cursor:not-allowed; }
.yardnav .live-on { border-color:var(--ok-line); color:var(--ok); background:var(--ok-soft); }
.conn { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.conn.on { background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }
.conn.off { background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }

/* --- buttons ------------------------------------------------------------ */
.ghost { background:var(--surface-2); border:1px solid var(--hairline-strong); color:var(--text-2);
  border-radius:var(--radius-sm); padding:.35rem .7rem; font-size:13px; font-weight:550;
  transition:background var(--t-normal), color var(--t-normal), border-color var(--t-normal); }
.ghost:hover { background:var(--surface-3); color:var(--text); }
.ghost:active { transform:scale(0.97); }
.login-card button, .clock-btn { padding:.7rem 1rem; min-height:44px; background:var(--accent); color:var(--accent-ink);
  border:0; border-radius:var(--radius-sm); font-weight:650; font-size:15px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset;
  transition:background var(--t-normal), transform var(--t-fast); }
.login-card button:hover, .clock-btn:hover { background:var(--accent-hover); }
.login-card button:active, .clock-btn:active { transform:scale(0.98); }
.clock-btn:disabled { opacity:.5; cursor:default; }
.danger { padding:.6rem 1rem; min-height:44px; background:var(--bad-soft); border:1px solid var(--bad-line);
  border-radius:var(--radius-sm); color:var(--bad); font-weight:650;
  transition:background var(--t-normal), color var(--t-normal); }
.danger:hover { background:var(--bad); color:#fff; }

/* --- tabs (legacy sub-tabs) ----------------------------------------------- */
.tabs { display:flex; background:var(--surface); border-bottom:1px solid var(--hairline); }
.tabs button { flex:1; padding:.8rem; background:none; color:var(--text-2);
  border:0; border-bottom:2px solid transparent; font-size:14px; font-weight:500; }
.tabs button.active { border-bottom-color:var(--accent); color:var(--accent); }
main { padding-bottom:calc(var(--nav-h) + 1.2rem + env(safe-area-inset-bottom)); }
.tab { padding:.9rem max(.9rem, env(safe-area-inset-left)); }
#page-camp > .tab + .tab { padding-top:0; }
/* Page switch fades (opacity only). renderAll() never toggles .hidden, so this replays on
   navigation, not on live updates. */
.page:not(.hidden) { animation:fadeInOpacity .18s ease-out; }

/* --- cards + gauges ------------------------------------------------------ */
.card { background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-card);
  border-radius:var(--radius); padding:.95rem 1rem; margin-bottom:.65rem; }
.card > strong:first-child { display:block; font-size:.95rem; margin-bottom:.35rem; }
.card.critical { border-color:var(--bad-line); box-shadow:inset 3px 0 0 var(--bad); }
.row { display:flex; align-items:center; gap:.6rem; }
/* Add-step row (Rundenplan): the flexed text input must be allowed to shrink, and the
   critical-checkbox stays on one line — otherwise the + button leaves the card. */
#tab-round .row input { min-width:0; }
#tab-round .row label { display:flex; align-items:center; gap:.3rem; white-space:nowrap; }
.gauge { height:8px; background:var(--surface-3); border-radius:999px; overflow:hidden; margin-top:.25rem; }
.gauge > i { display:block; height:100%; border-radius:999px; }
.g-ok { background:var(--ok); } .g-low { background:var(--warn); } .g-high,.g-bad { background:var(--bad); }
/* Karte „Runde N — pro Stunde" (tab-food.js): drei Balken, Koffein zugeklappt darunter.
   Die Zeile sieht aus wie die Zeilen darüber (nicht wie ein Akzent-Link), Chevron wie Hilfe. */
.food-dash-line { margin-top:.4rem; }
.food-dash .muted { font-variant-numeric:tabular-nums; }
.food-caf { margin-top:.5rem; border-top:1px solid var(--hairline); }
.food-caf > summary { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:44px;
  padding:0; color:var(--text-2); font-weight:500; list-style:none; cursor:pointer; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; }
.food-caf > summary::-webkit-details-marker { display:none; }
.food-caf > summary::marker { content:''; }
/* Chevron als eigenes Element: summary::after ist schon die 44-px-Tippfläche (shell.css). */
.food-caf-chev { flex:0 0 9px; width:9px; height:9px; margin-right:.2rem;
  border-right:2px solid var(--text-3); border-bottom:2px solid var(--text-3);
  transform:translateY(-2px) rotate(45deg); transition:transform var(--t-fast); }
.food-caf[open] .food-caf-chev { transform:translateY(2px) rotate(225deg); }
.food-caf > summary:focus-visible { border-radius:var(--radius-sm); }
@media (hover:hover) { .food-caf > summary:hover { color:var(--text); } .food-caf > summary:hover .food-caf-chev { border-color:var(--text-2); } }
/* Zugeklappt ist die 44-px-Zeile selbst der Abschluss — das volle Kartenpolster darunter wäre Luft. */
.card.food-dash { padding-bottom:.45rem; }
.food-caf[open] { padding-bottom:.5rem; }
.food-caf[open] > .food-dash-line:first-of-type { margin-top:0; }
@media (prefers-reduced-motion: reduce) { .food-caf-chev { transition:none; } }

/* --- login (legacy card, kept for dialogs that reuse it) -------------------- */
.login-card { background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; width:min(92vw,360px); }
.login-card h1 { margin:0 0 .3rem; font-size:20px; font-weight:650; line-height:1.4; }
.login-card input { padding:.75rem; background:var(--surface-2); border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm); color:var(--text); }
.error { color:var(--bad); }
.big-clock { font-family:var(--font-display); font-size:2.6rem; font-weight:750; letter-spacing:-.02em;
  text-align:center; font-variant-numeric:tabular-nums; line-height:1.15; }
.muted { color:var(--text-2); }

/* Die Lage (Runde). Eine Zahl traegt die Karte — der Puffer bis zur Glocke. Nachts im Camp
   wird das aus Armlaenge gelesen, deshalb gross und mit Tabellenziffern. */
.lage { display:flex; flex-direction:column; gap:.45rem; align-items:center; text-align:center; }
.lage-buffer { display:flex; flex-direction:column; gap:.1rem; }
.lage-num { font-family:var(--font-display); font-size:2.3rem; font-weight:750; line-height:1.1; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.lage-cap { font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.lage-line { color:var(--text); font-size:.98rem; font-variant-numeric:tabular-nums; }
.lage-bar { width:100%; height:6px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.lage-bar i { display:block; height:100%; background:var(--accent); border-radius:999px;
  transition:width var(--t-smooth); }
.lage-dist, .lage-foot { color:var(--text-2); font-size:.86rem; font-variant-numeric:tabular-nums; }
/* Pacer ± des Läufers (+ = hinter dem Plan): dieselbe Zahl wie auf seinem Screen */
.lage-buffer[data-tone="tight"] .lage-num { color:var(--warn); }
.lage-buffer[data-tone="late"] .lage-num { color:var(--bad); }
/* Wogegen der Pacer rechnet ("gegen Ziel 52:00 (Crew)") — direkt unter der Zahl */
.lage-ref { color:var(--text-2); font-size:.9rem; font-variant-numeric:tabular-nums; }
.lage-pacer-note { color:var(--text-2); font-size:.9rem; }
.lage-stale .lage-num, .lage-stale .lage-line { color:var(--text-3); }
.lage-stale .lage-bar i { background:var(--text-3); }
.lage-stale .lage-foot { color:var(--warn); }

/* Camp und Runde sind die beiden Renntag-Bildschirme: sie bekommen den Platz, Packliste und
   Einkauf ruecken zusammen. Nachts, mit klammen Fingern, entscheidet die Trefferflaeche. */
.bottombar .bb-primary { flex:1.3; }
.bottombar .bb-primary span:not(.bb-badge) { font-weight:650; }
.sb-btn.sb-primary .sb-label { font-weight:600; }

/* Ohne laufenden Backyard sind nur die Seiten aus, die wirklich ein Rennen brauchen. */
body.no-race .bb-btn:not([data-page="start"]):not([data-page="plan"]):not([data-page="feed"]):not([data-page="meins"]):not([data-page="lists"]):not([data-page="pack"]):not([data-page="inv"]):not([data-page="team"]) { opacity:.35; pointer-events:none; }

/* Werkzeuge über einer stehenden Liste (Importieren / Als Vorlage speichern) */
.list-tools { display:flex; flex-wrap:wrap; gap:.4rem; margin:.2rem 0 .8rem; }
.list-tools .ghost { padding:.45rem .75rem; font-size:13px; }

/* --- tap-to-log grid ------------------------------------------------------ */
.preset-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.preset-grid button { min-height:52px; padding:.7rem .5rem; background:var(--surface-2);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--text);
  font-size:15px; font-weight:550; overflow-wrap:anywhere;
  transition:background var(--t-normal), border-color var(--t-normal), transform var(--t-fast); }
.preset-grid button:hover { background:var(--surface-3); }
.preset-grid button:active { transform:scale(0.97); border-color:var(--accent); background:var(--accent-soft); }
/* Bestand je Knopf (036): „noch 3" klein unter dem Namen; leer = gedimmt + gestrichelt, bleibt tippbar */
.preset-grid button .stock { display:block; margin-top:.15rem; font-size:12px; font-weight:500; color:var(--text-2); }
.preset-grid button.is-empty { border-style:dashed; color:var(--text-2); background:transparent; }
.preset-grid button.is-empty .stock { color:var(--warn); font-weight:650; }

/* --- forms ---------------------------------------------------------------- */
.tab input, details input { padding:.55rem .65rem; background:var(--surface-2); border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm); color:var(--text);
  transition:border-color var(--t-normal), box-shadow var(--t-smooth); }
details > summary { color:var(--accent); padding:.2rem 0; cursor:pointer; font-weight:550; }
.add-food { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.6rem; }
.add-food input:first-child { flex:1 1 100%; }
.add-food input[type=number] { flex:1 1 4.5rem; width:4.5rem; min-width:0; }
.add-food .clock-btn { flex:1 1 100%; }
/* Section label: small, semibold, uppercase. */
.cat-head { color:var(--text-3); font-size:11px; font-weight:650;
  letter-spacing:.07em; text-transform:uppercase; margin:.9rem 0 .45rem; }
/* Listen-Umschalter: „Ausrüstung 3/10" ist länger als die anderen — mehr Platz, eine Zeile. */
.lists-seg button[data-list="pack"] { flex-grow:1.6; white-space:nowrap; }
/* Ausrüstung eines Backyards (backyard-lists-ui.js): Kategorie unter der Listen-Überschrift. */
.meins-cat { color:var(--text-3); font-size:.78rem; font-weight:600; margin:.55rem 0 .1rem; }
/* Ein langer Essens-Name bricht um, statt die Knöpfe der Zeile aus dem Bild zu schieben —
   ein schrumpfendes Flex-Kind braucht dafür min-width:0. Handy: der Name bekommt die erste
   Zeile, Zustand und Knöpfe rutschen darunter nach rechts. Ab 1000px nebeneinander. */
.card > .row { flex-wrap:wrap; row-gap:.4rem; }
.row-main { flex:1 1 60%; min-width:0; overflow-wrap:anywhere; }
.row-actions { display:flex; align-items:center; gap:.4rem; margin-left:auto; }
.row .ghost { white-space:nowrap; padding:.3rem .55rem; font-size:.8rem; }
.add-food select.unit-sel { flex:0 1 5.5rem; }
.food-qty-row { display:flex; gap:.4rem; }
.food-qty-row input { flex:1 1 auto; min-width:0; }
.food-qty-row select { flex:0 0 5.5rem; }
.tab select, details select { padding:.55rem .6rem; background:var(--surface-2); border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm); color:var(--text);
  transition:border-color var(--t-normal), box-shadow var(--t-smooth); }
.add-food select { flex:1 1 100%; }
.page-title { margin:.2rem 0 .9rem; font-family:var(--font-display); font-size:22px; font-weight:700;
  letter-spacing:-.01em; line-height:1.3; }

/* --- bottom bar (phone) — fixed, never scrolls ------------------------------ */
.bottombar { position:fixed; bottom:0; left:0; right:0; display:flex;
  padding:.25rem max(.25rem, env(safe-area-inset-right)) calc(.25rem + env(safe-area-inset-bottom)) max(.25rem, env(safe-area-inset-left));
  background:var(--surface); /* opaque in both themes: no page content shows through */
  border-top:1px solid var(--glass-edge); z-index:40; transform:translateZ(0); overflow:hidden; }
.bb-btn { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; background:none; border:0; color:var(--text-3);
  font-weight:550; line-height:1.1; min-height:56px; padding:.35rem 0;
  transition:color var(--t-normal); }
.bb-btn svg { width:24px; height:24px; flex:0 0 auto; stroke-width:1.9; }
.bb-btn > span { font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* active tab: accent color plus a short bar on top — the state reads at a glance */
.bb-btn.active { color:var(--accent); }
.bb-btn.active::before { content:""; position:absolute; top:0; left:30%; right:30%; height:3px;
  border-radius:0 0 3px 3px; background:var(--accent); }
.bb-badge { position:absolute; top:4px; right:18%; background:var(--accent); color:var(--accent-ink);
  font-size:.6rem; font-weight:700; border-radius:var(--radius-pill); padding:0 .3rem; line-height:1.4; }

/* --- Ghost-Pacer map page -------------------------------------------------- */
.pacer-map { height:56vh; min-height:300px; width:100%; border-radius:var(--radius);
  overflow:hidden; background:var(--surface-2); border:1px solid var(--hairline);
  isolation:isolate; } /* Leaflet's panes (z-index 400+) stay inside — topbar + bottom bar lie on top */
.pacer-bar { display:flex; align-items:center; gap:.5rem; margin:.7rem 0 .2rem; color:var(--text-2); }
.pacer-bar input { width:4.5rem; padding:.4rem .45rem; border-radius:var(--radius-sm);
  border:1px solid var(--hairline-strong); background:var(--surface-2); color:inherit; font-size:1rem; }
.pacer-info { margin:.2rem 0; line-height:1.45; }
.leaflet-container { font:inherit; }

/* Echter Laeufer neben dem Ghost: Frische-Plakette ueber der Karte. Ehrlichkeit vor Optik. */
.runner-freshness { display:inline-block; font-size:.8rem; font-weight:600; padding:.2rem .6rem;
  border-radius:var(--radius-pill); border:1px solid transparent; }
.runner-freshness[data-state="live"]    { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.runner-freshness[data-state="stale"]   { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.runner-freshness[data-state="stalled"] { background:var(--bad-soft); color:var(--bad); border-color:var(--bad-line); }
.runner-freshness[data-state="none"]    { background:var(--surface-2); color:var(--text-3); border-color:var(--hairline); }
.route-kind { display:inline-block; font-size:.8rem; padding:.2rem .6rem;
  border-radius:var(--radius-pill); border:1px solid var(--hairline);
  background:var(--surface-2); color:var(--text-3); }
.route-kind[data-kind="gelernt"] { background:var(--info-soft); color:var(--info); border-color:var(--info-line); }

/* "Standort jetzt": neben der Frische-Plakette, weil es dieselbe Frage beantwortet. */
.runner-status { margin:0 0 .5rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.locate-btn { margin-left:auto; padding:.4rem .85rem; min-height:36px; font-size:.82rem; font-weight:650;
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
  border-radius:var(--radius-pill); transition:background var(--t-normal); }
.locate-btn:hover:not(:disabled) { background:var(--accent-soft); border-color:var(--accent); }
.locate-btn:disabled { color:var(--text-3); background:transparent; border-color:var(--hairline); cursor:default; }
.locate-out { margin:.25rem 0 .4rem; font-size:.82rem; color:var(--text-2); }
.runner-status-line { margin:.35rem 0 0; font-size:.86rem; color:var(--text-2); line-height:1.5; }

/* Wegpunkt-Tabelle. Der Wrapper scrollt bei Ueberbreite selbst — nie der Body. */
/* „Kein GPS vom Läufer seit X min" (gps-alert.js): oben auf Camp und Runde, nicht zu übersehen. */
.gps-alert { background:var(--bad-soft); border:2px solid var(--bad); color:var(--bad);
  padding:.75rem .9rem; border-radius:var(--radius-sm); margin:.5rem 0 .6rem; }
/* Im Camp steht der Hinweis direkt in der Seite (nicht in einer .tab) — gleicher Rand wie .tab. */
#page-camp > .gps-alert { margin:.9rem max(.9rem, env(safe-area-inset-left)) 0; }
/* „Für <Name> tracken" (handover.js): Camp, under the GPS warning — same edge as .tab. */
#page-camp > .handover-card { margin:.9rem max(.9rem, env(safe-area-inset-left)) 0; gap:.65rem; }
.handover-card .handover-note { font-size:.9rem; }
.handover-card .handover-other { color:var(--text); font-weight:620; }
/* „Du trackst für <Name> · Beenden": the race strip's look, over every page. */
.handover-banner .hb-text { color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; }
.handover-banner .hb-end { margin-left:auto; flex:0 0 auto; background:none; border:0; padding:.3rem 0 .3rem .6rem;
  color:var(--accent); font-weight:700; font-size:.9rem; min-height:36px; }
.gps-alert-title { font-size:1.12rem; font-weight:800; }
.gps-alert-detail { margin-top:.2rem; font-size:.9rem; font-weight:600; color:var(--text, inherit); }
/* Warnliste im Essen-Tab (tab-food.js): eine normale App-Karte, je Warnung eine Zeile — Linien-
   Icon (rot Dreieck, gelb Kreis), Titel weiß, Anweisung grau, Zeilen durch die Haarlinie getrennt.
   Farbe nur am Icon. Rechts der Schließen-Knopf (weg bis zur nächsten Glocke). Ohne sichtbare
   Warnung ist die Liste [hidden] — kein Kasten, kein Platz. */
/* Eigener Rotton nur für die Warnliste; --bad bleibt global wie es ist. */
.food-alerts { --alert-red:#ff3b30; list-style:none; margin:0 0 .65rem; display:flex; flex-direction:column; }
:root[data-theme="light"] .food-alerts { --alert-red:#d70015; }
.card.food-alerts { padding:.2rem .35rem .2rem 1rem; }
.food-alert { display:flex; align-items:flex-start; gap:.6rem; padding:.7rem 0; color:var(--text); }
.food-alert + .food-alert { border-top:1px solid var(--hairline); }
.food-alert-icon { flex:0 0 20px; width:20px; height:20px; margin-top:.05rem; }
.is-red > .food-alert-icon { color:var(--alert-red); } .is-yellow > .food-alert-icon { color:var(--warn); }
.food-alert-body { display:block; flex:1 1 auto; min-width:0; }
.food-alert-title { display:block; font-size:1rem; font-weight:680; line-height:1.3;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere; text-wrap:pretty; }
.food-alert-do { display:block; margin-top:.1rem; font-size:.9rem; font-weight:500; color:var(--text-2); }
/* Schließen: 44×44 Trefferfläche, sichtbar nur ein dünnes graues Kreuz — die negative Marge hält
   die Zeilenhöhe, wie sie ohne Knopf wäre. */
.food-alert-close { flex:0 0 44px; width:44px; height:44px; margin:-.65rem 0 -.65rem auto; padding:0;
  display:grid; place-items:center; border:0; border-radius:var(--radius-sm); background:none;
  color:var(--text-3); touch-action:manipulation;
  transition:color var(--t-fast), transform var(--t-fast); }
.food-alert-close-icon { width:18px; height:18px; display:block; }
@media (hover:hover) { .food-alert-close:hover { color:var(--text); } }
.food-alert-close:active { transform:scale(0.94); }
.food-alert-close:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (prefers-reduced-motion: reduce) { .food-alert-close { transition:none; } .food-alert-close:active { transform:none; } }
/* Unsichtbare Vorlese-Zeile (aria-live) — sagt nur neue Warnungen, liegt am body. */
.food-alerts-say { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.runner-stall { background:var(--bad-soft); border:1px solid var(--bad-line);
  color:var(--bad); padding:.65rem .85rem; border-radius:var(--radius-sm); margin:.5rem 0; font-weight:650; }
.lap-finish { margin-top:.6rem; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:.35rem .5rem; }
.lap-finish:empty { display:none; }
.lap-finish-empty { color:var(--text-3); font-size:.9rem; padding:.3rem .2rem; margin:0; }
.lap-finish-line { font-weight:700; font-size:.95rem; padding:.3rem .2rem; margin:0; font-variant-numeric:tabular-nums; }

/* ---- Overview page (backyards + library), dialogs, archive banner ---- */
.ov-card { background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--shadow-card);
  border-radius:var(--radius); padding:1rem; margin-bottom:.8rem; }
.ov-h { margin:0 0 .65rem; font-family:var(--font-display); font-size:17px; font-weight:680; color:var(--text); }
/* Running backyard: facts first, editing folded away, destructive action last. */
.ov-current-head { margin-bottom:.7rem; }
.ov-title-row { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.ov-race-name { margin:0; font-family:var(--font-display); font-size:1.3rem; letter-spacing:-.01em; overflow-wrap:anywhere; }
.ov-status { font-size:.7rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .6rem; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap; }
.st-live { color:var(--ok); background:var(--ok-soft); border-color:var(--ok-line); }
.st-plan { color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line); }
.st-done { color:var(--text-2); background:var(--surface-2); border-color:var(--hairline-strong); }
.st-warn { color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line); }
.st-bad { color:var(--bad); background:var(--bad-soft); border-color:var(--bad-line); }

/* Start summary on top of the card: countdown / live lap, what is missing, race-day weather. */
.ov-summary { display:flex; flex-direction:column; gap:.45rem; margin:0 0 .9rem; }
.ov-summary-big { font-family:var(--font-display); font-size:1.35rem; font-weight:680; letter-spacing:-.01em;
  color:var(--text-strong); font-variant-numeric:tabular-nums; }
.ov-summary-big.is-live { font-size:1.1rem; } /* longer line — stays on one row on the phone */
.ov-summary-missing { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.ov-summary-label, .ov-summary-ok, .ov-summary-wx { font-size:.86rem; color:var(--text-2); }
.ov-summary-label { margin-right:.15rem; }
.ov-chip { width:auto; padding:.25rem .7rem; font-size:.82rem; font-weight:600; line-height:1.3;
  color:var(--text); background:var(--surface-2); border:1px solid var(--hairline-strong);
  border-radius:var(--radius-pill); cursor:pointer; }
button.ov-chip:hover { background:var(--surface-3); }
.ov-chip-static { cursor:default; }
.ov-summary-wx { font-variant-numeric:tabular-nums; }

.ov-facts { display:grid; grid-template-columns:1fr; gap:0; margin:0 0 .9rem; }
.ov-fact { display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--hairline); }
.ov-fact:last-child { border-bottom:0; }
.ov-fact dt { color:var(--text-3); font-size:.8rem; }
.ov-fact dd { margin:0; font-size:.88rem; text-align:right; font-variant-numeric:tabular-nums; min-width:0; overflow-wrap:anywhere; }

/* All loops elapsed but still marked as running — the state that silently blocks the next backyard. */
.ov-note { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; margin:.2rem 0 .9rem;
  padding:.75rem .85rem; background:var(--warn-soft); border:1px solid var(--warn-line); border-radius:var(--radius-sm); }
.ov-note span { font-size:.86rem; color:var(--text-2); }
.ov-note-finish { align-self:flex-start; width:auto; margin-top:.35rem; padding:.5rem 1.1rem;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:var(--radius-sm);
  font-weight:650; font-size:.88rem; }
.ov-note-finish:hover { background:var(--accent-hover); }

/* Library groups fold, so the card stays a card instead of a 50-row list. */
.ov-lib-group { border-top:1px solid var(--hairline); }
.ov-lib-group > summary { display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.6rem .1rem; cursor:pointer; color:var(--text); list-style:none; }
.ov-lib-group > summary::-webkit-details-marker { display:none; }
.ov-lib-group > summary::before { content:'▸'; color:var(--accent); font-size:.7rem; margin-right:.4rem; }
.ov-lib-group[open] > summary::before { content:'▾'; }
.ov-lib-title { flex:1; font-size:.92rem; }
.ov-lib-count { font-size:.74rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.ov-lib-group > .ghost { margin:.4rem 0 .6rem; }

.ov-settings { border-top:1px solid var(--hairline); padding-top:.6rem; }
.ov-settings > summary { cursor:pointer; font-size:.88rem; }
.ov-settings-grid { display:grid; gap:0 1rem; margin-top:.7rem; }
/* Finishing is rare and irreversible-feeling; it should not shout from across the room. */
.ov-finish { background:none; border:1px solid var(--bad-line); color:var(--bad);
  border-radius:var(--radius-sm); padding:.5rem .95rem; font-size:.86rem; font-weight:600; }
.ov-finish:hover { background:var(--bad-soft); }
.ov-field { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.65rem; }
.ov-label { font-size:11px; font-weight:650; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; }
.ov-field input { width:100%; }
.ov-sub { margin:.8rem 0; display:flex; flex-direction:column; gap:.35rem; }
.ov-sep { height:1px; background:var(--hairline); margin:.9rem 0; }
/* Handy: der Name bekommt die ganze Zeile, die Knöpfe rutschen darunter nach rechts. */
.ov-row { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .5rem; padding:.5rem 0; border-bottom:1px solid var(--hairline); }
.ov-row:last-child { border-bottom:0; }
.ov-row-main { flex:1 1 100%; min-width:0; display:flex; flex-direction:column; overflow-wrap:anywhere; }
.ov-row-main span { font-size:.76rem; }
.ov-archive-row { flex-direction:column; align-items:stretch; gap:.45rem; padding:.6rem 0; }
.ov-row-actions { display:flex; gap:.4rem; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.ov-row-actions .ghost { flex:0 0 auto; }
.ov-check { display:flex; align-items:center; gap:.45rem; font-size:.92rem; }
.ov-place { display:flex; flex-direction:column; gap:.4rem; }
.ov-place-row { display:flex; gap:.4rem; align-items:center; }
.ov-place-row input { flex:1 1 auto; min-width:0; }
.ov-place-row .ghost { flex:0 0 auto; }
.ov-place-results { display:flex; flex-direction:column; gap:.25rem; }
.ov-place-hit { text-align:left; }
.ov-card .clock-btn, .ov-card .danger { width:100%; margin-top:.4rem; }

/* Confirm dialogs: cancel and confirm sit apart, cancel is pre-focused */
.dlg-back { position:fixed; inset:0; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:80; padding:1rem; animation:fadeInOpacity .2s ease-out; }
.dlg { background:var(--surface); border:1px solid var(--hairline-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:1.25rem; max-width:22rem; width:100%;
  animation:modalContentIn .2s ease-out; }
.dlg h2 { margin:0 0 .5rem; font-family:var(--font-display); font-size:1.12rem; font-weight:680; }
.dlg-text { margin:0 0 1rem; line-height:1.5; color:var(--text-2); }
.dlg-row { display:flex; gap:2rem; }
.dlg-row button { flex:1; padding:.65rem; min-height:44px; }

.archive-bar { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:.6rem;
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:var(--radius-sm); padding:.45rem .6rem; margin:.5rem .9rem; }
#archive-text { flex:1; min-width:0; font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* read-only while looking at a finished backyard — the API refuses writes in the archive anyway */
body.archive-mode .page:not(#page-overview):not(#page-meins) input,
body.archive-mode .page:not(#page-overview):not(#page-meins) select,
body.archive-mode .page:not(#page-overview):not(#page-meins) .add-food,
body.archive-mode .page:not(#page-overview):not(#page-meins) button.ghost,
/* Auch die Haupt-Knöpfe: „Essen hinzufügen" hängt direkt in der Karte. */
body.archive-mode .page:not(#page-overview):not(#page-meins) button.clock-btn,
/* Tap-to-log muss im Archiv AUS sein: `POST /api/intake` schreibt immer ins laufende Rennen.
   Die Loop-Pfeile (.yardnav) bleiben absichtlich bedienbar. */
body.archive-mode .page:not(#page-overview):not(#page-meins) .preset-grid button { pointer-events:none; opacity:.45; }

.eta-big { font-family:var(--font-display); font-size:1.7rem; font-weight:750; color:var(--accent); line-height:1.3; }

.toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + 1rem + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:90; max-width:88vw;
  background:var(--surface); border:1px solid var(--hairline-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.6rem 1rem; font-size:.88rem; font-weight:550; text-align:center;
  animation:subtleFadeIn .3s ease-out; }
.toast-error { border-color:var(--bad-line); color:var(--bad); }
/* Toast with one action („Menge ändern" after a tap) — the button is a real thumb target. */
.toast.toast-has-action { display:flex; align-items:center; gap:.75rem; padding:.35rem .4rem .35rem 1rem; text-align:left; width:max-content; }
.toast-msg { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast-action { flex:0 0 auto; min-height:40px; padding:.4rem .8rem; border-radius:var(--radius-sm);
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-weight:650; font-size:.86rem; }

/* Mengen-Blatt (039): bottom sheet with one big slider. */
.portion-back { align-items:flex-end; padding:0; }
.portion-sheet { max-width:30rem; border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-bottom:0;
  padding:.5rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
.portion-grip { width:2.5rem; height:4px; border-radius:2px; background:var(--hairline-strong); margin:0 auto .7rem; }
.portion-title { text-align:center; margin-bottom:.2rem !important; }
.portion-big { display:flex; align-items:center; gap:.5rem; margin:.4rem 0 .9rem; }
.portion-read { flex:1 1 auto; min-width:0; text-align:center; }
.portion-value { font-family:var(--font-display); font-size:2.6rem; font-weight:750; line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.portion-sub { margin-top:.2rem; color:var(--text-2); font-size:.95rem; font-weight:560; }
.portion-step { flex:0 0 auto; width:52px; height:52px; border-radius:50%; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center; padding:0;
  background:var(--raised, var(--bg-panel)); border:1px solid var(--hairline-strong); color:var(--text, inherit); }
.portion-step:active { background:var(--accent-soft); border-color:var(--accent-line); }
.portion-step:disabled { opacity:.35; }
.portion-track { position:relative; padding:0 14px 1.9rem; }
.portion-range { -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; touch-action:none; }
.portion-range::-webkit-slider-runnable-track { height:10px; border-radius:5px;
  background:linear-gradient(to right, var(--accent) 0 var(--fill,50%), var(--hairline-strong) var(--fill,50%) 100%); }
.portion-range::-moz-range-track { height:10px; border-radius:5px; background:var(--hairline-strong); }
.portion-range::-moz-range-progress { height:10px; border-radius:5px; background:var(--accent); }
.portion-range::-webkit-slider-thumb { -webkit-appearance:none; width:34px; height:34px; margin-top:-12px; border-radius:50%;
  background:var(--surface); border:3px solid var(--accent); box-shadow:var(--shadow); }
.portion-range::-moz-range-thumb { width:28px; height:28px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); }
.portion-marks { position:absolute; left:14px; right:14px; top:40px; height:1.8rem; }
.portion-mark { position:absolute; transform:translateX(-50%); min-width:32px; height:30px; padding:0 .25rem;
  background:none; border:0; color:var(--text-2); font-size:.9rem; font-weight:600; }
.portion-mark::before { content:''; position:absolute; left:50%; top:-6px; width:2px; height:6px; background:var(--hairline-strong); }
.portion-mark.is-on { color:var(--accent); }
.portion-mark.is-on::before { background:var(--accent); }
.portion-nutr { display:grid; grid-template-columns:repeat(4, 1fr); gap:.4rem; margin:.2rem 0 1rem; }
.portion-nutr-cell { display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.5rem .2rem;
  border:1px solid var(--hairline); border-radius:var(--radius-sm); }
.portion-nutr-cell.is-zero { opacity:.45; }
.portion-nutr-val { font-size:1.02rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.portion-nutr-label { font-size:.72rem; color:var(--text-2); }
/* Protokoll-Einträge sind antippbar (Menge ändern). */
.intake-entry { background:none; border:0; padding:.35rem 0; text-align:left; color:inherit; font:inherit; flex:1 1 auto; min-width:0; min-height:40px; }
.intake-amount { color:var(--accent); font-weight:600; }
/* A tap the server does not have yet (intake-outbox.js) — counted already, just marked. */
.intake-pending { font-size:.78em; color:var(--text-2); white-space:nowrap; }
.intake-pending.is-waiting { color:var(--warn); }
/* A list row / lap / lap change made offline, still on its way to the server (race-lists.js raceWrite) */
.is-pending { opacity:.72; }
.is-pending .intake-pending { opacity:1; }

/* Time left in the current loop — a wordless read-out of the only clock that matters. */
.bell-progress { position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--hairline); }
.bell-progress > i { display:block; height:100%; width:0; background:var(--accent); transition:width 1s linear; }
.bell-progress.near > i { background:var(--bad); }
.topbar { position:sticky; }

/* Sidebar is desktop-only; the phone keeps its bottom bar. */
.sidebar { display:none; }

@keyframes fadeInOpacity { from { opacity:0; } to { opacity:1; } }
@keyframes subtleFadeIn { from { opacity:0; transform:translateY(6px) translateX(-50%); }
  to { opacity:1; transform:translateY(0) translateX(-50%); } }
@keyframes modalContentIn { from { opacity:0; transform:translateY(-6px); }
  to { opacity:1; transform:translateY(0); } }

/* Uhr blinkt vor der Glocke (bell-signal.js): Kopfleiste, Camp-Uhr, Runde-Karte, Läufer-
   Bildschirm. warn = ab 2:00 rot, ~1 Hz; urgent = ab 0:30 rot, 2,5 Hz. Sanfter Opacity-Wechsel
   1 ↔ 0.45, keine harten Blitze. !important: die Uhren färben sich sonst per Inline-Stil
   (Corral-Alarm) bzw. data-level / data-mode. */
@keyframes bell-pulse { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
.bell-warn, .bell-urgent { color:var(--bad) !important; }
.bell-warn { animation:bell-pulse 1s ease-in-out infinite; }
.bell-urgent { animation:bell-pulse .4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  /* Kein Pulsieren: warn nur rot, urgent kräftiger rot (fetter + roter Schein). */
  .bell-urgent { font-weight:800; text-shadow:0 0 .45em var(--bad-line); }
}

/* Mobile: inputs below 16px make iOS zoom in on focus. */
@media (max-width: 999px) {
  input, select, textarea { font-size:16px; }
}

/* =====================================================================
   Desktop (>= 1000px): fixed sidebar, slim status header, content in
   columns. Nothing above this line changes, so race day on the phone is
   untouched.
   ===================================================================== */
@media (min-width: 1000px) {
  body { display:grid; grid-template-columns:252px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
    min-height:100vh; }
  .bottombar { display:none; }

  /* --- sidebar --- */
  .sidebar { display:flex; flex-direction:column; grid-row:1 / -1; grid-column:1;
    background:var(--glass); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
    border-right:1px solid var(--glass-edge); padding:1rem .75rem;
    position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; }
  .sb-head { padding:0 .35rem 1rem; border-bottom:1px solid var(--hairline); margin-bottom:.75rem; }
  .sb-brand { display:flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:.95rem;
    font-weight:700; letter-spacing:-.01em; color:var(--text); }
  .sb-brand img { width:22px; height:22px; border-radius:6px; }
  .sb-race { display:block; width:100%; margin-top:.6rem; padding:.45rem .6rem; text-align:left;
    background:var(--surface-2); border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--accent);
    font-size:.92rem; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-race:hover { border-color:var(--accent-line); }
  .sb-role { display:block; margin:.35rem .1rem 0; font-size:.74rem; color:var(--text-3); }
  .sb-nav { display:flex; flex-direction:column; gap:.15rem; }
  .sb-btn { display:flex; align-items:center; gap:.65rem; width:100%;
    padding:.55rem .65rem; background:none; border:0; border-radius:var(--radius-sm);
    color:var(--text-2); font-size:.93rem; text-align:left;
    transition:background var(--t-normal), color var(--t-normal); }
  .sb-btn svg { width:18px; height:18px; flex:0 0 auto; }
  .sb-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-btn:hover { background:var(--surface-2); color:var(--text); }
  .sb-btn.active { background:var(--accent-soft); color:var(--accent); font-weight:650; }
  .sb-count { font-size:.72rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
  .sb-foot { margin-top:auto; padding:.7rem .6rem 0; border-top:1px solid var(--hairline);
    display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.76rem; }
  .sb-foot #sb-user { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sb-conn { display:flex; align-items:center; gap:.4rem; color:var(--text-3); flex:0 0 auto; }
  body.no-race .sb-btn:not([data-page="overview"]):not([data-page="pack"]):not([data-page="inv"]):not([data-page="team"]):not([data-page="races"]):not([data-page="meins"])
    { opacity:.35; pointer-events:none; }

  /* --- header --- */
  .topbar { grid-column:2; grid-row:1; padding:.7rem 2rem; position:sticky; top:0; }
  .clockwrap { flex-direction:row; align-items:baseline; gap:.9rem; }
  .big-time { font-size:1.6rem; }
  #loop-line { font-size:.92rem; }

  /* --- content --- */
  main { grid-column:2; grid-row:2; padding-bottom:2rem; overflow-x:hidden; }
  .tab { max-width:1240px; margin:0 auto; padding:1.6rem 2rem; }
  #page-camp > .tab + .tab { padding-top:0; }
  .archive-bar { max-width:1240px; margin:.8rem auto -.4rem; }

  .ov-zone-body { columns:2; column-gap:1.3rem; }
  .ov-card { margin:0 0 1.3rem; padding:1.15rem 1.25rem; break-inside:avoid; }
  .ov-current { column-span:all; }
  .ov-primary { border-color:var(--accent-line); }
  .ov-current .ov-facts { grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 1.6rem; }
  .ov-current .ov-fact { flex-direction:column; align-items:flex-start; gap:.15rem; border-bottom:0; }
  .ov-current .ov-fact dd { text-align:left; font-size:.95rem; }
  .ov-settings-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }

  .ov-card > .clock-btn, .ov-card > .danger, .ov-settings > .clock-btn,
  .ov-lib-group > .clock-btn { width:auto; min-width:10rem; }
  .ov-row .ghost { min-width:0; white-space:nowrap; padding:.3rem .6rem; font-size:.8rem; }
  .ov-row, .card > .row { flex-wrap:nowrap; }
  .ov-row-main, .row-main { flex:1 1 auto; }
  .ov-row-actions, .row-actions { flex:0 0 auto; flex-wrap:nowrap; }
  .ov-field { max-width:none; }
  .add-food input:first-child { flex:1 1 16rem; }
  .add-food .clock-btn { flex:0 0 auto; min-width:9rem; }
  .add-food select { flex:0 1 12rem; }
  .login-card button, .dlg-row button { min-width:8rem; }

  #pack-list, #inv-list { columns:2; column-gap:1.2rem; }
  #pack-list .card, #inv-list .card { break-inside:avoid; }
  #inv-list .cat-head { column-span:all; }
  .preset-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .pacer-map { height:60vh; }
  .toast { bottom:1.5rem; }

  /* Camp on a wide screen: loop navigator on top, food and to-dos side by side. */
  #page-camp { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:1240px; margin:0 auto;
    padding:1.6rem 2rem 0; column-gap:1.3rem; align-items:start; }
  #page-camp > .tab { max-width:none; margin:0; padding:0 0 1rem; }
  #page-camp > #camp-yardnav { grid-column:1 / -1; }
  #page-camp > #tab-round { grid-column:1 / -1; }
  #page-camp > .tab + .tab { padding-top:0; }
  #page-camp.hidden { display:none; }
}

@media (min-width: 1600px) {
  .tab { max-width:1520px; }
  #page-camp { max-width:1520px; }
  .archive-bar { max-width:1520px; }
  .preset-grid { grid-template-columns:repeat(6, minmax(0,1fr)); }
  #pack-list, #inv-list { columns:3; }
}

/* =====================================================================
   Overview workbench (zones)
   ===================================================================== */
.ov-head { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; margin-bottom:.7rem; font-size:.82rem; }
.ov-head > .muted { margin-right:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-logout { font-size:.8rem; padding:.3rem .65rem; }

/* zone switcher — segment control on the phone, wraps rather than squeezes */
.ov-zones { display:flex; flex-wrap:wrap; gap:.25rem; margin-bottom:.9rem; background:var(--surface-2);
  border:1px solid var(--hairline); border-radius:var(--radius); padding:.25rem; }
.ov-zone-btn { flex:1 1 28%; min-height:40px; padding:.5rem .2rem; background:none; border:0; border-radius:var(--radius-sm);
  color:var(--text-2); font-size:.88rem; font-weight:550;
  transition:background var(--t-normal), color var(--t-normal); }
.ov-zone-btn:hover { color:var(--text); }
.ov-zone-btn.active { background:var(--raised); color:var(--text); font-weight:650; box-shadow:0 1px 3px rgba(0,0,0,.18); }

.ov-create-big { font-size:1.05rem; padding:.95rem; }

.ov-dlg { max-width:26rem; max-height:88vh; overflow-y:auto; }
.ov-dlg-form { display:flex; flex-direction:column; margin-bottom:.6rem; }
/* Leere Plan-Auswahl: „Plan anlegen" direkt unter dem Feld (create-dialog.js). */
.ov-plan-pick { display:flex; flex-direction:column; margin-bottom:.65rem; }
.ov-plan-pick .ov-field { margin-bottom:0; }
.ov-plan-pick .ov-plan-new { align-self:flex-start; margin-top:.4rem; padding:.45rem .9rem; min-height:40px; font-size:.88rem; }
.ov-plan-pick .ov-plan-hint { margin-top:.35rem; }
/* Neuer Backyard, Schritt 2: „Startzeit später festlegen" — leiser Link unter dem Hinweis */
.ov-create .ov-bell-later { align-self:flex-start; margin-top:.6rem; min-height:44px; }
.ov-bell[hidden] { display:none; }
/* Neuer Backyard: „Aus Liste wählen" (056, catalog-picker.js) — Suche + Trefferliste im selben Sheet */
.ov-create .ov-dlg-form[hidden], .ov-create .ov-step-head[hidden], .ov-create .ov-cat-view[hidden],
.ov-create .dlg-row button[hidden] { display:none; }
.ov-create .ov-cat-open { align-self:stretch; min-height:44px; margin-bottom:.9rem; }
.ov-create .ov-cat-taken { margin:-.3rem 0 .9rem; }
.ov-cat { display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.ov-cat-list { display:flex; flex-direction:column; max-height:46vh; overflow-y:auto; overscroll-behavior:contain;
  border-top:1px solid var(--hairline-strong); border-bottom:1px solid var(--hairline-strong); }
.ov-cat-hit { display:flex; flex:0 0 auto; flex-direction:column; gap:.15rem; align-items:flex-start; text-align:left; width:100%;
  min-height:56px; padding:.65rem .1rem; background:none; border:0; border-bottom:1px solid var(--hairline-strong);
  border-radius:0; color:var(--text); }
.ov-cat-hit:last-child { border-bottom:0; }
.ov-cat-hit:active { opacity:.6; }
/* 071: eine Zeile = Auswahl-Knopf + daneben (nicht darin) der Anmeldelink; Trennlinie an der Zeile */
.ov-cat-row { display:flex; flex:0 0 auto; flex-direction:column; border-bottom:1px solid var(--hairline-strong); }
.ov-cat-row:last-child { border-bottom:0; }
.ov-cat-row .ov-cat-hit { border-bottom:0; }
.ov-cat-row .ov-cat-hit:has(+ .ov-cat-reg) { padding-bottom:.15rem; }
.ov-cat-record { font-variant-numeric:tabular-nums; }
.ov-cat-reg { align-self:flex-start; display:inline-flex; align-items:center; min-height:44px; padding:0 .1rem .2rem;
  font-size:.85rem; font-weight:600; color:var(--text); text-decoration:underline; text-underline-offset:.2em; }
.ov-cat-reg:active { opacity:.6; }
.ov-cat-name { font-weight:650; font-size:.98rem; line-height:1.25; overflow-wrap:anywhere; }
.ov-cat-sub { font-size:.82rem; color:var(--text-2); line-height:1.3; overflow-wrap:anywhere; }
.ov-cat-empty { margin:0; padding:1.1rem .1rem; font-size:.92rem; line-height:1.4; }
.ov-cat-foot { margin:0; font-size:.78rem; line-height:1.45; }
.ov-cat-foot a { color:inherit; text-decoration:underline; }
.ov-dlg select, .ov-dlg input { width:100%; padding:.55rem .6rem; background:var(--surface-2);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--text); }
.ov-dlg input[type=checkbox] { width:20px; }

/* „Neuer Backyard" in Schritten (create-dialog.js): Balken + „Schritt n von 4", ein Schritt sichtbar. */
.ov-step-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.8rem; }
.ov-step-dots { display:flex; gap:.35rem; flex:1; }
.ov-step-dot { flex:1; height:3px; border-radius:2px; background:var(--hairline-strong); transition:background .2s; }
.ov-step-dot.on { background:var(--text); }
.ov-step-count { font-size:11px; font-weight:650; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.ov-create h2 { margin-bottom:.15rem; }
.ov-step-title { margin:0 0 1rem; color:var(--text-2); font-size:.92rem; }
.ov-step { display:flex; flex-direction:column; min-height:11rem; }
.ov-step[hidden] { display:none; }
.ov-bell { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:.6rem; }
.ov-bell .ov-field { min-width:0; }
.ov-create .ov-dlg-form { margin-bottom:1rem; }
.ov-create .dlg-row { gap:1.25rem; }
/* In-App-Kauf (074): the price note right above the buttons, close to the one it explains */
.ov-create .ov-cost { margin:-.25rem 0 .75rem; }
.ov-create .dlg-row .clock-btn { flex:1.5 1 0; white-space:nowrap; }
.ov-create .dlg-row button:disabled { opacity:.4; }

.ov-plan { border-top:1px solid var(--hairline); padding:.6rem 0; }
.ov-plan-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ov-plan-head .ov-row-main { flex:1 1 10rem; }
.ov-plan-editor { border-top:1px dashed var(--hairline-strong); margin-top:.6rem; padding-top:.6rem; display:flex; flex-direction:column; gap:.15rem; }
.ov-plan-editor .ov-check { padding:.2rem 0; }
/* Plan editor fields: the same filled inputs as the rest of the app, not native grey boxes. */
.ov-plan-editor input[type=text], .ov-plan-editor input[type=number], .ov-plan-editor select,
.ov-add-form input[type=text], .ov-add-form input[type=number], .ov-add-form select {
  min-width:0; min-height:44px; padding:.55rem .7rem; font-size:16px; background:var(--surface-2);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--text); }
.ov-entry-head { display:block; margin:.9rem 0 .45rem; }
/* Zeitplan: special laps („Sonderrunden") — one small card each: name + ✕, then a compact time picker. */
.ov-special-hint, .ov-special-empty { margin:0 0 .45rem; font-size:.88rem; }
.ov-special-list { display:flex; flex-direction:column; gap:.55rem; }
.ov-special { display:flex; flex-direction:column; gap:.45rem; padding:.6rem; border:1px solid var(--hairline);
  border-radius:var(--radius); background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
.ov-special-top { display:flex; align-items:center; gap:.5rem; }
.ov-special-top input[type=text] { flex:1 1 auto; font-weight:620; }
.ov-special-rm { flex:0 0 auto; width:44px; height:44px; padding:0; border-radius:var(--radius-sm); }
/* inside the special's card the picker is flat — one box, not a box in a box; no caption row */
.ov-special .tslider { margin:0; padding:0 .1rem; border:0; background:none; box-shadow:none; }
.tslider-compact .tslider-head { display:none; }
.tslider-compact .tslider-value { font-size:2rem; }
.tslider-compact .tslider-step { width:44px; height:44px; font-size:1.4rem; }
.tslider-compact .tslider-range { height:36px; }
.ov-special-add { min-height:44px; align-self:flex-start; margin-top:.6rem; }
/* „Aus Vorlage einfügen": the user's presets as chips (name + time) — a block of its own under the
   list, so it reads as a shortcut and not as part of the plan. */
.ov-special-tpl { display:flex; flex-direction:column; gap:.4rem; margin:.9rem 0 .2rem; padding-top:.7rem;
  border-top:1px solid var(--hairline); }
.ov-special-adds { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.ov-special-chip { min-height:44px; padding:.3rem .9rem; border-radius:999px; font-size:.9rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; border:1px solid var(--hairline-strong); color:var(--text); }
.ov-special-chip::before { content:'+'; color:var(--text-2); }
.ov-special-chiptime { color:var(--text-2); font-variant-numeric:tabular-nums; font-weight:560; }
.ov-special-chip:active { background:var(--accent-soft); }
/* 052: the presets are edited in a sheet of their own (plans.js openPresetSheet). */
.ov-preset-pen { min-height:44px; padding:0 .8rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:999px; color:var(--text-2); font-size:.88rem; }
.ov-preset-sheet { max-width:26rem; max-height:88vh; overflow-y:auto; display:flex; flex-direction:column; gap:.5rem; }
.ov-preset-sheet h2 { margin:0; }
.ov-preset-sheet input[type=text] { min-width:0; min-height:44px; padding:.55rem .7rem; font-size:16px; background:var(--surface-2);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--text); }
/* Abbrechen | Speichern at the foot of the Zeitplan editor and of the preset sheet */
.ov-edit-actions { display:flex; align-items:stretch; gap:.6rem; margin-top:.9rem; }
.ov-edit-actions .ghost { flex:0 0 auto; min-height:48px; padding:0 1.1rem; }
.ov-edit-actions .clock-btn, .ov-card .ov-edit-actions .clock-btn { flex:1 1 auto; width:auto; min-height:48px; margin-top:0; }
/* Zeitplan, read-only (plans.js timeView): the target as a number, the special laps as a quiet list. */
.ov-tp-view { margin-top:.5rem; display:flex; flex-direction:column; gap:.3rem; }
.ov-tp-target { display:flex; align-items:baseline; gap:.45rem; }
.ov-tp-time { font-family:var(--font-display); font-size:2rem; font-weight:750; line-height:1.1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--text-strong, var(--text)); }
.ov-tp-unit { font-size:.92rem; color:var(--text-2); }
.ov-tp-none { font-size:1.05rem; font-weight:650; color:var(--text-2); }
.ov-tp-head { display:block; margin-top:.45rem; }
.ov-tp-specials { list-style:none; margin:0; padding:0; }
.ov-tp-special { display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; padding:.42rem 0;
  border-top:1px solid var(--hairline); }
.ov-tp-special:first-child { border-top:0; }
.ov-tp-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-tp-lap { flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:650; }
.ov-tp-nospecial, .ov-tp-note { margin:.2rem 0 0; font-size:.88rem; }

/* 041: Ziel-Rundenzeit card on Camp (target-card.js) — value big, who/when small. */
.target-card { display:flex; flex-direction:column; gap:.15rem; }
.target-card-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:40px; }
.target-card-label { font-size:12px; font-weight:700; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; }
.target-card-edit { min-height:40px; padding:.4rem 1rem; font-weight:650; }
.target-card-value { font-family:var(--font-display); font-size:3rem; font-weight:750; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--accent); }
.target-card-none .target-card-value { font-size:1.6rem; color:var(--text-2); }
.target-card-line { font-size:.92rem; }
.target-card-editor { margin-top:.5rem; display:flex; flex-direction:column; gap:.5rem; }
.target-card-actions { display:flex; gap:.6rem; }
.target-card-actions > button { flex:1 1 0; min-height:48px; }
/* Zeitplan neu: „Nächste Runde" — a special lap (chips) or another time for the next lap, live. */
.target-next { margin-top:.8rem; padding-top:.75rem; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:.5rem; }
.target-next-rows { display:flex; flex-direction:column; gap:.4rem; }
.target-next-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.45rem .5rem .45rem .75rem;
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
.target-next-text { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.target-next-title { font-size:.8rem; color:var(--text-3); }
.target-next-value { font-size:1.05rem; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.target-next-undo { flex:0 0 auto; width:44px; height:44px; padding:0; border-radius:var(--radius-sm); }
.target-next-plain { font-size:.9rem; }
.target-next-chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.target-next-chip { min-height:44px; padding:.35rem .9rem; border-radius:999px; display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; border:1px solid var(--hairline-strong); color:var(--text); font-weight:650; font-size:.92rem; }
.target-next-chiptime { color:var(--text-2); font-variant-numeric:tabular-nums; font-weight:600; }
.target-next-chip:active { background:var(--accent-soft); }
.target-next-chip:disabled, .target-next-add:disabled { opacity:.5; }
.target-next-add { min-height:44px; }
.target-next-name { min-height:44px; padding:.55rem .7rem; font-size:16px; background:var(--surface-2);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); color:var(--text); }

/* Target lap time slider (time-slider.js): big value, full-width range, −/+ in 30 s steps. */
.tslider { display:flex; flex-direction:column; gap:.2rem; margin:.2rem 0 .4rem; padding:.75rem .8rem .5rem;
  border:1px solid var(--hairline); border-radius:var(--radius); background:color-mix(in srgb, var(--surface-2) 45%, transparent); }
.tslider-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:28px; }
.tslider-label { font-size:11px; font-weight:650; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; }
.tslider-link { background:none; border:0; padding:.3rem 0; font-size:.85rem; font-weight:600; color:var(--text-2);
  text-decoration:underline; text-underline-offset:3px; }
.tslider-big { display:flex; align-items:center; gap:.6rem; }
.tslider-value { flex:1 1 auto; text-align:center; font-family:var(--font-display); font-size:2.8rem; font-weight:750;
  line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.tslider-step { flex:0 0 auto; width:52px; height:52px; border-radius:50%; padding:0; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--raised); border:1px solid var(--hairline-strong); color:var(--text); }
.tslider-step:active { background:var(--accent-soft); border-color:var(--accent-line); }
.tslider-step:disabled { opacity:.35; }
.tslider-track { padding:0 4px; }
/* The track takes the finger, not the native range: a vertical pull scrolls the page (pan-y) and
   never moves the value; only a sideways pull or a tap does (time-slider.js dragGate). */
.tslider-hit { touch-action:pan-y; cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.tslider-range { -webkit-appearance:none; appearance:none; display:block; width:100%; height:44px; margin:0;
  background:transparent; pointer-events:none; }
.tslider-range::-webkit-slider-runnable-track { height:10px; border-radius:5px;
  background:linear-gradient(to right, var(--accent) 0 var(--fill,50%), var(--hairline-strong) var(--fill,50%) 100%); }
.tslider-range::-moz-range-track { height:10px; border-radius:5px; background:var(--hairline-strong); }
.tslider-range::-moz-range-progress { height:10px; border-radius:5px; background:var(--accent); }
.tslider-range::-webkit-slider-thumb { -webkit-appearance:none; width:34px; height:34px; margin-top:-12px; border-radius:50%;
  background:var(--surface); border:3px solid var(--accent); box-shadow:var(--shadow); }
.tslider-range::-moz-range-thumb { width:28px; height:28px; border-radius:50%; background:var(--surface); border:3px solid var(--accent); }
.tslider-range:focus { box-shadow:none; }
.tslider-range:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--accent-soft); }
.tslider-scale { display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tslider-empty { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.3rem 0 .25rem; }
.tslider-none { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--text-3); }
.tslider-set { min-height:44px; padding:.5rem 1rem; }

.ov-add-form { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 .3rem; }
.ov-add-form input[type=text] { flex:1 1 100%; }
.ov-add-form input[type=number] { flex:1 1 4.5rem; width:4.5rem; min-width:0; }
.ov-add-form select { flex:1 1 100%; }
.ov-add-form .clock-btn { flex:1 1 100%; }

@media (min-width: 1000px) {

  .ov-head { font-size:.86rem; }
  .ov-create-big { width:auto; min-width:16rem; }
  .ov-dlg { max-width:30rem; }
  .ov-plan-editor .clock-btn { width:auto; min-width:10rem; align-self:flex-start; }
  .ov-add-form input[type=text] { flex:1 1 14rem; }
  .ov-add-form select { flex:0 1 10rem; }
  .ov-add-form .clock-btn { flex:0 0 auto; width:auto; min-width:9rem; }
  .tslider, .ov-special { max-width:34rem; }
}

/* --- 034: Crew-Modus ohne Live-Standort ------------------------------------------------- */
/* settings: the switch keeps its shape inside the dialog / settings inputs */
.ov-dlg input.switch, .crew-mode-fields input.switch { width:52px; padding:0; }
.crew-mode-fields { gap:.7rem; }
.crew-mode-fields .ov-field { margin-bottom:0; }
.ov-hint { font-size:.82rem; line-height:1.4; }

/* Runde: „Läufer ist da" (crew-laps.js) */
#page-loop [hidden] { display:none !important; }
.crew-laps-slot:empty { display:none; }
.crew-hero { display:flex; flex-direction:column; gap:.55rem; text-align:center; }
.crew-hero-lap { font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--text-2); }
.crew-hero-bell { font-family:var(--font-display); font-size:2.5rem; font-weight:750; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.crew-ghost { font-size:.98rem; color:var(--text-2); }
.crew-ghost[data-phase="camp"] { color:var(--ok); font-weight:650; }
.crew-arrive { display:flex; flex-direction:column; gap:.4rem; margin-top:.35rem; }
.crew-arrive-btn { min-height:72px; font-size:1.3rem; font-weight:800; }
.crew-arrive-btn-sec { width:100%; }
.crew-arrive-sub { font-size:.86rem; }
.crew-late { align-self:center; }
.crew-confirm { text-align:left; padding:.7rem .8rem; border-radius:var(--radius-sm); background:var(--accent-soft);
  border:1px solid var(--accent-line); display:flex; flex-direction:column; gap:.55rem; }
.crew-confirm-text { font-weight:650; font-variant-numeric:tabular-nums; }
.crew-err { text-align:left; }
.crew-err-severe { font-size:1.02rem; font-weight:750; padding:.8rem .9rem; border-width:2px; }
.crew-edit { text-align:left; display:flex; flex-direction:column; gap:.5rem; padding:.6rem 0 .8rem;
  border-bottom:1px solid var(--hairline); }
.crew-edit-title { font-weight:650; font-size:.92rem; }
.crew-time { min-height:48px; padding:.55rem .7rem; font-size:1.2rem; background:var(--surface-2); color:var(--text);
  border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); font-variant-numeric:tabular-nums; }
.crew-laps-list .card-head h2, .crew-manual-card .card-head h2 { font-size:1rem; margin:0; }
.crew-lap-row { text-align:left; color:inherit; font:inherit; }
button.crew-lap-row { cursor:pointer; }
.crew-lap-time { flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700; }
.crew-lap-row[data-missing] .crew-lap-time { font-weight:500; font-size:.85rem; }
.crew-manual { flex:0 0 auto; font-size:.72rem; font-weight:650; color:var(--text-3); border:1px solid var(--hairline-strong);
  border-radius:999px; padding:.1rem .45rem; }
.crew-manual-hint { margin:.2rem 0 .5rem; font-size:.86rem; }

/* Tütchen-Rechner (tuete-ui.js): Packung scannen/eintippen → Gramm je Tüte. */
.food-add-row { display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.food-add-row > button { flex:1 1 9rem; min-height:44px; }
.bag-dlg .dlg-text { margin-bottom:.8rem; }
.bag-scan-btn { width:100%; margin-bottom:.65rem; }
.bag-cam { position:relative; margin:0 0 .65rem; border-radius:var(--radius); overflow:hidden; background:#000; aspect-ratio:4 / 3; }
.bag-cam[hidden] { display:none; }
.bag-cam video { width:100%; height:100%; object-fit:cover; display:block; }
.bag-aim { position:absolute; left:10%; right:10%; top:30%; bottom:30%; border:2px solid var(--accent);
  border-radius:var(--radius-sm); box-shadow:0 0 0 999px rgba(0,0,0,.35); pointer-events:none; }
/* Lamp + tap-to-focus sit on the camera picture, so their colours are fixed (not themed). */
.bag-cam { touch-action:manipulation; }
.bag-aim { border-color:#fff; } /* --accent is black in the light theme: invisible on a dark picture */
.bag-torch { position:absolute; top:.5rem; right:.5rem; width:48px; height:48px; padding:0; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.45); color:#fff; cursor:pointer; }
.bag-torch svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.bag-torch .rays { visibility:hidden; }
.bag-torch[aria-pressed="true"] { background:#ffd84a; border-color:#ffd84a; color:#000; }
.bag-torch[aria-pressed="true"] svg { fill:currentColor; }
.bag-torch[aria-pressed="true"] .rays { visibility:visible; }
.bag-torch[aria-pressed="true"] .detail { stroke:#ffd84a; }
.bag-focus { position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border:2px solid #ffd84a; border-radius:50%;
  pointer-events:none; animation:bag-focus .9s ease-out forwards; }
@keyframes bag-focus { 0% { transform:scale(1.5); opacity:0; } 25% { transform:scale(1); opacity:1; } 80% { opacity:1; } 100% { transform:scale(1); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .bag-focus { animation-duration:.01s; animation-iteration-count:1; opacity:1; } }
.bag-ean-row { display:flex; gap:.4rem; }
.bag-ean-row input { flex:1 1 auto; min-width:0; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.bag-ean-row .ghost { flex:0 0 auto; padding:.5rem .9rem; }
.bag-status { margin:-.2rem 0 .6rem; font-size:.86rem; min-height:1.2em; }
.bag-manual { align-self:flex-start; }
.bag-product { display:flex; flex-direction:column; gap:.15rem; margin-bottom:.8rem; }
.bag-product strong { font-size:1.02rem; }
.bag-product .muted { font-size:.82rem; font-variant-numeric:tabular-nums; }
.bag-note { font-size:.84rem; color:var(--warn); font-weight:600; margin-top:.2rem; }
.bag-target { display:flex; flex-direction:column; gap:.4rem; }
.bag-target .bag-own[hidden] { display:none; }
.bag-sec { font-size:11px; font-weight:650; color:var(--text-3); letter-spacing:.07em; text-transform:uppercase;
  margin:.4rem 0 .5rem; padding-top:.6rem; border-top:1px solid var(--hairline); }
.bag-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:.6rem; }
.bag-grid .ov-field input { font-variant-numeric:tabular-nums; }
.bag-result { display:flex; flex-direction:column; gap:.2rem; margin:.1rem 0 .6rem; padding:.7rem .8rem;
  border-radius:var(--radius); background:var(--accent-soft); border:1px solid var(--accent-line); }
.bag-big { font-family:var(--font-display); font-size:1.5rem; font-weight:720; color:var(--text); font-variant-numeric:tabular-nums; }
.bag-both { font-size:.86rem; font-variant-numeric:tabular-nums; }
.scan-mode { margin:0 0 .8rem; }
.scan-per100 { font-size:.82rem; margin:-.2rem 0 .5rem; font-variant-numeric:tabular-nums; }
.scan-have-row { align-items:center; }
.scan-have-row input { flex:0 1 7rem; min-width:0; }
.scan-have-unit { font-size:.9rem; }
.scan-dup { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin:-.2rem 0 .6rem; padding:.55rem .7rem;
  border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--hairline); font-size:.86rem; }
.scan-dup[hidden] { display:none; }
.bag-sugar {font-size:.84rem; margin:-.2rem 0 .4rem; }