/* ============================================================
   MEDSY — CLINICAL & STUDY COMPONENTS
   Med-ed specific: retention heatmap, case stepper, exam timer,
   confidence rating, score report, lab panel, drug card, OSCE
   checklist. All token-driven — light & dark ready.
   ============================================================ */

/* ---------- RETENTION HEATMAP ---------- */
/* The grid is fluid: cells divide the available width (capped so a wide card
   doesn't inflate them into blobs) and the legend is held to the same measure,
   so it reads as the grid's key rather than a stray right-aligned line.
   --cl-heat-weeks is set inline by the component. */
.cl-heat{display:flex;flex-direction:column;gap:12px;container-type:inline-size}
.cl-heat-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cl-heat-title{font-weight:var(--fw-semibold);color:var(--text-strong);font-size:.95rem}
.cl-heat-streak{font-family:var(--f-caps);font-size:.72rem;color:var(--forest);font-weight:700;letter-spacing:.04em}
.cl-heat-wrap{display:flex;gap:8px;align-items:stretch;max-width:calc(var(--cl-heat-weeks,22) * 21px + 42px)}
.cl-heat-days{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:clamp(2px,.45cqi,4px);font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em}
.cl-heat-days span{display:flex;align-items:center}
.cl-heat-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,minmax(0,1fr));grid-auto-columns:minmax(0,1fr);gap:clamp(2px,.45cqi,4px);flex:1;min-width:0;aspect-ratio:var(--cl-heat-weeks,22)/7}
.cl-heat-cell{min-width:0;border-radius:max(2px,18%);background:var(--surface-mist);transition: transform var(--dur-hover) var(--ease-standard)}
.cl-heat-legend .cl-heat-cell{width:12px;height:12px;border-radius:3px;flex:none}
.cl-heat-cell:hover{transform:scale(1.3)}
.cl-heat-cell[data-lvl="1"]{background:rgba(var(--mint-rgb),.28)}
.cl-heat-cell[data-lvl="2"]{background:rgba(var(--mint-rgb),.5)}
.cl-heat-cell[data-lvl="3"]{background:rgba(var(--mint-rgb),.75)}
.cl-heat-cell[data-lvl="4"]{background:var(--mint)}
.cl-heat-legend{display:flex;align-items:center;gap:4px;max-width:calc(var(--cl-heat-weeks,22) * 21px + 42px);font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint);justify-content:flex-end}
.cl-heat-legend .cl-heat-cell{cursor:default}
.cl-heat-legend .cl-heat-cell:hover{transform:none}

/* ---------- CASE STEPPER ---------- */
.cl-case{display:grid;grid-template-columns:212px 1fr;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);box-shadow:var(--shadow-sm);overflow:hidden;min-height:300px}
.cl-case-rail{background:var(--mint-50);border-right:1px solid var(--line-soft);padding:18px 0;display:flex;flex-direction:column;gap:2px}
.cl-case-phase{display:flex;align-items:center;gap:11px;padding:9px 18px;font-size:.86rem;font-weight:var(--fw-semibold);color:var(--ink-faint);position:relative}
.cl-case-dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;background:var(--surface-card);flex:none;transition: var(--dur-control) var(--ease-standard)}
.cl-case-dot svg{width:13px;height:13px}
.cl-case-phase.done{color:var(--ink-soft)}
.cl-case-phase.done .cl-case-dot{background:var(--forest);border-color:var(--forest);color:#fff}
[data-theme="dark"] .cl-case-phase.done .cl-case-dot{color:#07130D}
.cl-case-phase.active{color:var(--text-strong)}
.cl-case-phase.active .cl-case-dot{background:var(--mint);border-color:var(--mint);color:var(--forest-900);box-shadow:0 0 0 4px var(--mint-100)}
.cl-case-body{padding:24px 28px;display:flex;flex-direction:column;min-width:0}
.cl-case-title{font-family:var(--f-display);font-weight:var(--fw-bold);font-size:1.25rem;letter-spacing:-.015em;color:var(--text-strong);margin:10px 0 8px}
.cl-case-text{color:var(--ink-soft);line-height:1.62;font-size:.95rem}
.cl-case-decision{margin-top:14px;padding:13px 16px;border:1px solid var(--line-mint);background:var(--mint-50);border-radius:var(--r-sm);font-size:.9rem;color:var(--text-body)}
.cl-case-decision b{color:var(--forest-700)}
.cl-case-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:20px}
.cl-case-prog{font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.1em;text-transform:uppercase}

/* ---------- EXAM TIMER ---------- */
.cl-timer{display:flex;align-items:center;gap:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);padding:16px 20px;box-shadow:var(--shadow-sm)}
.cl-timer-ring{position:relative;width:72px;height:72px;flex:none}
.cl-timer-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cl-timer-ring .tr{fill:none;stroke:var(--mint-100);stroke-width:7}
.cl-timer-ring .fl{fill:none;stroke:var(--forest);stroke-width:7;stroke-linecap:round;transition: stroke-dashoffset var(--dur-reveal) linear,stroke var(--dur-overlay)}
.cl-timer.is-critical .cl-timer-ring .fl{stroke:var(--danger)}
.cl-timer-main{flex:1;min-width:0}
.cl-timer-time{font-family:var(--f-display);font-weight:var(--fw-extrabold);font-size:1.55rem;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.01em}
.cl-timer.is-critical .cl-timer-time{color:var(--danger-ink)}
.cl-timer-label{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);margin-top:5px}
.cl-timer-pace{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:.76rem;font-weight:var(--fw-semibold);border-radius:var(--r-pill);padding:.3em .85em;line-height:1.2}
.cl-timer-pace.ok{background:var(--mint-100);color:var(--forest-700)}
.cl-timer-pace.behind{background:var(--butter);color:var(--warn-ink)}
.cl-timer-pace.critical{background:var(--danger-soft);color:var(--danger-ink)}
/* 44px is the touch-target floor — an exam control gets pressed on a tablet
   under time pressure. The glyph stays 16px; the target grows around it. */
