/* ============================================================================
   NurseVerdict Phase 4 — Clinical Skills (Calculation / ABG / ECG / Fluid
   Balance / Scoring / Normal Values / Dynamic Findings / Instruments /
   Procedures / Image-Label)

   Local to this phase only. Tokens, header/nav chrome, buttons, chips, KPI
   row, filter bar, group headers, modal, toast, motion, and accessibility
   toggles all come from nurseverdict-shared.css.

   (v2 note: text sizing below was converted from calc(Xrem*var(--scale)) to
   plain rem values. All 4 phases now scale text via the html.fs-sm/md/lg
   root classes in nurseverdict-shared.css — rem units cascade from that
   automatically, so the var(--scale) multiplier was retired everywhere.)

   Card design system is ported from the docx generator: every box/table
   color here maps to an existing shared token, cross-checked field-for-field
   against the generator's build*Table/*Box functions rather than designed
   fresh.
   ============================================================================ */
.frame{max-width:900px;}

/* ===== Type badges — one accent per item TYPE, used on card headers, the
   type filter chips, and the legend. Distinct from the docx's per-FIELD
   colors (navy/teal/coral/amber), which stay attached to their box/table
   meaning regardless of item type — see box hierarchy below. ============ */
.p4-type-hex{ /* reference only, consumed via TYPE_HEX in JS */ }

