/* =========================================================================
   v2.5 — Tabata időzítő (public/timer.js, docs/tabata/TABATA.md)

   Fázisszínek = az app területszínei, rajtuk a területek sötét "ink"
   színével (messziről is erős kontraszt): felkészülés narancs-piros, munka
   sárga (naptár-arany), pihenő zöld, sorozatszünet mélyebb zöld, levezetés
   kék. A színek nem önmagukban jeleznek: a szakasz neve nagy betűvel ott van,
   és a hangmagasság is más (síp = munka, harang = pihenő).
   ========================================================================= */
html[data-theme]{
  --tmr-prep:var(--c-plan);  --tmr-prep-ink:var(--c-plan-ink);
  --tmr-work:var(--c-cal);   --tmr-work-ink:var(--c-cal-ink);
  --tmr-rest:var(--o-ok);    --tmr-rest-ink:var(--o-ok-ink);
  --tmr-setrest:#2FB37A;     --tmr-setrest-ink:#02130A;
  --tmr-cool:var(--c-guest); --tmr-cool-ink:var(--c-guest-ink);
}
.tk-prep{ --tk:var(--tmr-prep); } .tk-work{ --tk:var(--tmr-work); } .tk-rest{ --tk:var(--tmr-rest); }
.tk-setrest{ --tk:var(--tmr-setrest); } .tk-cool{ --tk:var(--tmr-cool); } .tk-plain{ --tk:var(--o-ink); }

/* ---------- beállító oldal ---------- */
.tmr-setup{ display:flex; flex-direction:column; gap:14px; }
.tmr-sum{ display:flex; flex-direction:column; gap:12px; }
.tmr-sum-top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.tmr-sum-time{ font-family:var(--f-disp); font-size:46px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.tmr-tl{ display:flex; height:14px; border-radius:7px; overflow:hidden; gap:2px; background:rgba(255,255,255,.04); }
.tmr-tl i{ display:block; height:100%; background:var(--tk); }
.tmr-legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--o-ink-2); font-variant-numeric:tabular-nums; }
.tmr-legend span{ display:inline-flex; align-items:center; gap:6px; }
.tmr-legend b{ color:var(--o-ink); font-weight:700; }
.tmr-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; background:var(--tk); }
.tmr-start-t{ font-family:var(--f-mono); font-weight:600; font-size:14px; opacity:.7; }

.tmr-presets{ display:flex; flex-direction:column; gap:10px; }
.tmr-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.tmr-chips::-webkit-scrollbar{ display:none; }
.tmr-chip{ flex:none; display:inline-flex; align-items:center; border:1px solid var(--o-line-2); background:rgba(255,255,255,.05);
  border-radius:999px; padding:9px 14px; font:inherit; font-size:14px; font-weight:600; color:var(--o-ink); cursor:pointer; white-space:nowrap; }
span.tmr-chip{ padding:0; }
.tmr-chip-b{ border:0; background:none; color:inherit; font:inherit; padding:9px 6px 9px 14px; cursor:pointer; white-space:nowrap; }
.tmr-chip-x{ border:0; background:none; color:var(--o-ink-3); padding:9px 12px 9px 4px; cursor:pointer; display:grid; place-items:center; }
.tmr-chip-x .ic{ width:16px; height:16px; }
.tmr-chip.on{ background:rgba(var(--c-cal-rgb),.16); border-color:rgba(var(--c-cal-rgb),.6); color:var(--c-cal); }
.tmr-saverow{ display:flex; gap:8px; align-items:center; }
.tmr-saverow input{ flex:1; min-width:0; }
.tmr-saverow .ob{ width:auto; flex:none; }

.tmr-fields{ display:flex; flex-direction:column; padding-top:4px; padding-bottom:4px; }
.tmr-row{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--o-hair); }
.tmr-row:first-child{ border-top:0; }
.tmr-ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--tk);
  background:color-mix(in srgb, var(--tk) 14%, transparent); }
.tmr-ico .ic{ width:22px; height:22px; }
.tmr-rmain{ min-width:0; }
.tmr-rname{ font-weight:700; font-size:16px; line-height:1.2; }
.tmr-rsub{ font-size:12.5px; color:var(--o-ink-3); }
.tmr-rdesc{ grid-column:2 / -1; margin-top:-4px; }
.tmr-rdesc input{ width:100%; box-sizing:border-box; padding:9px 12px; font-size:14.5px; }
.tmr-step{ display:flex; align-items:center; gap:6px; }
.tmr-sb{ width:46px; height:46px; border-radius:50%; border:1px solid var(--o-line-2); background:rgba(255,255,255,.06); color:var(--o-ink);
  font-size:24px; font-weight:600; line-height:1; cursor:pointer; display:grid; place-items:center; touch-action:manipulation;
  -webkit-user-select:none; user-select:none; }
