/* KinetoMoves — stil după Apple Human Interface Guidelines:
   culori de sistem, tipografie de sistem, liste grupate, tab bar translucid,
   ținte tactile de minimum 44 pt, mod întunecat și respectarea "reduce motion".
   Contrast verificat (WCAG AA): text ≥ 4,5:1, elemente grafice (piste, comutatoare, inele) ≥ 3:1,
   în ambele moduri. Valorile sunt calculate, nu estimate; vezi comentariile de lângă culori. */

/* ---------- culori și dimensiuni ---------- */

:root {
  color-scheme: light dark;
  --bg: #F2F2F7;
  --surface: #FFFFFF;
  --fill: rgba(118, 118, 128, .12);
  --label: #000000;
  --label2: rgba(60, 60, 67, .76);     /* 4,98:1 pe bg, 5,31:1 pe surface, 4,59:1 pe fill */
  --label3: rgba(60, 60, 67, .3);      /* doar decor (săgeți), nu text */
  --sep: rgba(60, 60, 67, .2);
  --tint: #006B79;                     /* 5,57:1 pe bg, 6,21:1 cu alb, 4,69:1 pe tint-soft */
  --on-tint: #FFFFFF;
  --tint-soft: rgba(0, 107, 121, .12);
  --good: #1E8E3E;
  --on-good: #FFFFFF;                  /* 4,21:1 */
  --bad: #D70015;
  --warn: #9A5200;
  --warn-soft: rgba(154, 82, 0, .1);
  --track: #86868B;                    /* piste goale, comutator oprit: 3,62:1 pe surface, 3,25:1 pe bg */
  --seg-on: #FFFFFF;                   /* segmentul ales */
  --seg-on-text: var(--tint);
  --fig: #7A7A82;
  --prop: #A1A1A8;                     /* 2,57:1 pe surface: mai discret decât figura (4,26:1), dar se vede */
  --mat: rgba(0, 107, 121, .3);
  --tabbar-h: min(calc(34px + calc(.9rem * var(--u))), 64px);   /* 49 px la textul implicit; crește cu textul mare, dar nu peste 64 px */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1C1C1E;
    --fill: rgba(118, 118, 128, .24);
    --label: #FFFFFF;
    --label2: rgba(235, 235, 245, .66);  /* 7,61:1 pe bg, 6,92:1 pe surface */
    --label3: rgba(235, 235, 245, .3);
    --sep: rgba(84, 84, 88, .65);
    --tint: #4FD1E3;                     /* 11,56:1 pe bg, 9,37:1 pe surface */
    --on-tint: #00222A;                  /* 9,16:1 */
    --tint-soft: rgba(79, 209, 227, .16);
    --good: #30D158;
    --on-good: #003D14;                  /* 6,19:1 (albul pe acest verde avea doar 2,02:1) */
    --bad: #FF6961;
    --warn: #FFB340;
    --warn-soft: rgba(255, 179, 64, .14);
    --track: #7C7C80;                    /* 4,09:1 pe surface, 5,05:1 pe bg */
    --seg-on: #636366;                   /* textul alb pe el: 5,99:1 */
    --seg-on-text: #FFFFFF;
    --fig: #A7A7B0;
    --prop: #636366;                     /* 2,84:1 pe surface */
    --mat: rgba(79, 209, 227, .3);
  }
}

/* „Creștere contrast” din iOS (Setări, Accesibilitate, Ecran și mărime text): separatoare și text secundar mai puternice.
   Trebuie să stea după blocul întunecat de mai sus, altfel acela le suprascrie. Grosimea liniilor rămâne neschimbată. */
@media (prefers-contrast: more) {
  :root {
    --sep: rgba(60, 60, 67, .55);
    --label2: #3C3C43;
    --label3: rgba(60, 60, 67, .6);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --sep: rgba(84, 84, 88, .95);
    --label2: #EBEBF5;
    --label3: rgba(235, 235, 245, .6);
  }
}

/* ---------- bază ---------- */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;   /* animația de intrare nu lărgește pagina */
  overscroll-behavior: none;   /* pagina nu mai „se trage” și nu revine elastic la capete */
  /* Locul barei de derulare e rezervat mereu. Pe desktop/tabletă (bară clasică), o pagină scurtă (Exerciții) nu are bară,
     iar una lungă (Azi, Progres) are: lățimea utilă sărea cu ~15 px, iar bara de jos și conținutul centrat se mutau lateral
     la fiecare schimbare de filă. Pe iPhone bara de derulare plutește și nu ocupă loc, deci acolo nu se schimbă nimic. */
  scrollbar-gutter: stable;
}
/* Mărimea textului vine de la sistem: Android prin <meta name="text-scale"> (rădăcina nu se setează aici, altfel Chrome ignoră scara),
   iOS prin Dynamic Type. Mărimile din rem au fost gândite pentru 17px; --u le păstrează: 17/16 pe baza de 16px, 1 pe iOS (rădăcina e deja ~17px). */