.cl-timer-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface-card);color:var(--forest);cursor:pointer;display:grid;place-items:center;transition: var(--dur-hover) var(--ease-standard)}
.cl-timer-btn:hover{border-color:var(--line-mint);background:var(--mint-50)}
.cl-timer-btn svg{width:16px;height:16px}

/* ---------- CONFIDENCE METER ---------- */
.cl-conf{display:flex;flex-direction:column;gap:10px}
.cl-conf-q{font-size:.92rem;font-weight:var(--fw-semibold);color:var(--text-strong)}
.cl-conf-opts{display:flex;gap:8px}
.cl-conf-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--surface-card);cursor:pointer;font:inherit;color:var(--ink-faint);transition: var(--dur-hover) var(--ease-standard)}
.cl-conf-btn:hover{border-color:var(--line-mint);background:var(--mint-50);color:var(--ink-soft)}
.cl-conf-btn.sel{border-color:var(--forest);background:var(--mint-100);color:var(--forest-700);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.25)}
.cl-conf-bars{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.cl-conf-bars i{width:4px;border-radius:2px;background:currentColor;opacity:.3}
.cl-conf-btn.sel .cl-conf-bars i,.cl-conf-bars i.on{opacity:1}
.cl-conf-lab{font-size:.7rem;font-weight:var(--fw-semibold);letter-spacing:.01em}

/* ---------- SCORE REPORT ---------- */
.cl-score{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);box-shadow:var(--shadow-sm);padding:22px 24px}
.cl-score-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.cl-score-val{font-family:var(--f-display);font-weight:var(--fw-extrabold);font-size:2.7rem;color:var(--text-strong);line-height:.95;letter-spacing:-.02em}
.cl-score-val small{font-size:1.05rem;color:var(--ink-faint);font-weight:var(--fw-semibold);letter-spacing:0}
.cl-score-sub{font-size:.85rem;color:var(--ink-soft);margin-top:7px}
.cl-score-rows{display:flex;flex-direction:column;gap:13px}

/* ---------- LAB PANEL ---------- */
.cl-lab{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);box-shadow:var(--shadow-sm);overflow:hidden}
.cl-lab-caption{padding:14px 18px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px solid var(--line-soft)}
.cl-lab-title{font-weight:var(--fw-bold);color:var(--text-strong);font-size:.98rem}
.cl-lab-when{font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}
.cl-lab-row{display:grid;grid-template-columns:1.1fr .9fr 1.3fr 58px;gap:14px;align-items:center;padding:11px 18px;border-top:1px solid var(--line-soft);font-size:.9rem}
.cl-lab-row:first-of-type{border-top:none}
.cl-lab-hd{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);padding:10px 18px 8px;border-top:none}
.cl-lab-analyte{font-weight:var(--fw-semibold);color:var(--text-strong)}
.cl-lab-val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--text-strong)}
.cl-lab-val .u{color:var(--ink-faint);font-weight:500;font-size:.82em;margin-left:3px}
.cl-lab-range{position:relative;height:8px;border-radius:var(--r-pill);background:var(--surface-mist)}
.cl-lab-band{position:absolute;top:0;bottom:0;border-radius:var(--r-pill);background:rgba(var(--mint-rgb),.45)}
.cl-lab-mark{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--forest);border:2px solid var(--surface-card);transform:translate(-50%,-50%);box-shadow:var(--shadow-xs)}
.cl-lab-mark.hi{background:var(--danger)}
.cl-lab-mark.lo{background:var(--info-ink)}
.cl-lab-flag{justify-self:end;font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;letter-spacing:.07em;padding:.34em .75em;border-radius:var(--r-pill)}
.cl-lab-flag.norm{background:var(--mint-100);color:var(--forest-700)}
.cl-lab-flag.hi{background:var(--danger-soft);color:var(--danger-ink)}
.cl-lab-flag.lo{background:var(--sky);color:var(--info-ink)}