.tmr-sb:active{ background:rgba(255,255,255,.14); }
.tmr-val{ min-width:54px; text-align:center; font-family:var(--f-disp); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; }
.tmr-val small{ display:block; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; color:var(--o-ink-3); text-transform:uppercase; }

.tmr-sound{ display:flex; flex-direction:column; gap:12px; }
.tmr-snd{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tmr-snd .ob{ font-size:14px; padding:0 10px; }
.tmr-opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px; }
.tmr-opt select{ max-width:60%; }
.tmr-opt.stack{ flex-direction:column; align-items:stretch; gap:8px; }
.tmr-opt.stack select{ max-width:none; width:100%; }
.tmr-opt input[type=range]{ width:52%; accent-color:var(--c-cal); }
.tmr-opt input[type=checkbox]{ width:22px; height:22px; accent-color:var(--c-cal); }
.tmr-hint{ margin:0; font-size:13.5px; line-height:1.5; }

/* ---------- futás (teljes képernyő, az #app fölött) ---------- */
body.tmr-open{ overflow:hidden; }
/* Az app CSS-e nem rejti el általánosan a [hidden] elemeket, a flex/grid
   szabályok pedig felülírnák -- a futó képernyő paneljeit (Kész!, kilépés-
   kérdés) a hidden attribútum kapcsolja. */
.tmr-run [hidden]{ display:none !important; }
.tmr-run{ position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ph); color:var(--ph-ink); transition:background-color .35s ease; font-family:var(--f-disp);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(10px,env(safe-area-inset-left,0px)); padding-right:max(10px,env(safe-area-inset-right,0px)); }
.tmr-run[data-k=prep]{ --ph:var(--tmr-prep); --ph-ink:var(--tmr-prep-ink); }
.tmr-run[data-k=work]{ --ph:var(--tmr-work); --ph-ink:var(--tmr-work-ink); }
.tmr-run[data-k=rest]{ --ph:var(--tmr-rest); --ph-ink:var(--tmr-rest-ink); }
.tmr-run[data-k=setrest]{ --ph:var(--tmr-setrest); --ph-ink:var(--tmr-setrest-ink); }
.tmr-run[data-k=cool]{ --ph:var(--tmr-cool); --ph-ink:var(--tmr-cool-ink); }
.tmr-run[data-k=done]{ --ph:var(--o-solid); --ph-ink:var(--o-ink); }
.tmr-prog{ height:6px; margin:8px 4px 0; border-radius:3px; background:rgba(0,0,0,.16); overflow:hidden; flex:none; }
.tmr-prog i{ display:block; height:100%; width:0; background:currentColor; opacity:.75; }
/* A fej és a lábléc gombjai a nagy szám FÖLÖTT vannak: a szám betűdoboza
   telefonon felér a fejig, és különben eltakarná a szünet / kilépés gombot. */
.tmr-rhead{ display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:4px; padding-top:6px; flex:none; position:relative; z-index:2; }
.tmr-rb{ width:56px; height:56px; border:0; border-radius:18px; background:rgba(0,0,0,.12); color:inherit; display:grid; place-items:center; cursor:pointer; }
.tmr-rb .ic{ width:28px; height:28px; stroke-width:2.6; }
.tmr-rb.lg{ width:64px; height:64px; }
.tmr-rb .ic.flip{ transform:scaleX(-1); }
.tmr-rtitle{ text-align:center; min-width:0; }
/* A szakasz neve messziről is olvasható legyen (megrendelő: "a pihenő felirat
   legyen nagyobb"); a hosszú szavak (Levezetés, Sorozatszünet) kisebbek. */