:root { --u: 1.0625; }
@supports (font: -apple-system-body) {
  :root { --u: 1; }
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  font-size: calc(1rem * var(--u));
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  overscroll-behavior: none;
  /* doar derulare în sus-jos; pagina nu se mai mută în lateral. Ciupirea (mărirea) rămâne, pentru accesibilitate. */
  touch-action: pan-y pinch-zoom;
}

h1, h2, h3, p { margin: 0; }
/* Rânduri mai echilibrate la titlurile scurte (nu rămâne un cuvânt singur pe ultima linie) și fără „orfani” în paragrafe;
   la browserele fără suport se ignoră, textul se rupe ca până acum. Doar pe aceste elemente: balance costă mai mult decât ruperea obișnuită. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* doar pentru cititorul de ecran */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* inelul de focus păstrează forma controlului (fără border-radius aici) */
:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; }
#app:focus { outline: none; }
/* titlul primește focusul doar ca punct de plecare pentru cititorul de ecran, fără inel */
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- ecran ---------- */

.screen {
  /* zonele sigure laterale (orizontal pe iPhone cu decupaj) se adaugă la 640 px: conținutul rămâne tot 640 px, ca bara de jos */
  max-width: calc(640px + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 12px)
    max(16px, env(safe-area-inset-right))
    calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 32px)
    max(16px, env(safe-area-inset-left));
  min-height: 100vh;
  min-height: 100svh;   /* svh: nu se schimbă când bara Safari apare sau dispare */
}
/* în antrenament, zona sigură de jos e în butoanele fixate (.p-actions) */
body.immersive .screen { padding-bottom: 0; }
body.immersive .tabbar { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .screen.route-push { animation: push .32s cubic-bezier(.2, .8, .2, 1); }
  /* nicio animație nu pornește de la opacitate 0: ecranul vechi dispare pe loc, deci un cadru transparent ar clipi */
  @keyframes push { from { opacity: .82; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  /* înapoi, spre un ecran mai puțin adânc: intră din stânga („pop” e deja animația bifei) */
  .screen.route-back { animation: pushback .32s cubic-bezier(.2, .8, .2, 1); }
  @keyframes pushback { from { opacity: .82; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  /* între file: doar opacitate, dar fără să pornească de la 0: ecranul vechi dispare pe loc, deci un cadru
     transparent ar arăta ca o clipire. Pornește aproape opac și doar se „așază”. */
  .screen.route-fade { animation: screenfade .14s ease-out; }
  @keyframes screenfade { from { opacity: .82; } to { opacity: 1; } }
}

.largetitle { padding: 8px 4px 16px; }
.largetitle .sub { color: var(--label2); font-size: calc(.94rem * var(--u)); }
.largetitle h1 { font-size: calc(2rem * var(--u)); line-height: 1.12; font-weight: 700; letter-spacing: .011em; }

.navbar { display: flex; align-items: center; min-height: 44px; margin: 0 -8px 4px; }
/* doar linkul din bara de navigare: tranziția dintre ecrane folosește clasele .route-push / .route-back / .route-fade */
.navbar .back {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 8px; border-radius: 8px;
  color: var(--tint); font-size: calc(1rem * var(--u));
}
.navbar .back svg { width: 12px; height: 20px; }

.title-detail { font-size: calc(1.65rem * var(--u)); font-weight: 700; line-height: 1.15; padding: 0 4px; }
.lede { color: var(--label2); padding: 6px 4px 14px; }
.cta { margin-top: 24px; }

/* ---------- carduri ---------- */

.card { background: var(--surface); border-radius: 18px; padding: 20px; }

.hero { margin-bottom: 8px; }
.hero-meta { color: var(--label2); font-size: calc(.94rem * var(--u)); }
.hero-title { font-size: calc(1.65rem * var(--u)); font-weight: 700; line-height: 1.15; margin: 2px 0 14px; }
.hero-note { color: var(--label2); font-size: calc(.94rem * var(--u)); margin: 12px 0 0; }
.hero .btn { margin-top: 18px; }
.hero .btn + .btn { margin-top: 8px; }
.done-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--good); color: var(--on-good); margin-bottom: 10px;
}
.done-mark svg { width: 18px; height: 18px; }

/* antrenament sau exersare neterminată */
.resume-card { margin-bottom: 12px; }
.resume-title { font-size: calc(1.06rem * var(--u)); font-weight: 600; margin: 2px 0 12px; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.resume-actions .btn { flex: 1 1 8em; width: auto; }

/* punctele săptămânii: cele goale au contur, ca să se vadă câte au rămas */
.dots { display: flex; gap: 8px; }
.dot { flex: 1; height: 8px; border-radius: 4px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--track); }
.dot.on { background: var(--tint); box-shadow: none; }

/* ---------- liste grupate ---------- */

.group-title { font-size: calc(.94rem * var(--u)); font-weight: 600; color: var(--label2); padding: 24px 16px 8px; }
.group-footer { font-size: calc(.82rem * var(--u)); color: var(--label2); padding: 8px 16px 0; line-height: 1.4; }

.group { background: var(--surface); border-radius: 12px; overflow: hidden; }
.group.danger { margin-top: 32px; }
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 11px 16px; width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
}
/* colțurile rândurilor urmează grupul, ca inelul de focus să nu fie tăiat */
.group > .row:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.group > .row:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.group > .row:focus-visible { outline-offset: -4px; }
.row + .row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: var(--sep);
}
.row.static { cursor: default; }
a.row:active, button.row:active { background: var(--fill); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-weight: 500; }
.row-sub { color: var(--label2); font-size: calc(.88rem * var(--u)); }
/* valoarea din dreapta nu strivește titlul: ocupă cel mult jumătate și se rupe pe rânduri */
.row-value { flex: 0 1 auto; max-width: 50%; min-width: 0; color: var(--label2); text-align: right; overflow-wrap: break-word; }
/* rândurile cu valori („Cum se numără”): dacă nu încap alături, valoarea trece pe rândul ei */
.row.stat { flex-wrap: wrap; row-gap: 2px; }
.row.stat .row-main { flex: 1 1 7em; }
.row.stat .row-value { max-width: 100%; }
.chev { color: var(--label3); display: inline-flex; }
.chev svg { width: 8px; height: 14px; }
.row.destructive { color: var(--bad); justify-content: center; }
.row .check { color: var(--good); display: inline-flex; flex: none; }
/* indiciu la capătul rândului care se șterge la atingere (sesiunile bifate din Progres) */
.row-hint { flex: none; color: var(--label2); font-size: calc(.8rem * var(--u)); }
.row .check svg { width: 18px; height: 18px; }
.row .empty { color: var(--label2); }

