/* Recovery, day by day. Works with styles.css and page.css. */
.recovery{--rec-thumb:32px;--rec-frac:0}

.rec-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.rec-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.4vw,36px)}

/* Without script: the slider and print button stay hidden and every day is listed */
.rec-nojs-note{margin:0 0 4px;color:var(--muted)}
.recovery.rec-js .rec-nojs-note{display:none}
.recovery:not(.rec-js) .rec-controls{display:none}
.recovery:not(.rec-js) .rec-grid{grid-template-columns:1fr}
.recovery:not(.rec-js) .rec-day{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.recovery:not(.rec-js) .rec-day:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.recovery.rec-js .rec-day[hidden]{display:none}

/* label */
.rec-label{display:block;font-weight:600;color:var(--navy);font-size:1.05rem;margin-bottom:6px}
.rec-label span{font-weight:400;color:var(--muted);font-size:.88rem;margin-left:4px}

/* the curve, drawn directly above the slider so the marker moves along it */
.rec-curve{position:relative;height:clamp(120px,13vw,190px);margin:14px 0 0;padding:14px 0 10px}
.rec-curve::before{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--line)}
.rec-svg{position:absolute;left:calc(var(--rec-thumb) / 2);right:calc(var(--rec-thumb) / 2);top:14px;bottom:10px;width:calc(100% - var(--rec-thumb));height:calc(100% - 24px);overflow:visible}
.rec-line{stroke:var(--teal-d);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rec-line-tail{stroke-dasharray:3 7;stroke:#7fb7c4}
.rec-axis{position:absolute;left:0;z-index:1;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;background:rgba(255,255,255,.8);padding:0 4px 0 0}
.rec-axis-top{top:0}
.rec-axis-bottom{bottom:14px}
.rec-dot{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--navy);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  left:calc(var(--rec-thumb) / 2 + var(--rec-frac) * (100% - var(--rec-thumb)));top:50%;
  transition:left .35s cubic-bezier(.3,.7,.2,1),top .35s cubic-bezier(.3,.7,.2,1)}
.rec-dot::after{content:"";position:absolute;inset:6px;background:#fff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

/* slider */
.rec-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--rec-thumb);margin:6px 0 0;background:transparent;cursor:pointer;border-radius:8px;
  --rec-stop:calc(var(--rec-thumb) / 2 + var(--rec-frac) * (100% - var(--rec-thumb)))}
.rec-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--navy) 0,var(--navy) var(--rec-stop),#d6e0ee var(--rec-stop),#d6e0ee 100%)}
.rec-range::-moz-range-track{height:6px;border-radius:3px;background:#d6e0ee}
.rec-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--navy)}
.rec-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--rec-thumb);height:var(--rec-thumb);margin-top:calc((6px - var(--rec-thumb)) / 2);border:0;border-radius:0;
  background:var(--navy);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background .2s}
.rec-range::-moz-range-thumb{width:var(--rec-thumb);height:var(--rec-thumb);border:0;border-radius:0;background:var(--navy);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:background .2s}
.rec-range:hover::-webkit-slider-thumb{background:var(--navy-2)}
.rec-range:hover::-moz-range-thumb{background:var(--navy-2)}
.rec-range:focus{outline:none}
.rec-range:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.rec-range:focus-visible::-webkit-slider-thumb{background:var(--teal-d)}
.rec-range:focus-visible::-moz-range-thumb{background:var(--teal-d)}

.rec-ticks{position:relative;height:2.4rem;margin-top:2px}
.rec-ticks span{position:absolute;top:0;transform:translateX(-50%);min-width:2.6rem;text-align:center;padding:6px 0;font-size:.95rem;color:var(--muted);cursor:pointer;font-weight:500;
  left:calc(var(--rec-thumb) / 2 + var(--p) * (100% - var(--rec-thumb)))}
