/* ================================================================
   HomeFit App v7 — css/schema.css (F2)
   Schema-weergave (klant), WYSIWYG-editor (coach), sessiegenerator,
   sjablonen/geschiedenis en de workout-speler.
   Laadt ná app.css (tokens + gedeelde componenten van F1).
   Eigen klassen: .sch-* .ed-* .gen-*  — bestaande klassen (.daycard .pexrow
   .genbar .speler .rusttimer .sp-setrow .sp-vink .doelchip .progmeta) worden
   hier alleen aangevuld/overschreven. Kleuren uitsluitend via tokens.
   Mobiel-first; alle raakvlakken ≥44px; focus-visible ook op contenteditable.
   ================================================================ */

/* ---- fallbacks met nul-specificiteit: app.css (F1) wint altijd ---- */
:where(.sch-bar){bottom:calc(12px + env(safe-area-inset-bottom,0px))}
:where(.grow){flex:1;min-width:0}
:where(.sp){flex:1}

/* ================= 1. KOP VAN HET SCHEMA ================= */
.sch{padding-bottom:4px}
.sch-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2, 8px);margin:0 0 var(--s3, 12px)}
.sch-blok{order:-1;flex:none}
.sch-title{font-size:var(--fs-l, 18px);font-weight:800;letter-spacing:-.01em;margin:0;flex:1 1 100%;min-width:0;line-height:1.3}
.sch-mode-edit .sch-title{flex:1 1 220px}
.sch-upd{flex:1 1 100%;color:var(--ink3)}

.sch-notes{display:flex;gap:var(--s2, 8px);align-items:flex-start;margin:0 0 var(--s4, 16px)}
.progmeta.sch-notes{white-space:normal}
.sch-notes .ico{color:var(--orange-text);flex:none;margin-top:2px}
.sch-notes>span{min-width:0;white-space:pre-wrap}

/* ================= 2. DAGKAART ================= */
.sch-day{margin-bottom:var(--s3, 12px)}
.sch-day .dh{gap:var(--s2, 8px);flex-wrap:wrap}
.sch-day .dh .dn{min-width:120px}
.sch-day .dl{padding-bottom:var(--s2, 8px)}
.sch-day-leeg{border-color:var(--orange-line)}
.sch-day-leeg .dh{background:var(--orange-soft)}