/* alegere dintr-o listă (ce picior începe): bifa arată varianta aleasă */
.group.choice .row { min-height: 48px; }
.group.choice .check { color: var(--tint); }
.group.choice .row[aria-pressed="true"] .row-title { font-weight: 600; }

.badge {
  flex: none; display: inline-grid; place-items: center;
  min-width: 1.875em; height: 1.875em; padding: 0 .5em; border-radius: .94em;
  background: var(--tint-soft); color: var(--tint); font-weight: 700; font-size: calc(.94rem * var(--u)); line-height: 1;
}
.badge.start { background: var(--fill); color: var(--label2); padding: 0; width: 1.875em; }
.badge.start svg { width: .94em; height: .94em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* tutorial pas cu pas */
.steps .row { align-items: flex-start; padding: 14px 16px; }
.steps .row-title { font-weight: 600; }
.steps .row-sub { font-size: calc(.94rem * var(--u)); line-height: 1.38; }
.bullet { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tint); margin-top: .5em; }
.tips .row { align-items: flex-start; padding: 12px 16px; }
.tips .row-sub { color: var(--label); }

/* programe anterioare (arhivă) */
details.archive { margin-top: 8px; }
details.archive > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 11px 16px; border-radius: 12px;
  background: var(--surface); font-weight: 500; cursor: pointer; list-style: none;
}
details.archive > summary::-webkit-details-marker { display: none; }
details.archive > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border: solid var(--label2); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
}
details.archive[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.archive > .group { margin-top: 8px; }

/* ---------- butoane ---------- */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 6px 20px;
  border: 0; border-radius: 14px; cursor: pointer; text-align: center; line-height: 1.2;
  font-size: calc(1.06rem * var(--u)); font-weight: 600; touch-action: manipulation;
  transition: opacity .15s, transform .15s;
}
.btn:active { opacity: .85; transform: scale(.985); }   /* .85: eticheta butonului principal rămâne lizibilă cât e apăsat */
.btn.primary { background: var(--tint); color: var(--on-tint); }
.btn.secondary { background: var(--tint-soft); color: var(--tint); }
.btn.plain { background: none; color: var(--tint); font-weight: 500; min-height: 44px; }
.btn.big { min-height: 64px; font-size: calc(1.2rem * var(--u)); border-radius: 18px; }
.btn svg { flex: none; width: 18px; height: 18px; }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; justify-content: center;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--surface);   /* iOS 16.0–16.1 nu cunoaște color-mix: fără asta bara ar rămâne transparentă */
  /* estomparea de sub bară se recalculează la fiecare cadru în care se schimbă ecranul: mai ușoară (fără saturare, rază mică) */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: .5px solid var(--sep);
}
.tabbar a {
  flex: 1; min-width: 0; max-width: 214px; min-height: var(--tabbar-h); padding: 2px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  /* eticheta urmează textul mare al sistemului, dar între 11 și 16 px: bara nu acoperă ecranul la mărimile de accesibilitate */
  color: var(--label2); font-size: clamp(11px, calc(.66rem * var(--u)), 16px); font-weight: 500; text-align: center;
}
/* dacă o etichetă tot nu încape, se taie cu „…” în loc să lărgească bara */
.tabbar a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a:focus-visible { outline-offset: -3px; }
/* fără meniul de copiere la atingere lungă; răspuns vizibil imediat la atingere (altfel fila pare moartă până se schimbă ecranul) */
@supports (background: color-mix(in srgb, red, blue)) {
  .tabbar { background: color-mix(in srgb, var(--surface) 85%, transparent); }
}
.tabbar a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.tabbar a:active { opacity: .6; }
.tabbar svg {
  flex: none; width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* fila curentă; pe pagina unui exercițiu, fila de origine (.on) arată la fel */
.tabbar a[aria-current="page"], .tabbar a.on { color: var(--tint); }
.tabbar a[aria-current="page"] svg, .tabbar a.on svg { stroke-width: 2.2; }
/* culoarea se schimbă lin, în același ritm cu apariția ecranului (~150 ms), nu dintr-un cadru în altul; schimbarea de culoare nu e
   mișcare, deci rămâne și cu „mișcare redusă”. Grosimea iconiței (formă) se animă doar fără această setare. */
.tabbar a { transition: color .15s ease, opacity .15s ease; }
@media (prefers-reduced-motion: no-preference) {
  .tabbar svg { transition: stroke-width .15s ease; }
}
/* diagnostic (Progres, ascuns; atributul vine din app.js): fiecare valoare oprește un singur efect al barei sau al schimbării filei */
html[data-diag~="nofade"] .screen { animation: none !important; }
html[data-diag~="noblur"] .tabbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--surface) !important; }
html[data-diag~="notrans"] .tabbar a, html[data-diag~="notrans"] .tabbar svg { transition: none !important; }
html[data-diag~="nostroke"] .tabbar a.on svg, html[data-diag~="nostroke"] .tabbar a[aria-current="page"] svg { stroke-width: 1.7 !important; }
html[data-diag~="noactive"] .tabbar a:active { opacity: 1 !important; }
/* telefon pe orizontală: bară mai joasă, pictograma lângă etichetă (~45 px la textul implicit, cel puțin 44 px; crește tot cu textul mare);
   .screen citește aceeași variabilă, deci spațiul rezervat o urmează */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --tabbar-h: max(44px, min(calc(30px + calc(.9rem * var(--u))), 64px)); }
  .tabbar a { flex-direction: row; gap: 6px; }
  .tabbar svg { width: 22px; height: 22px; }
}
/* contrast mărit: bara de jos devine opacă (fără transparență și estompare), ca marginea ei să se vadă */
@media (prefers-contrast: more) {
  .tabbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- exerciții ---------- */

.ex-list { display: grid; gap: 12px; }
.ex-card {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: var(--surface); border-radius: 18px;
}
.ex-card:active { opacity: .7; }
.ex-card .thumb { flex: none; width: 104px; height: 82px; display: grid; place-items: center; background: var(--fill); border-radius: 12px; padding: 4px; }
.ex-card .thumb .fig { width: 100%; height: 100%; }
.ex-card .row-title { font-weight: 600; line-height: 1.2; }

/* scena animației; svh, ca figura să nu-și schimbe mărimea la derularea în Safari */
.stage {
  position: relative; width: 100%; max-height: 52vh; max-height: 52svh;
  background: var(--surface); border-radius: 20px; padding: 10px;
}
.stage .fig { display: block; width: 100%; height: 100%; }
.stage.compact { max-height: 32vh; max-height: 32svh; }
.p-body .stage:not(.compact) { max-height: 34vh; max-height: 34svh; }
.p-body .caption { min-height: 5.6em; padding-top: 12px; }
/* la exercițiile fără cronometru, toată scena se atinge pentru o repetare */
.stage.tap-target {
  cursor: pointer; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: background-color .15s, transform .15s;
}
.stage.tap-target:active { background: color-mix(in srgb, var(--tint) 10%, var(--surface)); transform: scale(.99); }

/* figura */
.fig .main path, .fig .main circle { fill: var(--fig); }
.fig .main .near path { fill: var(--tint); stroke: var(--surface); stroke-width: 1; stroke-linejoin: round; }
.fig.plain .main .near path { fill: var(--fig); }
.fig .main .arm path, .fig .main .arm circle { stroke: var(--surface); stroke-width: 1.2; }
.fig .far { opacity: .5; }
.fig.plain .far { opacity: .72; }
.fig .main .far.arm { opacity: 1; }   /* ambele mâini se văd complet, spre deosebire de piciorul din spate */
/* accent dinamic: piciorul care se mișcă e colorat, celălalt gri */
.fig.dyn .main .near path { fill: var(--fig); }
.fig.dyn .main .near.hl path { fill: var(--tint); }
.fig.dyn .main .far { opacity: 1; }   /* piciorul din spate, când stă: plin, gri deschis (ex. 1–3) */
.fig.dyn .main .far:not(.hl) .c { fill: var(--fig); stroke: var(--surface); stroke-width: 1; }
.fig.dyn .main .far.hl .c { fill: var(--tint); stroke: var(--surface); stroke-width: 1; }
/* mâna care atinge genunchiul (ex. 2) are accentul piciorului care se ridică */
.fig.dyn .main .arm.hl path, .fig.dyn .main .arm.hl circle { fill: var(--tint); }
/* accentul trece lin de la un picior la altul, nu sare */
.fig.dyn .main .near path, .fig.dyn .main .far .c, .fig.dyn .main .arm path, .fig.dyn .main .arm circle { transition: fill .5s ease, stroke .5s ease; }
.fig.dyn .main .far:not(.arm) { transition: opacity .5s ease; }
/* ex. 1: piciorul care nu se mișcă acum devine puțin transparent, cu contur punctat, ca să se vadă și celălalt picior */
.fig.fade.dyn .main .near:not(.hl), .fig.fade.dyn .main .far:not(.arm):not(.hl) { opacity: .55; }
.fig.fade.dyn .main .near:not(.hl) path, .fig.fade.dyn .main .far:not(.arm):not(.hl) .c { stroke: var(--label2); stroke-width: 1; stroke-dasharray: 2.4 2.4; }
.fig.fade.dyn .main .near { transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .fig * { transition: none !important; } }
.fig .mat { fill: var(--mat); }
.fig .floor { stroke: var(--prop); stroke-width: 2.5; stroke-linecap: round; }
.fig .chair { stroke: var(--prop); stroke-linecap: round; }
.fig .chair-seat { fill: var(--prop); }
.fig .ann line { stroke: var(--tint); stroke-width: 2; stroke-linecap: round; }
.fig .ann .ann-knee { stroke-dasharray: 5 6; }

/* ---------- control segmentat (A B C D, parte, pauză) ---------- */

.segments { display: flex; gap: 2px; padding: 2px; margin-top: 14px; background: var(--fill); border-radius: 10px; }
.seg {
  flex: 1; min-width: 0; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 8px; background: none;
  font-weight: 600; color: var(--label); cursor: pointer; touch-action: manipulation;
}
/* segmentul ales: pastilă deschisă + contur în culoarea accentului (se vede și în modul întunecat, nu doar prin culoarea textului) */
.seg.on {
  background: var(--seg-on); color: var(--seg-on-text);
  box-shadow: inset 0 0 0 1.5px var(--tint), 0 1px 3px rgba(0, 0, 0, .18);
}
/* pauza dintre seturi, în rândul din Progres */
.segments.choice { margin-top: 10px; }

.caption { min-height: 7.2em; padding: 16px 4px 0; }
.cap-title { font-weight: 600; font-size: calc(1.06rem * var(--u)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-text { color: var(--label2); margin-top: 4px; line-height: 1.4; }
.pill {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  background: var(--tint-soft); color: var(--tint); font-size: calc(.8rem * var(--u)); font-weight: 600;
}
.toggle { margin-top: 2px; }

/* comutator de parte (ex. 2): cu ce genunchi începi */
.side-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 14px; }
.side-label { flex: 0 1 auto; font-size: calc(.88rem * var(--u)); color: var(--label2); }
.side-switch .segments { margin-top: 0; flex: 1 1 12em; max-width: 300px; }

/* ---------- progres și setări ---------- */

.summary { display: flex; flex-direction: column; gap: 12px; }
.summary-num { font-size: calc(2.2rem * var(--u)); font-weight: 700; line-height: 1; }
.summary-num small { font-size: calc(1.05rem * var(--u)); font-weight: 500; color: var(--label2); margin-left: 4px; }
.bar { height: 8px; border-radius: 4px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--track); overflow: hidden; }
.bar > span { display: block; width: 0; height: 100%; background: var(--tint); border-radius: 4px; }

/* simptomele din coapsă: un punct pe sesiune (decor; același lucru e scris dedesubt) */
.trend .sym-strip { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 4px; }
.sym-dot { flex: none; width: calc(.75rem * var(--u)); height: calc(.75rem * var(--u)); border-radius: 50%; background: var(--track); }
.sym-b-ok, .sym-a-better { background: var(--good); }
.sym-b-usual, .sym-a-same { background: var(--track); }
.sym-b-mild { background: var(--warn); }
.sym-b-worse, .sym-a-worse { background: var(--bad); }
.sym-b-none, .sym-a-none { background: none; box-shadow: inset 0 0 0 1.5px var(--track); }

/* zilele de antrenament: 7 butoane, cel puțin 44 px înălțime; selectorul intră 8 px în marginea rândului (16 px),
   ca butoanele să aibă ~44 px lățime și pe 375 px (fără bleed ar fi ~41 px) */
.day-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 10px -8px 0; }
.day {
  min-width: 0; min-height: 44px; padding: 0 2px; border: 0; border-radius: 10px;
  background: var(--fill); color: var(--label); font-size: calc(.88rem * var(--u)); font-weight: 600;
  cursor: pointer; touch-action: manipulation;
}
.day.on, .day[aria-pressed="true"] { background: var(--tint); color: var(--on-tint); }
/* pe ecrane înguste, 7 butoane pe un rând ar avea sub 40 px lățime: două rânduri (4 + 3) */
@media (max-width: 374px) { .day-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-inline: 0; } }