/* ===== Card shell ========================================================= */
.p4-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden;}
.p4-card-head{display:flex; align-items:flex-start; gap:10px; padding:13px 14px 10px; border-bottom:1px solid var(--line);}
.p4-num{flex:0 0 auto; min-width:30px; height:30px; border-radius:7px; background:#2D4A7A; color:#fff; font-family:var(--font-mono); font-weight:700; font-size:.72rem; display:flex; align-items:center; justify-content:center; padding:0 6px;}
.p4-head-text{flex:1; min-width:0;}
.p4-heading{font-family:var(--font-display); font-weight:700; font-size:.96rem; color:var(--ink); line-height:1.3; overflow-wrap:anywhere;}
.p4-type-chip-inline{display:inline-flex; align-items:center; gap:5px; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#fff; padding:3px 9px; border-radius:20px; margin-top:5px;}
.p4-card-body{padding:12px 14px 14px;}
.p4-bookmark-btn{flex:0 0 auto; background:none; border:none; cursor:pointer; font-size:1.25rem; color:var(--line); min-width:44px; min-height:44px; line-height:1; padding:0; border-radius:8px; transition:transform .15s;}
.p4-bookmark-btn:active{transform:scale(0.85);}
.p4-bookmark-btn.on{color:var(--gold);}

/* ===== Universal box hierarchy — ported 1:1 from the docx generator's
   clinicalContext/formulaBox/purposeBox/criticalBox/criticalDangerBox/
   noteBox/criticalNoteBox/trapBox. Left-border + label + tint, same
   pattern throughout; only color and label text change per box type. ==== */
.p4-box{border-radius:0 8px 8px 0; border-left:4px solid; padding:10px 13px; margin:0 0 10px; font-size:.85rem; line-height:1.5; overflow-wrap:anywhere;}
.p4-box .p4-box-label{display:block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
.p4-box-context{background:var(--paper); border-color:var(--navy-ink); color:var(--muted);}
.p4-box-context .p4-box-label{color:var(--navy-ink);}
.p4-box-formula{background:var(--blue-bg); border-color:var(--teal-drug-ink); color:var(--ink); font-weight:700;}
.p4-box-formula .p4-box-label{color:var(--teal-drug-ink);}
.p4-box-purpose{background:var(--teal-bg); border-color:var(--teal); color:var(--muted);}
.p4-box-purpose .p4-box-label{color:var(--teal);}
.p4-box-critical{background:var(--coral-bg); border-color:var(--coral); color:var(--muted);}
.p4-box-critical .p4-box-label{color:var(--coral);}
.p4-box-danger{background:var(--red-bg); border-color:var(--red); color:var(--ink); border-left-width:5px;}
.p4-box-danger .p4-box-label{color:var(--red-ink);}
.p4-box-conclusion{background:var(--coral-bg); border-color:var(--coral); color:var(--ink); font-weight:600;}
.p4-box-conclusion .p4-box-label{color:var(--coral);}
.p4-box-note{background:var(--paper); border-color:var(--navy-ink); color:var(--muted);}
.p4-box-note .p4-box-label{color:var(--navy-ink);}
.p4-box-trap{background:var(--red-bg); border-color:var(--red); color:var(--ink);}
.p4-box-trap .p4-box-label{color:var(--red-ink);}
.p4-box b, .p4-box strong{color:var(--navy-ink);}

/* ABCDE tag — coral badge + teal divider line above it, matching the docx's
   thin teal rule that ties it visually to the item above. */
.p4-abcde-wrap{border-top:2px solid var(--teal); padding-top:9px; margin-bottom:10px; display:flex; align-items:stretch; border-radius:6px; overflow:hidden;}
.p4-abcde-letter{flex:0 0 30px; background:var(--coral); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:.9rem; border-radius:6px 0 0 6px;}
.p4-abcde-text{flex:1; background:var(--coral-bg); padding:7px 11px; font-size:.83rem; border-radius:0 6px 6px 0;}
.p4-abcde-text b{color:var(--navy-ink);}
.p4-abcde-text .lead{font-weight:700; color:var(--coral); text-transform:uppercase; font-size:.62rem; letter-spacing:.03em; display:block; margin-bottom:1px;}

/* Drug card — identical convention to Phase 1/3's drug-hdr/drug-field. */
.p4-drug{background:var(--gold-bg); border-left:4px solid var(--amber-ink); border-radius:0 8px 8px 0; padding:10px 13px; margin-bottom:10px;}
.p4-drug-hdr{font-family:var(--font-display); font-weight:700; margin-bottom:6px; font-size:.88rem;}
.p4-drug-hdr .rx{color:var(--amber-ink);}
.p4-drug-hdr .name{color:var(--navy-ink);}
.p4-drug-field{margin:3px 0; font-size:.82rem; overflow-wrap:anywhere;}
.p4-drug-field .lbl{font-weight:700; margin-right:4px;}

/* ===== Sticky controls: search + type-mode toggle live here permanently;
   type filters + section-jump are one tap away — same "not always-on"
   principle as Phase 3's filters panel, reused rather than reinvented. ==== */
.controls{background:var(--paper); padding:0 16px 8px; border-bottom:1px solid var(--line);}
.controls .name-row{padding-top:10px; margin-bottom:9px;}
.p4-panel-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.p4-panel-header h5{margin:0; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.type-row, .section-nav{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.section-pill{flex:0 0 auto; min-width:44px; min-height:44px; padding:0 10px; border-radius:22px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-family:var(--font-mono); font-weight:700; font-size:.76rem; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.section-pill:hover{border-color:var(--maroon-ink); color:var(--maroon-ink);}
.legend-wrap{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.legend-chip{font-size:.62rem; font-weight:700; color:#fff; padding:5px 10px; border-radius:5px; text-transform:uppercase; letter-spacing:.02em;}
.content{padding:14px 16px 60px;}

/* ===== Generic data table — navy header (docx default for Scoring /
   Normal-Values / Dynamic / Instrument / Procedure). Semantic ABG/ECG row
   variants layer on top of this same table, not a separate component. ==== */
.p4-table-wrap{overflow-x:auto; margin-bottom:10px; border-radius:8px; border:1px solid var(--line);}
.p4-table{width:100%; border-collapse:collapse; font-size:.82rem;}
.p4-table th{background:var(--navy-ink); color:#fff; text-align:left; padding:8px 10px; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;}
.p4-table td{padding:8px 10px; border-top:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere;}
.p4-table tr:nth-child(even) td{background:var(--paper);}

/* Step table (CALCULATION) — two-tone header: Step=navy / Working=teal,
   matching the docx generator's buildStepTable exactly. */
.p4-step-table th:first-child{background:var(--navy-ink); width:34%;}
.p4-step-table th:last-child{background:var(--teal-drug-ink);}
.p4-step-table td:first-child{font-weight:700; color:var(--navy-ink);}

/* Fluid balance — teal INPUTS header, red OUTPUTS header, navy subtotal row */
.p4-fluid-table th.in-head{background:var(--teal);}
.p4-fluid-table th.out-head{background:var(--red);}
.p4-fluid-table tr.subtotal td{background:var(--navy-ink); color:#fff; font-weight:700;}
.p4-balance-box{margin-top:2px; margin-bottom:10px; border-radius:8px; padding:11px 14px; font-family:var(--font-mono); font-weight:700; font-size:.95rem; text-align:center;}
.p4-balance-box.positive{background:var(--teal-bg); color:var(--teal-drug-ink);}
.p4-balance-box.negative{background:var(--red-bg); color:var(--red-ink);}
.p4-balance-box.neutral{background:var(--gold-bg); color:var(--amber-ink);}

/* ABG / ECG — 4-column semantic table. Row tint keyed off the interpretation
   column's own wording: coral=primary disturbance, amber=compensatory/
   abnormal-secondary (same gold-bg+amber-ink pairing the drug box already
   uses), teal=normal. Keyword set is intentionally wider than the docx
   generator's own regex (which misses e.g. "mildly low" as abnormal) —
   a deliberate fix, not a silent one. */
.p4-abg-table td.interp-primary{background:var(--coral-bg); color:var(--coral); font-weight:700;}
.p4-abg-table td.interp-compensatory{background:var(--gold-bg); color:var(--amber-ink); font-weight:700;}
.p4-abg-table td.interp-normal{background:var(--teal-bg); color:var(--teal-drug-ink); font-weight:700;}

/* Instrument / Procedure — same generic table, column count/labels differ. */
.p4-proc-table td:first-child{font-weight:700; color:var(--navy-ink); white-space:nowrap; width:1%;}
.p4-proc-table td.crit-point{color:var(--coral); font-weight:600;}

/* Image-Label — teal header, matching docx's IMAGE-LABEL exception to its
   own navy default. */
.p4-label-table th{background:var(--teal);}

/* ===== Drill mode — Calculation & Fluid-Balance get an auto-checked numeric
   answer; ABG / ECG / Image-Label get a reveal-based self-check (same trust
   model as Phase 3's flip cards) rather than a fake auto-grader for
   free-text clinical interpretation. ====================================== */
.p4-drill-toggle-row{display:flex; justify-content:flex-end; margin-bottom:8px;}
.p4-drill-toggle{font-size:.68rem; font-weight:700; padding:0 12px; min-height:36px; border-radius:20px; border:1px solid var(--teal); background:var(--teal-bg); color:var(--teal-drug-ink); cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
.p4-drill-toggle.active{background:var(--teal); color:#fff;}

.p4-drill-box{background:var(--teal-bg); border:1px dashed var(--teal); border-radius:8px; padding:12px 14px; margin-bottom:10px;}
.p4-drill-prompt{font-size:.83rem; color:var(--muted); margin-bottom:8px;}
.p4-drill-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.p4-drill-row input{width:130px; padding:9px 11px; min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-family:var(--font-mono); font-size:.9rem;}
.p4-drill-check{min-height:44px; padding:0 16px; border-radius:8px; border:none; background:var(--teal); color:#fff; font-weight:700; font-size:.78rem; cursor:pointer;}
.p4-drill-feedback{margin-top:9px; padding:8px 12px; border-radius:6px; font-size:.82rem; font-weight:600; display:none;}
.p4-drill-feedback.show{display:block;}
.p4-drill-feedback.correct{background:var(--teal-bg); color:var(--teal-drug-ink); border:1px solid var(--teal);}
.p4-drill-feedback.incorrect{background:var(--coral-bg); color:var(--coral); border:1px solid var(--coral);}

/* Reveal mechanic — same interaction idea as Phase 3's flip cards (display-
   based hide/show, not a visual-only blur, so assistive tech sees the same
   thing sighted users do), but scoped to a wrapping .p4-reveal-group rather
   than the whole card, since one card can hold its own independent reveal
   (ABG/ECG interpretation column, Image-Label identifications). Semantic
   color is gated along with the text — an unrevealed coral/amber/teal tint
   would give the answer away before you've tried. */
.p4-reveal-group{display:block;}
.p4-reveal-group .p4-reveal-back{display:none;}
.p4-reveal-group.p4-revealed .p4-reveal-hidden{display:none;}
.p4-reveal-group.p4-revealed .p4-reveal-back{display:block;}
.p4-reveal-group:not(.p4-revealed) td.interp-primary,
.p4-reveal-group:not(.p4-revealed) td.interp-compensatory,
.p4-reveal-group:not(.p4-revealed) td.interp-normal{background:transparent; color:var(--muted); font-weight:400;}
.p4-reveal-trigger-row{display:flex; justify-content:flex-end; gap:10px; margin:-2px 0 10px;}
.p4-reveal-btn{flex:0 0 auto; font-size:.72rem; font-weight:700; padding:0 14px; min-height:44px; border-radius:20px; border:1px solid var(--teal); background:var(--panel); color:var(--teal-drug-ink); cursor:pointer;}

/* Confidence rating — replaces the old binary Mark-reviewed toggle. Pattern
   evidenced by Osmosis (rate confidence + accuracy per card, feeding spaced
   repetition) and Marrow (weak-item retest module) — lighter-weight here
   since Phase 4's job is applied-skill practice, not a second SRS engine
   duplicating Phase 2's. */
.p4-confidence-row{display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap;}
.p4-conf-btn{min-height:44px; padding:0 14px; border-radius:22px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:.76rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .12s;}
.p4-conf-btn:active{transform:scale(0.94);}
.p4-conf-btn.shaky.active{background:var(--gold-bg); border-color:var(--gold); color:var(--amber-ink);}
.p4-conf-btn.confident.active{background:var(--teal-bg); border-color:var(--teal); color:var(--teal-drug-ink);}
.p4-card.conf-shaky{border-left:3px solid var(--gold);}
.p4-card.conf-confident{border-left:3px solid var(--teal);}

/* Inline calculator — evidenced by UWorld's "built-in digital calculator
   that mirrors the exact functionality... you'll use on the NCLEX", named
   as a specific differentiator. Plain button-state arithmetic, not an
   expression evaluator — no eval(), nothing to sanitize. */
.p4-calc-toggle{min-height:40px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:.74rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
.p4-calc{margin-top:8px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px; max-width:260px;}
.p4-calc-disp{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:8px 10px; text-align:right; font-family:var(--font-mono); font-size:1.1rem; font-weight:700; color:var(--ink); margin-bottom:8px; overflow-x:auto; white-space:nowrap;}
.p4-calc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.p4-calc-grid button{min-height:40px; border-radius:6px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-family:var(--font-mono); font-weight:700; font-size:.9rem; cursor:pointer;}
.p4-calc-grid button.op{background:var(--teal); color:#fff; border-color:var(--teal);}
.p4-calc-grid button.fn{background:var(--coral-bg); color:var(--coral);}
.p4-calc-grid button.zero{grid-column:span 2;}
.p4-calc-use{margin-top:8px; width:100%; min-height:40px; border-radius:6px; border:none; background:var(--maroon); color:#fff; font-weight:700; font-size:.76rem; cursor:pointer;}

/* Smoothness — card entrance, reveal fade, group expand all get a lightweight
   transition; prefers-reduced-motion turns all of it off rather than just
   speeding it up, per actual accessibility guidance (not everyone who sets
   that flag wants "fast", some want "none"). */
.p4-card{animation:p4fadein .28s ease-out both;}
@keyframes p4fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
.p4-reveal-back{animation:p4fadein .22s ease-out both;}
.group-body{transition:opacity .18s ease;}
.p4-drill-feedback.show{animation:p4fadein .18s ease-out both;}
@media (prefers-reduced-motion: reduce){
  .p4-card, .p4-reveal-back, .p4-drill-feedback.show{animation:none;}
  .p4-bookmark-btn, .p4-conf-btn{transition:none;}
}

/* Local touch-target fix for .link-btn specifically where used inside drill
   boxes — the shared component doesn't set a min-height, which is fine for
   most of its uses elsewhere but not generous enough for a primary tap
   target here. */
.p4-drill-box .link-btn, .p4-reveal-hidden .link-btn{min-height:44px; min-width:44px; padding:6px 10px; display:inline-flex; align-items:center;}

/* "Next to review" affordance */
.p4-next-btn{position:fixed; bottom:20px; right:16px; z-index:15; min-height:48px; padding:0 18px; border-radius:24px; border:none; background:var(--maroon); color:#fff; font-weight:700; font-size:.82rem; box-shadow:0 4px 14px rgba(0,0,0,.25); cursor:pointer; display:none; align-items:center; gap:6px;}
.p4-next-btn.show{display:inline-flex;}
/* The shared back-to-top button also anchors bottom-right and can be
   visible at the same time as this one — stack it above instead of
   letting the two overlap. */
.back-to-top{bottom:84px;}
@media (max-width:420px){
  .p4-next-btn{right:12px; bottom:16px; padding:0 14px; font-size:.76rem;}
  .back-to-top{bottom:78px; right:14px;}
  .p4-drill-row input{width:100px;}
  .p4-num{min-width:26px; height:26px; font-size:.66rem;}
  .p4-table{font-size:.76rem;}
  .p4-calc{max-width:100%;}
}