/* ============================================================================
   NurseVerdict Phase 3 — Rapid Revision
   Phase-specific layer only. Loads AFTER nurseverdict-shared.css.

   (v2 note: this file's tokens, header, icon buttons, chapter/settings
   popovers, KPI cards, progress bar, filter bar, toast, and per-element
   focus-visible list are now in nurseverdict-shared.css and were removed
   from here. Font sizing was converted from calc(Xrem*var(--scale)) to
   plain rem — text size is now controlled by the shared html.fs-sm/md/lg
   classes via the new Settings popover, same as the other 3 phases; the
   old header A−/A+ stepper and its --scale variable are retired.)
   ============================================================================ */

.frame{max-width:900px;}

/* This phase's icon buttons sit directly on the maroon header with no
   separate neutral util-bar, so give them the "on-brand" treatment by
   context instead of requiring an .on-brand class on every button. */
header.brandbar .icon-btn{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff;}
header.brandbar .icon-btn:hover{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.35);}

/* ===== Landing (non-sticky): KPIs, progress, and the always-visible tag legend ===== */
.landing{padding:16px 16px 4px;}
.progress-cap{font-size:.7rem; color:var(--muted); margin:6px 2px 14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:center;}
/* Same underlined text-action as the shared .link-btn (kept as its own
   selector so the existing reset/clear-filters markup didn't need touching). */
.reset-btn, .clear-filters{border:none; background:none; color:var(--maroon-ink); font-size:.7rem; font-weight:700; text-decoration:underline; cursor:pointer; padding:4px;}