/* seturi și repetări ajustate de kinetoterapeut */
.prog-row { align-items: flex-start; }
.prog-row .badge { margin-top: 1px; }
.steppers { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.stepper { display: inline-flex; align-items: center; border-radius: 10px; background: var(--fill); }
.step-btn {
  flex: none; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--tint); font-size: calc(1.35rem * var(--u)); font-weight: 500; line-height: 1;
  cursor: pointer; touch-action: manipulation;
}
.step-btn:active { background: var(--fill); }
.step-btn[aria-disabled="true"] { color: var(--label2); opacity: .5; cursor: default; }   /* la limită: estompat, dar semnul „−” / „+” rămâne vizibil */
.step-btn[aria-disabled="true"]:active { background: none; }
.step-val { min-width: 7em; padding: 0 2px; text-align: center; font-size: calc(.94rem * var(--u)); font-variant-numeric: tabular-nums; }

/* comutator */
.switch { position: relative; flex: none; width: 51px; height: 31px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--track); transition: background .2s; pointer-events: none; }
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s;
}
.switch input:checked + i { background: var(--good); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--tint); outline-offset: 2px; }
/* mod întunecat: butonul alb pe verdele deschis are doar 2,02:1; o linie fină închisă îi arată marginea */
@media (prefers-color-scheme: dark) {
  .switch i::after { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .25); }
}

