/* ============================================================================
   NurseVerdict Phase 1 — Concept Mastery
   Phase-specific layer only. Loads AFTER nurseverdict-shared.css and reuses
   its tokens throughout — no new hues introduced except where noted.
   (v2 note: the motion system, reading-progress bar, back-to-top button, and
   fs-sm/md/lg text-size classes that used to live in this file have moved
   into nurseverdict-shared.css, since Phase 3 and 4 now use them too. Nothing
   below duplicates them.)

   Color mapping for this phase's content boxes:
     difficulty HIGH   -> coral        difficulty MODERATE -> ink/panel invert
     difficulty LOW    -> muted/paper  ABCDE tag            -> coral
     clinical context  -> neutral/paper (deliberately quiet - it's ~100% of cards)
     mnemonic          -> teal         eval success         -> teal
     eval fail         -> red          trap                 -> red
     exam tip          -> blue         note                 -> purple
     drug box          -> gold container, ink-family field labels (matches
                          Phase 3/4's drug box design exactly)
   ============================================================================ */

.frame{max-width:960px; display:block;}

/* ---------------------------------------------------------------------------
   Landing — chapter picker grid
   --------------------------------------------------------------------------- */
.p1-landing{padding:28px 20px 60px;}
.p1-landing-head{text-align:center; margin-bottom:28px;}
.p1-landing-head h1{font-family:var(--font-display); font-size:1.7rem; margin:0 0 6px;}
.p1-landing-head p{color:var(--muted); font-size:.9rem; margin:0;}
.chapter-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.chapter-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:left; cursor:pointer; font-family:var(--font-ui);}
.chapter-card:hover{border-color:var(--maroon-ink);}
.chapter-card .cc-name{font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin-bottom:4px;}
.chapter-card .cc-meta{font-size:.76rem; color:var(--muted);}
.chapter-card .cc-progress{margin-top:12px;}
.chapter-card .cc-progress .lbl{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;}
.chapter-card-locked{display:block; text-decoration:none; border-style:dashed; opacity:.85;}
.chapter-card-locked:hover{border-color:var(--gold); opacity:1;}
.chapter-card-locked .cc-name{color:var(--muted);}
.chapter-card-locked .cc-lock-cta{margin-top:12px; font-size:.76rem; font-weight:700; color:var(--gold-ink);}

/* ---------------------------------------------------------------------------
   Chapter overview hero (once a chapter is open)
   --------------------------------------------------------------------------- */
.overview{padding:18px 18px 4px;}
.overview h1{font-family:var(--font-display); font-size:1.4rem; margin:0 0 4px;}
.overview .ov-sub{color:var(--muted); font-size:.82rem; margin-bottom:16px;}
.section-jump-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;}

/* ---------------------------------------------------------------------------
   Search + filters
   --------------------------------------------------------------------------- */
.p1-controls{padding:0 18px 14px; display:flex; flex-direction:column; gap:10px;}
.search-row{display:flex; gap:8px;}
.search-row input{flex:1;}
.p1-filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.p1-filters .sep{width:1px; height:22px; background:var(--line); margin:0 2px;}
.result-count{padding:0 18px 10px; font-size:.76rem; color:var(--muted);}

/* ---------------------------------------------------------------------------
   Section divider
   --------------------------------------------------------------------------- */