.legend-block{margin-bottom:16px;}
.legend-block h4{margin:0 0 8px; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.legend-wrap{display:flex; flex-wrap:wrap; gap:6px;}
.legend-chip{font-size:.62rem; font-weight:700; color:#fff; padding:5px 10px; border-radius:5px; text-transform:uppercase; letter-spacing:.02em;}

/* ===== Sticky controls — ONLY search + mode toggle live here permanently.
   Everything else (tag filters, section-jump) is one tap away, not always-on,
   on every device — this isn't a mobile-only fix. ===== */
.controls{background:var(--paper); padding:0 16px 8px; border-bottom:1px solid var(--line);}
.name-row{margin-bottom:9px; padding-top:10px;}
.filter-bar .seg-inline button.cram-btn.active{background:var(--gold); color:#3A2C05; border-color:var(--gold);}
.hide-known-row{display:flex; align-items:center; gap:6px; font-size:.75rem; color:var(--muted);}

/* on-demand panel: tag filter chips + jump-to-section, collapsed by default */
.tag-row-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.tag-row-header h5{margin:0; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700;}
.tag-row{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
/* Every chip in the tag row is a filter toggle — apply the shared
   .type-chip.filterable treatment by context instead of adding the class
   to every generated chip. */
.tag-row .type-chip{cursor:pointer; min-height:44px; padding:0 12px; white-space:nowrap; flex:0 0 auto;}
.tag-row .type-chip .sw{width:8px; height:8px; border-radius:2px; display:inline-block;}
.section-nav{display:flex; gap:6px; overflow-x:auto; padding:4px 0 2px; -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);}

.current-section-bar{font-size:.72rem; font-weight:700; color:var(--maroon-ink); padding:7px 2px 0; display:none; font-family:var(--font-display);}

.content{padding:14px 16px 60px;}
.cutoff-banner{margin-bottom:14px; padding:11px 15px; border-radius:8px; font-size:.83rem; font-weight:600;}
.cutoff-banner.cram{background:var(--gold-bg); color:#6B5510;}

/* ===== Section headers — the "accent" left-border variant, this phase's
   signature section-navigator look (see nurseverdict-shared.css). ===== */
.group-block{margin-bottom:10px;}
.group-header-row{display:flex; align-items:stretch; gap:0;}
.group-header{flex:1; min-width:0; border-radius:8px 0 0 8px; font-family:var(--font-display); font-size:.9rem;
  background:var(--section-bg); border:1px solid var(--line); border-left:4px solid var(--maroon-ink);}
.group-header .count{font-family:var(--font-ui); font-size:.72rem;}
.mark-section-btn{flex:0 0 auto; background:var(--section-bg); border:1px solid var(--line); border-left:none; border-radius:0 8px 8px 0;
  padding:0 12px; min-height:44px; font-size:.64rem; font-weight:700; color:var(--maroon-ink); white-space:nowrap; cursor:pointer;}
.mark-section-btn:hover{background:var(--paper);}

/* ===== Item row ===== */
.rev-row{display:flex; align-items:stretch; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:8px;}
.rev-num{flex:0 0 38px; background:#2D4A7A; color:#fff; font-family:var(--font-mono); font-weight:700; font-size:.7rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1px; padding:6px 2px;}
.rev-num .star{color:#FFD700; font-size:.68rem; line-height:1;}
.rev-num.three-digit{font-size:.6rem;}
.rev-tag{flex:0 0 78px; color:#fff; font-weight:700; font-size:.58rem; text-transform:uppercase; letter-spacing:.02em; display:flex; align-items:center; justify-content:center; text-align:center; padding:6px 5px; line-height:1.2;}
.rev-main{flex:1; min-width:0;}
/* flex-wrap fixed here — content gets its own full-width line instead of being
   squeezed alongside the button when there isn't room for both */
.rev-top{display:flex; flex-wrap:wrap; align-items:flex-start; gap:9px; padding:10px 12px;}
.rev-content{flex:1 1 160px; min-width:0; font-size:.88rem; line-height:1.5; overflow-wrap:anywhere;}
.rev-content.rf{font-size:.92rem; font-weight:600;}
.rev-content.trap{font-size:.85rem;}
.rev-content strong{color:var(--maroon-ink);}

/* 3-state mastery button colours (button.ctrl base comes from shared) */
button.ctrl.state-almost{background:var(--gold-bg); color:var(--gold-ink); border-color:var(--gold);}
button.ctrl.state-mastered{background:var(--teal); color:#fff; border-color:var(--teal);}

.reveal-wrap{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.reveal-front{font-size:.84rem; color:var(--muted); font-style:italic; overflow-wrap:anywhere; flex:1; min-width:120px;}
.reveal-front .hint{font-size:.63rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:block; margin-top:3px; font-style:normal;}
.reveal-btn{flex:0 0 auto; font-size:.72rem; font-weight:700; padding:0 14px; min-height:44px; border-radius:5px; border:1px solid var(--maroon-ink); background:var(--panel); color:var(--maroon-ink); cursor:pointer;}
.reveal-back{display:none; overflow-wrap:anywhere;}
.rev-row.revealed .reveal-wrap{display:none;}
.rev-row.revealed .reveal-back{display:block;}

.eval-line{font-weight:700; margin-right:5px;}

.drug-hdr{font-family:var(--font-display); font-weight:700; margin-bottom:6px;}
.drug-hdr .rx{color:var(--amber-ink);}
.drug-hdr .name{color:var(--navy-ink);}
.drug-field{margin:3px 0; font-size:.85rem; overflow-wrap:anywhere;}
.drug-field .lbl{font-weight:700; margin-right:4px;}

.note{margin-top:9px; padding:9px 12px; border-radius:8px; font-size:.78rem; background:var(--gold-bg); border-left:3px solid var(--gold); overflow-wrap:anywhere;}
.note b{color:var(--gold-ink);}

.legend-note{text-align:center; font-size:.7rem; color:var(--muted); padding:0 16px 26px;}

@media (max-width:420px){
  .rev-num{flex-basis:30px; font-size:.62rem;}
  .rev-tag{flex-basis:58px; font-size:.5rem;}
  .rev-top{padding:8px 10px;}
  .kpi .v{font-size:1rem;}
  .chapter-name{max-width:180px;}
}