/* ---------- foaie de confirmare ---------- */

.scrim {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  padding:
    calc(env(safe-area-inset-top) + 12px)
    max(12px, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 12px)
    max(12px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, .4);
}
.sheet {
  width: 100%; max-width: 420px; max-height: 100%; display: grid; gap: 8px;
  overflow-y: auto; overscroll-behavior: contain;
}
/* titlul, mesajul și acțiunile formează un singur bloc rotunjit, ca pe iOS */
.sheet > :first-child { background: var(--surface); border-radius: 14px; overflow: hidden; }
.sheet-body { padding: 16px 20px; text-align: center; }
.sheet-actions { border-top: .5px solid var(--sep); }
.sheet-title { font-weight: 600; }
.sheet-msg { color: var(--label2); font-size: calc(.88rem * var(--u)); margin-top: 4px; }
.sheet button {
  display: block; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; background: none;
  font-size: calc(1.06rem * var(--u)); color: var(--tint); cursor: pointer;
}
.sheet button + button { border-top: .5px solid var(--sep); }
.sheet button:active { background: var(--fill); }
/* inelul de focus în interiorul butonului: blocul rotunjit îl taie altfel */
.sheet button:focus-visible { outline-offset: -4px; }
.sheet-actions button:last-child { border-radius: 0 0 14px 14px; }
.sheet button.destructive { color: var(--bad); }
.sheet button.cancel { font-weight: 600; }
.sheet .sheet-cancel { background: var(--surface); border-radius: 14px; }
.sheet .sheet-cancel button { border-radius: 14px; }
/* câmp în foaie (ora mementoului) */
.sheet-field {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; font-weight: 500;
}
.sheet-field input {
  min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px;
  background: var(--fill); color: var(--label); font: inherit; font-size: calc(1.06rem * var(--u));
}
/* rezumatul de copiat manual */
.sheet .share-text {
  display: block; width: 100%; margin-top: 12px; padding: 10px 12px;
  border: 0; border-radius: 10px; background: var(--fill); color: var(--label);
  font: inherit; font-size: max(16px, calc(.88rem * var(--u))); line-height: 1.4; text-align: left;   /* sub 16px, iOS mărește pagina la atingere */
}
/* eroare sub câmpul de text (ex. textul lipit nu se poate folosi) */
.sheet .sheet-err { margin-top: 8px; color: var(--bad); font-size: calc(.88rem * var(--u)); line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .scrim { animation: fade .2s; }
  .sheet { animation: rise .28s cubic-bezier(.2, .8, .2, 1); }
  /* foaie după foaie (pas următor): fundalul rămâne, nu se mai stinge și reapare */
  .scrim.again { animation: none; }
  /* ieșirea: doar aspect; nodul se scoate din JS pe un timp fix, iar cât se stinge nu primește atingeri */
  .scrim.closing { pointer-events: none; animation: fadeout .18s ease-in forwards; }
  .scrim.closing .sheet { animation: sink .18s ease-in forwards; }
  @keyframes fade { from { opacity: 0; } }
  @keyframes rise { from { transform: translateY(40px); } }
  @keyframes fadeout { to { opacity: 0; } }
  @keyframes sink { to { transform: translateY(40px); } }
  /* schimbările de stare nu mai sar dintr-odată (ca la .switch) */
  .seg, .day, .phase-step { transition: background-color .15s, color .15s, box-shadow .15s; }
  details.archive > summary::after { transition: transform .2s; }
}