.sch-dur{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:var(--fs-xs, 12px);font-weight:700;color:var(--ink3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sch-dur .ico{color:var(--ink4)}
.sch-dur-t{display:inline-flex;align-items:center;gap:2px}
.sch-start{flex:none}

/* sectie-subkop: smallcaps, rustig */
.sch-sec{
  font-size:var(--fs-2xs, 11px);font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);padding:var(--s3, 12px) 0 var(--s1, 4px);
  display:flex;align-items:center;gap:var(--s2, 8px);
}
.sch-sec::after{content:"";flex:1;height:1px;background:var(--line2)}
.sch-sec:first-child{padding-top:var(--s2, 8px)}
.sch-sec-none{color:var(--ink4)}

.sch-leeg{
  display:flex;align-items:center;gap:var(--s2, 8px);
  font-size:var(--fs-s, 13px);color:var(--orange-text);font-weight:700;
  padding:var(--s3, 12px) 0;
}
.sch-leeg .ico{flex:none}

.sch-dayfoot{padding:0 var(--s4, 16px) var(--s3, 12px)}
.sch-dayfoot .addline{margin-top:var(--s2, 8px)}
.sch-addday{margin-top:var(--s4, 16px)}
.sch-foot{margin-top:var(--s4, 16px);line-height:1.6}
.sch-disc{
  display:flex;gap:6px;align-items:flex-start;
  font-size:var(--fs-xs, 12px);color:var(--ink3);line-height:1.5;
  margin:var(--s5, 24px) 0 var(--s2, 8px);
}
.sch-disc .ico{flex:none;margin-top:1px;color:var(--ink4)}
.sch-disc-sm{margin:var(--s4, 16px) 0 0;font-size:var(--fs-2xs, 11px)}

/* ================= 3. OEFENINGREGEL (weergave) ================= */
.sch .pexrow{padding:10px 0;gap:8px}
.sch .pexrow .pxn{min-width:130px;line-height:1.45}
.sch .pexrow .pxs{font-variant-numeric:tabular-nums;letter-spacing:.005em}

.sch-tip{
  display:flex;gap:6px;align-items:flex-start;width:100%;
  font-size:var(--fs-xs, 12px);color:var(--ink2);line-height:1.5;margin-top:2px;
}
.sch-tip .ico{flex:none;margin-top:2px;color:var(--orange-text)}
.sch-tiptx{
  min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  line-clamp:2;overflow:hidden;
}
.sch-tip.open .sch-tiptx{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.sch-more{
  position:relative;border:0;background:none;padding:0 2px;cursor:pointer;flex:none;
  color:var(--orange-text);font-weight:800;font-size:var(--fs-xs, 12px);font-family:inherit;
}
.sch-more::after{content:"";position:absolute;inset:-15px -8px} /* tikdoel 45px hoog (14/9/2026) */
.sch-more:hover{text-decoration:underline}

/* ================= 4. EDITOR — contenteditable velden ================= */
.ed{
  display:inline-block;min-width:2.2em;max-width:100%;
  border:1.5px solid transparent;border-radius:var(--r-xs, 8px);
  padding:5px 7px;margin:-3px -3px;
  background:transparent;color:inherit;font:inherit;line-height:1.4;
  overflow-wrap:anywhere;white-space:pre-wrap;cursor:text;
  transition:background .14s,border-color .14s,box-shadow .14s;
}
.ed:hover{background:var(--line2)}
.ed:focus{outline:none;background:var(--field);border-color:var(--orange);box-shadow:0 0 0 3px var(--focus-ring)}
.ed:focus-visible{outline:none}
.ed:empty::before{content:attr(data-ph);color:var(--ink4);font-weight:500}
.ed.ed-warn{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-ring)}
/* raakvlak: elk bewerkbaar veld haalt minstens 44px, ook de kleine cijfers */
.sch-title .ed,.sch-day-edit .dh .dn .ed,.sch-day-edit .sch-dur .ed{
  min-height:44px;display:inline-flex;align-items:center;
}
.sch-day-edit .sch-dur .ed{padding:4px 6px;margin:0;justify-content:center}
.ed-num{text-align:center;min-width:2.6em;font-variant-numeric:tabular-nums}

.ed-lab{
  display:block;font-size:var(--fs-2xs, 11px);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:2px;
}
.ed-lab .ico{vertical-align:-2px;color:var(--ink4)}

.ed-notes{
  display:block;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-s, 12px);
  padding:10px 12px;margin:0 0 var(--s4, 16px);
}
.ed-notes .ed{display:block;min-height:44px;width:100%;margin:0}

.sch-day-edit .dh{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.sch-day-edit .dh .dn{flex:1 1 140px;font-weight:800}
.sch-day-edit .dh .dn .ed{width:100%}
.sch-day-edit .dh .sch-dur{align-self:center}

.pexrow.ed-row{
  display:block;padding:12px;margin:8px 0;
  border:1px solid var(--line2);border-bottom:1px solid var(--line2);
  border-radius:var(--r-s, 12px);background:var(--bg);
}
.pexrow.ed-row:last-of-type{border-bottom:1px solid var(--line2)}
.ed-line1{position:relative;display:flex;align-items:center;gap:var(--s2, 8px)}
.ed-name{
  flex:1;min-width:0;font-weight:800;font-size:var(--fs-m, 15px);
  border-color:var(--line);background:var(--field);min-height:44px;
  display:flex;align-items:center;margin:0;
}
.ed-menu{flex:none}

.ed-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--s2, 8px);margin-top:10px}
.ed-cell{display:block;min-width:0}
.ed-cell .ed{
  display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;margin:0;
  border-color:var(--line);background:var(--field);font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums;
}
.ed-tipwrap{margin-top:10px}
.ed-tipwrap .ed{
  display:block;width:100%;min-height:44px;margin:0;
  border-color:var(--line);background:var(--field);
  font-size:var(--fs-s, 13px);font-weight:500;color:var(--ink2);
}
.pexrow.ed-row .exhist,.pexrow.ed-row .adv{margin-top:8px}