/* ---------- RX CARD ---------- */
.cl-rx{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);box-shadow:var(--shadow-sm);padding:20px 22px}
.cl-rx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.cl-rx-name{font-family:var(--f-display);font-weight:var(--fw-extrabold);font-size:1.3rem;color:var(--text-strong);letter-spacing:-.015em;line-height:1.1}
.cl-rx-generic{font-size:.84rem;color:var(--ink-faint);margin-top:3px}
.cl-rx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 16px;margin:16px 0 14px;padding:14px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.cl-rx-k{font-family:var(--f-caps);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.cl-rx-v{font-weight:var(--fw-semibold);color:var(--text-strong);font-size:.92rem}
.cl-rx-chips{display:flex;flex-wrap:wrap;gap:7px}
.cl-rx-chip{border-radius:var(--r-pill);padding:.32em .85em;font-size:.74rem;font-weight:var(--fw-semibold);line-height:1.3}
.cl-rx-chip.warn{background:var(--butter);color:var(--warn-ink)}
.cl-rx-chip.danger{background:var(--danger-soft);color:var(--danger-ink)}

/* ---------- OSCE CHECKLIST ---------- */
.cl-osce{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-card);box-shadow:var(--shadow-sm);overflow:hidden}
.cl-osce-head{padding:15px 20px 13px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:12px}
.cl-osce-title{font-weight:var(--fw-bold);color:var(--text-strong);font-size:.98rem}
.cl-osce-prog{font-family:var(--f-caps);font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.06em}
.cl-osce-bar{height:4px;background:var(--surface-mist)}
.cl-osce-bar i{display:block;height:100%;background:var(--grad-primary);transition: width var(--dur-entrance) var(--ease-standard)}
.cl-osce-item{display:flex;gap:12px;align-items:flex-start;padding:11px 20px;border-top:1px solid var(--line-soft);cursor:pointer;background:none;width:100%;text-align:left;border-left:none;border-right:none;border-bottom:none;font:inherit;transition: background var(--dur-hover)}
.cl-osce-item:hover{background:var(--mint-50)}
.cl-osce-item:first-of-type{border-top:none}
.cl-osce-text{flex:1;font-size:.91rem;color:var(--text-body);line-height:1.45}
.cl-osce-item.done .cl-osce-text{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--line-mint);text-decoration-thickness:1.5px}
.cl-osce-crit{flex:none;font-family:var(--f-caps);font-size:var(--fs-micro);font-weight:700;letter-spacing:.09em;padding:.35em .7em;border-radius:var(--r-pill);background:var(--danger-soft);color:var(--danger-ink);margin-top:1px}

@media (max-width:640px){
  .cl-case{grid-template-columns:1fr}
  .cl-case-rail{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line-soft);padding:12px 10px}
  .cl-case-phase{padding:4px 10px}
  .cl-case-phase span.lbl{display:none}
  .cl-lab-row{grid-template-columns:1fr .9fr 44px;font-size:.86rem}
  .cl-lab-range{display:none}
  .cl-lab-hd .h-range{display:none}
  .cl-rx-grid{grid-template-columns:1fr 1fr}
}


/* ============================================================
   PRESS STATES — retention cells, timer and confidence controls
   Hover is not feedback on a touch screen, and a control that only
   responds to hover feels dead under a finger. Every interactive
   surface here answers a press with the same vocabulary the buttons
   use: small controls sink (translateY(1px) scale(.97)), lifted
   cards press back through their lift, and data cells dip in place.
   Presses are instant by design — no transition — so the response
   lands on touch-down rather than easing in after it.
   ============================================================ */
.cl-heat-cell:active{transform:scale(.85)}
.cl-timer-btn:active,.cl-conf-btn:active{transform:translateY(1px) scale(.94)}
.cl-osce-item:active{transform:scale(.995)}