/* ---------- antrenament ghidat ---------- */

/* dvh doar aici: antrenamentul umple exact ecranul vizibil */
.player {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 12px - env(safe-area-inset-top));
  min-height: calc(100dvh - 12px - env(safe-area-inset-top));
}
.p-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -6px 4px; }
.icon-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: none; color: var(--tint); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }
.p-count { color: var(--label2); font-size: calc(.94rem * var(--u)); font-weight: 500; text-align: center; }

/* mesaj discret: ecranul se poate stinge (Wake Lock indisponibil) */
.p-banner {
  display: flex; align-items: flex-start; gap: 4px; margin: 0 0 8px;
  padding: 10px 2px 10px 14px; border-radius: 12px; background: var(--surface);
  font-size: calc(.88rem * var(--u)); line-height: 1.38;
}
.p-banner p { flex: 1; min-width: 0; padding-top: 2px; }
.p-banner .icon-btn { margin: -10px 0 -10px; }

.p-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.p-resume {
  align-self: flex-start; padding: 4px 12px; border-radius: 99px;
  background: var(--tint-soft); color: var(--tint); font-size: calc(.88rem * var(--u)); font-weight: 600;
}
.p-title { font-size: calc(1.65rem * var(--u)); font-weight: 700; line-height: 1.15; padding: 0 4px; }
.p-meta { color: var(--label2); padding: 0 4px; }
.p-body > .stop-note { margin-top: 0; }
.p-set { text-align: center; font-weight: 600; }
.p-phase {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  min-height: 1.85em; font-size: calc(1.15rem * var(--u)); font-weight: 600; text-align: center;
}
.p-phase .badge { min-width: 1.75em; height: 1.75em; font-size: calc(.94rem * var(--u)); }