.section-divider{margin:26px 18px 14px; border-radius:10px; overflow:hidden; scroll-margin-top:64px;}
.section-divider .sd-title{background:var(--maroon); color:#fff; padding:14px 18px; font-family:var(--font-display); font-weight:700; font-size:1.05rem;}
.section-divider .sd-title .n{font-family:var(--font-ui); font-weight:600; font-size:.7rem; color:#F3D9E1; text-transform:uppercase; letter-spacing:.4px; display:block; margin-top:2px;}
.section-divider .sd-info{background:var(--teal); color:#fff; padding:8px 18px; display:flex; justify-content:space-between; font-size:.74rem; font-weight:600;}

/* ---------------------------------------------------------------------------
   Active Recall Mode — testing yourself before seeing the explanation is
   the single most consistently evidence-backed study technique (retrieval
   practice). Off by default (matches the original read-through design);
   toggling it hides each card's explanation behind a reveal action.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Chapter Resources — Cheat Sheet + Drug Index, surfaced here (in the
   overview, where a chapter's stats already live) instead of as permanent
   header icons. Two reasons: it keeps the header identical across all 4
   phases, and it puts these reference tools where they're actually useful —
   right as you're getting oriented in a chapter, not competing for space
   with primary navigation on every screen.
   --------------------------------------------------------------------------- */
.resource-row{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
.resource-card{
  flex:1 1 240px; display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; cursor:pointer; font-family:var(--font-ui);
  border-left:4px solid var(--accent-c, var(--maroon-ink));
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.resource-card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.09); transform:translateY(-2px); }
.resource-card:active{ transform:translateY(0) scale(.99); }
.resource-card .rc-icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:1.35rem; background:var(--accent-bg-c, var(--gold-bg));
}
.resource-card .rc-text{flex:1; min-width:0;}
.resource-card .rc-title{font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:2px;}
.resource-card .rc-sub{font-size:.76rem; color:var(--muted); line-height:1.4;}
.resource-card .rc-arrow{flex:0 0 auto; font-size:1.15rem; color:var(--accent-c, var(--maroon-ink)); transition:transform var(--dur) var(--ease);}
.resource-card:hover .rc-arrow{transform:translateX(4px);}
.resource-card.cheat{ --accent-c:var(--teal); --accent-bg-c:var(--teal-bg); }
.resource-card.drug{ --accent-c:var(--amber-ink); --accent-bg-c:var(--gold-bg); }

.mode-switch-row{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.mode-switch-label{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);}
.mode-switch{display:inline-flex; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:3px; gap:2px;}
.mode-switch button{border:none; background:none; padding:6px 14px; border-radius:16px; font-size:.76rem; font-weight:700; color:var(--muted); cursor:pointer; min-height:32px;}
.mode-switch button.active{background:var(--maroon); color:#fff;}

.recall-prompt{text-align:center; padding:22px 16px; background:var(--paper); border-radius:8px; border:1.5px dashed var(--line);}
.recall-hint{font-size:.8rem; color:var(--muted); margin-bottom:14px; font-style:italic;}
.recall-reveal-btn{background:var(--maroon); color:#fff; border:none; padding:0 26px; min-height:44px; border-radius:24px; font-weight:700; font-size:.85rem; cursor:pointer;}
.recall-reveal-btn:hover{background:var(--maroon-dark);}

/* ---------------------------------------------------------------------------
   Chapter contents — a real table of contents instead of a chip cloud.
   Section titles in this content model run 30-70 characters (full clinical
   phrases, not short tags), so a wrapped row of pill chips reads as a wall
   of run-together text. A numbered vertical list gives each title its own
   line and adds a genuinely useful signal (per-section progress) chips
   couldn't carry at all.
   --------------------------------------------------------------------------- */
/* Chapter table-of-contents (.toc-toggle / .toc-list / .toc-item) now lives
   in nurseverdict-shared.css — Phase 3 and 4 use it too. */

/* ---------------------------------------------------------------------------
   Search highlighting — <mark> already gets shared styling; strengthen it
   slightly here since it needs to read as unmistakable, not decorative.
   --------------------------------------------------------------------------- */
mark{background:var(--gold); color:#3A2C05; padding:1px 3px; border-radius:3px; font-weight:700;}
.objectives-box{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--maroon-ink); border-radius:0 8px 8px 0; margin:0 18px 16px; padding:12px 16px;}
.objectives-box .ob-head{font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--maroon-ink); margin-bottom:6px;}
.objectives-box ol{margin:0; padding-left:18px; font-size:.85rem; line-height:1.6;}
.objectives-box li{margin-bottom:2px;}

/* ---------------------------------------------------------------------------
   Concept card
   --------------------------------------------------------------------------- */
.concept-card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:0; margin:0 18px 16px; overflow:hidden; scroll-margin-top:64px;}
.concept-card.is-reviewed{border-color:var(--teal);}

.concept-top{display:flex; align-items:stretch; gap:0; flex-wrap:wrap;}
.q-badge{background:var(--maroon); color:#fff; font-family:var(--font-mono); font-weight:700; font-size:.8rem; padding:12px 14px; display:flex; align-items:center; flex:0 0 auto;}
.q-heading{flex:1; min-width:200px; background:var(--paper); padding:12px 14px; font-weight:700; color:var(--ink); font-size:.94rem; display:flex; align-items:center;}
.diff-pill{flex:0 0 auto; padding:12px 14px; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; display:flex; align-items:center; white-space:nowrap;}
.diff-pill.diff-high{background:var(--coral); color:#fff;}
.diff-pill.diff-moderate{background:var(--ink); color:var(--panel);}
.diff-pill.diff-low{background:var(--paper); color:var(--muted); border-left:1px solid var(--line);}

.concept-body{padding:14px 18px 18px;}
.concept-actions{display:flex; justify-content:flex-end; gap:6px; padding:8px 14px 0;}
.icon-btn.is-done{background:var(--teal); border-color:var(--teal); color:#fff;}
.icon-btn.is-bookmarked{background:var(--gold-bg); border-color:var(--gold); color:var(--gold-ink);}

.clinical-context{background:var(--paper); border-left:4px solid var(--line); border-radius:0 6px 6px 0; padding:10px 14px; margin-bottom:12px; font-size:.88rem; line-height:1.6;}
.clinical-context p{margin:0 0 8px;}
.clinical-context p:last-child{margin-bottom:0;}
.clinical-context b{color:var(--ink);}

.callout{border-left:4px solid; border-radius:0 6px 6px 0; padding:10px 14px; margin-bottom:12px; font-size:.85rem; line-height:1.55;}
.callout .co-label{display:block; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; margin-bottom:4px;}
.callout b{color:var(--ink);}

.callout.mnemonic{border-color:var(--teal); background:var(--teal-bg);}
.callout.mnemonic .co-label{color:var(--teal);}
.callout.examtip{border-color:var(--blue); background:var(--blue-bg);}
.callout.examtip .co-label{color:var(--blue);}
.callout.note{border-color:var(--purple); background:var(--purple-bg);}
.callout.note .co-label{color:var(--purple);}
.callout.trap{border-color:var(--red); background:var(--red-bg);}
.callout.trap .co-label{color:var(--red);}
.callout.eval-success{border-color:var(--teal); background:var(--teal-bg);}
.callout.eval-success .co-label{color:var(--teal);}
.callout.eval-fail{border-color:var(--red); background:var(--red-bg);}
.callout.eval-fail .co-label{color:var(--red);}

.abcde-tag{display:flex; align-items:stretch; border-radius:6px; overflow:hidden; margin-bottom:12px; font-size:.8rem;}
.abcde-tag .at-letter{background:var(--coral); color:#fff; font-weight:700; padding:8px 12px; display:flex; align-items:center; font-family:var(--font-mono);}
.abcde-tag .at-body{background:var(--coral-bg); padding:8px 14px; display:flex; align-items:center; flex:1;}
.abcde-tag .at-body b{color:var(--coral);}

/* ---------------------------------------------------------------------------
   Data table
   --------------------------------------------------------------------------- */
.concept-table-wrap{overflow-x:auto; margin-bottom:12px; border-radius:6px; border:1px solid var(--line);}
table.concept-table{width:100%; border-collapse:collapse; font-size:.82rem;}
table.concept-table th{background:var(--ink); color:var(--panel); text-align:left; padding:9px 12px; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap;}
table.concept-table td{padding:9px 12px; border-top:1px solid var(--line); vertical-align:top;}
table.concept-table td:first-child{font-weight:700; color:var(--ink);}
table.concept-table tr:nth-child(even) td{background:var(--paper);}

/* ---------------------------------------------------------------------------
   Drug box — amber container, per-field ink-colored labels
   (mirrors Phase 3/4's drug box design)
   --------------------------------------------------------------------------- */
.drug-box{border-left:4px solid var(--gold); background:var(--gold-bg); border-radius:0 6px 6px 0; padding:10px 14px 12px; margin-bottom:12px; font-size:.85rem;}
.drug-box .db-title{font-family:var(--font-display); font-weight:700; margin-bottom:8px; color:var(--ink); font-size:1rem;}
.drug-box .db-title .rx{color:var(--amber-ink); margin-right:4px; font-family:var(--font-ui); font-weight:800; font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; vertical-align:middle;}
.drug-box .db-field{margin:7px 0; line-height:1.55; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;}
/* Fixed (non-theme-flipping) badge colors, each checked for >=4.5:1 contrast with
   the white label text — deliberately NOT using the --*-ink tokens as a fill,
   since those intentionally lighten in dark mode for use as text-on-tint, and
   would make white text unreadable if used as a solid background instead. */
.drug-box .db-field .lbl{flex:0 0 auto; display:inline-block; font-weight:800; font-size:.64rem; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:20px; color:#fff; white-space:nowrap;}
.drug-box .db-field .val{flex:1; min-width:150px;}
.drug-box .db-field.class .lbl{background:#0E7C6E;}
.drug-box .db-field.nursing .lbl{background:#1A2A4F;}
.drug-box .db-field.side-effects .lbl{background:#B5222A;}
.drug-box .db-field.contraindicated .lbl{background:#B03D28;}
.drug-box .db-field.hold-if .lbl{background:#8A5A00;}
.drug-box + .drug-box{margin-top:-4px;}

/* ---------------------------------------------------------------------------
   Section summary (auto-recap after the last concept of a section)
   --------------------------------------------------------------------------- */
.section-summary{background:var(--panel); border:1px solid var(--line); border-radius:10px; margin:0 18px 26px; overflow:hidden;}
.section-summary .ss-head{background:var(--ink); color:var(--panel); padding:8px 14px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;}
.section-summary .ss-row{display:flex; gap:12px; padding:9px 14px; font-size:.78rem; border-top:1px solid var(--line);}
.section-summary .ss-row .ss-lbl{flex:0 0 130px; font-weight:700; color:var(--ink);}
.section-summary .ss-row .ss-val{color:var(--muted); line-height:1.5;}

/* ---------------------------------------------------------------------------
   End banner
   --------------------------------------------------------------------------- */
.p1-end-banner{background:var(--maroon); color:#fff; text-align:center; padding:32px 20px; margin:26px 18px; border-radius:12px;}
.p1-end-banner h3{font-family:var(--font-display); font-size:1.3rem; margin:0 0 6px;}
.p1-end-banner p{margin:0; color:#F3D9E1; font-size:.85rem;}

/* Popover open/close animation now lives in shared.css (2.4), shared by all
   four phases instead of being local to this one. */

/* ---------------------------------------------------------------------------
   Drug appendix (modal) — deliberately overrides the shared modal's simple
   center-screen dialog with a scrollable, bottom-sheet-capable version sized
   for a long reference table.
   --------------------------------------------------------------------------- */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-start; justify-content:center; z-index:200; padding:40px 16px; overflow-y:auto; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);}
.modal-overlay.open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity var(--dur-slow) var(--ease);}
.modal-box{background:var(--panel); border-radius:12px; max-width:760px; width:100%; padding:0; box-shadow:0 20px 60px rgba(0,0,0,.3); transform:translateY(10px) scale(.98); transition:transform var(--dur-slow) var(--ease);}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1);}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line);}
.modal-head h3{font-family:var(--font-display); margin:0; font-size:1.15rem;}
.modal-body{padding:16px 20px 20px; max-height:70vh; overflow-y:auto;}
table.appendix-table{width:100%; border-collapse:collapse; font-size:.82rem;}
table.appendix-table th{background:var(--ink); color:var(--panel); text-align:left; padding:8px 10px; font-size:.7rem; text-transform:uppercase;}
table.appendix-table td{padding:8px 10px; border-top:1px solid var(--line); vertical-align:top;}
table.appendix-table tr:nth-child(even) td{background:var(--paper);}

.modal-intro{font-size:.78rem; color:var(--muted); margin:0 0 14px;}

/* Drug Index — reuses the same .drug-box "Rx card" look as the inline drug
   callouts within a question, laid out as a responsive card grid instead of
   a plain table so field labels keep their colour coding. */
.rx-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px;}
.rx-grid .drug-box{margin-bottom:0;}
.rx-grid .drug-box + .drug-box{margin-top:0;}
.rx-qrefs{margin-top:10px; padding-top:10px; border-top:1px dashed rgba(0,0,0,.15); display:flex; flex-wrap:wrap; gap:6px;}
.rx-qref{font-size:.66rem; font-weight:800; padding:3px 10px; border-radius:20px; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.12); color:var(--ink); cursor:pointer; font-family:var(--font-ui); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.rx-qref:hover{background:var(--maroon); border-color:var(--maroon); color:#fff;}

/* Cheat sheet — condensed mnemonics/tips/traps for quick pre-exam scanning */
.cheat-section-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--maroon-ink); margin:20px 0 10px; padding-bottom:6px; border-bottom:2px solid var(--maroon-ink);}
.cheat-section-head:first-child{margin-top:0;}
.cheat-section-head .cs-count{font-family:var(--font-ui); font-weight:700; font-size:.68rem; color:var(--muted); text-transform:none;}
.cheat-item{margin-bottom:12px; padding:12px 14px 10px; border-radius:10px; background:var(--panel); border:1px solid var(--line); box-shadow:0 2px 8px rgba(0,0,0,.04);}
.cheat-item:last-child{margin-bottom:0;}
.cheat-item .ci-q{font-size:.7rem; font-weight:800; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.4px; cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
.cheat-item .ci-q:hover{color:var(--maroon-ink);}
.cheat-item .ci-q .jump-ic{font-size:.9em; opacity:.6;}
.cheat-item .ci-line{font-size:.85rem; line-height:1.5; margin:6px 0 0; padding:8px 10px; border-radius:8px; display:flex; gap:8px; align-items:flex-start;}
.cheat-item .ci-line .ci-tag{flex:0 0 auto; margin-top:1px; font-family:var(--font-ui); font-weight:800; font-size:.62rem; text-transform:uppercase; letter-spacing:.4px; padding:3px 9px; border-radius:20px; color:#fff; white-space:nowrap;}
.cheat-item .ci-line .ci-text{flex:1; min-width:150px;}
.cheat-item .ci-line.mnemonic{background:var(--teal-bg);}
.cheat-item .ci-line.mnemonic .ci-tag{background:var(--teal);}
.cheat-item .ci-line.examtip{background:var(--blue-bg);}
.cheat-item .ci-line.examtip .ci-tag{background:var(--blue);}
.cheat-item .ci-line.trap{background:var(--red-bg);}
.cheat-item .ci-line.trap .ci-tag{background:var(--red);}
.cheat-item .ci-line b{color:var(--ink);}

/* ---------------------------------------------------------------------------
   Empty search state (reuses .empty-state from the shared file if present,
   this is a light local fallback)
   --------------------------------------------------------------------------- */
.p1-empty{text-align:center; padding:50px 20px; color:var(--muted);}
.p1-empty .big{font-size:2rem; margin-bottom:8px;}

@media (max-width:640px){
  .rx-grid{grid-template-columns:1fr;}
  .concept-top{flex-direction:column;}
  .q-heading{min-width:0;}
  .section-summary .ss-row{flex-direction:column; gap:2px;}
  .section-summary .ss-row .ss-lbl{flex:none;}

  /* KPI row: 4 cramped columns -> 2 legible ones */
  .kpi-row{grid-template-columns:repeat(2,1fr);}

  /* 2.4: Settings is now the only header button (Chapters was removed
     site-wide), and the new brandbar-anchored popover (shared.css) fits
     down to a 320px viewport without needing this file's old icon-only
     treatment or its own bottom-sheet popover -- both retired here in
     favor of the same small anchored popover all four phases now use. */

  .modal-overlay{padding:0; align-items:flex-end;}
  .modal-box{max-width:none; border-radius:16px 16px 0 0; max-height:85vh; display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom);}
  .modal-body{max-height:none; flex:1;}
}