/* suggestielijst onder de oefeningnaam */
.sch-sug{
  position:absolute;top:calc(100% + 4px);left:0;right:52px;z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-s, 12px);
  box-shadow:var(--shadow-lg);overflow:hidden;max-height:min(46vh, 330px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.sch-sugi{
  display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:11px 13px;min-height:44px;font-size:var(--fs-s, 13px);font-weight:600;color:var(--ink);
  font-family:inherit;border-bottom:1px solid var(--line2);
}
.sch-sugi:last-child{border-bottom:0}
.sch-sugi:hover{background:var(--orange-soft);color:var(--orange-text)}
.sch-sugi:focus-visible,.sch-more:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;background:var(--orange-soft);color:var(--orange-text)}

/* ================= 5. STICKY WERKBALK ================= */
.sch-bar{padding:8px 10px;gap:6px}
.sch-barsp{flex:1;min-width:0}
.sch-statwrap{display:inline-flex;align-items:center;min-width:0}
.sch-stat{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:var(--fs-xs, 12px);font-weight:800;color:var(--ink3);
  border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 10px;
}
.sch-stat .ico{flex:none}
.sch-stat.dirty{color:var(--orange-text);border-color:var(--orange-line);background:var(--orange-soft)}
.sch-stat.ok{color:var(--good);border-color:var(--good-line);background:var(--good-soft)}
.sch-stat.busy .ico{animation:sch-spin .8s linear infinite}
@keyframes sch-spin{to{transform:rotate(360deg)}}
.sch-flip{transform:scaleX(-1)}
.sch-bar .iconbtn:disabled{opacity:.35}
.sch-prevbtn{flex:none}
.sch-prevbtn.on{color:var(--orange-text);border-color:var(--orange-line);background:var(--orange-soft)}
@media(max-width:539px){
  .sch-statwrap{flex:1 1 100%;order:-1;margin-bottom:2px}
  .sch-barsp{display:none}
  .sch-bar .btn-sm{padding:8px 12px}
}

.sch-draft,.sch-prevbar{display:flex;align-items:center;gap:var(--s2, 8px);margin-bottom:var(--s3, 12px)}
.sch-draft .ico,.sch-prevbar .ico{flex:none}
.sch-draft .btn,.sch-prevbar .btn{flex:none}

/* ================= 6. GENERATOR ================= */
.genbar{flex-wrap:wrap;gap:var(--s3, 12px);align-items:center}
.gen-txt{flex:1 1 220px;min-width:0}
.genbar .gt{display:flex;align-items:center;gap:6px}
.genbar .gt .ico{color:var(--orange-text)}
.genbar .gs{margin-top:2px;line-height:1.45}
.gen-acts{display:flex;flex-wrap:wrap;gap:var(--s2, 8px)}
.gen-acts .btn{flex:none}
@media(max-width:479px){
  .gen-acts{width:100%}
  .gen-acts .btn{flex:1 1 auto;justify-content:center}
}
.gen-lc{text-transform:none;font-weight:600;color:var(--ink3);letter-spacing:0}
.gen-presets{display:flex;flex-wrap:wrap;gap:var(--s2, 8px);margin:2px 0 var(--s2, 8px)}
.gen-check{margin-top:var(--s4, 16px);border-top:1px solid var(--line2);padding-top:var(--s3, 12px)}
.genopt .gopt{min-height:44px}

/* ================= 7. SJABLONEN / GESCHIEDENIS ================= */
.sch-row2{display:flex;align-items:center;gap:var(--s2, 8px)}
.sch-row2 .kopt{flex:1;min-width:0}
.sch-row2 .iconbtn{flex:none}
.sch-hist{
  border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--card);
}
.sch-hist.on{border-color:var(--good-line);background:var(--good-soft)}
.sch-histmeta{flex:1;min-width:0}
.sch-histmeta b{display:block;font-size:var(--fs-s, 13px);font-weight:800;overflow-wrap:anywhere}
.sch-histmeta .k-sub{display:block;font-size:var(--fs-xs, 12px);color:var(--ink3);font-weight:600;margin-top:1px}
.sch-metachips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 var(--s3, 12px)}
.sch-tiptext{font-size:14.5px;line-height:1.7;padding:0 0 var(--s2, 8px);color:var(--ink2)}