/* butoanele rămân jos, deasupra indicatorului de pornire (zona sigură e inclusă) */
.p-actions {
  display: grid; gap: 6px; position: sticky; bottom: 0; z-index: 2;
  padding: 12px 0 calc(env(safe-area-inset-bottom) + 12px);
  background: linear-gradient(to top, var(--bg) calc(100% - 12px), transparent);
}
/* instrucțiunea scurtă de pe ecranul setului: rămâne vizibilă și pe telefoanele mici */
.p-hint { color: var(--label2); font-size: calc(.88rem * var(--u)); line-height: 1.35; text-align: center; padding: 0 8px 2px; }
/* două butoane alăturate (pauza cronometrului, +15 s); pe ecrane înguste sau text mare, unul sub altul */
.p-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 6px; }
.p-row .btn { padding-left: 12px; padding-right: 12px; }

/* pozițiile A B C D din set: doar indicator (nu se apasă), fără aspect de buton */
.phase-steps { display: flex; justify-content: center; gap: 10px; }
.phase-step {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .3em;
  border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--track);
  color: var(--label2); font-size: calc(.82rem * var(--u)); font-weight: 700; line-height: 1;
}
.phase-step.on { background: var(--tint); color: var(--on-tint); box-shadow: none; }

/* numărare automată (exercițiile fără cronometru) */
.p-auto {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 44px; padding: 8px 12px 8px 16px;
  border: 0; border-radius: 12px; background: var(--surface); color: var(--label);
  font-weight: 500; text-align: left; cursor: pointer; touch-action: manipulation;
}
.p-auto:active { background: var(--fill); }
.p-auto-state {
  flex: none; padding: 3px 10px; border-radius: 99px;
  background: var(--fill); color: var(--label2); font-size: calc(.82rem * var(--u)); font-weight: 600;
}
.p-auto[aria-pressed="true"] .p-auto-state { background: var(--tint); color: var(--on-tint); }

.p-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; justify-content: center; }
.count { text-align: center; }
.count-num { font-size: calc(3.4rem * var(--u)); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.count-num .of { font-size: calc(1.4rem * var(--u)); font-weight: 500; color: var(--label2); margin-left: 6px; }
.count-label { color: var(--label2); font-size: calc(.88rem * var(--u)); margin-top: 4px; }

/* inelul: pista subțire (3:1 față de fundal), progresul gros, în culoarea accentului;
   cifra se micșorează cu inelul (unități cqi), ca să nu iasă din el la text mare */
.ring { position: relative; flex: none; width: calc(6.6rem * var(--u)); max-width: 40vw; aspect-ratio: 1; container-type: inline-size; }
.ring.large { width: calc(11.75rem * var(--u)); max-width: 64vw; margin: 12px auto; }
.ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .ring-bg { stroke: var(--track); stroke-width: 3; }
.ring-fg { stroke: var(--tint); stroke-linecap: round; }
.ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(2.6rem * var(--u)); font-size: min(calc(2.6rem * var(--u)), 38cqi); font-weight: 700; font-variant-numeric: tabular-nums;
}
.ring.large .ring-num { font-size: calc(4.2rem * var(--u)); font-size: min(calc(4.2rem * var(--u)), 36cqi); }

.centered { text-align: center; padding: 8px 12px; }
.centered h1 { font-size: calc(1.8rem * var(--u)); font-weight: 700; margin-bottom: 6px; }
.centered p { color: var(--label2); }
.big-check {
  width: 96px; height: 96px; border-radius: 50%; background: var(--good); color: var(--on-good);
  display: grid; place-items: center; margin: 32px auto 20px;
}
.big-check svg { width: 48px; height: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .big-check { animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } }
}

/* ---------- notă de siguranță ---------- */

.stop-note {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px;
  padding: 12px 14px; border-radius: 12px; background: var(--warn-soft);
  font-size: calc(.88rem * var(--u)); line-height: 1.38;
}
.stop-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--warn); stroke-width: 2; stroke-linecap: round; }

/* ---------- ecrane scurte (iPhone SE, ferestre mici): antrenamentul încape fără suprapuneri ---------- */