.tmr-phase{ font-weight:800; font-size:min(17vw,11vh,120px); letter-spacing:-.03em; line-height:.95; white-space:nowrap; }
.tmr-phase.l2{ font-size:min(12.5vw,9vh,96px); }
.tmr-phase.l3{ font-size:min(9.6vw,7.5vh,78px); }
.tmr-desc{ font-weight:700; font-size:clamp(16px,3.6vw,26px); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tmr-exitq{ text-align:center; font-family:var(--f-mono); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:14px;
  background:rgba(0,0,0,.18); border-radius:12px; padding:8px; margin:6px 4px 0; }
.tmr-rbody{ flex:1; display:flex; flex-direction:column; min-height:0; }
.tmr-left, .tmr-right{ display:flex; flex-direction:column; min-height:0; }
.tmr-left{ flex:1; }
.tmr-big{ flex:1; display:grid; place-items:center; min-height:0; font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:-.05em; line-height:.85; font-size:min(56vh,80vw); -webkit-user-select:none; user-select:none; pointer-events:none; }
.tmr-big.long{ font-size:min(40vh,46vw); }
.tmr-meta{ display:flex; justify-content:center; gap:10px 22px; flex-wrap:wrap; font-family:var(--f-mono); font-weight:600;
  font-size:clamp(14px,3.4vw,22px); letter-spacing:.06em; padding:4px 0 10px; font-variant-numeric:tabular-nums; }
.tmr-paused{ display:none; font-family:var(--f-mono); font-weight:600; letter-spacing:.2em; text-align:center; font-size:clamp(16px,4vw,26px); }
.tmr-run.paused .tmr-paused{ display:block; animation:tmrBlink 1.2s steps(2) infinite; }
@keyframes tmrBlink{ 50%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){ .tmr-run.paused .tmr-paused{ animation:none; } .tmr-run{ transition:none; } }
/* Az egész edzés listája görgethető: négy sor látszik, az aktuális mindig a
   tetejére áll -- kivéve, ha épp kézzel görgetnek (5 mp-ig békén hagyjuk). */
.tmr-list{ position:relative; z-index:2; display:flex; flex-direction:column; gap:4px; padding:0 2px; overflow-y:auto; overscroll-behavior:contain;
  font-size:clamp(17px,4.4vw,28px); max-height:calc(4 * 2.3em + 12px); scroll-snap-type:y proximity; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,#000 85%,transparent); mask-image:linear-gradient(180deg,#000 85%,transparent); }
.tmr-list::-webkit-scrollbar{ display:none; }
.tmr-li{ display:flex; align-items:center; justify-content:space-between; gap:10px; border:0; background:rgba(0,0,0,.08); border-radius:14px;
  padding:0 16px; min-height:2.3em; box-sizing:border-box; flex:none; font:inherit; font-size:1em; font-weight:600; cursor:pointer;
  color:inherit; text-align:left; font-variant-numeric:tabular-nums; scroll-snap-align:start; }
.tmr-li.cur{ background:rgba(0,0,0,.22); font-weight:800; }
.tmr-li.past{ opacity:.45; }
.tmr-li .n{ opacity:.6; font-family:var(--f-mono); font-size:.7em; margin-right:8px; }
.tmr-foot{ display:grid; grid-template-columns:64px 1fr 64px; align-items:center; padding:10px 0 12px; position:relative; z-index:2; }
.tmr-round{ text-align:center; font-weight:800; font-size:clamp(30px,8vw,54px); font-variant-numeric:tabular-nums; line-height:1; }
.tmr-round small{ display:block; font-family:var(--f-mono); font-weight:600; font-size:12px; letter-spacing:.14em; opacity:.75; margin-top:4px; }
.tmr-wl{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; text-align:center; min-height:14px; }
.tmr-done{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:20px; }
.tmr-done .lbl{ color:var(--tmr-rest); }
.tmr-done h2{ font-size:clamp(44px,11vw,88px); margin:0; letter-spacing:-.03em; }
.tmr-done-b{ display:flex; flex-direction:column; gap:10px; width:min(100%,360px); }
/* fekvő képernyő (tablet állványon, kivetítés): balra a szám, jobbra a lista */
@media (orientation:landscape) and (max-height:620px), (orientation:landscape) and (min-width:900px){
  .tmr-rbody{ flex-direction:row; align-items:stretch; gap:16px; }
  .tmr-left{ flex:1.5; min-width:0; }
  .tmr-right{ flex:1; justify-content:flex-end; min-width:0; overflow:hidden; }
  .tmr-big{ font-size:min(58vh,46vw); }
  .tmr-big.long{ font-size:min(40vh,28vw); }
  .tmr-rhead{ grid-template-columns:52px 1fr 52px; }
  .tmr-rhead .tmr-rb{ width:52px; height:52px; }
  .tmr-phase{ font-size:min(14vh,9vw,110px); }
  .tmr-phase.l2{ font-size:min(11vh,7vw,90px); }
  .tmr-phase.l3{ font-size:min(9vh,5.6vw,72px); }
  .tmr-desc{ font-size:min(5vh,22px); }
  .tmr-list{ font-size:min(5.4vh,26px); max-height:calc(3 * 2.3em + 8px); }
  .tmr-foot{ padding:6px 0; }
  .tmr-foot .tmr-rb.lg{ width:54px; height:54px; }
  .tmr-round{ font-size:min(10vh,46px); }
}