/* ================= 8. HERVAT-BANNER ================= */
.sch-resume{
  display:flex;align-items:center;gap:var(--s3, 12px);
  border-color:var(--orange-line);background:var(--orange-soft);
  margin-bottom:var(--s3, 12px);
}
.sch-resume>.grow{display:flex;flex-direction:column;min-width:0}
.sch-resume b{font-size:var(--fs-m, 15px);font-weight:800}
.sch-resume .small{overflow-wrap:anywhere}
.sch-resume-ic{
  flex:none;width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--orange-btn);color:#fff;
}
.sch-resume .btn,.sch-resume .iconbtn{flex:none}
@media(max-width:439px){
  .sch-resume{flex-wrap:wrap}
  .sch-resume>.grow{flex:1 1 100%;order:1}
  .sch-resume .btn{flex:1;order:2}
}

/* ================= 9. WORKOUT-SPELER ================= */
.speler-top{gap:var(--s3, 12px)}
.sch-sp-teller{font-weight:800;font-variant-numeric:tabular-nums;flex:none;color:var(--ink2)}
.speler .doelchip{min-height:30px;display:inline-flex;align-items:center;gap:4px}
.speler .doelchip .ico{color:var(--ink3)}
.sch-spnote{display:flex;gap:6px;align-items:flex-start;max-height:30vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sch-spnote .ico{flex:none;margin-top:2px;color:var(--orange-text)}
.sch-spinfo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--s2, 8px)}
/* eigen notitie per oefening (26/9/2026) + wat de klant vorige keer noteerde */
.sch-vorignote{display:flex;gap:6px;align-items:flex-start;background:var(--blue-soft);border-color:var(--blue-line)}
.sch-vorignote .ico{flex:none;margin-top:2px;color:var(--blue-text)}
.sch-notebtn{margin-top:var(--s3, 12px);min-height:40px}
.sch-mynote{margin-top:var(--s3, 12px);padding:10px 12px;border:1.5px solid var(--orange-line);background:var(--orange-soft);border-radius:var(--r-s, 12px)}
.sch-mynote .ed-lab{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.sch-mynote textarea{width:100%;min-height:58px;resize:vertical;background:var(--field)}
.sch-mynote-v{display:flex;gap:6px;align-items:flex-start;width:100%;font-size:var(--fs-xs);color:var(--ink2);
  background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:10px;padding:6px 10px;margin-top:6px}
.sch-mynote-v .ico{flex:none;margin-top:1px;color:var(--orange-text)}
.sch-mynote-v>span{min-width:0;white-space:pre-wrap}
.speler .doelchip.sch-coachw{border-color:var(--orange-line);background:var(--orange-soft);color:var(--orange-text)}
.speler .doelchip.sch-coachw .ico{color:var(--orange-text)}
.sch-setlist{margin-top:var(--s4, 16px)}
.sch-sethead{margin-top:0}
.sch-sethead .tiny{text-align:center}
.sp-setrow .sp-vink{min-width:52px;min-height:48px}
/* vorige keer per set + live verschil (uitgelijnd met de gewichtskolom: 44px + 10px gap) */
.sp-prev{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:3px 0 0 54px;font-size:var(--fs-xs);color:var(--ink3);font-variant-numeric:tabular-nums}
.sp-prev b{color:var(--ink2);font-weight:700}
.sp-d{font-weight:800;border-radius:999px;padding:0 8px}
.sp-d.up{color:var(--good);background:var(--good-soft)}
.sp-d.down{color:var(--ink2);border:1px solid var(--line)}
.sp-vink .ico{width:22px;height:22px}
.sp-vink.on{color:#fff}
.speler-nav{gap:var(--s2, 8px)}
.sch-navbtn{flex:1;justify-content:center;min-height:52px}
.sch-navbtn.sch-dim{opacity:.72}
.sch-klaarnu{display:flex;width:100%;justify-content:center;margin-top:var(--s2, 8px)}
.sch-sptip{text-align:center;margin-top:var(--s4, 16px);line-height:1.5}
.rusttimer{gap:var(--s2, 8px);flex-wrap:wrap}
.rusttimer button{min-height:44px}
/* v10: oefening op tijd — Start/Stop in de setrij (de houdklok zelf gebruikt het rustvak) */
.sp-tijdrij .sp-houd{min-height:48px;justify-content:center;padding:0 10px;font-size:15px;white-space:nowrap}

/* ================= 10. SAMENVATTING + DEELKAART ================= */
.sch-sum{padding:2px 0}
.sch-sumgrid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--s2, 8px)}
.sch-sumtile{
  background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-s, 12px);
  padding:14px 12px;text-align:center;
}
.sch-sumtile b{display:block;font-size:24px;font-weight:800;color:var(--orange-text);font-variant-numeric:tabular-nums}
.sch-sumtile small{display:block;font-size:var(--fs-2xs, 11px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:2px}
.sch-sumpr{
  display:flex;gap:8px;align-items:flex-start;margin-top:var(--s3, 12px);
  border:1px solid var(--good-line);background:var(--good-soft);color:var(--good);
  border-radius:var(--r-s, 12px);padding:10px 12px;font-size:var(--fs-s, 13px);font-weight:700;line-height:1.5;
}
.sch-sumpr .ico{flex:none;margin-top:1px}

/* ================= 10b. OEFENING AFGEWERKT — VIERING =================
   Ligt boven de speler (z-index 120) maar onder de confetti-canvas (299). Vangt
   tikken op zodat de klant er meteen doorheen kan; verdwijnt anders vanzelf. */
.spdone-wrap{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;pointer-events:none}
.spdone-wrap:empty{display:none}
.spdone{
  pointer-events:auto;cursor:pointer;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l, 22px);
  box-shadow:0 24px 60px rgba(15,23,42,.28);
  padding:26px 30px 22px;max-width:min(320px, 82vw);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:spdone-in .34s cubic-bezier(.2,.9,.3,1.35) both;
}
.spdone b{font-size:var(--fs-l, 18px);margin-top:4px}
.spdone span{font-size:var(--fs-s, 13px);color:var(--ink2);line-height:1.45}
.spdone-wrap.uit .spdone{animation:spdone-uit .26s ease-in both}
.spdone-ring{width:76px;height:76px;overflow:visible}
.spdone-ring .ring{
  fill:none;stroke:var(--good);stroke-width:3;opacity:.28;
  stroke-dasharray:145;stroke-dashoffset:145;transform:rotate(-90deg);transform-origin:50% 50%;
  animation:spdone-ring .5s ease-out .05s forwards;
}
.spdone-ring .vink{
  fill:none;stroke:var(--good);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;
  animation:spdone-vink .34s cubic-bezier(.65,0,.35,1) .34s forwards;
}
@keyframes spdone-in{from{opacity:0;transform:scale(.82) translateY(14px)}to{opacity:1;transform:none}}
@keyframes spdone-uit{to{opacity:0;transform:scale(.94)}}
@keyframes spdone-ring{to{stroke-dashoffset:0;opacity:.4}}
@keyframes spdone-vink{to{stroke-dashoffset:0}}