@media (max-height: 720px) {
  .stage.compact { max-height: 24vh; max-height: 24svh; padding: 6px; }
  .p-body { gap: 8px; padding-bottom: 8px; }
  .p-phase { font-size: calc(1.05rem * var(--u)); }
  .count-num { font-size: calc(2.6rem * var(--u)); }
  .ring { width: calc(5.4rem * var(--u)); }
  .ring-num { font-size: calc(2.1rem * var(--u)); font-size: min(calc(2.1rem * var(--u)), 38cqi); }
  .btn.big { min-height: 54px; font-size: calc(1.1rem * var(--u)); }
  .btn { min-height: 46px; }
  .btn.plain { min-height: 44px; }
  .p-hint { font-size: calc(.82rem * var(--u)); }
  .p-actions { padding-top: 8px; gap: 4px; }
}

/* ---------- telefon culcat pe orizontală, sprijinit lângă saltea ----------
   Animația stă în stânga, pe toată înălțimea; textul, contorul și butoanele în dreapta. */

@media (orientation: landscape) and (max-height: 500px) {
  body.immersive .screen { max-width: none; }
  .player { max-width: 640px; width: 100%; margin: 0 auto; }

  /* prezentarea exercițiului și setul: scena fixă în stânga */
  .player:has(> .p-body > .stage) {
    --stage-w: 46vw;
    --edge: max(16px, env(safe-area-inset-left));
    max-width: none;
    padding-left: calc(var(--stage-w) - var(--edge) + 20px);
  }
  .player:has(> .p-body > .stage) > .p-body > .stage {
    position: fixed; z-index: 1;
    /* înălțime explicită: altfel raportul de aspect pus de figure.js ar scurta scena */
    top: calc(env(safe-area-inset-top) + 12px);
    left: var(--edge);
    width: calc(var(--stage-w) - var(--edge));
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
    height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
    max-height: none;
  }

  /* pauza: inelul și textul în stânga, butoanele în dreapta */
  .player:has(.ring.large) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px;
    align-content: start; max-width: none;
  }
  /* în set, mesajul despre ecran ar împinge inelul și contorul sub butoanele fixate; rămâne vizibil la prezentare și în pauză */
  .player:has(> .p-body > .stage.compact) > .p-banner { display: none; }
  .player:has(.ring.large) > .p-top, .player:has(.ring.large) > .p-banner { grid-column: 1 / -1; }
  .player:has(.ring.large) > .p-body { grid-column: 1; }
  .player:has(.ring.large) > .p-actions { grid-column: 2; align-self: center; position: static; background: none; }

  /* setul fără cronometru: fazele, contorul, pozițiile și numărarea automată în stânga coloanei, butoanele alături.
     Fixate jos, butoanele ar fi acoperit contorul și comutatorul (coloana are doar ~375 px înălțime). */
  .player:has(> .p-body > .stage.tap-target) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 12px; row-gap: 4px;
    grid-template-areas: "top top" "set set" "phase act" "count act" "steps act" "auto act" ". act";
    grid-template-rows: repeat(6, auto) 1fr;
    align-content: start;
  }
  .player:has(> .p-body > .stage.tap-target) > .p-body { display: contents; }
  .player:has(> .p-body > .stage.tap-target) > .p-top { grid-area: top; margin-bottom: 0; }
  .player:has(> .p-body > .stage.tap-target) > .p-body > .p-set { grid-area: set; }
  /* litera fazei rămâne lângă text (pe coloana îngustă nu mai trece pe un rând separat) */
  .player:has(> .p-body > .stage.tap-target) > .p-body > .p-phase { grid-area: phase; flex-wrap: nowrap; gap: 8px; }
  .player:has(> .p-body > .stage.tap-target) > .p-body > .count { grid-area: count; }
  .player:has(> .p-body > .stage.tap-target) > .p-body > .phase-steps { grid-area: steps; }
  /* coloane înguste: textul comutatorului și starea lui se rup pe rânduri, fără să iasă din chenar */
  .player:has(> .p-body > .stage.tap-target) > .p-body > .p-auto {
    grid-area: auto; flex-wrap: wrap; justify-content: center; row-gap: 4px; column-gap: 8px;
    padding: 8px 10px; text-align: center;
  }
  .player:has(> .p-body > .stage.tap-target) > .p-actions {
    grid-area: act; align-self: start; position: static; background: none;
    padding: 0 0 calc(env(safe-area-inset-bottom) + 4px);
  }
  .player:has(> .p-body > .stage.tap-target) > .p-actions .btn { padding-left: 8px; padding-right: 8px; }
  .player:has(> .p-body > .stage.tap-target) > .p-actions .p-hint { padding: 0 2px 2px; }
  .ring.large { width: calc(9rem * var(--u)); max-width: 38svh; margin: 4px auto; }
  .centered { padding: 4px 8px; }
  .centered h1 { font-size: calc(1.5rem * var(--u)); margin-bottom: 2px; }
  .big-check { width: 72px; height: 72px; margin: 12px auto; }
  .big-check svg { width: 36px; height: 36px; }
}

/* ---------- mișcare redusă ---------- */

/* Mișcarea (deplasare, scalare) se oprește; schimbările de culoare și de opacitate rămân, ca atingerea să dea totuși un semn vizibil. */
@media (prefers-reduced-motion: reduce) {
  .btn, .stage.tap-target { transition: opacity .15s, background-color .15s; }
  .switch i::after { transition: none; }
  .btn:active, .stage.tap-target:active { transform: none; }
}