.rec-ticks span.on{color:var(--navy);font-weight:700}
.rec-ticks-key{margin:0 0 18px;font-size:.85rem;color:var(--muted)}
.rec-curve-note{margin:0;padding:12px 16px;border-left:4px solid var(--teal);background:var(--soft);font-size:.92rem;color:#2c3e50;border-radius:0 var(--radius) var(--radius) 0}
.rec-curve-note b{color:var(--navy)}

/* the day panel */
.rec-panel{border-top:4px solid var(--teal);display:flex;flex-direction:column;justify-content:center}
.recovery.rec-js .rec-day{animation:rec-in .35s ease both}
@keyframes rec-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rec-phase{margin:0 0 8px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);font-weight:700}
.rec-day h3{margin:0 0 12px;font-weight:300;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.05;color:var(--navy)}
.rec-lead{margin:0 0 20px;font-size:1.08rem;color:#2c3e50}
.rec-facts{list-style:none;margin:0 0 20px;padding:0}
.rec-facts li{display:grid;grid-template-columns:minmax(7.5rem,.38fr) 1fr;gap:4px 18px;padding:14px 0;border-top:1px solid var(--line)}
.rec-facts li:last-child{border-bottom:1px solid var(--line)}
.rec-facts b{color:var(--navy);font-weight:600}
.rec-facts span{color:#2c3e50}
.rec-gap{margin:0;color:var(--muted);font-size:.95rem}
.rec-gap a{color:var(--navy);font-weight:600}

/* questions + print */
.rec-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(20px,3vw,48px);align-items:stretch}
.rec-questions h3,.rec-print h3{margin:0 0 12px;color:var(--navy);font-weight:500;font-size:1.25rem}
.rec-questions ul{list-style:none;margin:0;padding:0}
.rec-questions li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--line)}
.rec-questions li:first-child{border-top:0}
.rec-questions li::before{content:"";position:absolute;left:2px;top:1.05em;width:10px;height:10px;background:var(--teal);clip-path:polygon(0 0,100% 50%,0 100%)}
.rec-print{align-self:center}
.rec-print p{margin:0 0 20px;color:var(--muted);max-width:480px}
.rec-print .btn[hidden]{display:none}

/* print sheet: off screen, shown only when the print button has been used */
.rec-sheet{display:none}
#recovery-print-root{display:none}

@media (max-width:980px){
  .rec-grid,.rec-row{grid-template-columns:1fr}
  .rec-panel{justify-content:flex-start}
}
@media (max-width:560px){
  .rec-label span{display:block;margin:2px 0 0}
  .rec-facts li{grid-template-columns:1fr}
  .rec-ticks span{min-width:0;width:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  .recovery.rec-js .rec-day{animation:none}
  .rec-dot,.rec-range::-webkit-slider-thumb,.rec-range::-moz-range-thumb{transition:none}
}

/* ---------- Print: one A4 page, built from the hidden sheet ---------- */
@page{size:A4;margin:12mm 14mm}
@media print{
  html.recovery-printing,html.recovery-printing body{background:#fff!important;font-size:10pt!important}
  html.recovery-printing body > *:not(#recovery-print-root){display:none!important}
  html.recovery-printing #recovery-print-root{display:block}
  #recovery-print-root .rec-sheet{display:block;color:#14212e;font-family:"Work Sans","Helvetica Neue",Arial,sans-serif;font-size:10pt;line-height:1.4}
  .rec-sheet p{margin:0}
  .rec-sheet .rs-head{display:flex;align-items:center;justify-content:space-between;gap:12mm;padding-bottom:4mm;border-bottom:1.5pt solid #1d3f71}
  .rec-sheet .rs-head img{height:17mm;width:auto}
  .rec-sheet .rs-head div{text-align:right;font-size:9.5pt;color:#2c3e50}
  .rec-sheet .rs-name{font-weight:600;font-size:12pt;color:#1d3f71}
  .rec-sheet h1,.rec-sheet .rs-title{font-weight:300;font-size:21pt;line-height:1.15;color:#1d3f71;margin:6mm 0 2mm}
  .rec-sheet .rs-intro{color:#5b6b7b;margin-bottom:5mm}
  .rec-sheet h2{font-size:9pt;letter-spacing:.12em;text-transform:uppercase;color:#1a8aa1;font-weight:700;margin:5mm 0 1.5mm}
  .rec-sheet .rs-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm}
  .rec-sheet .rs-cols > div{border-top:2pt solid #26aac3;padding-top:1.5mm}
  .rec-sheet .rs-cols h2{margin-top:0}
  .rec-sheet .rs-curve{margin:5mm 0 0;break-inside:avoid}
  .rec-sheet .rs-curve svg{display:block;width:100%;height:22mm;border-bottom:.75pt solid #c9d6e3}
  .rec-sheet .rs-days{position:relative;height:5mm;font-size:8.5pt;color:#5b6b7b;margin-top:1mm}
  .rec-sheet .rs-days span{position:absolute;top:0}
  .rec-sheet .rs-days span:nth-child(1){left:0}
  .rec-sheet .rs-days span:nth-child(2){left:85.714%;transform:translateX(-50%)}
  .rec-sheet .rs-days span:nth-child(3){right:0}
  .rec-sheet figcaption{font-size:9pt;font-weight:600;color:#1d3f71;margin-top:1mm}
  .rec-sheet .rs-q{margin:0;padding-left:5mm}
  .rec-sheet .rs-q li{margin:1mm 0}
  .rec-sheet .rs-lines i{display:block;height:8mm;border-bottom:.75pt solid #c9d6e3}
  .rec-sheet .rs-disc{margin-top:5mm;padding-top:3mm;border-top:.75pt solid #c9d6e3;font-size:8.5pt;color:#5b6b7b}
  .rec-sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}