/* de knop die na de viering logisch volgt even laten ademen */
.sp-puls{animation:sp-puls 1s ease-in-out 2}
@keyframes sp-puls{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(249,115,22,.5)}50%{transform:scale(1.03);box-shadow:0 0 0 10px rgba(249,115,22,0)}}

/* ================= 11. GROTERE SCHERMEN ================= */
@media(min-width:600px){
  .ed-grid{grid-template-columns:repeat(6, minmax(0,1fr))}
  .sch-title{font-size:22px}
}
@media(min-width:760px){
  .pexrow.ed-row{padding:14px}
  .sch-sumgrid{grid-template-columns:repeat(4, minmax(0,1fr))}
}

/* ================= 12. REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  .sch-day,.sch-resume,.genbar{animation:none;opacity:1}
  .sch-stat.busy .ico{animation:none}
  .ed{transition:none}
  /* de boodschap blijft, de beweging niet — anders weet je niet dat het geregistreerd is */
  .spdone,.spdone-wrap.uit .spdone,.sp-puls{animation:none}
  .spdone-ring .ring{stroke-dashoffset:0;opacity:.4;animation:none}
  .spdone-ring .vink{stroke-dashoffset:0;animation:none}
}

/* 27/9/2026: meer dan 2 gewone sets (regel van Lukas) — waarschuwt in de editor, blokkeert niets */
.ed-setwarn{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:8px 10px;border-radius:10px;
  background:var(--orange-soft);border:1px solid var(--orange-line);color:var(--orange-text);font-size:var(--fs-xs);line-height:1.45}
.ed-setwarn .ico{flex:none;margin-top:1px}