@import url('./vendor/fonts.css');
:root{
  --bg-primary:#0a0e17;--bg-secondary:#111827;--bg-card:#1a2235;--bg-card-hover:#1f2a40;
  --accent-red:#ef4444;--accent-red-glow:rgba(239,68,68,.3);
  --accent-blue:#3b82f6;--accent-blue-glow:rgba(59,130,246,.25);
  --accent-green:#22c55e;--accent-green-glow:rgba(34,197,94,.25);
  --accent-amber:#f59e0b;--accent-amber-glow:rgba(245,158,11,.25);
  --accent-purple:#a855f7;--accent-purple-glow:rgba(168,85,247,.25);
  --accent-cyan:#06b6d4;--accent-cyan-glow:rgba(6,182,212,.25);
  --accent-orange:#f97316;
  --accent-pink:#ec4899;--accent-pink-glow:rgba(236,72,153,.25);
  /* Dark-theme text ramp (2026-08-31): --text-secondary/--text-dim were
     lifted from #94a3b8/#64748b — the old dim slate was nearly unreadable
     on the landing tiles' near-black cards. Still a cool, serious slate;
     just enough luminance to clear ~5:1 contrast on --bg-card. The light
     theme is untouched (its values are applied inline by ui.js). */
  --text-primary:#f1f5f9;--text-secondary:#a8b4c6;--text-dim:#8a96aa;
  --border:#2a3550;--border-light:#334155;
  --user-bg:var(--bg-primary);--user-text:var(--text-primary);--user-highlight:#fbbf24;
}
*{margin:0;padding:0;box-sizing:border-box;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
:where(button,a,input,select,textarea,[role="button"],[role="tab"],[tabindex="0"]):focus-visible{outline:3px solid var(--accent-cyan)!important;outline-offset:3px;box-shadow:0 0 0 5px rgba(6,182,212,.22)!important;}
body{font-family:'DM Sans',sans-serif;background:var(--user-bg);color:var(--user-text);min-height:100vh;min-height:100dvh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(239,68,68,.05) 0%,transparent 70%);pointer-events:none;z-index:0;}
.ecg-line{position:fixed;inset:0;pointer-events:none;z-index:100;padding:4px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;overflow:hidden;}
/* Rainbow engine (2026-09-08): the spectrum is a conic gradient whose start
   angle (--ecg-ang) is animated in coarse steps. This replaces the old
   300vmax spinning disc for the Rainbow/Solid/Aurora looks — a full-size
   layer repainted ~12×/s costs far less than a 57-megapixel transform layer.
   Comet and Circuit still spin a disc (ecgSpin) because their pattern is
   a shape, not a color sweep. */
@property --ecg-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ecgTurn { to { --ecg-ang: 360deg; } }
.ecg-line::before{content:'';position:absolute;inset:0;--ecg-ang:0deg;background:conic-gradient(from var(--ecg-ang),#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);opacity:.8;animation:ecgTurn 14s steps(168) infinite;}
@keyframes ecgSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ecg-line::before{animation:none;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fcToastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fcToastOut{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,12px)}}
.page-module-loading{margin:1.25rem auto;padding:.72rem 1rem;max-width:360px;text-align:center;border:1px solid var(--border-light);border-radius:10px;background:var(--bg-card);color:var(--text-secondary);font-size:.85rem;box-shadow:0 6px 18px rgba(0,0,0,.12);}
.fc-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:9999;padding:.6rem 1rem;border-radius:10px;background:var(--bg-card);border:1.5px solid var(--accent-cyan);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,.25);display:flex;align-items:center;gap:.5rem;animation:fcToastIn .18s ease-out;}
.fc-toast.fc-toast-out{animation:fcToastOut .25s ease-in forwards;}
.fc-toast.fc-toast-error{border-color:var(--accent-red,#ef4444);}

/* ══════════════════════════════════════════════════════════════
   LIBRARY ANNOTATIONS — per-user highlights, notes, flashcards
   ══════════════════════════════════════════════════════════════ */
/* Highlighted passage (no note) — soft yellow background */
.lib-hl,.lib-hl-noted{--lib-hl-bg:rgba(250,204,21,.32);--lib-hl-hover:rgba(250,204,21,.48);--lib-hl-underline:#b45309;background:var(--lib-hl-bg);border-radius:3px;padding:0 1px;cursor:pointer;transition:background .12s;}
.lib-hl:hover,.lib-hl-noted:hover{background:var(--lib-hl-hover);}
/* Highlighted passage with a note attached — same highlight color + dotted underline */
.lib-hl-noted{border-bottom:1.5px dotted var(--lib-hl-underline);text-decoration:none;}
.lib-hl[data-hl-color="green"],.lib-hl-noted[data-hl-color="green"]{--lib-hl-bg:rgba(134,239,172,.34);--lib-hl-hover:rgba(134,239,172,.5);--lib-hl-underline:#15803d;}
.lib-hl[data-hl-color="orange"],.lib-hl-noted[data-hl-color="orange"]{--lib-hl-bg:rgba(253,186,116,.36);--lib-hl-hover:rgba(253,186,116,.54);--lib-hl-underline:#c2410c;}
.lib-hl[data-hl-color="blue"],.lib-hl-noted[data-hl-color="blue"]{--lib-hl-bg:rgba(147,197,253,.36);--lib-hl-hover:rgba(147,197,253,.54);--lib-hl-underline:#2563eb;}
/* The library-context tooltip — same shape as .hl-tooltip but distinct id so we don't conflict with the in-sim popup */
.lib-hl-tooltip{flex-direction:column;align-items:stretch;min-width:252px;padding:.42rem .5rem;gap:.38rem;}
#lib-genflash-tooltip{min-width:0;padding:.3rem .5rem;gap:.5rem;flex-direction:row;align-items:center;white-space:nowrap;}
#lib-genflash-tooltip .hl-sep{height:16px;align-self:center;}
.lib-hl-palette{display:flex;justify-content:center;gap:.45rem;}
#lib-hl-tooltip .lib-hl-palette .lib-hl-color-dot{width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(15,23,42,.08);padding:0;min-width:16px;min-height:16px;background:var(--dot-color);transition:border-color .12s,box-shadow .12s,transform .12s,filter .12s;}
#lib-hl-tooltip .lib-hl-color-dot[data-color="yellow"]{--dot-color:#eab308;}
#lib-hl-tooltip .lib-hl-color-dot[data-color="green"]{--dot-color:#22c55e;}
#lib-hl-tooltip .lib-hl-color-dot[data-color="orange"]{--dot-color:#f97316;}
#lib-hl-tooltip .lib-hl-color-dot[data-color="blue"]{--dot-color:#0ea5e9;}
#lib-hl-tooltip .lib-hl-palette .lib-hl-color-dot:hover{background:var(--dot-color);border-color:rgba(15,23,42,.72);box-shadow:0 0 0 2px rgba(255,255,255,.45);filter:brightness(1.05);}
#lib-hl-tooltip .lib-hl-palette .lib-hl-color-dot.is-active{transform:scale(1.08);box-shadow:0 0 0 2px rgba(245,158,11,.22),0 0 0 4px rgba(15,23,42,.08);}
.lib-hl-actions{display:grid;grid-template-columns:1fr 1fr;gap:.34rem;}
.lib-hl-actions button{display:flex;align-items:center;justify-content:center;gap:.32rem;padding:.32rem .45rem;border:1px solid rgba(245,158,11,.3);border-radius:6px;background:rgba(245,158,11,.08);font-size:.72rem;line-height:1.2;text-align:center;}
.lib-hl-actions button:hover{background:rgba(245,158,11,.18);}
.lib-hl-actions button:disabled{opacity:.45;cursor:not-allowed;background:rgba(100,116,139,.1);border-color:rgba(100,116,139,.18);color:var(--text-dim);}
/* Phones: the tooltip now opens from touch selections too (selectionchange
   path in library.js) — give it finger-sized targets and cap its width. */
@media (max-width:620px){
  .lib-hl-tooltip{min-width:0;width:min(92vw,340px);}
  #lib-hl-tooltip .lib-hl-palette .lib-hl-color-dot{width:22px;height:22px;min-width:22px;min-height:22px;}
  .lib-hl-actions button{min-height:40px;font-size:.74rem;}
}
/* Sticky-note hover bubble shown above a noted highlight */
.lib-note-bubble{position:fixed;z-index:9998;max-width:320px;padding:.55rem .7rem;border-radius:8px;background:#fef3c7;color:#78350f;border:1px solid #f59e0b;box-shadow:0 6px 18px rgba(0,0,0,.18);font-family:'DM Sans',sans-serif;font-size:.74rem;line-height:1.35;pointer-events:none;}
.lib-note-bubble::after{content:'';position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:0;height:0;border:7px solid transparent;border-top-color:#f59e0b;}
.lib-note-bubble::before{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:0;height:0;border:6px solid transparent;border-top-color:#fef3c7;z-index:1;}
/* Add/edit note modal */
.lib-note-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;justify-content:center;align-items:center;z-index:10700;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
/* 2026-09-14: the note dialog was 520px wide with an 80px box — a note of
   any length had to be read four lines at a time. It is now as wide as the
   flashcard editor and its body scrolls, so the whole note is visible. */
.lib-note-modal{background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;width:min(720px,94vw);max-height:90vh;max-height:90dvh;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden;}
.lib-note-modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:.65rem .85rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--text-primary);}
.lib-note-modal-hdr button{background:none;border:none;color:var(--text-dim);font-size:1.05rem;cursor:pointer;padding:4px 8px;border-radius:6px;}
.lib-note-modal-hdr button:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.lib-note-modal-body{padding:.85rem;display:flex;flex-direction:column;gap:.55rem;flex:1;min-height:0;overflow-y:auto;}
.lib-note-modal-snippet{font-family:'DM Sans',sans-serif;font-size:.72rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.45rem .6rem;border-radius:6px;border-left:3px solid #f59e0b;max-height:90px;overflow-y:auto;line-height:1.4;}
.lib-note-modal-body textarea{width:100%;min-height:200px;padding:.55rem .7rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;outline:none;resize:vertical;}
.lib-note-modal-body textarea:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(6,182,212,.15);}
.lib-note-modal-ftr{display:flex;justify-content:flex-end;gap:.5rem;padding:.65rem .85rem;border-top:1px solid var(--border);background:var(--bg-secondary);}
.lib-note-modal-ftr button{padding:.45rem .9rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-secondary);}
.lib-note-modal-ftr .lib-note-delete{margin-right:auto;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.28);color:var(--accent-red);}
.lib-note-modal-ftr .lib-note-delete:hover{background:rgba(239,68,68,.14);color:#b91c1c;}
.lib-note-modal-ftr .lib-note-save{background:var(--accent-cyan);border-color:var(--accent-cyan);color:#fff;}
.lib-note-modal-ftr .lib-note-save:hover{filter:brightness(1.1);}
.lib-note-modal-ftr .lib-note-cancel:hover{background:var(--bg-card-hover);color:var(--text-primary);}

/* ──────────────────────────────────────────────────────────────
   FLASHCARD PREVIEW MODAL — shown after the AI generates a card
   from highlighted text, before it's persisted to the deck. Uses
   the same visual language as .lib-note-modal but gets its own
   class names so it can be themed/positioned independently.
   ────────────────────────────────────────────────────────────── */
.fc-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;justify-content:center;align-items:center;z-index:10750;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.fc-preview-modal{background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;width:min(560px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;flex-direction:column;overflow:hidden;}
.fc-preview-hdr{display:flex;justify-content:space-between;align-items:center;padding:.65rem .85rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--text-primary);}
.fc-preview-hdr button{background:none;border:none;color:var(--text-dim);font-size:1.05rem;cursor:pointer;padding:4px 8px;border-radius:6px;}
.fc-preview-hdr button:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.fc-preview-body{padding:.85rem;display:flex;flex-direction:column;gap:.5rem;}
.fc-preview-snippet{font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.5rem .65rem;border-radius:6px;border-left:3px solid var(--accent-green);max-height:90px;overflow-y:auto;line-height:1.5;}
.fc-preview-lbl{font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--text-secondary);font-weight:700;letter-spacing:.02em;margin-top:.2rem;}
.fc-preview-lbl code{font-family:'JetBrains Mono',monospace;font-size:.74rem;background:rgba(16,185,129,.1);color:var(--accent-green);padding:0 .3rem;border-radius:3px;}
.fc-preview-body textarea{width:100%;padding:.55rem .7rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none;resize:vertical;line-height:1.55;}
.fc-preview-body textarea:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px rgba(16,185,129,.15);}
.fc-preview-hint{font-size:.8rem;color:var(--text-secondary);font-style:normal;margin-top:.25rem;line-height:1.55;}
.fc-preview-ftr{display:flex;justify-content:flex-end;gap:.5rem;padding:.65rem .85rem;border-top:1px solid var(--border);background:var(--bg-secondary);}
.fc-preview-ftr button{padding:.45rem .9rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-secondary);}
.fc-preview-ftr .fc-preview-save{background:var(--accent-green);border-color:var(--accent-green);color:#fff;}
.fc-preview-ftr .fc-preview-save:hover{filter:brightness(1.1);}
.fc-preview-ftr .fc-preview-cancel:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.fc-preview-card{border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent-green) 10%,var(--bg-card)) 0%,var(--bg-card) 100%);padding:.75rem .8rem;display:flex;flex-direction:column;gap:.45rem;}
.fc-preview-card-kicker{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green);}
.fc-preview-card-front{font-size:.92rem;color:var(--text-primary);line-height:1.65;}
.fc-preview-card-answer{font-size:.78rem;color:var(--text-secondary);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.fc-preview-answer-chip{display:inline-flex;align-items:center;padding:.18rem .5rem;border-radius:999px;background:rgba(16,185,129,.14);color:var(--accent-green);font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;}
.fc-preview-blank{display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:.08rem .45rem;border-bottom:2px solid var(--accent-green);color:var(--accent-green);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;}
.fc-preview-muted{color:var(--text-dim);font-style:italic;}

/* ══════════════════════════════════════════════════════════════
   LABS, EXPLAINED — high-yield lab reference page
   Each lab is its own collapsible card (mirrors Clinical Pocket
   Guide). Categories render as banner headers, not cards.
   ══════════════════════════════════════════════════════════════ */
/* Lock card width to a fixed comfortable reading column so expanding
   a category never reflows the page. Matches the trials body width. */
#labs-explained-content{max-width:760px;width:100%;}
#labs-explained-content .mgh-lib-card{max-width:760px;width:100%;}
#labs-explained-content .mgh-lib-content{padding:.4rem .2rem .2rem;}

/* Category banner header — sits above each group of lab cards.
   Banner is now clickable to expand/collapse the category in the
   "All" view (same pattern as palliationExplained.js). */
.le-cat-section{margin-bottom:1.1rem;}
.le-cat-banner{display:flex;align-items:center;gap:.55rem;margin:1.1rem 0 .55rem;padding:.55rem .8rem;border-radius:8px;border-left:3px solid var(--border);font-family:'JetBrains Mono',monospace;cursor:pointer;transition:filter .12s,transform .08s;user-select:none;}
.le-cat-banner:hover{filter:brightness(1.06);}
.le-cat-banner:active{transform:scale(.998);}
.le-cat-section:first-child .le-cat-banner{margin-top:.2rem;}
.le-cat-banner-icon{font-size:1rem;line-height:1;}
.le-cat-banner-name{font-size:.92rem;font-weight:700;letter-spacing:.02em;}
.le-cat-banner-count{margin-left:.7rem;font-size:.72rem;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.le-cat-banner-arrow{margin-left:auto;font-size:.7rem;line-height:1;opacity:.7;transition:transform .18s ease;}
.le-cat-section.open .le-cat-banner-arrow{transform:rotate(180deg);}
.le-cat-cards{display:none;}
.le-cat-section.open .le-cat-cards{display:block;animation:leCatExpand .15s ease-out;}
@keyframes leCatExpand{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}

/* ── Labs tile-landing + detail view (Phase: tile conversion) ────
   Replaces the all-categories-as-dropdowns landing with a responsive
   tile grid (one tile per panel). Click → detail view of that panel's
   lab cards. Same Back-button + banner pattern as Consults. */
.le-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  width: 100%;
  margin: 0 0 1rem;
}
@media (max-width: 760px) { .le-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .le-tile-grid { grid-template-columns: 1fr; } }
.le-tile {
  appearance: none;
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--le-tile-accent, var(--accent-cyan));
  border-radius: 10px;
  padding: .75rem .75rem .8rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 110px;
}
.le-tile:hover {
  transform: translateY(-2px);
  border-color: var(--le-tile-accent, var(--accent-cyan));
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.le-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: .15rem;
}
.le-tile-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.le-tile-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.le-tile-note {
  font-size: .68rem;
  line-height: 1.5;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.le-back-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .65rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-cyan);
  cursor: pointer;
  margin-bottom: .8rem;
  transition: background .15s ease, border-color .15s ease;
}
.le-back-btn:hover { background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); border-color: var(--accent-cyan); }
.le-detail-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .85rem;
  margin: 0 0 .7rem;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.le-detail-banner-icon { font-size: 1.05rem; line-height: 1; }
.le-detail-banner-name { font-size: .92rem; font-weight: 700; letter-spacing: .02em; }
.le-detail-banner-count { margin-left: auto; font-size: .72rem; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.le-detail-cards { display: flex; flex-direction: column; gap: .45rem; }
.le-search-summary {
  font-size: .72rem;
  color: var(--text-secondary);
  margin: 0 0 .65rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
}
.le-search-summary strong { color: var(--text-primary); }
.le-search-result { margin-bottom: .55rem; }
.le-search-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .25rem .15rem;
}

/* Per-lab card — uses .mgh-lib-card outer shell with extra spacing between siblings */
.le-lab-card{margin-bottom:.45rem;}
.le-lab-card .mgh-lib-hdr{padding:.55rem .8rem;}
/* Lab name in the card header */
.le-lab-name{font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:700;cursor:help;}
.le-lab-full{display:inline-block;margin-left:.5rem;font-family:'DM Sans',sans-serif;font-size:.72rem;color:var(--text-dim);font-weight:500;}
@media(max-width:520px){.le-lab-full{display:block;margin-left:0;margin-top:.15rem;}}

/* ── Labs master-detail: category rail | (lab rail + detail) ──────
   A left column of lab-panel tiles (CBC, BMP, LFTs, …). Selecting one
   loads that panel's labs into the shared section browser (lab rail +
   featured detail) to its right — a clean three-pane drill-down. */
.le-cols{display:grid;grid-template-columns:196px minmax(0,1fr);gap:.75rem;align-items:start;margin-top:.4rem;}
.le-cat-rail{gap:.4rem;}
.le-cat-rail-label{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.15rem;padding-left:.1rem;}
.le-cat-tile{gap:.15rem;padding:.6rem .55rem;}
.le-cat-tile .at-section-tile-kicker{font-size:.64rem;letter-spacing:.05em;color:var(--text-dim);}
.le-cat-tile .at-section-tile-title{font-size:.82rem;}
.le-cat-tile.active .at-section-tile-kicker{color:var(--at-section-accent,var(--accent-cyan));}
.le-browser-col{min-width:0;}
.le-browser-col .at-section-browser{margin-top:0;}
/* The featured detail column is narrower than the old full-width lab card,
   so stack the High/Low blocks (and any wide severity-band grid) vertically
   for readability instead of squeezing them side by side. */
#le-detail-browser .le-sides{grid-template-columns:1fr;}
#le-detail-browser .le-side-grid{grid-template-columns:1fr;}
@media(max-width:860px){
  .le-cols{grid-template-columns:1fr;}
  /* Higher specificity (.le-cat-rail.at-section-rail) so these beat the base
     .at-section-rail sticky/column rules that appear later in the file. */
  .le-cat-rail.at-section-rail{position:static;max-height:none;overflow:visible;flex-direction:row;flex-wrap:wrap;}
  .le-cat-rail .le-cat-tile{flex:1 1 130px;}
  .le-cat-rail-label{flex-basis:100%;}
}

/* High/Low side-by-side on wide screens, stacked on narrow */
.le-sides{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;}
@media(max-width:680px){.le-sides{grid-template-columns:1fr;}}
/* When a lab only has one of {high, low} populated (e.g. AST/ALT where
 * "low" isn't clinically meaningful), the single side fills the full
 * row instead of sitting in a half-width column with empty space next
 * to it. :has(> :only-child) collapses the grid down to one track. */
.le-sides:has(> .le-side:only-child){grid-template-columns:1fr;}
/* For long sides with detailed severity bands, use an internal 2-column
 * grid so the user sees the intro + details side-by-side instead of
 * scrolling a tall single column. Falls back to one column on narrow
 * screens. */
.le-side-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;}
@media(max-width:780px){.le-side-grid{grid-template-columns:1fr;}}
.le-side-intro,.le-side-details{min-width:0;}
.le-side-wide{width:100%;}

/* Each side is a thin card with a colored left border (red=high, blue=low) */
.le-side{background:var(--bg-secondary);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:6px;padding:.5rem .6rem;}
.le-side-hdr{font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.3rem;}
.le-meaning{font-size:.74rem;color:var(--text-secondary);line-height:1.4;margin-bottom:.35rem;}
.le-consider-label{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.18rem;font-weight:600;}
.le-dx{margin:0 0 .25rem 0;padding-left:1rem;}
.le-dx li{font-size:.74rem;color:var(--text-primary);line-height:1.4;margin-bottom:.12rem;}
.le-pearl{margin-top:.4rem;padding:.4rem .55rem;border-radius:6px;background:rgba(250,204,21,.08);border-left:2px solid var(--accent-amber);font-size:.71rem;color:var(--text-secondary);line-height:1.4;}
.le-pearl strong{color:var(--accent-amber);}
.le-overview{max-width:760px;width:100%;margin:0 0 1rem;}
.le-overview-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.75fr);gap:.85rem;padding:1rem 1rem .95rem;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg, rgba(6,182,212,.09), rgba(6,182,212,.03));}
.le-overview-copy h3{font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:700;color:var(--text-primary);margin:.2rem 0 .4rem;}
.le-overview-copy p,.le-search-summary{font-size:.74rem;line-height:1.55;color:var(--text-secondary);}
.le-overview-kicker{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-cyan);}
.le-overview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;align-self:start;}
.le-overview-stat{padding:.6rem .55rem;border:1px solid rgba(6,182,212,.16);border-radius:10px;background:rgba(255,255,255,.04);text-align:center;}
.le-overview-stat strong{display:block;font-family:'JetBrains Mono',monospace;font-size:.92rem;color:var(--text-primary);}
.le-overview-stat span{display:block;font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem;}
.le-rapid-row{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0;}
.le-rapid-chip,.le-lab-jump{border:1px solid rgba(6,182,212,.22);border-radius:999px;padding:.32rem .62rem;background:var(--bg-card);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.le-rapid-chip:hover,.le-lab-jump:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);transform:translateY(-1px);}
.le-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}
.le-overview-card{border:1px solid var(--border);border-top:3px solid var(--le-accent);border-radius:12px;padding:.8rem .9rem;background:var(--bg-card);text-align:left;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease;}
.le-overview-card:hover{border-color:var(--le-accent);background:var(--bg-card-hover);transform:translateY(-2px);}
.le-overview-card-title{font-family:'JetBrains Mono',monospace;font-size:.77rem;font-weight:700;color:var(--text-primary);}
.le-overview-card-meta{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin:.2rem 0 .45rem;}
.le-overview-card-copy{font-size:.72rem;line-height:1.5;color:var(--text-secondary);}
.le-overview-card-list{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.55rem;}
.le-overview-card-list span{padding:.18rem .42rem;border-radius:999px;background:rgba(6,182,212,.08);font-size:.68rem;color:var(--text-secondary);}
.le-cat-intro{padding:.55rem .65rem .65rem;margin-bottom:.45rem;border:1px solid var(--border);border-radius:10px;background:rgba(6,182,212,.04);}
.le-cat-note{font-size:.73rem;line-height:1.5;color:var(--text-secondary);margin-bottom:.45rem;}
.le-lab-jumps{display:flex;flex-wrap:wrap;gap:.38rem;}
.le-lab-header-meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.38rem;}
.le-lab-preview-chip{display:inline-flex;align-items:center;gap:.18rem;padding:.15rem .42rem;border-radius:999px;border:1px solid;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.le-lab-preview-high{border-color:rgba(239,68,68,.28);color:#ef4444;background:rgba(239,68,68,.08);}
.le-lab-preview-low{border-color:rgba(59,130,246,.28);color:#3b82f6;background:rgba(59,130,246,.08);}
@media(max-width:760px){.le-overview-hero{grid-template-columns:1fr;}.le-overview-stats{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.le-overview-grid{grid-template-columns:1fr;}.le-overview-stats{grid-template-columns:1fr 1fr;}}

/* ══════════════════════════════════════════════════════════════
   PALLIATION, EXPLAINED — interventions by system
   Each intervention is its own collapsible card; the per-card body
   uses three labelled rows (What it is / Performed by / Common
   indications) plus an optional pearl. Reuses .mgh-lib-card outer
   shell for visual consistency with the Pocket Guide.
   ══════════════════════════════════════════════════════════════ */
#palliation-explained-content{max-width:760px;width:100%;}
#palliation-explained-content .mgh-lib-card{max-width:760px;width:100%;}
#palliation-explained-content .mgh-lib-content{padding:.5rem .25rem .25rem;}
.pe-cat-section{margin-bottom:1.1rem;}
.pe-cat-banner{display:flex;align-items:center;gap:.55rem;margin:1.1rem 0 .55rem;padding:.55rem .8rem;border-radius:8px;border-left:3px solid var(--border);font-family:'JetBrains Mono',monospace;cursor:pointer;transition:filter .12s,transform .08s;user-select:none;}
.pe-cat-banner:hover{filter:brightness(1.06);}
.pe-cat-banner:active{transform:scale(.998);}
.pe-cat-section:first-child .pe-cat-banner{margin-top:.2rem;}
.pe-cat-banner-icon{font-size:1rem;line-height:1;}
.pe-cat-banner-name{font-size:.92rem;font-weight:700;letter-spacing:.02em;}
.pe-cat-banner-count{margin-left:.7rem;font-size:.72rem;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.pe-cat-banner-arrow{margin-left:auto;font-size:.7rem;line-height:1;opacity:.7;transition:transform .18s ease;}
.pe-cat-section.open .pe-cat-banner-arrow{transform:rotate(180deg);}
/* The list of intervention cards inside a category — hidden by
   default, revealed when the parent .pe-cat-section gets .open. */
.pe-cat-cards{display:none;}
.pe-cat-section.open .pe-cat-cards{display:block;animation:peCatExpand .15s ease-out;}
@keyframes peCatExpand{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
.pe-int-card{margin-bottom:.45rem;}
.pe-int-card .mgh-lib-hdr{padding:.55rem .8rem;}
.pe-int-name{font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:700;}
.pe-row{margin-bottom:.55rem;}
.pe-row:last-child{margin-bottom:0;}
.pe-row-label{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.18rem;}
.pe-row-text{font-size:.78rem;color:var(--text-primary);line-height:1.45;}
.pe-indications{margin:0;padding-left:1.1rem;}
.pe-indications li{font-size:.78rem;color:var(--text-primary);line-height:1.45;margin-bottom:.15rem;}
.pe-pearl{margin-top:.55rem;padding:.45rem .6rem;border-radius:6px;background:rgba(250,204,21,.08);border-left:2px solid var(--accent-amber);font-size:.74rem;color:var(--text-secondary);line-height:1.45;}
.pe-pearl strong{color:var(--accent-amber);}

/* ══════════════════════════════════════════════════════════════
   CONSULTS & SUBSPECIALTY PLAYBOOKS — pre-call cheatsheets
   Each scenario card stacks four labelled blocks (when to consult /
   order before calling / what they'll ask / initial mgmt) plus an
   optional pearl. Same outer card shell as Pocket Guide and the
   other "Explained" pages.
   ══════════════════════════════════════════════════════════════ */
#consults-playbooks-content{max-width:760px;width:100%;}
#consults-playbooks-content .mgh-lib-card{max-width:760px;width:100%;}
#consults-playbooks-content .mgh-lib-content{padding:.5rem .25rem .25rem;}
.cp-spec-section{margin-bottom:1.1rem;}
.cp-spec-banner{display:flex;align-items:center;gap:.55rem;margin:1.1rem 0 .55rem;padding:.55rem .8rem;border-radius:8px;border-left:3px solid var(--border);font-family:'JetBrains Mono',monospace;cursor:pointer;transition:filter .12s,transform .08s;user-select:none;}
.cp-spec-banner:hover{filter:brightness(1.06);}
.cp-spec-banner:active{transform:scale(.998);}
.cp-spec-section:first-child .cp-spec-banner{margin-top:.2rem;}
.cp-spec-banner-icon{font-size:1rem;line-height:1;}
.cp-spec-banner-name{font-size:.92rem;font-weight:700;letter-spacing:.02em;}
.cp-spec-banner-count{margin-left:.7rem;font-size:.72rem;color:var(--text-dim);font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.cp-spec-banner-arrow{margin-left:auto;font-size:.7rem;line-height:1;opacity:.7;transition:transform .18s ease;}
.cp-spec-section.open .cp-spec-banner-arrow{transform:rotate(180deg);}
.cp-spec-cards{display:none;}
.cp-spec-section.open .cp-spec-cards{display:block;animation:cpSpecExpand .15s ease-out;}
@keyframes cpSpecExpand{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
.cp-scenario-card{margin-bottom:.45rem;}
.cp-scenario-card .mgh-lib-hdr{padding:.55rem .8rem;}
.cp-sc-name{font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:700;}
.cp-row{margin-bottom:.6rem;}
.cp-row:last-child{margin-bottom:0;}
.cp-row-label{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.18rem;}
.cp-row-text{font-size:.85rem;color:var(--text-primary);line-height:1.55;}
.cp-list{margin:0;padding-left:1.1rem;}
.cp-list li{font-size:.78rem;color:var(--text-primary);line-height:1.45;margin-bottom:.18rem;}
.cp-pearl{margin-top:.55rem;padding:.45rem .6rem;border-radius:6px;background:rgba(250,204,21,.08);border-left:2px solid var(--accent-amber);font-size:.74rem;color:var(--text-secondary);line-height:1.45;}
.cp-pearl strong{color:var(--accent-amber);}

/* ── Consults tile-landing + detail view (Phase: tile conversion) ─
   Replaces the all-dropdowns layout with: a responsive tile grid as
   the landing, a single-specialty detail view with a back button.
   Search still works and produces a flat results list with specialty
   crumbs above each card. */
.cp-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  width: 100%;
  margin: 0 0 1rem;
}
@media (max-width: 900px) { .cp-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 660px) { .cp-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .cp-tile-grid { grid-template-columns: 1fr; } }
.cp-tile {
  appearance: none;
  text-align: center;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--cp-tile-accent, var(--accent-cyan));
  border-radius: 10px;
  padding: .75rem .75rem .8rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-height: 110px;
}
.cp-tile:hover {
  transform: translateY(-2px);
  border-color: var(--cp-tile-accent, var(--accent-cyan));
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.cp-tile-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: .15rem;
}
.cp-tile-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.25;
}
.cp-tile-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cp-tile-preview {
  font-size: .72rem;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Consult launcher (default landing) ─────────────────────── */
.cp-launcher{display:flex;flex-direction:column;gap:1.15rem;width:100%;}
.cp-launch-sec{width:100%;}
.cp-launch-h{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--text-primary);margin:0 0 .55rem;}
.cp-launch-h-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap;}
.cp-launch-h-row .cp-launch-h{margin:0;}

/* Common on-call consults — compact deep-link tiles */
.cp-quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;}
.cp-quick-tile{display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;padding:.6rem .7rem;border:1px solid var(--border);border-left:3px solid var(--cp-q,var(--accent-cyan));border-radius:10px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.cp-quick-tile:hover{transform:translateY(-2px);border-color:var(--cp-q,var(--accent-cyan));box-shadow:0 3px 12px rgba(0,0,0,.06);}
.cp-quick-ic{font-size:1.05rem;line-height:1;}
.cp-quick-label{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;line-height:1.2;color:var(--cp-q,var(--text-primary));}
.cp-quick-spec{font-size:.68rem;color:var(--text-dim);letter-spacing:.02em;}

/* Browse-by-specialty toggle (Grouped | All A–Z) */
.cp-browse-toggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;}
.cp-bt{appearance:none;background:transparent;border:none;padding:.32rem .66rem;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;color:var(--text-dim);cursor:pointer;transition:background .15s ease,color .15s ease;}
.cp-bt.active{background:var(--accent-cyan);color:#fff;}
.cp-bt:not(.active):hover{color:var(--text-primary);background:var(--bg-card-hover);}

/* Grouped specialty tiles */
.cp-group{margin-bottom:.9rem;}
.cp-group:last-child{margin-bottom:0;}
.cp-group-h{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .45rem;}
.cp-group-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
.cp-spec-tile{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem;border:1px solid var(--border);border-left:3px solid var(--cp-st,var(--accent-cyan));border-radius:10px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.cp-spec-tile:hover{transform:translateY(-2px);border-color:var(--cp-st,var(--accent-cyan));box-shadow:0 3px 12px rgba(0,0,0,.06);}
.cp-spec-tile-ic{width:26px;height:26px;flex-shrink:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;}
.cp-spec-tile-txt{display:flex;flex-direction:column;gap:.08rem;min-width:0;}
.cp-spec-tile-name{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;line-height:1.2;color:var(--text-primary);}
.cp-spec-tile-count{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);}

/* Opt-in flat A–Z specialty chips */
.cp-az-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.cp-az-chip{padding:.34rem .62rem;border:1px solid var(--border);border-radius:999px;background:var(--bg-card);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;transition:background .15s ease,transform .12s ease;}
.cp-az-chip:hover{background:var(--bg-card-hover);transform:translateY(-1px);}

@media (max-width: 760px){
  .cp-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cp-group-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 440px){
  .cp-quick-grid{grid-template-columns:1fr;}
  .cp-group-tiles{grid-template-columns:1fr;}
}

/* Back-to-list button shown in detail view + search-result mode */
.cp-back-btn {
  display: block;
  width: fit-content;
  align-self: flex-start;
  margin-left: 0;
  margin-right: auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .65rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-cyan);
  cursor: pointer;
  margin-bottom: .8rem;
  transition: background .15s ease, border-color .15s ease;
}
.cp-back-btn:hover { background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); border-color: var(--accent-cyan); }

/* Detail-view banner mirrors the old spec-banner styling but is now
   a static header instead of a click-to-collapse control. */
.cp-detail-banner {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem .85rem;
  margin: 0 0 .7rem;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
}
.cp-detail-banner-icon { font-size: 1.05rem; line-height: 1; }
.cp-detail-banner-name { font-size: .92rem; font-weight: 700; letter-spacing: .02em; }
.cp-detail-banner-count { margin-left: auto; font-size: .72rem; color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.cp-detail-cards { display: flex; flex-direction: column; gap: .45rem; }

/* Search results — flat list with a specialty crumb above each card */
.cp-search-summary {
  font-size: .72rem;
  color: var(--text-secondary);
  margin: 0 0 .65rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
}
.cp-search-summary strong { color: var(--text-primary); }
.cp-search-result { margin-bottom: .55rem; }
.cp-search-crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .25rem .15rem;
}

@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes iconPulse{0%,100%{box-shadow:0 6px 28px var(--accent-red-glow)}50%{box-shadow:0 6px 44px rgba(239,68,68,.45)}}
@keyframes typeDot{0%,60%,100%{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}

/* Scrollbar */
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* ══ SHARED ══ */
.hidden{display:none!important;}
.page{position:relative;z-index:1;display:none;flex-direction:column;height:100vh;height:100dvh;}
.page.active{display:flex;}
.page-header{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;}
.page-header h2{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;}
.page-content{flex:1;overflow-y:auto;padding:1.25rem 1.25rem 4rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem;}
.hdr-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;padding:.28rem .55rem;gap:.2rem;}
.back-btn{width:30px;height:30px;font-size:.95rem;padding:0;}
.back-btn:hover{background:var(--bg-card);}
/* "Library" + "Home" header shortcuts injected next to the back button on
   library/reference pages (see _ensureLibNavButtons in ui.js). */
.lib-nav-shortcuts{display:inline-flex;align-items:center;gap:.4rem;}
.lib-nav-shortcut{white-space:nowrap;border-color:var(--accent-cyan);color:var(--accent-cyan);}
.lib-nav-shortcut:hover{background:rgba(6,182,212,.12);}
@media(max-width:620px){.lib-nav-shortcut .hdr-btn-label{display:none;}}
.end-btn{border-color:var(--accent-red);color:var(--accent-red);}
.end-btn:hover{background:rgba(239,68,68,.1);}
.qs-btn{border-color:var(--accent-amber);color:var(--accent-amber);}
.qs-btn:hover{background:rgba(245,158,11,.1);}
.badge{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:600;letter-spacing:.04em;padding:.18rem .4rem;border-radius:4px;text-transform:uppercase;}
.badge-fb-rt{background:rgba(59,130,246,.15);color:var(--accent-blue);}
.badge-fb-end{background:rgba(245,158,11,.15);color:var(--accent-amber);}
.badge-easy{background:rgba(34,197,94,.15);color:var(--accent-green);}
.badge-hard{background:rgba(239,68,68,.15);color:var(--accent-red);}
.badge-graded{background:rgba(168,85,247,.15);color:var(--accent-purple);}
.badge-ungraded{background:rgba(100,116,139,.15);color:var(--text-dim);}
.badge-acls{background:rgba(239,68,68,.15);color:var(--accent-red);}
.badge-rapid{background:rgba(6,182,212,.15);color:var(--accent-cyan);}
.badge-consult{background:rgba(168,85,247,.15);color:var(--accent-purple);}
.badge-tp{background:rgba(249,115,22,.15);color:var(--accent-orange);}

/* ══ HOME ══ */
#home.active{display:flex;flex-direction:row;min-height:100vh;min-height:100dvh;overflow-y:auto;}
.home-sidebar{width:72px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .3rem;flex-shrink:0;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;}
.sidebar-btn{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.55rem .3rem;border-radius:10px;border:1.5px solid transparent;background:transparent;color:var(--text-dim);cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;width:100%;}
.sidebar-btn:hover{background:var(--bg-card);border-color:var(--border);color:var(--text-primary);}
.sidebar-icon{font-size:1.1rem;line-height:1;}
.sidebar-label{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.sidebar-btn.purple:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.sidebar-btn.blue:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.sidebar-btn.green:hover{border-color:var(--accent-green);color:var(--accent-green);}
.sidebar-btn.cyan:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}
.sidebar-btn.orange:hover{border-color:var(--accent-orange);color:var(--accent-orange);}
.home-main{flex:1;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:1.25rem;}
.logo-area{text-align:center;margin:1rem 0;}
.logo-icon{width:60px;height:60px;margin:0 auto .9rem;background:linear-gradient(135deg,var(--accent-red),#b91c1c);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;animation:iconPulse 2.5s ease-in-out infinite;}
.logo-area h1{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;margin-bottom:.25rem;}
.logo-area h1 span{color:var(--accent-red);}
.logo-area p{color:var(--text-secondary);font-size:.88rem;max-width:400px;}
/* Sim length toggle */
.tb.a-simlen-light{border-color:var(--accent-amber);background:rgba(245,158,11,.12);color:var(--accent-amber);}
.tb.a-simlen-short{border-color:var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);}
.tb.a-simlen-med{border-color:var(--accent-blue);background:rgba(59,130,246,.1);color:var(--accent-blue);}
.tb.a-simlen-long{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
.sp{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.25rem;width:100%;max-width:560px;margin-bottom:1rem;}
.sg{margin-bottom:1.1rem;}.sg:last-child{margin-bottom:0;}
.sl{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-cyan);margin-bottom:.55rem;display:flex;align-items:center;gap:.4rem;cursor:default;}
.sl .collapse-arrow{cursor:pointer;font-size:.7rem;transition:transform .2s;user-select:none;}
.sl .collapse-arrow.open{transform:rotate(90deg);}
.tg{display:flex;gap:.4rem;flex-wrap:wrap;}
/* ACLS "Code scenario" tiers — three equal cards, each carrying a longer
   descriptive sublabel, so use a 3-col grid that wraps to 1 col on narrow
   widths. The recommended (Standard) tile gets a small "Balanced" badge. */
.tg-acls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;}
.tg-acls .tb{position:relative;padding:.7rem .7rem .75rem;text-align:left;}
.tg-acls .tb .td{line-height:1.4;}
.tg-acls .tb.tb-rec{border-color:var(--accent-blue);}
.sim-rec-tag{position:absolute;top:-.6rem;left:.65rem;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-blue);background:var(--bg-card,#fff);border:1px solid var(--accent-blue);border-radius:6px;padding:.05rem .35rem;}
@media(max-width:620px){.tg-acls{grid-template-columns:1fr;}}
.tb{flex:1;min-width:0;padding:.55rem .65rem;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .22s,border-color .22s,color .22s,box-shadow .22s,transform .22s,opacity .22s;text-align:center;}
.tb:hover{border-color:var(--border-light);background:var(--bg-card-hover);}
.td{font-size:.72rem;color:var(--text-dim);margin-top:.15rem;font-weight:400;}
.tb.a-fb-rt{border-color:var(--accent-blue);background:rgba(59,130,246,.1);color:var(--accent-blue);}
.tb.a-fb-end{border-color:var(--accent-amber);background:rgba(245,158,11,.1);color:var(--accent-amber);}
.tb.a-d-easy{border-color:var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);}
.tb.a-d-hard{border-color:var(--accent-red);background:rgba(239,68,68,.1);color:var(--accent-red);}
.tb.a-graded{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
.tb.a-ungraded{border-color:var(--text-dim);background:rgba(100,116,139,.1);color:var(--text-secondary);}
.tb.a-acls{border-color:var(--accent-red);background:rgba(239,68,68,.1);color:var(--accent-red);}
.tb.a-rapid{border-color:var(--accent-cyan);background:rgba(6,182,212,.1);color:var(--accent-cyan);}
.tb.a-consult{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
/* Consult origin (ED / General Wards / ICU) selected state — same purple
   shade as the other selected setup options. */
.tb.a-consult-ed,
.tb.a-consult-wards,
.tb.a-consult-icu{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
.tb.a-tp-on{border-color:var(--accent-orange);background:rgba(249,115,22,.1);color:var(--accent-orange);}
.tb.a-tp-off{border-color:var(--text-dim);background:rgba(100,116,139,.1);color:var(--text-secondary);}
.text-input,.cpa{width:100%;padding:.55rem .8rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.85rem;outline:none;transition:border-color .2s;}
.text-input:focus,.cpa:focus{border-color:var(--accent-blue);}
.text-input::placeholder,.cpa::placeholder{color:var(--text-dim);}
.cpa{resize:vertical;min-height:50px;max-height:110px;font-size:.8rem;}
.cph{font-size:.68rem;color:var(--text-dim);margin-top:.25rem;}
/* Helper row that carries the live character counter on the right. */
.cph-counter-row{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;}
.char-counter{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.char-counter.char-counter-full{color:var(--accent-amber);font-weight:700;}
.sr{display:flex;align-items:center;gap:.55rem;}
.sb{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:.95rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.sb:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.sv{font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;min-width:32px;text-align:center;}
.sh{font-size:.68rem;color:var(--text-dim);margin-left:.35rem;}
.cat-chips{display:flex;flex-wrap:wrap;gap:.3rem;}
.cc{padding:.3rem .55rem;border-radius:6px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.68rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;white-space:nowrap;}
.cc:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}
.cc.active{border-color:var(--accent-cyan);background:rgba(6,182,212,.12);color:var(--accent-cyan);}
.cc.acls-cat:hover{border-color:var(--accent-red);color:var(--accent-red);}
.cc.acls-cat.active{border-color:var(--accent-red);background:rgba(239,68,68,.12);color:var(--accent-red);}
.gen-btn{width:100%;max-width:560px;padding:.95rem 1.5rem;border-radius:12px;border:none;background:linear-gradient(135deg,var(--accent-red),var(--accent-red));color:white;font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s,opacity .3s;box-shadow:0 5px 28px var(--accent-red-glow);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:52px;}
.gen-btn:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(239,68,68,.4);}
.gen-btn::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);transition:left .5s;}
.gen-btn:hover::after{left:100%;}
.sec-btns{width:100%;max-width:560px;display:flex;gap:.4rem;margin-top:.55rem;}
.sec-b{flex:1;padding:.6rem .8rem;border-radius:10px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .22s,border-color .22s,color .22s,box-shadow .22s,transform .22s,opacity .22s;}
.sec-b:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.fn{margin-top:1rem;font-size:.68rem;color:var(--text-dim);text-align:center;max-width:380px;}


/* ══ HOME GRID (removed — sidebar ribbon now used) ══ */

/* ══ CHAT ══ */
.progress-wrap{padding:.2rem .75rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:.5rem;}
.progress-bar{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-blue),var(--accent-green));border-radius:3px;transition:width .4s;width:0%;}
.progress-lbl{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-dim);min-width:28px;text-align:right;}
.unsure-btn{padding:.4rem .65rem;border-radius:8px;border:1.5px solid var(--border);background:rgba(245,158,11,.08);color:var(--accent-amber);font-size:.73rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;white-space:nowrap;flex-shrink:0;}
.unsure-btn:hover{background:rgba(245,158,11,.18);border-color:var(--accent-amber);}
.unsure-btn:disabled{opacity:.35;cursor:not-allowed;}
/* Clinical Fact of the Day — bumped up so the green eyebrow + body
 * are easy to read at landing-page distance. The old .58rem eyebrow
 * was eye-strain-small. Card itself widened slightly so the larger
 * type doesn't wrap awkwardly. */
/* Deck-style daily card: the card sits on a slightly rotated "stack"
   (::before), carries a specialty-tinted top accent bar (::after) and a
   soft glow in the fact's category color (--fotd-accent, set per fact
   by fotd.js). Hover lifts the whole deck. */
.fotd{position:relative;z-index:0;background:var(--bg-card);
  border:1px solid color-mix(in srgb, var(--fotd-accent,#22c55e) 32%, var(--border));
  border-radius:16px;padding:1.15rem 1.3rem 1rem;width:100%;max-width:580px;margin-bottom:1rem;
  box-shadow:0 10px 30px color-mix(in srgb, var(--fotd-accent,#22c55e) 12%, transparent),0 2px 6px rgba(0,0,0,.05);
  transition:transform .22s ease, box-shadow .25s ease, border-color .35s ease;}
.fotd:hover{transform:translateY(-2px);box-shadow:0 14px 36px color-mix(in srgb, var(--fotd-accent,#22c55e) 18%, transparent),0 3px 8px rgba(0,0,0,.06);}
.fotd::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--bg-card);
  border:1px solid var(--border);border-radius:16px;opacity:.75;
  transform:rotate(-1.5deg) translateY(7px);transition:transform .25s ease;}
.fotd:hover::before{transform:rotate(-2.2deg) translateY(9px);}
.fotd::after{content:'';position:absolute;top:0;left:16%;right:16%;height:3px;border-radius:0 0 6px 6px;
  background:linear-gradient(90deg,transparent,var(--fotd-accent,#22c55e),transparent);opacity:.9;transition:background .35s ease;}
/* Card-flip content swap (Another fact / Previous). fotd.js toggles
   .fotd-flipping around the content swap; reduced-motion swaps flat. */
.fotd-inner{transition:transform .22s ease-out, opacity .22s ease-out;transform:perspective(900px) rotateY(0);}
.fotd.fotd-flipping .fotd-inner{transform:perspective(900px) rotateY(84deg);opacity:.35;transition:transform .18s ease-in, opacity .18s ease-in;}
.fotd-hdr{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem;}
.fotd-date{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fotd-accent,#22c55e);background:color-mix(in srgb, var(--fotd-accent,#22c55e) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--fotd-accent,#22c55e) 30%, transparent);
  padding:.22rem .5rem;border-radius:8px;min-width:56px;text-align:center;transition:color .35s ease, border-color .35s ease, background .35s ease;}
.fotd-date-ghost{visibility:hidden;}
.fotd-actions{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:.75rem;}
.fotd-btn{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:700;padding:.32rem .75rem;border-radius:999px;
  background:transparent;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;}
.fotd-btn:hover{transform:translateY(-1px);}
.fotd-btn-more{color:var(--accent-blue);border-color:rgba(59,130,246,.4);}
.fotd-btn-more:hover{background:rgba(59,130,246,.1);}
.fotd-btn-another{color:var(--accent-amber);border-color:rgba(245,158,11,.4);}
.fotd-btn-another:hover{background:rgba(245,158,11,.1);}
.fotd-btn-prev{color:var(--text-dim);}
.fotd-btn-prev:hover{color:var(--text-secondary);background:var(--bg-card-hover);}
@media (prefers-reduced-motion: reduce){
  .fotd,.fotd::before,.fotd-inner,.fotd-btn{transition:none;}
  .fotd:hover{transform:none;}
  .fotd.fotd-flipping .fotd-inner{transform:none;opacity:1;}
}
.fotd-lbl{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fotd-accent,var(--accent-green));margin:0;flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;text-align:center;flex-wrap:wrap;transition:color .35s ease;}
/* Topic + specialty sit on their OWN line beneath the green label, so the
   header no longer reads as one long same-colored run of text. The topic is
   neutral; the specialty pill is tinted per subject via --fotd-cat-color
   (set in fotd.js from the Clinical Pocket Guide's chapter colors). */
.fotd-meta{display:flex;align-items:center;justify-content:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.6rem;}
.fotd-topic{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--text-primary);}
.fotd-cat{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .5rem;border-radius:6px;color:var(--fotd-cat-color,var(--accent-green));background:color-mix(in srgb, var(--fotd-cat-color,var(--accent-green)) 14%, transparent);border:1px solid color-mix(in srgb, var(--fotd-cat-color,var(--accent-green)) 34%, transparent);}
.fotd-txt{font-size:.92rem;color:var(--text-primary);line-height:1.6;}
.fotd-more{display:inline-block;margin-top:.45rem;font-size:.8rem;font-weight:700;color:var(--accent-blue);cursor:pointer;}
.fotd-more:hover{color:#60a5fa;}
.fotd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10600;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.fotd-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.5rem;max-width:580px;width:100%;max-height:75vh;overflow-y:auto;position:relative;}
.fotd-modal h3{font-family:'JetBrains Mono',monospace;font-size:.82rem;margin-bottom:.6rem;color:var(--accent-green);}
.fotd-modal p{font-size:.82rem;color:var(--text-secondary);line-height:1.55;margin-bottom:.4rem;}
.fotd-close{position:absolute;top:.6rem;right:.6rem;background:none;border:none;color:var(--text-dim);font-size:1rem;cursor:pointer;}
.fotd-close:hover{color:var(--text-primary);}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;gap:.35rem;flex-wrap:wrap;}
.ch-left{display:flex;align-items:center;gap:.45rem;}
.ch-right{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;}
.utility-bar{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;padding:.45rem .75rem;background:rgba(17,24,39,.82);border-bottom:1px solid var(--border);flex-shrink:0;}
.utility-pill{padding:.35rem .65rem;border-radius:999px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.68rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.utility-pill:hover{transform:translateY(-1px);color:var(--text-primary);}
.utility-pill.purple:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.utility-pill.blue:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.utility-pill.green:hover{border-color:var(--accent-green);color:var(--accent-green);}
.utility-pill.cyan:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}
.utility-pill.orange:hover{border-color:var(--accent-orange);color:var(--accent-orange);}
.ch-badges{display:flex;gap:.25rem;flex-wrap:wrap;}
.ct{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;}

/* Theme bar */
.theme-bar{display:flex;align-items:center;gap:.6rem;padding:.35rem .75rem;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;font-size:.68rem;color:var(--text-dim);}
.theme-bar label{display:flex;align-items:center;gap:.25rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;}
.theme-bar input[type=color]{width:22px;height:22px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:transparent;padding:0;}

.chat-body{flex:1;display:flex;overflow:hidden;}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.ma{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;scroll-behavior:smooth;}
.msg{max-width:85%;padding:.8rem 1rem;border-radius:12px;font-size:.84rem;line-height:1.6;animation:msgIn .3s ease;}
.msg-ai{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border);}
/* User bubbles are rendered with textContent (no markdown), so their newlines
   only appear if white-space preserves them. sendMsg() already puts a blank
   line ("\n\n") between free text and the orders-panel list; without pre-wrap
   HTML collapsed it to a single space and the orders ran straight on from the
   typed message. pre-wrap keeps the blank line and still wraps long lines. */
.msg-user{align-self:flex-end;background:linear-gradient(135deg,#1e40af,var(--accent-blue));color:white;border:none;white-space:pre-wrap;overflow-wrap:anywhere;}
.msg-sys{align-self:center;max-width:90%;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);color:var(--accent-amber);text-align:center;font-size:.76rem;}
.msg strong{font-weight:700;}.msg em{font-style:italic;color:var(--text-secondary);}
.msg h3{font-size:.9rem;margin:.55rem 0 .2rem;font-weight:700;}.msg p{margin:.2rem 0;}.msg ul,.msg ol{margin:.2rem 0 .2rem 1rem;}.msg li{margin:.1rem 0;}.msg hr{border:none;border-top:1px solid var(--border);margin:.55rem 0;}
/* Wrap-up sections ("Outcome summary", "How this case would have naturally concluded") render as bullets — see decorateAIBlocks. */
.msg .ai-wrap-lead{margin:.55rem 0 .2rem;font-weight:700;color:var(--text-primary);}
.msg .ai-wrap-list{margin:.1rem 0 .45rem 1.1rem;padding:0;}
.msg .ai-wrap-list li{margin:.14rem 0;line-height:1.55;}
.msg .user-hl{background:var(--user-highlight);color:#000;padding:0 2px;border-radius:2px;}
/* Wait indicator bubble — holds the Clinical Imprint loader (ciLoader.js)
   plus the Cancel / Try again controls injected by showT() in ui.js. */
.typing-ind{align-self:flex-start;padding:.6rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;display:none;gap:.6rem;align-items:center;flex-wrap:wrap;}

/* Action buttons row */
.action-row{padding:.5rem .75rem;background:var(--bg-secondary);border-top:1px solid var(--border);flex-shrink:0;display:none;justify-content:center;gap:.5rem;}
.action-btn{padding:.55rem 1.2rem;border-radius:10px;border:1.5px solid;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.action-btn.end-sim-action{border-color:var(--accent-red);background:rgba(239,68,68,.1);color:var(--accent-red);}
.action-btn.end-sim-action:hover{background:rgba(239,68,68,.2);}
.action-btn.debrief-action{border-color:var(--accent-amber);background:rgba(245,158,11,.1);color:var(--accent-amber);}
.action-btn.debrief-action:hover{background:rgba(245,158,11,.2);}
/* Per-button color variants so the six post-sim action buttons are visually
   distinguishable at a glance. Each overrides the generic .debrief-action. */
/* (.da-medrec removed — the "Finish Med Rec" debrief action button no longer renders.) */
.action-btn.debrief-action.da-questions{border-color:var(--accent-amber);background:rgba(245,158,11,.1);color:var(--accent-amber);}
.action-btn.debrief-action.da-questions:hover{background:rgba(245,158,11,.2);}
.action-btn.debrief-action.da-reading{border-color:var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);}
.action-btn.debrief-action.da-reading:hover{background:rgba(34,197,94,.2);}
.action-btn.debrief-action.da-home{border-color:var(--accent-cyan);background:rgba(6,182,212,.1);color:var(--accent-cyan);}
.action-btn.debrief-action.da-home:hover{background:rgba(6,182,212,.2);}

/* ── Post-sim action hierarchy ───────────────────────────────────────
   The five post-debrief actions used to render as five equal-weight,
   rainbow-colored pills, so nothing signaled the obvious next step.
   These three tiers replace that flat look:
     • primary-action   — the dominant "Get Feedback & Score" CTA
     • secondary-action — the learning cluster (flashcards/reading/debrief),
       uniform neutral styling so they read as related, not rival
     • exit-action      — the quiet "Home" escape, set apart by a divider
   The vertical-bar look uses the existing accent vars (no new colors). */
.action-row{align-items:center;}
.action-btn.primary-action{
  border-color:var(--accent-green);
  background:linear-gradient(180deg,rgba(34,197,94,.95),rgba(22,163,74,.95));
  color:#06210f;font-weight:800;padding:.6rem 1.5rem;font-size:.84rem;
  box-shadow:0 1px 10px rgba(34,197,94,.28);
}
.action-btn.primary-action:hover{
  background:linear-gradient(180deg,rgba(34,197,94,1),rgba(22,163,74,1));
  box-shadow:0 2px 14px rgba(34,197,94,.40);transform:translateY(-1px);
}
/* Debrief Questions — the second next-step CTA, paired with Get Feedback.
   Solid amber to match the Debrief Questions side panel's accent (--accent-amber). */
.action-btn.debrief-cta{
  border-color:var(--accent-amber);
  background:linear-gradient(180deg,rgba(245,158,11,.95),rgba(217,119,6,.95));
  color:#241302;font-weight:800;padding:.6rem 1.4rem;font-size:.84rem;
  box-shadow:0 1px 10px rgba(245,158,11,.28);
}
.action-btn.debrief-cta:hover{
  background:linear-gradient(180deg,rgba(245,158,11,1),rgba(217,119,6,1));
  box-shadow:0 2px 14px rgba(245,158,11,.40);transform:translateY(-1px);
}
.action-btn.secondary-action{
  border-color:var(--border);border-width:1px;background:var(--bg-secondary);
  color:var(--text-secondary);font-weight:600;
}
.action-btn.secondary-action:hover{
  color:var(--text-primary);border-color:var(--text-dim);background:var(--bg-card);
}
/* Add / Suggest Flashcards — light purple so the learning action reads as
   its own thing (not a grey ghost). Signals "you can add cards on what you
   just learned," not only skim auto-suggested ones. */
.action-btn.flashcard-action{
  border-color:var(--accent-purple);border-width:1.5px;
  background:rgba(168,85,247,.12);
  color:var(--accent-purple);font-weight:700;
}
.action-btn.flashcard-action:hover{
  background:rgba(168,85,247,.22);border-color:var(--accent-purple);color:var(--accent-purple);
  box-shadow:0 1px 10px var(--accent-purple-glow);transform:translateY(-1px);
}
.action-btn.exit-action{
  border-color:transparent;background:transparent;color:var(--text-dim);
  font-weight:600;
}
.action-btn.exit-action:hover{color:var(--text-primary);border-color:var(--text-dim);background:var(--bg-card);}
.action-sep{width:1px;align-self:stretch;margin:.15rem .15rem;background:var(--border);}

/* Highlight ref banner */
.hl-ref-banner{display:none;padding:.4rem .75rem;background:rgba(245,158,11,.08);border-top:1px solid rgba(245,158,11,.2);font-size:.72rem;color:var(--accent-amber);align-items:center;gap:.4rem;flex-shrink:0;}
.hl-ref-banner .hl-text{flex:1;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hl-ref-banner button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;}
.hl-ref-banner button:hover{color:var(--accent-red);}

.input-area{padding:.5rem .75rem;background:var(--bg-secondary);border-top:1px solid var(--border);flex-shrink:0;}
.input-row{display:flex;gap:.35rem;max-width:900px;margin:0 auto;align-items:flex-end;}
.ci{flex:1;padding:.65rem .8rem;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.84rem;outline:none;resize:none;min-height:38px;max-height:100px;transition:border-color .2s;}
.ci:focus{border-color:var(--accent-blue);}.ci::placeholder{color:var(--text-dim);}
.send-btn,.mic-btn{width:38px;height:38px;border-radius:10px;border:none;color:white;font-size:.95rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.send-btn{background:var(--accent-blue);}.send-btn:hover{background:var(--accent-blue);transform:scale(1.05);}.send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}

/* Phone-only floating theme toggle for the sim (replaces the Display row
   there — see the ≤600px media block). Hidden everywhere by default. */
.chat-theme-fab,.chat-customize-fab{display:none;position:fixed;top:calc(env(safe-area-inset-top, 0px) + 8px);right:8px;
  z-index:230;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;
  padding:0;font-size:1.05rem;line-height:1;cursor:pointer;
  background:color-mix(in srgb,var(--bg-card) 85%,transparent);
  border:1px solid var(--border-light);box-shadow:0 2px 10px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
/* Border customizer circle (2026-09-10) stacks under the theme circle. */
.chat-customize-fab{top:calc(env(safe-area-inset-top, 0px) + 50px);}
.mic-btn{background:var(--bg-card);border:1.5px solid var(--border);color:var(--text-secondary);font-size:.72rem;font-weight:600;width:auto;padding:0 .6rem;white-space:nowrap;}
.mic-btn:hover{border-color:var(--accent-red);color:var(--accent-red);}
.mic-btn.recording{background:var(--accent-red);color:white;border-color:var(--accent-red);animation:micPulse 1.5s ease-in-out infinite;}

/* Tooltips */
.hl-tooltip{position:fixed;display:none;background:var(--bg-card);border:1.5px solid var(--accent-amber);border-radius:6px;padding:.3rem .5rem;font-size:.68rem;font-weight:600;color:var(--accent-amber);box-shadow:0 4px 16px rgba(0,0,0,.4);z-index:200;gap:.3rem;}
/* ── Sim transcript color highlighter (2026-08-31) ──
   Palette dots in the sim selection tooltip + the painted marks. The marks
   reuse the Library's .lib-hl color variables (yellow default; green /
   orange / blue via data-hl-color) so both features look identical.
   color:inherit keeps highlighted text readable on the dark theme (the UA
   default for <mark> forces black text). */
.sim-hl-palette{display:flex;align-items:center;gap:.34rem;padding:0 .1rem;}
/* The generic .hl-tooltip button rule (background:none) outranks a bare
   class, so the dot rules are anchored on the tooltip id — same approach
   as #lib-hl-tooltip's palette. */
#sim-hl-tooltip .sim-hl-dot{width:15px;height:15px;min-width:15px;min-height:15px;padding:0;border-radius:999px;border:2px solid rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(15,23,42,.12);background:var(--dot-color);cursor:pointer;transition:transform .12s,filter .12s,box-shadow .12s;}
#sim-hl-tooltip .sim-hl-dot[data-color="yellow"]{--dot-color:#eab308;}
#sim-hl-tooltip .sim-hl-dot[data-color="green"]{--dot-color:#22c55e;}
#sim-hl-tooltip .sim-hl-dot[data-color="orange"]{--dot-color:#f97316;}
#sim-hl-tooltip .sim-hl-dot[data-color="blue"]{--dot-color:#0ea5e9;}
#sim-hl-tooltip .sim-hl-dot:hover{background:var(--dot-color);transform:scale(1.15);filter:brightness(1.08);box-shadow:0 0 0 2px rgba(245,158,11,.28);}
.msg .sim-hl,.msg-ai .sim-hl{color:inherit;}
.hl-tooltip button{background:none;border:none;color:var(--accent-amber);cursor:pointer;font-size:.68rem;font-weight:600;padding:.1rem .3rem;border-radius:4px;transition:background .15s;}
.hl-tooltip button:hover{background:rgba(245,158,11,.2);}
.hl-tooltip .hl-sep{width:1px;height:14px;background:var(--border);}

/* ══ HISTORIAN ══ */
.hist-panel{width:240px;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s;}
.hist-panel.hp-hide{width:0;border-left:none;overflow:hidden;}
.hist-hdr{padding:.6rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.hist-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-orange);}
.hist-time{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--accent-orange);}
.hist-body{flex:1;overflow-y:auto;padding:.4rem;}
.he{padding:.35rem .5rem;border-left:2px solid var(--accent-blue);margin-bottom:.35rem;font-size:.68rem;color:var(--text-secondary);line-height:1.4;}
.he .ht{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-dim);display:block;margin-bottom:.05rem;}
.he.hc{border-left-color:var(--accent-amber);}
.he .hs{text-decoration:line-through;color:var(--accent-red);opacity:.7;}
.he .hcr{color:var(--accent-green);}

/* ══ QUESTIONS ══ */
.qs-panel{width:260px;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s;overflow:hidden;}
.qs-panel.qp-hide{width:0;border-left:none;}
.qs-hdr{padding:.6rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.qs-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-amber);}
.qs-min{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;}.qs-min:hover{color:var(--text-primary);}
.qs-body{flex:1;overflow-y:auto;padding:.45rem;display:flex;flex-direction:column;gap:.3rem;}
.qi{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:.45rem .55rem;font-size:.72rem;color:var(--text-secondary);line-height:1.4;}
.qi .qhr{display:block;font-size:.72rem;color:var(--accent-amber);border-left:2px solid var(--accent-amber);padding-left:.35rem;margin-bottom:.25rem;font-style:italic;}
.qi .qr{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.75rem;padding:2px 4px;border-radius:3px;}.qi .qr:hover{color:var(--accent-red);background:rgba(239,68,68,.1);}
.qs-empty{color:var(--text-dim);font-size:.7rem;text-align:center;padding:1rem .5rem;line-height:1.45;}
.qs-ft{padding:.45rem;border-top:1px solid var(--border);}
.qs-ir{display:flex;gap:.25rem;}
.qs-i{flex:1;padding:.4rem .55rem;border-radius:6px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.72rem;outline:none;}
.qs-i:focus{border-color:var(--accent-amber);}.qs-i::placeholder{color:var(--text-dim);}
.qs-ab{padding:.4rem .55rem;border-radius:6px;border:none;background:var(--accent-amber);color:var(--bg-primary);font-weight:700;font-size:.78rem;cursor:pointer;}.qs-ab:hover{background:var(--accent-amber);}
.qs-sb{width:100%;margin-top:.3rem;padding:.5rem;border-radius:6px;border:1.5px solid var(--accent-amber);background:rgba(245,158,11,.1);color:var(--accent-amber);font-weight:600;font-size:.72rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.qs-sb:hover{background:rgba(245,158,11,.2);}.qs-sb:disabled{opacity:.35;cursor:not-allowed;}
.qi{display:flex;flex-direction:column;gap:.2rem;}
.qi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.45rem;}
.qi-text{flex:1;word-break:break-word;}
.qi-actions{display:flex;gap:.28rem;flex-shrink:0;align-items:center;}
/* Markdown tables rendered inside AI simulation messages (vitals grids etc.).
   Replaces the old raw "| Parameter | Value |" pipe text with a real grid. */
.md-table{border-collapse:collapse;width:100%;margin:.5rem 0;font-size:.72rem;}
.md-table th,.md-table td{border:1px solid var(--border);padding:.3rem .5rem;text-align:left;vertical-align:top;line-height:1.4;}
.md-table th{background:var(--bg-secondary);font-weight:700;color:var(--text-primary);}
.md-table td{color:var(--text-secondary);}
.md-table tbody tr:nth-child(even) td{background:rgba(127,127,127,.05);}
.q-action{background:none;border:1px solid var(--border);color:var(--text-dim);border-radius:6px;padding:.18rem .38rem;font-size:.7rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.q-action:hover{color:var(--text-primary);border-color:var(--border-light);}
.q-action.edit:hover{color:var(--accent-blue);border-color:var(--accent-blue);}
.q-action.delete:hover{color:var(--accent-red);border-color:var(--accent-red);}
.q-meta{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.q-status{display:inline-flex;align-items:center;gap:.25rem;padding:.14rem .38rem;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.q-status.pending{background:rgba(245,158,11,.14);color:var(--accent-amber);}
.q-status.sent{background:rgba(34,197,94,.14);color:var(--accent-green);}
.q-status.edited{background:rgba(59,130,246,.14);color:var(--accent-blue);}

/* ══ STATS ══ */
.sc{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.1rem;width:100%;max-width:680px;}
.sc h3{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-purple);margin-bottom:.75rem;}
.ssr{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.75rem;}
.sm{flex:1;min-width:90px;background:var(--bg-primary);border-radius:8px;padding:.75rem;text-align:center;}
.sm .v{font-family:'JetBrains Mono',monospace;font-size:1.4rem;font-weight:700;color:var(--accent-purple);}
.sm .l{font-size:.72rem;color:var(--text-dim);margin-top:.15rem;}
.cc-c{width:100%;height:200px;position:relative;background:var(--bg-primary);border-radius:8px;padding:.7rem;}
.cc-c canvas{width:100%!important;height:100%!important;}
.shl{display:flex;flex-direction:column;gap:.35rem;}
.shi{display:flex;justify-content:space-between;align-items:center;padding:.55rem .75rem;background:var(--bg-primary);border-radius:6px;font-size:.78rem;}
.scv{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.88rem;}
.s-hi{color:var(--accent-green);}.s-mi{color:var(--accent-amber);}.s-lo{color:var(--accent-red);}
.no-s{color:var(--text-dim);text-align:center;padding:1.2rem;font-size:.85rem;}

/* Account-history hydration (Scores + Recent Sims pages) */
.sc-source-note{width:100%;max-width:680px;font-size:.68rem;color:var(--text-dim);text-align:center;padding:.15rem 0 .35rem;}
.si-sum{font-size:.72rem;color:var(--text-secondary);line-height:1.5;padding:.2rem .1rem .5rem;}
.si-loading{font-size:.7rem;color:var(--text-dim);padding:.3rem 0;}

/* Sim viewer */
.si{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;width:100%;max-width:680px;overflow:hidden;}
.si-h{padding:.7rem .85rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s;}.si-h:hover{background:var(--bg-card-hover);}
.si-m{font-size:.76rem;color:var(--text-secondary);}
.si-m span{margin-right:.5rem;}
.si-a{color:var(--text-dim);font-size:.8rem;transition:transform .2s;}
.si-h.open .si-a{transform:rotate(90deg);}
.si-b{display:none;border-top:1px solid var(--border);padding:.75rem .8rem;max-height:440px;overflow-y:auto;font-size:.82rem;background:var(--bg-card);}
.si-b.open{display:block;}
/* Case transcript rows (2026-08-24 readability pass).
   These used to paint a HARD-CODED dark slab — rgba(26,34,53,.6) — behind
   --text-secondary text. On the dark theme that was murky; on the light
   theme it was a navy block under grey type, which is what made the
   transcripts hard to read. Both grounds now come from theme variables,
   the body text is --text-primary rather than the dim secondary, and the
   speaker is carried by a coloured left rule instead of a fill. */
.sm-m{margin-bottom:.55rem;padding:.5rem .7rem;border-radius:8px;}
.sm-ai{background:var(--bg-card-nested,var(--bg-secondary));border-left:3px solid var(--accent-blue);}
.sm-u{background:color-mix(in srgb,var(--accent-green) 9%,var(--bg-secondary));border-left:3px solid var(--accent-green);}
.sm-r{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.25rem;}
.sm-r.ai-r{color:var(--accent-blue);}.sm-r.u-r{color:var(--accent-green);}
.sm-t{color:var(--text-primary);font-size:.82rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;}
/* The sim writes lab values and vitals wrapped in double asterisks. Left
   as literal ** the transcript reads like source code, so the renderer
   turns them into real emphasis. */
.sm-t strong{font-weight:700;color:var(--text-primary);}
.sm-t .sm-hi{font-family:'JetBrains Mono',monospace;font-size:.94em;
  background:color-mix(in srgb,var(--accent-amber) 14%,transparent);
  border-radius:3px;padding:0 .2em;}
.sm-more{display:block;margin-top:.35rem;font-size:.7rem;font-style:italic;color:var(--text-dim);}

@media(max-width:768px){.qs-panel{position:fixed;top:0;right:0;bottom:0;z-index:50;width:240px;}.qs-panel.qp-hide{width:0;}.hist-panel{width:180px;}.msg{max-width:92%;}.ssr{flex-direction:column;}.ref-panel{position:fixed;top:0;right:0;bottom:0;z-index:51;width:280px;}.ref-panel.rp-hide{width:0;}
/* Orders panel joins the fixed-overlay pattern on phones. It was the ONLY
   sim side panel left in-flow, and it opens by default for non-ACLS cases —
   squeezing the transcript into a ~14vw strip as the first-run mobile
   experience. Overlaying it (left side, matching its desktop position)
   keeps the chat full-width underneath. */
.orders-panel{position:fixed;top:0;left:0;bottom:0;z-index:52;width:min(86vw,320px);box-shadow:4px 0 24px rgba(0,0,0,.35);}
.orders-panel.op-hide{width:0;box-shadow:none;}}

/* ══ MGH REF PANEL ══ */
.ref-panel{width:280px;background:var(--bg-secondary);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s;overflow:hidden;}
.ref-panel.rp-hide{width:0;border-left:none;}
.ref-hdr{padding:.6rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.ref-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green);}
.ref-search{width:100%;padding:.35rem .5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.7rem;margin:.3rem .4rem;outline:none;}
.ref-search:focus{border-color:var(--accent-green);}
.ref-body{flex:1;overflow-y:auto;padding:.3rem;}
.ref-item{border-bottom:1px solid var(--border);}.ref-item:last-child{border-bottom:none;}
.ref-item-hdr{padding:.4rem .5rem;cursor:pointer;font-size:.72rem;font-weight:600;color:var(--text-secondary);display:flex;justify-content:space-between;align-items:center;transition:background .15s;}
.ref-item-hdr:hover{background:var(--bg-card-hover);}
.ref-item-hdr.open{color:var(--accent-green);}
.ref-item-body{display:none;padding:.3rem .5rem .5rem;font-size:.7rem;color:var(--text-secondary);line-height:1.5;}
.ref-item-body.open{display:block;}
.ref-item-src{font-size:.68rem;color:var(--text-dim);margin-top:.3rem;font-style:italic;}
/* mobile handled at end of file */


/* PGY level */
.tb.a-pgy{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
#pgy-g .tg{gap:.3rem;}
#pgy-g .tb{min-width:0;padding:.35rem .5rem;font-size:.72rem;flex:0 0 auto;}
/* ══ MODE TOGGLE (MC vs Free Text) ══ */
.mode-toggle{display:flex;gap:.4rem;margin-bottom:.3rem;}
.mode-toggle .tb{flex:1;}
.tb.a-mc{border-color:var(--accent-cyan);background:rgba(6,182,212,.1);color:var(--accent-cyan);}
.tb.a-freetext{border-color:var(--accent-blue);background:rgba(59,130,246,.1);color:var(--accent-blue);}

/* MC Answer Options in Chat */
.mc-options{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem;padding:.4rem 0;}
.mc-opt{display:flex;align-items:flex-start;gap:.5rem;padding:.6rem .8rem;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-primary);color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;text-align:left;line-height:1.45;}
.mc-opt:hover{border-color:var(--accent-cyan);background:rgba(6,182,212,.06);color:var(--text-primary);}
.mc-opt.selected{border-color:var(--accent-blue);background:rgba(59,130,246,.1);color:var(--accent-blue);font-weight:600;}
.mc-opt.correct{border-color:var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);}
.mc-opt.incorrect{border-color:var(--accent-red);background:rgba(239,68,68,.1);color:var(--accent-red);text-decoration:line-through;}
.mc-label{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;min-width:18px;}


/* Debrief answer formatting */
.msg-ai h3{color:var(--accent-cyan);border-bottom:1px solid rgba(6,182,212,.25);padding-bottom:.3rem;margin-top:.7rem;}
.msg-ai hr{border:none;border-top:1.5px solid rgba(6,182,212,.2);margin:.8rem 0;}

/* Procedure Practice Chatbot */
.proc-practice-btn{width:100%;padding:.6rem;margin-top:.6rem;border-radius:8px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.08);color:var(--accent-green);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.proc-practice-btn:hover{background:rgba(34,197,94,.18);}
.proc-chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10600;display:none;align-items:center;justify-content:center;padding:1rem;}
.proc-chat-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px;width:100%;max-width:600px;height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.proc-chat-hdr{padding:.65rem .85rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.proc-chat-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;color:var(--accent-green);}
.proc-chat-hdr button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem;}
.proc-chat-msgs{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;}
.proc-chat-msg{max-width:88%;padding:.6rem .8rem;border-radius:10px;font-size:.8rem;line-height:1.5;animation:msgIn .2s ease;}
.proc-chat-msg.ai{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border);}
.proc-chat-msg.user{align-self:flex-end;background:linear-gradient(135deg,#1e40af,var(--accent-blue));color:white;}
.proc-chat-input{padding:.5rem .65rem;border-top:1px solid var(--border);display:flex;gap:.35rem;}
.proc-chat-input textarea{flex:1;padding:.5rem .65rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.8rem;outline:none;resize:none;min-height:36px;max-height:80px;}
.proc-chat-input textarea:focus{border-color:var(--accent-green);}
.proc-chat-input button{padding:0 .7rem;border-radius:8px;border:none;background:var(--accent-green);color:white;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;}

/* ══ LIBRARY CHATBOT (Ask + Quiz across library sections) ══ */
/* max-width matches library content containers (.guide-card, .pe-detail-card,
   .drug-detail, .proc-detail, #at-detail) so buttons line up with the content.
   NOTE: selector specificity matters — .ref-page-content > div sets 860px
   on all direct children, so we need an equally-specific or higher selector
   to pin the chat button row at 760px. Using .ref-page-content .lib-chat-actions
   (descendant combinator, specificity 0,2,0) overrides the 0,1,1 rule. */
.lib-chat-actions,
.ref-page-content .lib-chat-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 auto .75rem auto;max-width:760px;width:100%;box-sizing:border-box;}
.lib-chat-btn{flex:1 1 200px;padding:.55rem .8rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.lib-chat-btn:hover{transform:translateY(-1px);}
.lib-chat-btn-ask{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(6,182,212,.06);}
.lib-chat-btn-ask:hover{background:rgba(6,182,212,.14);box-shadow:0 2px 8px rgba(6,182,212,.15);}
.lib-chat-btn-quiz{border-color:var(--accent-amber);color:var(--accent-amber);background:rgba(245,158,11,.06);}
.lib-chat-btn-quiz:hover{background:rgba(245,158,11,.14);box-shadow:0 2px 8px rgba(245,158,11,.15);}
.lib-chat-btn-cards{border-color:var(--accent-green);color:var(--accent-green);background:rgba(16,185,129,.06);}
.lib-chat-btn-cards:hover{background:rgba(16,185,129,.14);box-shadow:0 2px 8px rgba(16,185,129,.15);}
/* "Simulate this case" — the read → practice hook. Purple so it reads as a
   distinct action next to the cyan Ask and green Flashcard buttons. */
.lib-chat-btn-sim{border-color:var(--accent-purple);color:var(--accent-purple);background:rgba(168,85,247,.06);}
.lib-chat-btn-sim:hover{background:rgba(168,85,247,.14);box-shadow:0 2px 8px rgba(168,85,247,.15);}
/* Step-recall drill. Deliberately GREEN, not purple: purple is reserved across the
   library for "this opens an AI patient simulation". The drill only checks a written
   step sequence, so it reads as practice/recall instead. */
.lib-chat-btn-drill{border-color:var(--accent-green);color:var(--accent-green);background:rgba(34,197,94,.06);}
.lib-chat-btn-drill:hover{background:rgba(34,197,94,.14);box-shadow:0 2px 8px rgba(34,197,94,.15);}
/* Simulate action inside the highlight tooltips (rich + lightweight). */
#lib-hl-sim-btn{border-color:rgba(168,85,247,.35)!important;background:rgba(168,85,247,.1)!important;color:var(--accent-purple)!important;}
#lib-hl-sim-btn:hover{background:rgba(168,85,247,.2)!important;}
/* In-flight state for the "Generate Flashcards" button while cards are being
   generated (several-second round-trip). Shows an inline spinner so the click
   is clearly registered and the user knows work is happening. */
.lib-chat-btn-loading{cursor:progress;opacity:.85;}
.lib-chat-btn-loading:hover{transform:none;}
.lib-chat-spinner{display:inline-block;width:.85em;height:.85em;vertical-align:-.12em;margin-right:.35em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;}

/* Multi-card flashcard deck modal (reuses .fc-preview-* base styles) */
.fc-deck-snippet{font-family:'DM Sans',sans-serif;font-size:.7rem;color:var(--text-secondary);background:var(--bg-secondary);padding:.4rem .6rem;border-radius:6px;border-left:3px solid var(--accent-green);line-height:1.4;}
.fc-deck-nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.fc-deck-navbtn{padding:.35rem .7rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.fc-deck-navbtn:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text-primary);}
.fc-deck-navbtn:disabled{opacity:.4;cursor:not-allowed;}
.fc-deck-pos{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--text-dim);text-transform:uppercase;}
.fc-deck-cardactions{display:flex;justify-content:flex-end;}
.fc-deck-delete{padding:.35rem .7rem;border-radius:8px;border:1.5px solid rgba(239,68,68,.5);background:rgba(239,68,68,.06);color:#ef4444;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.fc-deck-delete:hover{background:rgba(239,68,68,.16);}
.lib-chat-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:10600;display:none;align-items:center;justify-content:center;padding:1rem;}
.lib-chat-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px;width:100%;max-width:620px;height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.lib-chat-modal[data-mode="ask"]{border-top:3px solid var(--accent-cyan);}
.lib-chat-modal[data-mode="quiz"]{border-top:3px solid var(--accent-amber);}
.lib-chat-hdr{padding:.65rem .85rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);}
.lib-chat-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;}
.lib-chat-modal[data-mode="ask"] .lib-chat-hdr h3{color:var(--accent-cyan);}
.lib-chat-modal[data-mode="quiz"] .lib-chat-hdr h3{color:var(--accent-amber);}
.lib-chat-hdr button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem;}
.lib-chat-hdr button:hover{color:var(--text-primary);}
.lib-chat-msgs{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;}
.lib-chat-msg{max-width:88%;padding:.6rem .8rem;border-radius:10px;font-size:.8rem;line-height:1.5;animation:msgIn .2s ease;}
.lib-chat-msg.ai{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);}
.lib-chat-msg.user{align-self:flex-end;background:linear-gradient(135deg,#1e40af,var(--accent-blue));color:white;}
/* Readability of AI answers: section subheads (from whole-line bold titles),
   with a divider to delineate topics, plus tighter, clearer list spacing. */
.lib-chat-msg.ai h3{font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;color:var(--accent-cyan);margin:.7rem 0 .3rem;padding-top:.5rem;border-top:1px solid var(--border);}
.lib-chat-msg.ai h3:first-child{margin-top:.1rem;padding-top:0;border-top:none;}
.lib-chat-msg.ai p{margin:.3rem 0;}
.lib-chat-msg.ai p:first-child{margin-top:0;}
.lib-chat-msg.ai p:last-child{margin-bottom:0;}
.lib-chat-msg.ai p:empty{display:none;}
.lib-chat-msg.ai ul{margin:.25rem 0 .5rem;padding-left:1.15rem;}
.lib-chat-msg.ai li{margin:.16rem 0;}
.lib-chat-msg.ai hr{border:none;border-top:1px solid var(--border);margin:.55rem 0;}
.lib-chat-input{padding:.5rem .65rem;border-top:1px solid var(--border);display:flex;gap:.35rem;background:var(--bg-card);}
.lib-chat-input textarea{flex:1;padding:.5rem .65rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.8rem;outline:none;resize:none;min-height:36px;max-height:80px;}
.lib-chat-modal[data-mode="ask"] .lib-chat-input textarea:focus{border-color:var(--accent-cyan);}
.lib-chat-modal[data-mode="quiz"] .lib-chat-input textarea:focus{border-color:var(--accent-amber);}
.lib-chat-input button{padding:0 .7rem;border-radius:8px;border:none;color:white;font-family:'DM Sans',sans-serif;font-size:.85rem;cursor:pointer;font-weight:600;}
.lib-chat-modal[data-mode="ask"] .lib-chat-input button{background:var(--accent-cyan);}
.lib-chat-modal[data-mode="quiz"] .lib-chat-input button{background:var(--accent-amber);}
.lib-chat-tell-btn{background:rgba(245,158,11,.15)!important;color:var(--accent-amber)!important;border:1px solid var(--accent-amber)!important;font-size:.72rem!important;padding:0 .6rem!important;}
.lib-chat-tell-btn:hover{background:rgba(245,158,11,.25)!important;}

/* ── Quiz format picker (shown inside modal when user clicks "Quiz Me") ── */
.lib-chat-format-header{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-amber);text-align:center;padding:.35rem 0 .55rem;}
.lib-chat-format-picker{display:flex;flex-direction:column;gap:.55rem;padding:0 .25rem;}
.lib-chat-format-btn{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text-primary);text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;font-family:'DM Sans',sans-serif;width:100%;}
.lib-chat-format-btn:hover{border-color:var(--accent-amber);background:rgba(245,158,11,.08);transform:translateY(-1px);box-shadow:0 2px 8px rgba(245,158,11,.12);}
.lib-chat-format-icon{font-size:1.35rem;line-height:1;flex-shrink:0;padding-top:.1rem;}
.lib-chat-format-body{flex:1;display:flex;flex-direction:column;gap:.2rem;}
.lib-chat-format-title{font-size:.85rem;font-weight:700;color:var(--accent-amber);}
.lib-chat-format-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.4;}
/* Solo-button variant — used when the picker only offers one format
   (currently the only path, since free-response mode was retired). The
   single card is centered + given more room for its explanation paragraph
   so the user clearly understands what they're starting. */
.lib-chat-format-btn.lib-chat-format-btn-solo{
  align-items:center;flex-direction:row;max-width:560px;margin:0 auto;
  padding:1rem 1.1rem;
}
.lib-chat-format-btn.lib-chat-format-btn-solo .lib-chat-format-icon{padding-top:0;}
.lib-chat-format-btn.lib-chat-format-btn-solo .lib-chat-format-desc{margin-top:.25rem;}

/* ── Thinking indicator bubble (library chat) ── */
.lib-chat-thinking{align-self:flex-start;padding:.5rem .7rem;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;animation:msgIn .2s ease;}
/* ── CI LOADER (ciLoader.js) — the Clinical Imprint mark fills in with the
   estimated progress while any chatbot or the simulation waits on the model.
   A ghost of the mark sits underneath; the coloured copy is revealed
   bottom-up through a clip rect that the module moves every 250ms. ── */
.ci-loader{display:inline-flex;align-items:center;gap:.55rem;color:var(--text-primary);}
.ci-loader-svg{display:block;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(139,92,246,.28));animation:ciLoaderBreathe 1.8s ease-in-out infinite;}
.ci-loader-txt{display:inline-flex;align-items:baseline;gap:.45rem;}
.ci-loader-label{font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;color:var(--text-secondary);}
.ci-loader-pct{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;color:var(--text-dim);min-width:2.4em;}
.ci-loader.is-done .ci-loader-svg{animation:none;}
.ci-loader.is-done .ci-loader-pct{color:var(--accent-green);}
.lib-docs-ask-thinking{padding:.35rem .1rem;}
@keyframes ciLoaderBreathe{0%,100%{opacity:.78;transform:scale(.97);}50%{opacity:1;transform:scale(1);}}
@media(prefers-reduced-motion:reduce){.ci-loader-svg{animation:none;}}

/* ── MCQ option boxes (clickable A/B/C/D) ── */
.lib-chat-mcq-options{display:flex;flex-direction:column;gap:.4rem;align-self:stretch;margin:.2rem 0 .3rem;}
.lib-chat-mcq-option{display:flex;align-items:flex-start;gap:.65rem;padding:.7rem .85rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text-primary);text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.8rem;line-height:1.45;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;width:100%;}
.lib-chat-mcq-option:hover:not(:disabled){border-color:var(--accent-amber);background:rgba(245,158,11,.08);transform:translateY(-1px);box-shadow:0 2px 8px rgba(245,158,11,.12);}
.lib-chat-mcq-option:disabled{cursor:default;}
.lib-chat-mcq-option.selected{border-color:var(--accent-amber);background:rgba(245,158,11,.2);}
.lib-chat-mcq-option.selected .lib-chat-mcq-text{color:var(--accent-amber);font-weight:600;}
.lib-chat-mcq-option.dimmed{opacity:.4;}
.lib-chat-mcq-letter{flex-shrink:0;width:1.8rem;height:1.8rem;border-radius:50%;background:rgba(245,158,11,.15);color:var(--accent-amber);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-family:'JetBrains Mono',monospace;}
.lib-chat-mcq-option.selected .lib-chat-mcq-letter{background:var(--accent-amber);color:#111;}
.lib-chat-mcq-text{flex:1;padding-top:.2rem;}

/* ══ LIBRARY PAGE ══ */
.lib-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.1rem;width:100%;max-width:680px;}
.lib-card h3{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-green);margin-bottom:.75rem;}
.lib-upload-area{border:2px dashed var(--border);border-radius:10px;padding:1.5rem;text-align:center;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;cursor:pointer;margin-bottom:.75rem;}
.lib-upload-area:hover{border-color:var(--accent-green);background:rgba(34,197,94,.04);}
.lib-upload-area .upload-icon{font-size:1.5rem;margin-bottom:.4rem;}
.lib-upload-area .upload-text{font-size:.82rem;color:var(--text-secondary);}
.lib-upload-area .upload-hint{font-size:.68rem;color:var(--text-dim);margin-top:.2rem;}
.lib-file-list{display:flex;flex-direction:column;gap:.35rem;}
.lib-file{display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem;background:var(--bg-primary);border-radius:8px;font-size:.78rem;}
.lib-file-info{display:flex;align-items:center;gap:.4rem;color:var(--text-secondary);flex:1;min-width:0;}
.lib-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lib-file-size{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-dim);flex-shrink:0;}
.lib-file-actions{display:flex;gap:.3rem;flex-shrink:0;}
.lib-file-btn{background:none;border:1px solid var(--border);color:var(--text-dim);border-radius:6px;padding:.2rem .4rem;font-size:.68rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.lib-file-btn:hover{border-color:var(--accent-red);color:var(--accent-red);}
.lib-sim-btn{width:100%;padding:.7rem;border-radius:10px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.08);color:var(--accent-green);font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;margin-top:.5rem;}
.lib-sim-btn:hover{background:rgba(34,197,94,.18);}
.lib-sim-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ══ DRUGS & PROCEDURES PAGES ══ */
/* The scrolling container fills the full viewport width so the scrollbar
   sits at the true right edge of the screen (previously the container had
   max-width:900px + margin:0 auto, which pushed the scrollbar into the
   middle of the screen on wide monitors). The content inside stays visually
   centered via align-items:center and the 860px max-width on
   .ref-page-content > div (see rule below). */
.ref-page-content{flex:1;overflow-y:auto;padding:1.25rem 1.25rem 4rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;box-sizing:border-box;}
/* Standardize library sub-page content widths — every direct child stretches
   to the wrapper's 900px cap. Children with their own narrower max-width
   (e.g. .ref-nav at 760px) keep their existing cap via the cascade. This
   matches the centered/fixed-width behavior of the Clinical Pocket Guide's
   .lib-subview and prevents horizontal layout shifts when cards expand. */
.ref-page-content > div{width:100%;max-width:860px;box-sizing:border-box;}
/* Defense-in-depth: no descendant of .ref-page-content may exceed its
   wrapper width. This prevents any stray element — a table, an image, a
   long unbroken token, a nested flex container that forgot to set
   box-sizing — from pushing the column outward. */
.ref-page-content *{max-width:100%;box-sizing:border-box;}
/* Prevent long unbroken tokens (long drug names, URLs, lab value strings)
   from forcing their ancestors to grow horizontally. overflow-wrap:anywhere
   only kicks in when a single token would otherwise overflow — normal
   paragraph text wraps at spaces as usual. */
.ref-page-content, .ref-page-content *{overflow-wrap:anywhere;}
/* Tables inside expanded cards must not overflow their container either. */
.ref-page-content table{table-layout:fixed;width:100%;}
.ref-nav{display:flex;flex-wrap:wrap;gap:.3rem;width:100%;max-width:760px;margin-bottom:.5rem;justify-content:center;}
.ref-nav-btn{padding:.4rem .7rem;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;white-space:nowrap;}
.ref-nav-btn:hover{border-color:var(--nav-accent,var(--accent-cyan));color:var(--nav-accent,var(--accent-cyan));}
.ref-nav-btn.active{border-color:var(--nav-accent,var(--accent-cyan));background:color-mix(in srgb, var(--nav-accent, #06b6d4) 14%, transparent);color:var(--nav-accent,var(--accent-cyan));}
/* Hide the topic-nav container entirely on the ICU landing (empty nav). */
#advanced-topics #at-nav:empty{display:none;}
.ref-nav-btn.icu-btn{border-color:var(--accent-red);color:var(--accent-red);}
.ref-nav-btn.icu-btn.active{background:rgba(239,68,68,.12);}
.ref-subcat{width:100%;max-width:760px;}
/* ── Library section hierarchy ──────────────────────────────────
   Two shared classes carry the structural labels across every library
   subpage, so sizing them here sets the hierarchy everywhere at once:

     .ref-subcat-header      TIER 1 — the section header ("CATEGORIES",
                             "PROCEDURES", "HEAD & NECK"). Announces how the
                             page is organised, so it reads first.
     .at-section-browser-label  TIER 2 — the panel label inside a section
                             browser ("MEDICATIONS", "SCORES", "TOPICS").
                             Subordinate to tier 1, but clearly above body.

   Both were previously ~.6rem and easy to miss, which left the page looking
   like an undifferentiated wall of chips. Tier 1 is now centred with flanking
   rules; the rules use currentColor so a per-page inline colour override
   (physical_exam.js sets #C0392B) tints them automatically. */
.ref-subcat-header{
  font-family:'JetBrains Mono',monospace;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--accent-purple);
  margin:1.15rem 0 .7rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  text-align:center;
  line-height:1.25;
}
.ref-subcat-header::before,
.ref-subcat-header::after{
  content:'';
  flex:0 1 clamp(1.25rem, 8vw, 5.5rem);
  height:1px;
  opacity:.4;
  background:linear-gradient(90deg, transparent, currentColor);
}
.ref-subcat-header::after{background:linear-gradient(90deg, currentColor, transparent);}
/* Narrow screens: uppercase mono at wide tracking wraps badly, and the
   flanking rules squeeze the text. Step both tiers down and drop the rules
   below 480px so a long header ("Head & Neck — Select a subsystem") still
   reads as one clean centred line-pair. */
@media (max-width:640px){
  .ref-subcat-header{font-size:.86rem;letter-spacing:.1em;gap:.5rem;margin:.9rem 0 .55rem;}
}
@media (max-width:480px){
  .ref-subcat-header{font-size:.8rem;letter-spacing:.08em;}
  .ref-subcat-header::before,.ref-subcat-header::after{display:none;}
}
.ref-subcat-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem;}
.ref-subcat-btn{padding:.3rem .55rem;border-radius:6px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.68rem;font-weight:500;line-height:1.3;cursor:pointer;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s,opacity .18s;white-space:nowrap;}
.ref-subcat-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.ref-subcat-btn.active{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
/* Drug category chips — tighter sizing so they sit proportionally next to
   the drug specialty nav above them. */
#drugs-subcats .ref-subcat-btn{padding:.28rem .6rem;font-size:.72rem;letter-spacing:.005em;}
#drugs-subcats .ref-subcat-header{margin-top:.9rem;margin-bottom:.6rem;}
.drug-detail,.proc-detail{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem;width:100%;max-width:760px;margin-top:.3rem;}
.drug-detail h4,.proc-detail h4{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--accent-cyan);margin-bottom:.5rem;}
.drug-detail table{width:100%;border-collapse:collapse;font-size:.72rem;margin-bottom:.5rem;table-layout:fixed;}
.drug-detail th{text-align:center;padding:.35rem .5rem;background:var(--bg-primary);color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);width:110px;min-width:110px;max-width:110px;white-space:nowrap;vertical-align:middle;}
.drug-detail td{padding:.35rem .7rem;border-bottom:1px solid var(--border);color:var(--text-secondary);line-height:1.45;vertical-align:top;}
/* ── Medication detail card ────────────────────────────────────
   Replaces the old uniform-weight label/value table. Hierarchy follows how the
   card is actually used at the bedside: DOSE first and largest, then what the
   drug is, then any hazard, then teaching pearls, then side effects. Body text
   stays neutral for contrast — color carries meaning in the labels, the chips,
   and the warning box, not in whole sentences of amber/red prose. */
.drug-body{display:flex;flex-direction:column;gap:1.05rem;}
/* Dose hero */
.drug-dose{background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;padding:.75rem .85rem;}
.drug-dose-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem;}
.drug-dose-lbl{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);}
.drug-route-chip{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:999px;color:var(--drug-accent,var(--accent-cyan));background:color-mix(in srgb, var(--drug-accent,#06b6d4) 12%, transparent);border:1px solid color-mix(in srgb, var(--drug-accent,#06b6d4) 30%, transparent);}
.drug-dose-primary{font-family:'JetBrains Mono',monospace;font-size:.86rem;font-weight:600;color:var(--text-primary);line-height:1.65;}
.drug-dose-secondary{font-family:'JetBrains Mono',monospace;font-size:.73rem;color:var(--text-secondary);margin-top:.35rem;line-height:1.6;}
.drug-dose-note{font-size:.72rem;color:var(--text-dim);margin-top:.3rem;line-height:1.45;}
/* Mechanism / indication */
.drug-facts{display:grid;grid-template-columns:92px minmax(0,1fr);gap:.5rem .9rem;font-size:.78rem;line-height:1.65;align-items:baseline;}
.drug-fact-lbl{color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;}
.drug-fact-val{color:var(--text-primary);}
/* Escalated hazard — driven by the optional `warning` field in data_drugs.js */
.drug-warning{border:1px solid rgba(239,68,68,.34);background:rgba(239,68,68,.08);border-radius:10px;padding:.55rem .7rem;}
.drug-warning-hdr{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-red);margin-bottom:.35rem;}
.drug-warning-body{font-size:.85rem;line-height:1.65;color:var(--text-primary);}
/* Section headers */
.drug-sec-hdr{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:.5rem;}
.drug-sec-hdr-pearls{color:var(--accent-amber);}
.drug-sec-hdr-se{color:var(--accent-red);}
/* Pearls as bullets */
.drug-pearl-list{margin:0;padding-left:1.1rem;font-size:.78rem;line-height:1.7;color:var(--text-primary);max-width:72ch;}
.drug-pearl-list li{margin-bottom:.45rem;padding-left:.15rem;}
.drug-pearl-list li::marker{color:var(--accent-amber);}
/* Side effects as chips (or prose lines for agent-grouped strings) */
.drug-se-chips{display:flex;flex-wrap:wrap;gap:.3rem;}
.drug-se-chip{font-size:.7rem;line-height:1.4;padding:.2rem .5rem;border-radius:6px;background:rgba(239,68,68,.09);color:var(--accent-red);border:1px solid rgba(239,68,68,.22);}
.drug-se-line{font-size:.76rem;line-height:1.65;color:var(--text-secondary);margin-bottom:.35rem;max-width:72ch;}
/* Chat / flashcard buttons + cross-reference chips, below the panels */
.drug-panel-footer{margin-top:.9rem;}
/* Grouped drug class (e.g. Asthma Biologics): a short class overview above the
   nested member browser. The nested browser is a full split panel (member rail
   + member detail) mounted inside the outer detail panel, so a grouped class
   reads as three columns: category tiles › member agents › member detail. */
.drug-group-overview{
  font-size:.72rem;line-height:1.5;color:var(--text-secondary);
  margin:0 0 .6rem;padding:.5rem .65rem;
  border:1px dashed var(--border);border-radius:8px;
  background:var(--bg-primary);
}
.drug-member-browser{margin:.2rem 0 .4rem;}
/* The nested browser sits inside a card already, so drop its own outer frame
   and tighten spacing; keep a slim member rail. */
.drug-member-browser .at-section-browser{margin:0;padding:0;border:none;background:none;}
.drug-member-browser .at-section-split{grid-template-columns:190px minmax(0,1fr);}
.drug-tag{display:inline-block;padding:.1rem .3rem;border-radius:3px;font-size:.68rem;font-weight:600;margin-right:.2rem;}
.drug-tag.first-line{background:rgba(34,197,94,.15);color:var(--accent-green);}
.drug-tag.second-line{background:rgba(245,158,11,.15);color:var(--accent-amber);}
.drug-tag.caution{background:rgba(239,68,68,.15);color:var(--accent-red);}
.proc-step{display:flex;gap:.5rem;padding:.45rem 0;border-bottom:1px solid var(--border);}
.proc-step:last-child{border-bottom:none;}
.proc-step-num{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--accent-purple);min-width:20px;}
.proc-step-text{font-size:.76rem;color:var(--text-secondary);line-height:1.5;}
.proc-pearl{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:8px;padding:.5rem .7rem;margin-top:.4rem;font-size:.72rem;color:var(--accent-amber);line-height:1.45;}
.proc-pearl-list{margin:.35rem 0 0;padding-left:1.1rem;}
.proc-pearl-list li{margin:.18rem 0;}
.proc-us-tip{background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.2);border-radius:8px;padding:.5rem .7rem;margin-top:.4rem;font-size:.72rem;color:var(--accent-cyan);line-height:1.45;}
.proc-resources{margin-top:.5rem;padding:.5rem .7rem;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.15);border-radius:8px;}
.proc-resources-list{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem;}
.proc-resource-link{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .5rem;border-radius:6px;background:rgba(168,85,247,.1);color:var(--accent-purple);font-size:.68rem;font-weight:500;text-decoration:none;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;line-height:1.4;}
.proc-resource-link:hover{background:rgba(168,85,247,.2);color:#c084fc;}
.proc-resource-arrow{font-size:.68rem;opacity:.7;}

/* Stats tabs */
.stats-tabs{display:flex;gap:.3rem;margin-bottom:.75rem;width:100%;max-width:680px;}
.stats-tab{flex:1;padding:.45rem;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;cursor:pointer;text-align:center;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.stats-tab.active{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
.stats-tab:hover:not(.active){border-color:var(--border-light);}

/* Badge for MC mode */
.badge-mc{background:rgba(6,182,212,.15);color:var(--accent-cyan);}
.badge-ft{background:rgba(59,130,246,.15);color:var(--accent-blue);}
.tb.a-d-dark{border-color:var(--accent-blue);background:rgba(59,130,246,.1);color:var(--accent-blue);}
.tb.a-d-light{border-color:var(--accent-amber);background:rgba(245,158,11,.1);color:var(--accent-amber);}
.tb.a-d-auto{border-color:var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);}

/* (HOME MEDICATIONS PANEL CSS — .meds-panel / .meds-* / .med-item /
   .med-action-btn / .med-feedback / .meds-submit-btn — was removed
   when the med-rec feature was retired. The block lived here.) */
/* ICU scenario type */
.tb.a-genicu{border-color:var(--accent-orange);background:rgba(249,115,22,.1);color:var(--accent-orange);}
.badge-genicu{background:rgba(249,115,22,.15);color:var(--accent-orange);}
.cc.icu-cat:hover{border-color:var(--accent-orange);color:var(--accent-orange);}
.cc.icu-cat.active{border-color:var(--accent-orange);background:rgba(249,115,22,.12);color:var(--accent-orange);}

/* ══ ORDERS PANEL (LEFT SIDE) ══ */
.orders-panel{width:clamp(360px,26vw,440px);background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .3s;overflow:hidden;}
.orders-panel.op-hide{width:0;border-right:none;}

/* ── Resizable width (2026-09-13, desktop in-flow layout only) ──
   --orders-w is set by the drag handle in simulation_orders.js and
   read ONLY here, so the ≤768px fixed-overlay width is untouched. */
@media(min-width:769px){
  .orders-panel{position:relative;width:var(--orders-w,clamp(360px,26vw,440px));}
  .orders-panel.orders-resizing{transition:none;}
  .orders-resize{position:absolute;top:0;right:0;bottom:0;width:7px;cursor:col-resize;z-index:6;touch-action:none;
    border-right:2px solid transparent;transition:border-color .15s;}
  .orders-resize:hover,.orders-panel.orders-resizing .orders-resize{border-right-color:var(--accent-cyan);}
}
@media(max-width:768px){.orders-resize{display:none;}}

/* ── Custom order sets (Favs tab) ── */
.order-sets-hd{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);padding:.4rem .45rem .2rem;}
.order-sets-empty{font-size:.66rem;color:var(--text-dim);padding:.15rem .45rem .3rem;line-height:1.5;}
.order-set-row{display:flex;align-items:stretch;gap:.3rem;padding:.12rem .45rem;}
.order-set-apply{flex:1;display:flex;align-items:center;gap:.4rem;text-align:left;cursor:pointer;
  border:1px solid var(--border-light);border-radius:8px;padding:.35rem .55rem;background:var(--bg-card);
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;color:var(--text-primary);
  transition:border-color .15s,background .15s,color .15s;}
.order-set-apply:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}
.order-set-n{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;color:var(--text-dim);
  border:1px solid var(--border-light);border-radius:999px;padding:.05rem .4rem;}
.order-set-del{cursor:pointer;border:none;background:transparent;color:var(--text-dim);font-size:.72rem;padding:0 .3rem;border-radius:6px;}
.order-set-del:hover{color:var(--accent-red);}
.order-set-save{display:block;margin:.3rem .45rem .1rem;cursor:pointer;
  border:1px dashed var(--border-light);border-radius:8px;padding:.32rem .55rem;background:transparent;
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;color:var(--text-secondary);
  transition:color .15s,border-color .15s;}
.order-set-save:hover{color:var(--accent-cyan);border-color:var(--accent-cyan);}
.orders-hdr{padding:.6rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.orders-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-blue);}
.orders-tabs{display:flex;gap:.2rem;padding:.35rem .45rem;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.orders-tab{flex:1 1 auto;min-width:55px;padding:.3rem .3rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:.68rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;text-align:center;font-family:'JetBrains Mono',monospace;white-space:nowrap;}
.orders-tab:hover{border-color:var(--accent-blue);color:var(--accent-blue);}
.orders-tab.active{border-color:var(--accent-blue);background:rgba(59,130,246,.1);color:var(--accent-blue);}
.orders-body{flex:1;overflow-y:auto;padding:.4rem;}
/* One-line "you can set your own dose/frequency" hint at the top of each tab. */
.orders-tip{font-size:.62rem;line-height:1.4;color:var(--text-dim);background:rgba(6,182,212,.06);border:1px solid var(--border);border-radius:6px;padding:.35rem .5rem;margin-bottom:.4rem;}
.orders-tip strong{color:var(--accent-cyan);font-weight:700;}
.order-item{display:flex;align-items:center;gap:.35rem;padding:.35rem .45rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);margin-bottom:.25rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;font-size:.7rem;color:var(--text-secondary);}
.order-item:hover{border-color:var(--accent-blue);background:var(--bg-card-hover);}
.order-item.selected{border-color:var(--accent-blue);background:rgba(59,130,246,.08);color:var(--accent-blue);}
.order-item.order-correct{border-color:var(--accent-green);background:rgba(34,197,94,.06);color:var(--accent-green);}
.order-item.order-incorrect{border-color:var(--accent-red);background:rgba(239,68,68,.06);color:var(--accent-red);}
.order-item.order-missed{border-color:var(--accent-amber);background:rgba(245,158,11,.06);color:var(--accent-amber);}
.order-check{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.68rem;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.order-item.selected .order-check{border-color:var(--accent-blue);background:var(--accent-blue);color:white;}
.order-item.order-correct .order-check{border-color:var(--accent-green);background:var(--accent-green);color:white;}
.order-item.order-incorrect .order-check{border-color:var(--accent-red);background:var(--accent-red);color:white;}
.order-feedback{font-size:.68rem;line-height:1.3;margin-top:.2rem;padding:.2rem .35rem;border-radius:4px;display:none;}
.order-item.order-correct .order-feedback,.order-item.order-incorrect .order-feedback,.order-item.order-missed .order-feedback{display:block;}
.order-item.order-correct .order-feedback{background:rgba(34,197,94,.08);color:var(--accent-green);}
.order-item.order-incorrect .order-feedback{background:rgba(239,68,68,.08);color:var(--accent-red);}
.order-item.order-missed .order-feedback{background:rgba(245,158,11,.08);color:var(--accent-amber);}
.order-custom-tag{font-size:.66rem;background:rgba(168,85,247,.12);color:var(--accent-purple);padding:.08rem .25rem;border-radius:3px;margin-left:auto;flex-shrink:0;}
.fav-star{font-size:.8rem;color:var(--text-dim);cursor:pointer;margin-left:auto;flex-shrink:0;padding:0 .2rem;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;user-select:none;}
.fav-star:hover{color:var(--accent-amber);transform:scale(1.2);}
.fav-star.fav-active{color:var(--accent-amber);}
.orders-custom{display:flex;gap:.25rem;padding:.35rem .45rem;border-top:1px solid var(--border);}
.orders-custom-input{flex:1;padding:.35rem .45rem;border-radius:6px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.68rem;outline:none;font-family:'DM Sans',sans-serif;}
.orders-custom-input:focus{border-color:var(--accent-blue);}
.orders-custom-input::placeholder{color:var(--text-dim);}
.orders-custom-add{padding:.35rem .5rem;border-radius:6px;border:none;background:var(--accent-blue);color:white;font-weight:700;font-size:.72rem;cursor:pointer;}
.orders-custom-add:hover{background:var(--accent-blue);}
.orders-footer{padding:.4rem .45rem;border-top:1px solid var(--border);}
.orders-submit-btn{width:100%;padding:.5rem;border-radius:8px;border:1.5px solid var(--accent-blue);background:rgba(59,130,246,.08);color:var(--accent-blue);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.orders-submit-btn:hover{background:rgba(59,130,246,.18);}
.orders-submit-btn:disabled{opacity:.4;cursor:not-allowed;}
.orders-btn{border-color:var(--accent-blue);color:var(--accent-blue);}
.orders-btn:hover{background:rgba(59,130,246,.1);}

/* ══ PROCEDURE TELL ME BUTTON ══ */
/* Specificity matches .proc-chat-input button above so these keep their own colours. */
.proc-chat-input .proc-tell-btn{padding:0 .6rem;border-radius:8px;border:1.5px solid var(--accent-amber);background:rgba(245,158,11,.08);color:var(--accent-amber);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;white-space:nowrap;font-family:'DM Sans',sans-serif;}
.proc-chat-input .proc-tell-btn:hover{background:rgba(245,158,11,.18);}
.proc-chat-input .proc-unsure-btn{padding:0 .6rem;border-radius:8px;border:1.5px solid var(--accent-cyan);background:rgba(6,182,212,.08);color:var(--accent-cyan);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;white-space:nowrap;font-family:'DM Sans',sans-serif;}
.proc-chat-input .proc-unsure-btn:hover{background:rgba(6,182,212,.18);}

/* ══ MOBILE: sidebar collapses ══ */
@media(max-width:600px){
  .home-sidebar{width:48px;padding:.4rem .15rem;}
  .sidebar-label{display:none;}
  .sidebar-icon{font-size:1.2rem;}
  .sp{padding:1rem;}.logo-area h1{font-size:1.2rem;}.msg{max-width:95%;font-size:.8rem;}
  .hist-panel{width:140px;}
  .orders-panel{width:200px;}
}

/* ══ CONSULT REASON INPUT ══ */
.consult-reason-wrap{padding:.25rem .45rem .35rem;margin-top:-.1rem;}
.consult-reason-input{width:100%;padding:.3rem .45rem;border-radius:6px;border:1.5px solid var(--accent-purple);background:var(--bg-primary);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.7rem;outline:none;transition:border-color .15s;}
.consult-reason-input:focus{border-color:var(--accent-cyan);}
.consult-reason-input::placeholder{color:var(--text-dim);}

/* Custom-value edit row — input + Confirm button side by side */
.custom-edit-row{display:flex;gap:.3rem;align-items:stretch;}
.custom-edit-row .consult-reason-input{flex:1;}
.custom-confirm-btn{padding:.3rem .55rem;border-radius:6px;border:1.5px solid var(--border);background:transparent;color:var(--text-dim);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;letter-spacing:.02em;}
.custom-confirm-btn:disabled{opacity:.45;cursor:not-allowed;}
.custom-confirm-btn.ready{border-color:var(--accent-orange);color:var(--accent-orange);background:rgba(245,158,11,.08);animation:customConfirmPulse 1.8s ease-in-out infinite;}
.custom-confirm-btn.ready:hover{background:rgba(245,158,11,.18);transform:translateY(-1px);}
@keyframes customConfirmPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0);}
  50%{box-shadow:0 0 0 3px rgba(245,158,11,.22);}
}

/* Locked-in pill — shown after the user clicks Confirm on a customized value */
.custom-confirmed-pill{display:flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border-radius:6px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.08);color:var(--accent-green);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.custom-confirmed-pill:hover{background:rgba(34,197,94,.15);}
.ccp-check{font-weight:800;}
.ccp-label{color:var(--text-dim);font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;}
.ccp-val{color:var(--text-primary);font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ccp-edit{color:var(--text-dim);font-size:.7rem;opacity:.7;}
.custom-confirmed-pill:hover .ccp-edit{opacity:1;color:var(--accent-cyan);}

/* ── Intubation airway-plan decision (under the intubation order) ─── */
/* ── Med-row "dose editable" chip (2026-08-31) — per-row cue that tapping
   a medication opens its own dose & frequency field. Removed once the row
   is selected (the actual input is visible then). */
.order-dose-tag{display:inline-block;margin-left:.35rem;padding:.02rem .32rem;border-radius:4px;font-size:.56rem;font-weight:600;letter-spacing:.01em;color:var(--accent-cyan);background:rgba(6,182,212,.09);border:1px solid rgba(6,182,212,.28);vertical-align:1px;white-space:nowrap;}
.intub-decision{margin:.15rem .45rem .4rem;padding:.5rem .55rem;border-radius:8px;font-family:'DM Sans',sans-serif;line-height:1.4;}
.intub-choose{border:1.5px solid var(--accent-blue);background:rgba(59,130,246,.08);}
.intub-q{font-size:.72rem;font-weight:700;color:var(--accent-blue);display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-bottom:.45rem;}
.intub-req{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-red);border:1px solid var(--accent-red);border-radius:20px;padding:.05rem .4rem;}
.intub-btns{display:flex;gap:.4rem;flex-wrap:wrap;}
.intub-btn{flex:1;min-width:120px;padding:.5rem .55rem;border-radius:7px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s;}
.intub-btn:hover{transform:translateY(-1px);}
.intub-btn-custom{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(6,182,212,.08);}
.intub-btn-custom:hover{background:rgba(6,182,212,.18);}
.intub-btn-standard:hover{border-color:var(--text-dim);background:var(--bg-secondary);}
.intub-hint{font-size:.6rem;color:var(--text-dim);margin-top:.4rem;line-height:1.35;}
.intub-done{display:flex;align-items:flex-start;gap:.4rem;font-size:.68rem;color:var(--text-secondary);border:1.5px solid var(--accent-green);background:rgba(34,197,94,.08);}
.intub-done strong{color:var(--accent-green);}
.intub-done-check{color:var(--accent-green);font-weight:800;flex-shrink:0;}
.intub-link{background:none;border:none;padding:0;color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:700;cursor:pointer;text-decoration:underline;}
.intub-link:hover{color:var(--accent-blue);}

/* ══ MCQ SUBMIT BUTTON ══ */
.mc-submit-btn{margin-top:.5rem;padding:.55rem 1.5rem;border-radius:8px;border:1.5px solid var(--accent-blue);background:rgba(59,130,246,.06);color:var(--text-dim);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:not-allowed;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;opacity:.5;}
.mc-submit-btn.ready{cursor:pointer;opacity:1;color:var(--accent-blue);background:rgba(59,130,246,.12);}
.mc-submit-btn.ready:hover{background:rgba(59,130,246,.22);}
.mc-submit-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ══ MED FEEDBACK TOOLTIP ══ */
.med-feedback{display:flex;flex-direction:column;gap:.15rem;}
.med-reason{font-size:.68rem;line-height:1.4;color:var(--text-secondary);font-style:italic;}

/* ══ MEDS REOPEN BUTTON ══ */
.meds-reopen-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:20;padding:.5rem .35rem;border-radius:0 8px 8px 0;border:1.5px solid var(--accent-cyan);border-left:none;background:var(--bg-card);color:var(--accent-cyan);font-size:.68rem;font-weight:600;cursor:pointer;writing-mode:vertical-rl;letter-spacing:.03em;font-family:'JetBrains Mono',monospace;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.meds-reopen-btn:hover{background:rgba(6,182,212,.12);}

/* ══ ORDERS REOPEN BUTTON ══ */
.orders-reopen-btn{display:none;position:absolute;left:0;top:38%;transform:translateY(-50%);z-index:19;padding:.5rem .35rem;border-radius:0 8px 8px 0;border:1.5px solid var(--accent-blue);border-left:none;background:var(--bg-card);color:var(--accent-blue);font-size:.68rem;font-weight:600;cursor:pointer;writing-mode:vertical-rl;letter-spacing:.03em;font-family:'JetBrains Mono',monospace;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.orders-reopen-btn:hover{background:rgba(59,130,246,.12);}

/* ══ ORDER SUBCATEGORIES ══ */
.order-subcat-hdr{padding:.3rem .45rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-cyan);cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);margin-top:.2rem;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;user-select:none;}
.order-subcat-hdr:hover{background:rgba(6,182,212,.06);}
.order-subcat-hdr.collapsed{color:var(--text-dim);}
.order-subcat-arrow{font-size:.64rem;transition:transform .2s;}
.order-subcat-hdr.collapsed .order-subcat-arrow{transform:rotate(-90deg);}
.order-subcat-body{transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.order-subcat-body.collapsed{display:none;}

/* ══ CURRENT ORDERS TRAY ══ (sticky running summary above the custom input) */
.orders-tray{border-top:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0;display:flex;flex-direction:column;max-height:40%;}
.orders-tray-hdr{display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding:.32rem .5rem;cursor:pointer;user-select:none;}
.ot-title{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-blue);display:flex;align-items:center;gap:.3rem;}
.ot-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:999px;background:var(--accent-blue);color:#fff;font-size:.68rem;font-weight:700;}
.orders-tray.ot-is-empty .ot-count{background:var(--border);color:var(--text-dim);}
.ot-hdr-actions{display:flex;align-items:center;gap:.4rem;}
.ot-clear-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);font-size:.66rem;font-weight:600;padding:.15rem .4rem;border-radius:6px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.ot-clear-btn:hover{border-color:var(--accent-red);color:var(--accent-red);}
.orders-tray.ot-is-empty .ot-clear-btn{display:none;}
/* Minimize control — its own bordered button so it's an obvious, sizeable
   tap target that reads as "collapse", set apart from the destructive
   Clear all beside it. */
.ot-min-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);cursor:pointer;padding:.15rem .5rem;display:flex;align-items:center;justify-content:center;line-height:1;margin-left:.15rem;transition:background .15s,border-color .15s,color .15s;}
.ot-min-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:rgba(59,130,246,.08);}
.ot-caret{font-size:.72rem;color:inherit;transition:transform .2s;}
.orders-tray.ot-collapsed .ot-caret{transform:rotate(-90deg);}
.orders-tray-body{display:flex;flex-wrap:wrap;gap:.3rem;padding:0 .5rem .42rem;overflow-y:auto;}
.orders-tray.ot-collapsed .orders-tray-body{display:none;}
.ot-empty{font-size:.68rem;color:var(--text-dim);padding:.05rem .1rem .25rem;font-style:italic;}
.ot-chip{display:inline-flex;align-items:center;gap:.25rem;max-width:100%;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.35);color:var(--accent-blue);border-radius:999px;padding:.12rem .15rem .12rem .5rem;font-size:.7rem;line-height:1.25;}
.ot-chip-label{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.25rem;overflow:hidden;}
.ot-chip-detail{font-size:.66rem;opacity:.85;font-style:italic;}
.ot-chip-x{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:none;border-radius:50%;background:rgba(59,130,246,.18);color:var(--accent-blue);font-size:.72rem;line-height:1;cursor:pointer;flex-shrink:0;padding:0;}
.ot-chip-x:hover{background:var(--accent-red);color:#fff;}
.ot-chip-rsi{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.4);color:var(--accent-amber);padding-right:.5rem;}
/* Advanced (demoted) item marker — shown only in search results */
.order-adv-tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--border);border-radius:3px;padding:0 .2rem;margin-left:.15rem;vertical-align:middle;}

/* ══ RSI MODAL ══ */
.rsi-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:200;align-items:center;justify-content:center;}
.rsi-modal{width:440px;max-height:85vh;background:var(--bg-secondary);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;}
.rsi-hdr{padding:.65rem .85rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.rsi-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-cyan);}
.rsi-hdr button{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:1rem;}
.rsi-body{flex:1;overflow-y:auto;padding:.75rem;}
.rsi-section{margin-bottom:.75rem;}
.rsi-section-title{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:.4rem;padding-bottom:.2rem;border-bottom:1px solid var(--border);}
.rsi-helper{font-size:.7rem;line-height:1.5;color:var(--text-dim);margin:-.05rem 0 .55rem;}
/* Grey explainer under a field / drug-class row (what the class is for, why a
   value is fixed, how IBW dosing works). */
.rsi-class-desc{font-size:.62rem;line-height:1.45;color:var(--text-dim);margin:-.15rem 0 .5rem .5rem;}
.rsi-class-desc strong{color:var(--text-secondary);font-weight:700;}
/* A locked field (e.g. FiO₂ at 100%) reads as fixed, not editable. */
.rsi-locked{background:var(--bg-secondary)!important;color:var(--text-secondary)!important;cursor:not-allowed;font-weight:700;opacity:.85;}
.rsi-tv-need-ht{font-size:.6rem;line-height:1.45;color:var(--accent-amber);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:6px;padding:.3rem .4rem;}
.rsi-tv-need-ht strong{color:var(--accent-amber);}
.rsi-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;flex-wrap:wrap;}
.rsi-row label{font-size:.68rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;min-width:70px;}
.rsi-row select,.rsi-dose{padding:.3rem .4rem;border-radius:6px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.68rem;font-family:'DM Sans',sans-serif;outline:none;flex:1;min-width:80px;}
.rsi-row select:focus,.rsi-dose:focus{border-color:var(--accent-cyan);}
.rsi-row select{cursor:pointer;}
.rsi-footer{padding:.5rem .75rem;border-top:1px solid var(--border);}
.rsi-submit-btn{width:100%;padding:.55rem;border-radius:8px;border:1.5px solid var(--accent-cyan);background:rgba(6,182,212,.08);color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.rsi-submit-btn:hover{background:rgba(6,182,212,.18);}
.rsi-open-btn{width:100%;padding:.4rem;border-radius:6px;border:1.5px solid var(--accent-cyan);background:rgba(6,182,212,.06);color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;margin-bottom:.35rem;}
.rsi-open-btn:hover{background:rgba(6,182,212,.15);}

/* ══ LANDMARK TRIALS ══ */
/* Subsection chip rows are center-aligned on every page that uses them
   (trials specialties, End of Life categories, etc.) per design feedback. */
.trials-nav{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.75rem;justify-content:center;}
.trials-nav-btn{padding:.5rem .95rem;min-height:44px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:.74rem;font-weight:600;line-height:1.25;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;font-family:'DM Sans',sans-serif;}
.trials-nav-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}
.trials-nav-btn.active{border-color:var(--accent-cyan);background:rgba(6,182,212,.1);color:var(--accent-cyan);}
/* Sub-category header — darker bottom border so the section break is
   visually unambiguous (the previous 1px var(--border) was too pale to
   delineate groups). Layout is three flex children:
     [ label (flex:1, left-aligned) ][ count (right-aligned, fixed width) ][ arrow ]
   The label grows to fill the row, pushing both the count and arrow to
   the right edge. Giving the count a fixed min-width with right-aligned
   text means every (N) sits in the same vertical column regardless of
   how long the subcategory label is — so the user sees
     SEPSIS & SHOCK ........................... (9) ▶
     MECHANICAL VENTILATION & ARDS ............ (8) ▶
     AIRWAY & PROCEDURES ...................... (2) ▶
   not the previous "(N) floating in the middle at three different X
   coordinates" layout. */
.trials-subcat{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-purple);
  margin:1rem 0 .4rem;
  padding-bottom:.35rem;
  border-bottom:1.5px solid var(--text-dim);
  display:flex;
  align-items:center;
  gap:.75rem;
}
.trials-subcat-label{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.trials-subcat-count{
  flex:0 0 auto;
  min-width:2.75rem;
  text-align:right;
  font-size:.68rem;
  color:var(--text-dim);
  font-weight:500;
  text-transform:none;
  letter-spacing:.02em;
}
.trial-arrow{
  font-size:.68rem;
  line-height:1;
  flex-shrink:0;
  transition:transform .15s ease;
}
.trials-subcat-wrap.tsc-collapsed .trials-subcat-cards{display:none;}
.trials-subcat-wrap.tsc-collapsed .trial-arrow{transform:rotate(-90deg);}
.trial-blurb{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  overflow:hidden;
  font-size:.7rem;
  color:var(--text-dim);
  font-weight:400;
  margin-top:.12rem;
  line-height:1.35;
  font-style:italic;
  max-width:58ch;
}
.trial-card{
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.62rem .72rem;
  margin-bottom:.45rem;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;
}
.trial-card:hover{
  border-color:var(--trial-accent,var(--accent-cyan));
  background:var(--bg-card-hover);
}
.trial-card-hdr{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.75rem;
  cursor:pointer;
}
.trial-name{font-size:.78rem;font-weight:700;color:var(--text-primary);}
.trial-meta{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-dim);}
.trial-body{
  display:none;
  margin-top:.55rem;
  padding-top:.5rem;
  border-top:1px solid var(--border);
  user-select:text;
  -webkit-user-select:text;
  cursor:text;
}
.trial-card.open .trial-body{display:block;}
.trial-summary{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-size:.72rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.trial-summary-section{
  padding:.58rem .68rem .62rem;
  border:1px solid color-mix(in srgb, var(--trial-accent,var(--border)) 16%, var(--border));
  border-left:3px solid var(--trial-accent,var(--border-light));
  border-radius:10px;
  background:color-mix(in srgb, var(--trial-accent,transparent) 7%, var(--bg-card));
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.trial-summary-section-results{
  background:color-mix(in srgb, var(--trial-accent,transparent) 10%, var(--bg-card));
}
.trial-summary-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--trial-accent,var(--accent-cyan));
  margin-bottom:.32rem;
}
.trial-summary-text{
  font-size:.72rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.trial-summary-p{
  margin:0;
}
.trial-summary-list{
  margin:0;
  padding-left:1.05rem;
}
.trial-summary-list li{
  margin:.18rem 0;
  line-height:1.5;
}
.trial-takeaway{
  margin-top:.55rem;
  padding:.58rem .68rem .64rem;
  border-radius:10px;
  background:rgba(34,197,94,.07);
  border:1px solid rgba(34,197,94,.18);
  border-left:3px solid var(--accent-green);
}
.trial-takeaway-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--accent-green);
  margin-bottom:.28rem;
}
.trial-takeaway-lead{
  font-size:.72rem;
  line-height:1.5;
  color:var(--accent-green);
  font-weight:600;
}
.trial-takeaway-list{
  margin:.32rem 0 0;
  padding-left:1.05rem;
}
.trial-takeaway-list li{
  margin:.18rem 0;
  font-size:.69rem;
  line-height:1.45;
  color:var(--accent-green);
}
.trial-link{display:inline-block;margin-top:.5rem;font-size:.72rem;color:var(--accent-cyan);text-decoration:none;font-weight:600;letter-spacing:.02em;transition:color .15s;}
.trial-link:hover{color:var(--accent-blue);text-decoration:underline;}
.trial-arrow{font-size:.66rem;color:var(--text-dim);transition:transform .2s;}
.trial-card.open .trial-arrow{transform:rotate(180deg);}

/* ══ LIBRARY TABS ══ */
.lib-tabs{display:flex;gap:.3rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);flex-shrink:0;}
.lib-tab{padding:.45rem .9rem;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-dim);font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;font-family:'DM Sans',sans-serif;}
.lib-tab:hover{border-color:var(--accent-green);color:var(--accent-green);}
.lib-tab.active{border-color:var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);}
.lib-section{width:100%;display:flex;flex-direction:column;align-items:center;}

/* ══ MGH REFERENCE (LIBRARY) ══ */
.lib-mgh-search{width:100%;padding:.55rem .75rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-primary);color:var(--text-primary);font-size:.78rem;outline:none;font-family:'DM Sans',sans-serif;margin-bottom:.65rem;transition:border-color .15s;}
.lib-mgh-search:focus{border-color:var(--accent-cyan);}
.lib-mgh-search::placeholder{color:var(--text-dim);}
.lib-mgh-nav{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.75rem;justify-content:center;}
.mgh-lib-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;margin-bottom:.4rem;overflow:hidden;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.mgh-lib-card:hover{border-color:var(--accent-cyan);background:var(--bg-card-hover);}
.mgh-lib-hdr{display:flex;justify-content:space-between;align-items:center;padding:.55rem .65rem;gap:.5rem;cursor:pointer;}
.mgh-lib-chapter{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.12rem .35rem;border-radius:4px;border:1px solid;margin-right:.4rem;white-space:nowrap;}
.mgh-lib-topic{font-size:.76rem;font-weight:600;color:var(--text-primary);}
.mgh-lib-body{display:none;padding:.1rem .75rem .75rem;border-top:1px solid var(--border);user-select:text;-webkit-user-select:text;cursor:text;}
.mgh-lib-card.open .mgh-lib-body{display:block;}
.mgh-lib-card.open .trial-arrow{transform:rotate(180deg);}
/* Pocket Guide body copy. On the dark canvas the generic --text-secondary
   (#a8b4c6) reads as dull grey over long passages, so the guide gets its own
   pair of tokens: a bright, faintly-warm paper white for body text and a
   softer step for sub-bullets. Deliberately NOT cyan — that stays reserved
   for the section/sub headers, so hierarchy survives the lift. */
.mgh-lib-content{font-size:.86rem;line-height:1.7;color:var(--mgh-body, var(--text-secondary));}

/* MGH formatted content elements */
.mgh-section-hdr{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.06em;margin:1rem 0 .3rem;padding:.25rem .5rem;border-radius:4px;background:rgba(255,255,255,.05);border-left:3px solid;}
.mgh-sub-hdr{font-weight:700;color:var(--accent-cyan);}
.mgh-sub-hdr-block{font-weight:700;color:var(--accent-cyan);margin:.5rem 0 .15rem;font-size:.7rem;display:block;}
.mgh-bullet{padding-left:.65rem;border-left:2px solid var(--accent-blue);margin:.15rem 0;font-size:.68rem;line-height:1.55;}
.mgh-numbered{padding:.35rem .65rem;margin:.4rem 0 .15rem;font-size:.68rem;line-height:1.55;border-radius:6px;background:rgba(255,255,255,.03);}
.mgh-numbered strong{font-family:'JetBrains Mono',monospace;font-size:.7rem;margin-right:.3rem;}
.mgh-sub-bullet{padding-left:1.2rem;margin:.1rem 0;font-size:.72rem;line-height:1.5;color:var(--mgh-body-dim, var(--text-dim));border-left:2px solid var(--border);margin-left:.65rem;}
.mgh-para{font-size:.68rem;line-height:1.55;margin:.12rem 0;}
/* Dark canvas only — light mode's #4a5568 on white already reads well.
   Scoped with :not([data-fc-theme="light"]) so the values also apply on the
   very first paint, before ui.js has stamped the attribute. */
html:not([data-fc-theme="light"]){
  --mgh-body:#e3ebf7;
  --mgh-body-dim:#bccbe0;
}
/* Bullets/numbered/para inherit from .mgh-lib-content, but several library
   pages render these outside that wrapper — pin them so the whole guide
   lifts together rather than in patches. */
html:not([data-fc-theme="light"]) .mgh-bullet,
html:not([data-fc-theme="light"]) .mgh-numbered,
html:not([data-fc-theme="light"]) .mgh-para{color:var(--mgh-body);}

/* Shared related-links blocks used across library pages */
.lib-related{margin-top:.75rem;padding:.6rem .7rem;border:1px solid rgba(6,182,212,.18);border-radius:10px;background:linear-gradient(180deg, rgba(6,182,212,.06), rgba(6,182,212,.02));}
.lib-related-page{margin-bottom:.85rem;}
.lib-related-compact{padding:.5rem .6rem;}
.lib-related-heading{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-cyan);margin-bottom:.45rem;text-align:center;}
/* ── "Further Exploration" fold (2026-08-31) — cross-link blocks are
   collapsed to one quiet line by default; the chips render on demand. */
.lib-related-fold{padding:.4rem .6rem;}
.lib-related-toggle{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;width:100%;padding:.1rem 0;border:none;background:transparent;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;}
.lib-related-title{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-cyan);white-space:nowrap;}
.lib-related-hint{font-size:.64rem;color:var(--text-dim);line-height:1.4;}
.lib-related-caret{margin-left:auto;font-size:.72rem;color:var(--accent-cyan);}
.lib-related-toggle:hover .lib-related-title{text-decoration:underline;}
.lib-related-fold .lib-related-links{margin-top:.5rem;}
.lib-related-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;}
.lib-related-chip{border:1px solid rgba(6,182,212,.28);border-radius:999px;padding:.3rem .6rem;background:var(--bg-card);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;cursor:pointer;transition:border-color .15s, transform .15s, color .15s, background .15s;}
.lib-related-chip:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:var(--bg-card-hover);transform:translateY(-1px);}


.sidebar-btn.red:hover{border-color:var(--accent-red);color:var(--accent-red);}
.utility-pill.red:hover{border-color:var(--accent-red);color:var(--accent-red);}

/* ══ CROSS-REFERENCE RETURN CONTROL ══
   Floating "↩ Back to <source>" pill shown only after the user follows a
   related-link chip. Clicking it restores the exact prior view + scroll.
   Hidden when there is no snapshot on the stack. */
.lib-xref-return{
  position:fixed;
  left:50%;
  bottom:1.15rem;
  transform:translateX(-50%);
  z-index:1250;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  max-width:min(92vw,460px);
  padding:.55rem 1rem;
  border:1px solid rgba(168,85,247,.55);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(168,85,247,.96), rgba(139,92,246,.96));
  color:#fff;
  font-family:'DM Sans',sans-serif;
  font-size:.76rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(76,29,149,.45), 0 2px 6px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.lib-xref-return:hover{transform:translateX(-50%) translateY(-2px);filter:brightness(1.06);box-shadow:0 9px 28px rgba(76,29,149,.55), 0 3px 8px rgba(0,0,0,.3);}
.lib-xref-return:active{transform:translateX(-50%) translateY(0);}
.lib-xref-return-ico{font-size:.95rem;line-height:1;}
.lib-xref-return-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:560px){
  .lib-xref-return{bottom:.85rem;font-size:.72rem;padding:.5rem .85rem;}
}

/* Cross-reference breadcrumb trail — renders under the page header whenever
   the user arrived via a cross-referenced link (driven by the xref stack in
   libraryRelated.js), e.g. Medications › Outpatient Medicine › Medication
   Management. Stack segments are clickable and restore their snapshot. */
.lib-xref-crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  padding:.45rem 1.5rem .15rem;
  color:var(--text-secondary);
}
.lib-xref-crumb-link{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--accent-cyan);font-weight:600;
}
.lib-xref-crumb-link:hover{text-decoration:underline;text-underline-offset:2px;}
.lib-xref-crumb-sep{color:var(--text-dim);opacity:.6;}
.lib-xref-crumb-here{color:var(--text-secondary);}
.lib-xref-crumb-tail{font-weight:700;color:var(--text-primary);}
@media(max-width:560px){
  .lib-xref-crumb{font-size:.68rem;padding:.4rem 1rem .1rem;}
}

/* ══ ADVANCED TOPICS ══ */
#at-nav{max-width:760px;}
#at-sections{width:100%;max-width:760px;}
#at-detail{width:100%;max-width:760px;}
.at-hdr{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;margin-bottom:.15rem;text-align:center;}
.at-hdr h4{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:var(--accent-red);margin-bottom:.3rem;}
.at-hdr p{font-size:.72rem;line-height:1.55;color:var(--text-secondary);}
.at-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.45rem;}
.at-tag{padding:.15rem .4rem;border-radius:4px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.03em;color:var(--accent-red);}
.at-sub-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-purple);margin:.75rem 0 .3rem;padding-bottom:.2rem;border-bottom:1px solid var(--border);}
.at-item{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.75rem .85rem;margin-top:.4rem;}
.at-item-title{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--accent-cyan);margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem;}
.at-item-body{font-size:.72rem;line-height:1.55;color:var(--text-secondary);}
.at-body-block + .at-body-block{margin-top:.42rem;}
/* A labelled subsection is a real break in the page: a full blank line of air
   above the label, so TRALI / TACO / ACUTE HEMOLYTIC read as three things
   rather than one paragraph (2026-09-15). */
.at-body-label{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.35;margin:1.15rem 0 .25rem;}
.at-item-body > .at-body-label:first-child,
.at-body-block:first-child > .at-body-label:first-child,
.at-callout-body > .at-body-label:first-child{margin-top:0;}
.at-body-label + .at-dash-list{margin-top:.15rem;}
.at-wf .at-item-title{color:var(--accent-blue);}
.at-step{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(59,130,246,.15);color:var(--accent-blue);font-size:.66rem;font-weight:700;flex-shrink:0;}
.at-emerg{border-left:3px solid var(--accent-red);}
.at-emerg .at-item-title{color:var(--accent-red);}
.at-key-move{margin-top:.45rem;padding-top:.35rem;border-top:1px solid var(--border);font-size:.72rem;line-height:1.5;color:var(--text-secondary);}
.at-km-label{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-amber);margin-right:.3rem;}
.at-pearl-list{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.65rem .85rem;margin-top:.4rem;}
.at-pearl{font-size:.72rem;line-height:1.55;color:var(--text-secondary);padding:.35rem 0;border-bottom:1px solid var(--border);}
.at-pearl:last-child{border-bottom:none;padding-bottom:0;}
.at-note{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.65rem .85rem;margin-top:.5rem;font-size:.7rem;line-height:1.55;color:var(--text-secondary);}
.at-note.amber{border-left:3px solid var(--accent-amber);}.at-note.blue{border-left:3px solid var(--accent-blue);}.at-note.red{border-left:3px solid var(--accent-red);}
.at-flag{font-size:.7rem;line-height:1.5;color:var(--accent-red);padding:.25rem 0;border-bottom:1px solid rgba(239,68,68,.1);}.at-flag:last-child{border-bottom:none;}
.at-case{position:relative;}
.at-case-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.35rem;}
.at-case-lvl{padding:.12rem .35rem;border-radius:4px;background:rgba(34,197,94,.12);color:var(--accent-green);font-size:.68rem;font-weight:600;}
.at-case-foc{padding:.12rem .35rem;border-radius:4px;background:rgba(168,85,247,.12);color:var(--accent-purple);font-size:.68rem;font-weight:600;}
.at-launch{display:block;width:100%;margin-top:.55rem;padding:.45rem .7rem;border-radius:8px;border:1.5px solid var(--accent-red);background:rgba(239,68,68,.06);color:var(--accent-red);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;text-align:center;}
.at-launch:hover{background:rgba(239,68,68,.14);}
.at-launch-full{margin-top:.75rem;padding:.55rem;border-style:dashed;}
.at-table{width:100%;border-collapse:collapse;font-size:.7rem;margin-top:.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.at-table th{text-align:left;padding:.4rem .55rem;background:var(--bg-primary);color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);}
.at-table td{padding:.4rem .55rem;border-bottom:1px solid var(--border);color:var(--text-secondary);line-height:1.45;vertical-align:top;}
.at-table tr:last-child td{border-bottom:none;}
/* Section-detail comparison tables take the section accent on the header row
   and left edge so they read as part of that section's color family. */
/* Wide tables scroll horizontally inside their own container instead of
   pushing the page (matters on narrow/mobile viewports). */
.at-table-wrap{margin-top:.5rem;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.at-table-wrap .at-table{margin-top:0;min-width:max-content;}
.at-section-detail .at-table{border-left:3px solid var(--at-section-accent, var(--accent-cyan));}
.at-section-detail .at-table th{color:var(--at-section-accent, var(--accent-cyan));background:color-mix(in srgb, var(--at-section-accent, #06b6d4) 9%, var(--bg-primary));}
.at-td-good{color:var(--accent-green);font-weight:700;}
.at-td-bad{color:var(--accent-red);font-weight:700;}
/* Mnemonic tables (FAILTOWEAN): first column is the letter/key. */
.at-table-mnemonic td.at-td-key{width:1%;white-space:nowrap;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.9rem;color:var(--at-section-accent, var(--accent-cyan));background:color-mix(in srgb, var(--at-section-accent, #06b6d4) 7%, transparent);}
/* Callout box — key formulas ("FORMULA") and do-not-do reminders ("warn"). */
.at-callout{margin-top:.55rem;padding:.6rem .75rem;border:1px solid var(--border);border-left:3px solid var(--at-section-accent, var(--accent-cyan));border-radius:10px;background:color-mix(in srgb, var(--at-section-accent, #06b6d4) 7%, var(--bg-card));}
.at-callout-warn{--at-section-accent:var(--accent-amber);}
.at-callout-label{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--at-section-accent, var(--accent-cyan));margin-bottom:.25rem;}
.at-callout-body{font-size:.72rem;line-height:1.55;color:var(--text-secondary);}
.at-callout-body .at-body-block + .at-body-block{margin-top:.3rem;}
/* "Further reading" external link under a section body. */
.at-source{display:inline-flex;align-items:center;gap:.3rem;margin-top:.55rem;padding:.4rem .6rem;border:1px solid var(--border);border-left:3px solid var(--at-section-accent,var(--accent-cyan));border-radius:8px;background:color-mix(in srgb, var(--at-section-accent, #06b6d4) 6%, var(--bg-card));color:var(--at-section-accent,var(--accent-cyan));font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;line-height:1.35;text-decoration:none;transition:background .15s ease,transform .12s ease;}
.at-source:hover{background:color-mix(in srgb, var(--at-section-accent, #06b6d4) 14%, transparent);transform:translateY(-1px);}
.at-overview{max-width:760px;width:100%;margin-left:auto;margin-right:auto;}
/* Center the ICU front-page hero copy so the overview reads as an
   intentionally centered presentation (PART 2). */
.at-overview-copy{text-align:center;}

/* ICU landing "consult launcher" — a clean grid of topic tiles. */
.at-overview-lead{width:100%;margin:.1rem auto .85rem;text-align:center;}
.at-overview-h{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--text-primary);margin:.15rem 0 .3rem;}
.at-overview-sub{font-size:.75rem;color:var(--text-secondary);line-height:1.5;margin:0;}
.at-launch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;width:100%;}
.at-launch-tile{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .8rem;border:1px solid var(--border);border-left:3px solid var(--at-t,var(--accent-cyan));border-radius:12px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.at-launch-tile:hover{transform:translateY(-2px);border-color:var(--at-t,var(--accent-cyan));box-shadow:0 4px 14px rgba(0,0,0,.08);}
.at-launch-ic{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;}
.at-launch-txt{display:flex;flex-direction:column;gap:.14rem;min-width:0;}
.at-launch-title{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;line-height:1.2;}
.at-launch-copy{font-size:.68rem;line-height:1.4;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.at-launch-meta{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);margin-top:.1rem;}
@media(max-width:640px){.at-launch-grid{grid-template-columns:1fr;}}
.at-overview-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.75fr);gap:.85rem;padding:1rem 1rem .95rem;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg, rgba(239,68,68,.08), rgba(239,68,68,.02));}
.at-overview-copy h3{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--text-primary);margin:.2rem 0 .4rem;}
.at-overview-copy p{font-size:.74rem;line-height:1.55;color:var(--text-secondary);}
.at-overview-kicker{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-red);}
.at-overview-stats{display:grid;grid-template-columns:1fr;gap:.45rem;align-self:start;}
.at-overview-stat{padding:.65rem .6rem;border:1px solid rgba(239,68,68,.16);border-radius:10px;background:rgba(255,255,255,.04);text-align:center;}
.at-overview-stat strong{display:block;font-family:'JetBrains Mono',monospace;font-size:.94rem;color:var(--text-primary);}
.at-overview-stat span{display:block;font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem;}
.at-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.75rem;}
.at-topic-card,.at-subtopic-card{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease;}
.at-topic-card{padding:.9rem .95rem;text-align:left;cursor:pointer;}
.at-topic-card:hover{border-color:var(--accent-red);background:var(--bg-card-hover);transform:translateY(-2px);}
.at-topic-card-kicker,.at-result-breadcrumb,.at-subtopic-meta{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.at-topic-card-title{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--text-primary);margin:.28rem 0;}
.at-topic-card-copy,.at-subtopic-card-copy{font-size:.71rem;line-height:1.5;color:var(--text-secondary);}
.at-topic-card-meta{font-size:.68rem;color:var(--accent-red);font-weight:700;margin-top:.5rem;}
.at-topic-card-list{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.55rem;}
.at-topic-card-list span{padding:.18rem .42rem;border-radius:999px;background:rgba(239,68,68,.08);font-size:.68rem;color:var(--text-secondary);}
.at-topic-shell .at-subtopic-meta{margin-top:.55rem;color:var(--accent-red);}
.at-subtopic-card{align-items:flex-start;text-align:left;padding:.95rem .9rem;gap:.45rem;min-height:0;}
.at-subtopic-card:hover{border-color:var(--accent-cyan);background:var(--bg-card-hover);transform:translateY(-2px);}
/* Internal "workflow steps" rail. Wrapped in .at-steps-wrap (a distinct,
   red-tinted, labeled container) so it reads as a clearly different UI
   layer from the cyan cross-reference "Related Sections" chip row above
   it (PART 3). Extra top margin adds vertical separation between the two
   stacked chip groups. */
.at-steps-wrap{margin:1.05rem 0 .55rem;padding:.6rem .7rem .7rem;border:1px solid rgba(239,68,68,.28);border-left:3px solid var(--accent-red);border-radius:10px;background:linear-gradient(180deg, rgba(239,68,68,.085), rgba(239,68,68,.02));}
.at-steps-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-red);margin-bottom:.45rem;text-align:center;}
.at-detail-jumps{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;justify-content:center;}
.at-detail-jump{border:1px solid rgba(239,68,68,.35);border-radius:8px;padding:.34rem .64rem;background:var(--bg-secondary);color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.at-detail-jump:hover{border-color:var(--accent-red);color:var(--accent-red);background:rgba(239,68,68,.1);transform:translateY(-1px);}
.at-item-hdr{align-items:flex-start;gap:.75rem;}
.at-item-hdr-main{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.at-item-preview{font-size:.72rem;line-height:1.45;color:var(--text-dim);}
.at-section-browser{
  margin:1rem 0 .75rem;
  padding:.72rem;
  border:1px solid rgba(6,182,212,.22);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(6,182,212,.065), rgba(255,255,255,.015));
}
.at-section-browser-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.8rem;          /* tier 2 — deliberately below .ref-subcat-header */
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent-cyan);
  margin-bottom:.75rem;
  text-align:center;
  line-height:1.3;
}
/* Must live AFTER the rule above: same specificity, so source order decides.
   Kept in step with the .ref-subcat-header breakpoints so tier 2 stays
   visibly smaller than tier 1 at every width. */
@media (max-width:640px){
  .at-section-browser-label{font-size:.72rem;letter-spacing:.09em;margin-bottom:.6rem;}
}
@media (max-width:480px){
  .at-section-browser-label{font-size:.72rem;letter-spacing:.08em;}
}
.at-section-tile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
}
/* Split-panel section browser: tile rail on the left, selected-section
   detail panel on the right. The rail is sticky so the tiles stay in view
   while a long detail panel scrolls. */
.at-section-split{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:.65rem;
  align-items:start;
}
.at-section-rail{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  position:sticky;
  top:.75rem;
  max-height:calc(100vh - 1.5rem);
  overflow-y:auto;
  /* The rail scrolls (overflow-y:auto), so a tile's hover lift
     (transform:translateY(-1px)) and the active tile's 2px focus ring on
     the TOP tile were being clipped by the rail's own top/side edges.
     Pad the scroll box on all sides so the lift + ring stay fully visible. */
  padding:3px 4px 3px 3px;
}
/* The rail is a flex column with a max-height + overflow-y:auto, so it is
   meant to SCROLL when the sections don't fit. Without flex-shrink:0 the
   flex algorithm instead compresses every tile (and its copy) to squeeze
   them into the max-height, collapsing the preview text to a clipped sliver.
   Pin the tiles so the rail scrolls and each tile keeps its natural height. */
.at-section-rail .at-section-tile{ flex-shrink:0; }
/* The tile copy is a direct flex child of .at-section-tile (a flex column),
   so Chromium "blockifies" display:-webkit-box into flow-root, which silently
   breaks -webkit-line-clamp. Clamp by line-height-based max-height instead —
   robust under flex and cuts on an exact 2-line boundary so no half-lines show. */
.at-section-rail .at-section-tile-copy{
  display:block;
  width:100%;
  line-height:1.4;
  max-height:2.8em;
  overflow:hidden;
}
.at-section-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.22rem;
  min-height:0;
  padding:.72rem .76rem;
  border:1px solid var(--border);
  border-left:3px solid var(--at-section-accent, var(--accent-cyan));
  border-radius:10px;
  background:var(--bg-card);
  color:var(--text-primary);
  text-align:center;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.at-section-tile:hover{
  border-color:var(--at-section-accent, var(--accent-cyan));
  background:var(--bg-card-hover);
  transform:translateY(-1px);
}
.at-section-tile.active{
  border-color:var(--at-section-accent, var(--accent-cyan));
  background:linear-gradient(180deg, rgba(6,182,212,.085), rgba(255,255,255,.02));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--at-section-accent, #06b6d4) 16%, transparent);
}
.at-section-tile-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--at-section-accent, var(--accent-cyan));
}
.at-section-tile-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  font-weight:700;
  line-height:1.25;
  color:var(--text-primary);
}
.at-section-tile-copy{
  font-size:.72rem;
  line-height:1.42;
  color:var(--text-secondary);
}
.at-section-detail{
  margin-top:0;
  padding:.85rem .95rem;
  border:1px solid var(--border);
  border-left:3px solid var(--at-section-accent, var(--accent-cyan));
  border-radius:10px;
  background:var(--bg-card);
  min-width:0;
}
.at-section-detail-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--at-section-accent, var(--accent-cyan));
  margin-bottom:.3rem;
}
/* Detail-panel header row: prev/next arrows flanking the kicker. The three
   items are centered as a single group (rather than pinned to the far edges)
   and the arrows are enlarged so their paging purpose is obvious and they are
   an easy click target. */
.at-section-detail-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.15rem;
  margin-bottom:.5rem;
}
.at-section-detail-top .at-section-detail-kicker{margin-bottom:0;text-align:center;min-width:5.5rem;}
.at-section-nav{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--bg-secondary);
  color:var(--at-section-accent, var(--accent-cyan));
  font-size:1.6rem;
  line-height:1;
  padding:0 0 .12rem;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.at-section-nav:hover:not(:disabled){
  border-color:var(--at-section-accent, var(--accent-cyan));
  background:color-mix(in srgb, var(--at-section-accent, #06b6d4) 12%, transparent);
  transform:translateY(-1px);
}
.at-section-nav:disabled{opacity:.3;cursor:default;}
/* Inline enumerations broken out as dash lines (one item per line). */
/* The line a group of dashes belongs to (2026-09-15). A dash list is only
   ever rendered under a stem — a label or this lead-in — so the reader can
   always see what the group is a list OF. */
/* Mnemonic tiles (2026-09-15): one coloured letter per row with its
   expansion beneath it in the same colour. */
.at-mnem{margin:.75rem 0 .5rem;padding:.6rem .7rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary);}
.at-mnem-hdr{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--text-primary);}
.at-mnem-lead{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:0;color:var(--text-dim);text-transform:none;}
.at-mnem-row{display:flex;align-items:flex-start;gap:.6rem;padding:.3rem 0;border-top:1px solid var(--border);}
.at-mnem-row:first-of-type{border-top:none;}
.at-mnem-letter{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;border:1.5px solid var(--at-mnem);background:color-mix(in srgb,var(--at-mnem) 14%,transparent);
  color:var(--at-mnem);font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;line-height:1;}
.at-mnem-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0;}
.at-mnem-term{font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;color:var(--at-mnem);line-height:1.35;}
.at-mnem-note{font-family:'DM Sans',sans-serif;font-size:.72rem;line-height:1.5;color:var(--text-secondary);}
@media (max-width:600px){ .at-mnem-letter{width:24px;height:24px;font-size:.76rem;} }

.at-list-stem{margin:1.1rem 0 .25rem;font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;line-height:1.5;
  color:var(--text-primary);border-left:3px solid var(--at-section-accent,var(--accent-cyan));padding-left:.5rem;}
.at-list-stem + .at-dash-list{margin-top:.1rem;padding-left:.55rem;}
/* An ALL-CAPS term used as the subject of its own sentence, coloured in
   place rather than shouting in the middle of the paragraph. */
.at-caps{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;letter-spacing:.02em;}
.at-dash-list{display:flex;flex-direction:column;gap:.18rem;margin:.12rem 0;}
.at-dash-item{position:relative;padding-left:.85rem;line-height:1.5;}
.at-dash-item::before{
  content:'–';
  position:absolute;
  left:.05rem;
  color:var(--at-section-accent, var(--accent-cyan));
  font-weight:700;
}
.at-section-detail h5{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;
  font-weight:700;
  line-height:1.3;
  color:var(--text-primary);
  margin:0 0 .45rem;
}
/* Year · journal line under a trial's title in the featured detail panel. */
.trial-detail-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text-dim);
  margin:-.25rem 0 .55rem;
}
@media(max-width:600px){#at-nav,#at-sections,#at-detail{max-width:100%;}}
@media(max-width:760px){
  .at-section-split{grid-template-columns:1fr;}
  .at-section-rail{position:static;max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;}
}
@media(max-width:640px){.at-section-tile-grid{grid-template-columns:1fr;}.at-section-tile{min-height:0;}.at-section-rail{grid-template-columns:1fr;}}
@media(max-width:760px){.at-overview-hero{grid-template-columns:1fr;}.at-overview-stats{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.at-overview-grid{grid-template-columns:1fr;}.at-overview-stats{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════ */
/* LANDING PAGE                           */
/* ═══════════════════════════════════════ */
.landing-container{display:flex;flex-direction:column;align-items:center;padding:1.5rem;max-width:680px;width:100%;}
/* Quick Start — one-tap daily case launcher above the landing cards */
.quick-start-btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;width:100%;max-width:580px;margin:0 0 .9rem;padding:.75rem 1rem;background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(168,85,247,.10));border:1px solid var(--accent-red);border-radius:12px;color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;}
.quick-start-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(239,68,68,.18);background:linear-gradient(135deg,rgba(239,68,68,.2),rgba(168,85,247,.14));}
.quick-start-btn .qs-sub{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;color:var(--text-secondary);letter-spacing:.01em;}
.landing-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:580px;}
.landing-hero-band{display:flex;align-items:center;justify-content:center;gap:1.4rem;max-width:560px;width:100%;margin:0 auto 1.2rem;padding:.45rem .8rem;background:transparent;border:none;border-radius:0;}
.lhb-stat{display:flex;flex-direction:row;align-items:baseline;gap:.45rem;min-width:0;}
.lhb-num{font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:600;color:var(--text-secondary);line-height:1;letter-spacing:.01em;}
.lhb-lbl{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-weight:500;}
.lhb-divider{width:1px;height:18px;background:var(--text-dim);opacity:.55;}
@media (max-width: 500px){.landing-hero-band{gap:.85rem;padding:.4rem .6rem;}.lhb-num{font-size:.95rem;}.lhb-lbl{font-size:.64rem;letter-spacing:.06em;}.lhb-stat{gap:.35rem;}}
.landing-card{display:flex;flex-direction:column;align-items:center;gap:.65rem;padding:1.8rem 1.2rem;border-radius:14px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,transform .25s,opacity .25s;text-align:center;font-family:'DM Sans',sans-serif;}
.landing-card:hover{transform:translateY(-3px);border-color:var(--accent-cyan);box-shadow:0 8px 32px rgba(6,182,212,.12);}
.lc-sim:hover{border-color:var(--accent-red);box-shadow:0 8px 32px var(--accent-red-glow);}
.lc-icon{font-size:2.2rem;display:block;margin-bottom:.15rem;}
.lc-title{font-family:'JetBrains Mono',monospace;font-size:.98rem;font-weight:700;letter-spacing:.01em;}
.lc-desc{font-size:.72rem;color:var(--text-secondary);line-height:1.5;max-width:240px;}
.landing-small-btn{padding:.35rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:500;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;}
.landing-small-btn:hover{border-color:var(--accent-cyan);color:var(--text-primary);background:var(--bg-card-hover);}
@media(max-width:500px){.landing-cards{grid-template-columns:1fr;}.landing-card{padding:1.3rem 1rem;}}

/* ══ ACCOUNT MENU (top-right of landing page) ══ */
.account-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem .35rem .4rem;border-radius:999px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;max-width:220px;}
.account-chip:hover{border-color:var(--accent-cyan);background:var(--bg-card-hover);}
.account-chip-avatar{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(6,182,212,.18);color:var(--accent-cyan);font-size:.85rem;overflow:hidden;flex-shrink:0;}
.account-chip-label{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account-chip-caret{font-size:.68rem;color:var(--text-dim);margin-left:.1rem;}
.account-menu-dropdown{position:absolute;top:calc(100% + .35rem);right:0;min-width:230px;max-width:280px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.35);overflow:hidden;animation:msgIn .15s ease;}
.account-menu-hdr{padding:.65rem .8rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);}
.account-menu-name{font-size:.8rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-menu-email{font-size:.68rem;color:var(--text-dim);margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.account-menu-item{width:100%;display:flex;align-items:center;gap:.55rem;padding:.6rem .8rem;border:none;background:transparent;color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:500;text-align:left;cursor:pointer;transition:background .15s;}
.account-menu-item:hover{background:var(--bg-card-hover);}
.account-menu-signout{color:var(--accent-red);}
.account-menu-signout:hover{background:rgba(239,68,68,.08);}
@media(max-width:500px){.account-chip-label{max-width:90px;}.account-menu-dropdown{min-width:200px;}}

/* ═══════════════════════════════════════ */
/* LIBRARY HUB                            */
/* ═══════════════════════════════════════ */
.lib-hub{width:100%;max-width:760px;}
/* grid-auto-rows: 1fr forces every row in the hub to be the height of
   the tallest tile across the WHOLE grid, not just the tallest in that
   row. Combined with height:100% on .lib-hub-tile, this means every
   tile renders at identical dimensions even when one description (e.g.
   the ICU tile's longer table-of-contents description) would otherwise
   make a single row taller than the others. */
/* 4-column layout matches the user's sketched 4x4 layout: 16 tiles
   render as 4 rows of 4 on desktop, falling back to 3 / 2 / 1 columns
   as the viewport narrows so nothing wraps awkwardly on tablets and
   phones. Tile padding tightens slightly at 4-up so the title +
   description still fit cleanly when the column is narrower. */
.lib-hub-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:.7rem;}
.lib-hub-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:.95rem .7rem;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;text-align:center;font-family:'DM Sans',sans-serif;height:100%;}
.lib-hub-tile:hover{border-color:var(--accent-cyan);background:var(--bg-card-hover);transform:translateY(-2px);}
.lht-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;}
.lht-title{font-family:'JetBrains Mono',monospace;font-size:.73rem;font-weight:700;line-height:1.25;}
.lht-desc{font-size:.7rem;color:var(--text-secondary);line-height:1.4;}
.lib-back-hub{align-self:flex-start;background:none;border:none;color:var(--accent-cyan);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;margin-bottom:.75rem;padding:.25rem 0;transition:color .15s;}
.lib-back-hub:hover{color:var(--text-primary);}
/* While a cross-reference jump is active, the prominent back button is
   relabeled "← Back to <source>" and returns to that page. Tint it to
   match the floating return pill so the two read as the same action. */
.lib-back-hub.lib-back-hub-xref{color:var(--accent-purple);font-weight:700;}
.lib-back-hub.lib-back-hub-xref:hover{color:var(--accent-purple);filter:brightness(1.15);}
.lib-subview{display:flex;flex-direction:column;}
@media(max-width:1000px){.lib-hub-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.lib-hub-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.lib-hub-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════ */
/* RADIOLOGY HUB — grouped compact tiles    */
/* ═══════════════════════════════════════ */
.rad-hub-group{margin-bottom:1.15rem;}
.rad-hub-group-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);margin:0 0 .5rem;}
.rad-hub-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;}
.rad-hub-grid-wide{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;}
.rad-sys-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.32rem;padding:.72rem .5rem;border-radius:10px;border:1px solid var(--border);border-top:3px solid var(--rad-accent,var(--accent-cyan));background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s,opacity .18s;text-align:center;font-family:'DM Sans',sans-serif;}
.rad-sys-tile:hover{border-color:var(--rad-accent,var(--accent-cyan));background:var(--bg-card-hover);transform:translateY(-2px);}
.rad-sys-ic{font-size:1.3rem;line-height:1;}
.rad-sys-nm{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;line-height:1.2;color:var(--rad-accent,var(--accent-cyan));}
@media(max-width:900px){.rad-hub-grid{grid-template-columns:repeat(3,1fr);}.rad-hub-grid-wide{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.rad-hub-grid{grid-template-columns:repeat(2,1fr);}.rad-hub-grid-wide{grid-template-columns:1fr;}}

/* Radiology sub-page item cards (rendered inside the split-panel detail).
   Reuse the re-side field blocks from the old accordion, but always open. */
.rad-item-card{border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);padding:.6rem .7rem;margin-bottom:.55rem;}
.rad-item-card:last-child{margin-bottom:0;}
.rad-item-hdr{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.4rem;}
.rad-mod-block + .rad-mod-block{margin-top:.35rem;}
.rad-mod-block h5{margin-top:.2rem;}
.rad-search-crumb{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:.5rem 0 .3rem;}

/* ═══════════════════════════════════════ */
/* ADVANCED TOPICS — Subtopic Grid        */
/* ═══════════════════════════════════════ */
.at-subtopic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:.5rem;}
.at-subtopic-card{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.1rem .8rem;border-radius:10px;border:1.5px solid var(--border);border-top:3px solid var(--at-card-accent, var(--accent-cyan));background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s,opacity .2s;text-align:center;font-family:'DM Sans',sans-serif;}
.at-subtopic-card:hover{border-color:var(--at-card-accent, var(--accent-cyan));background:var(--bg-card-hover);transform:translateY(-2px);}
.at-sc-icon{font-size:1.6rem;}
/* Tile headers take a per-tile rotating accent (set inline via
   --at-card-accent) so they read distinctly from the secondary-grey body
   copy beneath them without every header being the same cyan. */
.at-sc-title{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--at-card-accent, var(--accent-cyan));}
/* Grouped subtopics (e.g. Mechanical Circulatory Support) render as one
   tile spanning the full grid width (both columns). */
.at-group-card{grid-column:1 / -1;}
/* `wide` subtopics also span both columns — used by Acid-Base so ABG
   Interpretation sits full-width on top and Mixed Acid-Base full-width on
   the bottom, with the four primary disorders in a 2×2 in between. */
.at-subtopic-card--wide{grid-column:1 / -1;}
.at-acidbase-shell{
  padding:.95rem 1rem;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(6,182,212,.075), rgba(255,255,255,.02));
}
.at-acidbase-shell h4{color:var(--accent-cyan);font-size:.9rem;}
.at-acidbase-shell p{max-width:620px;margin:0 auto;color:var(--text-secondary);}
.at-acidbase-shell .at-subtopic-meta{color:var(--accent-cyan);}
.at-acidbase-grid{
  gap:.5rem;
  margin-top:.65rem;
}
.at-subtopic-card.at-acidbase-card{
  align-items:center;
  text-align:center;
  padding:.82rem .86rem;
  gap:.3rem;
  min-height:112px;
  border-width:1px;
  border-top-width:3px;
  border-radius:10px;
  box-shadow:none;
}
.at-subtopic-card.at-acidbase-card:hover{
  border-color:var(--at-card-accent, var(--accent-cyan));
  background:var(--bg-card-hover);
  transform:translateY(-1px);
}
.at-subtopic-card.at-acidbase-card .at-sc-title{
  color:var(--at-card-accent, var(--accent-cyan));
  font-size:.68rem;
  line-height:1.28;
}
.at-subtopic-card.at-acidbase-card .at-subtopic-card-copy{
  font-size:.68rem;
  line-height:1.42;
  color:var(--text-secondary);
}
.at-subtopic-card.at-acidbase-card .at-subtopic-meta{
  margin-top:auto;
  color:var(--at-card-accent, var(--accent-cyan));
  font-size:.66rem;
  letter-spacing:.07em;
}
/* Centered, larger, non-cyan back link so it's easy to spot and doesn't
   blend in with the cyan-bordered "Ask Questions About This Topic"
   chatbot button immediately below it. Uses the amber/orange accent
   palette, which is the only family not already claimed by another
   button on the same page (cyan = Ask, orange = Quiz Me, but the
   back link is a navigation control, not a chatbot, so the visual
   separation is what matters most). */
.at-back-btn{
  display:block;
  align-self:flex-start;
  width:fit-content;
  margin:0 auto .85rem 0;
  background:none;
  border:none;
  color:var(--accent-amber, #f59e0b);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:.95rem;
  font-weight:700;
  padding:.4rem 1rem .4rem 0;
  text-align:left;
  transition:color .15s, transform .12s;
  letter-spacing:.01em;
}
.at-back-btn:hover{color:var(--text-primary);transform:translateX(-3px);}
@media(max-width:500px){.at-subtopic-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════ */
/* THEME TOGGLE IN PAGE HEADERS           */
/* ═══════════════════════════════════════ */
.theme-pill{padding:.2rem .5rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);cursor:pointer;font-size:.7rem;font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;margin-left:auto;}
.theme-pill:hover{border-color:var(--accent-cyan);color:var(--text-primary);}

/* ═══════════════════════════════════════ */
/* PHYSICAL EXAM                          */
/* ═══════════════════════════════════════ */
.pe-sys-btn{white-space:nowrap;}
.pe-detail-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;padding:1rem;max-width:760px;width:100%;}
.pe-section{margin-bottom:1rem;}
.pe-section-title{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.4rem;padding-bottom:.25rem;border-bottom:1px solid var(--border);}
.pe-technique{font-size:.76rem;color:var(--text-secondary);line-height:1.55;padding:.2rem 0 .2rem .5rem;border-left:2px solid var(--border);}
.pe-findings-grid{display:grid;grid-template-columns:1fr;gap:.4rem;}
.pe-finding-card{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:.5rem .65rem;}
.pe-finding-name{font-size:.76rem;font-weight:600;margin-bottom:.2rem;}
.pe-finding-ddx{font-size:.72rem;color:var(--text-secondary);line-height:1.5;}
.pe-capacity{background:rgba(142,68,173,.06);border:1px solid rgba(142,68,173,.2);border-radius:8px;padding:.75rem;}
.pe-capacity-overview{font-size:.76rem;color:var(--text-secondary);line-height:1.55;margin-bottom:.6rem;}
.pe-capacity-criterion{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem;margin-bottom:.35rem;}
.pe-capacity-name{font-size:.74rem;font-weight:700;margin-bottom:.15rem;}
.pe-capacity-test{font-size:.72rem;color:var(--text-secondary);line-height:1.5;}
.pe-capacity-pearls{margin-top:.5rem;padding:.5rem;background:rgba(245,158,11,.06);border-radius:6px;}
.pe-pearl-item{font-size:.72rem;color:var(--text-secondary);line-height:1.5;padding:.1rem 0;}

/* ═══════════════════════════════════════ */
/* MEDICINE-SURGERY                       */
/* ═══════════════════════════════════════ */
.ms-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:8px;margin:0 auto .4rem;overflow:hidden;max-width:760px;width:100%;}
.ms-card-hdr{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;cursor:pointer;transition:background .15s;}
.ms-card-hdr:hover{background:var(--bg-card-hover);}
.ms-card-title{font-size:.78rem;font-weight:600;}
.ms-card-body{display:none;padding:0 .75rem .75rem;}
.ms-card.open .ms-card-body{display:block;}
.ms-card.open .trial-arrow{transform:rotate(180deg);}
.ms-card-text{font-size:.74rem;color:var(--text-secondary);line-height:1.6;white-space:pre-line;}
.ms-overview{max-width:760px;width:100%;margin:0 auto 1rem;}
/* Home hero is a single centered column: the intro copy centered, with the
   stat cards in a row of three beneath it. */
.ms-overview-hero{display:grid;grid-template-columns:1fr;gap:.9rem;padding:1rem 1rem .95rem;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg, rgba(245,158,11,.08), rgba(245,158,11,.02));text-align:center;}
.ms-overview-copy h3{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--text-primary);margin:.2rem 0 .4rem;}
.ms-overview-copy p,.ms-search-summary{font-size:.74rem;line-height:1.55;color:var(--text-secondary);}
.ms-overview-copy p{max-width:52ch;margin:0 auto;}
.ms-overview-kicker{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-amber);}
.ms-overview-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;align-self:stretch;}
/* Each stat card lays its number and label side by side (horizontal). */
.ms-overview-stat{display:flex;align-items:baseline;justify-content:center;gap:.4rem;flex-wrap:wrap;padding:.6rem .65rem;border:1px solid rgba(245,158,11,.16);border-radius:10px;background:rgba(255,255,255,.04);text-align:center;}
.ms-overview-stat strong{font-family:'JetBrains Mono',monospace;font-size:1.05rem;color:var(--text-primary);}
.ms-overview-stat span{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.ms-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.75rem;}
.ms-overview-card{border:1px solid var(--border);border-top:3px solid var(--ms-accent);border-radius:12px;padding:.85rem .9rem;background:var(--bg-card);text-align:center;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease,opacity .16s ease;}
.ms-overview-card:hover{border-color:var(--ms-accent);background:var(--bg-card-hover);transform:translateY(-2px);}
.ms-overview-card-top{display:flex;flex-direction:column;align-items:center;gap:.22rem;}
.ms-overview-card-name{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--text-primary);}
.ms-overview-card-meta{font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.ms-overview-card-note{font-size:.72rem;line-height:1.5;color:var(--text-secondary);margin-top:.45rem;}
.ms-overview-card-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.55rem;}
.ms-overview-card-list span{padding:.18rem .42rem;border-radius:999px;background:rgba(245,158,11,.08);font-size:.68rem;color:var(--text-secondary);}
.ms-overview-card-flag{margin-top:.55rem;font-size:.68rem;font-weight:700;color:var(--accent-red);text-transform:uppercase;letter-spacing:.05em;}
.ms-quick-jumps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:.75rem 0 0;}
.ms-panel{padding:.75rem .8rem;border:1px solid var(--border);border-radius:12px;background:rgba(245,158,11,.04);}
.ms-panel-title{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-amber);margin-bottom:.45rem;}
.ms-panel-list{display:grid;gap:.45rem;font-size:.73rem;line-height:1.5;color:var(--text-secondary);}
.ms-jump-row{display:flex;flex-wrap:wrap;gap:.38rem;}
.ms-jump-chip{border:1px solid rgba(245,158,11,.22);border-radius:999px;padding:.3rem .6rem;background:var(--bg-card);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.ms-jump-chip:hover{border-color:var(--accent-amber);color:var(--accent-amber);transform:translateY(-1px);}
.ms-card-hdr-main{display:flex;flex-direction:column;gap:.22rem;min-width:0;}
.ms-card-preview{font-size:.72rem;line-height:1.45;color:var(--text-dim);max-width:590px;}
.ms-search-summary{padding:.75rem .85rem;border:1px solid var(--border);border-radius:12px;background:rgba(245,158,11,.04);margin-bottom:.8rem;max-width:760px;}
@media(max-width:760px){.ms-overview-hero{grid-template-columns:1fr;}.ms-overview-stats{grid-template-columns:1fr 1fr;}.ms-quick-jumps{grid-template-columns:1fr;}}
@media(max-width:620px){.ms-overview-grid{grid-template-columns:1fr;}.ms-overview-stats{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════ */
/* RADIOLOGY                              */
/* ═══════════════════════════════════════ */
.rad-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:8px;margin-bottom:.4rem;overflow:hidden;max-width:760px;width:100%;}
.rad-card-hdr{display:flex;justify-content:space-between;align-items:center;padding:.6rem .75rem;cursor:pointer;transition:background .15s;}
.rad-card-hdr:hover{background:var(--bg-card-hover);}
.rad-term{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;}
.rad-card-body{display:none;padding:0 .75rem .75rem;}
.rad-card.open .rad-card-body{display:block;}
.rad-card.open .trial-arrow{transform:rotate(180deg);}
.rad-meaning{font-size:.74rem;color:var(--text-secondary);line-height:1.55;margin-bottom:.5rem;}
.rad-clinical{font-size:.74rem;color:var(--text-secondary);line-height:1.55;padding:.5rem;background:rgba(245,158,11,.06);border-radius:6px;border-left:3px solid var(--accent-amber);}

/* ═══════════════════════════════════════ */
/* PODCASTS                               */
/* ═══════════════════════════════════════ */
.pod-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:8px;padding:.75rem;margin-bottom:.4rem;max-width:760px;width:100%;transition:border-color .15s;}
.pod-card:hover{border-color:var(--accent-cyan);}
.pod-card-hdr{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;}
.pod-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.pod-name{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;}
.pod-meta{font-size:.72rem;color:var(--text-dim);margin-top:.1rem;}
.pod-desc{font-size:.74rem;color:var(--text-secondary);line-height:1.55;}

/* ═══════════════════════════════════════ */
/* COLOR-CODED DRUG SUBCATEGORY CHIPS     */
/* ═══════════════════════════════════════ */
.ref-subcat-btn.drug-color{transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.ref-subcat-btn.drug-color:hover{filter:brightness(1.2);}
.ref-subcat-btn.drug-color.active{filter:brightness(1.1);}

/* ═══════════════════════════════════════ */
/* LIBRARY HUB GRID EXPANDED              */
/* ═══════════════════════════════════════ */
@media(min-width:701px){.lib-hub-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:900px){.lib-hub-grid{grid-template-columns:repeat(4,1fr);}}

/* ═══════════════════════════════════════ */
/* CLINICAL TRIALS — TABBED VIEW          */
/* ═══════════════════════════════════════ */
.ct-tab-bar{display:flex;gap:.4rem;margin-bottom:.75rem;flex-wrap:wrap;justify-content:center;}
/* Trials page — the scope bar (All / Landmark / New) is pinned so it
   stays reachable no matter how deep the user scrolls the trial list.
   .ref-page-content is the scroll container, so sticky anchors to it.
   The opaque background + border keep the pinned bar legible over
   whatever scrolls beneath it. */
#ct-tab-bar{
  /* top pulls the pinned bar up over .ref-page-content's 1.25rem top
     padding so it sits flush with the visible top edge — with top:0 it
     pins 20px down and passing cards peek through the padding strip. */
  position:sticky;top:calc(-1.25rem - 1px);z-index:40;width:100%;
  background:var(--user-bg);
  padding:.5rem 0 .45rem;margin-bottom:.4rem;
  border-bottom:1px solid var(--border);
}
/* PCCM stratification — three clearly-visible sub-scopes (+All). */
.ct-stratum-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;width:100%;margin:.15rem 0 .5rem;
}
@media (max-width: 760px){ .ct-stratum-row{grid-template-columns:repeat(2,minmax(0,1fr));} }
.ct-stratum-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:.55rem .65rem;border-radius:10px;cursor:pointer;text-align:left;
  border:1.5px solid var(--border);background:var(--bg-card);
  font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;
}
.ct-stratum-card:hover{border-color:var(--accent-blue);}
.ct-stratum-card.active{border-color:var(--accent-blue);background:rgba(52,152,219,.12);}
.ct-stratum-icon{font-size:1rem;line-height:1;}
.ct-stratum-name{font-size:.72rem;font-weight:700;color:var(--text-primary);}
.ct-stratum-card.active .ct-stratum-name{color:var(--accent-blue);}
.ct-stratum-desc{font-size:.68rem;color:var(--text-dim);line-height:1.35;}
.ct-count-line{
  width:100%;font-size:.7rem;color:var(--text-dim);
  padding:.15rem .1rem .35rem;line-height:1.4;
  display:flex;justify-content:space-between;align-items:center;
  gap:.6rem;flex-wrap:wrap;
}

/* My Notes — source tabs (Library / Simulation / Custom) + custom-note
   affordances. Chips reuse .trials-nav-btn; these are the extras. */
.lib-notes-tabs{margin-bottom:.7rem;}
.lib-notes-tabs .lib-note-count{margin-left:.2rem;}
.lib-note-item{position:relative;}
.lib-note-del{
  position:absolute;top:.35rem;right:.4rem;
  background:transparent;border:none;cursor:pointer;
  color:var(--text-dim);font-size:.72rem;line-height:1;padding:.15rem;
}
.lib-note-del:hover{color:var(--accent-red);}
.custom-note-tag-chip.active{
  border-color:var(--accent-green) !important;
  background:rgba(34,197,94,.14) !important;
  color:var(--accent-green) !important;
}

/* ══════════════════════════════════════════════════════════════
 * POST-ROTATION TESTS
 * ════════════════════════════════════════════════════════════ */
.pr-intro{font-size:.78rem;color:var(--text-secondary);line-height:1.5;margin:0 0 1rem;max-width:60ch;}
.pr-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;}
/* Home top row: intro + My Scores entry, and the PD-privacy transparency note. */
.pr-home-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.7rem;}
.pr-scores-link{flex:0 0 auto;background:transparent;border:1.5px solid var(--accent-purple);color:var(--accent-purple);font-family:inherit;font-size:.72rem;font-weight:700;padding:.42rem .85rem;border-radius:8px;cursor:pointer;transition:background .15s,transform .1s;white-space:nowrap;}
.pr-scores-link:hover{background:rgba(168,85,247,.12);transform:translateY(-1px);}
.pr-privacy-note{font-size:.66rem;line-height:1.5;color:var(--text-dim);background:rgba(6,182,212,.06);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;margin-bottom:1rem;}
.pr-privacy-note strong{color:var(--text-secondary);font-weight:700;}
.pr-tile{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;text-align:left;
  padding:1rem 1.1rem;border-radius:14px;border:1.5px solid var(--border);background:var(--bg-card);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;font-family:inherit;color:var(--text-primary);}
.pr-tile:hover{border-color:var(--pr-accent,var(--accent-blue));transform:translateY(-1px);}
.pr-tile-disabled{opacity:.5;cursor:not-allowed;}
.pr-tile-disabled:hover{transform:none;border-color:var(--border);}
.pr-tile-icon{font-size:1.5rem;line-height:1;}
.pr-tile-title{font-size:1rem;font-weight:800;color:var(--text-primary);}
.pr-tile-sub{font-size:.68rem;color:var(--text-dim);line-height:1.4;}
.pr-tile-count{font-size:.68rem;color:var(--pr-accent,var(--accent-blue));font-weight:700;margin-top:.2rem;}
.pr-crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;font-size:.72rem;color:var(--text-secondary);font-weight:600;}

/* Test runner */
.pr-test-hdr{margin-bottom:1rem;}
.pr-test-title{font-size:1.05rem;font-weight:800;color:var(--text-primary);margin:.4rem 0 .6rem;}
/* Sticky progress header for the paginated runner. */
.pr-test-hdr-sticky{position:sticky;top:0;z-index:5;background:var(--bg-secondary);padding:.55rem .7rem;margin:0 0 .8rem;border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.pr-test-hdr-sticky .pr-test-title{margin:.1rem 0 .5rem;font-size:.95rem;}
/* Question navigator — jump chips. */
.pr-qnav{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.9rem;}
.pr-qnav-chip{width:1.85rem;height:1.85rem;flex:0 0 auto;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:7px;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;cursor:pointer;transition:border-color .12s,background .12s,transform .12s;display:inline-flex;align-items:center;justify-content:center;}
.pr-qnav-chip:hover{transform:translateY(-1px);border-color:var(--accent-blue);}
.pr-qnav-answered{border-color:var(--accent-blue);color:var(--accent-blue);background:rgba(59,130,246,.08);}
.pr-qnav-correct{border-color:var(--accent-green);color:var(--accent-green);background:rgba(16,185,129,.1);}
.pr-qnav-wrong{border-color:var(--accent-red);color:var(--accent-red);background:rgba(239,68,68,.1);}
.pr-qnav-flagged{box-shadow:inset 0 0 0 1.5px var(--accent-amber);}
.pr-qnav-current{outline:2px solid var(--accent-cyan);outline-offset:1px;}
/* Prev / Next bar. */
.pr-navbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.9rem 0 .3rem;}
.pr-nav-btn{padding:.5rem 1rem;border-radius:9px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s;}
.pr-nav-btn:hover:not([disabled]){border-color:var(--accent-cyan);background:var(--bg-card-hover);}
.pr-nav-btn[disabled]{opacity:.4;cursor:not-allowed;}
.pr-nav-pos{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-dim);}
/* Flag + confidence controls under the current question. */
.pr-runner-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-top:.7rem;padding-top:.65rem;border-top:1px dashed var(--border);}
.pr-flag-btn{border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:8px;padding:.35rem .7rem;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.pr-flag-btn:hover{border-color:var(--accent-amber);color:var(--accent-amber);}
.pr-flag-on{border-color:var(--accent-amber);color:var(--accent-amber);background:rgba(245,158,11,.1);}
.pr-conf{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;}
.pr-conf-lbl{font-size:.7rem;color:var(--text-dim);font-weight:600;}
.pr-conf-btn{border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);border-radius:999px;padding:.28rem .65rem;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.pr-conf-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.pr-conf-on{border-color:var(--accent-purple);color:#fff;background:var(--accent-purple);}
.pr-conf-recorded{font-size:.7rem;color:var(--text-dim);font-style:italic;}
.pr-progress-row{display:flex;align-items:center;gap:.6rem;}
.pr-progress{flex:1;height:8px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden;}
.pr-progress-fill{height:100%;background:var(--accent-blue);transition:width .25s;}
.pr-progress-lbl{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-dim);white-space:nowrap;}
.pr-questions{display:flex;flex-direction:column;gap:.9rem;}
.pr-q{padding:.85rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);}
.pr-q-graded{background:var(--bg-secondary);}
.pr-q-stem{font-size:.82rem;line-height:1.55;color:var(--text-primary);margin-bottom:.6rem;
  /* Neurology vignettes are multi-paragraph (history, then exam, then
     labs/imaging). pre-line keeps the blank lines the source has, so a
     10-line stem is scannable instead of one dense block. Stems written
     as a single paragraph are unaffected. */
  white-space:pre-line;}
.pr-q-num{font-weight:800;color:var(--accent-blue);margin-right:.15rem;}
.pr-q-figure{max-width:100%;border-radius:8px;margin:.2rem 0 .7rem;border:1px solid var(--border);}
.pr-choices{display:flex;flex-direction:column;gap:.4rem;}
.pr-choice{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.55rem .7rem;
  border:1.5px solid var(--border);border-radius:10px;background:var(--bg-secondary);cursor:pointer;
  font-family:inherit;font-size:.78rem;color:var(--text-primary);transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform .12s,opacity .12s;}
.pr-choice:hover:not([disabled]){border-color:var(--accent-blue);}
.pr-choice[disabled]{cursor:default;}
.pr-choice-letter{flex:0 0 1.4rem;height:1.4rem;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(255,255,255,.06);font-weight:800;font-size:.7rem;color:var(--text-secondary);}
.pr-choice-text{flex:1;line-height:1.4;}
.pr-choice-mark{font-weight:800;}
.pr-choice-selected{border-color:var(--accent-blue);background:rgba(59,130,246,.12);}
.pr-choice-selected .pr-choice-letter{background:var(--accent-blue);color:#fff;}
.pr-choice-correct{border-color:var(--accent-green);background:rgba(34,197,94,.13);}
.pr-choice-correct .pr-choice-letter{background:var(--accent-green);color:#06210f;}
.pr-choice-correct .pr-choice-mark{color:var(--accent-green);}
.pr-choice-wrong{border-color:var(--accent-red);background:rgba(239,68,68,.12);}
.pr-choice-wrong .pr-choice-letter{background:var(--accent-red);color:#fff;}
.pr-choice-wrong .pr-choice-mark{color:var(--accent-red);}
.pr-choice-muted{opacity:.7;}
.pr-explain{margin-top:.6rem;padding:.6rem .75rem;border-radius:10px;font-size:.74rem;line-height:1.5;}
.pr-explain-right{background:rgba(34,197,94,.08);border-left:3px solid var(--accent-green);}
.pr-explain-wrong{background:rgba(239,68,68,.07);border-left:3px solid var(--accent-red);}
.pr-explain-verdict{font-weight:800;margin-bottom:.25rem;color:var(--text-primary);}
.pr-explain-text{color:var(--text-secondary);}
/* Sticky submit bar */
.pr-actionbar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  flex-wrap:wrap;margin-top:1rem;padding:.7rem .9rem;border-radius:12px;background:var(--user-bg);
  border:1px solid var(--border);box-shadow:0 -6px 20px rgba(0,0,0,.15);z-index:20;}
.pr-actionbar-status{font-size:.68rem;color:var(--text-dim);}
.pr-submit-btn{padding:.55rem 1.3rem;border-radius:10px;border:none;background:var(--accent-green);color:#06210f;
  font-weight:800;font-size:.82rem;cursor:pointer;font-family:inherit;}
.pr-submit-btn[disabled]{background:var(--bg-card);color:var(--text-dim);cursor:not-allowed;border:1px solid var(--border);}
.pr-final{padding:.85rem 1rem;border-radius:12px;background:rgba(59,130,246,.1);border:1.5px solid var(--accent-blue);margin-bottom:1rem;}
.pr-final-score{font-size:1rem;color:var(--text-primary);}
.pr-final-sent{font-size:.72rem;color:var(--accent-green);margin-top:.3rem;font-weight:700;}
/* EKG appendix */
.pr-ekg-section{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--border);}
.pr-ekg-hdr{font-weight:800;font-size:.9rem;color:var(--text-primary);margin-bottom:.7rem;}
.pr-ekg-hdr span{font-weight:400;font-size:.72rem;color:var(--text-dim);}
.pr-ekg-list{display:flex;flex-direction:column;gap:1.1rem;}
/* EKG self-check items are centered — the plot, the Show/Hide button, and the
   answer all sit down the middle of the card so it reads cleanly. */
.pr-ekg-item{padding:.7rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);text-align:center;}
.pr-ekg-num{font-size:.74rem;font-weight:700;color:var(--text-secondary);margin-bottom:.5rem;}
.pr-ekg-img{max-width:100%;border-radius:8px;border:1px solid var(--border);display:block;margin:.2rem auto 0;}
.pr-ekg-reveal{margin-top:.55rem;padding:.35rem .8rem;border-radius:8px;border:1px solid var(--accent-cyan);
  background:transparent;color:var(--accent-cyan);font-weight:700;font-size:.72rem;cursor:pointer;font-family:inherit;}
.pr-ekg-answer{margin:.5rem auto 0;padding:.5rem .7rem;border-radius:8px;background:rgba(6,182,212,.1);
  border-left:3px solid var(--accent-cyan);font-size:.78rem;font-weight:700;color:var(--text-primary);
  display:inline-block;text-align:left;}
/* Faculty / PD dashboard */
.pr-dash{margin-bottom:1.3rem;padding:.8rem .9rem;border:1.5px solid var(--accent-purple);border-radius:12px;background:rgba(168,85,247,.05);}
.pr-dash-hdr{font-weight:800;font-size:.85rem;color:var(--text-primary);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem;}
.pr-dash-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-purple);border:1px solid var(--accent-purple);border-radius:6px;padding:.05rem .35rem;}
.pr-dash-loading,.pr-dash-empty{font-size:.72rem;color:var(--text-dim);padding:.4rem;}
.pr-dash-row{display:grid;grid-template-columns:1.6fr .5fr 1.35fr .7fr .85fr;gap:.5rem;padding:.4rem .3rem;font-size:.72rem;border-top:1px solid rgba(255,255,255,.05);color:var(--text-secondary);}
.pr-dash-head{font-weight:700;color:var(--text-dim);text-transform:uppercase;font-size:.68rem;letter-spacing:.04em;border-top:none;}
.pr-score-hi{color:var(--accent-green);font-weight:800;}
.pr-score-mid{color:var(--accent-amber);font-weight:800;}
.pr-score-lo{color:var(--accent-red);font-weight:800;}
/* ── My Scores history page ── */
.pr-scores{max-width:640px;margin:0 auto;width:100%;}
.pr-scores-hdr{font-weight:800;font-size:1rem;color:var(--text-primary);margin-bottom:.5rem;}
.pr-scores-note{font-size:.66rem;line-height:1.5;color:var(--text-dim);background:rgba(6,182,212,.06);border:1px solid var(--border);border-radius:8px;padding:.5rem .7rem;margin-bottom:1rem;}
.pr-scores-body{display:flex;flex-direction:column;gap:.6rem;}
.pr-scores-loading,.pr-scores-empty{font-size:.74rem;color:var(--text-dim);text-align:center;padding:1.6rem 1rem;border:1px dashed var(--border);border-radius:12px;}
.pr-score-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);}
.pr-score-card-main{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.pr-score-rot{font-size:.82rem;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pr-score-meta{font-size:.64rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace;}
.pr-score-card-right{display:flex;align-items:baseline;gap:.7rem;flex:0 0 auto;}
.pr-score-num{font-size:1.05rem;font-weight:800;font-family:'JetBrains Mono',monospace;}
.pr-score-den{font-size:.72rem;opacity:.7;font-weight:600;}
.pr-score-pct{font-size:.8rem;font-weight:800;font-family:'JetBrains Mono',monospace;}
@media(max-width:640px){.pr-dash-row{grid-template-columns:1.5fr 1.2fr .7fr;}.pr-dash-row span:nth-child(2),.pr-dash-row span:nth-child(5){display:none;}}
/* Post-rotation integrity column (see postRotationTests.js hydrateDashboard).
   Checking answers as you go is legitimate; only machine-paced checking is
   flagged, so the loud style is reserved for that case. */
.pr-dash-ok{color:var(--text-dim);}
.pr-dash-note{color:var(--text-secondary);opacity:.85;}
.pr-dash-flag{color:#f59e0b;font-weight:600;cursor:help;}
.ct-expand-controls{display:inline-flex;gap:.35rem;flex-shrink:0;}
.ct-expand-controls .lib-file-btn{font-size:.68rem;padding:.16rem .55rem;}

/* End of Life Medicine — the 4-tab bar (Medications / GOC /
   Interventions / Disposition) is pinned like the trials scope bar.
   Same negative top offset trick: pull the pinned bar up over
   .ref-page-content's 1.25rem top padding so it sits flush. */
#pe-tabbar-mount{
  position:sticky;top:calc(-1.25rem - 1px);z-index:40;width:100%;
  background:var(--user-bg);
  padding:.45rem 0 .1rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.4rem;
}
#pe-tabbar-mount .pe-tab-bar{border-bottom:none;margin-bottom:.35rem;padding-bottom:0;justify-content:center;}
.ct-tab{padding:.4rem .75rem;border-radius:8px;border:1.5px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.74rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.ct-tab:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.ct-tab.active{border-color:var(--accent-purple);background:rgba(168,85,247,.12);color:var(--accent-purple);}
.ct-panel{max-width:800px;width:100%;}

/* ═══════════════════════════════════════ */
/* FIXES: WIDTHS, TOGGLES, FORMATTING     */
/* ═══════════════════════════════════════ */

/* Med-Surg + Radiology cards inherit the standard 760px cap from their
   class definitions; previously this rule set max-width:100% which defeated
   the cap and let cards expand to viewport width when opened. */
.ms-card, .rad-card { width:100%; }
.ms-card-body, .rad-card-body { white-space:normal; }
.ms-card-text { white-space:normal; }

/* Formatted content within medsurg cards */
.ms-content-section { margin-bottom:.6rem; }
.ms-content-hdr { font-family:'JetBrains Mono',monospace; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.35rem .5rem; border-radius:6px; margin-bottom:.3rem; }
.ms-content-body { font-size:.74rem; color:var(--text-secondary); line-height:1.6; padding:.2rem 0 .2rem .6rem; border-left:2px solid var(--border); }
/* Each sentence on its own line inside a content body, for readability. */
.ms-content-body .ms-sentence { display:block; margin:0 0 .35rem 0; }
.ms-content-body .ms-sentence:last-child { margin-bottom:0; }
.ms-content-bullet { font-size:.74rem; color:var(--text-secondary); line-height:1.5; padding:.15rem 0 .15rem .5rem; }

/* Physical exam collapsible sections */
.pe-collapse-hdr { display:flex; justify-content:space-between; align-items:center; padding:.5rem .6rem; cursor:pointer; border:1px solid var(--border); border-radius:8px; margin-bottom:.3rem; transition:background .15s; }
.pe-collapse-hdr:hover { background:var(--bg-card-hover); }
.pe-collapse-hdr .pe-collapse-title { font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.pe-collapse-body { display:none; padding:.4rem .6rem .6rem; border:1px solid var(--border); border-top:none; border-radius:0 0 7px 7px; margin-top:-.3rem; margin-bottom:.4rem; }
.pe-collapse-hdr.open + .pe-collapse-body { display:block; }
.pe-collapse-hdr .trial-arrow { transition:transform .2s; }
.pe-collapse-hdr.open .trial-arrow { transform:rotate(180deg); }

/* PE subsection cards within collapsible */
.pe-sub-item { background:var(--bg-input); border:1px solid var(--border); border-radius:6px; padding:.45rem .55rem; margin-bottom:.3rem; transition: box-shadow .25s ease, border-color .25s ease; }
.pe-sub-name { font-size:.74rem; font-weight:600; margin-bottom:.15rem; }
/* Flash animation used by the federated-search deep-link router
   (_focusPESubItem in libraryRelated.js) to draw the eye to the
   item that matched the query. ~2 seconds; pulses twice. */
.pe-sub-item.pe-search-flash {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 35%, transparent);
  animation: peSearchFlash 1.1s ease-in-out 0s 2;
}
@keyframes peSearchFlash {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-cyan) 55%, transparent); }
}
.pe-sub-body { font-size:.72rem; color:var(--text-secondary); line-height:1.5; }
/* Structured detail lines (formatPEDetail in physical_exam.js): one div per
   line, breathing room between lines, hanging-indent bullets. */
.pe-detail-line { margin:.16rem 0; line-height:1.55; }
.pe-detail-line + .pe-detail-line { margin-top:.34rem; }
.pe-detail-bullet { display:flex; gap:.45rem; padding-left:.15rem; }
.pe-detail-marker { flex:0 0 auto; font-weight:700; line-height:1.55; }

/* Library search bar */
.lib-search-wrap { max-width:760px; width:100%; margin-bottom:1rem; position:relative; }
.lib-search-input { width:100%; padding:.55rem .75rem; padding-right:2rem; border-radius:8px; border:1.5px solid var(--border); background:var(--bg-input); color:var(--text-primary); font-size:.78rem; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .15s; }
.lib-search-input:focus { border-color:var(--accent-cyan); }
.lib-search-input::placeholder { color:var(--text-dim); }
.lib-search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:1rem; padding:2px 6px; line-height:1; display:none; }
.lib-search-clear:hover { color:var(--text-primary); }
.lib-search-input:not(:placeholder-shown) + .lib-search-clear { display:block; }

/* Advanced topics — expandable sections */
.at-item-hdr { display:flex; justify-content:space-between; align-items:center; cursor:pointer; padding:.1rem 0; }
.at-item-hdr:hover .at-item-title { filter:brightness(1.2); }
.at-item.collapsed .at-item-body { display:none; }
.at-item:not(.collapsed) .at-item-preview { display:none; }
.at-item.collapsed .trial-arrow { transform:rotate(0deg); }
.at-item .trial-arrow { transform:rotate(180deg); transition:transform .2s; }

/* Podcast color fixes */
.pod-card .pod-name { font-family:'JetBrains Mono',monospace; }

/* Radiology — imaging modality badge */
.rad-modality { font-size:.66rem; font-weight:600; padding:.1rem .35rem; border-radius:4px; margin-left:.4rem; letter-spacing:.04em; }

/* Shock page */
.shock-type-card { background:var(--bg-card); border:1.5px solid var(--border); border-radius:10px; overflow:hidden; margin-bottom:.5rem; margin-left:auto; margin-right:auto; max-width:760px; width:100%; }
.shock-type-hdr { display:flex; justify-content:space-between; align-items:center; padding:.65rem .85rem; cursor:pointer; transition:background .15s; }
.shock-type-hdr:hover { background:var(--bg-card-hover); }
.shock-type-title { font-family:'JetBrains Mono',monospace; font-size:.8rem; font-weight:700; }
.shock-type-body { display:none; padding:0 .85rem .85rem; }
.shock-type-card.open .shock-type-body { display:block; }
.shock-type-card.open .trial-arrow { transform:rotate(180deg); }
.shock-sub { background:var(--bg-input); border:1px solid var(--border); border-radius:8px; padding:.55rem .65rem; margin-bottom:.35rem; }
.shock-sub-title { font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700; margin-bottom:.25rem; }
.shock-sub-row { font-size:.72rem; color:var(--text-secondary); line-height:1.5; padding:.1rem 0; }
.shock-sub-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:.35rem; margin-bottom:.15rem; }

/* Outpatient guidelines */
.guide-card { background:var(--bg-card); border:1.5px solid var(--border); border-radius:8px; margin-bottom:.4rem; overflow:hidden; max-width:760px; width:100%; }
.guide-card-hdr { display:flex; justify-content:space-between; align-items:center; padding:.6rem .75rem; cursor:pointer; transition:background .15s; }
.guide-card-hdr:hover { background:var(--bg-card-hover); }
.guide-card-title { font-size:.78rem; font-weight:600; }
.guide-card-body { display:none; padding:0 .75rem .75rem; }
.guide-card.open .guide-card-body { display:block; }
.guide-card.open .trial-arrow { transform:rotate(180deg); }
.guide-detail { font-size:.74rem; color:var(--text-secondary); line-height:1.6; }
.guide-detail-hdr { font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-top:.4rem; margin-bottom:.15rem; }

/* RSI dose quick-fill hints */
.rsi-dose-hints { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:.2rem; }
.rsi-hint-btn { font-size:.68rem; padding:.15rem .4rem; border-radius:4px; border:1px solid var(--accent-cyan); background:rgba(6,182,212,.08); color:var(--accent-cyan); cursor:pointer; font-family:'DM Sans',sans-serif; font-weight:600; transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s; white-space:nowrap; }
.rsi-hint-btn:hover { background:rgba(6,182,212,.2); }

/* Feedback order color-coding (rendered by AI using ✅/❌ prefixes) */
.msg-ai li:has(> strong:first-child) { margin-bottom:.2rem; }

/* ═══════════════════════════════════════ */
/* ANKI CARD GENERATION                   */
/* ═══════════════════════════════════════ */
.action-btn.anki-action{border-color:var(--accent-purple);background:rgba(168,85,247,.1);color:var(--accent-purple);}
.action-btn.anki-action:hover{background:rgba(168,85,247,.2);}

.anki-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;justify-content:center;align-items:center;z-index:10600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.anki-modal{background:var(--bg-card);border:1.5px solid var(--border);border-radius:14px;width:min(640px,92vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.anki-modal-hdr{display:flex;justify-content:space-between;align-items:center;padding:.65rem .85rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);}
.anki-modal-hdr h3{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-primary);margin:0;}
.anki-modal-hdr button{background:none;border:none;color:var(--text-dim);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;}
.anki-modal-hdr button:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.anki-modal-body{padding:.85rem;overflow-y:auto;flex:1;}

.anki-cat-toggles{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.anki-cat-btn{padding:.55rem 1rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.anki-cat-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.anki-cat-btn.active{border-color:var(--accent-purple);background:rgba(168,85,247,.15);color:var(--accent-purple);}

/* Custom topic input — appears beneath the category buttons when the
   "✏️ Custom Topic" button is toggled on. Visual language matches the
   rest of the Anki modal (purple accent, subtle secondary hint). */
.anki-custom-wrap{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;}
.anki-custom-input{padding:.55rem .75rem;border-radius:8px;border:1.5px solid var(--accent-purple);background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;transition:border-color .15s,box-shadow .15s;}
.anki-custom-input:focus{box-shadow:0 0 0 3px rgba(168,85,247,.18);}
.anki-custom-input::placeholder{color:var(--text-dim);}
.anki-custom-hint{font-size:.68rem;color:var(--text-dim);font-style:italic;}

.anki-generate-btn{width:100%;padding:.6rem;border-radius:8px;border:none;background:var(--accent-purple);color:#fff;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.anki-generate-btn:disabled{opacity:.4;cursor:not-allowed;}
.anki-generate-btn:not(:disabled):hover{filter:brightness(1.15);}

.anki-spinner{width:28px;height:28px;border:3px solid var(--border);border-top:3px solid var(--accent-purple);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto;}
@keyframes spin{to{transform:rotate(360deg);}}

.anki-results-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;}
.anki-export-btn{padding:.35rem .7rem;border-radius:6px;border:1px solid var(--accent-cyan);background:rgba(6,182,212,.08);color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.anki-export-btn:hover{background:rgba(6,182,212,.2);}

.anki-card{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;overflow:hidden;}
.anki-card-side{padding:.6rem .75rem;font-size:.74rem;line-height:1.55;color:var(--text-secondary);}
.anki-card-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem;}
.anki-card-front{border-bottom:1px dashed var(--border);}
.anki-card-front .anki-card-label{color:var(--accent-purple);}
.anki-card-back .anki-card-label{color:var(--accent-cyan);}
.anki-cloze{background:rgba(168,85,247,.15);color:var(--accent-purple);padding:.1rem .3rem;border-radius:4px;font-weight:600;}
.anki-cloze-text{color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:.72rem;}
.anki-cloze-hidden{background:rgba(168,85,247,.18);color:var(--accent-purple);padding:.05rem .25rem;border-radius:3px;font-weight:600;}
.anki-card-copy{background:transparent;border:1px solid var(--border);color:var(--text-dim);font-size:.68rem;padding:.2rem .45rem;border-radius:6px;cursor:pointer;font-family:'JetBrains Mono',monospace;font-weight:600;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;}
.anki-card-copy:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(6,182,212,.08);}

/* Calculator */
.calc-key{padding:.55rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-size:.95rem;font-family:'JetBrains Mono',monospace;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s,transform .12s,opacity .12s;}
.calc-key:hover{background:var(--bg-card-hover);border-color:var(--accent-cyan);}
.calc-op{color:var(--accent-cyan);font-weight:700;}
.calc-eq{background:rgba(6,182,212,.15);color:var(--accent-cyan);font-weight:700;}
.calc-eq:hover{background:rgba(6,182,212,.3);}

/* Drug expand/collapse */
.drug-detail.drug-collapsed .drug-detail-body{display:none;}
.drug-detail.drug-collapsed h4 .trial-arrow{transform:rotate(-90deg);}
.drug-detail h4{margin:0;padding:.5rem 0;border-bottom:1px solid var(--border);}
.drug-detail .drug-detail-body{padding:.3rem 0;}

/* Podcast subsections */
.pod-sub-collapsed .pod-subsection-body{display:none;}
.pod-sub-collapsed .trial-arrow{transform:rotate(-90deg);}
/* Constrain the subsection container so the clickable header is the same
   width as the .pod-card cards underneath. Without this, the header
   stretches to the parent (#pod-detail) width while the cards remain
   capped at 760px — which is the width mismatch users have seen. */
.pod-subsection{max-width:760px;width:100%;box-sizing:border-box;}
.pod-subsection-hdr{box-sizing:border-box;width:100%;}
.pod-subsection-body{box-sizing:border-box;}
.pod-subsection .trial-arrow{transition:transform .18s ease;}

/* ══════════════════════════════════════════════════════════════
   GLOBAL ACCOUNT MENU — fixed top-right on every page.
   Sits above the global theme toggle.
   ══════════════════════════════════════════════════════════════ */
.global-account-menu {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 10000;
}
/* The dropdown anchors to the account menu wrap now that it's fixed */
.global-account-menu .account-menu-dropdown { top: calc(100% + .35rem); right: 0; }
/* Role/status badge — sits left of the account chip on every page */
.role-badge{display:inline-flex;align-items:center;vertical-align:top;margin-right:.4rem;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(6,182,212,.35);background:rgba(6,182,212,.1);color:var(--accent-cyan);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.role-badge-editable{cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;}
.role-badge-editable::after{content:'✎';margin-left:.35rem;opacity:.65;font-size:.7rem;}
.role-badge-editable:hover,.role-badge-editable:focus-visible{background:rgba(6,182,212,.2);border-color:var(--accent-cyan);outline:none;}
@media(max-width:560px){.role-badge{font-size:.68rem;padding:.28rem .5rem;}}

/* ══════════════════════════════════════════════════════════════
   GLOBAL THEME TOGGLE (Change 5) — fixed top-right on every page,
   positioned BELOW the account chip. The inline .theme-pill in
   simulation/library page headers is preserved but hidden since
   this one is always visible.
   ══════════════════════════════════════════════════════════════ */
.global-theme-toggle {
  position: fixed;
  /* Stay below the account chip even when the device has a notch /
     dynamic island. The account chip uses calc(12px + safe-area-top),
     so this toggle has to add the same safe-area offset, otherwise on
     notched iPhones the toggle ends up overlapping the chip. */
  top: calc(56px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 9999;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: .68rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  user-select: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.global-theme-toggle:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(6,182,212,.2);
}
/* Hide the in-header .theme-pill now that global toggle is always visible,
   to avoid two theme buttons on the home/library pages. */
.page-header .theme-pill { display: none !important; }

/* Hide the floating global controls on the chat page — the chat page
   already renders its own theme switcher in the .theme-bar just below the
   header, and the floating controls visually cover the "End Now" button in
   the top-right of the chat header. Account menu is kept accessible from
   the landing page via the back arrow. */
body.page-chat .global-theme-toggle { display: none !important; }
body.page-chat .global-account-menu { display: none !important; }
/* The disclaimer pill is fixed bottom-left, which is exactly where the orders
   panel's "Submit Orders" button lives during a simulation. The user has
   already accepted the disclaimer to get this far, and the pill is only a
   re-open affordance — it stays available on every other page, so hide it (and
   the expanded banner) for the duration of the sim chat. Inline styles in
   disclaimer.js make !important necessary here. */
/* 2026-09-10: restored on desktop (user request). The pill stays hidden on
   phones, where the orders drawer is full-screen. On desktop it steps to the
   right of the orders panel while that panel is open so it never sits on
   Submit Orders. The expanded footer is opt-in (pill / "See disclaimer"
   link) and closable, so it is no longer force-hidden here. */
@media (max-width: 600px) { body.page-chat #disclaimer-restore-pill { display: none !important; } }
@media (min-width: 601px) {
  body.page-chat:has(#orders-panel:not(.op-hide)) #disclaimer-restore-pill { left: calc(clamp(360px, 26vw, 440px) + 12px) !important; }
}

/* On very small screens move controls slightly to avoid covering back buttons */
@media(max-width: 480px) {
  .global-account-menu {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
  }
  .global-theme-toggle {
    top: calc(48px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    padding: .3rem .55rem;
    font-size: .7rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   UNIVERSAL SEARCH CLEAR BUTTON (Change 6) — applies to every
   search input in the app, not just the library hub.
   ══════════════════════════════════════════════════════════════ */
.search-clear-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.search-clear-wrap > input {
  padding-right: 2rem !important;
}
.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 6px;
  line-height: 1;
  display: none;
  font-family: 'DM Sans', sans-serif;
}
.search-clear-btn:hover { color: var(--text-primary); }
/* Show the X only when the sibling input has a value */
.search-clear-wrap > input:not(:placeholder-shown) ~ .search-clear-btn { display: block; }

/* ══════════════════════════════════════════════════════════════
   SUB-SECTION CHIP RESTYLE (Change 7 — corrected scope)
   Targets the rectangular chip buttons INSIDE each library
   sub-section (Med-Surg, Drugs, Procedures, Physical Exam,
   Radiology, Podcasts, Advanced Topics, Shock, Outpatient).
   Converts them from rectangles to pill shape matching the
   Clinical Pocket Guide chapter chips (.trials-nav-btn style).
   Library hub tiles (.lib-hub-tile) are intentionally untouched.
   ══════════════════════════════════════════════════════════════ */
.ref-nav-btn {
  border-radius: 999px !important;
  padding: .55rem 1.05rem !important;
  min-height: 44px;
  font-size: .76rem;
  line-height: 1.25;
  font-weight: 600;
  white-space: normal;
  text-align: center;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease;
}
.ref-nav-btn:hover {
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   ADVANCED TOPICS — lighter shaded background (Change 8)
   Match the Clinical Pocket Guide container aesthetic.
   ══════════════════════════════════════════════════════════════ */
#advanced-topics .ref-page-content {
  padding-top: .75rem;
}
#advanced-topics #at-nav {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem .9rem;
  margin-bottom: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
/* Give the topic nav buttons a pill shape with subtle neon outline, matching CPG chapter chips */
#advanced-topics #at-nav .ref-nav-btn {
  border-radius: 999px;
  padding: .55rem 1.05rem;
  min-height: 44px;
  font-size: .76rem;
  font-weight: 600;
  border-width: 1.5px;
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease,opacity .18s ease;
  /* Each chip carries its topic's accent on the border + text at all times
     (not only on hover/active) so the row reads as a color-coded index. */
  border-color: var(--nav-accent, var(--accent-cyan));
  color: var(--nav-accent, var(--accent-cyan));
}
#advanced-topics #at-nav .ref-nav-btn:hover {
  transform: translateY(-1px);
}
#advanced-topics #at-detail:not(:empty) {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1rem 1.25rem;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════════════
   SIMULATION SETUP — Step-based progressive disclosure
   ══════════════════════════════════════════════════════════════ */

/* Setup-page motto (2026-09-13, replaces the optional name chip).
   Neon gradient text: cyan → violet → magenta, echoing the brand logo
   gradient. Gradient text needs background-clip + transparent fill;
   text-shadow does not render on transparent glyphs, so the glow comes
   from drop-shadow filters instead. Light mode (data-fc-theme, set by
   the pre-paint script and applyTheme) deepens the hues and softens the
   glow so it stays legible and professional on a white page. */
.sim-setup-quote{margin:1.15rem auto 1.9rem;max-width:560px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;letter-spacing:.055em;line-height:1.65;background:linear-gradient(92deg,#22d3ee 0%,#818cf8 52%,#e879f9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 9px rgba(34,211,238,.30)) drop-shadow(0 0 20px rgba(139,92,246,.18));}
:root[data-fc-theme="light"] .sim-setup-quote{background:linear-gradient(92deg,#0e7490 0%,#4f46e5 52%,#a21caf 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 6px rgba(14,116,144,.16));}
@media (max-width:600px){.sim-setup-quote{font-size:.74rem;padding:0 .75rem;}}

/* Step progress indicator — dots + connecting lines */
.step-progress{display:flex;align-items:center;gap:.35rem;margin-bottom:1.5rem;padding:0 .25rem;}
.step-progress .sp-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg-card);transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease,opacity .3s ease;flex:0 0 auto;}
.step-progress .sp-dot.active{border-color:var(--accent-cyan);background:var(--accent-cyan);box-shadow:0 0 0 4px rgba(6,182,212,.15);}
.step-progress .sp-dot.complete{border-color:var(--accent-green);background:var(--accent-green);}
.step-progress .sp-line{flex:0 1 28px;height:2px;background:var(--border);border-radius:1px;transition:background .3s;}

/* Step flow — vertical stack of revealed sections */
.step-flow{width:100%;max-width:560px;display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.25rem;}
.step{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem 1.1rem;opacity:0;transform:translateY(12px);max-height:0;overflow:hidden;pointer-events:none;padding-top:0;padding-bottom:0;margin:0;border-width:0;transition:opacity .32s ease-out,transform .32s ease-out,max-height .4s ease-out,padding .3s ease-out,border-width .2s ease-out,margin .2s ease-out;}
.step[data-revealed="true"]{opacity:1;transform:translateY(0);max-height:1400px;pointer-events:auto;padding:1rem 1.1rem 1.1rem;border-width:1px;}
.step-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;}
.step-num{width:22px;height:22px;border-radius:50%;background:var(--accent-cyan);color:var(--bg-primary);font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.step-num.optional{background:var(--text-dim);}
.step-q{font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;flex:1;}
.step-req{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-red);background:rgba(239,68,68,.1);padding:.15rem .4rem;border-radius:4px;}
.step-opt-tag{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);background:rgba(100,116,139,.12);padding:.15rem .4rem;border-radius:4px;margin-left:.3rem;}

/* Inline "required" pill used on sub-group labels (e.g. Simulation Length) */
.sl-req{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-red);background:rgba(239,68,68,.1);padding:.15rem .4rem;border-radius:4px;margin-left:.3rem;}

/* Red-glow on any revealed required step that has not yet been answered.
   The glow is subtle on the border and a soft outer halo, similar to :focus. */
.step[data-revealed="true"].step-unmet{border-color:var(--accent-red);box-shadow:0 0 0 3px rgba(239,68,68,.14);}
/* Same treatment for required sub-groups that live inside the Advanced body */
.advanced-body .sg.sg-unmet{border:1.5px solid var(--accent-red);border-radius:10px;padding:.7rem .85rem;box-shadow:0 0 0 3px rgba(239,68,68,.14);}

/* Flash-highlight animation used when Hard auto-expands Advanced and draws
   attention to the Simulation Length card. Runs once over ~1.4s. */
@keyframes flashHighlight{
  0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
  20%,60%{box-shadow:0 0 0 4px rgba(239,68,68,.35);}
}
.flash-highlight{animation:flashHighlight 1.4s ease-in-out 1;}

/* Flash animation for the debrief-questions panel when opened via the
   "Submit Debrief Questions" action-row button. Uses amber to match the
   Debrief Questions header accent color. */
@keyframes qsFlash{
  0%,100%{box-shadow:inset 0 0 0 0 rgba(245,158,11,0);}
  20%,60%{box-shadow:inset 0 0 0 3px rgba(245,158,11,.45);}
}
.qs-flash{animation:qsFlash 1.4s ease-in-out 1;}

/* Random chip — visually distinct default that the user always sees in each
   category group. Uses the purple accent so it reads as a neutral "default"
   rather than a specific clinical category. */
.cc.cc-random{border-style:dashed;border-color:var(--accent-purple);color:var(--accent-purple);font-weight:600;}
.cc.cc-random:hover{background:rgba(168,85,247,.08);}
.cc.cc-random.active{border-style:solid;background:rgba(168,85,247,.15);color:var(--accent-purple);box-shadow:0 0 0 2px rgba(168,85,247,.18);}
.step .sg{margin-bottom:0;}
/* Consult Setup step: its subsections (Consulting Service → Where From →
   Reason) appear one after another as the user makes choices, so they need
   real breathing room + a divider between them — the global ".step .sg{
   margin-bottom:0}" collapse made them read as one cramped block. Each
   revealed sub-panel gets top spacing and a dashed separator. */
.step[data-step="6"] .sg{margin-bottom:1.05rem;}
.step[data-step="6"] .sg:last-child{margin-bottom:0;}
.step[data-step="6"] #consult-origin-sg:not(.hidden),
.step[data-step="6"] #consult-reason-sg:not(.hidden){
  margin-top:1.05rem;padding-top:1.05rem;border-top:1px dashed var(--border);
  animation:fadeIn .24s ease-out;
}
.step[data-step="6"] .sl{display:block;margin-bottom:.5rem;}

/* Scenario cards (Step 1) — bigger, emoji-led */
.scenario-tg{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;}
/* Consult Service spans the full width beneath the 2x2 core grid so the
   5-option layout reads as intentional rather than a lone card in a column. */
.scenario-tg .scenario-card-wide{grid-column:1 / -1;}
.tb.scenario-card{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.9rem .7rem .75rem;min-height:92px;text-align:center;}
.tb.scenario-card .sc-emoji{font-size:1.5rem;line-height:1;margin-bottom:.15rem;}
.tb.scenario-card .sc-title{font-size:.85rem;font-weight:700;color:inherit;letter-spacing:-.01em;}
.tb.scenario-card .td{margin-top:.05rem;}
.tb.scenario-card:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(0,0,0,.18);}

/* Role cards (Step 2) — wider buttons */
.role-tg{display:flex;flex-wrap:wrap;gap:.4rem;}
.tb.role-card{flex:1 1 calc(33% - .4rem);min-width:110px;padding:.65rem .6rem;font-size:.78rem;}
.sublevel-tg{flex-wrap:wrap;margin-top:.5rem;padding-top:.55rem;border-top:1px dashed var(--border);}
.sublevel-tg .tb{min-width:0;padding:.35rem .6rem;font-size:.72rem;flex:0 0 auto;}

/* Advanced Options (Step 5) — collapsible */
.advanced-toggle{cursor:pointer;user-select:none;transition:color .18s;margin-bottom:0;}
.advanced-toggle:hover .step-q{color:var(--accent-cyan);}
.advanced-arrow{margin-left:auto;color:var(--text-dim);font-size:.7rem;transition:transform .22s;}
.advanced-arrow.open{transform:rotate(90deg);color:var(--accent-cyan);}
.advanced-body{display:flex;flex-direction:column;gap:1rem;margin-top:.85rem;padding-top:.85rem;border-top:1px dashed var(--border);animation:fadeIn .24s ease-out;}
.advanced-body.hidden{display:none!important;}
.advanced-body .sg{margin-bottom:0;}

/* Explainer text (feedback, grading) — replaces inline styles from old HTML */
.sg-explain{font-size:.72rem;color:var(--text-secondary);line-height:1.55;padding:.25rem 0;}

/* Start Simulation button — disabled + ready states */
.gen-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;background:linear-gradient(135deg,var(--text-dim),#4a5568);}
.gen-btn:disabled::after{display:none;}
.gen-btn:disabled:hover{transform:none;}
.gen-btn.ready{animation:pulseReady 2.2s ease-in-out infinite;}
@keyframes pulseReady{0%,100%{box-shadow:0 5px 28px var(--accent-red-glow);}50%{box-shadow:0 8px 42px rgba(239,68,68,.45);}}
.gen-hint{font-family:'DM Sans',sans-serif;font-size:.72rem;color:var(--text-dim);margin:.25rem 0;text-align:center;max-width:560px;letter-spacing:.01em;}

/* Sticky CTA bar — stays pinned to the bottom of the viewport on the home
   page so the user never has to scroll to start the simulation. Sits as a
   sibling flex item after .home-main so the scrolling area above handles
   its own overflow while the bar stays put. Uses a subtle backdrop blur
   and a top border to visually separate from the content scrolling behind.
   Pointer events pass through when the parent page isn't active. */
.home-cta-bar{flex-shrink:0;width:100%;background:linear-gradient(to top,var(--bg-primary) 70%,rgba(10,14,23,0) 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--border);padding:.85rem calc(1.25rem + env(safe-area-inset-right, 0px)) calc(1.1rem + env(safe-area-inset-bottom, 0px)) calc(1.25rem + env(safe-area-inset-left, 0px));display:flex;justify-content:center;z-index:10;}
.home-cta-inner{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;max-width:560px;}
.home-cta-inner .gen-btn{margin:0;}
/* Pad the scroll area so the last row of controls isn't hidden behind the bar */
#home .home-main{padding-bottom:1.5rem;}

/* Mobile adjustments */
@media(max-width:600px){
  .scenario-tg{grid-template-columns:1fr;}
  .tb.role-card{flex:1 1 calc(50% - .4rem);}
  .step-progress .sp-line{flex:0 1 18px;}
}

/* ══════════════════════════════════════════════════════════════
   PROCEDURES — Steps/Materials sub-tabs, reusable field labels,
                Materials list, Further Reading, and Materials
                Practice MCQ modal.
   ══════════════════════════════════════════════════════════════ */

/* Reusable small-caps section label used inside procedure cards */
.proc-detail .proc-section-lbl{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;font-weight:700;
  color:var(--text-dim);
  letter-spacing:.08em;text-transform:uppercase;
  margin:0 .5rem 0 0;
}
.proc-detail .proc-section-lbl-steps{display:block;margin:.25rem 0 .35rem;}

/* Key:value field rows (Indication, Sites) — align label + value inline */
.proc-detail .proc-field-row{
  display:flex;align-items:flex-start;gap:.4rem;
  margin:.25rem 0 .45rem;
  font-size:.76rem;line-height:1.55;color:var(--text-secondary);
}
.proc-detail .proc-field-row .proc-section-lbl{
  flex:0 0 auto;padding-top:.12rem;
}
.proc-detail .proc-field-value{flex:1;}
.proc-detail .proc-sites{display:flex;flex-wrap:wrap;gap:.25rem;}
.proc-site-chip{
  display:inline-block;padding:.15rem .45rem;
  border-radius:4px;
  background:rgba(59,130,246,.1);color:var(--accent-blue);
  font-size:.7rem;line-height:1.3;
}

/* Anesthesia callout — now uses proper class instead of inline styles */
.proc-anesthesia{
  margin:.5rem 0 .6rem;
  padding:.45rem .65rem;
  background:rgba(168,85,247,.08);
  border-left:3px solid var(--accent-purple);
  border-radius:4px;
  font-size:.72rem;color:var(--text-secondary);line-height:1.5;
}
.proc-anesthesia-lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;font-weight:700;
  color:var(--accent-purple);
  letter-spacing:.08em;text-transform:uppercase;
  margin-right:.35rem;
}

/* Cross-links to other library sections (replaces inline-styled buttons) */
.proc-links-row{
  display:flex;flex-wrap:wrap;gap:.3rem;
  margin-top:.55rem;padding-top:.5rem;
  border-top:1px solid var(--border);
}
.proc-link-btn{
  font-size:.68rem;padding:.28rem .55rem;
  border-radius:6px;
  border:1px solid var(--accent-cyan);
  background:rgba(6,182,212,.08);color:var(--accent-cyan);
  font-family:'DM Sans',sans-serif;font-weight:600;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.proc-link-btn:hover{background:rgba(6,182,212,.18);transform:translateY(-1px);}

/* ══ STEPS / MATERIALS SEGMENTED PILL TABS ══
   Sits flush under the card title; no heavy border separator. Matches the
   visual weight of .ct-tab and .orders-tab for cross-page consistency. */
.proc-view-tabs{
  display:inline-flex;
  gap:.3rem;
  margin:.1rem 0 .7rem;
  padding:.2rem;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:10px;
}
.proc-view-tab{
  padding:.35rem .8rem;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-secondary);
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;font-weight:600;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
  line-height:1.3;
}
.proc-view-tab:hover{color:var(--accent-cyan);}
.proc-view-tab.active{
  background:rgba(6,182,212,.14);
  border-color:rgba(6,182,212,.45);
  color:var(--accent-cyan);
  box-shadow:0 1px 4px rgba(6,182,212,.12);
}

/* ══ MATERIALS SCOPE NOTE — explainer at top of Materials view ══ */
.proc-scope-note{
  margin:.15rem 0 .85rem;
  padding:.55rem .7rem;
  background:rgba(59,130,246,.06);
  border-left:3px solid var(--accent-blue);
  border-radius:6px;
  font-size:.73rem;color:var(--text-secondary);
  line-height:1.55;
}
.proc-scope-note strong{color:var(--accent-blue);font-weight:700;}
.proc-scope-note em{color:var(--text-primary);font-style:normal;font-weight:600;}

/* ══ MATERIALS LIST ══ */
.proc-materials-list{
  background:rgba(59,130,246,.04);
  border:1px solid rgba(59,130,246,.15);
  border-radius:8px;
  padding:.7rem 1rem .7rem 2.2rem;
  margin-bottom:.8rem;
}
.proc-materials-list ol{margin:0;padding:0;color:var(--text-secondary);}
.proc-materials-list li{
  font-size:.78rem;line-height:1.55;padding:.22rem 0;
}
.proc-materials-list li::marker{
  color:var(--accent-blue);font-weight:700;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
}

/* ══ FURTHER READING (on Materials tab — rich HTML from data file) ══ */
.proc-further-reading{
  margin-top:1rem;padding:.95rem 1.05rem 1.05rem;
  background:rgba(168,85,247,.04);
  border:1px solid rgba(168,85,247,.15);
  border-radius:10px;
}
.proc-further-reading h5{
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem;font-weight:700;
  color:var(--accent-purple);
  letter-spacing:.02em;
  margin:0 0 .55rem 0;
  padding-bottom:.55rem;
  border-bottom:1px dashed rgba(168,85,247,.25);
}

/* ══ Further Reading — collapsible subtopic accordion ══
   Uses native <details>/<summary> for accessibility. Each subtopic
   starts collapsed; clicking the summary expands the content panel. */
.proc-fr-topic{
  border:1px solid rgba(168,85,247,.22);
  border-radius:8px;
  background:rgba(168,85,247,.03);
  margin-top:.5rem;
  overflow:hidden;
  transition:border-color .15s ease, background .15s ease;
}
.proc-fr-topic:first-of-type{margin-top:.25rem;}
.proc-fr-topic[open]{
  border-color:rgba(168,85,247,.4);
  background:rgba(168,85,247,.06);
}
.proc-fr-summary{
  list-style:none;
  cursor:pointer;
  padding:.6rem .8rem;
  display:flex;align-items:center;gap:.55rem;
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;font-weight:600;
  color:var(--accent-purple);
  user-select:none;
  transition:background .15s ease;
}
.proc-fr-summary::-webkit-details-marker{display:none;}
.proc-fr-summary:hover{background:rgba(168,85,247,.08);}
.proc-fr-summary-chevron{
  display:inline-block;
  font-size:.7rem;
  color:var(--accent-purple);
  transition:transform .2s ease;
  flex-shrink:0;
}
.proc-fr-topic[open] .proc-fr-summary-chevron{transform:rotate(90deg);}
.proc-fr-summary-title{flex:1;line-height:1.3;}
.proc-fr-content{
  padding:.35rem 1rem 1rem;
  border-top:1px dashed rgba(168,85,247,.2);
  animation:fadeIn .22s ease-out;
}
.proc-fr-content > *:first-child{margin-top:.4rem;}

/* Empty-state placeholder — shown when materialsFurtherReading is [] */
.proc-further-reading-empty{
  background:rgba(168,85,247,.025);
  border-style:dashed;
}
.proc-further-reading-empty h5{
  border-bottom-style:solid;
  opacity:.85;
}
.proc-fr-empty{
  font-size:.72rem;line-height:1.55;
  color:var(--text-dim);
  font-style:italic;
  padding:.35rem 0;
}
.proc-further-reading h6{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;font-weight:700;
  color:var(--accent-purple);
  margin:1.1rem 0 .4rem 0;
  text-transform:uppercase;letter-spacing:.08em;
}
.proc-further-reading h6:first-child,
.proc-further-reading > h6:first-of-type{margin-top:.2rem;}
.proc-further-reading p{
  font-size:.76rem;line-height:1.65;
  color:var(--text-secondary);
  margin:.45rem 0;
}
.proc-further-reading ul,
.proc-further-reading ol{
  margin:.35rem 0 .65rem 0;
  padding-left:1.3rem;
  color:var(--text-secondary);
}
.proc-further-reading li{
  font-size:.76rem;line-height:1.6;
  padding:.1rem 0;
}
.proc-further-reading li + li{margin-top:.1rem;}
.proc-further-reading strong{color:var(--text-primary);font-weight:700;}
.proc-further-reading em{
  color:var(--accent-cyan);
  font-style:normal;font-weight:600;
}
.proc-fr-acronym{
  display:inline-block;
  padding:.05rem .34rem;margin:.05rem .1rem .05rem 0;
  background:rgba(6,182,212,.12);
  color:var(--accent-cyan);
  border-radius:3px;
  font-size:.68rem;
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  letter-spacing:.3px;
}

/* ══ MATERIALS PRACTICE MCQ MODAL (no AI — pure client-side) ══ */
.mat-prac-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  z-index:10600;
  display:none;align-items:center;justify-content:center;
  padding:1rem;
  animation:fadeIn .18s ease-out;
}
.mat-prac-modal{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-top:3px solid var(--accent-amber);
  border-radius:14px;
  width:100%;max-width:620px;max-height:85vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.mat-prac-hdr{
  padding:.7rem .9rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-card);
}
.mat-prac-hdr h3{
  font-family:'JetBrains Mono',monospace;
  font-size:.74rem;font-weight:600;
  color:var(--accent-amber);
  margin:0;
}
.mat-prac-hdr button{
  background:none;border:none;
  color:var(--text-dim);cursor:pointer;font-size:1.05rem;
  padding:.1rem .35rem;border-radius:6px;
}
.mat-prac-hdr button:hover{color:var(--text-primary);background:var(--bg-primary);}
.mat-prac-body{
  flex:1;overflow-y:auto;padding:.95rem;
}
.mat-prac-prompt{
  font-size:.77rem;line-height:1.55;
  color:var(--text-secondary);
  margin-bottom:.8rem;
  padding:.6rem .75rem;
  background:rgba(245,158,11,.08);
  border-left:3px solid var(--accent-amber);
  border-radius:4px;
}
.mat-prac-prompt strong{color:var(--accent-amber);}

.mat-prac-options{display:flex;flex-direction:column;gap:.38rem;}
.mat-prac-option{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .75rem;border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--bg-card);
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
  font-size:.76rem;color:var(--text-primary);
  line-height:1.4;
}
.mat-prac-option:hover{
  border-color:var(--accent-cyan);
  background:rgba(6,182,212,.05);
}
.mat-prac-option.state-selected{
  border-color:var(--accent-cyan);
  background:rgba(6,182,212,.14);
  color:var(--accent-cyan);
}
.mat-prac-option.state-correct-selected{
  border-color:var(--accent-green);
  background:rgba(34,197,94,.14);
  color:var(--accent-green);
  cursor:default;
}
.mat-prac-option.state-correct-missed{
  border-color:var(--accent-amber);
  background:rgba(245,158,11,.14);
  color:var(--accent-amber);
  cursor:default;
}
.mat-prac-option.state-wrong-selected{
  border-color:#ef4444;
  background:rgba(239,68,68,.14);
  color:#fca5a5;
  cursor:default;
}
.mat-prac-option.state-wrong-correct{
  opacity:.5;cursor:default;
}
.mat-prac-checkbox{
  font-size:1rem;color:var(--text-dim);
  flex-shrink:0;
}
.mat-prac-option.state-selected .mat-prac-checkbox,
.mat-prac-option.state-correct-selected .mat-prac-checkbox,
.mat-prac-option.state-wrong-selected .mat-prac-checkbox{color:inherit;}
.mat-prac-option-text{flex:1;line-height:1.4;}
.mat-prac-tag{
  font-size:.7rem;font-weight:700;
  padding:.15rem .42rem;border-radius:4px;
  white-space:nowrap;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.3px;
}
.mat-prac-tag.tag-correct{background:rgba(34,197,94,.22);color:var(--accent-green);}
.mat-prac-tag.tag-missed{background:rgba(245,158,11,.22);color:var(--accent-amber);}
.mat-prac-tag.tag-wrong{background:rgba(239,68,68,.22);color:#ef4444;}
.mat-prac-tag.tag-neutral{background:var(--bg-primary);color:var(--text-dim);}

.mat-prac-score{
  margin-top:.9rem;padding:.75rem .95rem;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
}
.mat-prac-score-hdr{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;font-weight:700;
  color:var(--accent-amber);
  margin-bottom:.45rem;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.mat-prac-score-grid{
  display:flex;flex-direction:column;gap:.3rem;
  font-size:.75rem;color:var(--text-secondary);
  line-height:1.5;
}

.mat-prac-actions{
  display:flex;gap:.5rem;
  margin-top:.9rem;padding-top:.75rem;
  border-top:1px solid var(--border);
}
.mat-prac-btn{
  flex:1;padding:.55rem .85rem;border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text-primary);
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;font-weight:600;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.mat-prac-btn:hover{transform:translateY(-1px);}
.mat-prac-btn-submit{
  border-color:var(--accent-amber);
  background:rgba(245,158,11,.12);
  color:var(--accent-amber);
}
.mat-prac-btn-submit:hover{background:rgba(245,158,11,.22);}
.mat-prac-btn-reset{
  border-color:var(--accent-cyan);
  color:var(--accent-cyan);
  background:rgba(6,182,212,.08);
}
.mat-prac-btn-reset:hover{background:rgba(6,182,212,.18);}
.mat-prac-btn-close{
  border-color:var(--border);
  color:var(--text-primary);
}
.mat-prac-btn-close:hover{border-color:var(--text-primary);}

@media(max-width:600px){
  .proc-view-tabs{display:flex;width:100%;}
  .proc-view-tab{flex:1;}
  .mat-prac-modal{max-height:92vh;}
}

/* ══════════════════════════════════════════════════════════════
   LIBRARY CHATBOT — "Another question" button (quiz mode)
   Appears after feedback in free-response or MCQ quizzes. Gives
   the user explicit control over when to advance (instead of the
   AI auto-providing the next question).
   ══════════════════════════════════════════════════════════════ */
.lib-chat-next-wrap{
  display:flex;
  justify-content:center;
  margin:.35rem 0 .4rem;
  animation:fadeIn .22s ease-out;
}
.lib-chat-next-btn{
  padding:.48rem 1rem;
  border-radius:999px;
  border:1.5px solid var(--accent-amber);
  background:rgba(245,158,11,.1);
  color:var(--accent-amber);
  font-family:'DM Sans',sans-serif;
  font-size:.76rem;font-weight:600;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
  display:inline-flex;align-items:center;gap:.4rem;
}
.lib-chat-next-btn:hover:not(:disabled){
  background:rgba(245,158,11,.22);
  box-shadow:0 2px 10px rgba(245,158,11,.18);
  transform:translateY(-1px);
}
.lib-chat-next-btn:disabled,
.lib-chat-next-btn.used{
  opacity:.45;
  cursor:default;
  transform:none;
  box-shadow:none;
}

/* ══════════════════════════════════════════════════════════════
   SHOCK — sentence-per-line rendering
   Used inside .shock-sub-row, .ms-content-body, and the shock-types
   overview / hemodynamics blurbs. Each sentence renders as its own
   block so long prose becomes scannable instead of a wall of text.
   ══════════════════════════════════════════════════════════════ */
.shock-sent{
  display:block;
  margin-bottom:.28rem;
  line-height:inherit;
}
.shock-sent:last-child{margin-bottom:0;}
/* When the parent has very tight line-height / spacing (e.g. the
   monospace hemodynamics blurb), keep sentences from crowding together. */
.shock-type-body > div > .shock-sent{line-height:1.5;}

/* ══════════════════════════════════════════════════════════════
   SHOCK — Parameter figure + caption
   Renders inside a parameter's body (.shock-sub-row) when the data
   file provides an image URL. Image scales fluidly to container
   width; caption sits beneath with subtle styling so it reads as
   explanatory text rather than body copy.
   ══════════════════════════════════════════════════════════════ */
.shock-param-figure{
  margin:.75rem 0 .25rem;
  padding:.6rem;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.shock-param-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:6px;
  background:#fff; /* keeps light-palette figures readable in dark mode */
}
.shock-param-caption{
  font-size:.7rem;
  line-height:1.55;
  color:var(--text-secondary);
  padding:.15rem .2rem 0;
  border-top:1px dashed var(--border);
  padding-top:.55rem;
}
.shock-param-caption .shock-sent{margin-bottom:.22rem;}
.shock-param-caption .shock-sent:last-child{margin-bottom:0;}
/* Pathophysiology concept figure: reuses the shared shock-figure styling but
   sits under the concept body with clear separation from the text above and is
   centered in the card, with a capped width so a wide infographic stays
   readable rather than stretching edge-to-edge. */
.phys-concept-figure{margin:2.5rem auto .25rem;max-width:60ch;}

/* Graceful fallback when the figure's image fails to load (404 / wrong path / not yet deployed).
   JS sets .shock-param-figure-failed on the <figure>; we hide the broken <img> icon and
   insert a small amber warning so the caption below still reads naturally. */
.shock-param-figure-failed img{display:none;}
.shock-param-figure-failed::before{
  content:"⚠ Figure unavailable — image file not yet deployed. Caption below describes the content.";
  display:block;
  padding:.5rem .7rem;
  background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.3);
  border-radius:6px;
  font-size:.7rem;
  color:var(--accent-amber);
  font-family:'DM Sans',sans-serif;
  line-height:1.45;
}
.shock-param-figure-failed .shock-param-caption{border-top:none;padding-top:.1rem;}

/* ══════════════════════════════════════════════════════════════
   OUTPATIENT GUIDELINES — addendum block
   Rendered inside a guide card (after the Pearls section) when the
   data file provides an `addenda` array. Used for research-level
   supplements like the Potter Criteria for lung cancer screening.
   ══════════════════════════════════════════════════════════════ */
.guide-addendum{
  margin-top:.85rem;
  padding:.7rem .85rem;
  background:rgba(168,85,247,.05);
  border:1px solid rgba(168,85,247,.2);
  border-left:3px solid var(--accent-purple);
  border-radius:8px;
}
.guide-addendum-hdr{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;font-weight:700;
  color:var(--accent-purple);
  letter-spacing:.02em;
  margin-bottom:.45rem;
}
.guide-addendum-body{
  font-size:.74rem;
  line-height:1.6;
  color:var(--text-secondary);
  margin-bottom:.55rem;
}
.guide-addendum-link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .65rem;
  background:rgba(168,85,247,.12);
  border:1px solid rgba(168,85,247,.3);
  border-radius:6px;
  font-size:.7rem;font-weight:600;
  color:var(--accent-purple);
  font-family:'DM Sans',sans-serif;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.guide-addendum-link:hover{
  background:rgba(168,85,247,.22);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(168,85,247,.18);
}
.guide-addendum-arrow{font-size:.72rem;opacity:.8;}

/* ══════════════════════════════════════════════════════════════
   FIGURE LIGHTBOX — click any figure to open it enlarged
   The lightbox is injected into index.html as #figure-lightbox and
   is shown by shock.js's openFigureLightbox(). Reusable for any
   image on the site that calls the same handler.
   ══════════════════════════════════════════════════════════════ */

/* Make figure images visibly interactive — cursor + subtle hover lift */
.shock-figure-img{
  cursor:zoom-in;
  transition:transform .18s ease, box-shadow .18s ease;
}
.shock-figure-img:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(0,0,0,.22);
}
.shock-param-figure-failed .shock-figure-img{cursor:default;}

/* Category-level figure (Swan-Ganz etc.) sits at the top of the card body
   before individual params — slightly wider presentation than per-param figures. */
.shock-category-figure{
  margin-top:.25rem;
  margin-bottom:1rem;
}
.shock-category-figure img{
  /* Category figures are usually landscape overview diagrams — allow them
     to breathe a bit taller at max container width */
  max-height:520px;
  object-fit:contain;
}

/* The lightbox itself — fullscreen dark overlay with centered enlarged image */
.figure-lightbox{
  position:fixed;
  inset:0;
  background:rgba(5,8,15,.92);
  z-index:500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1.5rem 1.5rem;
  cursor:zoom-out;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.figure-lightbox.open{
  display:flex;
  flex-direction:column;
  animation:fadeIn .18s ease-out;
}
#figure-lightbox-img{
  display:block;
  max-width:94vw;
  max-height:78vh;
  object-fit:contain;
  border-radius:8px;
  background:#fff;
  box-shadow:0 20px 80px rgba(0,0,0,.6);
  cursor:default;
}
.figure-lightbox-caption{
  color:#e5e7eb;
  max-width:94vw;
  margin-top:1rem;
  font-size:.82rem;
  line-height:1.55;
  text-align:center;
  font-family:'DM Sans',sans-serif;
}
.figure-lightbox-close{
  position:absolute;
  top:1rem;
  right:1.25rem;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1.25rem;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.figure-lightbox-close:hover{
  background:rgba(255,255,255,.22);
  transform:scale(1.05);
}
.figure-lightbox-hint{
  color:rgba(229,231,235,.6);
  font-size:.7rem;
  margin-top:.75rem;
  font-family:'DM Sans',sans-serif;
  letter-spacing:.02em;
}
.figure-lightbox-hint kbd{
  display:inline-block;
  padding:.05rem .35rem;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  color:#f3f4f6;
}

@media(max-width:600px){
  .figure-lightbox{padding:1.5rem .75rem .75rem;}
  #figure-lightbox-img{max-height:72vh;}
  .figure-lightbox-caption{font-size:.76rem;margin-top:.75rem;}
  .figure-lightbox-hint{font-size:.72rem;}
}

/* Advanced Topics — topic-level figure (e.g. IABP, Impella). Reuses the shock
   figure classes but sits inside the at-item flow instead of a shock card,
   so give it a bit of top/bottom margin to breathe. Caption is rendered as
   a single block (not sentence-split) since these captions are paragraph-style. */
.at-topic-figure{
  margin-top:.4rem;
  margin-bottom:1.1rem;
}
.at-topic-figure .shock-param-caption{
  line-height:1.6;
}

/* ══════════════════════════════════════════════════════════════
   OUTPATIENT GUIDELINES — Structured pearls
   Used when a guideline's `pearls` field is an array of
   {title, color, points[]} subsections instead of a single string.
   Gives color-coded subsection headers and one-line bullets for
   long, multi-topic pearls (e.g. Tobacco Cessation).
   ══════════════════════════════════════════════════════════════ */
.guide-pearls-structured{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin-top:.2rem;
}
.guide-pearl-section{
  padding:.55rem .75rem .65rem;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:8px;
}
.guide-pearl-hdr{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.45rem;
  padding-bottom:.3rem;
  border-bottom:1px dashed currentColor;
  opacity:.95;
}
.guide-pearl-points{
  display:flex;
  flex-direction:column;
  gap:.32rem;
}
.guide-pearl-point{
  position:relative;
  padding-left:.95rem;
  font-size:.76rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.guide-pearl-point::before{
  content:"•";
  position:absolute;
  left:.15rem;
  top:0;
  color:var(--text-dim);
  font-weight:700;
}
.guide-pearl-point strong{
  color:var(--text-primary);
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════════
   LIBRARY CHAT — Highlight-to-ask styling
   Reuses the simulation-side .hl-tooltip and .hl-ref-banner classes,
   with scoped overrides so the banner sits cleanly between the
   messages panel and the input row, and .user-hl highlights inside
   AI messages are visible against the chat bubble background.
   ══════════════════════════════════════════════════════════════ */
.lib-chat-msg.ai .user-hl{
  background:var(--user-highlight, #ffeb3b);
  color:#000;
  padding:0 2px;
  border-radius:2px;
  cursor:pointer;
}
.lib-chat-msg.ai .user-hl:hover{
  filter:brightness(1.05);
}
/* Make the inner text visibly selectable inside the chat bubble so users
   see the selection highlight and understand the feature is available. */
.lib-chat-msg.ai{
  user-select:text;
  -webkit-user-select:text;
}
/* Reference banner sits flush above the input row in the lib-chat modal */
#lib-chat-hl-banner{
  flex-shrink:0;
}

/* FIX: #lib-chat-hl-tooltip must render ABOVE .lib-chat-overlay (z-index:300).
   The generic .hl-tooltip class defaults to z-index:200, which puts the
   tooltip BEHIND the modal dim layer — user could select text but the
   tooltip was hidden. Scoped z-index bump keeps the sim tooltip at its
   lower value (where it lives on the simulation page, no overlay above).
   #lib-hl-tooltip (library-content tooltip) also gets the bump so it sits
   above any future overlays on library pages. */
#lib-hl-tooltip,#lib-chat-hl-tooltip{z-index:400;}

/* ══════════════════════════════════════════════════════════════
   CLINICAL SCORES — library section
   Score cards reuse the trial-card collapse pattern. Each card
   shows a name + one-line preview when collapsed, and a full
   clinical-use note + MDCalc link when expanded.
   ══════════════════════════════════════════════════════════════ */
.score-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:.4rem;
  overflow:hidden;
  transition:border-color .15s ease;
}
.score-card:hover{border-color:var(--border-light,var(--border));}
.score-card-hdr{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .75rem;
  cursor:pointer;
  user-select:none;
}
.score-name{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.3;
}
.score-preview{
  font-size:.7rem;
  color:var(--text-secondary);
  margin-top:.18rem;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.score-card .trial-arrow{
  transition:transform .18s ease;
  font-size:.72rem;
}
.score-card.open .trial-arrow{transform:rotate(180deg);}
.score-card .score-body{
  display:none;
  padding:0 .85rem .75rem;
  border-top:1px dashed var(--border);
}
.score-card.open .score-body{
  display:block;
  animation:fadeIn .2s ease-out;
}
.score-use{
  font-size:.76rem;
  line-height:1.6;
  color:var(--text-secondary);
  margin:.6rem 0 .2rem;
  font-family:inherit;
}
.score-use-lead{
  margin:.65rem 0 .75rem;
}
.score-use-p{
  margin:0 0 .5rem;
}
.score-use-p:last-child{
  margin-bottom:0;
}
.score-use-list{
  margin:.12rem 0 0;
  padding-left:1.15rem;
  color:var(--text-secondary);
}
.score-use-list li{
  margin:.24rem 0;
  line-height:1.55;
}
.score-use-list-numbered{
  padding-left:1.28rem;
}
/* Structured "Use:/Guides:/Key cutoff:/Caveat:" rows rendered by
   formatScoreUse() in clinical_scores.js. These match the platform's
   other content cards with a subtle tinted box, compact mono header,
   and stacked body text for easier scanning. */
.score-use-row{
  font-size:.76rem;
  line-height:1.55;
  color:var(--text-secondary);
  font-family:inherit;
  margin:.55rem 0;
  padding:.62rem .72rem .68rem;
  border:1px solid color-mix(in srgb, var(--score-accent, var(--border)) 16%, var(--border));
  border-left:3px solid var(--score-accent, var(--border-light,var(--border)));
  border-radius:10px;
  background:color-mix(in srgb, var(--score-accent, transparent) 7%, var(--bg-card));
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.score-use-row .score-use-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:block;
  margin-bottom:.32rem;
}
.score-use-row .score-use-text{
  font-size:.76rem;
  line-height:1.55;
  color:var(--text-secondary);
  font-family:inherit;
}
.score-use-subblock{
  margin-top:.5rem;
  padding-top:.48rem;
  border-top:1px dashed color-mix(in srgb, var(--score-accent, var(--border)) 22%, var(--border));
}
.score-use-subblock:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
.score-use-subhead{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--score-accent, var(--text));
  margin-bottom:.28rem;
}
.score-use-subbody > :last-child{
  margin-bottom:0;
}
.score-use-row-key-cutoff{
  background:color-mix(in srgb, var(--score-accent, transparent) 10%, var(--bg-card));
}
.score-use-row-key-cutoff .score-use-text,
.score-use-row-cutoff .score-use-text,
.score-use-row-bottom-line .score-use-text{
  color:var(--text);
}
/* Subsection grouping inside a specialty (e.g. "AF & Anticoagulation"
   inside Cardiology). Header is clickable to collapse/expand the body. */
.score-subsection .trial-arrow{transition:transform .18s ease;}
.score-subsection.score-subsection-collapsed .score-subsection-body{display:none;}
.score-subsection.score-subsection-collapsed .trial-arrow{transform:rotate(-90deg);}

/* Single top-of-page MDCalc button — replaces the per-card button that
   appeared on every score. Styled as a small hero "open MDCalc" pill so
   it reads as the page's primary external action. */
.scores-mdcalc-hero{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.55rem .9rem;
  margin:0 auto .9rem;
  background:rgba(14,165,233,.1);
  border:1px solid rgba(14,165,233,.4);
  border-radius:10px;
  color:#0EA5E9;
  font-family:'DM Sans',sans-serif;
  text-decoration:none;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
  align-self:center;
  max-width:760px;
  width:auto;
  box-shadow:0 1px 4px rgba(14,165,233,.08);
}
.scores-mdcalc-hero:hover{
  background:rgba(14,165,233,.18);
  transform:translateY(-1px);
  box-shadow:0 3px 12px rgba(14,165,233,.22);
}
.scores-mdcalc-hero-label{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.01em;
}
.scores-mdcalc-hero-sub{
  font-size:.7rem;
  font-weight:500;
  color:#0EA5E9;
  opacity:.85;
  margin-left:.15rem;
}
.scores-mdcalc-hero-arrow{
  font-size:.72rem;
  opacity:.8;
  margin-left:.2rem;
}

/* ══════════════════════════════════════════════════════════════
   RADIOLOGY — Imaging Modalities tab
   Card layout for modality summaries (XR, CT, MRI, US, Echo, NucMed, Fluoro)
   Each card: header title + collapsible body with summary, indications,
   strengths, limitations, contrast notes, bubble study (echo), pearls.
   ══════════════════════════════════════════════════════════════ */
.rad-mod-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:.6rem;
  overflow:hidden;
}
.rad-mod-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:.7rem .9rem;
  cursor:pointer;
  user-select:none;
}
.rad-mod-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.01em;
}
.rad-mod-card .trial-arrow{
  font-size:.72rem;
  transition:transform .18s ease;
}
.rad-mod-card.open .trial-arrow{transform:rotate(180deg);}
.rad-mod-card .rad-mod-body{
  display:none;
  padding:.25rem .95rem .9rem;
  border-top:1px dashed var(--border);
}
.rad-mod-card.open .rad-mod-body{
  display:block;
  animation:fadeIn .2s ease-out;
}
.rad-mod-summary{
  font-size:.76rem;
  line-height:1.65;
  color:var(--text-secondary);
  margin:.6rem 0 .75rem;
  padding:.5rem .7rem;
  background:var(--bg-primary);
  border-radius:6px;
}
.rad-mod-section{
  margin:.6rem 0;
}
.rad-mod-section-hdr{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.3rem;
  padding-bottom:.22rem;
  border-bottom:1px dashed currentColor;
  opacity:.95;
}
.rad-mod-list{
  margin:0;
  padding-left:1.15rem;
  font-size:.74rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.rad-mod-list li{
  padding:.12rem 0;
}
.rad-mod-contrast,
.rad-mod-bubble{
  padding:.55rem .7rem;
  background:rgba(6,182,212,.05);
  border:1px solid rgba(6,182,212,.2);
  border-left:3px solid var(--accent-cyan);
  border-radius:6px;
}
.rad-mod-bubble{
  background:rgba(168,85,247,.05);
  border-color:rgba(168,85,247,.2);
  border-left-color:var(--accent-purple);
}
.rad-mod-kv{
  font-size:.73rem;
  line-height:1.55;
  color:var(--text-secondary);
  margin:.25rem 0;
}
.rad-mod-kv strong{
  color:var(--text-primary);
  font-weight:600;
}

/* ══════════════════════════════════════════════════════════════
   RECENT ATTEMPTS CARD (landing page — longitudinal tracking)
   ══════════════════════════════════════════════════════════════ */
.ra-card{border:1px solid var(--border);background:var(--bg-card);border-radius:10px;padding:.9rem 1rem;font-family:'DM Sans',sans-serif;height:100%;display:flex;flex-direction:column;}
.ra-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.55rem;}
.ra-title{font-size:.82rem;font-weight:700;color:var(--text-primary);letter-spacing:.01em;}
.ra-sub{font-size:.72rem;color:var(--text-dim);}
.ra-body{display:flex;flex-direction:column;gap:.25rem;}
.ra-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem .1rem;border-bottom:1px solid var(--border);}
.ra-row:last-child{border-bottom:none;}
.ra-meta{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:var(--text-secondary);flex-wrap:wrap;}
.ra-date{color:var(--text-dim);font-variant-numeric:tabular-nums;}
.ra-type{font-weight:600;color:var(--text-primary);}
.ra-diff{font-size:.7rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;}
.ra-score{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;}
.ra-hi{color:var(--accent-green);} .ra-mi{color:#f59e0b;} .ra-lo{color:#ef4444;} .ra-dim{color:var(--text-dim);}
/* Empty-state row shown when the user has no scored attempts yet —
   keeps the card visible alongside Daily Drills so the landing layout
   stays symmetric instead of collapsing to one card. */
.ra-empty{
  font-size:.72rem;color:var(--text-secondary);line-height:1.5;
  padding:.65rem .25rem;text-align:center;
}
/* Footer links — the landing card's route into Progress / Scores /
   Case history. Quiet pill-buttons so they don't compete with the
   primary landing CTAs above. */
.ra-foot{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem;padding-top:.55rem;border-top:1px solid var(--border);}
/* Whole-tile click target (the card itself opens the full progress page). */
.ra-card-click{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;}
.ra-card-click:hover{border-color:var(--accent-purple);box-shadow:var(--shadow-2,0 4px 14px rgba(0,0,0,.12));transform:translateY(-1px);}
.ra-card-click:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px;}
.ra-link{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;padding:.28rem .6rem;cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.ra-link:hover{color:var(--text-primary);border-color:var(--accent-purple);background:rgba(168,85,247,.08);}

/* ══════════════════════════════════════════════════════════════
   LANDING TWO-COLUMN (Recent Attempts + Daily Drills)
   ══════════════════════════════════════════════════════════════ */
.landing-two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  max-width:920px;width:100%;margin-top:1.25rem;align-items:stretch;
}
.landing-two-col > div{width:100%;height:100%;display:flex;}
.landing-two-col > div > *{width:100%;}
@media(max-width:720px){
  .landing-two-col{grid-template-columns:1fr;}
}

/* Faculty Center bottom-of-landing tile. Same visual language as
 * the main Clinical Simulation / Library tiles — full-width
 * rectangle, monospace title, soft accent. Hidden for non-faculty
 * via inline style + syncFacultyCenterEntry. */
.landing-faculty-tile {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 920px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1.5px solid rgba(168,85,247,.32);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.landing-faculty-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent-purple);
  box-shadow: 0 6px 18px rgba(168,85,247,.18);
}
.lft-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(168,85,247,.12);
  border-radius: 12px;
  font-size: 1.35rem;
}
.lft-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.lft-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .98rem;
  color: var(--text-primary);
  letter-spacing: .01em;
}
.lft-desc {
  font-size: .76rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.lft-cta {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent-purple);
}
@media(max-width:560px){
  .landing-faculty-tile { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .lft-cta { align-self: flex-end; }
}

/* Daily Drills card needs to fill its grid cell so the My
 * Assignments tile and it render the same height. */
.landing-two-col .dd-card { height: 100%; }

/* ══════════════════════════════════════════════════════════════
   DAILY DRILLS HOME CARD
   ══════════════════════════════════════════════════════════════ */
.dd-card{
  border:1.5px solid var(--border);background:var(--bg-card);border-radius:14px;
  padding:1rem 1.15rem;font-family:'DM Sans',sans-serif;
  display:flex;flex-direction:column;gap:.6rem;min-height:140px;height:100%;
  transition:border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
/* "Cards are due" state — soft green glow that mirrors the orange
 * glow on the My Assignments tile (.ma-tile-new). The pair gives
 * the landing page a consistent "something needs your attention"
 * visual language: orange for new assignments, green for due cards. */
.dd-card.dd-card-active{
  border-color: rgba(34,197,94,.5);
  background: linear-gradient(135deg, rgba(34,197,94,.09), rgba(34,197,94,.02) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(34,197,94,.08);
  animation: ddCardGlow 2.4s ease-in-out infinite;
}
@keyframes ddCardGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,.06); }
  50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.16); }
}
.dd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;}
/* Standardized landing-tile title — same family/size/weight as
 * .lc-title / .ma-tile-title / .lft-title so every tile reads the
 * same regardless of label length. */
.dd-title{font-family:'JetBrains Mono',monospace;font-size:.98rem;font-weight:700;color:var(--text-primary);letter-spacing:.01em;}
.dd-sub{font-size:.72rem;color:var(--text-secondary);margin-top:.2rem;line-height:1.35;}
.dd-pulse{width:10px;height:10px;border-radius:999px;background:var(--border);flex:0 0 auto;margin-top:.35rem;}
.dd-pulse.active{background:var(--accent-green);box-shadow:0 0 0 0 rgba(16,185,129,0.6);animation:dd-pulse 1.8s infinite;}
@keyframes dd-pulse{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,0.55);}
  70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}
}
.dd-start-btn{
  width:100%;padding:.65rem 1rem;border-radius:8px;border:none;
  background:var(--accent-green);color:white;font-weight:600;font-size:.8rem;
  cursor:pointer;transition:background .15s;
}
.dd-start-btn:hover:not(:disabled){background:#059669;}
.dd-start-btn:disabled{background:var(--bg-secondary);color:var(--text-dim);cursor:default;}
/* Secondary link on the Daily Drills tile → opens the full flashcard deck. */
.dd-allcards-link{
  width:100%;margin-top:.4rem;padding:.45rem 1rem;border-radius:8px;
  background:transparent;border:1px solid var(--accent-purple);
  color:var(--accent-purple);font-weight:600;font-size:.74rem;cursor:pointer;
  transition:background .15s;
}
.dd-allcards-link:hover{background:rgba(168,85,247,.10);}
.dd-foot{font-size:.72rem;color:var(--text-dim);line-height:1.35;margin-top:.4rem;}
/* Action block below the header (2026-08-29b): vertically centered in the
   card's remaining space and width-capped so the buttons sit centrally
   rather than edge-to-edge; the header stays pinned at the top. */
.dd-actions{width:100%;max-width:280px;margin:auto;display:flex;flex-direction:column;text-align:center;}

/* ══════════════════════════════════════════════════════════════
   DRILLS REVIEW MODAL
   ══════════════════════════════════════════════════════════════ */
.drills-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:10600;display:none;align-items:center;justify-content:center;
  padding:1rem;
}
.drills-modal{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  max-width:560px;width:100%;max-height:88vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  font-family:'DM Sans',sans-serif;
}
.drills-modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.15rem;border-bottom:1px solid var(--border);
}
.drills-modal-hdr h3{margin:0;font-size:.95rem;}
.drills-modal-hdr button{
  background:none;border:none;color:var(--text-secondary);
  font-size:1.1rem;cursor:pointer;
}
.drills-modal-body{padding:1.15rem;min-height:220px;}

.dd-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem;font-size:.7rem;gap:.6rem;}
.dd-top-left{display:flex;align-items:center;gap:.55rem;}
.dd-back-top{
  background:rgba(6,182,212,.12);border:1px solid var(--accent-cyan);
  color:var(--accent-cyan);border-radius:6px;padding:.2rem .55rem;
  font-size:.72rem;font-weight:700;cursor:pointer;line-height:1;
}
.dd-back-top:hover{background:rgba(6,182,212,.22);color:var(--accent-cyan);border-color:var(--accent-cyan);}
.dd-mode{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.dd-progress{color:var(--text-dim);font-family:'JetBrains Mono',monospace;}
.dd-top-right{display:flex;align-items:center;gap:.6rem;}
/* "← Previous" — small, low-emphasis link in the modal header. Styled as
   a text button so it never competes with the primary response actions. */
.dd-prev-btn{
  background:transparent;border:1px solid var(--border);border-radius:6px;
  padding:.18rem .5rem;font-size:.72rem;font-weight:600;font-family:'DM Sans',sans-serif;
  color:var(--text-secondary);cursor:pointer;letter-spacing:.02em;
  transition:background .12s,border-color .12s,color .12s;
}
.dd-prev-btn:hover{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--text-dim);}
.dd-cloze{
  font-size:1rem;line-height:1.7;color:var(--text-primary);
  padding:1rem 1.15rem;border-radius:10px;background:var(--bg-secondary);
  min-height:110px;display:flex;align-items:center;
}
/* Single child holds the flowing question text so the blanks stay INLINE with
   the surrounding words. (Putting the text directly in the flex .dd-cloze made
   each text run + blank a separate flex item, splitting the sentence into
   misaligned columns.) */
.dd-cloze-text{width:100%;text-align:left;}
.dd-cloze.revealed{background:var(--bg-secondary);border:1px solid rgba(16,185,129,.35);}
.dd-blank{
  display:inline;padding:.05rem .4rem;border-radius:4px;
  background:var(--border);color:var(--text-dim);font-weight:600;
  white-space:nowrap;vertical-align:baseline;
}
.dd-ans{
  display:inline;color:var(--accent-green);font-weight:700;
  padding:.05rem .35rem;border-radius:6px;
  background:rgba(16,185,129,.10);vertical-align:baseline;
}
.dd-explain{
  margin-top:.55rem;padding:.55rem .75rem;border-left:2px solid var(--accent-cyan);
  font-size:.78rem;color:var(--text-secondary);line-height:1.5;
  background:var(--bg-secondary);border-radius:0 6px 6px 0;
}
.dd-buttons{display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap;}
.dd-reveal{
  width:100%;padding:.65rem 1rem;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-weight:600;cursor:pointer;
}
.dd-resp{
  flex:1 1 110px;padding:.55rem .5rem;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-weight:600;cursor:pointer;
  font-size:.78rem;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  line-height:1.1;
}
.dd-resp:hover{transform:translateY(-1px);}
/* Keyboard-navigation highlight: a clear ring around the currently selected
   interval button so users can see which option Space/Enter will choose. */
.dd-resp.dd-resp-focus{
  outline:2px solid var(--accent-cyan);outline-offset:1px;
  box-shadow:0 0 0 3px rgba(6,182,212,.20);transform:translateY(-1px);
}
.dd-resp-int{font-family:'JetBrains Mono',monospace;font-size:.92rem;font-weight:700;}
.dd-resp-lbl{font-size:.7rem;font-weight:500;opacity:.75;letter-spacing:.04em;text-transform:uppercase;}
.dd-again{border-color:rgba(239,68,68,.45);color:#ef4444;}
.dd-hard {border-color:rgba(245,158,11,.45);color:#f59e0b;}
.dd-good {border-color:rgba(16,185,129,.45);color:var(--accent-green);}
.dd-easy {border-color:rgba(59,130,246,.45);color:#3b82f6;}

/* Drills mode — extra row beneath the four SR buttons. Holds the
   custom-days snooze input and the "delete card" button. */
.dd-extra-row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-top:.7rem;flex-wrap:wrap;
}
.dd-snooze{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.dd-snooze-lbl{font-size:.7rem;color:var(--text-secondary);}
.dd-snooze-suffix{font-size:.7rem;color:var(--text-secondary);}
.dd-snooze input#dd-snooze-input{
  width:76px;padding:.32rem .45rem;
  border-radius:6px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);
  font-family:'JetBrains Mono',monospace;font-size:.78rem;text-align:center;
}
.dd-snooze input#dd-snooze-input:focus{border-color:var(--accent-cyan);outline:none;}
.dd-snooze-btn{
  padding:.35rem .7rem;border-radius:6px;
  border:1px solid rgba(6,182,212,.45);background:rgba(6,182,212,.08);
  color:var(--accent-cyan);font-size:.7rem;font-weight:600;cursor:pointer;
}
.dd-snooze-btn:hover{background:rgba(6,182,212,.18);}
.dd-drills-delete{
  padding:.35rem .65rem;border-radius:6px;
  border:1px solid rgba(239,68,68,.35);background:transparent;
  color:#ef4444;font-size:.7rem;font-weight:600;cursor:pointer;
}
.dd-drills-delete:hover{background:rgba(239,68,68,.08);}
/* Drills-mode Edit button — sits next to Delete on the extra row.
   Cyan-tinted so it reads as a constructive action distinct from delete. */
.dd-extra-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.dd-drills-edit{
  padding:.35rem .65rem;border-radius:6px;
  border:1px solid rgba(6,182,212,.45);background:transparent;
  color:var(--accent-cyan);font-size:.7rem;font-weight:600;cursor:pointer;
}
.dd-drills-edit:hover{background:rgba(6,182,212,.08);}
.dd-edit-row{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;flex-wrap:wrap;}
.dd-edit-btn,.dd-delete-btn{
  background:var(--bg-secondary);border:1px solid var(--border);
  color:var(--text-secondary);border-radius:6px;padding:.35rem .65rem;
  font-size:.7rem;cursor:pointer;
}
.dd-delete-btn{color:#ef4444;border-color:rgba(239,68,68,.35);}
.dd-back-btn{
  background:rgba(6,182,212,.12);border:1px solid var(--accent-cyan);
  color:var(--accent-cyan);border-radius:6px;padding:.35rem .65rem;
  font-size:.7rem;font-weight:600;cursor:pointer;
}
.dd-back-btn:hover{background:rgba(6,182,212,.22);color:var(--accent-cyan);border-color:var(--accent-cyan);}
.dd-edit-row .dd-back-btn{margin-right:auto;}
.dd-done .dd-back-btn{display:block;margin:0 auto .6rem;}
.dd-decision{
  font-size:.72rem;border-radius:6px;padding:.3rem .55rem;margin-top:.6rem;
  border:1px solid var(--border);line-height:1.3;
}
.dd-decision-keep{color:var(--accent-green);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.06);}
.dd-decision-skip{color:#f59e0b;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.06);}
.dd-concept{
  font-size:.7rem;color:var(--text-dim);padding:.15rem .5rem;border-radius:999px;
  border:1px solid var(--border);font-family:'JetBrains Mono',monospace;
}
.dd-done{text-align:center;padding:1.5rem .5rem;}
.dd-done-emoji{font-size:2rem;}
.dd-done-title{font-size:1rem;font-weight:700;margin-top:.5rem;}
.dd-done-sub{font-size:.78rem;color:var(--text-secondary);margin:.35rem 0 1rem;}
.dd-close-btn{
  padding:.55rem 1.25rem;border-radius:8px;border:none;
  background:var(--accent-green);color:white;font-weight:600;cursor:pointer;
}
/* "Continue to next set" — primary action on the drills done screen. When it
   is present, the sibling Close button drops to a secondary outline style so
   the two greens don't compete. */
.dd-continue-btn{
  display:block;margin:0 auto .6rem;padding:.55rem 1.25rem;border-radius:8px;border:none;
  background:var(--accent-green);color:white;font-weight:700;cursor:pointer;
}
.dd-continue-btn:hover{background:#0ea371;}
.dd-continue-btn + .dd-close-btn{
  display:block;margin:0 auto;background:transparent;
  border:1px solid var(--border);color:var(--text-secondary);font-weight:600;
}
.dd-continue-btn + .dd-close-btn:hover{color:var(--text-primary);border-color:var(--text-dim);}
.dd-loading{text-align:center;color:var(--text-secondary);font-size:.8rem;padding:2rem 0;}

/* ══════════════════════════════════════════════════════════════
   PROGRESS PAGE
   ══════════════════════════════════════════════════════════════ */
.pg-loading{color:var(--text-secondary);padding:2rem;text-align:center;font-family:'DM Sans',sans-serif;}
.pg-empty{text-align:center;padding:3rem 1rem;color:var(--text-secondary);font-family:'DM Sans',sans-serif;}
.pg-empty-emoji{font-size:2.2rem;}
.pg-empty-title{font-size:1rem;font-weight:700;margin-top:.5rem;color:var(--text-primary);}
.pg-empty-sub{font-size:.8rem;margin:.4rem 0 1rem;}
.pg-empty-inline{font-size:.72rem;color:var(--text-dim);padding:.3rem 0;}
.pg-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;
  max-width:1080px;margin:0 auto;padding:1rem;
}
.pg-card{
  border:1px solid var(--border);background:var(--bg-card);border-radius:12px;
  padding:1rem 1.15rem;font-family:'DM Sans',sans-serif;
}
.pg-card-title{font-size:.85rem;font-weight:700;margin-bottom:.8rem;color:var(--text-primary);}
.pg-stat-row{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.65rem;}
.pg-stat{flex:1 1 70px;background:var(--bg-secondary);border-radius:8px;padding:.55rem .35rem;text-align:center;}
.pg-num{font-size:1.15rem;font-weight:700;color:var(--text-primary);font-family:'JetBrains Mono',monospace;}
.pg-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin-top:.2rem;}
.pg-spark{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--accent-cyan);margin-top:.35rem;}
.pg-spark-lbl{font-family:'DM Sans',sans-serif;font-size:.72rem;color:var(--text-dim);margin-left:.35rem;}
.pg-row{display:grid;grid-template-columns:1fr 100px 40px;gap:.5rem;align-items:center;padding:.3rem 0;font-size:.74rem;}
.pg-concept{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pg-bar{height:6px;background:var(--bg-secondary);border-radius:3px;overflow:hidden;}
.pg-bar-fill{height:100%;border-radius:3px;transition:width .3s ease;}
.pg-bar-fill.pg-hi{background:var(--accent-green);}
.pg-bar-fill.pg-mid{background:#f59e0b;}
.pg-bar-fill.pg-lo{background:#ef4444;}
.pg-pct{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;}
.pg-rec{display:flex;gap:.55rem;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border);}
.pg-rec:last-child{border-bottom:none;}
.pg-rec-concept{font-size:.72rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace;}
.pg-rec-seed{font-size:.78rem;color:var(--text-primary);margin-top:.15rem;}
.pg-rec-btn{
  border:1px solid rgba(16,185,129,.45);background:transparent;color:var(--accent-green);
  padding:.3rem .65rem;border-radius:6px;font-size:.72rem;cursor:pointer;white-space:nowrap;
}
/* Recommended next cases + Daily Drills, side by side and matched in size.
   Full-width row inside .pg-grid; two equal columns that stretch to the
   same height so the Daily Drills tile matches the taller recs tile. */
.pg-bottom-row{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1rem;align-items:stretch;
}
.pg-bottom-row>.pg-card{display:flex;flex-direction:column;height:100%;}
.pg-dd-card .pg-dd-body{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
}
.pg-dd-card .pg-stat-row{margin-bottom:0;}
.pg-dd-card .dd-start-btn{margin-top:1rem;}

/* ══════════════════════════════════════════════════════════════
   COMBINED SEND BUTTON (orders + text)
   ══════════════════════════════════════════════════════════════ */
.send-btn.send-btn-combo{
  width:auto;
  min-width:120px;
  padding:0 .85rem;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
  background:linear-gradient(135deg, var(--accent-cyan), #06b6d4);
  color:white;
  border-radius:8px;
}
.send-btn.send-btn-combo:hover{filter:brightness(1.08);}

/* ══════════════════════════════════════════════════════════════
   ORDERS PANEL — make the search input pop
   ══════════════════════════════════════════════════════════════ */
#orders-search{
  border:1.5px solid var(--accent-cyan)\!important;
  background:rgba(6,182,212,.08)\!important;
  box-shadow:0 0 0 2px rgba(6,182,212,.18);
  font-weight:500;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease;
}
#orders-search::placeholder{color:var(--accent-cyan);opacity:.85;font-weight:600;}
#orders-search:focus{
  outline:none;
  border-color:#0891b2\!important;
  box-shadow:0 0 0 3px rgba(6,182,212,.35);
  background:rgba(6,182,212,.12)\!important;
}

/* ══════════════════════════════════════════════════════════════
   DEBRIEF PANEL — red glow on the Submit Debrief Questions button
   once the user has queued at least one question.
   ══════════════════════════════════════════════════════════════ */
.qs-sb.qs-sb-ready{
  border-color:var(--accent-red)\!important;
  color:var(--accent-red)\!important;
  background:rgba(220,38,38,.08)\!important;
  box-shadow:0 0 0 0 rgba(220,38,38,.55);
  animation:qs-sb-pulse 1.6s ease-in-out infinite;
}
@keyframes qs-sb-pulse{
  0%   {box-shadow:0 0 0 0  rgba(220,38,38,.55);}
  70%  {box-shadow:0 0 0 8px rgba(220,38,38,0);}
  100% {box-shadow:0 0 0 0  rgba(220,38,38,0);}
}

/* Daily Drills — first-card explainer banner inside post-sim review modal */
.dd-explainer{
  font-size:.7rem;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.55rem .75rem;
  margin-bottom:.55rem;
  line-height:1.45;
}

/* ════════════════════════════════════════════════════════════════
   LIBRARY SIDEBAR — fixed-left navigation that appears only when
   the user is on a library page (driven by body classes set in
   showPage(): page-library, page-drugs, page-physical-exam, etc.).
   On narrow viewports it collapses to a thin handle the user can
   toggle open. The user's preference (open/closed) is persisted
   across page navigations within the session.
================================================================ */
.lib-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 232px;
  z-index: 50;
  background: var(--bg-card, var(--bg-secondary));
  border-right: 1px solid var(--border);
  display: none;          /* hidden by default — only shows on library pages */
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;     /* kill the horizontal scrollbar artifact ("gray bar") at the bottom when overflow-y is auto */
  /* Belt-and-suspenders: hide ANY scrollbar in the sidebar to make sure
     no horizontal-track strip shows at the bottom on any browser. */
  scrollbar-width: thin;       /* Firefox: thin scrollbar */
  scrollbar-color: var(--border) transparent;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 2px 0 8px rgba(0,0,0,.04);
  transition: transform .22s ease, width .22s ease;
}
/* Chrome / Safari: explicitly hide the horizontal scrollbar track that
   was producing the persistent "gray bar" at the bottom of the sidebar
   on certain viewports. The vertical scrollbar remains usable. */
.lib-sidebar::-webkit-scrollbar { width: 6px; height: 0; }
.lib-sidebar::-webkit-scrollbar-track { background: transparent; }
.lib-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.lib-sidebar::-webkit-scrollbar-corner { display: none; background: transparent; }
/* Show the sidebar on every "main app" page — the home (simulation
   setup) and every library page. Mirror of showPage()'s page-<id>
   body class. Hidden on landing, chat (active sim), stats, sims,
   progress so it never interrupts an in-progress simulation. */
/* One switch (set in ui.js showPage from the _LIB_NAV_PAGES registry) decides
   whether the library sidebar shows and whether the page content is offset —
   replacing three hand-maintained per-page lists that had drifted out of sync. */
body.lib-shell .lib-sidebar {
  display: flex;
}
/* Push the page's content right by the sidebar width when it is visible. */
body.lib-shell {
  padding-left: 232px;
}
/* Collapsed state — sidebar slides FULLY off-screen, content reclaims
   width, the floating reopen tab handles re-opening. */
body.lib-sidebar-collapsed .lib-sidebar { transform: translateX(-100%); }
body.lib-sidebar-collapsed.lib-shell { padding-left: 0; }

/* Sidebar header — small label only; the toggle now lives as a tab
   on the sidebar's right edge so it sits at the same vertical
   position as the reopen tab when the sidebar is collapsed. */
.lib-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .75rem .85rem .55rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.lib-sidebar-header-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Toggle tab — slim vertical pill anchored to the sidebar's RIGHT
   edge at top:50%. Uses position:fixed (NOT absolute) so it isn't
   clipped by the sidebar's overflow:auto. Same dimensions and
   vertical position as the reopen tab so the click target stays
   in the same spot whether the sidebar is open or collapsed. */
.lib-sidebar-toggle {
  position: fixed;
  left: 232px;            /* sit right at the sidebar's right edge */
  top: 56px;
  bottom: 0;
  transform: none;
  width: 22px;
  height: auto;
  border: none;
  border-left: none;
  border-right: 1px solid var(--border);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, var(--accent-cyan) 12%) 0%, var(--bg-card, var(--bg-secondary)) 100%);
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 51;
  padding: 0;
  box-shadow: 1px 0 6px rgba(0,0,0,.08);
  transition: color .15s, background .15s, left .22s ease;
  display: none;          /* shown only on library-family pages, only when sidebar is expanded */
}
.lib-sidebar-toggle:hover { color: var(--accent-cyan); background: var(--bg-input, var(--bg-secondary)); }
/* Show the toggle on every page where the sidebar is visible. */
body.lib-shell .lib-sidebar-toggle { display: inline-flex; }
/* Hide the toggle when the sidebar is collapsed — the reopen pill
   takes over the click target at the same vertical spot. */
body.lib-sidebar-collapsed .lib-sidebar-toggle { display: none; }

/* Reopen tab — slim vertical pill anchored to the LEFT edge of the
   viewport, vertically centered. Same dimensions and vertical
   position as the toggle tab so they feel like the same control. */
.lib-sidebar-reopen {
  position: fixed;
  left: 0;
  top: 56px;
  bottom: 0;
  transform: none;
  width: 22px;
  height: auto;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 88%, var(--accent-cyan) 12%) 0%, var(--bg-card, var(--bg-secondary)) 100%);
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 49;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 1px 0 6px rgba(0,0,0,.08);
  transition: color .15s, background .15s;
}
.lib-sidebar-reopen:hover { color: var(--accent-cyan); background: var(--bg-input, var(--bg-secondary)); }
/* Show the reopen tab only on pages where the sidebar exists, AND
   only when the sidebar is in the collapsed state. */
body.lib-sidebar-collapsed.lib-shell .lib-sidebar-reopen { display: flex; }

/* Push the disclaimer footer + the minimized "Disclaimer" pill so
   they sit to the RIGHT of the sidebar instead of underneath it.
   Inline styles in disclaimer.js make !important necessary here. */
body.page-library #disclaimer-footer,
body.page-drugs #disclaimer-footer,
body.page-procedures #disclaimer-footer,
body.page-physical-exam #disclaimer-footer,
body.page-medsurg #disclaimer-footer,
body.page-radiology #disclaimer-footer,
body.page-rad-echo #disclaimer-footer,
body.page-rad-reports #disclaimer-footer,
body.page-rad-order #disclaimer-footer,
body.page-rad-safety #disclaimer-footer,
body.page-rad-buzzwords #disclaimer-footer,
body.page-rad-calling #disclaimer-footer,
body.page-rad-ild #disclaimer-footer,
body.page-rad-system #disclaimer-footer,
body.page-rad-modalities #disclaimer-footer,
body.page-rad-cxr #disclaimer-footer,
body.page-rad-pocus #disclaimer-footer,
body.page-rad-incidental #disclaimer-footer,
body.page-rad-practice #disclaimer-footer,
body.page-podcasts #disclaimer-footer,
body.page-clinical-trials #disclaimer-footer,
body.page-shock #disclaimer-footer,
body.page-outpatient #disclaimer-footer,
body.page-clinical-scores #disclaimer-footer,
body.page-advanced-topics #disclaimer-footer { left: 232px !important; }
body.page-library #disclaimer-restore-pill,
body.page-drugs #disclaimer-restore-pill,
body.page-procedures #disclaimer-restore-pill,
body.page-physical-exam #disclaimer-restore-pill,
body.page-medsurg #disclaimer-restore-pill,
body.page-radiology #disclaimer-restore-pill,
body.page-rad-echo #disclaimer-restore-pill,
body.page-rad-reports #disclaimer-restore-pill,
body.page-rad-order #disclaimer-restore-pill,
body.page-rad-safety #disclaimer-restore-pill,
body.page-rad-buzzwords #disclaimer-restore-pill,
body.page-rad-calling #disclaimer-restore-pill,
body.page-rad-ild #disclaimer-restore-pill,
body.page-rad-system #disclaimer-restore-pill,
body.page-rad-modalities #disclaimer-restore-pill,
body.page-rad-cxr #disclaimer-restore-pill,
body.page-rad-pocus #disclaimer-restore-pill,
body.page-rad-incidental #disclaimer-restore-pill,
body.page-rad-practice #disclaimer-restore-pill,
body.page-podcasts #disclaimer-restore-pill,
body.page-clinical-trials #disclaimer-restore-pill,
body.page-shock #disclaimer-restore-pill,
body.page-outpatient #disclaimer-restore-pill,
body.page-clinical-scores #disclaimer-restore-pill,
body.page-advanced-topics #disclaimer-restore-pill { left: 244px !important; }
/* When the sidebar is collapsed, snap the disclaimer back to its
   normal viewport-edge position. */
body.lib-sidebar-collapsed #disclaimer-footer { left: 22px !important; }
body.lib-sidebar-collapsed #disclaimer-restore-pill { left: 28px !important; }
/* On phones the sidebar is an off-canvas drawer, so no page should
   push the disclaimer pill/footer to the right — it was landing in the
   middle of the Simulation Setup screen. Also centre the pill's contents:
   the global ≤620px `button{min-height:44px}` touch-target rule stretched
   the pill to 44px with the text stuck at the top, leaving an empty band
   under "⚠️ Disclaimer". */
@media (max-width: 900px) {
  #disclaimer-footer { left: 0 !important; }
  #disclaimer-restore-pill {
    left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    align-items: center !important;
    line-height: 1 !important;
  }
}

.lib-sidebar-inner { padding: 1rem .75rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.lib-sidebar-section { display: flex; flex-direction: column; gap: .25rem; }

.lib-sidebar-link {
  display: flex; align-items: center; gap: .55rem;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: .5rem .65rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.lib-sidebar-link:hover { background: var(--bg-input, var(--bg-secondary)); color: var(--text); }
.lib-sidebar-link.active {
  background: rgba(6,182,212,.10);
  border-color: rgba(6,182,212,.32);
  color: var(--accent-cyan);
  font-weight: 600;
}
.lib-sidebar-link-icon { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.lib-sidebar-link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* My Flashcards sidebar dropdown */
.lib-sidebar-caret { font-size: .68rem; color: var(--text-dim); flex-shrink: 0; transition: transform .15s ease; }
.lib-sidebar-submenu { display: flex; flex-direction: column; gap: .1rem; margin: .1rem 0 .15rem 1.5rem; }
.lib-sidebar-submenu.hidden { display: none; }
.lib-sidebar-sublink {
  text-align: left; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  padding: .38rem .6rem;
  font-family: 'DM Sans', sans-serif; font-size: .74rem; font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.lib-sidebar-sublink:hover { background: rgba(6,182,212,.10); border-color: rgba(6,182,212,.32); color: var(--accent-cyan); }

/* Priority library tiles — Clinical Pocket Guide + Institution-Specific
   materials get a distinct amber-tinted shade to signal their added
   relevance versus the other browse tiles. */
.lib-hub-tile.lib-tile-priority {
  border-color: var(--accent-amber, #f59e0b);
  background: linear-gradient(180deg, rgba(245,158,11,.10), rgba(245,158,11,.04));
}
.lib-hub-tile.lib-tile-priority:hover {
  border-color: var(--accent-amber, #f59e0b);
  box-shadow: 0 4px 16px rgba(245,158,11,.18);
}

.lib-sidebar-link-sim {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.20);
  color: var(--accent-red);
  font-weight: 600;
}
.lib-sidebar-link-sim:hover { background: rgba(239,68,68,.14); color: var(--accent-red); }

/* Flashcards (Daily Drills) — green tint to mirror the Daily Drills card on
   the landing page. Lives in the same top section as Go to Simulator so the
   two primary CTAs sit together. */
.lib-sidebar-link-cards {
  background: rgba(16,185,129,.06);
  border-color: rgba(16,185,129,.22);
  color: var(--accent-green);
  font-weight: 600;
}
.lib-sidebar-link-cards:hover { background: rgba(16,185,129,.14); color: var(--accent-green); }

/* Due-count badge sitting at the right of the My Flashcards link.
   Hidden when there are zero cards due so the link doesn't feel
   like it's nagging when there's nothing to do. */
.lib-sidebar-card-badge {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--accent-green);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  padding: .18rem .42rem;
  border-radius: 999px;
  min-width: 1.4em;
  text-align: center;
}

.lib-sidebar-group-hdr {
  display: flex; align-items: center; gap: .55rem;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: .5rem .65rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: color .12s;
}
.lib-sidebar-group-hdr:hover { color: var(--text-secondary); }
.lib-sidebar-group-icon { font-size: .9rem; line-height: 1; flex-shrink: 0; }
.lib-sidebar-group-label { flex: 1; }
.lib-sidebar-group-caret { font-size: .72rem; transition: transform .18s ease; }
.lib-sidebar-group-hdr[aria-expanded="false"] .lib-sidebar-group-caret { transform: rotate(-90deg); }

.lib-sidebar-group-body {
  display: flex; flex-direction: column; gap: .15rem;
  padding-left: .35rem;
  border-left: 1px solid var(--border);
  margin-left: .55rem;
  overflow: hidden;
  max-height: 1200px;
  transition: max-height .25s ease, opacity .15s;
}
.lib-sidebar-group-hdr[aria-expanded="false"] + .lib-sidebar-group-body {
  max-height: 0; opacity: 0; pointer-events: none;
}

/* Mobile / narrow viewports — sidebar slides off-screen by default;
   user opens it with the handle. The body padding is reset so
   page content uses the full viewport width. */
@media (max-width: 768px) {
  body.lib-shell .lib-sidebar {
    transform: translateX(calc(-100% + 18px));
  }
  body.lib-shell {
    padding-left: 18px;
  }
  body.lib-sidebar-open .lib-sidebar { transform: translateX(0); }

  /* On narrow viewports, hide the toggle when the sidebar is in its
     default 18px-peek state (the user opens it by tapping the peek);
     show it at left:232px only when the sidebar has been opened. */
  .lib-sidebar-toggle { display: none !important; }
  body.lib-sidebar-open .lib-sidebar-toggle { display: inline-flex !important; }
}

/* Hide the library sidebar entirely on pages where it isn't useful.
   Landing + Sim Setup + Chat never use the sidebar. The mobile ☰
   hamburger must also be hidden so it doesn't open an empty drawer. */
body.page-home #lib-sidebar,
body.page-home .lib-mobile-menu,
body.page-home .lib-sidebar-toggle,
body.page-home .lib-sidebar-reopen,
body.page-home .lib-sidebar-backdrop,
body.page-landing #lib-sidebar,
body.page-landing .lib-mobile-menu,
body.page-landing .lib-sidebar-toggle,
body.page-landing .lib-sidebar-reopen,
body.page-landing .lib-sidebar-backdrop {
  display: none !important;
}
body.page-home,
body.page-landing {
  padding-left: 0 !important;
}
/* The running simulation (#chat) has its own header (back button, orders,
   debrief, historian, end) and never uses the Library sidebar. On mobile
   the fixed Library chrome — the ☰ menu button, the "‹" toggle strip, the
   reopen pill, the scrim, and the sidebar itself — was rendering ON TOP of
   the simulation: the ☰ covered the case title and the toggle painted a
   translucent vertical strip down the transcript (it is a fixed
   top:56px/bottom:0/left:232px bar). Hide all of it whenever the chat page
   is active. Desktop already hides these off the library pages, so this
   only changes the mobile simulation view. */
body.page-chat #lib-sidebar,
body.page-chat .lib-mobile-menu,
body.page-chat .lib-sidebar-toggle,
body.page-chat .lib-sidebar-reopen,
body.page-chat .lib-sidebar-backdrop {
  display: none !important;
}
/* On the simulation setup page, the form IS the page — hide the
   floating account/theme chrome so nothing competes with Start
   Simulation. Both controls remain available on every other page
   (the page-header inside #home still has its own theme-pill). */
body.page-home .global-account-menu {
  display: none !important;
}
/* The theme toggle stays available on the setup page (user request:
   Light/Dark/Auto must exist on every page). On phones the setup page's
   header/breadcrumb bar is taller than usual, so lift the toggle into the
   header row's free right-hand side instead of sitting on its bottom edge. */
@media (max-width: 620px) {
  body.page-home .global-theme-toggle {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
  }
}

/* ════════════════════════════════════════════════════════════
   COMMON ORDERS IN IM — page styles
   Renders inside #lib-sec-orders. Each topic gets its own card
   with a per-topic accent color (set inline). Cards are
   collapsible accordions.
   ════════════════════════════════════════════════════════════ */
.co-count{font-size:.7rem;color:var(--text-dim);margin-bottom:.5rem;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;}
/* Generic per-category sub-tab pill row (was .co-idtabs, ID-only). Layout
   is also set inline in commonOrders.js; these rules harden the centered,
   wrapping behavior so the row stays tidy on narrow / mobile widths. */
.co-subtabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .45rem;}
.co-subtabs .trials-nav-btn{white-space:normal;text-align:center;}
/* One-line microcopy for the ACTIVE sub-tab, so "Quick Order Sets" vs "Order
   Workflows" is self-explanatory without opening either. */
.co-subtab-desc{
  text-align:center;font-size:.72rem;line-height:1.5;color:var(--text-dim);
  max-width:44rem;margin:0 auto .9rem;padding:0 .5rem;
}
/* Card badge answering "is this a checklist or a walkthrough?" at a glance.
   Green = quick checklist, purple = workflow (mirrors the 🔬 workflow tab). */
.co-kind-pill{
  display:inline-block;margin-left:.4rem;padding:.08rem .4rem;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;
}
.co-kind-quick{background:rgba(34,197,94,.12);color:var(--accent-green);border:1px solid rgba(34,197,94,.28);}
.co-kind-workflow{background:rgba(168,85,247,.12);color:var(--accent-purple);border:1px solid rgba(168,85,247,.28);}
@media(max-width:560px){
  .co-subtab-desc{font-size:.7rem;}
  .co-kind-pill{font-size:.64rem;}
}
@media (max-width:480px){
  .co-subtabs{gap:.35rem;}
  .co-subtabs .trials-nav-btn{font-size:.7rem;padding:.3rem .55rem;}
}
.co-empty{padding:.9rem;text-align:center;color:var(--text-dim);font-size:.74rem;border:1px dashed var(--border);border-radius:8px;}
.co-category-hdr{margin:1.1rem 0 .5rem;padding:.35rem .65rem;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-left:4px solid;background:rgba(255,255,255,.03);border-radius:0 6px 6px 0;}
/* Collapsible category SECTIONS in the "All" view. Each section is
   collapsed by default; the header toggles its body. */
.co-catgroup{margin:0;}
.co-catgroup-body{display:none;}
.co-catgroup.open > .co-catgroup-body{display:block;}
.co-category-hdr--toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.5rem;user-select:none;transition:background .15s;}
.co-category-hdr--toggle:hover{background:rgba(255,255,255,.06);}
.co-cat-meta{display:inline-flex;align-items:center;gap:.5rem;text-transform:none;letter-spacing:0;font-weight:500;opacity:.85;}
.co-cat-arrow{display:inline-block;transition:transform .15s;font-size:.7rem;}
.co-catgroup.open > .co-category-hdr--toggle .co-cat-arrow{transform:rotate(180deg);}
.co-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;margin-bottom:.45rem;overflow:hidden;transition:background .15s,border-color .15s;}
.co-card:hover{background:var(--bg-card-hover);}
.co-hdr{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .75rem;cursor:pointer;}
.co-hdr-left{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.co-icon{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:8px;font-size:.95rem;flex-shrink:0;}
.co-topic{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.82rem;}
.co-pill{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .42rem;border-radius:6px;border:1px solid;}
.co-arrow{font-size:.68rem;transition:transform .2s;flex-shrink:0;}
.co-card.open .co-arrow{transform:rotate(180deg);}
.co-body{display:none;padding:.25rem .85rem .8rem;font-size:.72rem;line-height:1.6;color:var(--text-secondary);border-top:1px solid var(--border);}
.co-card.open .co-body{display:block;}
.co-sublabel{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:.7rem 0 .25rem;}
.co-bullet{padding:.05rem .55rem;border-left:2px solid;margin:.15rem 0;font-size:.7rem;line-height:1.55;color:var(--text-secondary);}

/* Streaming message bubble — shown only while an SSE stream is in
   flight. White-space: pre-wrap so the raw text-deltas keep their
   line breaks before the final markdown render replaces this bubble. */
.msg-streaming{
  white-space: pre-wrap;
  opacity: 0.92;
  position: relative;
}
.msg-streaming::after{
  content: '▋';
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-cyan, #06b6d4);
  animation: msg-streaming-cursor 1s steps(2, start) infinite;
}
@keyframes msg-streaming-cursor{ to { visibility: hidden; } }


/* ══════════════════════════════════════════════════════════════
   RADIOLOGY v2 — sub-page card layout
   Used by Echo / Imaging Reports / Order the Right Study /
   Pre-Imaging Safety / Buzzwords / Calling Radiology.
   Shares the .mgh-lib-card outer shell and clones the
   collapsible-category banner pattern from .le-* / .pe-*.
   ══════════════════════════════════════════════════════════════ */
#rad-echo-content, #rad-reports-content, #rad-order-content,
#rad-safety-content, #rad-buzzwords-content, #rad-calling-content {
  max-width: 760px; width: 100%;
}
#rad-echo-content .mgh-lib-card, #rad-reports-content .mgh-lib-card,
#rad-order-content .mgh-lib-card, #rad-safety-content .mgh-lib-card,
#rad-buzzwords-content .mgh-lib-card, #rad-calling-content .mgh-lib-card {
  max-width: 760px; width: 100%;
}
#rad-echo-content .mgh-lib-content, #rad-reports-content .mgh-lib-content,
#rad-order-content .mgh-lib-content, #rad-safety-content .mgh-lib-content,
#rad-buzzwords-content .mgh-lib-content, #rad-calling-content .mgh-lib-content {
  padding: .5rem .25rem .25rem;
}

.re-cat-section { margin-bottom: 1.1rem; }
.re-cat-banner {
  display: flex; align-items: center; gap: .55rem;
  margin: 1.1rem 0 .55rem;
  padding: .55rem .8rem;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: filter .12s, transform .08s;
  user-select: none;
}
.re-cat-banner:hover { filter: brightness(1.06); }
.re-cat-banner:active { transform: scale(.998); }
.re-cat-section:first-child .re-cat-banner { margin-top: .2rem; }
.re-cat-banner-icon { font-size: 1rem; line-height: 1; }
.re-cat-banner-name { font-size: .92rem; font-weight: 700; letter-spacing: .02em; }
.re-cat-banner-count {
  margin-left: .7rem;
  font-size: .72rem; color: var(--text-dim);
  font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
}
.re-cat-banner-arrow {
  margin-left: auto;
  font-size: .7rem; line-height: 1; opacity: .7;
  transition: transform .18s ease;
}
.re-cat-section.open .re-cat-banner-arrow { transform: rotate(180deg); }
.re-cat-cards { display: none; }
.re-cat-section.open .re-cat-cards { display: block; animation: reCatExpand .15s ease-out; }
@keyframes reCatExpand { from { opacity: 0; transform: translateY(-2px) } to { opacity: 1; transform: translateY(0) } }

.re-card { margin-bottom: .45rem; }
.re-card .mgh-lib-hdr { padding: .55rem .8rem; }
.re-card-name { font-family: 'JetBrains Mono', monospace; font-size: .84rem; font-weight: 700; }
.re-card-full {
  display: inline-block;
  margin-left: .5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; color: var(--text-dim); font-weight: 500;
}
@media (max-width: 520px) {
  .re-card-full { display: block; margin-left: 0; margin-top: .15rem; }
}

/* Each labelled section inside a card body. Stack vertically on all
   widths; a colored left border + label maps the field type to a
   color (Normal=green, What=cyan, Abnormal=red, Pearl=purple,
   Action=amber, etc.) */
.re-sides { display: flex; flex-direction: column; gap: .45rem; }
.re-side {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: .5rem .7rem;
}
.re-side-hdr {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .25rem;
}
.re-side-body {
  font-size: .84rem; color: var(--text-primary);
  line-height: 1.55;
}

/* ══════════════════════════════════════════════════════════════
   PHYSIOLOGY, EXPLAINED — by-organ physiology library page
   ══════════════════════════════════════════════════════════════ */
.phys-system-section { margin-top: 1rem; }
.phys-system-banner {
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-left:3px solid;
  border-radius:0 6px 6px 0;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.55rem;
  /* Pin the system name to the top of the scroll area (.ref-page-content)
     while scrolling its organs, so you never lose track of which system
     you're reading. No overflow:hidden ancestor between here and the
     scroll container, so sticky engages cleanly below the fixed page header. */
  position:sticky; top:0; z-index:5;
}
.phys-system-name { flex:1; }
.phys-system-count {
  font-size:.66rem; font-weight:400; opacity:.7;
  margin-right:.4rem;
}
.phys-system-arrow {
  font-size:.66rem; opacity:.7;
  transition:transform .18s ease;
}
.phys-system-section:not(.open) .phys-system-arrow { transform:rotate(-90deg); }
.phys-system-cards {
  display:none;
  flex-direction:column; gap:.5rem;
}
.phys-system-section.open .phys-system-cards {
  display:flex;
}

.phys-organ {
  background: var(--bg-card);
  border:1px solid var(--border);
  border-left:3px solid var(--accent-cyan);
  border-radius:8px;
  overflow:hidden;
  transition:box-shadow .18s ease;
}
.phys-organ:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
.phys-organ-hdr {
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.6rem .8rem;
  cursor:pointer; user-select:none;
}
.phys-organ-title {
  display:flex; align-items:center; gap:.45rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem; font-weight:700;
  letter-spacing:.02em;
}
.phys-organ-icon { font-size:1rem; }
.phys-organ-caret { transition:transform .18s ease; font-size:.7rem; }
.phys-organ:not(.open) .phys-organ-caret { transform:rotate(-90deg); }
.phys-organ-body {
  display:none;
  padding:.4rem .9rem .9rem;
  border-top:1px dashed var(--border);
}
.phys-organ.open .phys-organ-body { display:block; }

.phys-concept { margin-top:1.05rem; }
.phys-concept:first-child { margin-top:.3rem; }
.phys-concept-label {
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.18rem;
}
.phys-concept-body {
  font-size:.78rem; color:var(--text-secondary);
  line-height:1.6;
  /* Cap line length for readability — on wide desktops the body used to run
     the full card width (~1400px), well past the ~60–80ch reading ideal.
     A newspaper-column measure makes dense pathophysiology far easier to scan. */
  max-width:74ch;
}
/* Each '\n' in a concept body becomes its own .phys-concept-line so a
 * dense paragraph reads as a stack of one-thought rows. The small top
 * margin gives breathing room without making the card feel sparse. */
.phys-concept-line { margin-top:.32rem; }
.phys-concept-line:first-child { margin-top:0; }
/* Bullet rows (lines that began with "- " in the body). A hanging-indent
   layout with a "•" marker so a list of causes / differentials reads as a
   list instead of a comma-run. Tighter top margin keeps grouped items close. */
.phys-concept-line.phys-bullet {
  margin-top:.16rem;
  padding-left:1.5em;
  text-indent:-0.9em;
}
.phys-concept-line.phys-bullet::before {
  content:"•";
  color:var(--accent-cyan, #06b6d4);
  font-weight:700;
  margin-right:.5em;
}

.phys-cm-block {
  margin-top:.9rem; padding-top:.6rem;
  border-top:1px dashed var(--border);
}
.phys-cm-header {
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:#22c55e; margin-bottom:.4rem;
}
.phys-cm-list { margin:0; padding-left:1.1rem; max-width:74ch; }
.phys-cm-item {
  margin-bottom:.4rem;
  font-size:.78rem; line-height:1.55;
  color:var(--text-secondary);
}
.phys-cm-arrow { color:var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   PROGRESSIVE DISCLOSURE — collapsible concepts within an organ card
   Opening an organ now reveals a scannable list of concept headers (+ a
   quick-jump chip row) instead of every mechanism at once. Each concept
   header toggles its own body; Expand/Collapse all flips everything.
   ══════════════════════════════════════════════════════════════ */
.phys-concept-hdr {
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; cursor:pointer; user-select:none;
}
.phys-concept-hdr .phys-concept-label { margin-bottom:0; }
.phys-concept-hdr:hover .phys-concept-label { text-decoration:underline; text-underline-offset:2px; }
.phys-concept-caret { font-size:.66rem; flex-shrink:0; opacity:.75; transition:transform .18s ease; }
.phys-concept:not(.open) .phys-concept-caret,
.phys-cm-block:not(.open) .phys-concept-caret { transform:rotate(-90deg); }
.phys-concept:not(.open) .phys-concept-body { display:none; }
.phys-concept.open .phys-concept-body { margin-top:.4rem; }
.phys-cm-block:not(.open) .phys-cm-list { display:none; }
.phys-cm-block:not(.open) .phys-cm-header { margin-bottom:0; }
.phys-cm-header.phys-concept-hdr { cursor:pointer; }

/* Quick-jump chips — compact table of contents at the top of each open card. */
.phys-toc {
  display:flex; flex-wrap:wrap; gap:.3rem;
  margin:.1rem 0 .65rem; padding-bottom:.6rem;
  border-bottom:1px dashed var(--border);
}
.phys-toc-chip {
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem; font-weight:600; letter-spacing:.01em; line-height:1.3;
  padding:.25rem .5rem; border-radius:12px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-secondary); cursor:pointer;
  transition:border-color .15s, color .15s;
  text-align:left; max-width:100%;
}
.phys-toc-chip:hover { border-color:var(--c, var(--accent-cyan)); color:var(--c, var(--accent-cyan)); }
.phys-toc-chip-cm:hover { border-color:#22c55e; color:#22c55e; }

/* Expand all / Collapse all toolbar. */
.phys-toolbar { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.2rem; }
.phys-tool-btn {
  font-family:'JetBrains Mono', monospace; font-size:.68rem; font-weight:600;
  padding:.32rem .6rem; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-secondary); cursor:pointer;
  transition:border-color .15s, color .15s;
}
.phys-tool-btn:hover { border-color:var(--accent-cyan); color:var(--accent-cyan); }

/* Numbered mechanism steps ("1." / "2." …) — hanging indent so wrapped
   lines align under the text rather than back under the number. */
.phys-concept-line.phys-step { padding-left:1.6em; text-indent:-1.6em; }

/* Search-match highlight (amber, matching the bedside-callout accent family). */
.phys-hl { background:rgba(245,158,11,.28); border-radius:2px; padding:0 .05em; }

/* ══════════════════════════════════════════════════════════════
   TILE DRILL-DOWN — systems → concepts → detail (replaces the accordion)
   Hub: a grid of system tiles. Click → that system's concept tiles. Click a
   concept → a focused reading view. Breadcrumbs navigate back; search shows
   matching concept tiles across all systems. (The older .phys-organ /
   .phys-system-banner / .phys-concept-hdr / .phys-toc / .phys-toolbar rules
   above are now unused but harmless — left in place.)
   ══════════════════════════════════════════════════════════════ */
/* Deterministic content width so the tile grid forms real columns (the
   container is otherwise shrink-to-fit inside a centered flex column). */
#physiology-content { width:100%; max-width:1240px; }
.phys-hub-intro { font-size:.74rem; color:var(--text-dim); margin:.1rem 0 .7rem; }
.phys-tile-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:.6rem; margin-bottom:1rem;
}
.phys-tile {
  position:relative; display:flex; flex-direction:column; gap:.28rem;
  text-align:left; cursor:pointer;
  /* Full accent border on all four sides + a faint matching fill composited
     over the card bg, so each tile reads as its own distinct colored card. */
  background-color:var(--bg-card);
  background-image:linear-gradient(0deg, var(--c-tint, transparent), var(--c-tint, transparent));
  border:1.5px solid var(--c, var(--border));
  border-radius:10px; padding:.72rem .85rem; min-height:66px;
  transition:transform .12s ease, box-shadow .15s ease;
  font-family:inherit;
}
.phys-tile:hover {
  transform:translateY(-2px);
  box-shadow:0 5px 16px rgba(0,0,0,.13);
}
.phys-tile.active {
  box-shadow:0 0 0 2px var(--c-tint, transparent), 0 6px 18px rgba(0,0,0,.14);
  background-image:linear-gradient(0deg, color-mix(in srgb, var(--c, var(--accent-cyan)) 13%, transparent), color-mix(in srgb, var(--c, var(--accent-cyan)) 13%, transparent));
}
.phys-tile-title {
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:.72rem; letter-spacing:.02em; line-height:1.3;
}
.phys-tile-system .phys-tile-title { text-transform:uppercase; font-size:.74rem; }
.phys-tile-sub {
  font-size:.68rem; color:var(--text-dim); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.phys-tile-crumb {
  font-family:'JetBrains Mono', monospace; font-size:.64rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); opacity:.85;
}
.phys-tile-go { position:absolute; top:.55rem; right:.7rem; font-size:.85rem; opacity:.5; }
.phys-tile-system { padding-right:1.6rem; }
.phys-tile-organ .phys-tile-title { text-transform:none; }

/* Breadcrumb — the IN-PAGE trail (distinct from the app-level trail in the
   page header). This one is what actually moves the user back out of a card,
   so its links carry a visible clickable affordance rather than reading as
   plain text. */
.phys-crumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  margin:.1rem 0 .85rem;
}
.phys-crumb-link {
  background:none; border:none; padding:.1rem .3rem; cursor:pointer;
  font:inherit; color:var(--text-secondary);
  border-radius:6px;
  border-bottom:1px dotted currentColor;
  transition:background .12s ease, color .12s ease;
}
.phys-crumb-link:hover {
  text-decoration:underline; text-underline-offset:2px;
  background:color-mix(in srgb, currentColor 12%, transparent);
}
.phys-crumb-sep { color:var(--text-dim); opacity:.6; }
.phys-crumb-here { font-weight:700; }

/* Highlighted variant: a bordered bar with an explicit "← Back to <parent>"
   button on the left. Used where the in-page trail is the primary way back
   (Med-Surg service → group → card), because a plain text trail sitting under
   the app header reads as decoration and users hunt for a back control. */
.phys-crumb-bar {
  gap:.5rem;
  padding:.4rem .55rem;
  border:1.5px solid var(--border);
  border-left:3px solid var(--accent-cyan);
  border-radius:8px;
  background:var(--bg-card);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  margin:.1rem 0 .9rem;
}
.phys-crumb-trail { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; min-width:0; }
.phys-crumb-item { display:inline-flex; align-items:center; gap:.35rem; }
.phys-crumb-back {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.3rem .6rem; cursor:pointer;
  font-family:'JetBrains Mono', monospace; font-size:.72rem; font-weight:700;
  color:var(--accent-cyan);
  background:color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  border:1.5px solid var(--accent-cyan);
  border-radius:999px;
  white-space:nowrap; max-width:min(48vw, 320px); overflow:hidden; text-overflow:ellipsis;
  transition:background .12s ease, transform .12s ease;
}
.phys-crumb-back:hover {
  background:color-mix(in srgb, var(--accent-cyan) 22%, transparent);
  transform:translateX(-1px);
}
.phys-crumb-back-arrow { font-size:.8rem; line-height:1; }
@media(max-width:600px){
  .phys-crumb-bar { gap:.35rem; padding:.35rem .45rem; }
  .phys-crumb-back-to { display:none; }
  .phys-crumb-bar .phys-crumb-trail { font-size:.68rem; gap:.25rem; }
  .phys-crumb-bar .phys-crumb-link { padding:.05rem .2rem; }
  .phys-crumb-far { display:none; }
  /* the first still-visible level must not lead with a dangling "›" */
  .phys-crumb-far + .phys-crumb-item > .phys-crumb-sep { display:none; }
}

/* Floating "← Back to search results" pill — appears after the user opens a
   federated-search result on another page, giving a one-click return to the
   result list (which showLibHub restores). Fixed, centered near the top. */
.lib-search-return{
  position:fixed;
  top:64px;
  left:50%;
  transform:translateX(-50%);
  z-index:1200;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.5rem 1rem;
  border-radius:999px;
  border:1.5px solid var(--accent-amber, #f59e0b);
  background:var(--bg-card);
  color:var(--accent-amber, #f59e0b);
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.18);
  transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.lib-search-return:hover{
  transform:translateX(-50%) translateY(-1px);
  background:color-mix(in srgb, var(--accent-amber, #f59e0b) 12%, var(--bg-card));
  box-shadow:0 8px 26px rgba(0,0,0,.22);
}
.lib-search-return-arrow{font-size:.95rem;line-height:1;}
@media(max-width:600px){ .lib-search-return{top:auto;bottom:76px;font-size:.74rem;} }

/* Multi-organ sub-heading inside a system view */
.phys-organ-group-label {
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  margin:.5rem 0 .55rem; padding-left:.5rem; border-left:2px solid;
}

/* Three-pane physiology browser: subcategory rail → topic rail → slide */
.phys-browser {
  display:grid;
  grid-template-columns:minmax(170px, .72fr) minmax(220px, .95fr) minmax(360px, 1.75fr);
  gap:.75rem;
  align-items:start;
}
.phys-browser-col { min-width:0; }
.phys-browser-label {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 .45rem .15rem;
}
.phys-rail {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  min-width:0;
}
@media (min-width: 981px) {
  .phys-rail,
  .phys-slide {
    position:sticky;
    top:.45rem;
  }
  .phys-rail {
    max-height:calc(100vh - 190px);
    overflow:auto;
    padding-right:.12rem;
  }
}
.phys-rail .phys-tile {
  width:100%;
  min-height:70px;
  border-radius:8px;
  /* Center the rail tiles so they read the same as the shared
     .at-section-tile rails used on Labs / Consults / Orders / Scores. */
  align-items:center;
  text-align:center;
}
.phys-rail .phys-tile .phys-tile-sub{ width:100%; }
.phys-slide {
  min-width:0;
  min-height:360px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:4px solid var(--phys-slide-accent, var(--accent-cyan));
  border-radius:8px;
  padding:.85rem 1rem 1rem;
}
/* Match the shared section-browser header: the prev/next arrows sit together,
   centered, and are enlarged + accent-colored (same treatment as
   .at-section-detail-top / .at-section-nav elsewhere in the library). */
.phys-slide-top {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.15rem;
  margin-bottom:.6rem;
}
.phys-slide-kicker {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-align:center;
  min-width:8rem;
}
.phys-slide-nav {
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:var(--bg-secondary);
  color:var(--phys-slide-accent, var(--accent-cyan));
  cursor:pointer;
  font-size:1.6rem;
  line-height:1;
  display:grid;
  place-items:center;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.phys-slide-nav:hover:not(:disabled) {
  border-color:var(--phys-slide-accent, var(--accent-cyan));
  background:color-mix(in srgb, var(--phys-slide-accent, #06b6d4) 12%, transparent);
  transform:translateY(-1px);
}
.phys-slide-nav:disabled {
  opacity:.35;
  cursor:not-allowed;
}
.phys-empty {
  font-size:.78rem;
  color:var(--text-dim);
  text-align:center;
  padding:2rem 1rem;
}

/* Concept detail (focused reading view) */
.phys-detail {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:8px; padding:.9rem 1rem 1rem;
}
.phys-detail-title {
  font-family:'JetBrains Mono', monospace; font-weight:700;
  font-size:.9rem; letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:.7rem; padding-bottom:.55rem; line-height:1.25;
  border-bottom:1px solid var(--border);
}
.phys-detail-back { margin-top:.9rem; }

@media (max-width: 980px) {
  .phys-browser {
    grid-template-columns:1fr;
  }
  .phys-rail {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  }
  .phys-slide {
    min-height:0;
  }
}

/* ══ MEDICINE-SURGERY tile drill-down (reuses .phys-tile / .phys-crumb / .phys-detail) ══ */
#ms-detail { width:100%; max-width:1100px; }
.ms-svc-hero { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.7rem .85rem; margin:.1rem 0 .7rem; }
.ms-svc-hero-title { font-family:'JetBrains Mono', monospace; font-weight:700; font-size:.85rem; letter-spacing:.02em; }
.ms-svc-hero-sub { font-size:.74rem; color:var(--text-secondary); line-height:1.5; margin-top:.3rem; max-width:74ch; }
.ms-grid-label { font-size:.7rem; color:var(--text-dim); margin:.1rem 0 .6rem; }
/* A group tile opens a page of cards rather than a single card — the count
   kicker + chevron + heavier border say "there is another level here". */
.ms-group-tile { border-width:2px; padding-right:1.6rem; }
.ms-group-tile .phys-tile-crumb { display:block; margin-bottom:.15rem; opacity:1; }
.ms-group-tile .phys-tile-go { opacity:.75; font-weight:700; }
.ms-group-tile .phys-tile-sub { -webkit-line-clamp:3; }

/* ══════════════════════════════════════════════════════════════
   PALLIATION — Tab bar (Interventions / Goals of Care)
   The tab bar is rendered into the same flex-wrap nav container as
   the subsection chips, so we force it onto its own full-width row
   with flex-basis:100%. The chips that follow then start fresh on
   the next wrap line below the tabs.
   ══════════════════════════════════════════════════════════════ */
.pe-tab-bar {
  flex: 0 0 100%;
  display:flex; gap:.5rem; margin-bottom:.85rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.pe-tab-btn {
  flex:1; min-width:200px;
  padding:.55rem .9rem; border-radius:8px;
  border:1.5px solid var(--border); background:var(--bg-card);
  color:var(--text-secondary);
  font-family:'JetBrains Mono', monospace;
  font-size:.74rem; font-weight:700;
  letter-spacing:.03em;
  cursor:pointer; transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.pe-tab-btn:hover {
  border-color:var(--accent-cyan);
  color:var(--accent-cyan);
}
.pe-tab-btn.active {
  background:rgba(168,85,247,.1);
  border-color:var(--accent-purple);
  color:var(--accent-purple);
}
/* Hint text rendered between the tab bar and the subsection chips,
   nudging the user that the dropdown banners below can be expanded. */
.pe-nav-hint {
  flex: 0 0 100%;
  font-size:.7rem; color:var(--text-dim);
  margin: -.25rem 0 .55rem;
  font-style:italic;
}
/* GOC banner descriptions — one-liner shown under the category name
   (visible whether or not the banner is expanded) so the user knows
   what each section covers before clicking to expand. */
.pe-cat-banner-desc {
  flex: 0 0 100%;
  font-size:.72rem; font-weight:400;
  text-transform:none; letter-spacing:0;
  opacity:.78; margin-top:.2rem;
}
.goc-section { margin-top:.5rem; }
.goc-section .pe-row-label {
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.18rem;
}

/* Advanced Ventilatory Management gate — active states */
.tb.a-advvent-yes {
  background:rgba(34,197,94,.14);
  border-color:var(--accent-green);
  color:var(--accent-green);
}
.tb.a-advvent-no {
  background:rgba(59,130,246,.10);
  border-color:var(--accent-blue);
  color:var(--accent-blue);
}

/* Labs Explained — extended detail block (used for high-yield labs
   like AST/ALT that benefit from a CMDT-table-style severity breakdown) */
.le-detail-section {
  margin-top:.7rem;
  padding-top:.55rem;
  border-top:1px dashed var(--border);
}
.le-detail-heading {
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:.3rem;
}
.le-detail-note {
  font-size:.74rem; color:var(--text-secondary);
  line-height:1.5; font-style:italic;
  margin-bottom:.45rem;
}
.le-detail-group { margin-top:.45rem; }
.le-detail-group-label {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:.2rem;
}
.le-detail-list {
  margin:0; padding-left:1.05rem;
  font-size:.76rem; line-height:1.5;
  color:var(--text-secondary);
}
.le-detail-list li { margin-bottom:.12rem; }

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — Privacy primitive: sim_mode banner on home setup page
   ══════════════════════════════════════════════════════════════ */
.sim-mode-banner {
  display:flex; align-items:center; gap:.85rem;
  width:100%; max-width:780px;
  margin: 1rem auto .5rem;
  padding:.7rem .95rem;
  border:1px solid;
  border-radius:10px;
  font-family:'DM Sans', sans-serif;
  transition: background .2s ease, border-color .2s ease;
}
.sim-mode-banner.sim-mode-practice {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.35);
}
.sim-mode-banner.sim-mode-assigned {
  background: rgba(234, 179, 8, 0.08);
  border-color: rgba(234, 179, 8, 0.5);
}
.sim-mode-banner .sim-mode-icon {
  font-size:1.4rem; line-height:1;
  flex-shrink:0;
}
.sim-mode-banner .sim-mode-text { flex:1; min-width:0; }
.sim-mode-banner .sim-mode-title {
  font-size:.78rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color: var(--accent-green);
  font-family:'JetBrains Mono', monospace;
}
.sim-mode-banner.sim-mode-assigned .sim-mode-title {
  color: var(--accent-amber);
}
.sim-mode-banner .sim-mode-sub {
  font-size:.7rem; line-height:1.45;
  color: var(--text-secondary);
  margin-top:.18rem;
}
.sim-mode-banner .sim-mode-actions {
  display:flex; gap:.4rem; flex-shrink:0;
  align-items:center;
}
.sim-mode-banner .sim-mode-info-btn,
.sim-mode-banner .sim-mode-switch-btn {
  font-family:'DM Sans', sans-serif;
  font-size:.7rem; font-weight:600;
  border:1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  padding:.35rem .55rem;
  border-radius:6px;
  cursor:pointer;
  transition: filter .12s ease;
}
.sim-mode-banner .sim-mode-info-btn {
  width:1.85rem; height:1.85rem;
  padding:0; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700;
}
.sim-mode-banner .sim-mode-info-btn:hover { filter:brightness(1.1); }
.sim-mode-banner .sim-mode-switch-btn[disabled] {
  opacity:.45; cursor:not-allowed;
}
@media (max-width: 600px) {
  .sim-mode-banner {
    flex-wrap:wrap;
    gap:.55rem;
  }
  .sim-mode-banner .sim-mode-actions {
    flex-basis:100%;
    justify-content:flex-end;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — Neon-yellow glow on tile + sidebar entry when there's
   unread content in the user's institution docs section. The class
   is toggled by refreshInstitutionDocsGlow() in library.js and
   cleared by clearInstitutionDocsGlow() when the user opens the
   docs subview.
   ══════════════════════════════════════════════════════════════ */

/* Library Hub tile glow */
.lib-hub-tile.lib-tile-unread {
  position: relative;
  border-color: #facc15 !important;
  box-shadow:
    0 0 0 1px #facc15 inset,
    0 0 14px rgba(250, 204, 21, .55),
    0 0 32px rgba(250, 204, 21, .25);
  animation: libTileNeonPulse 2.4s ease-in-out infinite;
}
@keyframes libTileNeonPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px #facc15 inset,
      0 0 12px rgba(250, 204, 21, .45),
      0 0 26px rgba(250, 204, 21, .18);
  }
  50% {
    box-shadow:
      0 0 0 1px #facc15 inset,
      0 0 18px rgba(250, 204, 21, .7),
      0 0 38px rgba(250, 204, 21, .35);
  }
}

/* Sidebar link glow — same energy, scaled for the smaller surface */
.lib-sidebar-link.lib-tile-unread {
  position: relative;
  background: rgba(250, 204, 21, .08);
  box-shadow: 0 0 0 1px #facc15 inset, 0 0 10px rgba(250, 204, 21, .4);
  animation: libSidebarNeonPulse 2.4s ease-in-out infinite;
}
@keyframes libSidebarNeonPulse {
  0%, 100% { box-shadow: 0 0 0 1px #facc15 inset, 0 0  8px rgba(250, 204, 21, .3); }
  50%      { box-shadow: 0 0 0 1px #facc15 inset, 0 0 14px rgba(250, 204, 21, .55); }
}

/* "N new" pill in the corner of a glowing library tile. */
.lib-tile-unread-badge {
  position: absolute;
  top: .55rem;
  right: .55rem;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #facc15;
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(250, 204, 21, .55);
  pointer-events: none;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .lib-hub-tile.lib-tile-unread,
  .lib-sidebar-link.lib-tile-unread {
    animation: none;
  }
}

/* Mobile drawer and responsive Faculty Center. Desktop layout is unchanged. */
.lib-mobile-menu,.lib-sidebar-backdrop{display:none;}
@media (max-width:768px){
  body[class*="page-"]{padding-left:0!important;}
  .lib-mobile-menu{display:inline-flex;position:fixed;left:.65rem;top:.65rem;z-index:80;min-width:44px;min-height:44px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text-primary);font-size:1.25rem;}
  .lib-sidebar{width:min(86vw,320px)!important;transform:translateX(-105%)!important;z-index:90!important;box-shadow:8px 0 30px rgba(0,0,0,.35);}
  body.lib-sidebar-open .lib-sidebar{transform:translateX(0)!important;}
  /* Backdrop must ONLY appear while the drawer is open. Setting it to
     display:block unconditionally here overrode the element's [hidden]
     attribute, leaving a full-screen 45%-black scrim permanently on top
     of every mobile library page — which dimmed the whole UI, captured
     every tap (its onclick opens the drawer, so tile taps opened the nav
     instead of the tile), and blocked scrolling. Scope it to the open
     state so closed = no scrim, taps and scrolling pass through. */
  .lib-sidebar-backdrop{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.45);}
  body.lib-sidebar-open .lib-sidebar-backdrop{display:block;}
  .lib-sidebar-toggle,.lib-sidebar-reopen{display:none!important;}
  .lib-sidebar-link,.lib-sidebar-group-hdr,.lib-sidebar-sublink{min-height:44px;}
  .fc-card-grid,.pr-tile-grid{grid-template-columns:1fr!important;}
  .fc-tab-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.75rem;}
  .fc-tab-btn{min-height:44px;white-space:nowrap;}
  .fc-table-wrap{overflow:visible;}
  .fc-table,.fc-table tbody,.fc-table tr,.fc-table td{display:block;width:100%;}
  .fc-table thead{display:none;}
  .fc-table tr{margin:.6rem 0;padding:.65rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);}
  .fc-table td{border:0!important;padding:.22rem .1rem!important;overflow-wrap:anywhere;}
  .fc-modal{padding:1rem;max-height:92dvh;}
  textarea,input,select,button{min-height:44px;}
}

/* ══════════════════════════════════════════════════════════════
   PHASE 5 — Faculty Center
   ══════════════════════════════════════════════════════════════ */
#faculty-center .ref-page-content {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.1rem 2.4rem;
}
.fc-header {
  display:flex;
  flex-direction:column;
  gap:.9rem;
  padding:1rem 1.05rem;
  border-radius:16px;
  background:
    linear-gradient(135deg, rgba(168,85,247,.11), rgba(59,130,246,.05) 65%, rgba(255,255,255,0) 100%);
  border:1px solid rgba(168,85,247,.22);
  margin-bottom:1rem;
}
.fc-header-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.85rem;
  width:100%;
  flex-wrap:wrap;
}
.fc-header-sub {
  margin:.35rem 0 0 0;
  max-width:740px;
  font-size:.78rem;
  line-height:1.55;
  color:var(--text-secondary);
}
.fc-eyebrow {
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-purple);
}
.fc-title {
  font-size:1.32rem;
  font-weight:800;
  color: var(--text-primary);
  margin-top:.12rem;
  letter-spacing:-.01em;
}
.fc-privacy-pill {
  font-size:.7rem; color: var(--text-secondary);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
  padding:.45rem .7rem;
  border-radius: 999px;
  font-family:'DM Sans',sans-serif;
  line-height:1.4;
}
.fc-header-stats {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.65rem;
  width:100%;
}
/* Stat tiles — theme-aware cards (the old 46% white frosted wash was
   unreadable on the dark theme). Each tile carries its own accent via
   --fc-stat-accent set inline by renderHeaderStat(). */
.fc-header-stat {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  width:100%;
  padding:.75rem .85rem .7rem;
  border-radius:12px;
  border:1px solid var(--border);
  border-top:3px solid var(--fc-stat-accent, var(--accent-purple));
  background:var(--bg-card);
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.fc-header-stat:hover {
  border-color:var(--fc-stat-accent, var(--accent-purple));
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.fc-header-stat:focus-visible {
  outline:2px solid var(--fc-stat-accent, var(--accent-cyan));
  outline-offset:2px;
}
/* The "→" line is the affordance that these are navigable. It stays in
   the layout at all times so hovering never reflows the tile. */
.fc-header-stat-cta {
  margin-top:.35rem;
  font-size:.66rem;
  font-weight:700;
  color:var(--fc-stat-accent, var(--accent-purple));
  opacity:.75;
  transition:opacity .15s ease;
}
.fc-header-stat:hover .fc-header-stat-cta { opacity:1; }
.fc-header-stat-icon {
  position:absolute;
  top:.55rem;
  right:.65rem;
  font-size:1rem;
  line-height:1;
  opacity:.9;
}
.fc-header-stat-val {
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:1.35rem;
  font-weight:800;
  line-height:1;
  color:var(--text-primary);
}
.fc-header-stat-lbl {
  display:block;
  margin-top:.3rem;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--fc-stat-accent, var(--accent-purple));
}
.fc-header-stat-sub {
  display:block;
  margin-top:.15rem;
  font-size:.68rem;
  color:var(--text-secondary);
  line-height:1.35;
}
.fc-tab-bar {
  display:flex; gap:.45rem; flex-wrap:wrap;
  justify-content:center;
  border-bottom: 1px solid var(--border);
  margin-bottom:1rem; padding-bottom:.65rem;
}
.fc-tab-btn {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .95rem;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 10px;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease,opacity .15s ease;
}
.fc-tab-btn.active {
  background: rgba(168,85,247,.12);
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}
/* Locked tab (chief residents): visibly present but not usable. */
.fc-tab-btn.fc-tab-locked {
  opacity: .5;
  cursor: not-allowed;
  color: var(--text-dim);
  background: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(255,255,255,.03) 6px, rgba(255,255,255,.03) 12px);
}
.fc-tab-btn.fc-tab-locked:hover { border-color: var(--border); }
.fc-tab-btn.fc-tab-locked:disabled { pointer-events:none; }
.fc-tab-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.45rem;
  padding:.08rem .34rem;
  border-radius:999px;
  background:var(--bg-secondary);
  color:inherit;
  font-size:.7rem;
}
.fc-section { margin-bottom: 1.4rem; }
.fc-section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:.85rem;
  margin-bottom:.7rem;
  flex-wrap:wrap;
}
.fc-section-head h3 {
  font-size:1rem; font-weight:800; color: var(--text-primary); margin:0;
}
.fc-section-sub {
  margin:.18rem 0 0 0;
  font-size:.74rem;
  color:var(--text-secondary);
  line-height:1.45;
}
.fc-primary-btn {
  font-size:.78rem; font-weight:700;
  padding:.52rem .92rem;
  border-radius:10px;
  border:1px solid var(--accent-purple);
  background: rgba(168,85,247,.12);
  color: var(--accent-purple);
  cursor:pointer;
}
.fc-primary-btn[disabled] { opacity:.45; cursor:not-allowed; }
.fc-link-btn {
  background:none; border:none;
  font-size:.7rem; color: var(--text-dim);
  text-decoration: underline; cursor:pointer;
  padding: 0;
}
.fc-link-btn:hover { color: var(--accent-cyan); }
/* Destructive variant — paired with the new "Delete" action on the
   case-library card so faculty can visually distinguish hard delete
   from the safer "Archive" (soft delete) action next to it. */
.fc-link-btn.fc-link-btn-danger { color: #ef4444; }
.fc-link-btn.fc-link-btn-danger:hover { color: var(--accent-red); }
.fc-empty {
  font-size:.78rem; color: var(--text-dim); line-height:1.55;
  background: var(--bg-card);
  border:1px dashed var(--border);
  border-radius: 8px;
  padding:.85rem 1rem;
}
.fc-card-grid {
  display:grid; gap:.6rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.fc-card {
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: 14px;
  padding:.85rem .95rem;
  transition: transform .12s ease, box-shadow .12s ease;
  text-align:center;
}
.fc-card-assignment { cursor:pointer; }
.fc-card-case {
  display:flex;
  flex-direction:column;
}
.fc-card-case .fc-card-actions {
  margin-top:auto;
  padding-top:.8rem;
}
.fc-card-assignment:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
}
.fc-card-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.55rem;
  margin-bottom:.45rem;
}
.fc-card-badges {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  justify-content:center;
}
.fc-type-pill,
.fc-due-pill,
.fc-visibility-pill,
.fc-kind-pill {
  display:inline-flex;
  align-items:center;
  padding:.18rem .5rem;
  border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
/* "Kind" pill — the at-a-glance answer to "is this a reusable template or a
   sent copy?", the distinction faculty kept missing. Purple = authored
   template (matches the Faculty Center's primary accent); amber = a sent
   assignment being tracked. */
.fc-kind-pill-template {
  background:rgba(168,85,247,.10);
  color:var(--accent-purple);
  border:1px solid rgba(168,85,247,.26);
}
.fc-kind-pill-assignment {
  background:rgba(217,119,6,.11);
  color:var(--accent-amber);
  border:1px solid rgba(217,119,6,.28);
}
/* Compact 1 → 2 → 3 workflow strip above the two sections. Operational, not
   marketing: one line, monospace numerals, wraps on narrow screens. */
.fc-workflow {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem .7rem;
  margin:0 0 1.25rem;
  padding:.6rem .85rem;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--bg-primary);
}
.fc-workflow-step {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.74rem;
  color:var(--text-secondary);
  white-space:nowrap;
}
.fc-workflow-num {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15rem;
  height:1.15rem;
  border-radius:50%;
  background:rgba(168,85,247,.12);
  color:var(--accent-purple);
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  font-weight:800;
}
.fc-workflow-arrow { color:var(--text-dim); font-size:.8rem; }
@media(max-width:560px){
  .fc-workflow-arrow { display:none; }
  .fc-workflow { gap:.4rem; }
  .fc-workflow-step { white-space:normal; }
}
.fc-type-pill {
  background:rgba(59,130,246,.09);
  color:var(--accent-blue);
  border:1px solid rgba(59,130,246,.22);
}
.fc-type-pill.fc-type-pill-soft {
  background:rgba(148,163,184,.12);
  color:var(--text-secondary);
  border-color:rgba(148,163,184,.22);
}
.fc-due-pill {
  background:rgba(148,163,184,.14);
  color:var(--text-secondary);
  border:1px solid rgba(148,163,184,.26);
}
.fc-due-pill-today,
.fc-due-pill-soon {
  background:rgba(245,158,11,.12);
  color:var(--accent-amber);
  border-color:rgba(245,158,11,.28);
}
.fc-due-pill-overdue {
  background:rgba(239,68,68,.1);
  color:var(--accent-red);
  border-color:rgba(239,68,68,.26);
}
.fc-visibility-pill {
  background:rgba(168,85,247,.1);
  color:var(--accent-purple);
  border:1px solid rgba(168,85,247,.22);
}
.fc-visibility-pill-private {
  background:rgba(14,165,233,.1);
  color:var(--accent-cyan);
  border-color:rgba(14,165,233,.22);
}
.fc-card-title {
  font-weight:800; font-size:.96rem; color: var(--text-primary);
  line-height:1.35;
}
.fc-card-meta {
  font-size:.72rem; font-family:'JetBrains Mono', monospace;
  color: var(--text-dim); letter-spacing:.04em; margin-top:.18rem;
}
.fc-card-assignment-audience,
.fc-card-progress {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.12rem;
  margin-top:.55rem;
}
.fc-card-assignment-audience strong,
.fc-card-progress strong {
  color:var(--text-primary);
  font-weight:800;
}
.fc-card-assignment-audience span {
  font-size:.72rem;
  color:var(--text-secondary);
}
.fc-card-progress {
  padding:.48rem .6rem;
  border-radius:10px;
  background:rgba(168,85,247,.08);
  border:1px solid rgba(168,85,247,.18);
}
.fc-card-progress strong {
  font-family:'JetBrains Mono',monospace;
  font-size:1.05rem;
  color:var(--accent-purple);
}
.fc-card-progress span {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.fc-card-desc {
  font-size:.76rem; color: var(--text-secondary);
  line-height:1.5; margin-top:.45rem;
}
.fc-card-desc-muted {
  color:var(--text-dim);
  font-style:italic;
}
.fc-card-actions {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  margin-top:.8rem;
  flex-wrap:wrap;
}
.fc-card-link-row {
  display:flex;
  justify-content:center;
  gap:.75rem;
  align-items:center;
  margin-left:0;
}
.fc-section-templates {
  margin-top:1rem;
  padding:1rem;
  border:1px solid rgba(168,85,247,.24);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(168,85,247,.06), transparent 58%);
}
.fc-section-templates .fc-section-head h3 { color:var(--accent-purple); }
.fc-section-templates .fc-card-case { border-color:rgba(168,85,247,.26); }
.fc-section-assignments {
  margin-top:1.2rem;
  padding:1rem;
  border:1px solid rgba(14,165,233,.26);
  border-radius:14px;
  background:linear-gradient(135deg, rgba(14,165,233,.065), transparent 58%);
}
.fc-section-assignments .fc-section-head h3 { color:var(--accent-cyan); }
.fc-section-assignments .fc-card-assignment { border-color:rgba(14,165,233,.28); }
.fc-section-assignments .fc-card-primary-btn {
  border-color:var(--accent-cyan);
  color:var(--accent-cyan);
  background:rgba(14,165,233,.10);
}
.fc-card-primary-btn {
  padding:.5rem .82rem;
  border-radius:10px;
  border:1px solid var(--accent-purple);
  background:rgba(168,85,247,.12);
  color:var(--accent-purple);
  font-size:.74rem;
  font-weight:700;
  cursor:pointer;
}
.fc-card-cta {
  font-size:.7rem; color: var(--accent-purple); font-weight:600;
}
.fc-back-btn {
  background:none; border:1px solid var(--border);
  font-size:.7rem; color: var(--text-secondary);
  padding:.35rem .65rem;
  border-radius:6px; cursor:pointer;
}
@media (max-width: 760px) {
  .fc-header-top,
  .fc-card-actions,
  .fc-section-head {
    align-items:flex-start;
  }
  .fc-card-link-row {
    margin-left:0;
  }
  .fc-primary-btn,
  .fc-card-primary-btn {
    width:100%;
  }
}
.fc-stats-row {
  display:flex; gap:1.25rem; margin-top:.55rem;
}
.fc-stat-num {
  font-size:1.1rem; font-weight:700; color: var(--text-primary);
  font-family:'JetBrains Mono', monospace;
}
.fc-stat-label {
  font-size:.68rem; color: var(--text-dim); text-transform:uppercase;
  letter-spacing:.06em; margin-top:.15rem;
}
.fc-table-wrap {
  border:1px solid var(--border); border-radius:8px;
  overflow:hidden; background: var(--bg-card);
}
.fc-table {
  width:100%; border-collapse:collapse;
  font-size:.75rem;
}
.fc-table th, .fc-table td {
  text-align:left; padding:.5rem .7rem;
  border-bottom: 1px solid var(--border);
}
.fc-table th {
  background: rgba(168,85,247,.05);
  font-size:.72rem; text-transform:uppercase;
  letter-spacing:.05em; color: var(--text-dim);
}
.fc-table tr:last-child td { border-bottom: none; }
.fc-table-sub {
  font-size:.68rem; color: var(--text-dim);
}
.fc-coming-soon {
  text-align:center; padding:2.5rem 1rem;
  color: var(--text-secondary);
}
.fc-coming-soon-icon { font-size:2rem; margin-bottom:.4rem; }
.fc-coming-soon h3 { color: var(--text-primary); font-size:1rem; margin:0 0 .35rem; }
.fc-coming-soon p {
  font-size:.78rem; line-height:1.55;
  max-width:460px; margin: 0 auto;
}

/* Modals */
.fc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 10600;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.fc-modal {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%; max-width: 480px;
  padding: 1.25rem;
  max-height: 90vh; overflow-y: auto;
}
.fc-modal h3 { margin: 0 0 .7rem 0; font-size:1rem; }
.fc-modal label {
  display: block; font-size:.72rem;
  color: var(--text-secondary);
  margin-top: .55rem;
}
.fc-modal label input,
.fc-modal label textarea,
.fc-modal label select {
  width: 100%; box-sizing: border-box;
  margin-top: .2rem;
  padding: .5rem .65rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .8rem; font-family: 'DM Sans',sans-serif;
}
.fc-modal-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1rem;
}
.fc-modal-err {
  margin-top:.6rem; padding:.5rem .65rem;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px;
  color: #fca5a5; font-size:.75rem;
}

/* New-case modal — color-coded section grouping.
 * Four sections, each with its own accent color on the left edge + heading.
 * Colors chosen so each section reads as a distinct phase of authoring
 * (Basics → Scenario → Interaction → Patient seed). Deliberately avoids
 * cyan since that's the platform-wide focus color and would clash. */
.fc-modal-section {
  margin: .6rem 0 .25rem 0;
  padding: .5rem .75rem .15rem .85rem;
  border-radius: 8px;
  border-left: 3px solid var(--border);
  background: var(--bg-secondary);
}
.fc-modal-section-head {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: .2rem;
  color: var(--text-secondary);
}
.fc-modal-section.fc-section-basics       { border-left-color: var(--accent-purple); }
.fc-modal-section.fc-section-basics       .fc-modal-section-head { color: var(--accent-purple); }
.fc-modal-section.fc-section-scenario     { border-left-color: var(--accent-green);  }
.fc-modal-section.fc-section-scenario     .fc-modal-section-head { color: var(--accent-green);  }
.fc-modal-section.fc-section-interaction  { border-left-color: var(--accent-amber);  }
.fc-modal-section.fc-section-interaction  .fc-modal-section-head { color: var(--accent-amber);  }
.fc-modal-section.fc-section-prompt       { border-left-color: var(--accent-blue);   }
.fc-modal-section.fc-section-prompt       .fc-modal-section-head { color: var(--accent-blue);   }

/* Assignment modal — wide variant fits the person picker + visibility radios */
.fc-modal.fc-modal-wide { max-width: 620px; }

/* Roster split — color-accented section heads.
 * Faculty-center page uses purple as its primary, so we vary here:
 * Learners → green (calm/inclusive), Faculty → amber (authority). */
.fc-section-head.fc-roster-head { border-bottom: 2px solid transparent; padding-bottom:.25rem; }
.fc-section-head.fc-roster-head h3 { display:flex; align-items:center; gap:.55rem; }
.fc-roster-count {
  display:inline-block; font-family:'JetBrains Mono',monospace;
  font-size:.72rem; font-weight:700; letter-spacing:.04em;
  padding:.1rem .45rem; border-radius:999px;
  background: var(--bg-secondary); color: var(--text-secondary);
}
.fc-section-head.fc-roster-head-learners { border-bottom-color: var(--accent-green); }
.fc-section-head.fc-roster-head-learners h3 { color: var(--accent-green); }
.fc-section-head.fc-roster-head-faculty  { border-bottom-color: var(--accent-amber); }
.fc-section-head.fc-roster-head-faculty  h3 { color: var(--accent-amber); }

/* Roster board — grouped tiles by learner level / role. */
.fc-roster-board {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:.85rem;
  align-items:start;
}
.fc-roster-tile {
  --fc-roster-accent: var(--accent-purple);
  border:1px solid var(--border);
  border-top:3px solid var(--fc-roster-accent);
  border-radius:8px;
  background:var(--bg-card);
  overflow:hidden;
}
.fc-roster-tile-blue { --fc-roster-accent: var(--accent-blue); }
.fc-roster-tile-purple { --fc-roster-accent: var(--accent-purple); }
.fc-roster-tile-green { --fc-roster-accent: var(--accent-green); }
.fc-roster-tile-amber,
.fc-roster-tile-orange { --fc-roster-accent: var(--accent-amber); }
.fc-roster-tile-cyan { --fc-roster-accent: var(--accent-cyan); }
.fc-roster-tile-rose { --fc-roster-accent: #f43f5e; }
.fc-roster-tile-violet { --fc-roster-accent: #8b5cf6; }
.fc-roster-tile-slate { --fc-roster-accent: #64748b; }
.fc-roster-tile-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:.75rem .85rem .65rem;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-bottom:1px solid var(--border);
}
.fc-roster-tile-head h3 {
  margin:0;
  font-size:.9rem;
  color:var(--text-primary);
}
.fc-roster-tile-head p {
  margin:.16rem 0 0;
  font-size:.68rem;
  color:var(--text-dim);
  line-height:1.35;
}
.fc-roster-tile-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.65rem;
  height:1.55rem;
  padding:0 .4rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--fc-roster-accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--fc-roster-accent) 35%, var(--border));
  color:var(--fc-roster-accent);
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  font-weight:800;
}
.fc-roster-tile-list {
  display:flex;
  flex-direction:column;
}
.fc-roster-tile-empty {
  margin:0;
  padding:.85rem;
  color:var(--text-dim);
  font-size:.75rem;
  line-height:1.45;
}
.fc-roster-person {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:.55rem;
  padding:.75rem .85rem;
  border-top:1px solid var(--border);
}
.fc-roster-person:first-child { border-top:0; }
.fc-roster-person-main {
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
}
.fc-roster-avatar {
  flex:0 0 2rem;
  width:2rem;
  height:2rem;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--fc-roster-accent) 13%, var(--bg-secondary));
  border:1px solid color-mix(in srgb, var(--fc-roster-accent) 25%, var(--border));
  color:var(--text-primary);
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  font-weight:800;
}
.fc-roster-person-text {
  display:flex;
  flex-direction:column;
  gap:.08rem;
  min-width:0;
}
.fc-roster-person-name {
  color:var(--text-primary);
  font-size:.8rem;
  font-weight:700;
  overflow-wrap:anywhere;
}
.fc-roster-person-email {
  color:var(--text-dim);
  font-size:.68rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.fc-roster-person-meta {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.fc-roster-person-meta span {
  border:1px solid var(--border);
  border-radius:999px;
  padding:.12rem .45rem;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  font-size:.7rem;
  font-weight:700;
}
.fc-roster-person-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.fc-roster-person-actions .fc-link-btn {
  padding:.26rem .55rem;
  font-size:.68rem;
}
.fc-modal-help {
  margin:.25rem 0 .75rem;
  color:var(--text-secondary);
  font-size:.76rem;
  line-height:1.45;
}
@media (max-width:768px){
  .fc-roster-board { grid-template-columns:1fr; }
  .fc-roster-person-actions .fc-link-btn { flex:1 1 auto; }
}

/* "Used in N assignments" line on each Case card. Surfaces the
 * reuse signal that justifies keeping Cases separate from
 * Assignments in the UI. Empty-state ("Not yet assigned") gets
 * a muted look so it doesn't read like a problem. */
.fc-card-usage {
  margin-top: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-purple);
}
.fc-card-usage.fc-card-usage-empty {
  color: var(--text-dim);
  font-weight: 600;
}
/* Primary CTA on the Case card — visually distinct from Edit/Archive
 * so faculty's eye lands on Assign → when scanning their library. */
.fc-link-btn.fc-link-btn-primary {
  color: var(--accent-purple);
  font-weight: 700;
}

/* Target-group chip row for the assignment modal. Visual language
 * mirrors the .fc-person-chip below so the section reads as one
 * coherent picker rather than a half-form / half-dropdown hybrid. */
.fc-target-row {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .15rem 0 .5rem 0;
}
.fc-target-row.fc-target-other-row {
  margin-top: -.15rem;
  padding-left: .15rem;
  border-left: 2px dashed rgba(168,85,247,.25);
  padding-top: .35rem; padding-bottom: .1rem;
}
.fc-target-chip {
  padding: .4rem .7rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.fc-target-chip:hover { border-color: var(--accent-purple); }
.fc-target-chip.selected {
  border-color: var(--accent-purple);
  background: rgba(168,85,247,.16);
  box-shadow: 0 0 0 2px rgba(168,85,247,.35), 0 0 12px rgba(168,85,247,.35);
  color: var(--text-primary);
}
.fc-target-chip.fc-target-other {
  font-style: italic;
  color: var(--text-secondary);
}
.fc-target-chip.fc-target-other.selected {
  font-style: normal;
}

/* The "Target group" label sits above the chips since the chips are
 * not inside a <label> wrapper. */
.fc-modal-fieldlabel {
  display: block;
  font-size: .72rem;
  color: var(--text-secondary);
  margin-top: .55rem;
}

/* Search bar above the person-chip grid */
.fc-assn-people-search {
  width: 100%; box-sizing: border-box;
  margin: .1rem 0 .35rem 0;
  padding: .45rem .65rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
}
.fc-assn-people-search:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.18);
}
.fc-assn-people-empty {
  margin: .35rem 0 0 0;
  font-size: .72rem; color: var(--text-dim); font-style: italic;
}

/* Person-picker chip grid for the assignment modal */
.fc-assn-people-label {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:.5rem; font-size:.72rem; color: var(--text-secondary);
}
.fc-assn-people-hint {
  margin:.15rem 0 .35rem 0;
  font-size:.7rem; color: var(--text-dim); line-height:1.4;
}
.fc-assn-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:.4rem;
  max-height: 220px;
  overflow-y: auto;
  padding:.35rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fc-person-chip {
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.1rem;
  padding:.4rem .55rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.fc-person-chip:hover { border-color: var(--accent-purple); }
.fc-person-chip.selected {
  border-color: var(--accent-purple);
  background: rgba(168,85,247,.16);
  box-shadow: 0 0 0 2px rgba(168,85,247,.35), 0 0 12px rgba(168,85,247,.35);
}
.fc-person-name { font-size:.78rem; font-weight:600; }
.fc-person-sub  { font-size:.72rem; color: var(--text-dim); }
.fc-person-tag  {
  margin-top:.1rem; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform: uppercase;
  color: var(--accent-amber);
}

/* Visibility radio options for the assignment modal */
.fc-assn-vis-hint {
  margin:.1rem 0 .5rem 0;
  font-size:.7rem; color: var(--text-dim); line-height:1.45;
}
.fc-vis-option {
  display:flex; align-items:flex-start; gap:.5rem;
  margin-top:.35rem;
  padding:.5rem .65rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.fc-vis-option:has(input:checked) {
  border-color: var(--accent-amber);
  background: rgba(245,158,11,.08);
}
.fc-vis-option input[type="radio"] { margin-top:.18rem; }
.fc-vis-option strong { display:block; font-size:.8rem; }
.fc-vis-option .fc-vis-sub {
  display:block; margin-top:.15rem;
  font-size:.7rem; color: var(--text-secondary); line-height:1.4;
}

/* ── Roster row → resident profile affordance ─────────────── */
.fc-roster-table .fc-roster-row { cursor: pointer; transition: background .12s ease; }
.fc-roster-table .fc-roster-row:hover {
  background: rgba(168,85,247,.07);
  outline: 1px solid rgba(168,85,247,.18);
  outline-offset: -1px;
}
.fc-roster-table .fc-roster-row:focus-visible {
  background: rgba(168,85,247,.1);
  outline: 2px solid var(--accent-purple);
  outline-offset: -2px;
}
.fc-roster-name { font-weight: 600; color: var(--text-primary); }
.fc-roster-go {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  color: var(--accent-purple); letter-spacing: .04em;
  opacity: 0; transition: opacity .14s ease;
}
.fc-roster-table .fc-roster-row:hover .fc-roster-go,
.fc-roster-table .fc-roster-row:focus-visible .fc-roster-go { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   RESIDENT PROFILE PAGE
   Reachable from Roster → click any row. Modern, sharp grid layout
   with stat cards, attempt list, and concept-mastery bars.
   ══════════════════════════════════════════════════════════════ */
.rp-page { display: flex; flex-direction: column; gap: 1.1rem; margin-top: .55rem; }
.fc-resident-loading {
  padding: 1.4rem; text-align: center; color: var(--text-dim); font-size: .85rem;
}

/* Header — avatar circle + name + chips + last-activity stamp */
.rp-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem; align-items: center;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(59,130,246,.06) 70%, transparent);
  border: 1px solid rgba(168,85,247,.25);
  border-radius: 14px;
}
.rp-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent-purple), #6366f1);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(168,85,247,.35);
  flex-shrink: 0;
}
.rp-id { min-width: 0; }
.rp-name-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rp-name {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.32rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.rp-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  padding: .2rem .45rem;
  border-radius: 999px;
}
.rp-tag-faculty {
  background: rgba(245,158,11,.16);
  color: var(--accent-amber);
  border: 1px solid rgba(245,158,11,.4);
}
.rp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.rp-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,transform .12s ease,opacity .12s ease;
}
.rp-chip.rp-chip-static { cursor: default; }
.rp-chip:not(.rp-chip-static):hover { border-color: var(--accent-purple); color: var(--accent-purple); }
.rp-chip.rp-chip-active {
  background: rgba(168,85,247,.16);
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}
.rp-last-activity { text-align: right; }
.rp-last-activity-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
}
.rp-last-activity-val {
  margin-top: .15rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem; font-weight: 700;
  color: var(--text-primary);
}

/* Stat-card row — four equal cards, each with its own accent */
.rp-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .65rem;
}
.rp-stat {
  position: relative;
  padding: .85rem .95rem .8rem .95rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.rp-stat::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent-purple);
}
.rp-stat-primary::before { background: var(--accent-purple); }
.rp-stat-score::before   { background: var(--accent-blue);   }
.rp-stat-strong::before  { background: var(--accent-green);  }
.rp-stat-weak::before    { background: var(--accent-red);    }
.rp-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.rp-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
}
.rp-stat-val {
  margin-top: .15rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.7rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: .45rem;
}
.rp-stat-sub {
  margin-top: .1rem;
  font-size: .68rem; color: var(--text-secondary); line-height: 1.35;
}
.rp-trend {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: .12rem .4rem; border-radius: 999px;
}
.rp-trend-up   { background: rgba(34,197,94,.16); color: var(--accent-green); }
.rp-trend-down { background: rgba(239,68,68,.16); color: var(--accent-red);   }
.rp-trend-flat { background: rgba(148,163,184,.16); color: var(--text-secondary); }

/* Two-column body grid — attempts list (wider) + mastery profile */
.rp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: .8rem;
}
@media (max-width: 880px) {
  .rp-grid { grid-template-columns: 1fr; }
}
.rp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem 1rem 1rem 1rem;
}
.rp-card-head { margin-bottom: .55rem; }
.rp-card-head h3 {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: .92rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.005em;
}
.rp-card-sub {
  margin-top: .12rem;
  font-size: .68rem; color: var(--text-dim);
}
.rp-card-tests { margin-top: 1rem; }
/* The "View post-rotation score history" CTA tile inside a resident profile. */
.rp-tests-open {
  width: 100%; display: flex; align-items: center; gap: .7rem; text-align: left;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px;
  padding: .7rem .85rem; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, transform .1s;
}
.rp-tests-open:hover { background: var(--bg-card); border-color: var(--accent-cyan); transform: translateY(-1px); }
.rp-tests-open-icon { font-size: 1.2rem; flex: 0 0 auto; }
.rp-tests-open-main { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.rp-tests-open-title { font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.rp-tests-open-sub { font-size: .66rem; color: var(--text-dim); }
.rp-tests-open-arrow { flex: 0 0 auto; color: var(--accent-cyan); font-weight: 800; font-size: 1rem; }

/* Filter-chip row above the attempts list */
.rp-filter-row {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .6rem;
}

/* Attempts list — each row is a button-styled card */
.rp-attempts { display: flex; flex-direction: column; gap: .4rem; }
.rp-attempt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: .9rem;
  width: 100%;
  padding: .65rem .8rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
  color: var(--text-primary);
}
.rp-attempt:hover {
  border-color: var(--accent-purple);
  background: rgba(168,85,247,.06);
  transform: translateX(1px);
}
.rp-attempt-left { min-width: 0; }
.rp-attempt-title-row {
  display: flex; flex-wrap: wrap; gap: .35rem;
  align-items: center;
}
.rp-attempt-st {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  padding: .15rem .45rem;
  border-radius: 6px;
  background: rgba(168,85,247,.14);
  color: var(--accent-purple);
}
.rp-attempt-spec {
  font-size: .68rem;
  color: var(--text-secondary);
}
.rp-attempt-meta {
  display: flex; flex-wrap: wrap; gap: .25rem .35rem;
  margin-top: .25rem;
  font-size: .68rem;
  color: var(--text-dim);
}
.rp-attempt-missed { color: var(--accent-red); font-weight: 700; }
.rp-attempt-right { display: flex; align-items: center; gap: .8rem; }
.rp-attempt-score {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.5rem; font-weight: 800;
  width: 2.6rem; text-align: center;
  letter-spacing: -.02em;
}
.rp-score-strong { color: var(--accent-green); }
.rp-score-mid    { color: var(--accent-amber); }
.rp-score-low    { color: var(--accent-red);   }
.rp-score-na     { color: var(--text-dim);     }
.rp-attempt-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: .04em;
}

/* Phase 9 read-receipt badge on each attempt row */
.rp-attempt-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 999px;
  margin-left: auto;
}
.rp-attempt-badge-unread {
  background: rgba(168,85,247,.18);
  color: var(--accent-purple);
  border: 1px solid rgba(168,85,247,.5);
  box-shadow: 0 0 0 0 rgba(168,85,247,.35);
  animation: rpUnreadPulse 2.6s ease-in-out infinite;
}
@keyframes rpUnreadPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
  50%      { box-shadow: 0 0 0 4px rgba(168,85,247,.18); }
}
.rp-attempt-badge-reviewed {
  background: var(--bg-card);
  color: var(--text-dim);
  border: 1px solid var(--border);
  font-weight: 600; letter-spacing: .04em;
  text-transform: none;
}
/* A subtle left-edge marker on unread rows so they pop in a long list */
.rp-attempt.rp-attempt-unread {
  border-left: 3px solid var(--accent-purple);
  padding-left: calc(.8rem - 2px);
}

/* Aggregate unread pill that sits next to the "Assigned attempts" heading */
.rp-unread-pill {
  display: inline-block;
  margin-left: .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: rgba(168,85,247,.16);
  color: var(--accent-purple);
  border: 1px solid rgba(168,85,247,.4);
  vertical-align: middle;
}

/* Mastery panel — strengths above weaknesses, each a labeled progress bar */
.rp-mastery-section + .rp-mastery-section { margin-top: .9rem; }
.rp-mastery-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: .4rem;
}
.rp-mastery-head-strong { color: var(--accent-green); }
.rp-mastery-head-weak   { color: var(--accent-red);   }
.rp-mastery-empty {
  margin: 0; font-size: .72rem; color: var(--text-dim);
}
.rp-concept {
  margin-bottom: .45rem;
}
.rp-concept-head {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .72rem;
  margin-bottom: .2rem;
}
.rp-concept-name { color: var(--text-primary); font-weight: 600; }
.rp-concept-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; color: var(--text-dim); white-space: nowrap;
}
.rp-concept-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 999px;
  overflow: hidden;
}
.rp-concept-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .35s ease;
}
.rp-concept-fill-strong {
  background: linear-gradient(90deg, var(--accent-green), #34d399);
}
.rp-concept-fill-weak {
  background: linear-gradient(90deg, var(--accent-red), #fb7185);
}

/* Learner-side: per-row visibility badge on the Assigned-to-me card */
.atm-row-vis { margin-top:.3rem; }
.atm-badge {
  display:inline-block;
  font-size:.72rem; font-weight:700;
  padding:.18rem .5rem; border-radius:999px;
  background: rgba(234,179,8,.14);
  color: var(--accent-amber);
  border: 1px solid rgba(234,179,8,.4);
  letter-spacing:.02em;
}
.atm-badge.atm-badge-private {
  background: rgba(168,85,247,.14);
  color: var(--accent-purple);
  border-color: rgba(168,85,247,.4);
}

/* Transcript view */
.fc-tx-context {
  display:flex; gap:.6rem; align-items:flex-start;
  background: rgba(234,179,8,.08);
  border: 1px solid rgba(234,179,8,.3);
  border-radius: 8px;
  padding: .6rem .8rem;
  margin-top:.4rem;
  font-size:.78rem; color: var(--text-secondary); line-height:1.5;
}
.fc-tx-context-icon { font-size:1.1rem; flex-shrink:0; }
.fc-tx-grid {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top:.7rem;
}
.fc-tx-card {
  background: var(--bg-card);
  border:1px solid var(--border);
  border-radius: 8px;
  padding:.5rem .65rem;
}
.fc-tx-card-label {
  font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--text-dim);
}
.fc-tx-card-val {
  font-size:.95rem; font-weight:700; color: var(--text-primary);
  margin-top:.15rem; font-family:'JetBrains Mono', monospace;
}
.fc-tx-section {
  margin-top: 1.1rem;
}
.fc-tx-section h4 {
  font-size:.75rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--text-dim);
  margin: 0 0 .4rem 0;
}
.fc-tx-pill-row {
  display:flex; flex-wrap:wrap; gap:.35rem;
  margin-bottom:.3rem;
}
.fc-tx-pill-row span {
  font-size:.7rem; padding:.25rem .55rem;
  border-radius:999px;
}
.fc-tx-pill-hit  span { background: rgba(34,197,94,.12); color: var(--accent-green); border:1px solid rgba(34,197,94,.3); }
.fc-tx-pill-miss span { background: rgba(239,68,68,.10); color: var(--accent-red);   border:1px solid rgba(239,68,68,.3); }
.fc-tx-conv {
  display:flex; flex-direction:column; gap:.5rem;
  background: var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.7rem;
  max-height: 600px; overflow-y: auto;
}
.fc-tx-msg { padding:.55rem .7rem; border-radius:8px; }
.fc-tx-msg-who {
  font-size:.68rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:700;
  margin-bottom:.2rem;
}
.fc-tx-msg-body { font-size:.78rem; line-height:1.55; color: var(--text-primary); }
.fc-tx-msg-user { background: rgba(6,182,212,.06); border-left:3px solid var(--accent-cyan); }
.fc-tx-msg-user .fc-tx-msg-who { color: var(--accent-cyan); }
.fc-tx-msg-ai   { background: rgba(168,85,247,.05); border-left:3px solid var(--accent-purple); }
.fc-tx-msg-ai .fc-tx-msg-who { color: var(--accent-purple); }
.fc-tx-debrief {
  white-space:pre-wrap;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .7rem .85rem;
  font-size:.78rem; line-height:1.6;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 5 — "Assigned to me" landing card
   ══════════════════════════════════════════════════════════════ */
.atm-card {
  background: var(--bg-card);
  border: 1px solid rgba(234,179,8,.3);
  border-radius: 10px;
  padding: .85rem .95rem;
  box-shadow: 0 2px 10px rgba(234,179,8,.08);
}
.atm-card-hdr {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.55rem; gap:.55rem; flex-wrap:wrap;
}
.atm-card-eyebrow {
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; font-weight:700;
  letter-spacing:.08em;
  color: var(--accent-amber);
}
.atm-card-count { font-size:.72rem; color: var(--text-dim); }
.atm-card-list { display:flex; flex-direction:column; gap:.45rem; }
.atm-row {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:.55rem;
  padding:.5rem .65rem;
  border:1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.atm-row-done { opacity:.7; }
.atm-row-main { flex: 1; min-width: 0; }
.atm-row-title { font-size:.82rem; font-weight:600; color: var(--text-primary); }
.atm-row-meta {
  font-size:.72rem; color: var(--text-dim);
  margin-top:.15rem;
  display:flex; gap:.35rem; flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.04em;
}
.atm-row-done-pill {
  background: rgba(34,197,94,.12); color: var(--accent-green);
  padding: 0 .5rem; border-radius:999px; font-size:.68rem;
}
.atm-row-notes {
  font-size:.7rem; color: var(--text-secondary);
  line-height:1.45; margin-top:.3rem;
}
.atm-launch-btn {
  font-size:.72rem; font-weight:600;
  padding:.4rem .65rem;
  border-radius:6px;
  border:1px solid var(--accent-amber);
  background: rgba(234,179,8,.1);
  color: var(--accent-amber);
  cursor:pointer;
  white-space: nowrap;
}
.atm-card-footer {
  display:flex; align-items:center; gap:.45rem;
  margin-top:.7rem;
  font-size:.72rem; color: var(--text-dim);
  line-height:1.5;
}
.atm-badge {
  background: rgba(234,179,8,.12); color: var(--accent-amber);
  padding:.2rem .5rem; border-radius:999px;
  font-weight:700; letter-spacing:.04em;
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  flex-shrink:0;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 6 — Faculty Insights tab
   ══════════════════════════════════════════════════════════════ */
.fc-insights-loading {
  padding: 1.5rem; text-align: center; color: var(--text-dim);
  font-size: .8rem;
}
.fc-insights-banner {
  display:flex; gap:.6rem; align-items:flex-start;
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 8px;
  padding: .65rem .8rem;
  margin-bottom: .8rem;
  font-size: .75rem; line-height: 1.5;
  color: var(--text-secondary);
}
.fc-insights-banner-icon { font-size: 1rem; flex-shrink: 0; }
.fc-insights-banner strong { color: var(--text-primary); }
.fc-empty-callout {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-size: .82rem;
  line-height: 1.55;
}
.fc-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.fc-insights-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem .9rem;
}
.fc-insights-panel-wide { grid-column: 1 / -1; }
.fc-insights-panel-hdr {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom: .55rem; gap: .55rem; flex-wrap: wrap;
}
.fc-insights-panel-hdr h4 {
  margin: 0; font-size: .88rem; color: var(--text-primary);
}
.fc-insights-panel-sub {
  font-size: .68rem; color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em;
}
.fc-insights-refresh-row {
  display:flex; justify-content:space-between; align-items:center;
  margin-top: .75rem; gap: .55rem;
  font-size: .68rem; color: var(--text-dim);
}
.fc-insights-stamp { font-family: 'JetBrains Mono', monospace; }

/* Completion rate rows */
.fc-completion-list { display: flex; flex-direction: column; gap: .55rem; }
.fc-completion-row {
  padding: .5rem .55rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fc-completion-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .35rem; gap: .5rem; flex-wrap: wrap;
}
.fc-completion-title {
  font-size: .8rem; font-weight: 600; color: var(--text-primary);
}
.fc-completion-meta {
  font-size: .72rem; color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
}
.fc-completion-overdue { color: #ef4444; font-weight: 700; }
.fc-completion-bar-wrap {
  height: 6px; background: var(--bg-primary);
  border-radius: 999px; overflow: hidden;
}
.fc-completion-bar { height: 100%; transition: width .25s ease; }
.fc-completion-bar-good { background: var(--accent-green); }
.fc-completion-bar-mid  { background: #f59e0b; }
.fc-completion-bar-low  { background: #ef4444; }
.fc-completion-bar-na   { background: var(--border); }
.fc-completion-row-bottom {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--text-dim);
  margin-top: .3rem;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
}

/* Most-missed critical actions */
.fc-missed-list { display: flex; flex-direction: column; gap: .55rem; }
.fc-missed-row {
  padding: .5rem .55rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fc-missed-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem;
}
.fc-missed-action {
  font-size: .78rem; font-weight: 600; color: var(--text-primary);
  min-width: 0; word-break: break-word;
}
.fc-missed-pct {
  font-size: .68rem; color: #ef4444; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
.fc-missed-bar-wrap {
  height: 5px; background: var(--bg-primary);
  border-radius: 999px; overflow: hidden;
}
.fc-missed-bar { height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.fc-missed-row-bottom {
  font-size: .7rem; color: var(--text-dim);
  margin-top: .25rem;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
}

/* Heatmap */
.fc-heatmap-wrap { overflow-x: auto; }
.fc-heatmap {
  width: 100%; border-collapse: separate; border-spacing: 2px;
  font-size: .68rem; min-width: 480px;
}
.fc-heatmap th {
  font-weight: 600; color: var(--text-secondary);
  padding: .35rem .25rem;
  font-size: .72rem;
  text-align: center;
}
.fc-heatmap th.fc-heatmap-level {
  text-align: left; padding-left: .35rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.fc-heatmap th.fc-heatmap-concept {
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; min-height: 60px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace; letter-spacing: .04em;
  font-size: .68rem;
}
.fc-heatmap-cell {
  width: 36px; height: 30px; text-align: center;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  cursor: default;
}
.fc-heatmap-good  { background: rgba(34,197,94,.55); }
.fc-heatmap-ok    { background: rgba(132,204,22,.55); color: #0a0a0a; }
.fc-heatmap-warn  { background: rgba(245,158,11,.65); color: #0a0a0a; }
.fc-heatmap-bad   { background: rgba(239,68,68,.7); }
.fc-heatmap-empty { background: var(--bg-secondary); border: 1px dashed var(--border); }
.fc-heatmap-legend {
  display: flex; gap: .9rem; flex-wrap: wrap;
  margin-top: .55rem;
  font-size: .72rem; color: var(--text-dim);
  align-items: center;
}
.fc-heatmap-legend .fc-heatmap-cell {
  display: inline-block; width: 16px; height: 12px;
  vertical-align: middle; margin-right: .25rem;
}

@media (max-width: 720px) {
  .fc-insights-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 6 — Learner "How you compare" benchmark card
   ══════════════════════════════════════════════════════════════ */
.lb-card {
  background: var(--bg-card);
  border: 1px solid rgba(59,130,246,.3);
  border-radius: 10px;
  padding: .9rem 1rem;
  box-shadow: 0 2px 10px rgba(59,130,246,.08);
}
.lb-card-hdr {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom: .35rem; gap: .55rem; flex-wrap: wrap;
}
.lb-card-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  color: #60a5fa;
}
.lb-card-count { font-size: .7rem; color: var(--text-dim); }
.lb-card-sub {
  font-size: .72rem; color: var(--text-secondary);
  line-height: 1.5; margin-bottom: .7rem;
}
.lb-card-sub strong { color: var(--text-primary); }
.lb-twocol {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .65rem;
}
.lb-col {
  padding: .55rem .6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.lb-col-strengths { border-color: rgba(34,197,94,.28); }
.lb-col-opps      { border-color: rgba(239,68,68,.28); }
.lb-col-hdr {
  font-size: .72rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: .45rem;
}
.lb-col-empty {
  font-size: .68rem; color: var(--text-dim);
  font-style: italic; padding: .35rem .15rem;
}
.lb-bench-row { margin-bottom: .55rem; }
.lb-bench-row:last-child { margin-bottom: 0; }
.lb-bench-row-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .35rem;
  margin-bottom: .25rem;
}
.lb-bench-concept {
  font-size: .74rem; font-weight: 600; color: var(--text-primary);
  min-width: 0; word-break: break-word;
}
.lb-bench-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 700;
  white-space: nowrap;
}
.lb-bench-delta-pos { color: var(--accent-green); }
.lb-bench-delta-neg { color: #ef4444; }
.lb-bench-row-bars {
  display: flex; flex-direction: column; gap: .2rem;
}
.lb-bench-bar-row {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
}
.lb-bench-bar-wrap {
  height: 5px; background: var(--bg-primary);
  border-radius: 999px; overflow: hidden;
}
.lb-bench-bar { height: 100%; }
.lb-bench-bar-mine   { background: #60a5fa; }
.lb-bench-bar-cohort { background: var(--text-dim); opacity: .6; }
.lb-bench-bar-val { text-align: right; }
.lb-bench-row-meta {
  font-size: .68rem; color: var(--text-dim);
  margin-top: .2rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .03em;
}
.lb-empty {
  font-size: .72rem; color: var(--text-secondary);
  line-height: 1.5;
  padding: .55rem .65rem;
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.lb-personal-details {
  margin-top: .7rem;
  font-size: .7rem;
  color: var(--text-secondary);
}
.lb-personal-details summary {
  cursor: pointer; padding: .25rem 0;
  color: var(--text-dim);
}
.lb-personal-list {
  list-style: none; padding: .35rem 0 0 0; margin: 0;
  display: flex; flex-direction: column; gap: .25rem;
}
.lb-personal-list li {
  display: flex; justify-content: space-between; gap: .45rem;
  padding: .3rem .45rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .68rem;
}
.lb-personal-concept { color: var(--text-primary); font-weight: 500; }
.lb-personal-stat { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.lb-card-footer {
  display:flex; align-items:flex-start; gap:.45rem;
  margin-top: .7rem;
  font-size: .72rem; color: var(--text-dim);
  line-height: 1.5;
}
.lb-card-badge {
  background: rgba(59,130,246,.12); color: #60a5fa;
  padding: .2rem .5rem; border-radius: 999px;
  font-weight: 700; letter-spacing: .04em;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 580px) {
  .lb-twocol { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PATHOPHYSIOLOGY — bold the "Clinically:" takeaway line
   The body of each concept is split into one rendered row per
   '\n' in the source string. renderConcept() in physiology.js
   tags any line beginning with "Clinically" with this class so
   the bedside takeaway jumps out from the mechanism above it.
   We use 600 (not full bold) + slightly stronger color so the
   line reads as emphasized without screaming.
   ══════════════════════════════════════════════════════════════ */
.phys-concept-line.phys-clinically {
  font-weight: 600;
  color: var(--text-primary);
  /* Promote the bedside takeaway from an inline emphasized line to a distinct
     callout block — amber left-accent + faint tint — so the eye separates
     "what to do at the bedside" from the mechanism above it. Amber is reserved
     for this across every system (green = countermeasures), so the bedside
     callout reads consistently regardless of the organ's accent color. */
  margin-top: .5rem;
  padding: .4rem .65rem;
  border-left: 3px solid #f59e0b;
  background: rgba(245, 158, 11, .08);
  border-radius: 0 5px 5px 0;
}
/* The leading "Clinically:" word itself is wrapped in <strong> so it
   renders fully bold (700+) and pops as the visual anchor of the bedside
   callout — the surrounding line is only semi-bold for contrast. */
.phys-concept-line.phys-clinically .phys-clin-leadin {
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: .01em;
}

/* ══════════════════════════════════════════════════════════════
   LIBRARY SUBSECTION HEADERS — sized slightly larger than body
   Library pages use small uppercase monospace labels (e.g. "V/Q
   MISMATCH VS SHUNT VS DEAD SPACE" on Pathophysiology, "WATCH
   FOR" on Medicine-Surgery, "HIGH" on Labs Explained). Body text
   across library pages runs .72–.78rem; we bump the subsection
   headers up so the eye lands on them first and scanning gets
   easier.

   One unified override block is the single point of edit — when
   you add a new library page, append its subsection-label class
   to the selector list below and it inherits the bump for free.

   Pages covered:
     - Clinical Pathophysiology (phys-*)
     - Clinical Pocket Guide / Outpatient Guidelines (guide-*, mgh-*)
     - Orders and order sets (co-*)
     - Medicine-Surgery (ms-*)
     - Labs Explained (le-*)
     - Shock & Hemodynamics (shock-*)
     - Advanced Topics (at-*)
     - Procedures (proc-*)
     - Radiology (re-*)
     - Physical Exam (pe-*, cp-*)
     - Clinical Trials (trial-*)
   ══════════════════════════════════════════════════════════════ */
.phys-concept-label,
.phys-cm-header,
.phys-organ-title,
.shock-sub-title,
.shock-type-title,
.le-side-hdr,
.le-section-hdr,
.le-consider-label,
.le-detail-group-label,
.ms-content-hdr,
.ms-card-title,
.at-item-title,
.at-sub-label,
.co-category-hdr,
.co-sublabel,
.mgh-section-hdr,
.pe-section-title,
.pe-collapse-title,
.cp-row-label,
.pe-row-label,
.guide-detail-hdr,
.guide-card-title,
.guide-pearl-hdr,
.guide-addendum-hdr,
.proc-section-lbl,
.re-side-hdr,
.trial-summary-label,
.trial-takeaway-label {
  font-size: .84rem;
}
/* Some labels live inside card headers / accordions where line
   wrapping at the new size would feel cramped — give them
   slightly more vertical breathing room. */
.phys-concept-label,
.shock-sub-title,
.ms-content-hdr,
.le-side-hdr,
.le-consider-label,
.at-sub-label,
.guide-pearl-hdr,
.guide-addendum-hdr,
.proc-section-lbl,
.trial-summary-label,
.trial-takeaway-label {
  line-height: 1.35;
}

/* ══════════════════════════════════════════════════════════════
 * FEDERATED LIBRARY SEARCH — results rendered in #lib-hub-content-results
 * when the hub search input has ≥2 characters. Tiles are hidden while
 * the results are visible (see ui.js filterLibHub).
 * Visual language mirrors the rest of the library: section banner +
 * card rows + a small "+N more" footer. Uses --lib-fed-accent on the
 * section to color-code each group.
 * ══════════════════════════════════════════════════════════════ */
.lib-fed-loading {
  font-size:.78rem; color:var(--text-dim); padding:1rem .5rem; text-align:center;
  font-family:'DM Sans',sans-serif;
}
.lib-fed-empty {
  font-size:.8rem; color:var(--text-secondary); padding:1.2rem .8rem; text-align:center;
  font-family:'DM Sans',sans-serif; border:1px dashed var(--border); border-radius:10px;
  background:var(--bg-card);
}
.lib-fed-header {
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  padding:.5rem .55rem .5rem;
  margin-bottom:.4rem; border-bottom:1.5px solid var(--accent-cyan);
  background:linear-gradient(180deg,rgba(6,182,212,.08),transparent);
  border-radius:8px 8px 0 0;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--text-dim);
  letter-spacing:.06em; text-transform:uppercase;
}
.lib-fed-header-main { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; min-width:0; }
.lib-fed-header-title { color:var(--accent-cyan); font-weight:800; letter-spacing:.08em; }
.lib-fed-header-count { color:var(--accent-cyan); font-weight:700; }
.lib-fed-header-q { font-family:'DM Sans',sans-serif; text-transform:none; letter-spacing:0; font-size:.72rem; color:var(--text-secondary); }
.lib-fed-simulate {
  flex:0 0 auto; border:1.5px solid var(--accent-purple); background:rgba(168,85,247,.08);
  color:var(--accent-purple); border-radius:8px; padding:.35rem .7rem;
  font-family:'DM Sans',sans-serif; font-size:.72rem; font-weight:700; text-transform:none; letter-spacing:0;
  cursor:pointer; transition:background .15s,box-shadow .15s;
}
.lib-fed-simulate:hover { background:rgba(168,85,247,.16); box-shadow:0 2px 8px rgba(168,85,247,.15); }
.lib-fed-section {
  margin-bottom:.85rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-card);
  overflow:hidden;
}
.lib-fed-section-hdr {
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem;
  background:linear-gradient(180deg, color-mix(in srgb, var(--lib-fed-accent) 14%, transparent), color-mix(in srgb, var(--lib-fed-accent) 4%, transparent));
  border-bottom:1px solid var(--border);
  border-left:3px solid var(--lib-fed-accent);
}
.lib-fed-section-icon { font-size:.95rem; line-height:1; }
.lib-fed-section-name { font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; color:var(--lib-fed-accent); letter-spacing:.04em; }
.lib-fed-section-count { margin-left:auto; font-size:.68rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.lib-fed-rows { display:flex; flex-direction:column; gap:1px; background:var(--border); }
.lib-fed-row {
  display:flex; flex-direction:column; gap:.18rem;
  width:100%; text-align:left;
  background:var(--bg-card); border:none;
  padding:.55rem .8rem;
  cursor:pointer; transition:background .12s;
  font-family:'DM Sans',sans-serif;
}
.lib-fed-row:hover { background:var(--bg-card-hover); }
.lib-fed-row-title {
  font-size:.78rem; font-weight:600; color:var(--text-primary);
}
.lib-fed-crumb {
  font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--text-dim);
  letter-spacing:.04em; text-transform:uppercase;
}
.lib-fed-snippet {
  font-size:.72rem; color:var(--text-secondary); line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.lib-fed-mark { background:rgba(250,204,21,.28); color:inherit; padding:0 1px; border-radius:2px; }
.lib-fed-more {
  font-size:.7rem; color:var(--text-dim);
  padding:.4rem .8rem; text-align:right;
  border-top:1px solid var(--border); background:var(--bg-card);
}

/* ══════════════════════════════════════════════════════════════
 * CONSULTS PREVIEW — "what lives here" row under each specialty
 * banner, visible BEFORE the user expands.
 * ══════════════════════════════════════════════════════════════ */
.cp-spec-preview {
  margin:-.2rem 0 .55rem;
  padding:.45rem .65rem .5rem;
  border:1px dashed var(--border);
  border-radius:8px;
  background:var(--bg-card);
  display:flex; flex-direction:column; gap:.35rem;
}
.cp-spec-preview-summary {
  font-size:.7rem; color:var(--text-secondary); line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-family:'DM Sans',sans-serif;
}
.cp-spec-preview-chips { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.cp-spec-preview-chip {
  padding:.22rem .55rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:transparent;
  font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:600;
  letter-spacing:.02em;
  cursor:pointer; transition:background .12s, transform .08s;
  max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cp-spec-preview-chip:hover { background:rgba(127,127,127,.08); }
.cp-spec-preview-chip:active { transform:scale(.97); }
.cp-spec-preview-more {
  font-size:.68rem; color:var(--text-dim); font-style:italic;
  font-family:'DM Sans',sans-serif;
}

/* ══════════════════════════════════════════════════════════════
 * CLINICAL TRIALS — bedside-relevance framing
 * Hero above the cards, per-group framing, and a prominent
 * pre-expansion takeaway line on every trial card.
 * ══════════════════════════════════════════════════════════════ */
.trials-hero {
  margin:.2rem 0 1rem;
  padding:.85rem 1rem .95rem;
  border:1px solid var(--border);
  border-left:3px solid var(--trials-hero-accent, var(--accent-purple));
  border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--trials-hero-accent, var(--accent-purple)) 9%, transparent), color-mix(in srgb, var(--trials-hero-accent, var(--accent-purple)) 2%, transparent));
}
.trials-hero-kicker {
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--trials-hero-accent, var(--accent-purple));
  margin-bottom:.2rem;
}
.trials-hero-title {
  font-family:'DM Sans',sans-serif;
  font-size:1rem; font-weight:700; margin:0 0 .25rem;
  color:var(--text-primary);
}
.trials-hero-body {
  margin:0; font-size:.74rem; color:var(--text-secondary); line-height:1.5;
}
.trials-group-framing {
  margin:.15rem 0 .6rem;
  padding:.5rem .65rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:color-mix(in srgb, var(--trials-group-accent, var(--accent-purple)) 5%, var(--bg-card));
}
.trials-group-framing-label {
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--trials-group-accent, var(--accent-purple));
  margin-bottom:.2rem;
}
.trials-group-framing-list {
  margin:0; padding-left:1rem;
  font-size:.72rem; color:var(--text-secondary); line-height:1.5;
}
.trials-group-framing-list li { margin:.1rem 0; }
.trials-group-trial {
  font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700;
  color:var(--text-primary); margin-right:.2rem;
}
.trial-card-hdr-main { display:flex; flex-direction:column; gap:.25rem; min-width:0; }
.trial-takeaway-preview {
  display:flex; flex-direction:column; gap:.1rem;
  margin-top:.2rem;
  padding:.35rem .55rem;
  border-radius:6px;
  border-left:2px solid var(--trial-preview-accent, var(--accent-purple));
  background:color-mix(in srgb, var(--trial-preview-accent, var(--accent-purple)) 6%, transparent);
}
.trial-takeaway-preview-label {
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--trial-preview-accent, var(--accent-purple));
}
.trial-takeaway-preview-text {
  font-size:.72rem; color:var(--text-primary); line-height:1.45;
  /* No line-clamp: the full bedside takeaway must be readable on every
     collapsed card — trial acronyms alone aren't informative enough to
     decide whether to expand. */
}

/* ══════════════════════════════════════════════════════════════
 * WIDER DESKTOP LAYOUTS for the highest-density library pages.
 * Mobile (<= 768px) inherits the existing single-column behavior;
 * these rules only kick in at desktop widths. We override the
 * .ref-page-content > div max-width per page using the body class
 * already set by ui.js showPage().
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  /* Library hub — wider canvas + a 5-column tile grid on extra-wide
     monitors so the tiles read as a true command center instead of a
     narrow 4-up. */
  body.page-library .lib-hub { max-width: 1180px; }
  body.page-library .lib-search-wrap { max-width: 1180px; }
  body.page-library #lib-hub-content-results { max-width: 1180px; margin: 0 auto; }
  /* The federated results region looks better as a 2-column layout
     once we have room — but only when there are several sections. */
  body.page-library #lib-hub-content-results > .lib-fed-section {
    /* keep single column to preserve reading rhythm */
  }
  body.page-advanced-topics .ref-page-content > div,
  body.page-consults-playbooks .ref-page-content > div,
  body.page-clinical-trials .ref-page-content > div,
  body.page-clinical-scores .ref-page-content > div,
  body.page-outpatient .ref-page-content > div,
  body.page-palliation-explained .ref-page-content > div,
  body.page-medsurg .ref-page-content > div {
    max-width: 1180px;
  }
  /* ID-level overrides — see comment at the 1400px breakpoint. */
  body.page-advanced-topics #at-nav,
  body.page-advanced-topics #at-sections,
  body.page-advanced-topics #at-detail,
  body.page-consults-playbooks #consults-playbooks-content,
  body.page-consults-playbooks #consults-playbooks-nav,
  body.page-labs-explained #labs-explained-content,
  body.page-labs-explained #labs-explained-nav {
    max-width: 1180px;
  }
  body.page-consults-playbooks #consults-playbooks-content .mgh-lib-card,
  body.page-labs-explained #labs-explained-content .mgh-lib-card {
    max-width: 100%;
  }
}
@media (min-width: 1400px) {
  /* The flat 16-tile library grid stays at 4 columns so the 16 tiles
     read as a clean 4×4. Previously bumped to 5 here, which produced
     a 5-3-5-3 stagger instead of an even grid. */
  body.page-library .lib-hub-grid { grid-template-columns: repeat(4, 1fr); }
  body.page-library .lib-hub { max-width: 1320px; }
  body.page-library .lib-search-wrap { max-width: 1320px; }
  body.page-library #lib-hub-content-results { max-width: 1320px; }
  body.page-advanced-topics .ref-page-content > div,
  body.page-consults-playbooks .ref-page-content > div,
  body.page-clinical-trials .ref-page-content > div,
  body.page-clinical-scores .ref-page-content > div,
  body.page-outpatient .ref-page-content > div,
  body.page-medsurg .ref-page-content > div {
    max-width: 1280px;
  }
  /* Existing ID-based rules pin these inner DIVs to 760px (see
     styles.css lines ~89, ~218, ~1129). Override them at desktop
     widths with id-level specificity so the inner content actually
     fills the wider canvas instead of staying narrow. */
  body.page-advanced-topics #at-nav,
  body.page-advanced-topics #at-sections,
  body.page-advanced-topics #at-detail,
  body.page-consults-playbooks #consults-playbooks-content,
  body.page-consults-playbooks #consults-playbooks-nav,
  body.page-labs-explained #labs-explained-content,
  body.page-labs-explained #labs-explained-nav {
    max-width: 1280px;
  }
  /* The card-inside-content max-width rules also pin to 760px — relax
     them so cards stretch in the wider container. */
  body.page-consults-playbooks #consults-playbooks-content .mgh-lib-card,
  body.page-labs-explained #labs-explained-content .mgh-lib-card {
    max-width: 100%;
  }
  /* ICU overview tile grid: 3 columns once we have the canvas. */
  body.page-advanced-topics .at-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Consults: each open specialty's scenario cards in 2 columns on
     wide screens so the page doesn't feel like a single tall stream. */
  body.page-consults-playbooks .cp-spec-section.open .cp-spec-cards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem;
  }
  /* Trials: the per-subcat card grid in 2 columns too. */
  body.page-clinical-trials .trials-subcat-cards {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem;
  }
}
/* Defensive: never let the 2-column grids apply on narrow viewports
   even if a future rule changes specificity. Mobile must stay simple. */
@media (max-width: 900px) {
  body.page-consults-playbooks .cp-spec-section.open .cp-spec-cards,
  body.page-clinical-trials .trials-subcat-cards {
    display: block;
  }
}

/* ══════════════════════════════════════════════════════════════
 * WORKFLOW-GROUPED LIBRARY HUB
 * Replaces the old flat 16-tile grid with 6 workflow groups
 * (Pocket Guide, Precharting, ICU, Clinic, Evidence, Local).
 * Each group has its own banner, scoped search, and tile grid.
 * --lib-group-accent is set per group in the HTML inline style.
 * ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
 * GLOBAL HUB-WIDE SEARCH — federated across every section.
 * Lives above #lib-hub and is intentionally the most prominent
 * control on the page. When active it hides the entire group
 * stack and renders a single consolidated result list.
 * ══════════════════════════════════════════════════════════════ */
.lib-global-search-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 0 1rem;
}
.lib-global-search-input {
  width: 100%;
  padding: .9rem 1rem;
  padding-left: 2.4rem;
  padding-right: 2.4rem;
  border-radius: 10px;
  border: 2.5px solid var(--accent-cyan);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 12%, transparent),
              0 2px 8px rgba(6,182,212,.10);
}
.lib-global-search-input::placeholder { color: var(--text-dim); }
.lib-global-search-input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-cyan) 25%, transparent),
              0 2px 12px rgba(6,182,212,.18);
}
.lib-global-search-wrap::before {
  content: "🔎";
  position: absolute;
  left: .85rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  pointer-events: none;
  opacity: .75;
}
.lib-global-search-clear {
  position: absolute;
  right: .65rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  line-height: 1;
  display: none;
  border-radius: 4px;
}
.lib-global-search-clear:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.lib-global-search-input:not(:placeholder-shown) + .lib-global-search-clear { display: block; }
.lib-global-search-results {
  width: 100%;
  max-width: 760px;
  display: flex; flex-direction: column; gap: .55rem;
  margin: 0 0 1rem;
}
@media (min-width: 1100px) {
  body.page-library .lib-global-search-wrap,
  body.page-library .lib-global-search-results { max-width: 1180px; }
}
@media (min-width: 1400px) {
  body.page-library .lib-global-search-wrap,
  body.page-library .lib-global-search-results { max-width: 1320px; }
}
/* Tighten left padding on the per-group inputs so the global search
   visually outranks them as the primary search control. */
.lib-group .lib-search-input { padding-left: .65rem; }

.lib-hub { display: flex; flex-direction: column; gap: .85rem; }

/* ── Library layout toggle (Grid vs Sections) ──────────────────────
   Segmented pill control shown at the top of the Library page. Lets
   the user pick between the flat 16-tile grid (default) and the
   workflow-grouped sectioned view. State is persisted in localStorage
   via switchLibLayout() in ui.js. */
.lib-layout-toggle {
  display: flex;
  width: max-content;
  margin: 0 auto .75rem;
  padding: .25rem;
  gap: .25rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
}
.lib-layout-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary, var(--text-primary));
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .03em;
  padding: .45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lib-layout-btn:hover { color: var(--text-primary); }
.lib-layout-btn-active {
  background: var(--accent-cyan);
  color: #0b1220;
  font-weight: 600;
}
.lib-layout-btn-active:hover { color: #0b1220; }

/* ── Library layout slider (sibling of the pill toggle) ───────────
   A draggable bidirectional switch underneath the pill. Same width
   as the pill (set via JS measurement so they always match), click
   anywhere or drag the thumb. Active side icon picks up the cyan
   accent to mirror the pill's active-button styling. */
/* Flex wrap: icon — slider track — icon. The icons sit OUTSIDE the
   track so the thumb never overlaps them. data-layout lives on the
   wrap so the icon color cascades to both icons via simple descendant
   selectors. --slider-pos also lives on the wrap so it cascades into
   the slider; JS overrides it inline on the slider during drag. */
.lib-layout-slider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0 auto .85rem;
  /* JS resizes this to match the pill toggle's outer width so the two
     controls stack with identical left/right edges. Default ~168px
     until JS measures. */
  width: 168px;
  --slider-pos: 0;
}
.lib-layout-slider-wrap[data-layout="custom"] { --slider-pos: 1; }

.lib-layout-slider-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
  user-select: none;
  transition: color .25s ease, transform .25s ease;
}
.lib-layout-slider-icon svg { display: block; }
.lib-layout-slider-wrap[data-layout="browse"]   .lib-layout-slider-icon-left,
.lib-layout-slider-wrap[data-layout="custom"]   .lib-layout-slider-icon-right {
  color: var(--accent-cyan);
  transform: scale(1.18);
}

.lib-layout-slider {
  position: relative;
  /* flex-fills the wrap after icons + gaps. The wrap itself is sized
     to match the pill toggle above, so the slider's effective width
     is (pill width - 2*icon width - 2*gap). */
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  cursor: pointer;
  user-select: none;
  /* touch-action: none keeps horizontal drags from falling through to
     the browser's scroll detector on touch devices — without it,
     left-direction drags feel "sticky". */
  touch-action: none;
  transition: border-color .2s ease, background .2s ease;
}
.lib-layout-slider:hover { border-color: var(--accent-cyan); }
.lib-layout-slider:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.lib-layout-slider-thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  /* Travel: 3px padding on each side keeps the thumb from kissing
     the rounded border. The thumb is the only thing inside the
     track now (icons are siblings), so there's no overlap concern. */
  left: calc(3px + var(--slider-pos) * (100% - 28px));
  transition: left .35s cubic-bezier(0.34, 1.56, 0.64, 1), transform .15s ease, box-shadow .15s ease;
  z-index: 2;
  pointer-events: none;
}
.lib-layout-slider.is-dragging .lib-layout-slider-thumb {
  transition: transform .15s ease;
  transform: scale(1.1);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
}
.lib-layout-slider.is-dragging { cursor: grabbing; }

/* The flat 16-tile container behaves like the legacy hub layout —
   no internal section borders, just a single grid. */
.lib-hub-flat { gap: 0; }
.lib-hub-flat .lib-hub-grid { grid-auto-rows: 1fr; }
.lib-group {
  border: 2px solid var(--lib-group-accent, var(--accent-cyan));
  border-radius: 12px;
  background: var(--bg-card);
  padding: .75rem .9rem;
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  grid-auto-rows: auto;
  gap: .55rem .75rem;
  align-items: stretch;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* Standalone Pocket Guide group: keeps the same bordered treatment;
   the hero tile inside sets it apart. Single-column so the hero tile
   spans the full width without a search bar competing for space. */
.lib-group.lib-group-standalone {
  background: var(--bg-card);
  grid-template-columns: 1fr;
}
/* ── Header tile (now a clickable square-ish card) ───────────── */
.lib-group-hdr {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  border: 1.5px solid var(--lib-group-accent, var(--accent-cyan));
  background: color-mix(in srgb, var(--lib-group-accent) 7%, var(--bg-card));
  cursor: pointer;
  transition: background .15s, transform .08s, box-shadow .15s;
  user-select: none;
  min-height: 64px;
  align-self: stretch;
}
.lib-group-hdr:hover {
  background: color-mix(in srgb, var(--lib-group-accent) 14%, var(--bg-card));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lib-group-accent) 18%, transparent);
}
.lib-group-hdr:active { transform: scale(.99); }
.lib-group.lib-group-standalone .lib-group-hdr {
  grid-column: 1; grid-row: 1;
  cursor: default;
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
}
.lib-group.lib-group-standalone .lib-group-hdr:hover {
  background: transparent;
  box-shadow: none;
}
.lib-group.lib-group-standalone .lib-search-wrap {
  grid-column: 1; grid-row: 2;
  align-self: stretch;
}
.lib-group.lib-group-standalone .lib-group-grid {
  grid-column: 1; grid-row: 3;
}
.lib-group.lib-group-standalone .lib-group-results {
  grid-column: 1; grid-row: 4;
}
.lib-group-hdr-top {
  display: flex; align-items: center; gap: .55rem;
}
.lib-group-icon {
  font-size: 1.05rem; line-height: 1; flex-shrink: 0;
  width: 1.6rem; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--lib-group-accent) 14%, transparent);
}
.lib-group-titles { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; }
.lib-group-title {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .02em;
  color: var(--lib-group-accent);
}
.lib-group-when {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem; color: var(--text-secondary); line-height: 1.35;
}
.lib-group-standalone .lib-group-when {
  font-size: .68rem;
}
/* ── Search bar slot — sits in column 2 next to the header ──── */
.lib-group .lib-search-wrap {
  grid-column: 2; grid-row: 1;
  margin: 0; max-width: none;
  align-self: center;
}
/* ── Collapsed state: hide the inner grid + results ─────────── */
.lib-group-collapsed > .lib-group-grid,
.lib-group-collapsed > .lib-group-results {
  display: none !important;
}
/* Group search bar mirrors the existing .lib-search-wrap pattern but
   sits inside the group container and is scoped via filterLibGroup(). */
.lib-group .lib-search-wrap { margin-bottom: 0; max-width: none; }
.lib-group-grid {
  grid-column: 1 / -1; grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: .45rem;
  margin-top: .25rem;
}
.lib-group-results {
  grid-column: 1 / -1; grid-row: 3;
}
@media (max-width: 1100px) { .lib-group-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .lib-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .lib-group-grid { grid-template-columns: 1fr; } }
/* Inside grouped layout, tiles get tighter padding + smaller fonts
   so a 4-col row of expanded tiles stays scannable without dominating
   the viewport. The legacy flat .lib-hub-grid keeps its original
   .95rem .7rem padding. The Pocket Guide hero tile is excluded. */
.lib-group .lib-hub-tile:not(.lib-hub-tile-hero) {
  padding: .55rem .45rem;
  gap: .35rem;
}
.lib-group .lib-hub-tile:not(.lib-hub-tile-hero) .lht-icon {
  width: 30px; height: 30px;
  font-size: 1rem;
}
.lib-group .lib-hub-tile:not(.lib-hub-tile-hero) .lht-title {
  font-size: .68rem;
}
.lib-group .lib-hub-tile:not(.lib-hub-tile-hero) .lht-desc {
  font-size: .68rem;
  line-height: 1.35;
}
/* Standalone Pocket Guide: one big hero tile that fills the group. */
.lib-group-grid-hero { grid-template-columns: 1fr; }
.lib-hub-tile-hero {
  min-height: 7.2rem;
  padding: 1.1rem 1.3rem;
  border: 2.5px solid var(--accent-green) !important;
  background: color-mix(in srgb, var(--accent-green) 4%, var(--bg-card)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-green) 10%, transparent);
}
.lib-hub-tile-hero:hover {
  border-color: var(--accent-green) !important;
  background: color-mix(in srgb, var(--accent-green) 8%, var(--bg-card)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-green) 18%, transparent),
              0 4px 14px color-mix(in srgb, var(--accent-green) 22%, transparent);
}
.lib-hub-tile-hero .lht-title { font-size: 1.1rem; }
.lib-hub-tile-hero .lht-desc  { font-size: .82rem; max-width: 62ch; line-height: 1.45; }
/* Per-group search results container — uses the existing
   .lib-fed-* classes (federated search visual language) so styling
   stays consistent across the hub. */
.lib-group-results {
  display: flex; flex-direction: column; gap: .55rem;
}

/* Wide-desktop refinements: the group container takes full hub width;
   inside-the-group tile grid can fan out to more columns. */
@media (min-width: 1100px) {
  body.page-library .lib-hub { max-width: 1180px; }
  body.page-library .lib-search-wrap { max-width: none; }
  body.page-library #lib-hub-content-results { max-width: none; }
}
@media (min-width: 1400px) {
  body.page-library .lib-hub { max-width: 1320px; }
  /* At very wide widths, Precharting can go 5-up since it has 8 tiles. */
  body.page-library .lib-group[data-group="precharting"] .lib-group-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════
 * OUTPATIENT — PREVENTIVE CARE & SCREENING (tile → detail)
 * Replaces the previous accordion-card layout on the screening tab.
 * Default view is a grid of clickable tiles (one per guideline).
 * Clicking a tile swaps to a focused detail view with a back button.
 * Other outpatient categories keep their existing layout.
 * ══════════════════════════════════════════════════════════════ */
.screening-grid-intro {
  font-size: .75rem; color: var(--text-secondary);
  margin: .2rem 0 .6rem;
  line-height: 1.45;
}
.screening-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: .55rem;
}
@media (max-width: 1000px) { .screening-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .screening-grid { grid-template-columns: 1fr; } }
.screening-tile {
  display: flex; flex-direction: column; gap: .35rem;
  text-align: left;
  padding: .75rem .85rem;
  /* Full accent-colored border on all four sides — see the in-app design
     direction. The tile reads as "owned" by its category color without the
     left-bar treatment used elsewhere. */
  border: 1.5px solid var(--tile-accent, var(--accent-cyan));
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .12s, transform .08s, box-shadow .12s;
}
.screening-tile:hover {
  background: var(--bg-card-hover);
  /* Border color stays the tile accent on hover too; lift via a soft glow
     so the interaction state is obvious without changing the color. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tile-accent, var(--accent-cyan)) 30%, transparent);
}
.screening-tile:active { transform: scale(.995); }
.screening-tile-hdr {
  display: flex; align-items: center; gap: .5rem;
  justify-content: space-between;
}
.screening-tile-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .01em;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.screening-tile-grade {
  flex-shrink: 0;
  font-size: .68rem; font-weight: 700;
  padding: .12rem .4rem;
  border-radius: 4px;
}
.screening-tile-preview {
  font-size: .72rem; color: var(--text-secondary); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}

/* Detail view — back button + a single focused card */
.screening-back-btn {
  align-self: flex-start;
  margin-bottom: .65rem;
  padding: .35rem .65rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-family: 'DM Sans', sans-serif;
  font-size: .72rem;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.screening-back-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.screening-detail-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--tile-accent, var(--accent-cyan));
  border-radius: 12px;
  background: var(--bg-card);
  padding: 1rem 1.1rem 1.1rem;
}
.screening-detail-hdr {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: .8rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.screening-detail-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem; font-weight: 700;
  letter-spacing: .01em;
}
.screening-detail-grade {
  font-size: .72rem; font-weight: 700;
  padding: .18rem .5rem;
  border-radius: 6px;
}

/* "How to screen" list — used by the colorectal entry and any future
   guideline whose `how` field is an array of strategies. */
.guide-how-list {
  margin: .15rem 0 .55rem;
  padding-left: 1.15rem;
  font-size: .76rem; color: var(--text-secondary); line-height: 1.55;
}
.guide-how-list li {
  margin: .15rem 0;
}
.guide-how-list li::marker { color: var(--guide-accent, var(--text-dim)); }

/* ══════════════════════════════════════════════════════════════
 * CUP OF JOE — simplified reader + archive layout
 * ══════════════════════════════════════════════════════════════ */
:root { --coj-accent: #b48028; }
#cup-of-joe-content { width: 100%; max-width: 1140px; margin: 0 auto; }
.coj-hero {
  margin: .2rem 0 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(180,128,40,.24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(180,128,40,.1), rgba(249,115,22,.04) 62%, rgba(255,255,255,0));
  /* Per user request — every header in the Cup of Joe page is
   * center-aligned. The hero copy, the selected-pearl reader head,
   * and the Archive head all flow through here. text-align cascades
   * to all the descendant text blocks; flex containers below are
   * individually re-centered where needed. */
  text-align: center;
}
.coj-hero-kicker {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--coj-accent);
}
.coj-hero-title {
  margin:.18rem 0 0 0;
  font-size:1.3rem;
  font-weight:800;
  color:var(--text-primary);
  letter-spacing:-.01em;
}
.coj-hero-body {
  margin:.4rem auto 0;       /* auto-center the constrained-width body block */
  max-width:760px;
  font-size:.78rem;
  color:var(--text-secondary);
  line-height:1.55;
}
.coj-hero-stats {
  display:flex;
  justify-content:center;    /* center the stat pills under the hero copy */
  gap:.45rem;
  flex-wrap:wrap;
  margin-top:.7rem;
}
.coj-hero-stat,
.coj-reader-pill,
.coj-archive-chip {
  display:inline-flex;
  align-items:center;
  padding:.2rem .52rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.42);
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--text-secondary);
  text-transform:uppercase;
}
.coj-filters {
  display:flex;
  align-items:flex-end;
  gap:.65rem;
  flex-wrap:wrap;
  margin:.5rem 0 .9rem;
  padding:.65rem .75rem;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-card);
}
.coj-filter-group { display:flex; flex-direction:column; gap:.22rem; }
.coj-filter-label {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.coj-filter-select {
  padding:.42rem .58rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text-primary);
  font-family:'DM Sans', sans-serif;
  font-size:.76rem;
  min-width:160px;
  cursor:pointer;
}
.coj-filter-select:focus { outline:none; border-color:var(--coj-accent); }
.coj-filter-clear,
.coj-nav-btn {
  padding:.42rem .72rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-secondary);
  font-family:'DM Sans', sans-serif;
  font-size:.72rem;
  cursor:pointer;
}
.coj-filter-clear:disabled,
.coj-nav-btn:disabled { opacity:.48; cursor:not-allowed; }
.coj-filter-results {
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  color:var(--text-dim);
  letter-spacing:.05em;
  text-transform:uppercase;
  align-self:flex-end;
}
.coj-filter-spacer { flex:1; }
.coj-add-btn {
  padding:.46rem .88rem;
  border-radius:10px;
  border:1.5px solid var(--coj-accent);
  background:rgba(180,128,40,.1);
  color:var(--coj-accent);
  font-family:'DM Sans', sans-serif;
  font-size:.76rem;
  font-weight:700;
  cursor:pointer;
}
.coj-shell {
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(290px, .82fr);
  gap:.9rem;
  align-items:start;
}
.coj-reader,
.coj-archive,
.coj-upload {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:16px;
}
.coj-reader {
  padding:1rem 1.05rem;
}
/* All header content (kicker, title, meta pills, prev/next nav) is
 * stacked and center-aligned per user request. The reader body
 * paragraphs below the head keep their natural left alignment for
 * readability — only the header chrome is centered. */
.coj-reader-head {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.45rem;
}
.coj-reader-kicker {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--coj-accent);
}
.coj-reader-title {
  margin:0;
  font-size:1.18rem;
  font-weight:800;
  color:var(--text-primary);
  line-height:1.32;
}
.coj-reader-meta {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem;
}
.coj-reader-pill-local {
  border-color:rgba(180,128,40,.26);
  color:var(--coj-accent);
}
.coj-reader-nav {
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:center;
}
.coj-summary {
  margin-top:.85rem;
  padding:.75rem .82rem;
  border:1px solid rgba(180,128,40,.18);
  border-left:3px solid var(--coj-accent);
  border-radius:12px;
  background:rgba(180,128,40,.05);
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.coj-summary-label {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--coj-accent);
}
.coj-summary-text {
  font-size:.8rem;
  color:var(--text-primary);
  line-height:1.55;
}
.coj-reader-body {
  margin-top:.95rem;
  font-size:.82rem;
  color:var(--text-secondary);
  line-height:1.66;
}
.coj-reader-body p { margin:.62rem 0; }
.coj-reader-body strong { color:var(--text-primary); }
.coj-list { margin:.35rem 0 .65rem; padding-left:1.2rem; }
.coj-list li { margin:.15rem 0; }
.coj-figure {
  margin:.95rem 0;
  padding:.45rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-input);
  text-align:center;
}
.coj-figure img { max-width:100%; height:auto; border-radius:8px; display:block; margin:0 auto; }
.coj-figure figcaption {
  margin-top:.4rem;
  font-size:.68rem;
  color:var(--text-dim);
  font-style:italic;
}
.coj-rich { font-size:.8rem; color:var(--text-secondary); line-height:1.62; }
.coj-rich p { margin:.55rem 0; }
.coj-rich h4 { font-size:.88rem; color:var(--text-primary); margin:.92rem 0 .32rem; }
.coj-rich ul, .coj-rich ol { margin:.35rem 0 .65rem; padding-left:1.4rem; }
.coj-rich li { margin:.15rem 0; }
.coj-rich a,
.coj-reader-body a { color:var(--accent-cyan); }
.coj-archive {
  padding:.85rem;
  position:sticky;
  top:1rem;
}
/* Archive head — centered title + subtitle, with the count chip
 * absolutely positioned in the top-right so it doesn't pull the
 * title block off-center. Per user request, the Archive header
 * should sit in the middle of the panel like every other header on
 * this page. */
.coj-archive-head {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.18rem;
  padding:.1rem 2.4rem .65rem;   /* leave right-padding room for the count chip */
  border-bottom:1px solid var(--border);
}
.coj-archive-head > div:first-child {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
}
.coj-archive-head h4 {
  margin:0;
  font-size:.96rem;
  font-weight:800;
  color:var(--text-primary);
}
.coj-archive-head p {
  margin:0;
  font-size:.72rem;
  color:var(--text-secondary);
  line-height:1.45;
}
.coj-archive-head .coj-archive-count {
  position:absolute;
  top:.05rem;
  right:.1rem;
}
.coj-archive-count {
  min-width:1.9rem;
  height:1.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(180,128,40,.1);
  color:var(--coj-accent);
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  font-weight:800;
}
.coj-archive-list {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.7rem;
  max-height:72vh;
  overflow:auto;
  padding-right:.1rem;
}
.coj-archive-item {
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg-secondary);
  padding:.72rem .78rem;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
  color:inherit;
  font-family:'DM Sans', sans-serif;
}
.coj-archive-item:hover {
  border-color:rgba(180,128,40,.3);
  background:rgba(180,128,40,.04);
  transform:translateX(1px);
}
.coj-archive-item.active {
  border-color:rgba(180,128,40,.4);
  background:rgba(180,128,40,.08);
  box-shadow:0 0 0 1px rgba(180,128,40,.12);
}
.coj-archive-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.5rem;
}
.coj-archive-date {
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--coj-accent);
}
.coj-archive-chips {
  display:flex;
  gap:.25rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.coj-archive-title {
  margin-top:.32rem;
  font-size:.86rem;
  font-weight:800;
  color:var(--text-primary);
  line-height:1.35;
}
.coj-archive-byline {
  margin-top:.18rem;
  font-size:.69rem;
  color:var(--text-dim);
  font-family:'JetBrains Mono', monospace;
  letter-spacing:.04em;
}
.coj-archive-preview {
  margin-top:.38rem;
  font-size:.74rem;
  color:var(--text-secondary);
  line-height:1.48;
}
.coj-user-badge {
  display:inline-flex;
  align-items:center;
  padding:.14rem .38rem;
  border-radius:999px;
  background:rgba(180,128,40,.12);
  color:var(--coj-accent);
  border:1px solid rgba(180,128,40,.24);
  font-family:'JetBrains Mono', monospace;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.coj-empty {
  padding:1.3rem 1rem;
  text-align:center;
  color:var(--text-secondary);
  border:1px dashed var(--border);
  border-radius:14px;
  background:var(--bg-card);
  font-size:.78rem;
}
.coj-link-btn {
  background:none;
  border:none;
  padding:0;
  color:var(--coj-accent);
  font-weight:700;
  cursor:pointer;
  font-family:'DM Sans', sans-serif;
  font-size:inherit;
  text-decoration:underline;
}
.coj-upload {
  margin:.2rem 0 1rem;
  padding:.95rem 1rem 1rem;
  border-color:rgba(180,128,40,.28);
  background:rgba(180,128,40,.04);
}
.coj-upload-hdr {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.5rem;
}
.coj-upload-hdr h4 { margin:0; font-size:1rem; color:var(--text-primary); }
.coj-upload-close {
  background:none;
  border:none;
  color:var(--text-dim);
  font-size:1rem;
  cursor:pointer;
  padding:.2rem .4rem;
  border-radius:4px;
}
.coj-upload-close:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.coj-upload-note {
  margin:0 0 .8rem;
  padding:.5rem .65rem;
  font-size:.69rem;
  color:var(--text-secondary);
  line-height:1.5;
  border-radius:8px;
  background:rgba(245,158,11,.08);
  border-left:2px solid var(--accent-amber);
}
.coj-upload-note code {
  font-family:'JetBrains Mono', monospace;
  font-size:.92em;
  background:rgba(0,0,0,.08);
  padding:0 .25rem;
  border-radius:3px;
}
.coj-upload-row {
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:.55rem;
}
.coj-upload-label {
  display:flex;
  flex-direction:column;
  gap:.2rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
  flex:1;
  min-width:180px;
}
.coj-upload-label-block { margin-top:.5rem; }
.coj-upload-hint {
  font-family:'DM Sans', sans-serif;
  font-size:.68rem;
  color:var(--text-dim);
  text-transform:none;
  letter-spacing:0;
  margin-left:.35rem;
  font-weight:400;
  font-style:italic;
}
.coj-upload-input,
.coj-upload-textarea {
  padding:.45rem .58rem;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text-primary);
  font-family:'DM Sans', sans-serif;
  font-size:.76rem;
}
.coj-upload-input:focus,
.coj-upload-textarea:focus,
.coj-rt-editor:focus { outline:none; border-color:var(--coj-accent); }
.coj-rt-toolbar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem;
  padding:.38rem .45rem;
  border:1px solid var(--border);
  border-radius:8px 8px 0 0;
  background:var(--bg-input);
  border-bottom:none;
}
.coj-rt-btn {
  min-width:28px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .45rem;
  border-radius:6px;
  background:transparent;
  border:1px solid transparent;
  color:var(--text-primary);
  font-family:'DM Sans', sans-serif;
  font-size:.72rem;
  cursor:pointer;
}
.coj-rt-btn:hover { background:var(--bg-card-hover); border-color:var(--border); }
.coj-rt-sep { width:1px; height:18px; background:var(--border); margin:0 .15rem; }
.coj-rt-color {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.68rem;
  color:var(--text-secondary);
  cursor:pointer;
}
.coj-rt-color input[type="color"] {
  width:22px;
  height:22px;
  border:1px solid var(--border);
  border-radius:4px;
  padding:0;
  background:transparent;
  cursor:pointer;
}
.coj-rt-editor {
  min-height:140px;
  padding:.68rem .78rem;
  border:1px solid var(--border);
  border-radius:0 0 8px 8px;
  background:var(--bg-input);
  color:var(--text-primary);
  font-family:'DM Sans', sans-serif;
  font-size:.78rem;
  line-height:1.55;
  overflow-y:auto;
  max-height:360px;
}
.coj-rt-editor p { margin:.4rem 0; }
.coj-rt-editor ul, .coj-rt-editor ol { margin:.3rem 0 .3rem 1.3rem; padding:0; }
.coj-rt-editor h4 { margin:.55rem 0 .25rem; font-size:.9rem; }
.coj-upload-thumbs {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.5rem 0;
}
.coj-upload-thumb {
  position:relative;
  width:88px;
  height:88px;
  border-radius:8px;
  border:1px solid var(--border);
  overflow:hidden;
  background:var(--bg-input);
}
.coj-upload-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.coj-thumb-remove {
  position:absolute;
  top:2px;
  right:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:white;
  border:none;
  font-size:.7rem;
  cursor:pointer;
  line-height:1;
}
.coj-thumb-remove:hover { background:rgba(0,0,0,.8); }
.coj-upload-textarea {
  width:100%;
  box-sizing:border-box;
  line-height:1.5;
  resize:vertical;
}
.coj-upload-actions {
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:.7rem;
  flex-wrap:wrap;
}
.coj-upload-actions-right { margin-left:auto; display:flex; gap:.5rem; }
.coj-upload-secondary,
.coj-upload-cancel,
.coj-upload-save {
  padding:.45rem .9rem;
  border-radius:8px;
  font-family:'DM Sans', sans-serif;
  font-size:.74rem;
  cursor:pointer;
}
.coj-upload-secondary {
  border:1px solid var(--border);
  background:var(--bg-input);
  color:var(--text-primary);
  font-weight:600;
}
.coj-upload-secondary:hover { background:var(--bg-card-hover); border-color:var(--coj-accent); }
.coj-upload-cancel {
  border:1px solid var(--border);
  background:transparent;
  color:var(--text-secondary);
}
.coj-upload-save {
  border:1.5px solid var(--coj-accent);
  background:var(--coj-accent);
  color:white;
  font-weight:700;
}
.coj-upload-save:hover { filter:brightness(1.05); }
@media (max-width: 900px) {
  .coj-shell {
    grid-template-columns:1fr;
  }
  .coj-archive {
    position:static;
  }
  .coj-archive-list {
    max-height:none;
  }
}
@media (max-width: 700px) {
  .coj-filters {
    flex-direction:column;
    align-items:stretch;
  }
  .coj-filter-select { min-width:0; }
  .coj-filter-spacer { display:none; }
  .coj-add-btn,
  .coj-filter-clear,
  .coj-nav-btn {
    width:100%;
  }
  .coj-upload-actions-right {
    margin-left:0;
    width:100%;
  }
  .coj-upload-actions-right > button {
    flex:1;
  }
}

/* Phase 7 — Roster filter row.
 * Two compact dropdowns ("Role", "Level") plus a Clear-filters
 * link that only appears when at least one filter is active. The
 * row sits directly under the Refresh toolbar so both pieces of
 * roster-level state (refresh, filter) are visually grouped. */
.fc-roster-filter-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;       /* center the two selects horizontally */
  gap: .85rem;
  flex-wrap: wrap;
  margin: 0 auto .95rem;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);  /* theme-aware — light in light mode, dark in dark mode */
  width: fit-content;
  max-width: 100%;
}
.fc-roster-filter-lbl {
  display: flex; flex-direction: column;
  gap: .25rem;
  font-size: .68rem;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* IMPORTANT: prior version used hardcoded dark fallbacks
 * (--bg-elev-2, #232a36 / --text-primary). In light mode the
 * background stayed dark while --text-primary flipped to dark too,
 * producing the dark-on-dark unreadable select bug. We now use the
 * theme-aware --bg-card / --text-primary pair, so both modes
 * render high-contrast. */
.fc-roster-filter-lbl select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: .42rem .8rem .42rem .65rem;
  font-size: .8rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  min-width: 9.5rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.7rem;
}
.fc-roster-filter-lbl select:hover {
  border-color: var(--accent-purple);
}
.fc-roster-filter-lbl select:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgba(168,85,247,.18);
}
/* Each option in light mode also needs to be readable. Some
 * platforms inherit the parent's bg/color; others draw native. We
 * set both so the dropdown menu renders correctly in either case. */
.fc-roster-filter-lbl select option {
  background: var(--bg-card);
  color: var(--text-primary);
}
.fc-roster-filter-clear {
  margin-bottom: 2px; /* baseline-align with the select boxes */
}

/* Phase 7 — Per-row "Delete & block" action.
 * Right-aligned to the row, kept compact so it doesn't crowd the
 * View-profile chevron. Click handler bubbles up are stopped at
 * the button level so the row's open-profile onclick doesn't
 * also fire. */
.fc-roster-actions-cell {
  text-align: right;
  white-space: nowrap;
  width: 1%;
}
.fc-roster-actions-cell .fc-link-btn {
  padding: .25rem .55rem;
  font-size: .7rem;
}
.fc-roster-actions-cell .fc-link-btn[disabled] {
  opacity: .35;
  cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════════
   LEARNER ASSIGNMENTS — landing tile + dedicated 2-tab page
   ══════════════════════════════════════════════════════════════
   Replaces the old "Assigned to me" preview card (big block on
   the landing screen) with a compact rectangular tile that sits
   next to Daily Drills. The actual list of assigned + practice
   cases lives entirely on /my-assignments. Tabs split it into:
     • Assigned cases — what faculty assigned to this learner
     • Private cases  — the learner's own practice attempts
   Each row is expandable for a per-attempt lesson recap (missed
   concepts/actions + AI-generated 2-sentence summary).
   ══════════════════════════════════════════════════════════════ */

/* ── Landing tile ─────────────────────────────────────────── */
/* Compact: title + a single status badge + CTA. No subline (per
 * user feedback). No left border by default — that's reserved for
 * the "new assignment" glow state (.ma-tile-new). The tile is
 * height-matched to the Daily Drills card via the two-column grid's
 * align-items:stretch on the parent, so the two cards always render
 * the same height regardless of content. */
#my-assignments-tile {
  width: 100%;
  height: 100%;
}
.ma-tile {
  appearance: none;
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  height: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.15rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.ma-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border-color: rgba(217,119,6,.55);
}
.ma-tile-loading { opacity: .65; cursor: default; }
/* "A new assignment is waiting" state — soft orange glow + 4px
 * accent stripe on the left so it pops out of the landing layout
 * without being aggressive. Goes away once the learner opens the
 * My Assignments page (localStorage marks the assignments seen). */
.ma-tile-new {
  /* 2026-08-23d — the old `border-left: 4px solid` read as a random
     thick stripe on one side of an otherwise evenly-bordered landing
     tile. The "new assignment" state is now carried entirely by the
     amber border color + wash + soft glow, so the tile keeps the same
     1.5px frame as My Assignments' neighbours on the landing grid. */
  border-color: var(--accent-amber);
  background: linear-gradient(135deg, rgba(217,119,6,.09), rgba(217,119,6,.02) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(217,119,6,.08);
  animation: maTileGlow 2.4s ease-in-out infinite;
}
@keyframes maTileGlow {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217,119,6,.06); }
  50%      { box-shadow: 0 0 0 6px rgba(217,119,6,.16); }
}
.ma-tile-new-hint {
  margin-top: .35rem;
  font-size: .7rem;
  color: var(--accent-amber);
  font-weight: 600;
}
/* Overdue variant — same glow size but red so the learner can tell
   at a glance that the tile is alerting (overdue) vs nudging (just
   open). Pairs with `.ma-tile-overdue` on the button element. */
.ma-tile-overdue {
  border-color: rgba(239,68,68,.55);
  border-left: 4px solid #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,.09), rgba(239,68,68,.02) 60%, transparent);
  box-shadow: 0 0 0 4px rgba(239,68,68,.08);
  animation: maTileGlowOverdue 2.4s ease-in-out infinite;
}
@keyframes maTileGlowOverdue {
  0%, 100% { box-shadow: 0 0 0 4px rgba(239,68,68,.06); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,.18); }
}
.ma-tile-new-hint-overdue { color: var(--accent-red); }
.ma-tile-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 2026-08-28b — content is centered (was left-aligned against the
     right-hand "Open →" CTA, which read as lopsided on the tall tile). */
  align-items: center;
  text-align: center;
  gap: .35rem;
}
.ma-tile-badge-row { justify-content: center; }
.ma-tile-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: .98rem;
  color: var(--text-primary);
  letter-spacing: .01em;
}
.ma-tile-badge-row {
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.ma-tile-badge {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 8px;
}
.ma-tile-badge-overdue {
  color: var(--accent-red);
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.28);
}
.ma-tile-badge-open {
  color: var(--accent-amber);
  background: rgba(217,119,6,.13);
  border: 1px solid rgba(217,119,6,.32);
}
.ma-tile-badge-clear {
  color: var(--accent-green);
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.28);
}
.ma-tile-badge-loading {
  color: var(--text-dim);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.ma-tile-cta {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent-amber);
}

/* ── Dedicated page ───────────────────────────────────────── */
#my-assignments .ref-page-content {
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.1rem 2.4rem;
}
.ma-loading {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-dim);
  font-size: .82rem;
}

.ma-page { display: flex; flex-direction: column; gap: 1rem; }

.ma-page-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(217,119,6,.22);
  background: linear-gradient(135deg, rgba(217,119,6,.1), rgba(168,85,247,.04) 70%, rgba(255,255,255,0));
}
.ma-page-hero-copy { max-width: 640px; }
.ma-page-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-amber);
}
.ma-page-title {
  margin: .15rem 0 .4rem;
  font-size: 1.55rem; font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.015em;
}
.ma-page-sub {
  margin: 0;
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.ma-page-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(80px, 1fr);
  gap: .55rem;
  align-self: start;
}
.ma-page-stat {
  background: rgba(255,255,255,.5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .55rem .7rem;
  text-align: center;
  min-width: 80px;
}
.ma-page-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}
.ma-page-stat-lbl {
  margin-top: .12rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-dim);
}
.ma-page-stat-accent .ma-page-stat-val { color: var(--accent-amber); }
.ma-page-stat-warn .ma-page-stat-val   { color: var(--accent-red); }

.ma-partial-warn {
  padding: .55rem .85rem;
  border-radius: 10px;
  border: 1px solid rgba(245,158,11,.32);
  background: rgba(245,158,11,.08);
  color: var(--accent-amber);
  font-size: .78rem;
}
.ma-link {
  background: none; border: none;
  color: var(--accent-cyan);
  text-decoration: underline;
  cursor: pointer; padding: 0;
  font-size: inherit; font-family: inherit;
}

/* ── Tab bar ──────────────────────────────────────────────── */
.ma-tab-bar {
  display: flex;
  gap: .5rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
  justify-content: center;   /* center the two tabs per user request */
}
.ma-page-hero-actions {
  margin-top: .65rem;
}
.ma-hero-link {
  appearance: none;
  background: none;
  border: 1px solid rgba(168,85,247,.35);
  color: var(--accent-purple);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .42rem .8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.ma-hero-link:hover {
  background: rgba(168,85,247,.1);
  border-color: var(--accent-purple);
}
.ma-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.05rem;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease,opacity .14s ease;
}
.ma-tab-btn:hover { color: var(--text-primary); }
.ma-tab-btn.ma-tab-active {
  background: rgba(217,119,6,.12);
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}
.ma-tab-count {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 1.45rem;
  padding: .08rem .34rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: inherit;
  font-size: .7rem;
}

.ma-tab-body { display: flex; flex-direction: column; gap: .75rem; }

/* ── Empty states ─────────────────────────────────────────── */
.ma-empty {
  text-align: center;
  padding: 2.2rem 1.4rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  color: var(--text-secondary);
}
.ma-empty-icon { font-size: 2rem; margin-bottom: .35rem; }
.ma-empty h4 {
  margin: .2rem 0 .35rem;
  font-size: .98rem;
  font-weight: 800;
  color: var(--text-primary);
}
.ma-empty p {
  margin: 0 auto;
  max-width: 480px;
  font-size: .8rem;
  line-height: 1.55;
}

/* ── Assignment row (Assigned tab) ────────────────────────── */
.ma-list, .ma-private-list { display: flex; flex-direction: column; gap: .65rem; }
.ma-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  padding: .85rem .95rem;
  transition: border-color .14s ease, transform .14s ease;
}
.ma-row-done {
  border-color: rgba(34,197,94,.32);
  background: linear-gradient(180deg, rgba(34,197,94,.04), transparent 60%);
}
.ma-row-head {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
}
.ma-row-head-main { flex: 1 1 320px; min-width: 0; }
.ma-row-head-right {
  display: flex; align-items: center; gap: .65rem;
  flex: 0 0 auto;
}
.ma-row-badges {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .35rem;
}
.ma-pill {
  display: inline-flex; align-items: center;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.ma-pill-type {
  background: rgba(59,130,246,.09);
  color: var(--accent-blue);
  border-color: rgba(59,130,246,.22);
}
.ma-pill-due {
  background: rgba(148,163,184,.14);
  color: var(--text-secondary);
  border-color: rgba(148,163,184,.26);
}
.ma-pill-due-today, .ma-pill-due-soon {
  background: rgba(245,158,11,.12);
  color: var(--accent-amber);
  border-color: rgba(245,158,11,.28);
}
.ma-pill-due-overdue {
  background: rgba(239,68,68,.1);
  color: var(--accent-red);
  border-color: rgba(239,68,68,.26);
}
.atm-badge {
  background: rgba(168,85,247,.1);
  color: var(--accent-purple);
  border-color: rgba(168,85,247,.22);
}
.atm-badge-private {
  background: rgba(14,165,233,.1);
  color: var(--accent-cyan);
  border-color: rgba(14,165,233,.22);
}
.ma-row-title {
  margin: .2rem 0 .15rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
}
.ma-row-meta {
  display: flex; gap: .35rem; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--text-dim);
  letter-spacing: .04em;
}
.ma-row-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.45rem;
  font-weight: 800;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  border: 2px solid transparent;
}
.ma-score-good { color: var(--accent-green); background: rgba(34,197,94,.1);  border-color: rgba(34,197,94,.28); }
.ma-score-mid  { color: var(--accent-amber); background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.28); }
.ma-score-low  { color: var(--accent-red);   background: rgba(239,68,68,.1);  border-color: rgba(239,68,68,.26); }
.ma-score-na   { color: var(--text-dim);     background: var(--bg-secondary); border-color: var(--border); }
.ma-row-launch {
  padding: .55rem .95rem;
  border-radius: 10px;
  border: 1px solid var(--accent-amber);
  background: rgba(217,119,6,.12);
  color: var(--accent-amber);
  font-size: .78rem; font-weight: 700;
  cursor: pointer;
}
.ma-row-launch:hover { background: rgba(217,119,6,.2); }
.ma-row-history {
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px dashed var(--border);
}
.ma-row-history-hdr {
  font-size: .68rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .35rem;
}
.ma-row-history-list { display: flex; flex-direction: column; gap: .4rem; }
.ma-row-empty {
  margin-top: .65rem;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: var(--bg-secondary);
  font-size: .76rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Per-attempt expandable row (both tabs) ───────────────── */
.ma-attempt {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}
.ma-private-list .ma-attempt { background: var(--bg-card); }
.ma-attempt-head {
  appearance: none;
  display: flex; align-items: center; gap: .85rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: .7rem .85rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
  transition: background .12s ease;
}
.ma-attempt-head:hover { background: rgba(217,119,6,.05); }
.ma-attempt-head-main { flex: 1 1 auto; min-width: 0; }
.ma-attempt-head-top {
  display: flex; gap: .35rem; flex-wrap: wrap;
  margin-bottom: .15rem;
}
.ma-attempt-tag {
  display: inline-flex; align-items: center;
  padding: .12rem .45rem;
  border-radius: 999px;
  background: rgba(59,130,246,.1);
  color: var(--accent-blue);
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ma-attempt-tag-soft {
  background: rgba(148,163,184,.14);
  color: var(--text-secondary);
}
.ma-attempt-head-meta {
  display: flex; gap: .35rem; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--text-dim);
  letter-spacing: .03em;
}
.ma-attempt-gap-hint {
  color: var(--accent-amber);
  font-weight: 700;
}
.ma-attempt-head-right {
  display: flex; align-items: center; gap: .55rem;
  flex: 0 0 auto;
}
.ma-attempt-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.05rem;
  font-weight: 800;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1.5px solid transparent;
}
.ma-attempt-chev {
  font-size: .85rem;
  color: var(--text-dim);
}
.ma-attempt-body {
  padding: 0 .85rem .9rem;
  display: flex; flex-direction: column; gap: .65rem;
}
.ma-attempt-gaps { display: flex; flex-direction: column; gap: .55rem; }
.ma-gap-block { }
.ma-gap-hdr {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .25rem;
}
.ma-gap-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.ma-gap-pill {
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(148,163,184,.14);
  border: 1px solid rgba(148,163,184,.26);
  color: var(--text-secondary);
  font-size: .68rem;
}
.ma-gap-pill-action {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.26);
  color: var(--accent-red);
}
.ma-attempt-no-gaps {
  padding: .55rem .65rem;
  border-radius: 10px;
  background: rgba(34,197,94,.08);
  color: var(--accent-green);
  font-size: .75rem;
}

/* AI lesson blurb slot */
.ma-attempt-blurb { }
.ma-blurb-cta {
  appearance: none;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(59,130,246,.04));
  border: 1px dashed rgba(168,85,247,.32);
  border-radius: 10px;
  padding: .55rem .75rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  color: var(--accent-purple);
  font-size: .78rem;
  font-weight: 700;
  gap: .15rem;
}
.ma-blurb-cta:hover {
  border-style: solid;
  background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(59,130,246,.07));
}
.ma-blurb-cta-sub {
  font-weight: 500;
  font-size: .68rem;
  color: var(--text-secondary);
}
.ma-blurb-loading {
  padding: .55rem .75rem;
  border-radius: 10px;
  background: var(--bg-secondary);
  font-size: .76rem;
  color: var(--text-dim);
}
.ma-blurb-text {
  padding: .65rem .8rem;
  border-radius: 10px;
  background: rgba(168,85,247,.07);
  border: 1px solid rgba(168,85,247,.22);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.ma-blurb-err {
  padding: .55rem .75rem;
  border-radius: 10px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.26);
  color: var(--accent-red);
  font-size: .76rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 720px) {
  .ma-page-hero { grid-template-columns: 1fr; }
  .ma-page-stats { grid-auto-flow: column; }
  .ma-row-head-right { width: 100%; justify-content: flex-end; }
  .ma-tile { padding: .85rem; }
  .ma-tile-cta { font-size: .72rem; }
}

/* ══════════════════════════════════════════════════════════════
 * MOBILE PASS — consolidated tweaks for ≤600 px and ≤430 px.
 * Reuses the existing 600/430 breakpoint scheme; no new
 * breakpoints introduced. Order matters: ≤600 first, then ≤430
 * narrows further. Goals: no horizontal scroll, no overlap, no
 * iOS zoom-on-focus, comfortable tap targets.
 * ══════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Chat header — KEEP the text label next to each emoji on phones.
     Emoji-only tabs (📖 📋 📝 🕐) read as a row of cryptic icons on a
     phone; a resident shouldn't have to guess what each panel is. The
     header already flex-wraps (.chat-header flex-wrap:wrap), so showing a
     small label just lets the row grow to a second line — clarity over a
     tighter single row. The emoji stays full-size; only the label is
     shrunk so both fit. */
  .ch-right .hdr-btn-label { display: inline; font-size: .6rem; letter-spacing: .01em; }
  .ch-right .hdr-btn { padding: .3rem .45rem; font-size: .82rem; gap: .18rem; }
  .ch-right { gap: .3rem; row-gap: .3rem; }
  .chat-header { padding: .45rem .55rem; }

  /* Sim focus on phones (2026-09-04, beta feedback): the Library/Scores/
     Recent Sims row and the Display row each cost a full row of a small
     screen the case itself needs. The back arrow already reaches
     everything on the first row; theme switching moves to the small
     floating circle (.chat-theme-fab) in the top-right. */
  body.page-chat #chat .utility-bar,
  body.page-chat #chat .theme-bar { display: none !important; }
  body.page-chat .chat-theme-fab,
  body.page-chat .chat-customize-fab { display: flex; }
  /* …but never let the fabs float over an open full-screen drawer's ✕. */
  body.page-chat #chat:has(.orders-panel:not(.op-hide)) .chat-theme-fab,
  body.page-chat #chat:has(.ref-panel:not(.rp-hide)) .chat-theme-fab,
  body.page-chat #chat:has(.qs-panel:not(.qp-hide)) .chat-theme-fab,
  body.page-chat #chat:has(.hist-panel:not(.hp-hide)) .chat-theme-fab,
  body.page-chat #chat:has(.orders-panel:not(.op-hide)) .chat-customize-fab,
  body.page-chat #chat:has(.ref-panel:not(.rp-hide)) .chat-customize-fab,
  body.page-chat #chat:has(.qs-panel:not(.qp-hide)) .chat-customize-fab,
  body.page-chat #chat:has(.hist-panel:not(.hp-hide)) .chat-customize-fab { display: none; }

  /* Header buttons split the row evenly instead of ragged widths that
     push the last button half off-screen. */
  .ch-right { width: 100%; }
  .ch-right .hdr-btn { flex: 1 1 21%; justify-content: center; min-width: 0; }

  /* The floating utility rail (Report a bug · Tutorial) sat exactly on
     the sim's send button — lift it above the whole input area while a
     case is on screen. Landing pages keep the corner position. */
  body.page-chat .util-rail { bottom: calc(env(safe-area-inset-bottom, 0px) + 100px); }

  /* Side panels open wider on phones (rather than fixed 240/280px
     which both leaves a sliver of background AND can be hard to read).
     The :not() guards preserve the existing collapse-to-0 behavior. */
  /* Full-screen drawers on phones. The old 86vw/360px cap left a sliver of
     the case peeking beside the panel — it read as a rendering glitch and
     let stray taps land on the case behind the open panel. Full width also
     gives the orders list, debrief composer and highlight banner the room
     they were overflowing out of. */
  .qs-panel:not(.qp-hide) { width: 100vw; max-width: 100vw; }
  .ref-panel:not(.rp-hide) { width: 100vw; max-width: 100vw; }
  .orders-panel:not(.op-hide) { width: 100vw; max-width: 100vw; }

  /* Form inputs: bump to 16px minimum to prevent iOS Safari from
     zooming the viewport on focus. Apply broadly to the sim setup
     textual inputs that were using .78–.85rem. */
  .text-input, .cpa, .lib-search-input, .lib-global-search-input,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], textarea, select {
    font-size: 16px;
  }
  /* Keep some controls visually compact even with the larger font. */
  .tb { font-size: .85rem; padding: .55rem .55rem; }
  .cc { font-size: .72rem; }

  /* Landing CTA bar — verify no overlap. .landing-container already
     pads 1.5rem; reserve bottom space if a sticky CTA exists. */
  .landing-container { padding-bottom: 5rem; }

  /* Global library search — slightly tighter on phones but still the
     prominent control. */
  .lib-global-search-input { padding: .7rem .9rem .7rem 2.2rem; }

  /* Library groups — collapse to single column so header tile sits
     above the search bar (not next to it). Still clickable to expand.
     The Pocket Guide standalone group keeps its single-column layout. */
  .lib-group {
    grid-template-columns: 1fr;
  }
  .lib-group-hdr,
  .lib-group .lib-search-wrap {
    grid-column: 1;
  }
  .lib-group-hdr { grid-row: 1; }
  .lib-group .lib-search-wrap { grid-row: 2; }
  .lib-group-grid { grid-row: 3; }
  .lib-group-results { grid-row: 4; }
  .lib-group-hdr { min-height: 48px; }
}

@media (max-width: 430px) {
  /* Library hub — single column, smaller group chrome, bigger tile text. */
  .lib-hub { gap: .35rem; }
  .lib-group { padding: .45rem 0 .45rem .65rem; gap: .4rem; }
  .lib-group-icon { width: 1.5rem; height: 1.5rem; font-size: 1rem; }
  .lib-group-title { font-size: .72rem; }
  .lib-group-when { font-size: .7rem; white-space: normal; }
  .lib-group-grid { grid-template-columns: 1fr; gap: .4rem; }
  .lib-group .lib-hub-tile:not(.lib-hub-tile-hero) {
    min-height: 56px;            /* tappable */
    padding: .7rem .65rem;
    flex-direction: row;         /* icon + text side by side fits better */
    justify-content: flex-start;
    text-align: left;
    gap: .6rem;
  }
  .lib-group .lht-icon { width: 32px; height: 32px; font-size: 1rem; flex-shrink: 0; }
  /* Bigger fonts on tiles per spec so labels are legible. */
  .lht-title { font-size: .8rem; }
  .lht-desc { font-size: .68rem; }
  /* Hero (Pocket Guide) tile stays centered and tall but slightly tighter. */
  .lib-hub-tile-hero { padding: .9rem 1rem; min-height: 6rem; }
  .lib-hub-tile-hero .lht-title { font-size: .95rem; }
  .lib-hub-tile-hero .lht-desc { font-size: .74rem; }

  /* Account chip — already collapsed at ≤500; tighten further. */
  .account-chip-label { max-width: 70px; }

  /* Generate button + secondary buttons in sim setup. */
  .gen-btn { font-size: .85rem; padding: .8rem 1rem; min-height: 48px; }
  .sec-b { font-size: .72rem; padding: .55rem .55rem; }

  /* Chat header — even tighter on phones. */
  .ch-right .hdr-btn { padding: .3rem .4rem; font-size: .95rem; }
  .ct { font-size: .8rem; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════
   PRINT — strip the chat page to just the conversation so the
   resident can hand "an example case" to leadership as a PDF.
   ═══════════════════════════════════════════════════════════ */
@media print {
  body > *:not(#chat) { display: none !important; }
  #chat .chat-header, #chat .utility-bar, #chat .theme-bar,
  #chat .progress-wrap, #chat .ref-panel, #chat .qs-panel,
  #chat .orders-panel, #chat .action-row, #chat .input-area,
  .global-account-menu, .global-theme-toggle, .chat-theme-fab, .chat-customize-fab, #disclaimer-footer,
  #lib-sidebar, .lib-sidebar-toggle { display: none !important; }
  #chat .chat-body { overflow: visible !important; max-height: none !important; }
  .msg { page-break-inside: avoid; }
  body { background: white !important; color: black !important; }
}

/* ══════════════════════════════════════════════════════════════
   LIBRARY — Browse stars + Custom dashboard + My Flashcards / Notes
   Reuses the existing .fav-star language (color/hover/active) from
   the simulation orders UI; here it is positioned in the tile corner.
   ══════════════════════════════════════════════════════════════ */
.lib-tile-has-fav { position: relative; }
.lib-tile-fav {
  position: absolute; top: .4rem; right: .5rem;
  margin: 0; padding: 0; font-size: .98rem; line-height: 1; z-index: 3;
}
.lib-tile-fav:focus-visible { outline: 2px solid var(--accent-amber); outline-offset: 2px; border-radius: 4px; }

/* ── Custom dashboard ── */
.lib-custom-wrap { width: 100%; max-width: 760px; }
.lib-custom-dash { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
.lib-custom-intro {
  font-size: .74rem; color: var(--text-secondary); line-height: 1.5;
  padding: .1rem 0 .1rem; text-align: center;
}
.lib-custom-section { display: flex; flex-direction: column; gap: .6rem; }
.lib-custom-section-hdr { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: .4rem; }
.lib-custom-section-title { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.lib-custom-section-sub { font-size: .7rem; color: var(--text-dim); }
.lib-custom-grid { width: 100%; }
.lib-custom-empty {
  font-size: .72rem; color: var(--text-dim); line-height: 1.5;
  padding: .85rem 1rem; border: 1px dashed var(--border); border-radius: 10px;
  background: rgba(255,255,255,.02); text-align: center;
}
.lib-custom-empty-lg { padding: 2rem 1rem; }
.lib-empty-emoji { font-size: 2rem; line-height: 1; margin-bottom: .5rem; opacity: .85; }
.lib-empty-title { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 700; color: var(--text-secondary); margin-bottom: .25rem; }
.lib-empty-sub { font-size: .7rem; color: var(--text-dim); max-width: 46ch; margin: 0 auto; }
/* Feature tiles (My Flashcards / My Notes) — first-class, slightly taller */
.lib-custom-feature { position: relative; }
.lib-feature-badge {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; color: var(--accent-purple); margin-top: .15rem; min-height: .8rem;
}
.lib-custom-feature:nth-child(2) .lib-feature-badge { color: var(--accent-cyan); }

/* ── My Flashcards deck ── */
.lib-fc-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .65rem 1rem; margin-bottom: .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border); }
.lib-fc-stat { font-size: .72rem; color: var(--text-secondary); }
.lib-fc-stat strong { font-family: 'JetBrains Mono', monospace; font-size: .9rem; color: var(--text-primary); margin-right: .15rem; }
.lib-fc-hint { font-size: .7rem; color: var(--text-dim); margin-left: auto; }
.lib-fc-list { display: flex; flex-direction: column; gap: .55rem; }
.lib-fc-card { border: 1px solid var(--border); border-left: 3px solid var(--accent-purple); border-radius: 10px; background: var(--bg-card); padding: .7rem .8rem; }
.lib-fc-card-due { border-left-color: var(--accent-amber); }
.lib-fc-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.lib-fc-concept { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-purple); border: 1px solid rgba(168,85,247,.3); border-radius: 999px; padding: .12rem .5rem; background: rgba(168,85,247,.08); }
.lib-fc-meta-row { display: inline-flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.lib-fc-meta { font-size: .68rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }
.lib-fc-due { color: var(--accent-amber); font-weight: 700; }
.lib-fc-q { font-size: .78rem; line-height: 1.5; color: var(--text-primary); font-weight: 600; }
.lib-fc-ans { font-size: .74rem; line-height: 1.5; color: var(--text-secondary); margin-top: .4rem; }
.lib-fc-lbl { font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-green); margin-right: .25rem; }
.lib-fc-expl { font-size: .7rem; line-height: 1.5; color: var(--text-dim); margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--border); }

/* ── Clickable deck rows + discipline chip ── */
.lib-fc-card-click { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.lib-fc-card-click:hover { border-color: var(--accent-purple); box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-1px); }
.lib-fc-card-click:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
.lib-fc-disc { font-family: 'DM Sans', sans-serif; font-size: .66rem; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 999px; padding: .12rem .5rem; background: var(--bg-secondary); white-space: nowrap; }
.lib-fc-open-hint { font-size: .64rem; color: var(--text-dim); margin-top: .45rem; opacity: 0; transition: opacity .15s; }
.lib-fc-card-click:hover .lib-fc-open-hint, .lib-fc-card-click:focus-visible .lib-fc-open-hint { opacity: 1; }

/* ── Discipline filter pills ── */
.lib-fc-disc-bar { margin: 0 0 .85rem; }
.lib-fc-disc-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.lib-fc-pill { display: inline-flex; align-items: center; gap: .3rem; border: 1.5px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); border-radius: 999px; padding: .3rem .7rem; font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.lib-fc-pill:hover { color: var(--text-primary); border-color: var(--accent-purple); }
.lib-fc-pill-on { color: #fff; background: var(--accent-purple); border-color: var(--accent-purple); }
.lib-fc-pill-n { font-family: 'JetBrains Mono', monospace; font-size: .64rem; opacity: .8; background: rgba(0,0,0,.12); border-radius: 999px; padding: 0 .35rem; }
.lib-fc-pill-on .lib-fc-pill-n { background: rgba(255,255,255,.25); }

/* ── Flashcard detail modal ── */
.lib-fc-modal { width: min(560px, 94vw); }
.lib-fcm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.lib-fcm-front { font-size: .92rem; line-height: 1.6; color: var(--text-primary); font-weight: 600; padding: .3rem 0; }
.lib-fcm-answer { font-size: .8rem; line-height: 1.5; color: var(--text-secondary); }
.lib-fcm-reveal { align-self: flex-start; border: 1.5px solid var(--accent-cyan); background: transparent; color: var(--accent-cyan); border-radius: 8px; padding: .4rem .9rem; font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 600; cursor: pointer; }
.lib-fcm-reveal:hover { background: rgba(6,182,212,.1); }
.lib-fcm-expl { font-size: .76rem; line-height: 1.55; color: var(--text-secondary); background: var(--bg-secondary); border-radius: 8px; padding: .55rem .65rem; border-left: 3px solid var(--accent-cyan); }
.lib-fcm-sched { margin-top: .35rem; padding-top: .65rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .5rem; }
.lib-fcm-sched-now { font-size: .76rem; color: var(--text-secondary); }
.lib-fcm-sched-now .lib-fc-due { color: var(--accent-amber); }
.lib-fcm-schedsub { display: block; font-size: .66rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; margin-top: .15rem; }
.lib-fcm-sched-lbl { font-size: .7rem; color: var(--text-dim); font-weight: 600; }
.lib-fcm-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0; }
.lib-fcm-presets button { border: 1.5px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); border-radius: 7px; padding: .3rem .6rem; font-size: .74rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.lib-fcm-presets button:hover { border-color: var(--accent-green); color: var(--accent-green); }
.lib-fcm-custom { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lib-fcm-custom input { width: 5.5rem; padding: .35rem .5rem; border-radius: 7px; border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: .74rem; font-family: inherit; box-sizing: border-box; }
.lib-fcm-custom input[type="date"] { width: auto; }
.lib-fcm-custom button { border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text-secondary); border-radius: 7px; padding: .35rem .65rem; font-size: .73rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; }
.lib-fcm-custom button:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.lib-fcm-or { font-size: .7rem; color: var(--text-dim); }
.lib-fcm-editgrid { display: flex; flex-direction: column; gap: .3rem; }
.lib-fcm-lbl { font-size: .68rem; color: var(--text-dim); font-weight: 600; margin-top: .35rem; }
.lib-fcm-lbl code { font-family: 'JetBrains Mono', monospace; font-size: .66rem; color: var(--accent-cyan); }
.lib-fcm-editgrid input { width: 100%; padding: .5rem .65rem; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: 'DM Sans', sans-serif; font-size: .78rem; box-sizing: border-box; }

/* ── My Notes (grouped by topic) ── */
.lib-notes-list { display: flex; flex-direction: column; gap: .85rem; }
.lib-note-group { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); overflow: hidden; }
.lib-note-group-hdr { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .75rem; background: rgba(6,182,212,.06); border-bottom: 1px solid var(--border); }
.lib-note-chapter { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; color: var(--accent-cyan); }
.lib-note-topic { font-size: .72rem; color: var(--text-primary); font-weight: 600; }
.lib-note-count { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .45rem; background: var(--bg-secondary); }
.lib-note-items { display: flex; flex-direction: column; }
.lib-note-item { padding: .6rem .75rem; border-top: 1px solid var(--border); }
.lib-note-items .lib-note-item:first-child { border-top: none; }
.lib-note-quote { font-size: .74rem; line-height: 1.5; color: var(--text-primary); border-left: 3px solid var(--accent-amber); padding-left: .6rem; background: rgba(245,158,11,.06); border-radius: 0 5px 5px 0; padding-top: .15rem; padding-bottom: .15rem; }
.lib-note-note { font-size: .72rem; line-height: 1.5; color: var(--text-secondary); margin-top: .4rem; padding-left: .6rem; }
.lib-note-note::before { content: '✎ '; color: var(--accent-cyan); }
.lib-note-meta { margin-top: .35rem; padding-left: .6rem; }
.lib-note-ts { font-size: .68rem; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }

@media (max-width: 560px) {
  .lib-fc-hint { margin-left: 0; width: 100%; }
  .lib-custom-dash { gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED "BACK TO …" BUTTONS (section-level navigation)
   ───────────────────────────────────────────────────────────────
   Prominent, left-aligned, amber — visually distinct from content
   headers so it never hides in the background, matching the ICU
   "← Back to <topic>" button. Applied to Consults / Labs / Outpatient
   screening / Radiology sub-page backs. (The redundant page→Library
   "Back to Library" buttons were removed — the header Library tile,
   Home tile, and page-header ← arrow already cover that.)
   Placed last so it wins over the older per-page pill styles.
   ═══════════════════════════════════════════════════════════════ */
.at-back-btn,
.cp-back-btn,
.le-back-btn,
.screening-back-btn,
.lib-back-hub{
  display:block;
  align-self:flex-start;
  width:fit-content;
  max-width:100%;
  margin:0 0 .85rem 0;
  padding:.35rem 0;
  background:none;
  border:none;
  border-radius:0;
  color:var(--accent-amber,#f59e0b);
  font-family:'DM Sans',sans-serif;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.01em;
  text-align:left;
  cursor:pointer;
  transition:color .15s ease, transform .12s ease;
}
.at-back-btn:hover,
.cp-back-btn:hover,
.le-back-btn:hover,
.screening-back-btn:hover,
.lib-back-hub:hover{
  color:var(--text-primary);
  transform:translateX(-3px);
}
/* The cross-reference return control keeps its own purple accent. */
.lib-back-hub.lib-back-hub-xref{color:var(--accent-purple);}
.lib-back-hub.lib-back-hub-xref:hover{color:var(--accent-purple);filter:brightness(1.15);transform:translateX(-3px);}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

/* ══════════════════════════════════════════════════════════════
   Sticky local section navigation (shared) — a compact "jump to
   section" chip row for long reference pages (Orders "All" view,
   Labs search view). Sticks to the top of the page's own scroll
   container; scrolls horizontally on overflow so it works on mobile.
   Navigation aid only — see buildLocalJumpNav()/scrollToLocalSection()
   in ui.js. ══════════════════════════════════════════════════════ */
.local-jump-nav{position:sticky;top:0;z-index:30;display:flex;flex-wrap:nowrap;gap:.35rem;width:100%;box-sizing:border-box;overflow-x:auto;padding:.5rem 0 .5rem;margin:0 0 .35rem;background:var(--user-bg);border-bottom:1px solid var(--border);scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
.local-jump-nav::-webkit-scrollbar{height:5px;}
.local-jump-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.local-jump-nav::before{content:"▤";flex:0 0 auto;align-self:center;color:var(--text-dim);font-size:.7rem;margin-right:.1rem;}
.local-jump-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:6px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;line-height:1.1;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s,background .15s;}
.local-jump-chip:hover,.local-jump-chip:focus-visible{border-color:var(--ljn-accent,var(--accent-cyan));color:var(--ljn-accent,var(--accent-cyan));background:var(--bg-card-hover);outline:none;}
.local-jump-chip-icon{font-size:.85em;line-height:1;}
/* Offset so a jumped-to section clears the sticky bar, and a brief flash
   to orient the eye on arrival. */
.co-catgroup,.le-cat-section{scroll-margin-top:3.25rem;}
.local-jump-flash{animation:localJumpFlash 1s ease;}
@keyframes localJumpFlash{0%{box-shadow:0 0 0 2px var(--accent-cyan) inset;}100%{box-shadow:0 0 0 0 transparent inset;}}
@media (max-width:768px){
  .local-jump-nav{padding:.45rem 0;gap:.3rem;}
  .local-jump-chip{font-size:.7rem;padding:.28rem .5rem;}
}

/* ══════════════════════════════════════════════════════════════
   MY NOTES v2 — Add-note CTA, discipline tiles, unified note list,
   and the Add-note hub modal (AI filing states). 2026-08-01.
   ══════════════════════════════════════════════════════════════ */
/* Add-note CTA (library hub bar + My Notes header) */
.lib-add-note-bar{display:flex;align-items:center;justify-content:center;text-align:center;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 .8rem;}
.lib-add-note-bar-hint{font-size:.72rem;color:var(--text-dim);}
.lib-notes-add-wrap{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 .8rem;}
.lib-notes-add-hint{font-size:.72rem;color:var(--text-dim);}
.lib-add-note-cta{font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:700;padding:.5rem 1rem;border-radius:10px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);cursor:pointer;transition:background .15s,transform .15s;}
.lib-add-note-cta:hover{background:rgba(34,197,94,.18);transform:translateY(-1px);}
/* Discipline tile hub */
.lib-note-disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;}
.lib-note-disc-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.7rem .75rem;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-card);cursor:pointer;text-align:left;transition:border-color .15s,transform .15s;}
.lib-note-disc-tile:hover{border-color:var(--accent-cyan);transform:translateY(-1px);}
.lib-note-disc-tile-all{grid-column:1 / -1;flex-direction:row;align-items:center;gap:.55rem;border-color:rgba(6,182,212,.5);}
.lib-note-disc-icon{font-size:1.15rem;line-height:1;}
.lib-note-disc-name{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.78rem;color:var(--text-primary);}
.lib-note-disc-sub{font-size:.7rem;color:var(--text-dim);}
.lib-note-disc-count{position:absolute;top:.5rem;right:.6rem;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--accent-cyan);background:rgba(6,182,212,.1);border-radius:999px;padding:.05rem .45rem;}
.lib-note-disc-tile-all .lib-note-disc-count{position:static;margin-left:auto;}
/* Unified note list */
.lib-notes-listbar{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem;}
.lib-notes-listbar-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.8rem;color:var(--text-primary);}
.lib-note-item-flat{border:1px solid var(--border);border-radius:10px;background:var(--bg-card);padding:.6rem .75rem;display:flex;flex-direction:column;gap:.35rem;}
.lib-note-item-hdr{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.lib-note-src{font-size:.68rem;font-weight:700;padding:.1rem .45rem;border-radius:999px;border:1px solid;font-family:'DM Sans',sans-serif;}
.lib-note-src-lib{color:var(--accent-cyan);border-color:rgba(6,182,212,.4);background:rgba(6,182,212,.08);}
.lib-note-src-sim{color:var(--accent-purple);border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.08);}
.lib-note-src-custom{color:var(--accent-green);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08);}
.lib-note-crumb{font-size:.68rem;font-weight:600;color:var(--text-secondary);}
.lib-note-item-hdr .lib-note-ts{margin-left:auto;font-size:.7rem;color:var(--text-dim);}
.lib-note-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.15rem;}
.lib-note-act{font-size:.7rem;font-weight:600;padding:.22rem .55rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;font-family:'DM Sans',sans-serif;}
.lib-note-act:hover{border-color:var(--accent-cyan);color:var(--text-primary);}
.lib-note-act-del:hover{border-color:var(--accent-red);color:var(--accent-red);}
/* Add-note hub modal — input + AI states */
.lib-addnote-taglbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);margin:.5rem 0 .25rem;}
.lib-addnote-tagsub{text-transform:none;letter-spacing:0;font-weight:400;color:var(--text-dim);}
.lib-addnote-ai{background:var(--accent-purple) !important;border-color:var(--accent-purple) !important;color:#fff !important;}
.lib-addnote-ai:hover{filter:brightness(1.1);}
.lib-addnote-loading{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.2rem 0;font-size:.74rem;color:var(--text-secondary);text-align:center;}
.lib-addnote-spinner{width:22px;height:22px;border:3px solid var(--border);border-top-color:var(--accent-purple);border-radius:50%;animation:libAddNoteSpin .8s linear infinite;}
@keyframes libAddNoteSpin{to{transform:rotate(360deg)}}
/* ── 🃏 Flashcard-made badge + multi-select (My Notes) ── */
.lib-note-fcbadge{font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:999px;background:rgba(168,85,247,.12);color:var(--accent-purple);border:1px solid rgba(168,85,247,.3);white-space:nowrap;}
.lib-note-selbox{display:inline-flex;align-items:center;margin-right:.15rem;}
.lib-note-selbox input{width:15px;height:15px;accent-color:var(--accent-purple);cursor:pointer;}
.lib-note-item-selected{border-color:var(--accent-purple) !important;box-shadow:0 0 0 2px rgba(168,85,247,.18);}
.lib-notes-listbar-spacer{flex:1;}
.lib-notes-batchfc{background:var(--accent-purple) !important;border-color:var(--accent-purple) !important;color:#fff !important;font-size:.7rem !important;padding:.2rem .6rem !important;}
.lib-notes-batchfc:disabled{opacity:.5;cursor:default;}
.lib-notes-selecthint{font-size:.72rem;color:var(--text-dim);margin:.3rem 0 .5rem;}
/* ── 📎 Attach-existing-note picker ── */
.lib-attach-list{display:flex;flex-direction:column;gap:.45rem;max-height:44vh;overflow-y:auto;padding-right:.15rem;}
.lib-attach-row{display:flex;flex-direction:column;gap:.3rem;text-align:left;border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;background:var(--bg-secondary);cursor:pointer;font-family:inherit;}
.lib-attach-row:hover{border-color:var(--accent-purple);background:var(--bg-card-hover);}
.lib-attach-row-hdr{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.lib-attach-row-text{font-size:.72rem;color:var(--text-primary);line-height:1.4;}
/* ── 📷 Photo-of-notes flow (Add Note hub) ── */
.lib-addnote-photo-sep{display:flex;align-items:center;gap:.6rem;color:var(--text-dim);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin:.2rem 0 0;}
.lib-addnote-photo-sep::before,.lib-addnote-photo-sep::after{content:'';flex:1;height:1px;background:var(--border);}
.lib-addnote-photo-btn{width:100%;padding:.55rem .8rem;border-radius:8px;border:1.5px dashed var(--accent-purple);background:rgba(168,85,247,.07);color:var(--accent-purple);font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;}
.lib-addnote-photo-btn:hover{background:rgba(168,85,247,.14);}
.lib-addnote-photo-hint{font-size:.72rem;color:var(--text-secondary);line-height:1.45;}
.lib-addnote-photo-warn{font-size:.7rem;color:var(--text-dim);line-height:1.45;}
.lib-note-modal-photo{width:min(640px,94vw);}
.lib-photo-review-intro{font-size:.72rem;color:var(--text-secondary);line-height:1.45;}
.lib-photo-pearls{display:flex;flex-direction:column;gap:.55rem;max-height:48vh;overflow-y:auto;padding-right:.15rem;}
.lib-photo-pearl{border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;background:var(--bg-secondary);display:flex;flex-direction:column;gap:.4rem;}
.lib-photo-pearl-excluded{opacity:.45;}
.lib-photo-pearl-top{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.lib-photo-chip{font-size:.7rem;font-weight:600;padding:.16rem .5rem;border-radius:999px;line-height:1.3;}
.lib-photo-chip-anchored{background:rgba(245,158,11,.12);color:var(--accent-amber);border:1px solid rgba(245,158,11,.3);}
.lib-photo-chip-standalone{background:rgba(6,182,212,.1);color:var(--accent-cyan);border:1px solid rgba(6,182,212,.28);}
.lib-photo-pearl-x{margin-left:auto;background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:.72rem;font-family:inherit;padding:.15rem .3rem;border-radius:6px;}
.lib-photo-pearl-x:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.lib-photo-pearl textarea{min-height:44px;font-size:.74rem;}
.lib-photo-pearl-acts{display:flex;align-items:center;gap:.45rem;}
.lib-photo-tagsel{padding:.3rem .45rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:.7rem;font-family:inherit;}
.lib-addnote-matchlbl{font-size:.68rem;font-weight:700;color:var(--text-secondary);}
.lib-addnote-match{font-size:.78rem;}
.lib-addnote-notelbl{font-size:.72rem;color:var(--text-dim);margin-top:.2rem;}

/* ══════════════════════════════════════════════════════════════
   CLINICAL POCKET GUIDE v2 — ranked search, chapter counts,
   expand/collapse toolbar, cross-reference chips. 2026-08-04.
   ══════════════════════════════════════════════════════════════ */
/* Chapter chips — topic counts + dimmed "no hits" state while searching */
.pg-chip-count{display:inline-block;margin-left:.25rem;padding:.02rem .3rem;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;background:color-mix(in srgb, currentColor 14%, transparent);opacity:.85;}
.trials-nav-btn.pg-chip-empty{opacity:.32;filter:grayscale(.6);}
/* Result toolbar */
.pg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin:.15rem 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid var(--border);}
.pg-result-count{font-size:.7rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace;}
.pg-toolbar-actions{display:flex;gap:.35rem;}
.pg-tool-btn{font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;padding:.22rem .55rem;border-radius:6px;border:1px solid var(--border);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;}
.pg-tool-btn:hover{border-color:var(--accent-cyan);color:var(--text-primary);}
/* Zero-result state */
.pg-empty{text-align:center;padding:2rem 1rem;border:1px dashed var(--border);border-radius:12px;background:var(--bg-card);}
.pg-empty-emoji{font-size:1.6rem;margin-bottom:.4rem;}
.pg-empty-title{font-family:'DM Sans',sans-serif;font-weight:700;font-size:.82rem;color:var(--text-primary);margin-bottom:.3rem;}
.pg-empty-sub{font-size:.7rem;color:var(--text-dim);line-height:1.5;max-width:34rem;margin:0 auto;}
.pg-empty-link{background:none;border:none;padding:0;color:var(--accent-cyan);font:inherit;text-decoration:underline;cursor:pointer;}
/* Cross-reference chips */
.pg-xref-row{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--border);}
.pg-xref-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);}
.pg-xref-btn{display:inline-flex;align-items:center;gap:.35rem;font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;padding:.28rem .6rem;border-radius:8px;border:1.5px solid var(--accent-cyan);background:rgba(6,182,212,.08);color:var(--accent-cyan);cursor:pointer;transition:background .15s;}
.pg-xref-btn:hover{background:rgba(6,182,212,.18);}
.pg-xref-ch{font-family:'JetBrains Mono',monospace;font-size:.66rem;opacity:.75;}
/* Flash highlight when a cross-reference jump lands on a card */
.pg-card-flash{animation:pgCardFlash 1.6s ease-out;}
@keyframes pgCardFlash{0%{box-shadow:0 0 0 3px var(--accent-cyan);}100%{box-shadow:0 0 0 0 transparent;}}

/* ══ Flashcard review — per-card chatbot row ══ */
.dd-chat-row{display:flex;gap:.5rem;justify-content:center;margin-top:.55rem;flex-wrap:wrap;}
.dd-chat-btn{
  padding:.42rem .8rem;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--accent-cyan);background:transparent;color:var(--accent-cyan);
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;
  transition:background .12s ease;
}
.dd-chat-btn:hover{background:color-mix(in srgb, var(--accent-cyan) 12%, transparent);}
.dd-chat-quiz{border-color:var(--accent-amber);color:var(--accent-amber);}
.dd-chat-quiz:hover{background:color-mix(in srgb, var(--accent-amber) 12%, transparent);}
.dd-addcard-link{margin-top:.3rem;}

/* ══ Personal library — hero + quick actions ══ */
.lib-personal-hero{
  display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:.9rem 1.1rem;margin-bottom:1.1rem;
  border:1.5px solid var(--border);border-left:4px solid var(--accent-purple);
  border-radius:12px;background:var(--bg-card);
}
.lib-personal-hero-copy{min-width:240px;flex:1 1 300px;}
.lib-personal-hero-copy h3{margin:0 0 .3rem;font-size:1.05rem;color:var(--accent-purple);font-family:'JetBrains Mono',monospace;}
.lib-personal-hero-copy p{margin:0;font-size:.76rem;color:var(--text-secondary);line-height:1.55;max-width:60ch;}
.lib-personal-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.lib-personal-action{
  padding:.5rem .85rem;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--border-light);background:var(--bg-secondary);color:var(--text-primary);
  font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;white-space:nowrap;
  transition:border-color .12s ease, background .12s ease;
}
.lib-personal-action:hover{border-color:var(--accent-purple);}
.lib-personal-action-go{border-color:var(--accent-green);color:var(--accent-green);}
.lib-personal-action-go:hover{background:color-mix(in srgb, var(--accent-green) 12%, transparent);}

/* Shortcut sections (favorites / recent / most-used) render as COMPACT rows —
   icon + title side by side, description hidden — so the personal page reads
   as a workspace rather than a second copy of the Browse grid. The My
   Learning grid keeps the full-size tiles. */
.lib-custom-grid:not(.lib-custom-learning){grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem;}
.lib-custom-grid:not(.lib-custom-learning) .lib-hub-tile{
  flex-direction:row;align-items:center;gap:.55rem;padding:.5rem .7rem;min-height:0;text-align:left;
}
.lib-custom-grid:not(.lib-custom-learning) .lib-hub-tile .lht-icon{
  width:30px;height:30px;min-width:30px;font-size:.95rem;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
}
.lib-custom-grid:not(.lib-custom-learning) .lib-hub-tile .lht-title{font-size:.72rem;}
.lib-custom-grid:not(.lib-custom-learning) .lib-hub-tile .lht-desc{display:none;}

/* ══ Add-note modal — drag & drop affordance ══ */
.lib-note-modal.lib-note-dragover{position:relative;outline:2.5px dashed var(--accent-green);outline-offset:-6px;}
.lib-note-modal.lib-note-dragover::after{content:'Drop images to read them';position:absolute;inset:auto 50% .6rem auto;transform:translateX(50%);font-size:.7rem;color:var(--accent-green);font-weight:700;}
.lib-photo-cards-btn{border-color:var(--accent-purple)!important;color:var(--accent-purple)!important;background:transparent!important;}
.lib-photo-cards-btn:hover{background:color-mix(in srgb, var(--accent-purple) 12%, transparent)!important;}

/* ══ Labs — compact differential table (diagnosis + pearl) ══ */
.le-dx-table-wrap{margin-top:.55rem;overflow-x:auto;}
.le-dx-table{width:100%;border-collapse:collapse;font-size:.7rem;line-height:1.5;}
.le-dx-table th{text-align:left;padding:.35rem .5rem;border-bottom:1.5px solid var(--border-light);color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;}
.le-dx-table td{padding:.42rem .5rem;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-secondary);}
.le-dx-table td:first-child{font-weight:700;color:var(--text-primary);white-space:nowrap;}
.le-dx-table tr:last-child td{border-bottom:none;}
@media(max-width:640px){.le-dx-table td:first-child{white-space:normal;min-width:7.5em;}}

/* ══════════════════════════════════════════════════════════════
   LIBRARY SIMPLIFICATION (2026-08-20)
   8 primary tiles + collapsed "Browse curriculum" area, group
   sub-hubs (Orders & Medications / Diagnostics / Procedures &
   Skills), grouped sidebar headings, and the compact Shortcuts
   rows on the Personal dashboard.
   ══════════════════════════════════════════════════════════════ */

/* ── Browse curriculum (collapsed secondary modules on the hub) ── */
.lib-curriculum { width: 100%; margin-top: 1rem; }
.lib-curriculum-hdr {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border: 1px solid rgba(6,182,212,.35); border-radius: 10px;
  background: rgba(6,182,212,.08); color: var(--text-primary); cursor: pointer;
  font-family: 'DM Sans', sans-serif; transition: border-color .15s, background .15s;
  justify-content: center; text-align: center;
}
.lib-curriculum-hdr:hover { border-color: var(--accent-cyan); background: rgba(6,182,212,.14); }
.lib-curriculum-hdr .lib-curriculum-hdr-label { color: var(--accent-cyan); }
.lib-curriculum-hdr-label { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.lib-curriculum-hdr-sub { font-size: .7rem; color: var(--text-dim); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-curriculum-caret { font-size: .7rem; flex: 0 0 auto; transition: transform .2s; color: var(--accent-cyan); }
.lib-curriculum.lib-curriculum-open .lib-curriculum-hdr { border-color: var(--accent-cyan); }
.lib-curriculum.lib-curriculum-open .lib-curriculum-caret { transform: rotate(180deg); }
.lib-curriculum-grid { margin-top: .7rem; }
/* [hidden] must beat the .lib-hub-grid display:grid rule */
.lib-curriculum-grid[hidden] { display: none; }
/* Curriculum tiles render compact — icon + title only; the desc stays
   in the DOM (display:none) so captureMeta still records it. */
.lib-curriculum-grid .lib-hub-tile { padding: .7rem .6rem; gap: .35rem; }
.lib-curriculum-grid .lht-desc { display: none; }

/* ── Group sub-hubs (Orders & Medications / Diagnostics / Skills) ── */
body .lib-hub-grid.lib-subhub-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
body .lib-hub-grid.lib-subhub-grid.lib-subhub-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 840px; }
@media (max-width: 480px) { body .lib-hub-grid.lib-subhub-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { body .lib-hub-grid.lib-subhub-grid.lib-subhub-grid-3 { grid-template-columns: 1fr; } }
.lib-subhub-note {
  margin: 1rem 0 0; font-size: .68rem; color: var(--text-dim); line-height: 1.55;
  border-top: 1px solid var(--border); padding-top: .7rem; max-width: 62ch;
}
.lib-inline-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent-cyan); font-size: inherit; font-family: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.lib-inline-link:hover { color: var(--accent-blue); }

/* ── Sidebar sub-headings (Quick tools / Curriculum) ── */
.lib-sidebar-subhdr {
  display: block; margin: .55rem 0 .15rem; padding: 0 .55rem;
  font-family: 'JetBrains Mono', monospace; font-size: .66rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
  user-select: none;
}

/* ── Personal dashboard: compact Shortcuts rows ── */
.lib-shortcut-groups { display: flex; flex-direction: column; gap: .85rem; }
.lib-shortcut-group { display: flex; flex-direction: column; gap: .35rem; }
.lib-shortcut-group-label {
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}
.lib-shortcut-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem; }
.lib-shortcut-row {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary); cursor: pointer;
  font-family: 'DM Sans', sans-serif; text-align: left;
  transition: border-color .15s, background .15s;
}
.lib-shortcut-row:hover { border-color: var(--accent-cyan); background: var(--bg-card-hover); }
.lib-shortcut-icon {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.lib-shortcut-title { font-size: .72rem; font-weight: 600; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The pin star inherits .lib-tile-fav (absolute in tile corners) —
   inside a shortcut row it flows inline at the right edge instead. */
.lib-shortcut-row .lib-tile-fav { position: static; margin-left: auto; font-size: .8rem; }

/* ── Header pill breadcrumb (2026-08-20b) ─────────────────────────
   The breadcrumb trail now lives IN the page-header top-left row as a
   sequence of pill "tabs" (rendered by _xrefRenderCrumb in
   libraryRelated.js, which hides the native h2 + static shortcut pills
   while it owns the row). Last pill = current location, highlighted. */
.lib-crumb-pills { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; min-width: 0; row-gap: .3rem; }
/* Larger, clearly-bordered breadcrumb pills — this trail is now the primary
   way back (the in-page "← Back to …" links were removed). */
.lib-crumb-pill { white-space: nowrap; font-size: .75rem; font-weight: 700; padding: .34rem .72rem; border-width: 1.5px; border-radius: 8px; }
.lib-crumb-pill-link { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.lib-crumb-pill-link:hover { background: rgba(6,182,212,.12); }
.lib-crumb-pill-current {
  border-color: var(--accent-cyan); background: rgba(6,182,212,.10);
  color: var(--text-primary); font-family: 'JetBrains Mono', monospace;
  font-weight: 700; cursor: default;
}
.lib-crumb-pill-static { cursor: default; color: var(--text-secondary); }
.lib-crumb-pill-sep { color: var(--text-dim); opacity: .6; font-size: .72rem; user-select: none; }
@media (max-width: 620px) {
  .lib-crumb-pill { font-size: .68rem; padding: .28rem .5rem; border-width: 1px; }
  .lib-crumb-pill-sep { display: none; }
  /* The role badge duplicates what the account menu already shows and was
     painting straight over the breadcrumb trail on phones — the account
     chip alone is the identity affordance at this size. */
  .role-badge { display: none !important; }
  /* Keep the header's crumb row clear of the fixed account chip (right)
     and the fixed ☰ menu button (left); pills wrap onto extra rows
     instead of sliding underneath the floating chrome. Scoped to the
     library shell — Home/landing hide both floating chips. */
  body.lib-shell .page-header { padding-right: calc(96px + env(safe-area-inset-right, 0px)); padding-left: 60px; flex-wrap: wrap; row-gap: .3rem; }
}

/* ── Consults: common on-call conveyor (2026-08-20b) ──────────────
   Replaces the static 4×2 quick grid with a single-line, slowly
   revolving marquee. The track holds the tile set twice; animating to
   translateX(-50%) then looping is seamless because each half is an
   identical flex row. Hover/focus pauses it (so tiles are clickable);
   reduced-motion users get a static wrapped row instead. */
.cp-quick-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  padding: .25rem 0;
}
/* max-width:none: the consults page's `.ref-page-content *` wildcard caps
   every descendant at 100%, which crushed the track + halves to the
   container width — the two halves then overlapped (tiles painting over
   each other at the seam) and the -50% loop point no longer equaled one
   tile set, causing a visible jump at the end of each cycle. */
.ref-page-content .cp-quick-track, .cp-quick-track { display: flex; width: max-content; max-width: none; animation: cpQuickScroll 48s linear infinite; }
.cp-quick-marquee:hover .cp-quick-track,
.cp-quick-marquee:focus-within .cp-quick-track { animation-play-state: paused; }
.ref-page-content .cp-quick-half, .cp-quick-half { display: flex; gap: .55rem; padding-right: .55rem; max-width: none; }
.cp-quick-half .cp-quick-tile { flex: 0 0 auto; min-width: 172px; }
@keyframes cpQuickScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cp-quick-track { animation: none; width: auto; flex-direction: column; }
  .cp-quick-half { flex-wrap: wrap; padding-right: 0; }
  .cp-quick-half + .cp-quick-half { display: none; }
}

/* ── Shared conveyor-belt component (2026-08-21c) ──────────────────
   Generic version of the consults marquee, reused by the Clinical
   Trials, Procedures, and Personal due-cards belts. Same mechanics:
   the tile set renders twice inside one track, translateX(-50%) loops
   seamlessly, hover/focus pauses, reduced-motion (or .lib-belt-static
   for short tile sets) falls back to a static wrapped row. max-width
   is declared explicitly because reference pages carry a
   `.ref-page-content * { max-width:100% }` wildcard that would
   otherwise crush the intrinsic track width (see consults fix). */
.lib-belt {
  overflow: hidden; position: relative; width: 100%; padding: .25rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.lib-belt-track { display: flex; width: max-content; max-width: none; animation: libBeltScroll var(--belt-dur, 48s) linear infinite; }
.lib-belt:hover .lib-belt-track,
.lib-belt:focus-within .lib-belt-track { animation-play-state: paused; }
.lib-belt-half { display: flex; gap: .55rem; padding-right: .55rem; max-width: none; flex: 0 0 auto; }
@keyframes libBeltScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lib-belt-static { -webkit-mask-image: none; mask-image: none; }
.lib-belt-static .lib-belt-track { animation: none; width: auto; max-width: 100%; }
.lib-belt-static .lib-belt-half { flex-wrap: wrap; padding-right: 0; }
.lib-belt-static .lib-belt-half + .lib-belt-half { display: none; }
@media (prefers-reduced-motion: reduce) {
  .lib-belt { -webkit-mask-image: none; mask-image: none; }
  .lib-belt-track { animation: none; width: auto; max-width: 100%; }
  .lib-belt-half { flex-wrap: wrap; padding-right: 0; }
  .lib-belt-half + .lib-belt-half { display: none; }
}
/* Generic belt tile — accent color via --belt-accent (inline style). */
.lib-belt-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .18rem;
  padding: .6rem .7rem; min-width: 180px; max-width: 280px; flex: 0 0 auto;
  border: 1px solid var(--border); border-left: 3px solid var(--belt-accent, var(--accent-cyan));
  border-radius: 10px; background: var(--bg-card); color: var(--text-primary);
  cursor: pointer; text-align: left; font-family: 'DM Sans', sans-serif;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lib-belt-tile:hover { transform: translateY(-2px); border-color: var(--belt-accent, var(--accent-cyan)); box-shadow: 0 3px 12px rgba(0,0,0,.06); }
.lib-belt-tile-title { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; line-height: 1.25; color: var(--belt-accent, var(--text-primary)); }
.lib-belt-tile-sub { font-size: .68rem; color: var(--text-dim); letter-spacing: .02em; line-height: 1.35; }
.lib-belt-kicker { font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700; color: var(--text-dim); letter-spacing: .05em; margin: .2rem 0 .15rem; width: 100%; }
.lib-due-tile { --belt-accent: var(--accent-amber, #f59e0b); }

/* ── Medication card readability pass (2026-08-22) ─────────────────
   Section separators + hazard bullets. Pearls/side-effects sections
   open with a hairline rule so DOSE / PEARLS / SIDE EFFECTS read as
   distinct blocks rather than a single wall. ⚠-authored pearls render
   as amber hazard bullets (class set in drugs.js renderDrugBody). */
.drug-pearls, .drug-se { border-top: 1px solid var(--border); padding-top: .75rem; }
.drug-pearl-list li.drug-pearl-warn {
  list-style: none; margin: .1rem 0 .5rem -1.1rem;
  padding: .4rem .6rem .4rem .65rem;
  background: rgba(245,158,11,.08); border-left: 3px solid var(--accent-amber);
  border-radius: 0 8px 8px 0;
}
.drug-pearl-list li.drug-pearl-warn::before { content: '⚠ '; color: var(--accent-amber); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   AESTHETIC PASS (2026-08-22c): ring+streak, skeletons, staggered
   entrances, count-ups, success burst. Motion rule: one ambient
   mover per screen; everything else is interaction-triggered and
   under ~1s. All of it disabled under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ── Daily Flashcards ring + streak ── */
.dd-head { align-items: center; gap: .7rem; }
.dd-head-copy { flex: 1 1 auto; min-width: 0; }
.dd-ring-wrap { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.dd-ring { transform: rotate(-90deg); display: block; }
.dd-ring-bg { fill: none; stroke: var(--border); stroke-width: 4; }
.dd-ring-fg { fill: none; stroke: var(--accent-green); stroke-width: 4; stroke-linecap: round; animation: ddRingIn .9s ease-out; }
@keyframes ddRingIn { from { stroke-dashoffset: 106.8; } }
.dd-ring-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 800; color: var(--text-primary);
}
/* done/total fraction ("8/20") needs a tighter face to fit the ring */
.dd-ring-num.dd-ring-frac { font-size: .66rem; letter-spacing: -.02em; }
.dd-ring-num.dd-ring-done { color: var(--accent-green); }
.dd-streak {
  display: inline-block; margin-top: .3rem; font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--accent-amber);
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3);
  padding: .16rem .5rem; border-radius: 999px;
}

/* ── Skeleton shimmer loaders ── */
.skel { position: relative; overflow: hidden; border-radius: 6px; background: color-mix(in srgb, var(--text-dim) 14%, transparent); }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-card) 60%, transparent), transparent);
  animation: skelShimmer 1.2s ease-in-out infinite;
}
@keyframes skelShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skel-line { height: 10px; margin: .35rem 0; }
.skel-card { height: 52px; border-radius: 10px; margin: .45rem 0; }
.lib-skel-block { width: 100%; padding: .35rem 0; }
/* Page-module loading skeleton — centered content-shaped placeholder that
   fades in, so the transition reads as intentional rather than a stray bar. */
.page-module-loading { width: 100%; max-width: 760px; margin: 0 auto; padding: 1.6rem 1rem 2rem; animation: pmlFade .3s ease-out; }
@keyframes pmlFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.page-module-loading .pml-title { width: 42%; height: 16px; margin: 0 auto 1.1rem; }
.page-module-loading .pml-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.page-module-loading .pml-card { height: 68px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .page-module-loading { animation: none; } }
@media (max-width: 600px) { .page-module-loading .pml-grid { grid-template-columns: 1fr; } .page-module-loading .pml-title { width: 60%; } }

/* ── Staggered card entrances ── */
@media (prefers-reduced-motion: no-preference) {
  .lib-hub-grid > .lib-hub-tile,
  .lib-shortcut-list > .lib-shortcut-row,
  .cp-group-tiles > .cp-spec-tile { animation: tileIn .6s cubic-bezier(.22, .61, .36, 1) backwards; }
  .lib-hub-grid > :nth-child(1), .lib-shortcut-list > :nth-child(1), .cp-group-tiles > :nth-child(1) { animation-delay: .04s; }
  .lib-hub-grid > :nth-child(2), .lib-shortcut-list > :nth-child(2), .cp-group-tiles > :nth-child(2) { animation-delay: .09s; }
  .lib-hub-grid > :nth-child(3), .lib-shortcut-list > :nth-child(3), .cp-group-tiles > :nth-child(3) { animation-delay: .14s; }
  .lib-hub-grid > :nth-child(4), .lib-shortcut-list > :nth-child(4), .cp-group-tiles > :nth-child(4) { animation-delay: .19s; }
  .lib-hub-grid > :nth-child(5), .lib-shortcut-list > :nth-child(5), .cp-group-tiles > :nth-child(5) { animation-delay: .24s; }
  .lib-hub-grid > :nth-child(6), .lib-shortcut-list > :nth-child(6), .cp-group-tiles > :nth-child(6) { animation-delay: .29s; }
  .lib-hub-grid > :nth-child(7), .lib-shortcut-list > :nth-child(7), .cp-group-tiles > :nth-child(7) { animation-delay: .34s; }
  .lib-hub-grid > :nth-child(8), .lib-shortcut-list > :nth-child(8), .cp-group-tiles > :nth-child(8) { animation-delay: .39s; }
  .lib-hub-grid > :nth-child(n+9), .lib-shortcut-list > :nth-child(n+9), .cp-group-tiles > :nth-child(n+9) { animation-delay: .44s; }
}
@keyframes tileIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
/* Belts manage their own motion — never double-animate their tiles. */
.lib-belt .lib-hub-tile, .lib-belt .lib-belt-tile { animation: none; }

/* ── Success burst (deck cleared) ── */
.lib-burst { position: fixed; z-index: 400; pointer-events: none; width: 0; height: 0; }
.lib-burst-dot {
  position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  animation: libBurst .75s ease-out forwards;
}
@keyframes libBurst {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--bx, 0), var(--by, -40px)) scale(.35); opacity: 0; }
}
.dd-done-emoji { animation: ddDonePop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ddDonePop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .skel::after, .dd-ring-fg, .dd-done-emoji { animation: none; }
  .lib-burst { display: none; }
}

/* ── FOTD rich formatting + chat save-as-flashcard (2026-08-22e) ── */
.fotd-sec {
  font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fotd-accent, var(--accent-green));
  margin: .85rem 0 .35rem; padding-bottom: .25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fotd-accent, #22c55e) 30%, transparent);
}
.fotd-sec:first-child { margin-top: 0; }
.fotd-row { font-size: .85rem; line-height: 1.65; margin: 0 0 .45rem; color: var(--text-primary); }
.fotd-row strong { font-weight: 700; }
#fotd-modal-body { white-space: normal !important; }
.fotd-txt strong { font-weight: 700; }
.lib-chat-cardrow { margin-top: .5rem; }
.lib-chat-cardbtn {
  font-family: 'DM Sans', sans-serif; font-size: .72rem; font-weight: 700;
  color: var(--accent-amber); background: transparent;
  border: 1px solid rgba(245,158,11,.35); border-radius: 999px;
  padding: .22rem .6rem; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.lib-chat-cardbtn:hover:not(:disabled) { background: rgba(245,158,11,.1); transform: translateY(-1px); }
.lib-chat-cardbtn:disabled { opacity: .75; cursor: default; }

/* ── Trials active-search banner (2026-08-22g) ────────────────────
   Shown whenever a query (typed, or set by a Landmark-spotlight belt
   click) is filtering the trial list — the specialty chips are
   overridden in that state, which used to read as a dead click. */
.ct-search-banner {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
  width: 100%; margin: .2rem 0 .55rem; padding: .5rem .75rem;
  background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.35); border-radius: 10px;
  font-size: .74rem; color: var(--text-primary); line-height: 1.5;
}
.ct-search-banner strong { font-family: 'JetBrains Mono', monospace; }
.ct-search-clear-btn {
  font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: var(--accent-cyan); background: transparent;
  border: 1px solid rgba(6,182,212,.45); border-radius: 999px; padding: .28rem .7rem; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.ct-search-clear-btn:hover { background: rgba(6,182,212,.12); transform: translateY(-1px); }

/* ── Batch-complete check (2026-08-22j) ───────────────────────────
   A quick self-drawing checkmark for finishing a 10-card set when
   more cards remain — the small win gets a small celebration (the
   full-deck clear keeps the bigger dot burst). Circle sweeps in,
   then the check strokes itself, with a tiny spring pop. */
.dd-done-check { display: flex; justify-content: center; margin-bottom: .35rem; animation: ddCheckPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.dd-check-circle {
  fill: none; stroke: var(--accent-green); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 144.5; stroke-dashoffset: 0;
  transform-origin: center; transform: rotate(-90deg);
  animation: ddCheckCircle .5s ease-out backwards;
}
.dd-check-mark {
  fill: none; stroke: var(--accent-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 0;
  animation: ddCheckMark .3s ease-out .4s backwards;
}
@keyframes ddCheckCircle { from { stroke-dashoffset: 144.5; } }
@keyframes ddCheckMark { from { stroke-dashoffset: 34; } }
@keyframes ddCheckPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dd-done-check, .dd-check-circle, .dd-check-mark { animation: none; }
}

/* ── Personal hero Add-a-note = the green CTA look (2026-08-22k) ──
   The standalone Add-note bar is hidden on the Personal layout (see
   applyLibLayout); its green-bordered styling moves onto the hero's
   own Add-a-note action so the capture point stays just as visible. */
.lib-personal-action-note { border: 1.5px solid var(--accent-green); background: rgba(34,197,94,.1); color: var(--accent-green); }
.lib-personal-action-note:hover { background: rgba(34,197,94,.18); transform: translateY(-1px); }

/* ── My Notes back button + standalone-note hints (2026-08-22l) ── */
.lib-notes-backbtn {
  font-family: 'DM Sans', sans-serif; font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: var(--accent-cyan); background: rgba(6,182,212,.07);
  border: 1px solid rgba(6,182,212,.45); border-radius: 999px; padding: .3rem .75rem; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.lib-notes-backbtn:hover { background: rgba(6,182,212,.14); transform: translateY(-1px); }
.lib-photo-pearl-hint {
  margin-top: .4rem; padding: .4rem .55rem; border-left: 2px solid var(--border);
  font-size: .7rem; color: var(--text-dim); line-height: 1.55;
}
.lib-photo-pearl-hint strong { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════
   AESTHETIC SYSTEM PASS (2026-08-23b)
   Elevation tokens · theme-swap guard · case-view block cards ·
   vitals strip · order chips · score reveal · drill ceremony ·
   empty-state CTAs · skeletons · mastery spine · focal tile
   ══════════════════════════════════════════════════════════════ */

/* ── Elevation + nested-surface tokens ── */
:root{
  --bg-card-nested:#212b44; /* dark default; light value set by theme JS */
  --shadow-1:0 1px 3px rgba(2,6,23,.07),0 1px 2px rgba(2,6,23,.05);
  --shadow-2:0 4px 16px rgba(2,6,23,.10),0 2px 6px rgba(2,6,23,.06);
  --shadow-3:0 16px 48px rgba(2,6,23,.22);
}
.landing-card,.lib-hub-tile,.fotd-inner,.ra-card,.sc,.si,.pg-card{box-shadow:var(--shadow-1);}
.drills-modal,.fotd-modal,.rsi-modal{box-shadow:var(--shadow-3);}

/* ── Theme-swap transition guard (see _applyPalette in ui.js) ── */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after{transition:none!important;}

/* ── Case view: clinical block cards ─────────────────────────── */
.ai-card{background:var(--bg-card-nested);border:1px solid var(--border);border-radius:10px;padding:.55rem .8rem .6rem;margin:.55rem 0;}
.ai-card>h3{margin-top:0!important;}
.ai-card-results{border-top:2px solid var(--accent-cyan);}
.ai-card-meds{border-top:2px solid var(--accent-purple);}
.ai-card-page{border-top:2px solid var(--accent-blue);}
.ai-card ul{margin-left:.9rem;}
.ai-callout{border:1px solid var(--border);border-left:3px solid var(--accent-amber);background:color-mix(in srgb,var(--accent-amber) 7%,var(--bg-card-nested));border-radius:8px;padding:.55rem .75rem;margin:.55rem 0;}
.ai-callout-good{border-left-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 7%,var(--bg-card-nested));}
.ai-complete-banner{position:relative;border:1px solid var(--border);border-top:2px solid var(--accent-red);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-red) 8%,var(--bg-card-nested)),var(--bg-card-nested));border-radius:10px;padding:.7rem .85rem;margin:.7rem 0 .45rem;font-weight:600;letter-spacing:.01em;}

/* Vitals strip — compact inline row replacing the 5-line bullet cluster.
   Formatting of content already in the transcript; NOT a persistent status
   ribbon (deliberately no stickiness, no state colors, no pulses). */
.vitals-strip{display:flex;flex-wrap:wrap;gap:.3rem .45rem;margin:.4rem 0 .55rem;}
.vitals-strip .vs-item{font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.35;background:var(--bg-card-nested);border:1px solid var(--border);border-radius:7px;padding:.22rem .5rem;white-space:nowrap;}

/* ── User bubble: treatment chips for submitted orders ── */
.msg-user .msg-user-text{white-space:pre-wrap;}
.order-chips-lbl{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin:.5rem 0 .3rem;}
.order-chips{display:flex;flex-wrap:wrap;gap:.3rem;}
.order-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.2rem .6rem;font-size:.7rem;font-weight:600;line-height:1.3;}

/* ── Chat header badges: one quiet segmented pill ── */
#ch-badges{display:inline-flex;align-items:stretch;gap:0;border-radius:999px;overflow:hidden;border:1px solid var(--border);}
#ch-badges .badge{border-radius:0;margin:0;border:none;border-right:1px solid var(--border);}
#ch-badges .badge:last-child{border-right:none;}

/* ── Score reveal ── */
.score-reveal{align-self:center;display:flex;align-items:center;gap:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-2);padding:1rem 1.4rem;margin:.6rem 0;animation:fadeIn .4s ease;max-width:85%;}
.sr-ring-wrap{position:relative;width:92px;height:92px;flex:0 0 auto;}
.sr-ring{width:100%;height:100%;transform:rotate(-90deg);}
.sr-track{fill:none;stroke:var(--border);stroke-width:8;}
.sr-fill{fill:none;stroke-width:8;stroke-linecap:round;}
.sr-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;}
.sr-meta{display:flex;flex-direction:column;gap:.15rem;}
.sr-cap{font-family:'JetBrains Mono',monospace;font-size:.86rem;font-weight:700;letter-spacing:.02em;}
.sr-sub{font-size:.72rem;color:var(--text-dim);}
.sr-ecg{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--accent-red),transparent);opacity:.5;border-radius:2px;}
@media (prefers-reduced-motion: reduce){.score-reveal{animation:none;}}

/* ── Daily Drill ceremony ── */
.drills-modal{max-width:600px;}
.dd-cloze-text{font-size:.95rem;line-height:1.65;}
.dd-dots{display:inline-flex;gap:.22rem;margin-right:.5rem;vertical-align:middle;}
.dd-dot{width:7px;height:7px;border-radius:50%;background:var(--border);display:inline-block;}
.dd-dot-done{background:var(--accent-green);}
.dd-dot-cur{background:var(--accent-purple);transform:scale(1.25);}
.dd-resp{transition:background .15s,border-color .15s,color .15s,transform .08s;}
.dd-resp:active{transform:scale(.96);}
.dd-resp.dd-again{border-color:color-mix(in srgb,var(--accent-red) 45%,var(--border));}
.dd-resp.dd-hard{border-color:color-mix(in srgb,var(--accent-amber) 45%,var(--border));}
.dd-resp.dd-good{border-color:color-mix(in srgb,var(--accent-green) 45%,var(--border));}
.dd-resp.dd-easy{border-color:color-mix(in srgb,var(--accent-cyan) 45%,var(--border));}
.dd-reveal{font-weight:700;border:1.5px solid var(--accent-purple)!important;color:var(--accent-purple);}
.dd-reveal:hover{background:color-mix(in srgb,var(--accent-purple) 12%,transparent);}

/* ── Empty-state CTA pattern ── */
.empty-cta{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;padding:1.6rem 1rem;}
.empty-cta-emoji{font-size:1.9rem;}
.empty-cta-title{font-family:'JetBrains Mono',monospace;font-size:.92rem;font-weight:700;color:var(--text-primary);}
.empty-cta-sub{font-size:.76rem;color:var(--text-secondary);max-width:380px;line-height:1.55;}
.empty-cta-btn{margin-top:.5rem;background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(168,85,247,.10));border:1px solid var(--accent-red);border-radius:999px;color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:.76rem;font-weight:700;padding:.45rem 1rem;cursor:pointer;transition:box-shadow .15s,transform .15s;}
.empty-cta-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(239,68,68,.18);}

/* ── Landing skeleton tiles (replaced by JS renders) ── */
.skel-tile{height:150px;border-radius:12px;}

/* ── Library hub: focal first tile ── */
@media(min-width:701px){.lib-hub-tile.lib-tile-priority{grid-column:span 2;}}

/* ── Progress: Mastery Map hero ── */
.pg-hero{grid-column:1/-1;}
.pg-hero-summary{display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;margin:.35rem 0 .75rem;}
.pg-hs-item{display:flex;flex-direction:column;gap:.1rem;}
.pg-hs-lbl{font-size:.66rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.pg-hs-val{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--text-primary);}
.pg-hs-val.pg-hs-opp{color:var(--accent-amber);}
.pg-spine{display:flex;flex-direction:column;gap:.42rem;}
.pg-spine-row{display:grid;grid-template-columns:minmax(110px,180px) 1fr minmax(96px,auto);gap:.6rem;align-items:center;}
.pg-spine-name{font-size:.75rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pg-spine-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--text-dim) 16%,transparent);overflow:hidden;}
.pg-spine-fill{height:100%;border-radius:999px;background:var(--accent-purple);min-width:4px;}
.pg-spine-val{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap;}
.pg-spine-n{font-family:'DM Sans',sans-serif;font-weight:500;color:var(--text-dim);margin-left:.25rem;}
.pg-spine-row.pg-spine-opp .pg-spine-fill{background:var(--accent-amber);}
.pg-spine-more{font-size:.7rem;color:var(--text-dim);margin-top:.4rem;}
.pg-hero-next{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.8rem;padding-top:.65rem;border-top:1px solid var(--border);font-size:.78rem;color:var(--text-secondary);}

/* ── Flashcard deck: visible cloze answers ── */
.lib-fc-cloze{background:color-mix(in srgb,var(--accent-cyan) 16%,transparent);border-bottom:1.5px solid var(--accent-cyan);border-radius:3px;padding:0 3px;font-weight:600;}

/* ── Quieter permanent disclaimer chip outside the sim ── */
body:not(.page-chat) #disclaimer-restore-pill{opacity:.55;transform:scale(.92);transform-origin:bottom left;transition:opacity .15s,transform .15s;}
body:not(.page-chat) #disclaimer-restore-pill:hover{opacity:1;transform:scale(1);}

/* ── Pocket guide readability (type scale, 2026-09-01) ────────────
   The guide's body copy was .68rem — about 11px at the default root,
   too small to read comfortably at 100% zoom. Everything the reader
   actually reads steps up here, keeping the original hierarchy
   (chip < body < sub-header < section header < card title).

   This block lives late in the file ON PURPOSE: the base rules sit
   near line 1877 and a shared cross-page rule (~line 8038) also sizes
   .mgh-section-hdr. Same specificity means source order decides, so
   these must come after both. Do not move this block earlier. Sizing
   .mgh-lib-content also lifts the inline .mgh-sub-hdr, which has no
   size of its own, and the sibling reference pages (Labs, Consults,
   Palliation, Radiology) that share this renderer. */
.mgh-lib-content{font-size:.92rem;}
.mgh-para,
.mgh-bullet,
.mgh-numbered{font-size:.86rem;}
.mgh-numbered strong{font-size:.86rem;}
.mgh-sub-bullet{font-size:.84rem;}
.mgh-sub-hdr-block{font-size:.9rem;}
.mgh-section-hdr{font-size:.92rem;}
.mgh-lib-topic{font-size:.95rem;}
.mgh-lib-chapter{font-size:.7rem;}
/* Slightly more leading now that the glyphs are bigger. */
.mgh-bullet,.mgh-sub-bullet,.mgh-para,.mgh-numbered{line-height:1.68;}

/* ══════════════════════════════════════════════════════════════
   LANDING RELAYOUT (2026-08-23c) — wide-screen dashboard grid
   ══════════════════════════════════════════════════════════════ */
.landing-container{max-width:1140px;padding:2rem 1.5rem 3rem;}
.quick-start-btn{max-width:none;}
/* Equal-tile primary grid: 4-across → 2×2 → 1 column */
.landing-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;align-items:stretch;}
@media(max-width:1100px){.landing-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.landing-grid-4{grid-template-columns:1fr;}}
.landing-grid-4>.landing-card{height:100%;}
/* 2026-08-29 rearrangement: Scores & Data lives in row 1 (it's a
   dashboard, not a daily push); Daily Flashcards moved down to row 2 so
   all three DAILY tiles (My Notes · Fact of the Day · Daily Flashcards)
   share one band, with Flashcards featured wider as the actionable one. */
.landing-grid-4>#my-assignments-tile,.landing-grid-4>#recent-attempts-card{display:flex;min-width:0;}
.landing-grid-4>#my-assignments-tile>*,.landing-grid-4>#recent-attempts-card>*{width:100%;height:100%;box-sizing:border-box;}
.landing-grid-4 .ma-tile,.landing-grid-4 .ra-card{height:100%;box-sizing:border-box;}
/* The two product tiles now carry the same accent-border grammar as the
   personal tiles (assignments amber, flashcards green) — sim red, library cyan. */
.landing-card.lc-sim{border-color:color-mix(in srgb,var(--accent-red) 45%,var(--border));}
.landing-card.lc-lib{border-color:color-mix(in srgb,var(--accent-cyan) 45%,var(--border));}
/* Second row — the daily band: My Notes · Fact of the Day · Daily
   Flashcards, three EQUAL tiles (2026-08-29b: equal-width per user;
   the whole band shares the Daily Flashcards tile's visual language —
   full 1.5px neon accent border + lightly shaded gradient + soft glow —
   in three deliberately distant hues: pink · blue · green). */
.landing-row-2{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;margin-top:1rem;align-items:stretch;}
@media(max-width:1100px){.landing-row-2{grid-template-columns:1fr;}}
.landing-row-2>#daily-drills-card{width:100%;min-width:0;display:flex;}
.landing-row-2>#daily-drills-card>*{width:100%;box-sizing:border-box;}
.landing-row-2 .dd-card{height:100%;box-sizing:border-box;}
.landing-row-2>.fotd{width:100%;min-width:0;margin-top:0;margin-bottom:0;max-width:none;}
/* FOTD on the landing band: drop the stacked-deck look (offset ghost
   card + partial top bar) for the same clean full-border neon card as
   its neighbors, in a FIXED blue (the app's "from the library" color) —
   the per-specialty --fotd-accent still colors the date chip + topic
   inside, but the frame stays stable so the band reads pink·blue·green. */
.landing-row-2>.fotd{
  --fotd-chrome:#3b82f6;
  border:1.5px solid color-mix(in srgb, var(--fotd-chrome) 55%, transparent);
  border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--fotd-chrome) 10%, transparent), color-mix(in srgb, var(--fotd-chrome) 3%, transparent) 60%, transparent), var(--bg-card);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--fotd-chrome) 9%, transparent);
}
.landing-row-2>.fotd:hover{transform:translateY(-2px);box-shadow:0 0 0 5px color-mix(in srgb, var(--fotd-chrome) 14%, transparent),0 6px 18px rgba(0,0,0,.08);}
.landing-row-2>.fotd::before,.landing-row-2>.fotd::after{display:none;}
.landing-row-2 .fotd-inner{height:100%;box-sizing:border-box;display:flex;flex-direction:column;}
.landing-row-2 .fotd-actions{margin-top:auto;}
/* Recent-attempts footer links centered (landing + anywhere the card renders) */
.ra-foot{justify-content:center;}
/* Faculty tile matches the new full content width */
.landing-faculty-tile{max-width:none;width:100%;}

/* ── Library hub: institution tile is a normal 2-column priority tile,
     matching the Clinical Pocket Guide tile it now sits beside on the top
     row (previously it was forced full-width). ── */
.lib-hub-tile[data-tile-id="institution-docs"]{grid-column:span 2;}
@media(max-width:700px){.lib-hub-tile[data-tile-id="institution-docs"]{grid-column:span 2;}}
@media(max-width:420px){.lib-hub-tile[data-tile-id="institution-docs"]{grid-column:auto;}}

/* ── Two-step status picker (roles.js) ── */
.status-edit-modal{max-width:480px;}
.se-step-lbl{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase;margin-top:.5rem;}
.se-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:.3rem;}
@media(max-width:460px){.se-role-grid{grid-template-columns:repeat(2,1fr);}}
.se-role{border:1.5px solid var(--border);border-radius:10px;background:var(--bg-secondary);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;padding:.55rem .4rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.se-role:hover{border-color:var(--accent-cyan);}
.se-role.se-role-on{border-color:var(--accent-purple);background:color-mix(in srgb,var(--accent-purple) 12%,var(--bg-secondary));color:var(--text-primary);}
.se-level-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem;}
.se-chip{border:1.5px solid var(--border);border-radius:999px;background:var(--bg-secondary);color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;padding:.35rem .75rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s;}
.se-chip:hover{border-color:var(--accent-cyan);color:var(--text-primary);}
.se-chip.se-chip-on{border-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 14%,var(--bg-secondary));color:var(--text-primary);}
.se-custom-link{background:none;border:none;color:var(--text-dim);font-size:.68rem;text-decoration:underline;cursor:pointer;margin-top:.55rem;align-self:flex-start;padding:0;}
.se-custom-link:hover{color:var(--accent-cyan);}

/* ── Sim setup: read-only profile status summary ── */
.setup-status-summary{display:flex;align-items:flex-start;gap:.6rem;background:var(--bg-card-nested);border:1px solid var(--border);border-left:3px solid var(--accent-purple);border-radius:10px;padding:.65rem .85rem;margin-top:.4rem;}
.setup-status-summary .sss-icon{font-size:1.1rem;line-height:1.2;}
.setup-status-summary .sss-text{display:flex;flex-direction:column;gap:.15rem;font-size:.8rem;color:var(--text-primary);}
.setup-status-summary .sss-sub{font-size:.7rem;color:var(--text-dim);line-height:1.45;}
/* Setup-page Home shortcut — its own class on purpose: .theme-pill labels are
   rewritten by the theme-sync code and hidden on this page. */
.hdr-home-pill{background:var(--bg-card);border:1px solid var(--border);border-radius:999px;color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;padding:.32rem .7rem;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.hdr-home-pill:hover{border-color:var(--accent-cyan);box-shadow:var(--shadow-1);}

/* ══════════════════════════════════════════════════════════════
   ROUND 4 (2026-08-23d)
   ══════════════════════════════════════════════════════════════ */

/* ── Library tiles: centered text everywhere ───────────────────
   The base .lib-hub-tile has always been a centered column, but two
   variants opted out and read as ragged next to their neighbours:
   the full-width Institution-Specific tile (a left-aligned row) and
   the compact Personal-page tiles (also a left-aligned row). Both are
   now centered, and the compact shortcut rows on the Personal page
   center with them so the whole page shares one alignment. */
.lib-hub-tile[data-tile-id="institution-docs"]{
  justify-content:center;text-align:center;
}
.lib-hub-tile[data-tile-id="institution-docs"] .lht-desc{text-align:center;flex:0 1 auto;}
.lib-custom-grid:not(.lib-custom-learning) .lib-hub-tile{
  justify-content:center;text-align:center;
}
.lib-shortcut-row{justify-content:center;text-align:center;}
.lib-shortcut-title{text-align:center;}
/* The pin star is absolutely positioned so it never pushes the
   centered title off-axis. */
.lib-shortcut-row{position:relative;}
.lib-shortcut-row .lib-tile-fav,
.lib-shortcut-row .fav-star{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);}
.lib-hub-grid .lib-hub-tile,
.lib-group .lib-hub-tile,
.lib-subhub-grid .lib-hub-tile,
.lib-curriculum-grid .lib-hub-tile{text-align:center;}
.lib-hub-grid .lht-title,.lib-hub-grid .lht-desc,
.lib-group .lht-title,.lib-group .lht-desc,
.lib-subhub-grid .lht-title,.lib-subhub-grid .lht-desc{text-align:center;}

/* ── Fact of the Day: "Make flashcards" action ─────────────────
   Purple to match the flashcard language used everywhere else in the
   app (🃏 / My Flashcards / Daily Drills accents). */
.fotd-btn-cards{color:var(--accent-purple);border-color:rgba(168,85,247,.4);}
.fotd-btn-cards:hover:not(:disabled){background:rgba(168,85,247,.1);}
.fotd-btn-cards:disabled{opacity:.6;cursor:default;}

/* ── Flashcard editors: "add another card" affordances ─────────
   The generated-set deck gains an inline author button and a two-key
   reorder control; the single-card editor gains a save-and-continue
   button. Both sit in existing rows, so nothing above them moves. */
.fc-deck-cardactions{justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;}
.fc-deck-addcard{
  padding:.35rem .7rem;border-radius:8px;
  border:1.5px solid rgba(168,85,247,.5);background:rgba(168,85,247,.08);
  color:var(--accent-purple);font-family:'DM Sans',sans-serif;
  font-size:.72rem;font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.fc-deck-addcard:hover{background:rgba(168,85,247,.16);transform:translateY(-1px);}
.fc-deck-movegrp{display:inline-flex;gap:.3rem;}
.fc-deck-move{
  width:1.9rem;height:1.9rem;border-radius:8px;
  border:1.5px solid var(--border);background:var(--bg-input);
  color:var(--text-secondary);font-size:.8rem;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.fc-deck-move:hover:not(:disabled){background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent-cyan);}
.fc-deck-move:disabled{opacity:.35;cursor:default;}
.fc-preview-ftr .fc-preview-another{
  border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.08);
  color:var(--accent-purple);font-weight:700;margin-right:auto;
}
.fc-preview-ftr .fc-preview-another:hover:not(:disabled){background:rgba(168,85,247,.16);}
.fc-preview-ftr .fc-preview-another:disabled{opacity:.5;cursor:default;}
@media(max-width:520px){
  .fc-preview-ftr{flex-wrap:wrap;}
  .fc-preview-ftr .fc-preview-another{margin-right:0;order:3;width:100%;}
}

/* ══════════════════════════════════════════════════════════════
   QUESTION OF THE DAY — ABIM-style board item (2026-08-23d)
   ══════════════════════════════════════════════════════════════
   Deliberately full landing width (wider than the two-up row above it):
   a board vignette plus five homogeneous answer choices needs the line
   length to read like the real exam. Indigo accent so it reads as its
   own study surface rather than a second Fact of the Day. */
.qotd{width:100%;margin-top:1rem;--qotd-accent:#6366f1;}
.qotd-inner{
  border:1.5px solid var(--border);border-radius:14px;
  background:var(--bg-card);box-shadow:var(--shadow-1);
  padding:1rem 1.15rem 1.15rem;position:relative;overflow:hidden;
}
.qotd-inner::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--qotd-accent),color-mix(in srgb,var(--qotd-accent) 30%,transparent));
}
.qotd-hdr{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.55rem;}
.qotd-lbl{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;color:var(--text-primary);text-align:center;flex:1;
}
.qotd-badge{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;
  letter-spacing:.09em;padding:.2rem .45rem;border-radius:999px;
  background:color-mix(in srgb,var(--qotd-accent) 14%,transparent);
  color:var(--qotd-accent);border:1px solid color-mix(in srgb,var(--qotd-accent) 35%,transparent);
  white-space:nowrap;
}
/* Ghost twin keeps the centered label optically centered. */
.qotd-badge-ghost{visibility:hidden;}

/* ── Idle / loading / error states ── */
.qotd-idle{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.qotd-idle-copy{min-width:0;flex:1;}
.qotd-idle-title{font-size:.84rem;font-weight:600;color:var(--text-primary);line-height:1.45;}
.qotd-idle-sub{font-size:.72rem;color:var(--text-secondary);margin-top:.2rem;line-height:1.45;}
.qotd-start{
  flex:0 0 auto;padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;
  border:1.5px solid var(--qotd-accent);color:var(--qotd-accent);
  background:color-mix(in srgb,var(--qotd-accent) 8%,transparent);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.qotd-start:hover{background:color-mix(in srgb,var(--qotd-accent) 16%,transparent);transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--qotd-accent) 22%,transparent);}
.qotd-loading{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-secondary);padding:.6rem 0;}
.qotd-spinner{
  width:.85rem;height:.85rem;border-radius:50%;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--qotd-accent) 30%,transparent);
  border-top-color:var(--qotd-accent);animation:qotdSpin .8s linear infinite;
}
@keyframes qotdSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.qotd-spinner{animation:none;}}

/* ── The question itself ── */
.qotd-src{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.4rem;
}
.qotd-stem{font-size:.84rem;line-height:1.62;color:var(--text-primary);max-width:82ch;}
.qotd-lead{font-size:.84rem;line-height:1.55;color:var(--text-primary);font-weight:600;margin:.7rem 0 .6rem;max-width:82ch;}
.qotd-choices{display:flex;flex-direction:column;gap:.4rem;max-width:82ch;}
.qotd-choice{
  display:flex;align-items:flex-start;gap:.6rem;width:100%;text-align:left;
  padding:.55rem .7rem;border-radius:10px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--bg-card);
  color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.79rem;line-height:1.45;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,opacity .15s ease;
}
.qotd-choice:hover:not(:disabled){border-color:var(--qotd-accent);background:var(--bg-card-hover);transform:translateX(2px);}
.qotd-choice:disabled{cursor:default;}
.qotd-choice-key{
  flex:0 0 auto;width:1.35rem;height:1.35rem;border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;
  background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);
}
.qotd-choice-txt{min-width:0;}
.qotd-choice-correct{border-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 9%,var(--bg-card));}
.qotd-choice-correct .qotd-choice-key{background:var(--accent-green);color:#fff;border-color:var(--accent-green);}
.qotd-choice-wrong{border-color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 8%,var(--bg-card));}
.qotd-choice-wrong .qotd-choice-key{background:var(--accent-red);color:#fff;border-color:var(--accent-red);}
.qotd-choice-muted{opacity:.5;}

.qotd-explain{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--border);max-width:82ch;}
.qotd-verdict{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;letter-spacing:.03em;margin-bottom:.35rem;}
.qotd-verdict-right{color:var(--accent-green);}
.qotd-verdict-wrong{color:var(--accent-red);}
.qotd-why{font-size:.76rem;line-height:1.55;color:var(--text-secondary);margin-bottom:.45rem;}
.qotd-teach{font-size:.79rem;line-height:1.6;color:var(--text-primary);}
.qotd-foot{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.85rem;justify-content:center;align-items:center;}
.qotd-foot-btn{
  padding:.4rem .8rem;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.73rem;font-weight:600;
  border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-secondary);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.qotd-foot-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);transform:translateY(-1px);}
.qotd-foot-card{color:var(--accent-purple);border-color:rgba(168,85,247,.45);}
.qotd-foot-card:hover{background:rgba(168,85,247,.12);color:var(--accent-purple);}
.qotd-foot-sim{color:var(--accent-red);border-color:rgba(239,68,68,.45);}
.qotd-foot-sim:hover{background:rgba(239,68,68,.10);color:var(--accent-red);}

@media(max-width:600px){
  .qotd-inner{padding:.85rem .8rem 1rem;}
  .qotd-stem,.qotd-lead{font-size:.8rem;}
  .qotd-choice{font-size:.76rem;}
  .qotd-idle{flex-direction:column;align-items:stretch;}
  .qotd-start{width:100%;}
}

/* ── Topics covered (Score History page) ───────────────────────
   The map that sits under the numbers: which clinical territory the
   learner has actually seen. Same card chrome as the other Scores
   blocks so it reads as part of that page, not a bolt-on. */
.tc-sub{font-size:.72rem;color:var(--text-secondary);line-height:1.5;margin:-.15rem 0 .6rem;}
.tc-list{display:flex;flex-direction:column;gap:.3rem;}
.tc-row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.45rem .6rem;border-radius:8px;
  background:var(--bg-secondary);border:1px solid var(--border);
}
.tc-main{min-width:0;}
.tc-label{
  font-size:.79rem;font-weight:600;color:var(--text-primary);line-height:1.35;
  overflow-wrap:anywhere;
}
.tc-meta{font-size:.65rem;color:var(--text-dim);margin-top:.1rem;font-family:'JetBrains Mono',monospace;}
.tc-right{display:flex;align-items:center;gap:.5rem;flex:0 0 auto;}
.tc-count{
  font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;
  padding:.12rem .35rem;border-radius:999px;
  background:rgba(6,182,212,.12);color:var(--accent-cyan);
  border:1px solid rgba(6,182,212,.3);
}

/* The question column keeps a readable measure (~78ch) but sits centered
   in the wide tile, so the leftover space is symmetric rather than a
   blank right half. */
.qotd-src,.qotd-stem,.qotd-lead,.qotd-choices,.qotd-explain,.qotd-foot{
  max-width:78ch;margin-left:auto;margin-right:auto;
}
.qotd-stem{margin-bottom:0;}

/* ── QOTD rev (2026-08-24): shared daily question ──────────────
   Date chip mirrors the Fact of the Day card so the two read as a
   matched pair, and the ABIM-STYLE tag now rides inline with the
   title instead of competing with it for the left slot. */
.qotd-date{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;
  letter-spacing:.09em;padding:.2rem .45rem;border-radius:6px;white-space:nowrap;
  background:color-mix(in srgb,var(--qotd-accent) 12%,transparent);
  color:var(--qotd-accent);border:1px solid color-mix(in srgb,var(--qotd-accent) 30%,transparent);
}
.qotd-date-ghost{visibility:hidden;}
.qotd-lbl .qotd-badge{margin-left:.4rem;vertical-align:middle;}
/* One-attempt notice — quiet until it matters, hidden after answering. */
.qotd-oneshot{
  max-width:78ch;margin:.5rem auto 0;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;
  letter-spacing:.05em;color:var(--text-dim);
}
.qotd-verdict{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;}
.qotd-cohort{
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;
  color:var(--text-dim);letter-spacing:0;
}
.qotd-next{
  align-self:center;font-family:'JetBrains Mono',monospace;
  font-size:.62rem;letter-spacing:.05em;color:var(--text-dim);margin-left:.25rem;
}

/* ══════════════════════════════════════════════════════════════
   QUICK CASE (2026-08-24) — visible agency on the one-tap launcher
   ══════════════════════════════════════════════════════════════
   Replaces the old .quick-start-btn. The card keeps that button's
   red/purple identity as the page's primary action, but the three
   decisions now sit on it as pre-selected chips. Rows are labelled
   so a first-time user reads it as a form, not as decoration. */
.quick-case{width:100%;max-width:100%;margin:0 0 1.1rem;}
.quick-case .qc-inner{
  border:1.5px solid var(--accent-red);border-radius:16px;
  background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(168,85,247,.05));
  /* 2026-08-24 — the tile read as cramped: chip text at .74rem inside
     .32rem padding meant users leaned in to pick a length. Type and
     touch targets are up roughly one step throughout, and the padding
     grew with them so the card breathes rather than just swelling. */
  padding:1.15rem 1.35rem 1.25rem;box-shadow:var(--shadow-1);
}
.qc-hdr{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.95rem;}
/* Ghost spacer keeps the title optically centered against the
   "More options" control on the right. */
.qc-hdr-ghost{visibility:hidden;pointer-events:none;}
.qc-title{flex:1;text-align:center;}
.qc-title{
  font-family:'JetBrains Mono',monospace;font-size:1.06rem;font-weight:700;
  letter-spacing:.02em;color:var(--text-primary);
}
.qc-more{
  background:none;border:none;cursor:pointer;padding:.25rem .45rem;
  font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;
  color:var(--text-secondary);border-radius:6px;transition:color .15s ease,background .15s ease;
}
.qc-more:hover{color:var(--text-primary);background:var(--bg-card-hover);}
.qc-more-caret{font-size:.6rem;}

/* ── Chip rows ──
   Centered layout: the row label sits above its chips, and both are
   centered in the card, so the whole tile reads on one vertical axis
   instead of a ragged left column of labels. */
.qc-row{
  display:flex;flex-direction:column;align-items:center;
  gap:.4rem;margin-bottom:.8rem;text-align:center;
}
.qc-row-lbl{
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);
}
.qc-chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;max-width:100%;}
.qc-chip{
  display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.48rem 1rem;min-height:40px;justify-content:center;
  border-radius:999px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--bg-card);
  color:var(--text-secondary);font-family:'DM Sans',sans-serif;
  line-height:1.2;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;
}
.qc-chip:hover{border-color:var(--accent-red);color:var(--text-primary);transform:translateY(-1px);}
.qc-chip-label{font-size:.86rem;font-weight:600;}
.qc-chip-sub{font-size:.7rem;opacity:.8;}
.qc-chip-on{
  border-color:var(--accent-red);color:var(--text-primary);
  background:color-mix(in srgb,var(--accent-red) 12%,var(--bg-card));
  font-weight:700;
}
.qc-chip-on .qc-chip-sub{opacity:.9;}
/* "For You" is the signature choice — it reads as the recommended
   option even before it is selected. */
.qc-chip-signature .qc-chip-label::before{content:'🎯 ';font-size:.7em;}
.qc-chip-signature:not(.qc-chip-on){border-color:color-mix(in srgb,var(--accent-purple) 45%,transparent);}
.qc-chip-signature.qc-chip-on{
  border-color:var(--accent-purple);
  background:color-mix(in srgb,var(--accent-purple) 13%,var(--bg-card));
}

/* ── Advanced disclosure ── */
.qc-adv{
  margin:.2rem 0 .7rem;padding:.75rem .85rem;border-radius:12px;
  background:var(--bg-secondary);border:1px solid var(--border);
}
.qc-adv .qc-row{margin-bottom:.55rem;}
.qc-adv-note{font-size:.78rem;color:var(--text-secondary);line-height:1.55;text-align:center;}
.qc-inline-link{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--accent-cyan);text-decoration:underline;text-underline-offset:2px;
}

/* ── The rationale line — why this case, before you start it ──
   Two stacked, centered lines: the DATA SOURCE it drew from, then the
   specific evidence. Naming the source is what makes it checkable
   rather than decorative. */
.qc-why{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  margin:.7rem auto .85rem;padding:.7rem 1rem;border-radius:12px;
  background:color-mix(in srgb,var(--accent-purple) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-purple) 25%,transparent);
  font-size:.85rem;line-height:1.6;color:var(--text-primary);text-align:center;
}
.qc-why-quiet{
  background:transparent;border-color:transparent;
  color:var(--text-secondary);padding:.35rem 0;
}
.qc-why-src{
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--accent-purple);
}
.qc-why-icon{flex:0 0 auto;}
.qc-why-text{min-width:0;}
.qc-why strong{font-weight:700;}
.qc-dot{
  display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--accent-purple);opacity:.5;animation:qcPulse 1.1s ease-in-out infinite;
}
@keyframes qcPulse{0%,100%{opacity:.25;}50%{opacity:.9;}}
@media(prefers-reduced-motion:reduce){.qc-dot{animation:none;}}

/* ── Launch button ── */
.qc-go{
  width:100%;padding:.85rem 1rem;border-radius:12px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;
  letter-spacing:.02em;color:#fff;border:none;
  background:linear-gradient(135deg,var(--accent-red),var(--accent-purple));
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.qc-go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 22px rgba(239,68,68,.28);}
.qc-go:disabled{opacity:.7;cursor:default;transform:none;}

@media(max-width:640px){
  /* Narrow screens give back some of the padding so six focus chips
     still fit on two rows, but the TYPE stays large — readability was
     the complaint, and it is worse on a phone, not better. */
  .quick-case .qc-inner{padding:.95rem .8rem 1.05rem;}
  .qc-chip{padding:.42rem .7rem;min-height:38px;}
  .qc-chip-label{font-size:.82rem;}
  .qc-chip-sub{font-size:.68rem;}
  .qc-title{font-size:.98rem;}
  .qc-go{font-size:.94rem;padding:.78rem 1rem;}
}

/* Case-timeline empty state — replaces a panel that used to sit frozen
   at T+0:00 on any case that never emitted a timeline entry. */
.he.he-empty{color:var(--text-dim);font-style:italic;opacity:.8;}

/* ══════════════════════════════════════════════════════════════
   CASE WRAP (2026-08-24) — the post-score completion sequence
   ══════════════════════════════════════════════════════════════
   Sits directly under the score ring in the chat column. Four quiet
   blocks, each with a small kicker, so it reads as a debrief rather
   than a wall of buttons. */
.case-wrap{
  margin:.75rem auto 1rem;max-width:640px;width:100%;
  display:flex;flex-direction:column;gap:.55rem;
}
.cw-block{
  padding:.6rem .75rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-card);
}
.cw-kicker{
  display:block;font-family:'JetBrains Mono',monospace;
  font-size:.58rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:.25rem;
}
.cw-line{font-size:.8rem;line-height:1.55;color:var(--text-primary);}
/* One-line explainer under a wrap-card headline + inline points-lost tag
   (2026-08-31 — "Your one stretch point" read as jargon with no anchor). */
.cw-sub{font-size:.66rem;line-height:1.5;color:var(--text-dim);margin-top:.28rem;}
.cw-pts{font-size:.7rem;font-weight:700;color:var(--accent-amber);white-space:nowrap;}
.cw-identity{
  border-color:color-mix(in srgb,var(--accent-green) 40%,transparent);
  background:color-mix(in srgb,var(--accent-green) 6%,var(--bg-card));
}
.cw-identity .cw-kicker{color:var(--accent-green);}
.cw-stretch{
  border-color:color-mix(in srgb,var(--accent-amber) 40%,transparent);
  background:color-mix(in srgb,var(--accent-amber) 6%,var(--bg-card));
}
.cw-stretch .cw-kicker{color:var(--accent-amber);}

/* ── Mastery movement ── */
.cw-mlist{display:flex;flex-direction:column;gap:.28rem;}
.cw-mrow{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  font-size:.76rem;line-height:1.4;
}
.cw-mlabel{color:var(--text-primary);min-width:0;overflow-wrap:anywhere;}
.cw-mval{
  display:inline-flex;align-items:baseline;gap:.3rem;flex:0 0 auto;
  font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;
}
.cw-mbefore{color:var(--text-dim);font-weight:600;}
.cw-marrow{color:var(--text-dim);font-weight:600;}
.cw-up{color:var(--accent-green);}
.cw-down{color:var(--accent-amber);}
.cw-mnew{
  font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.08rem .3rem;border-radius:999px;font-weight:700;
  background:rgba(6,182,212,.14);color:var(--accent-cyan);
  border:1px solid rgba(6,182,212,.3);
}

/* ── Case variants — the repeat mechanism ── */
.cw-variants{
  border-color:color-mix(in srgb,var(--accent-purple) 40%,transparent);
  background:color-mix(in srgb,var(--accent-purple) 6%,var(--bg-card));
}
.cw-variants .cw-kicker{color:var(--accent-purple);}
/* Collapsed one-line offer (2026-08-31) — the expanded panel was a large
   purple interruption in the score→feedback→debrief sequence; now it is
   one quiet line until the learner opts in. */
.cw-vexpand{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;width:100%;
  padding:.15rem 0;border:none;background:transparent;cursor:pointer;text-align:left;
  font-family:'DM Sans',sans-serif;
}
.cw-vexpand-main{font-size:.78rem;font-weight:700;color:var(--accent-purple);}
.cw-vexpand-sub{font-size:.66rem;color:var(--text-dim);}
.cw-vcaret{margin-left:auto;font-size:.8rem;color:var(--accent-purple);}
.cw-vexpand:hover .cw-vexpand-main{text-decoration:underline;}
.cw-vbody{margin-top:.55rem;}
/* Continuation-length picker (2026-08-31b): 1 vs 2 decisions. */
.cw-lenrow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem;}
.cw-lenlbl{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-right:.15rem;}
.cw-lenbtn{
  padding:.28rem .6rem;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;
  border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
  transition:border-color .15s,color .15s,background .15s;
}
.cw-lenbtn:hover{border-color:var(--border-light);color:var(--text-primary);}
.cw-lenbtn-on{
  border-color:color-mix(in srgb,var(--accent-purple) 55%,transparent);
  color:var(--accent-purple);
  background:color-mix(in srgb,var(--accent-purple) 10%,var(--bg-card));
}
.cw-vsub{font-size:.72rem;line-height:1.5;color:var(--text-secondary);margin-bottom:.45rem;}
.cw-vbtns{display:flex;flex-wrap:wrap;gap:.35rem;}
.cw-vbtn{
  padding:.34rem .7rem;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.73rem;font-weight:600;
  border:1.5px solid color-mix(in srgb,var(--accent-purple) 45%,transparent);
  background:var(--bg-card);color:var(--accent-purple);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.cw-vbtn:hover{
  background:color-mix(in srgb,var(--accent-purple) 14%,var(--bg-card));
  transform:translateY(-1px);
  box-shadow:0 4px 14px color-mix(in srgb,var(--accent-purple) 20%,transparent);
}
@media(max-width:520px){
  .cw-mrow{flex-direction:column;align-items:flex-start;gap:.1rem;}
  .cw-vbtn{flex:1 1 auto;text-align:center;}
}

/* ══════════════════════════════════════════════════════════════
   ITE PANEL (2026-08-24) — In-Training Exam results in My Library
   ══════════════════════════════════════════════════════════════ */
#lib-ite-panel{width:100%;}

/* ── Empty / error state ── */
.ite-empty{
  display:flex;align-items:center;justify-content:space-between;gap:1.1rem;flex-wrap:wrap;
  padding:.9rem 1rem;border-radius:12px;
  border:1.5px dashed color-mix(in srgb,var(--accent-blue) 40%,transparent);
  background:color-mix(in srgb,var(--accent-blue) 4%,var(--bg-card));
}
.ite-empty-copy{flex:1;min-width:min(100%,18rem);}
.ite-empty-title{font-size:.86rem;font-weight:700;color:var(--text-primary);line-height:1.45;}
.ite-empty-sub{font-size:.75rem;line-height:1.55;color:var(--text-secondary);margin-top:.25rem;}
.ite-privacy{
  margin-top:.5rem;padding:.4rem .55rem;border-radius:8px;
  font-size:.7rem;line-height:1.5;color:var(--text-secondary);
  background:color-mix(in srgb,var(--accent-green) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-green) 25%,transparent);
}
.ite-privacy-tight{margin-top:.6rem;}
.ite-empty-action{flex:0 0 auto;}
.ite-upload-btn,.ite-replace{
  display:inline-block;cursor:pointer;border-radius:999px;
  font-family:'DM Sans',sans-serif;font-weight:700;
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.ite-upload-btn{
  padding:.5rem 1rem;font-size:.78rem;color:#fff;border:none;
  background:linear-gradient(135deg,var(--accent-blue),var(--accent-cyan));
}
.ite-upload-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(59,130,246,.28);}
.ite-replace{
  padding:.28rem .7rem;font-size:.7rem;font-weight:600;
  border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
}
.ite-replace:hover{border-color:var(--accent-blue);color:var(--accent-blue);}

/* ── Busy ── */
.ite-busy{display:flex;align-items:center;gap:.5rem;padding:.9rem 1rem;font-size:.78rem;color:var(--text-secondary);}
.ite-spinner{
  width:.85rem;height:.85rem;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(59,130,246,.3);border-top-color:var(--accent-blue);
  animation:iteSpin .8s linear infinite;
}
@keyframes iteSpin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.ite-spinner{animation:none;}}

/* ── Confirmation ── */
.ite-confirm{padding:.9rem 1rem;border-radius:12px;border:1.5px solid var(--accent-blue);background:var(--bg-card);}
.ite-confirm-hdr{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem;}
.ite-confirm-title{font-size:.86rem;font-weight:700;color:var(--text-primary);}
.ite-confirm-meta{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--text-dim);letter-spacing:.04em;}
.ite-confirm-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem;}
.ite-stat{
  flex:1 1 5.5rem;text-align:center;padding:.45rem .3rem;border-radius:9px;
  background:var(--bg-secondary);border:1px solid var(--border);
}
.ite-stat-v{display:block;font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--accent-blue);}
.ite-stat-l{display:block;font-size:.62rem;color:var(--text-dim);margin-top:.1rem;}
.ite-confirm-list{
  max-height:11rem;overflow-y:auto;display:flex;flex-direction:column;gap:.18rem;
  padding:.4rem .5rem;border-radius:9px;background:var(--bg-secondary);border:1px solid var(--border);
}
.ite-crow{display:flex;justify-content:space-between;gap:.6rem;font-size:.73rem;color:var(--text-primary);}
.ite-crow-v{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-secondary);flex:0 0 auto;}
.ite-confirm-btns{display:flex;justify-content:flex-end;gap:.45rem;margin-top:.7rem;flex-wrap:wrap;}
.ite-btn-primary,.ite-btn-ghost{
  padding:.42rem .9rem;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:700;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.ite-btn-primary{border:none;color:#fff;background:linear-gradient(135deg,var(--accent-blue),var(--accent-cyan));}
.ite-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(59,130,246,.28);}
.ite-btn-ghost{border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);}
.ite-btn-ghost:hover{border-color:var(--accent-blue);color:var(--text-primary);}
.ite-btn-sm{padding:.3rem .7rem;font-size:.7rem;font-weight:600;}
.ite-btn-danger:hover{border-color:var(--accent-red);color:var(--accent-red);}

/* ── Saved profile ── */
.ite-profile{padding:.85rem 1rem;border-radius:12px;border:1.5px solid var(--border);background:var(--bg-card);}
.ite-phdr{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.65rem;flex-wrap:wrap;}
.ite-ptitle{display:block;font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;color:var(--text-primary);}
.ite-psub{display:block;font-size:.7rem;color:var(--text-secondary);margin-top:.1rem;}

.ite-target{
  padding:.55rem .65rem;border-radius:10px;margin-bottom:.7rem;
  background:color-mix(in srgb,var(--accent-purple) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-purple) 28%,transparent);
}
.ite-target-kicker{
  display:block;font-family:'JetBrains Mono',monospace;font-size:.58rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-purple);margin-bottom:.35rem;
}
.ite-target-list{display:flex;flex-wrap:wrap;gap:.35rem;}
.ite-target-btn{
  padding:.3rem .65rem;border-radius:999px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.73rem;font-weight:600;
  border:1.5px solid color-mix(in srgb,var(--accent-purple) 40%,transparent);
  background:var(--bg-card);color:var(--text-primary);
  transition:background .15s ease,transform .15s ease;
}
.ite-target-btn:hover{background:color-mix(in srgb,var(--accent-purple) 13%,var(--bg-card));transform:translateY(-1px);}
.ite-target-pct{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--accent-purple);font-weight:700;}
.ite-target-note{font-size:.67rem;color:var(--text-dim);margin-top:.35rem;line-height:1.45;}

.ite-bars{display:flex;flex-direction:column;gap:.3rem;}
.ite-brow{display:grid;grid-template-columns:minmax(6rem,11rem) 1fr auto auto;align-items:center;gap:.5rem;font-size:.73rem;}
.ite-blabel{color:var(--text-primary);overflow-wrap:anywhere;line-height:1.3;}
.ite-btrack{height:.45rem;border-radius:999px;background:var(--bg-secondary);border:1px solid var(--border);overflow:hidden;}
.ite-bfill{display:block;height:100%;border-radius:999px;}
.ite-bar-lo{background:var(--accent-red);}
.ite-bar-mid{background:var(--accent-amber);}
.ite-bar-hi{background:var(--accent-green);}
.ite-bval{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--text-primary);}
.ite-bval-sm{font-size:.55rem;color:var(--text-dim);}
.ite-bmiss{font-size:.62rem;color:var(--text-dim);white-space:nowrap;min-width:4.2rem;text-align:right;}
.ite-hvc{margin-top:.5rem;font-size:.68rem;color:var(--text-dim);font-family:'JetBrains Mono',monospace;}

.ite-foot{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem;}
.ite-objectives{margin-top:.6rem;max-height:22rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;}
.ite-objectives[hidden]{display:none;}   /* the flex rule used to beat [hidden], so the list never collapsed (fixed 2026-09-12j) */
.ite-ogroup{padding:.45rem .5rem;border-radius:9px;background:var(--bg-secondary);border:1px solid var(--border);}
.ite-oarea{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.25rem;
}
.ite-oitem{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:.25rem .35rem;border-radius:6px;border:none;background:transparent;
  font-family:'DM Sans',sans-serif;font-size:.73rem;line-height:1.45;color:var(--text-primary);
  transition:background .15s ease,color .15s ease;
}
.ite-oitem:hover{background:color-mix(in srgb,var(--accent-purple) 12%,transparent);color:var(--accent-purple);}
.ite-oarrow{color:var(--text-dim);font-size:.6rem;display:inline-block;transition:transform .15s ease;}
.ite-oitem:hover .ite-oarrow{color:var(--accent-purple);}

/* ── Library gap report (empty-search state, 2026-09-13) ── */
.lib-gap-report{margin-top:.7rem;}
.lib-gap-report-btn{cursor:pointer;border:1px dashed var(--border-light);border-radius:8px;
  padding:.4rem .7rem;background:transparent;font-family:'DM Sans',sans-serif;
  font-size:.72rem;font-weight:600;color:var(--text-secondary);
  transition:color .15s,border-color .15s;}
.lib-gap-report-btn:hover{color:var(--accent-amber);border-color:var(--accent-amber);}

/* ── Objective dropdown + sim checkmarks (2026-09-13) ── */
.ite-oitem-wrap{display:block;}
.ite-oitem.open{background:color-mix(in srgb,var(--accent-purple) 10%,transparent);color:var(--accent-purple);}
.ite-oitem.open .ite-oarrow{transform:rotate(90deg);color:var(--accent-purple);}
.ite-odone{color:var(--accent-green);font-weight:800;letter-spacing:.12em;font-size:.7rem;margin-left:.2rem;}
.ite-omenu{display:flex;flex-wrap:wrap;gap:.35rem;padding:.35rem .35rem .5rem 1.15rem;}
.ite-omenu[hidden]{display:none;}
.ite-omenu-btn{
  cursor:pointer;border-radius:8px;padding:.3rem .6rem;
  border:1px solid var(--border-light);background:var(--bg-card);
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;color:var(--text-secondary);
  transition:color .15s,border-color .15s,background .15s;
}
.ite-omenu-btn:hover{color:var(--text-primary);background:var(--bg-card-hover);}
.ite-omenu-sim:hover{color:var(--accent-red);border-color:var(--accent-red);}
.ite-omenu-card:hover{color:var(--accent-purple);border-color:var(--accent-purple);}
.ite-omenu-note:hover{color:var(--accent-green);border-color:var(--accent-green);}
.ite-omenu-read:hover{color:var(--accent-cyan);border-color:var(--accent-cyan);}
.ite-omenu-btn:disabled{opacity:.6;cursor:default;}
.ite-hv{
  font-size:.55rem;font-weight:700;letter-spacing:.05em;padding:.05rem .25rem;
  border-radius:4px;background:rgba(34,197,94,.15);color:var(--accent-green);
}
@media(max-width:640px){
  .ite-brow{grid-template-columns:1fr auto;grid-template-areas:'label val' 'track track';row-gap:.15rem;}
  .ite-blabel{grid-area:label;}
  .ite-bval{grid-area:val;}
  .ite-btrack{grid-area:track;}
  .ite-bmiss{display:none;}
}

/* Coached-credit disclosure — neutral, not a scold. The learner is being
   told what their number means, not being penalised. */
.cw-coached{
  border-color:color-mix(in srgb,var(--accent-cyan) 38%,transparent);
  background:color-mix(in srgb,var(--accent-cyan) 6%,var(--bg-card));
}
.cw-coached .cw-kicker{color:var(--accent-cyan);}

/* Setup form: sub-group label above a toggle row */
.sg-label{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);
  margin-bottom:.35rem;
}

/* ── Orders panel: expand / collapse all ───────────────────────
   Sits at the top of any tab that has subcategories. Whichever action
   is already fully applied dims, so the pair reads as state rather
   than as two identical buttons. */
.order-bulk{
  display:flex;gap:.3rem;justify-content:center;
  padding:.25rem .3rem .4rem;
  border-bottom:1px solid var(--border);margin-bottom:.35rem;
}
.order-bulk-btn{
  flex:1 1 0;padding:.22rem .4rem;border-radius:6px;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.63rem;font-weight:600;
  border:1px solid var(--border);background:var(--bg-secondary);
  color:var(--text-secondary);
  transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;
}
.order-bulk-btn:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:var(--bg-card-hover);}
.order-bulk-done{opacity:.42;cursor:default;}
.order-bulk-done:hover{border-color:var(--border);color:var(--text-secondary);background:var(--bg-secondary);}

/* ══════════════════════════════════════════════════════════════
   SCORE HISTORY — comparability (2026-08-24)
   ══════════════════════════════════════════════════════════════
   Conditions chips on every row, per-setup averages, and the note
   explaining why there is no single blended average any more. */
.sh-note{
  margin-top:.6rem;padding:.55rem .7rem;border-radius:9px;
  font-size:.72rem;line-height:1.55;color:var(--text-secondary);
  background:color-mix(in srgb,var(--accent-amber) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-amber) 26%,transparent);
}
.sh-note strong{color:var(--text-primary);}
.sh-legend-note{margin-top:.45rem;font-size:.68rem;line-height:1.5;color:var(--text-dim);text-align:center;}

.sh-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.5rem;}
.sh-group{
  padding:.55rem .65rem;border-radius:10px;
  background:var(--bg-secondary);border:1px solid var(--border);
}
.sh-group-hd{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;margin-bottom:.25rem;}
.sh-group-lbl{
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);
}
.sh-group-n{font-size:.62rem;color:var(--text-dim);white-space:nowrap;}
.sh-group-row{display:flex;align-items:baseline;gap:.4rem;}
.sh-group-avg{font-family:'JetBrains Mono',monospace;font-size:1.35rem;font-weight:700;line-height:1;}
.sh-group-meta{font-size:.65rem;color:var(--text-dim);line-height:1.35;}
.sh-group-sub{margin-top:.25rem;font-size:.64rem;color:var(--text-dim);}

.shi-rich{align-items:flex-start;gap:.6rem;}
.shi-main{min-width:0;flex:1;}
.shi-line1{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem;}
.shi-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.28rem;}
.sh-chip{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:600;
  letter-spacing:.03em;padding:.1rem .35rem;border-radius:5px;
  background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-dim);
  white-space:nowrap;
}
.sh-chip-cov{
  background:color-mix(in srgb,var(--accent-cyan) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-cyan) 28%,transparent);
  color:var(--accent-cyan);
}
.sh-chip-thin{
  background:color-mix(in srgb,var(--accent-amber) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent-amber) 34%,transparent);
  color:var(--accent-amber);
}
@media(max-width:560px){
  .sh-groups{grid-template-columns:1fr;}
  .shi-rich{flex-direction:column;}
  .shi-rich .scv{align-self:flex-end;}
}

/* ══════════════════════════════════════════════════════════════
   BREADCRUMB TRAIL (2026-08-24)
   ══════════════════════════════════════════════════════════════
   Sits between the back arrow and the page title. Shows where the
   user came from when they arrived via a cross-link — the back arrow
   alone never said. */
.crumb-bar{
  display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;
  min-width:0;overflow:hidden;margin-left:.15rem;
}
/* Breadcrumb crumbs are the primary "back" affordance now that the in-page
   "← Back to …" links are gone, so they read as real bordered buttons —
   larger and outlined rather than faint inline text. */
.crumb{
  flex:0 0 auto;background:var(--bg-card);border:1.5px solid var(--border);padding:.34rem .72rem;border-radius:8px;
  font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;
  color:var(--text-secondary);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
button.crumb:hover{background:var(--bg-card-hover);color:var(--accent-cyan);border-color:var(--accent-cyan);}
.crumb-home{color:var(--accent-purple);border-color:rgba(168,85,247,.4);}
.crumb-current{
  color:var(--text-primary);cursor:default;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;max-width:14rem;
}
.crumb-sep{flex:0 0 auto;color:var(--text-dim);font-size:.6rem;opacity:.7;}
.crumb-ellipsis{flex:0 0 auto;color:var(--text-dim);font-size:.66rem;padding:0 .1rem;}
@media(max-width:720px){
  .crumb-bar .crumb:not(.crumb-home):not(.crumb-current){display:none;}
  .crumb-bar .crumb-sep:nth-of-type(n+3){display:none;}
  .crumb-current{max-width:9rem;}
}

/* Landing tile: centered header + setup badges on each row */
.ra-head{justify-content:center;position:relative;text-align:center;}
.ra-head .ra-sub{position:absolute;right:0;top:50%;transform:translateY(-50%);}
.ra-setup{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:600;
  letter-spacing:.03em;padding:.06rem .28rem;border-radius:4px;
  background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-dim);
  white-space:nowrap;
}
.pg-spark-link{
  background:none;border:none;padding:0 .1rem;cursor:pointer;
  color:var(--accent-cyan);text-decoration:underline;text-underline-offset:2px;
}
.pg-spark-link:hover{color:var(--accent-purple);}

/* ══════════════════════════════════════════════════════════════
   SCORE EXPLORER (2026-08-24)
   ══════════════════════════════════════════════════════════════ */
.sx-wrap{width:100%;max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem;}
.sx-loading{padding:2rem;text-align:center;font-size:.8rem;color:var(--text-secondary);}
.sx-intro{
  font-size:.75rem;line-height:1.6;color:var(--text-secondary);
  padding:.6rem .75rem;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--border);
}
/* ── Filter bar (reworked 2026-08-31) ──────────────────────────
   The old bar auto-sized every select to its content, so widths were
   ragged, the tiny .56rem labels were hard to scan, and the raw-dx
   topic options truncated mid-word. Now: uniform select sizing with a
   shared height, slightly larger labels, canonical (short) topic
   names upstream, and a Clear control that reads as part of the row. */
.sx-filters{
  display:flex;flex-wrap:wrap;gap:.6rem .7rem;align-items:flex-end;
  padding:.7rem .8rem;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--border);
}
.sx-fgroup{display:flex;flex-direction:column;gap:.26rem;min-width:0;flex:0 1 auto;}
.sx-flabel{
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary);
  padding-left:.1rem;
}
.sx-fselect{
  height:2rem;padding:0 .55rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.74rem;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);
  min-width:7.5rem;max-width:14rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:pointer;transition:border-color .15s,background .15s;
}
#sx-f-topic{min-width:11rem;}
.sx-fselect:hover{border-color:var(--border-light);}
.sx-fselect:focus{outline:none;border-color:var(--accent-blue);}
.sx-clear{
  height:2rem;padding:0 .85rem;border-radius:8px;cursor:pointer;align-self:flex-end;margin-left:auto;
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;
  border:1px solid var(--border);background:transparent;color:var(--text-secondary);
  transition:border-color .15s,color .15s;
}
.sx-clear:hover:not(:disabled){border-color:var(--accent-red);color:var(--accent-red);}
.sx-clear:disabled{opacity:.35;cursor:default;}

.sx-summary{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;
  padding:.65rem .75rem;border-radius:10px;
  background:var(--bg-card);border:1px solid var(--border);
}
.sx-stat{
  flex:1 1 5.5rem;text-align:center;padding:.4rem .3rem;border-radius:8px;
  background:var(--bg-secondary);border:1px solid var(--border);
}
.sx-stat-v{display:block;font-family:'JetBrains Mono',monospace;font-size:1.25rem;font-weight:700;line-height:1.1;color:var(--text-primary);}
.sx-stat-l{display:block;font-size:.6rem;color:var(--text-dim);margin-top:.15rem;}
.sx-comparable{
  flex:1 1 100%;font-size:.7rem;line-height:1.5;padding:.4rem .55rem;border-radius:8px;
}
.sx-comparable-ok{
  background:color-mix(in srgb,var(--accent-green) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-green) 26%,transparent);
  color:var(--accent-green);
}
.sx-comparable-warn{
  background:color-mix(in srgb,var(--accent-amber) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-amber) 26%,transparent);
  color:var(--text-secondary);
}

.sx-list{display:flex;flex-direction:column;gap:.3rem;}
.sx-empty{padding:1.5rem;text-align:center;font-size:.78rem;color:var(--text-dim);}
.sx-row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .7rem;border-radius:9px;
  background:var(--bg-card);border:1px solid var(--border);
}
.sx-row-main{min-width:0;flex:1;}
.sx-row-top{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;}
.sx-row-date{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-dim);}
.sx-row-type{font-size:.72rem;font-weight:600;color:var(--text-primary);}
.sx-row-topic{font-size:.74rem;color:var(--text-secondary);margin-top:.1rem;overflow-wrap:anywhere;}
.sx-row-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem;}
.sx-chip{
  font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:600;
  padding:.08rem .32rem;border-radius:5px;white-space:nowrap;
  background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-dim);
}
.sx-chip-cov{
  background:color-mix(in srgb,var(--accent-cyan) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-cyan) 26%,transparent);color:var(--accent-cyan);
}
.sx-chip-thin{
  background:color-mix(in srgb,var(--accent-amber) 12%,transparent);
  border-color:color-mix(in srgb,var(--accent-amber) 32%,transparent);color:var(--accent-amber);
}
.sx-row-score{
  flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:1.15rem;font-weight:700;
}
@media(max-width:600px){
  .sx-filters{flex-direction:column;align-items:stretch;}
  .sx-fselect{max-width:none;}
  .sx-row{flex-direction:column;align-items:flex-start;}
  .sx-row-score{align-self:flex-end;}
}

/* ══════════════════════════════════════════════════════════════
   FLASHCARD RICH TEXT (2026-08-24)
   Emphasis inside a card without turning the emphasised words into
   the blank. Colours are CLASSES, not inline styles, so the same
   stored card reads correctly in both themes — see fcRichText.js.
   ══════════════════════════════════════════════════════════════ */
.fc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.3rem .35rem;margin-bottom:.35rem;
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:9px;}
.fc-tb-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 .45rem;
  background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text-secondary);
  font-family:'DM Sans',sans-serif;font-size:.82rem;line-height:1;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.fc-tb-btn:hover{background:var(--bg-card);color:var(--text-primary);border-color:var(--border);}
.fc-tb-btn.fc-tb-on{background:rgba(16,185,129,.16);color:var(--accent-green);border-color:rgba(16,185,129,.4);}
.fc-tb-blank{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  color:var(--accent-green);border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.09);}
.fc-tb-blank:hover{background:rgba(16,185,129,.18);color:var(--accent-green);}
.fc-tb-clear{font-size:.7rem;letter-spacing:.01em;}
.fc-tb-sep{width:1px;height:18px;background:var(--border);margin:0 .15rem;flex:0 0 auto;}
.fc-tb-grp{display:inline-flex;align-items:center;gap:.18rem;}
.fc-tb-sw{width:22px;height:22px;padding:0;border-radius:5px;border:1px solid var(--border);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:.72rem;
  font-weight:800;line-height:1;transition:transform .1s,box-shadow .12s;}
.fc-tb-sw:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.22);}
.fc-tb-sw-text{background:var(--bg-card)!important;}
.fc-tb-sw-hl{color:#111827;}

/* The editable surface. Sized and coloured to match the textareas it
   replaced so the modal doesn't change shape. */
.fc-rich{width:100%;min-height:78px;padding:.55rem .7rem;border-radius:8px;border:1.5px solid var(--border);
  background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.88rem;
  line-height:1.55;outline:none;overflow-y:auto;max-height:220px;box-sizing:border-box;
  white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;}
.fc-rich:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px rgba(16,185,129,.15);}
.fc-rich:empty::before{content:attr(data-placeholder);color:var(--text-dim);pointer-events:none;}

/* ══════════════════════════════════════════════════════════════
   READ ALOUD (2026-09-14) — the 🔊 Listen chip on every readable
   block and the docked player. The chip sits in the block's top-right
   corner (or in its own row above a list/table, which cannot hold a
   button) and stays quiet until hover or focus. */
.ra-host{position:relative;}
.ra-listen{position:absolute;top:.4rem;right:.45rem;z-index:3;display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .48rem;border-radius:999px;border:1px solid var(--border);background:var(--bg-secondary);
  color:var(--text-dim);font-family:'DM Sans',sans-serif;font-size:.64rem;font-weight:600;line-height:1.4;
  cursor:pointer;opacity:.55;transition:opacity .15s ease,color .15s ease,border-color .15s ease,background .15s ease;}
.ra-host:hover > .ra-listen,.ra-listen:focus-visible,.ra-listen[aria-pressed="true"]{opacity:1;}
.ra-listen:hover{color:var(--accent-cyan);border-color:var(--accent-cyan);background:rgba(6,182,212,.12);}
.ra-listen[aria-pressed="true"]{color:var(--accent-cyan);border-color:var(--accent-cyan);background:rgba(6,182,212,.16);}
.ra-listen-row{display:flex;justify-content:flex-end;margin:0 0 .25rem;}
.ra-listen-row .ra-listen{position:static;opacity:.75;}
.ra-playing{box-shadow:0 0 0 2px rgba(6,182,212,.28);border-radius:10px;}
/* Follow-along: the paragraph, list item or table row being spoken. Kept
   deliberately quiet so it reads as a cursor, not as a highlight the user
   made themselves (those are the yellow/green annotation colours). */
.ra-speaking{background:rgba(6,182,212,.10);box-shadow:inset 3px 0 0 var(--accent-cyan);border-radius:4px;
  transition:background .2s ease;}
:root[data-fc-theme="light"] .ra-speaking{background:rgba(6,182,212,.14);}
@media (prefers-reduced-motion:reduce){ .ra-speaking{transition:none;} }

.ra-bar{position:fixed;left:50%;transform:translateX(-50%) translateY(140%);bottom:max(.6rem,env(safe-area-inset-bottom));
  z-index:10500;width:min(620px,calc(100vw - 1.2rem));padding:.55rem .7rem .6rem;
  background:var(--bg-card);border:1.5px solid var(--accent-cyan);border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.42);transition:transform .22s ease,opacity .22s ease;opacity:0;pointer-events:none;}
.ra-bar.ra-bar-open{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto;}
.ra-bar-top{display:flex;align-items:center;gap:.45rem;}
.ra-kicker{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-cyan);flex:0 0 auto;}
.ra-title{flex:1;min-width:0;font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:600;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ra-x{flex:0 0 auto;background:none;border:none;color:var(--text-dim);font-size:.95rem;line-height:1;cursor:pointer;padding:.1rem .3rem;border-radius:6px;}
.ra-x:hover{color:var(--text-primary);background:var(--bg-secondary);}
.ra-seek{margin:.45rem 0 .35rem;height:8px;border-radius:999px;background:var(--bg-secondary);border:1px solid var(--border);cursor:pointer;overflow:hidden;}
.ra-seek-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));transition:width .2s linear;}
.ra-bar-btm{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.ra-time{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text-dim);flex:0 0 auto;min-width:5.5rem;}
.ra-transport{display:flex;align-items:center;gap:.3rem;flex:1;justify-content:center;}
.ra-right{display:flex;align-items:center;gap:.35rem;flex:0 0 auto;}
.ra-btn{min-height:32px;padding:.25rem .55rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);
  color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;}
.ra-btn:hover{color:var(--text-primary);border-color:var(--accent-cyan);}
.ra-btn-play{min-width:44px;font-size:.85rem;color:var(--accent-cyan);border-color:var(--accent-cyan);background:rgba(6,182,212,.12);}
.ra-voice{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.ra-vbtn{display:inline-flex;align-items:center;gap:.22rem;padding:.28rem .5rem;border:none;background:var(--bg-secondary);color:var(--text-dim);
  font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;cursor:pointer;min-height:32px;}
.ra-vbtn + .ra-vbtn{border-left:1px solid var(--border);}
.ra-vbtn-on{background:rgba(6,182,212,.18);color:var(--accent-cyan);}
.ra-btn-seg{font-size:.78rem;padding:.25rem .45rem;}
.ra-auto{font-size:.66rem;letter-spacing:.01em;}
.ra-auto-on{color:var(--accent-cyan);border-color:var(--accent-cyan);background:rgba(6,182,212,.12);}
.ra-note{margin:.4rem 0 0;font-family:'DM Sans',sans-serif;font-size:.64rem;line-height:1.4;color:var(--text-dim);}

@media (max-width:640px){
  .ra-bar{width:calc(100vw - .7rem);padding:.5rem .55rem .55rem;}
  /* On a phone the glyphs carry the meaning; the words would force the
     transport off the screen. aria-labels keep them announced. */
  .ra-vword{display:none;}
  .ra-auto{padding:.25rem .5rem;}
  .ra-time{min-width:0;font-size:.6rem;}
  .ra-bar-btm{gap:.35rem;}
  .ra-transport{order:3;flex:1 1 100%;}
  .ra-right{order:2;margin-left:auto;}
  .ra-btn,.ra-vbtn{min-height:36px;}
  .ra-listen{font-size:.62rem;}
}
@media (prefers-reduced-motion:reduce){ .ra-bar{transition:none;} .ra-seek-fill{transition:none;} }

/* The note editor (2026-09-14) — same surface as .fc-rich, sized for a
   real note rather than a one-line card, and allowed to grow with the
   dialog instead of scrolling inside a 220px window. */
.lib-note-modal-editor{width:100%;min-height:240px;max-height:52vh;padding:.6rem .75rem;border-radius:8px;
  border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);
  font-family:'DM Sans',sans-serif;font-size:.82rem;line-height:1.6;outline:none;overflow-y:auto;
  box-sizing:border-box;white-space:pre-wrap;word-break:break-word;-webkit-user-select:text;user-select:text;}
.lib-note-modal-editor:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(6,182,212,.15);}
.lib-note-modal-editor.lib-note-editor-empty::before{content:attr(data-placeholder);color:var(--text-dim);pointer-events:none;}
.lib-note-modal-editor ul,.lib-note-modal-editor ol{margin:.25rem 0 .25rem 1.15rem;padding-left:.35rem;}
.lib-note-modal-editor li{margin:.12rem 0;}

/* Notes render in a lot of places (the hover bubble on a highlight, the
   My Notes list, the landing note reader). One rule set so a bullet list
   or a highlighter stroke looks the same everywhere it surfaces. */
.lib-note-rich ul,.lib-note-note ul,.lib-note-bubble ul,.pg-research-finding ul,
.lib-note-rich ol,.lib-note-note ol,.lib-note-bubble ol,.pg-research-finding ol{margin:.2rem 0 .2rem 1.1rem;padding-left:.3rem;}
.lib-note-rich li,.lib-note-note li,.lib-note-bubble li,.pg-research-finding li{margin:.1rem 0;}
.lib-note-bubble{white-space:normal;max-height:46vh;overflow:hidden;}
.lib-note-bubble strong{color:inherit;font-weight:700;}

/* Text colours and highlighter strokes.
   The app switches theme by rewriting CSS variables on <html> — there is
   no class to hang a theme selector off — so _applyPalette() in ui.js
   also stamps data-fc-theme. Dark is the default and therefore the base
   rule; light is the override. */
.fc-c-red{color:#f87171;}
.fc-c-amber{color:#fbbf24;}
.fc-c-green{color:#34d399;}
.fc-c-blue{color:#60a5fa;}
.fc-c-purple{color:#c084fc;}

/* box-decoration-break keeps the stroke continuous when a highlighted
   phrase wraps onto a second line. */
.fc-hl{border-radius:3px;padding:.02em .18em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.fc-hl-yellow{background:rgba(250,204,21,.28);}
.fc-hl-green{background:rgba(52,211,153,.24);}
.fc-hl-blue{background:rgba(96,165,250,.26);}
.fc-hl-pink{background:rgba(244,114,182,.26);}

:root[data-fc-theme="light"] .fc-c-red{color:#dc2626;}
:root[data-fc-theme="light"] .fc-c-amber{color:#b45309;}
:root[data-fc-theme="light"] .fc-c-green{color:#15803d;}
:root[data-fc-theme="light"] .fc-c-blue{color:#1d4ed8;}
:root[data-fc-theme="light"] .fc-c-purple{color:#7e22ce;}
:root[data-fc-theme="light"] .fc-hl-yellow{background:rgba(253,224,71,.62);}
:root[data-fc-theme="light"] .fc-hl-green{background:rgba(134,239,172,.6);}
:root[data-fc-theme="light"] .fc-hl-blue{background:rgba(147,197,253,.6);}
:root[data-fc-theme="light"] .fc-hl-pink{background:rgba(249,168,212,.6);}

@media (max-width:640px){
  .fc-toolbar{gap:.2rem;padding:.25rem;}
  .fc-tb-btn{min-height:32px;}
  .fc-tb-sw{width:26px;height:26px;}
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS → OVERVIEW → RECENT SCORES (2026-08-24)
   Replaces a unicode-block sparkline that rendered as an empty
   string when there were no graded attempts, leaving a stray
   lowercase "recent scores" label over dead space. The setup is on
   every row because a 92 on a short Coach case and a 58 on a long
   Exam case are not the same measurement.
   ══════════════════════════════════════════════════════════════ */
.pg-rs{margin-top:.85rem;padding-top:.8rem;border-top:1px solid var(--border);}
.pg-rs-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  flex-wrap:wrap;margin-bottom:.5rem;}
.pg-rs-title{font-size:.8rem;font-weight:700;color:var(--text-primary);}
.pg-rs-hint{font-size:.66rem;color:var(--text-dim);line-height:1.4;}
.pg-rs-empty{font-size:.76rem;color:var(--text-dim);line-height:1.55;padding:.35rem 0 .2rem;}
.pg-rs-list{display:flex;flex-direction:column;gap:.25rem;}
.pg-rs-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;
  width:100%;padding:.42rem .55rem;border-radius:8px;cursor:pointer;text-align:left;
  background:var(--bg-secondary);border:1px solid transparent;
  font-family:'DM Sans',sans-serif;transition:border-color .14s ease,background .14s ease,transform .14s ease;}
.pg-rs-row:hover{border-color:var(--accent-purple);background:var(--bg-card-hover);transform:translateX(2px);}
.pg-rs-when{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-dim);
  white-space:nowrap;}
.pg-rs-setup{font-size:.74rem;color:var(--text-secondary);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.pg-rs-num{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;
  color:var(--text-primary);white-space:nowrap;}
.pg-rs-num.pg-rs-hi{color:var(--accent-green);}
.pg-rs-num.pg-rs-mid{color:var(--accent-amber);}
.pg-rs-num.pg-rs-lo{color:var(--accent-red);}
.pg-rs-cta{display:block;width:100%;margin-top:.6rem;padding:.55rem .7rem;border-radius:9px;
  cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--accent-purple);background:color-mix(in srgb,var(--accent-purple) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-purple) 32%,transparent);
  transition:background .14s ease,border-color .14s ease;}
.pg-rs-cta:hover{background:color-mix(in srgb,var(--accent-purple) 17%,transparent);
  border-color:var(--accent-purple);}
@media(max-width:640px){
  .pg-rs-row{padding:.5rem .55rem;}
  .pg-rs-setup{font-size:.72rem;}
}

/* ══════════════════════════════════════════════════════════════
 * MOBILE SIMULATION FIXES (phones, ≤600px) — added after an on-device
 * walkthrough on iOS. Every rule here lives inside @media(max-width:600px)
 * and is appended at the end of the file on purpose, so it wins by source
 * order over the earlier base rules (e.g. the segmented #ch-badges pill).
 * Desktop (>600px) is byte-for-byte unchanged.
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* — Scenario badge "pill" (#ch-badges): the base rule makes one
       overflow:hidden, non-wrapping segmented bar. On a phone that clips
       the scenario name and — when the whole setup prompt is echoed as a
       badge ("same patient, new complication" reruns) — balloons into a
       giant block that eats the header. Let the badges wrap into rows;
       each colored chip stands on its own. */
  /* Let ch-left wrap so the badges drop to their own full-width row(s)
     under the back button + title, and can shrink to the viewport (so the
     ellipsis below actually has an edge to clip against). */
  .chat-header .ch-left { flex-wrap: wrap; min-width: 0; }
  #ch-badges { flex-wrap: wrap; overflow: visible; border: none; border-radius: 0; gap: .3rem; flex-basis: 100%; max-width: 100%; min-width: 0; }
  #ch-badges .badge, #ch-badges .badge:last-child { border: none; border-radius: 4px; }
  /* The echoed setup-prompt / consult-reason badge can be a whole
       paragraph. On a phone, keep the header compact: drop the ALL-CAPS,
       put it on its own row, and show one ellipsized line — the full text
       stays in the title tooltip (long-press / hover). */
  #ch-badges .badge-prompt {
    text-transform: none; letter-spacing: 0; flex-basis: 100%;
    /* !important beats the badge's own inline white-space:normal / max-width:none */
    white-space: nowrap !important; max-width: 100% !important;
    overflow: hidden; text-overflow: ellipsis;
    font-size: .6rem; line-height: 1.3;
  }

  /* — Panel-orders tray: the chip × was a 14px target sitting one row
       under the destructive "Clear all", which made removing a single
       order feel risky. Give the × a real 26px tap target, taller chips,
       and more breathing room between chips and around "Clear all". */
  .orders-tray-body { gap: .45rem; padding-top: .5rem; padding-bottom: .55rem; }
  .ot-chip { padding: .2rem .25rem .2rem .6rem; font-size: .78rem; -webkit-tap-highlight-color: transparent; }
  .ot-chip-x { width: 26px; height: 26px; font-size: 1rem; }
  .ot-clear-btn { padding: .32rem .6rem; font-size: .72rem; }
  /* Push the minimize (▾) and Clear all far enough apart that a thumb
     aiming for one can't catch the other, and give ▾ a full 40px+ target. */
  .ot-hdr-actions { gap: 1rem; }
  .ot-min-btn { padding: .42rem .8rem; font-size: 1rem; margin-left: 0; }

  /* — RSI & Ventilator modal: it was a fixed 440px, wider than the phone,
       so it ran off-screen and clipped the auto-filled Tidal-Volume value
       ("…mL/kg × 112 kg actual — IBW not available)"). Fit it to the
       viewport and stack each field's label above a full-width control so
       nothing has to scroll sideways. */
  .rsi-modal { width: 94vw; max-width: 94vw; }
  .rsi-row { flex-direction: column; align-items: stretch; gap: .25rem; }
  .rsi-row label { min-width: 0; }
  .rsi-row select, .rsi-dose { width: 100%; min-width: 0; }

  /* — Debrief / highlight panel internals: now that the panel is full
       width, let its flex children shrink so the question input and the
       quoted-highlight banner can never spill past the right edge (the
       overflow seen when asking about highlighted text). */
  .qs-ir, .qs-i { min-width: 0; }
  .qs-ft, .qs-ir, .hl-ref-banner { max-width: 100%; box-sizing: border-box; }
  .hl-ref-banner .hl-text { min-width: 0; }
}

/* ── Add-note stickiness pass (2026-08-28) ─────────────────────
   Landing quick-capture pill, My Notes in-place editing + search,
   and the post-save "make a flashcard" step. */
.landing-addnote-row{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.65rem auto .9rem;max-width:680px;}
.landing-addnote-pill{font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:700;padding:.42rem .95rem;border-radius:999px;border:1.5px solid var(--accent-green);background:rgba(34,197,94,.1);color:var(--accent-green);cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap;}
.landing-addnote-pill:hover{background:rgba(34,197,94,.18);transform:translateY(-1px);}
.landing-addnote-hint{font-size:.68rem;color:var(--text-dim);line-height:1.4;max-width:420px;text-align:left;}
@media (max-width:600px){ .landing-addnote-hint{text-align:center;} }

.lib-notes-search-wrap{max-width:760px;width:100%;margin:.15rem 0 .5rem;}
.lib-notes-search{width:100%;box-sizing:border-box;padding:.45rem .65rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-size:.72rem;font-family:'DM Sans',sans-serif;}

.lib-note-item-editing{border-color:var(--accent-green);}
.lib-note-edit-ta{width:100%;box-sizing:border-box;margin-top:.35rem;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--accent-green);background:var(--bg-secondary);color:var(--text-primary);font-size:.74rem;line-height:1.5;font-family:'DM Sans',sans-serif;resize:vertical;}
.lib-note-act-save{border-color:var(--accent-green);color:var(--accent-green);}

.lib-addnote-savedmark{font-size:.8rem;font-weight:700;color:var(--accent-green);}
.lib-addnote-savednext{font-size:.72rem;color:var(--text-secondary);line-height:1.5;}

/* ── My Notes landing panel (2026-08-28; repositioned 2026-08-29) ──
   FIRST card of the daily band (.landing-row-2): one personal note per
   day with ‹ › cycling. Sized by the row's own 1fr/1fr/1.3fr template. */
.landing-row-2>#my-pearls-card{width:100%;min-width:0;display:flex;}
.landing-row-2>#my-pearls-card>*{width:100%;}
/* My Notes accent — ROSE PINK, deliberately DISTANT from Daily
   Flashcards' green and FOTD's blue (the three share a row; three
   different hue families keep them reading as three features). All
   pearl-* rules reference this one variable. Card chrome matches the
   Daily Flashcards language: full 1.5px neon border + lightly shaded
   gradient + soft glow. */
.pearl-card{--pearl-accent:#ec4899;position:relative;
  background:linear-gradient(135deg, color-mix(in srgb, var(--pearl-accent) 10%, transparent), color-mix(in srgb, var(--pearl-accent) 3%, transparent) 60%, transparent), var(--bg-card);
  border:1.5px solid color-mix(in srgb, var(--pearl-accent) 55%, transparent);
  border-radius:14px;padding:.85rem 1rem .8rem;display:flex;flex-direction:column;gap:.45rem;box-sizing:border-box;height:100%;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--pearl-accent) 9%, transparent);
  transition:transform .25s ease,box-shadow .25s ease;}
.pearl-card:hover{transform:translateY(-2px);box-shadow:0 0 0 5px color-mix(in srgb, var(--pearl-accent) 14%, transparent),0 6px 18px rgba(0,0,0,.08);}
.pearl-hdr{display:flex;align-items:center;gap:.55rem;}
/* 2026-08-28b — "My Notes" is the panel's NAME, not a kicker: header-sized
   so it reads like the other landing tiles' titles. */
.pearl-lbl{font-family:'JetBrains Mono',monospace;font-size:.98rem;font-weight:700;letter-spacing:.02em;color:var(--pearl-accent);}
.pearl-count{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.pearl-nav{margin-left:auto;display:flex;gap:.3rem;}
.pearl-arrow{width:1.55rem;height:1.55rem;border-radius:50%;border:1px solid var(--border);background:var(--bg-secondary);
  color:var(--text-secondary);font-size:.95rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;}
.pearl-arrow:hover:not(:disabled){border-color:var(--pearl-accent);color:var(--pearl-accent);background:color-mix(in srgb, var(--pearl-accent) 8%, transparent);}
.pearl-arrow:disabled{opacity:.35;cursor:default;}
/* Body: fills the card's height with the content vertically centered so
   short notes never leave a slab of dead space (2026-08-28b redesign —
   the user's note is the centered hero; a giant quote-mark watermark
   gives the empty ground a purpose). */
.pearl-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;text-align:center;position:relative;padding:.3rem .2rem;min-height:0;}
.pearl-body::before{content:'\201C';position:absolute;top:-1.1rem;left:50%;transform:translateX(-50%);
  font-family:Georgia,'Times New Roman',serif;font-size:7.5rem;line-height:1;color:var(--pearl-accent);
  opacity:.07;pointer-events:none;user-select:none;}
.pearl-crumb{font-size:.68rem;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;position:relative;}
.pearl-ts{color:var(--text-dim);font-family:'JetBrains Mono',monospace;font-size:.62rem;}
.pearl-fcchip{font-size:.7rem;}
.pearl-body .note-blk-lbl{margin:.3rem 0 0;}
.pearl-note-hero{font-size:.86rem;line-height:1.55;font-weight:500;color:var(--text-primary);max-width:36ch;position:relative;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;}
/* 2026-08-28b — the anchored LIBRARY passage now reads visually "not yours":
   blue book-tint + left rule (green stays reserved for the user's own words),
   so the your-note / library-passage split is legible at a glance. */
.pearl-quote{font-size:.68rem;line-height:1.5;color:var(--text-secondary);max-width:40ch;position:relative;text-align:left;
  background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.22);border-left:3px solid rgba(59,130,246,.55);
  border-radius:8px;padding:.35rem .6rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* Highlight saved with no personal note yet — say so, quietly. */
.pearl-note-none{font-size:.72rem;color:var(--text-dim);font-style:italic;max-width:36ch;position:relative;}
.pearl-actions{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding-top:.35rem;}
.pearl-btn{font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:600;padding:.28rem .6rem;border-radius:7px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.pearl-btn:hover:not(:disabled){border-color:var(--pearl-accent);color:var(--pearl-accent);}
.pearl-btn:disabled{opacity:.6;cursor:default;}
.pearl-btn-save{border-color:var(--pearl-accent);color:var(--pearl-accent);}
.pearl-btn-add{border-color:var(--pearl-accent);color:var(--pearl-accent);background:color-mix(in srgb, var(--pearl-accent) 8%, transparent);}
.pearl-btn-all{border-style:dashed;}
.pearl-foot{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;
  border-top:1px dashed var(--border);margin-top:.15rem;padding-top:.5rem;}
.pearl-edit-ta{width:100%;box-sizing:border-box;padding:.45rem .55rem;border-radius:8px;border:1px solid var(--pearl-accent);
  background:var(--bg-secondary);color:var(--text-primary);font-size:.74rem;line-height:1.5;font-family:'DM Sans',sans-serif;resize:vertical;}
.pearl-card-empty .pearl-empty-body{font-size:.76rem;color:var(--text-secondary);line-height:1.6;max-width:36ch;position:relative;}
.pearl-card-empty .pearl-actions{justify-content:center;}

/* Shared "which part is which" labels on personal notes (My Pearls panel
   + My Notes lists): the anchored passage vs the user's own words. */
.note-blk-lbl{font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(59,130,246,.85);margin:.15rem 0 .12rem;}
.note-blk-lbl-own{color:var(--accent-green);font-size:.62rem;}
/* Inside the teal My Notes landing card, "your note" labels follow the
   card's accent; library note lists elsewhere keep green. */
.pearl-card .note-blk-lbl-own{color:var(--pearl-accent);}

/* ══════════════════════════════════════════════════════════════
 * LANDING TOUR (2026-08-28) — spotlight walkthrough of the landing
 * tiles for first-time users (landingTour.js). The overlay dims the
 * page; the current tile gets .tour-spot, which lifts it ABOVE the
 * overlay with a glow. The explainer card is fixed to the bottom.
 * ══════════════════════════════════════════════════════════════ */
#tour-overlay{position:fixed;inset:0;background:rgba(10,14,23,.62);z-index:10900;cursor:pointer;}
/* NOTE: no `position` here — forcing relative relocated fixed-position
   targets (the theme pill). The engine sets position:relative inline
   only when the target is static, so z-index can bite. */
.tour-spot{z-index:10901 !important;border-radius:14px;
  box-shadow:0 0 0 4px var(--accent-cyan),0 0 32px 8px rgba(6,182,212,.35) !important;}
#tour-card{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:10902;
  width:min(480px,calc(100vw - 2rem));box-sizing:border-box;
  background:var(--bg-card);border:1.5px solid var(--accent-cyan);border-radius:14px;
  padding:.9rem 1.05rem .8rem;box-shadow:0 18px 50px rgba(0,0,0,.4);
  font-family:'DM Sans',sans-serif;}
.tour-card-hdr{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;}
.tour-card-icon{font-size:1.15rem;}
.tour-card-title{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.92rem;color:var(--text-primary);}
.tour-card-pos{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.tour-card-body{font-size:.8rem;line-height:1.55;color:var(--text-secondary);margin-bottom:.65rem;}
.tour-card-btns{display:flex;align-items:center;gap:.45rem;}
.tour-btn-spacer{flex:1;}
.tour-btn{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;padding:.34rem .75rem;border-radius:8px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.tour-btn:hover:not(:disabled){border-color:var(--accent-cyan);color:var(--accent-cyan);}
.tour-btn:disabled{opacity:.4;cursor:default;}
.tour-btn-next{border-color:var(--accent-cyan);background:rgba(6,182,212,.12);color:var(--accent-cyan);}
.tour-btn-skip{border-style:dashed;color:var(--text-dim);}
/* First-visit welcome prompt */
#tour-welcome{position:fixed;inset:0;background:rgba(10,14,23,.55);z-index:10900;display:flex;align-items:center;justify-content:center;padding:1rem;}
.tour-welcome-card{background:var(--bg-card);border:1.5px solid var(--accent-cyan);border-radius:16px;
  width:min(440px,100%);box-sizing:border-box;padding:1.15rem 1.2rem 1rem;box-shadow:0 18px 50px rgba(0,0,0,.4);
  font-family:'DM Sans',sans-serif;}
.tour-welcome-title{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.98rem;color:var(--text-primary);margin-bottom:.45rem;}
.tour-welcome-body{font-size:.8rem;line-height:1.6;color:var(--text-secondary);margin-bottom:.75rem;}
#tour-welcome .tour-card-btns{justify-content:flex-end;}
/* Permanent replay pill on the landing page */
.landing-tour-pill{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;padding:.3rem .75rem;border-radius:999px;
  border:1px dashed var(--border);background:transparent;color:var(--text-dim);cursor:pointer;
  transition:border-color .15s,color .15s;margin-top:.55rem;}
.landing-tour-pill:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}

/* "Why log pearls" explainer inside the Add-note hub (libraryCustom.js) */
.lib-addnote-why{border:1px dashed color-mix(in srgb, var(--accent-green) 40%, var(--border));border-radius:9px;
  padding:.4rem .6rem;margin-bottom:.55rem;background:rgba(34,197,94,.04);}
.lib-addnote-why summary{cursor:pointer;font-size:.7rem;font-weight:700;color:var(--accent-green);list-style:none;}
.lib-addnote-why summary::-webkit-details-marker{display:none;}
.lib-addnote-why-body{font-size:.7rem;line-height:1.6;color:var(--text-secondary);padding-top:.4rem;}

/* ── 2026-08-29 additions ─────────────────────────────────────── */
/* Due-date line on the My Assignments landing tile — always present
   when anything is open, even as "No due date set". */
.ma-tile-due-line{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;color:var(--text-dim);}
.ma-tile-due-line.ma-tile-due-overdue{color:var(--accent-red);}
.ma-tile-due-line.ma-tile-due-today,.ma-tile-due-line.ma-tile-due-soon{color:var(--accent-amber);}
/* Library tour replay pill sits under the Browse|Personal toggle. */
.lib-tour-pill{margin:.15rem 0 .35rem;}

/* Scores & Data collapse toggle (2026-08-29) — mirrors the absolutely-
   positioned "Last 3" chip on the other side of the centered header. */
.ra-collapse-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:'DM Sans',sans-serif;font-size:.62rem;font-weight:600;padding:.16rem .5rem;border-radius:6px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-dim);cursor:pointer;
  transition:border-color .15s,color .15s;}
.ra-collapse-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}

/* ══════════════════════════════════════════════════════════════
 * ACID-BASE: COMPENSATION CARDS + STEP PATHWAY + ABG TRAINER
 * (2026-08-29)
 * ══════════════════════════════════════════════════════════════ */

/* ── Compensation rule cards (advanced_topics.js → renderATCompRules) ──
   Metabolic disorders green, respiratory teal: same family, two clearly
   different shades, so the two groups sort at a glance. */
.at-comp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.6rem 0 .2rem;}
@media(max-width:760px){.at-comp-grid{grid-template-columns:1fr;}}
.at-comp-card{
  border:1px solid color-mix(in srgb, var(--at-comp-accent) 38%, transparent);
  border-left:3px solid var(--at-comp-accent);
  border-radius:10px;padding:.6rem .7rem;
  background:color-mix(in srgb, var(--at-comp-accent) 6%, transparent);
}
.at-comp-head{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.35rem;}
.at-comp-name{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--at-comp-accent);}
.at-comp-gloss{font-size:.66rem;font-style:italic;color:var(--text-dim);line-height:1.35;}
.at-comp-line{font-size:.72rem;line-height:1.55;color:var(--text-secondary);margin-top:.28rem;}
.at-comp-when{color:var(--at-comp-accent);font-weight:700;}

/* ── Step pathway (sub.pathway) — all steps visible in one column ── */
.at-pathway{margin:1rem 0 .75rem;padding:.8rem .85rem;border:1px solid rgba(6,182,212,.22);border-radius:12px;
  background:linear-gradient(180deg, rgba(6,182,212,.065), rgba(255,255,255,.015));}
.at-pathway-label{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent-cyan);margin-bottom:.85rem;text-align:center;}
@media(max-width:640px){.at-pathway-label{font-size:.72rem;letter-spacing:.09em;}}
.at-pathway-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.at-pathway-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:.65rem;align-items:start;}
/* Connector rail between the numbered nodes. */
.at-pathway-step::before{content:'';position:absolute;left:16px;top:30px;bottom:-.5rem;width:2px;
  background:linear-gradient(180deg,var(--border),color-mix(in srgb,var(--border) 30%,transparent));}
.at-pathway-step:last-child::before{display:none;}
.at-pathway-num{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:#fff;
  background:var(--at-section-accent,var(--accent-cyan));position:relative;z-index:1;flex:0 0 auto;}
.at-pathway-body{border:1px solid var(--border);border-radius:11px;background:var(--bg-card);padding:.65rem .8rem;min-width:0;}
.at-pathway-title{font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:700;
  color:var(--at-section-accent,var(--accent-cyan));margin:0 0 .35rem;letter-spacing:.01em;}
@media(max-width:560px){
  .at-pathway{padding:.6rem .5rem;}
  .at-pathway-step{grid-template-columns:26px minmax(0,1fr);gap:.5rem;}
  .at-pathway-num{width:24px;height:24px;font-size:.68rem;}
  .at-pathway-step::before{left:12px;top:26px;}
}

/* ── ABG trainer ─────────────────────────────────────────────── */
.abg-trainer-host{margin:1rem 0 .25rem;}
.abg-trainer{border:1.5px solid color-mix(in srgb,var(--accent-cyan) 45%,transparent);border-radius:14px;
  padding:.85rem 1rem .9rem;font-family:'DM Sans',sans-serif;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-cyan) 9%,transparent),
    color-mix(in srgb,var(--accent-cyan) 3%,transparent) 60%,transparent),var(--bg-card);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-cyan) 8%,transparent);}
.abg-trainer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;flex-wrap:wrap;}
.abg-trainer-kicker{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-cyan);}
.abg-trainer-title{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--text-primary);}
.abg-trainer-sub{font-size:.72rem;line-height:1.55;color:var(--text-secondary);margin-top:.45rem;}
.abg-trainer-actions{display:flex;gap:.4rem;flex-wrap:wrap;}
.abg-btn{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;padding:.36rem .8rem;border-radius:8px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.abg-btn:hover:not(:disabled){border-color:var(--accent-cyan);color:var(--accent-cyan);}
.abg-btn:disabled{opacity:.5;cursor:default;}
.abg-btn-primary{border-color:var(--accent-cyan);background:color-mix(in srgb,var(--accent-cyan) 14%,transparent);color:var(--accent-cyan);}
.abg-check{width:100%;margin-top:.7rem;padding:.55rem 1rem;}
.abg-story{font-size:.78rem;line-height:1.6;color:var(--text-primary);margin:.7rem 0 .6rem;
  padding:.55rem .7rem;border-left:3px solid var(--accent-cyan);border-radius:0 8px 8px 0;
  background:color-mix(in srgb,var(--accent-cyan) 6%,transparent);}
.abg-values{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;}
.abg-val{flex:1 1 92px;border:1px solid var(--border);border-radius:9px;padding:.4rem .55rem;background:var(--bg-secondary);}
.abg-val-lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-dim);}
.abg-val-num{display:block;font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--text-primary);margin-top:.1rem;}
.abg-val-unit{font-size:.58rem;font-weight:500;color:var(--text-dim);margin-left:.15rem;}
.abg-values-note{flex:1 1 100%;font-size:.66rem;color:var(--text-dim);}
.abg-qs{display:flex;flex-direction:column;gap:.65rem;}
.abg-q-kicker{font-family:'JetBrains Mono',monospace;font-size:.63rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem;}
.abg-chip-row{display:flex;flex-wrap:wrap;gap:.35rem;}
.abg-chip{font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;padding:.34rem .7rem;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.abg-chip:hover:not(:disabled){border-color:var(--accent-cyan);color:var(--accent-cyan);}
.abg-chip:disabled{cursor:default;}
.abg-chip-picked{border-color:var(--accent-cyan);background:color-mix(in srgb,var(--accent-cyan) 14%,transparent);color:var(--accent-cyan);}
.abg-chip-right{border-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 15%,transparent);color:var(--accent-green);}
.abg-chip-wrong{border-color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 12%,transparent);color:var(--accent-red);text-decoration:line-through;}
.abg-mark{font-size:.8rem;}
.abg-mark-ok{color:var(--accent-green);}
.abg-mark-no{color:var(--accent-red);}
.abg-score{margin:.8rem 0 .2rem;padding:.5rem .7rem;border-radius:9px;font-size:.75rem;line-height:1.5;}
.abg-score strong{font-family:'JetBrains Mono',monospace;margin-right:.35rem;}
.abg-score-good{background:color-mix(in srgb,var(--accent-green) 12%,transparent);color:var(--accent-green);border:1px solid color-mix(in srgb,var(--accent-green) 30%,transparent);}
.abg-score-mid{background:color-mix(in srgb,var(--accent-amber) 12%,transparent);color:var(--accent-amber);border:1px solid color-mix(in srgb,var(--accent-amber) 30%,transparent);}
.abg-score-bad{background:color-mix(in srgb,var(--accent-red) 10%,transparent);color:var(--accent-red);border:1px solid color-mix(in srgb,var(--accent-red) 28%,transparent);}
/* Worked solution */
.abg-solution{margin-top:.85rem;border-top:1px dashed var(--border);padding-top:.75rem;}
.abg-solution-label{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-cyan);margin-bottom:.6rem;}
.abg-step{display:grid;grid-template-columns:24px minmax(0,1fr);gap:.55rem;align-items:start;margin-bottom:.55rem;}
.abg-step-n{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.65rem;font-weight:700;
  background:color-mix(in srgb,var(--accent-cyan) 18%,transparent);color:var(--accent-cyan);flex:0 0 auto;}
.abg-step-title{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;color:var(--text-primary);margin-bottom:.2rem;}
.abg-step-line{font-size:.73rem;line-height:1.55;color:var(--text-secondary);}
.abg-formula{font-family:'JetBrains Mono',monospace;font-size:.68rem;line-height:1.5;color:var(--text-primary);
  background:var(--bg-secondary);border:1px solid var(--border);border-radius:7px;padding:.3rem .5rem;margin:.22rem 0;
  overflow-x:auto;white-space:nowrap;}
.abg-comp-rule{margin-bottom:.4rem;padding-left:.5rem;border-left:2px solid var(--border);}
.abg-comp-rule.abg-comp-fits{border-left-color:var(--accent-green);}
.abg-comp-name{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-dim);}
.abg-flag{margin-top:.3rem;font-size:.7rem;line-height:1.5;color:var(--accent-amber);
  background:color-mix(in srgb,var(--accent-amber) 10%,transparent);border-radius:7px;padding:.35rem .5rem;}
.abg-final{font-size:.76rem;line-height:1.55;font-weight:600;color:var(--accent-green);
  background:color-mix(in srgb,var(--accent-green) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-green) 28%,transparent);border-radius:8px;padding:.45rem .6rem;}
.abg-final-mixed{color:var(--accent-amber);background:color-mix(in srgb,var(--accent-amber) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-amber) 28%,transparent);}
.abg-teach{font-size:.72rem;line-height:1.55;color:var(--text-secondary);margin-top:.35rem;}
/* Own-values inputs */
.abg-inputs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0 .5rem;}
.abg-input{flex:1 1 100px;display:flex;flex-direction:column;gap:.15rem;}
.abg-input span{font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);}
.abg-input input{width:100%;box-sizing:border-box;padding:.38rem .5rem;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:.8rem;}
.abg-input input:focus{outline:none;border-color:var(--accent-cyan);}
.abg-own-hint{font-size:.72rem;color:var(--text-dim);padding:.3rem 0;}

/* ══════════════════════════════════════════════════════════════
 * SHOCK & HEMODYNAMICS — two workspaces, phenotype comparison,
 * pressure circuit, parameter search, profile calculator (2026-08-29)
 * ══════════════════════════════════════════════════════════════ */

/* ── Two destination cards (replaces the two small pill tabs) ── */
.shock-dests{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem;}
@media(max-width:760px){.shock-dests{grid-template-columns:1fr;}}
.shock-dest{display:flex;align-items:flex-start;gap:.7rem;text-align:left;width:100%;box-sizing:border-box;
  padding:.8rem .9rem;border-radius:13px;border:1.5px solid var(--border);background:var(--bg-card);cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;}
.shock-dest:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--dest-accent) 55%,transparent);}
.shock-dest.active{border-color:var(--dest-accent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--dest-accent) 11%,transparent),
    color-mix(in srgb,var(--dest-accent) 3%,transparent) 60%,transparent),var(--bg-card);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dest-accent) 10%,transparent);}
.shock-dest-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;
  background:color-mix(in srgb,var(--dest-accent) 16%,transparent);color:var(--dest-accent);}
.shock-dest.active .shock-dest-n{background:var(--dest-accent);color:#fff;}
.shock-dest-main{display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1 1 auto;}
.shock-dest-kicker{font-family:'JetBrains Mono',monospace;font-size:.57rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);}
.shock-dest.active .shock-dest-kicker{color:var(--dest-accent);}
.shock-dest-title{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;color:var(--text-primary);}
.shock-dest-desc{font-size:.68rem;line-height:1.45;color:var(--text-secondary);}
.shock-dest-right{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex:0 0 auto;}
.shock-dest-scope{font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .45rem;border-radius:6px;white-space:nowrap;
  background:color-mix(in srgb,var(--dest-accent) 13%,transparent);color:var(--dest-accent);}
.shock-dest-open{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;color:var(--dest-accent);white-space:nowrap;}

/* ── Phenotype comparison grid ────────────────────────────────── */
.shock-compare{border:1px solid var(--border);border-radius:12px;padding:.75rem .8rem;margin-bottom:.85rem;background:var(--bg-card);}
.shock-compare-kicker{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-dim);}
.shock-compare-sub{font-size:.8rem;color:var(--text-secondary);margin-top:.15rem;margin-bottom:.6rem;line-height:1.45;}
.shock-compare-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;}
@media(max-width:1100px){.shock-compare-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:700px){.shock-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:460px){.shock-compare-grid{grid-template-columns:1fr;}}
.shock-cmp-card{position:relative;display:flex;flex-direction:column;gap:.4rem;text-align:left;padding:.7rem .75rem;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--cmp-accent) 32%,transparent);border-top:3px solid var(--cmp-accent);
  border-radius:10px;background:color-mix(in srgb,var(--cmp-accent) 5%,transparent);
  font-family:'DM Sans',sans-serif;transition:transform .14s,box-shadow .14s,background .14s;}
.shock-cmp-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);}
.shock-cmp-card.active{background:color-mix(in srgb,var(--cmp-accent) 12%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--cmp-accent) 45%,transparent);}
.shock-cmp-title{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--text-primary);}
.shock-cmp-tick{color:var(--cmp-accent);}
.shock-cmp-one{font-size:.78rem;line-height:1.4;color:var(--text-secondary);}
.shock-cmp-rows{display:flex;flex-direction:column;gap:.1rem;margin-top:.15rem;}
.shock-cmp-row{display:flex;align-items:baseline;justify-content:space-between;gap:.35rem;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;border-bottom:1px dotted var(--border);padding:.22rem 0;}
.shock-cmp-lbl{color:var(--text-dim);font-weight:600;}
.shock-cmp-val{color:var(--cmp-accent);font-weight:700;text-align:right;}
.shock-cmp-clue{font-size:.76rem;line-height:1.4;color:var(--text-secondary);font-style:italic;
  background:color-mix(in srgb,var(--cmp-accent) 10%,transparent);border-radius:6px;padding:.22rem .4rem;margin-top:.25rem;}
.shock-hemo-strip{font-size:.72rem;padding:.35rem .5rem;border-left:3px solid var(--cmp-accent);border-radius:4px;
  margin-bottom:.5rem;color:var(--cmp-accent);font-family:'JetBrains Mono',monospace;font-weight:600;
  background:color-mix(in srgb,var(--cmp-accent) 9%,transparent);}
.shock-severity{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;color:var(--accent-red);
  background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.25);border-radius:6px;padding:.3rem .5rem;margin-bottom:.6rem;}
/* Subtype accordions */
.shock-sub-acc{border:1px solid var(--border);border-left:3px solid var(--sub-accent);border-radius:8px;
  margin-bottom:.45rem;background:var(--bg-card);}
.shock-sub-summary{cursor:pointer;list-style:none;padding:.42rem .6rem;font-family:'JetBrains Mono',monospace;
  font-size:.76rem;font-weight:700;color:var(--text-primary);}
.shock-sub-summary::-webkit-details-marker{display:none;}
.shock-sub-summary::before{content:'▸ ';color:var(--sub-accent);}
.shock-sub-acc[open] .shock-sub-summary::before{content:'▾ ';}
.shock-sub-inner{padding:0 .6rem .5rem;}
.shock-sub-flash{animation:shockFlash 1.6s ease-out;}
@keyframes shockFlash{0%,40%{background:color-mix(in srgb,var(--accent-cyan) 18%,transparent);}100%{background:transparent;}}

/* ── Hemodynamics chrome: search + mode switch ─────────────────── */
.hemo-chrome{margin-bottom:.8rem;}
.hemo-chrome-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.hemo-search{flex:1 1 280px;min-width:0;padding:.5rem .7rem;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;}
.hemo-search:focus{outline:none;border-color:var(--accent-purple);}
.hemo-modes{display:flex;gap:.25rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:9px;padding:.18rem;}
.hemo-mode{font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;padding:.3rem .7rem;border-radius:7px;
  border:none;background:transparent;color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;}
.hemo-mode.active{background:var(--accent-purple);color:#fff;}
.hemo-search-count{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim);margin:.5rem 0 .4rem;}
.hemo-search-empty{font-size:.75rem;color:var(--text-dim);padding:.8rem;text-align:center;
  border:1px dashed var(--border);border-radius:10px;}
.hemo-search-results{display:flex;flex-direction:column;gap:.4rem;}
.hemo-hit{display:flex;flex-direction:column;gap:.15rem;text-align:left;padding:.5rem .65rem;cursor:pointer;
  border:1px solid var(--border);border-left:3px solid var(--hit-accent);border-radius:9px;background:var(--bg-card);
  font-family:'DM Sans',sans-serif;transition:border-color .15s,transform .12s;}
.hemo-hit:hover{transform:translateX(2px);border-color:var(--hit-accent);}
.hemo-hit-name{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;color:var(--text-primary);}
.hemo-hit-cat{font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hit-accent);}
.hemo-hit-snip{font-size:.7rem;line-height:1.45;color:var(--text-secondary);}

/* ── Pressure circuit ─────────────────────────────────────────── */
.hemo-circuit{border:1px solid var(--border);border-radius:12px;padding:.75rem .8rem;margin-bottom:.85rem;background:var(--bg-card);}
.hemo-circuit-kicker{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-purple);}
.hemo-circuit-blurb{font-size:.72rem;line-height:1.5;color:var(--text-secondary);margin:.2rem 0 .65rem;}
.hemo-circuit-row{display:flex;align-items:stretch;gap:.3rem;overflow-x:auto;padding-bottom:.2rem;}
.hemo-node{flex:1 1 0;min-width:110px;display:flex;flex-direction:column;align-items:center;gap:.12rem;
  padding:.5rem .4rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:border-color .15s,transform .12s;}
.hemo-node:hover{border-color:var(--accent-purple);transform:translateY(-2px);}
.hemo-node-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  background:color-mix(in srgb,var(--accent-purple) 16%,transparent);color:var(--accent-purple);}
.hemo-node-label{font-family:'JetBrains Mono',monospace;font-size:.74rem;font-weight:700;color:var(--text-primary);}
.hemo-node-normal{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--accent-purple);text-align:center;}
.hemo-node-note{font-size:.6rem;color:var(--text-dim);text-align:center;line-height:1.3;}
.hemo-node-arrow{align-self:center;color:var(--text-dim);font-size:.9rem;flex:0 0 auto;}

/* ── Profile calculator ───────────────────────────────────────── */
.hemo-calc{border:1px solid color-mix(in srgb,var(--accent-purple) 35%,var(--border));border-radius:12px;
  padding:.8rem .85rem;background:var(--bg-card);}
.hemo-calc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;flex-wrap:wrap;}
.hemo-calc-kicker{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-purple);}
.hemo-calc-sub{font-size:.72rem;line-height:1.5;color:var(--text-secondary);margin-top:.15rem;max-width:60ch;}
.hemo-calc-actions{display:flex;gap:.35rem;}
.hemo-btn{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;padding:.3rem .65rem;border-radius:7px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;transition:border-color .15s,color .15s;}
.hemo-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple);}
.hemo-inputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.4rem;margin:.7rem 0 .55rem;}
.hemo-in{display:flex;flex-direction:column;gap:.12rem;}
.hemo-in-lbl{font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim);}
.hemo-in-lbl em{font-style:normal;font-weight:500;opacity:.75;}
.hemo-in input{width:100%;box-sizing:border-box;padding:.34rem .45rem;border-radius:7px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:.78rem;}
.hemo-in input:focus{outline:none;border-color:var(--accent-purple);}
.hemo-in-derived input{border-style:dashed;border-color:color-mix(in srgb,var(--accent-purple) 45%,var(--border));}
.hemo-calc-limit{font-size:.68rem;line-height:1.55;color:var(--accent-amber);background:color-mix(in srgb,var(--accent-amber) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-amber) 28%,transparent);border-radius:8px;padding:.4rem .55rem;margin-bottom:.65rem;}
.hemo-calc-empty{font-size:.73rem;color:var(--text-dim);padding:.7rem;text-align:center;border:1px dashed var(--border);border-radius:9px;}
.hemo-res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.5rem;}
.hemo-res{border:1px solid var(--border);border-radius:10px;padding:.5rem .6rem;background:var(--bg-secondary);}
.hemo-res-low{border-color:rgba(59,130,246,.45);}
.hemo-res-high{border-color:rgba(239,68,68,.45);}
.hemo-res-ok{border-color:rgba(34,197,94,.4);}
.hemo-res-top{display:flex;align-items:baseline;justify-content:space-between;gap:.4rem;}
.hemo-res-name{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--text-dim);}
.hemo-res-val{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--text-primary);}
.hemo-res-unit{font-size:.55rem;font-weight:500;color:var(--text-dim);margin-left:.2rem;}
.hemo-res-formula{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text-secondary);margin-top:.2rem;
  overflow-x:auto;white-space:nowrap;}
.hemo-res-range{font-size:.65rem;color:var(--text-secondary);margin-top:.2rem;line-height:1.4;}
.hemo-res-low .hemo-res-range strong{color:var(--accent-blue);}
.hemo-res-high .hemo-res-range strong{color:var(--accent-red);}
.hemo-res-ok .hemo-res-range strong{color:var(--accent-green);}
.hemo-res-note{font-size:.65rem;line-height:1.45;color:var(--text-secondary);margin-top:.25rem;font-style:italic;}
.hemo-res-ref{margin-top:.3rem;}
.hemo-res-ref summary{cursor:pointer;font-size:.62rem;font-weight:600;color:var(--accent-purple);list-style:none;}
.hemo-res-ref summary::-webkit-details-marker{display:none;}
.hemo-res-ref summary::before{content:'▸ ';}
.hemo-res-ref[open] summary::before{content:'▾ ';}
.hemo-res-ref-body{font-size:.66rem;line-height:1.5;color:var(--text-secondary);margin-top:.25rem;}
.hemo-in-derived-tag{font-style:normal;font-weight:700;color:var(--accent-purple);opacity:.9;}

/* ══════════════════════════════════════════════════════════════
 * STAGED PATHWAY + TABLE UPGRADES (2026-08-29)
 * Respiratory failure renders as Classify → Find the mechanism →
 * Choose support. The stage strip stays visible; stage bands split
 * the continuous column; tables gain a takeaway line, a drawer, an
 * emergency step style, and a mobile record layout.
 * ══════════════════════════════════════════════════════════════ */
.at-stage-strip{display:flex;align-items:stretch;gap:.25rem;margin-bottom:.9rem;overflow-x:auto;padding-bottom:.2rem;}
.at-stage-chip{flex:1 1 0;min-width:150px;display:flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.5rem .6rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);
  transition:border-color .15s,transform .12s;}
.at-stage-chip:hover{border-color:var(--accent-cyan);transform:translateY(-1px);}
.at-stage-n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;
  background:color-mix(in srgb,var(--accent-cyan) 16%,transparent);color:var(--accent-cyan);}
.at-stage-txt{display:flex;flex-direction:column;min-width:0;}
.at-stage-title{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--text-primary);}
.at-stage-sub{font-size:.62rem;line-height:1.35;color:var(--text-dim);}
.at-stage-arrow{align-self:center;color:var(--text-dim);flex:0 0 auto;font-size:.85rem;}
@media(max-width:640px){.at-stage-arrow{display:none;}.at-stage-strip{flex-direction:column;}}
/* Stage band inside the column */
.at-stage-band{display:flex;align-items:center;gap:.5rem;margin:.7rem 0 .1rem;padding:.35rem 0 .3rem;
  border-bottom:1px dashed var(--border);list-style:none;}
.at-stage-band:first-child{margin-top:0;}
.at-stage-band-n{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;
  background:var(--accent-cyan);color:#fff;flex:0 0 auto;}
.at-stage-band-txt{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;}
.at-stage-band-txt strong{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--accent-cyan);}
.at-stage-band-txt em{font-style:normal;font-size:.68rem;color:var(--text-dim);}
/* Emergency step (upper-airway compromise bypasses the ladder) */
.at-step-emergency .at-pathway-body{border-color:rgba(239,68,68,.45);
  background:linear-gradient(180deg,rgba(239,68,68,.06),transparent 60%),var(--bg-card);}
.at-step-emergency .at-pathway-num{background:var(--accent-red);}
.at-step-emergency-tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent-red);background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.28);border-radius:6px;padding:.2rem .45rem;display:inline-block;margin-bottom:.35rem;}
/* Expandable drawer (A-a gradient calculation beside its interpretation) */
.at-drawer{border:1px dashed var(--border);border-radius:8px;padding:.35rem .55rem;margin:.4rem 0;
  background:color-mix(in srgb,var(--at-section-accent,var(--accent-cyan)) 4%,transparent);}
.at-drawer summary{cursor:pointer;list-style:none;font-family:'JetBrains Mono',monospace;font-size:.64rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--at-section-accent,var(--accent-cyan));}
.at-drawer summary::-webkit-details-marker{display:none;}
.at-drawer summary::before{content:'▸ ';}
.at-drawer[open] summary::before{content:'▾ ';}
.at-drawer-body{font-size:.72rem;line-height:1.55;color:var(--text-secondary);margin-top:.3rem;}
/* One-line takeaway under a table */
.at-table-note{font-size:.7rem;line-height:1.55;color:var(--text-secondary);margin-top:.4rem;padding:.35rem .55rem;
  border-left:3px solid var(--at-section-accent,var(--accent-cyan));border-radius:0 7px 7px 0;
  background:color-mix(in srgb,var(--at-section-accent,var(--accent-cyan)) 7%,transparent);}
/* Mobile: every table row becomes a labelled record instead of a
   four-column horizontal scroll. Relies on data-label emitted by
   renderATTable. Mnemonic tables keep their letter column inline. */
@media(max-width:600px){
  .at-table-wrap{overflow-x:visible;}
  .at-table-wrap .at-table{min-width:0;}
  .at-table:not(.at-table-mnemonic) thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .at-table:not(.at-table-mnemonic) tr{display:block;border:1px solid var(--border);border-radius:9px;
    margin-bottom:.45rem;padding:.15rem .1rem;background:var(--bg-card);}
  .at-table:not(.at-table-mnemonic) td{display:flex;gap:.5rem;border-bottom:1px dotted var(--border);padding:.32rem .5rem;}
  .at-table:not(.at-table-mnemonic) tr td:last-child{border-bottom:none;}
  .at-table:not(.at-table-mnemonic) td::before{content:attr(data-label);flex:0 0 38%;
    font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;color:var(--text-dim);}
  .at-table:not(.at-table-mnemonic) td:first-child{font-weight:700;color:var(--text-primary);}
}

/* Shock comparison header is centered (2026-08-29b) */
.shock-compare-head{text-align:center;}
.shock-compare-sub{margin-left:auto;margin-right:auto;}
/* Mixed / advanced shock: kept out of the comparison grid (all-"variable"
   rows teach nothing) and offered as a slim full-width entry beneath it. */
.shock-cmp-aside{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;width:100%;box-sizing:border-box;
  margin-top:.55rem;padding:.5rem .7rem;cursor:pointer;text-align:left;
  border:1px dashed color-mix(in srgb,var(--cmp-accent) 45%,transparent);border-radius:10px;
  background:color-mix(in srgb,var(--cmp-accent) 5%,transparent);font-family:'DM Sans',sans-serif;
  transition:border-color .15s,background .15s;}
.shock-cmp-aside:hover,.shock-cmp-aside.active{border-style:solid;background:color-mix(in srgb,var(--cmp-accent) 11%,transparent);}
.shock-cmp-aside-title{font-family:'JetBrains Mono',monospace;font-size:.86rem;font-weight:700;color:var(--cmp-accent);}
.shock-cmp-aside-copy{flex:1 1 240px;font-size:.78rem;line-height:1.45;color:var(--text-secondary);}
.shock-cmp-aside-cta{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;color:var(--cmp-accent);}
@media(max-width:700px){.shock-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:460px){.shock-compare-grid{grid-template-columns:1fr !important;}}

/* ── Emergency protocol card (renal electrolytes) ─────────────── */
.at-proto{margin-top:.55rem;display:flex;flex-direction:column;gap:.4rem;}
.at-proto-tag{display:block;font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;margin-bottom:.12rem;}
.at-proto-danger{font-size:.72rem;line-height:1.55;color:var(--text-secondary);
  border-left:3px solid var(--accent-red);border-radius:0 8px 8px 0;padding:.4rem .6rem;
  background:rgba(239,68,68,.07);}
.at-proto-danger .at-proto-tag{color:var(--accent-red);}
.at-proto-steps{display:flex;flex-direction:column;gap:.3rem;}
.at-proto-step{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.5rem;align-items:start;}
.at-proto-n{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  background:color-mix(in srgb,var(--at-section-accent,var(--accent-cyan)) 18%,transparent);
  color:var(--at-section-accent,var(--accent-cyan));flex:0 0 auto;}
.at-proto-txt{font-size:.72rem;line-height:1.55;color:var(--text-secondary);}
.at-proto-txt strong{color:var(--at-section-accent,var(--accent-cyan));font-weight:700;}
.at-proto-limit,.at-proto-trap{font-size:.71rem;line-height:1.55;color:var(--text-secondary);
  border-radius:8px;padding:.38rem .55rem;}
.at-proto-limit{background:color-mix(in srgb,var(--accent-cyan) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-cyan) 24%,transparent);}
.at-proto-limit .at-proto-tag{color:var(--accent-cyan);}
.at-proto-trap{background:color-mix(in srgb,var(--accent-amber) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-amber) 26%,transparent);}
.at-proto-trap .at-proto-tag{color:var(--accent-amber);}

/* ── Inline compensation calculators (2026-08-29) ─────────────── */
.at-calc{margin-top:.4rem;padding:.4rem .5rem;border:1px dashed color-mix(in srgb,var(--at-comp-accent,var(--accent-cyan)) 45%,transparent);
  border-radius:8px;background:color-mix(in srgb,var(--at-comp-accent,var(--accent-cyan)) 5%,transparent);}
.at-calc-in{display:inline-flex;align-items:center;gap:.4rem;}
.at-calc-in span{font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-dim);}
.at-calc-in input{width:82px;padding:.25rem .4rem;border-radius:6px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:.75rem;}
.at-calc-in input:focus{outline:none;border-color:var(--at-comp-accent,var(--accent-cyan));}
.at-calc-out{margin-top:.3rem;display:flex;flex-direction:column;gap:.12rem;font-size:.68rem;color:var(--text-dim);line-height:1.45;}
.at-calc-formula{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--text-secondary);}
.at-calc-res{font-family:'JetBrains Mono',monospace;font-size:.76rem;color:var(--at-comp-accent,var(--accent-cyan));}
.at-calc-res strong{font-size:.86rem;}
.at-calc-hint{font-size:.64rem;color:var(--text-dim);}
.at-calc-warn{font-size:.64rem;color:var(--accent-amber);}
.at-calc-wide{--at-comp-accent:var(--accent-cyan);}
.at-calc-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.at-calc-row .at-calc-in input{width:70px;}

/* ── Trainer: multi-select + honest "missed" marking ──────────── */
.abg-chip-missed{border-color:var(--accent-red);background:transparent;color:var(--accent-red);
  border-style:dashed;}
.abg-chip-tag{margin-left:.35rem;font-family:'JetBrains Mono',monospace;font-size:.54rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;background:rgba(239,68,68,.16);color:var(--accent-red);
  border-radius:4px;padding:.08rem .25rem;}
.abg-box{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;margin-right:.35rem;
  border:1px solid currentColor;border-radius:3px;font-size:.6rem;line-height:1;vertical-align:middle;}
.abg-multi-hint{margin-left:.4rem;font-family:'DM Sans',sans-serif;font-size:.58rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--accent-cyan);
  background:color-mix(in srgb,var(--accent-cyan) 12%,transparent);border-radius:4px;padding:.08rem .3rem;}
.abg-chip-row-multi{padding:.3rem;border:1px dashed color-mix(in srgb,var(--accent-cyan) 35%,transparent);border-radius:9px;}

/* ── Discriminating-value highlight in the shock comparison (2026-08-29c) ──
   ONE colour used on every card (deliberately not any card's own accent, so
   it reads as "this is the row that matters" rather than as more phenotype
   colour). Non-key rows recede to a muted tone so the grid can be scanned
   down a column instead of read cell by cell. */
.shock-compare{--cmp-key:#0891b2;}
.shock-cmp-val{color:var(--text-dim);font-weight:600;}
.shock-cmp-row-key .shock-cmp-lbl{color:var(--text-secondary);font-weight:700;}
.shock-cmp-row-key .shock-cmp-val{
  color:var(--cmp-key);font-weight:800;
  background:color-mix(in srgb,var(--cmp-key) 14%,transparent);
  border-radius:5px;padding:.02rem .3rem;}
.shock-cmp-row-key{border-bottom-color:color-mix(in srgb,var(--cmp-key) 40%,transparent);}
.shock-cmp-legend{display:inline-flex;align-items:center;gap:.35rem;margin-top:.25rem;
  font-size:.74rem;color:var(--text-dim);}
.shock-cmp-legend-swatch{width:.7rem;height:.7rem;border-radius:3px;flex:0 0 auto;
  background:color-mix(in srgb,#0891b2 30%,transparent);border:1px solid #0891b2;}

/* ── Library study nudge (2026-08-29) — a strip, never a modal ── */
.lib-nudge{display:flex;align-items:flex-start;gap:.6rem;flex-wrap:wrap;
  margin:0 0 .9rem;padding:.6rem .75rem;border-radius:11px;
  border:1px solid color-mix(in srgb,var(--accent-green) 35%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent-green) 9%,transparent),
    color-mix(in srgb,var(--accent-green) 3%,transparent) 65%,transparent),var(--bg-card);
  font-family:'DM Sans',sans-serif;animation:libNudgeIn .28s ease-out;}
@keyframes libNudgeIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}}
.lib-nudge-icon{font-size:1rem;line-height:1.4;flex:0 0 auto;}
.lib-nudge-text{flex:1 1 300px;min-width:0;font-size:.74rem;line-height:1.55;color:var(--text-secondary);}
.lib-nudge-acts{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;flex:0 0 auto;}
.lib-nudge-cta{font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:700;padding:.28rem .6rem;
  border-radius:7px;border:1px solid var(--accent-green);background:color-mix(in srgb,var(--accent-green) 12%,transparent);
  color:var(--accent-green);cursor:pointer;white-space:nowrap;transition:background .15s;}
.lib-nudge-cta:hover{background:color-mix(in srgb,var(--accent-green) 20%,transparent);}
.lib-nudge-off{font-family:'DM Sans',sans-serif;font-size:.64rem;font-weight:600;padding:.26rem .5rem;
  border-radius:7px;border:1px dashed var(--border);background:transparent;color:var(--text-dim);cursor:pointer;white-space:nowrap;}
.lib-nudge-off:hover{color:var(--text-secondary);border-color:var(--text-dim);}
.lib-nudge-x{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:transparent;
  color:var(--text-dim);cursor:pointer;font-size:.7rem;line-height:1;flex:0 0 auto;}
.lib-nudge-x:hover{color:var(--accent-red);border-color:var(--accent-red);}
@media(max-width:600px){.lib-nudge-text{flex-basis:100%;}}

/* ══════════════════════════════════════════════════════════════
   LANDING V2 — 2026-08-30 (approved via design mockup)
   ══════════════════════════════════════════════════════════════
   The landing page's own visual language, distinct from the inner
   pages: Inter at thin weights, a quiet canvas with one soft accent
   glow, hairline dividers with letter-spaced micro-labels instead of
   card boxes, pill buttons, and exactly one saturated element (the
   Start-case CTA; the flashcards pill and assignment status dots are
   quieter accent uses). Crimson #e5484d is the single accent.

   Theme-aware by design: every color below routes through the --ld-*
   variables on #landing, and html[data-fc-theme] (stamped by
   _applyPalette in ui.js on every theme change, Auto included)
   selects the dark or light set — so the landing follows the same
   Auto/Dark/Light toggle as the rest of the app. Dark is the
   canonical set; light is its twin, not an afterthought.

   Landing structure this styles (index.html): .ld-hero → #quick-case
   (.qc2, quickCase.js) → .ld-divider "Explore" → .ld-grid of
   .ld-card entries (two static + My Assignments from
   assignedQueue.js) → .ld-strip (.dd2 flashcards from dailyDrills.js,
   .pn2 notes from landingNotes.js) → optional .ld-card-wide Faculty
   Center. Fact/Question of the Day moved to Library → Daily Learning
   and keep their ORIGINAL styles (fotd/qotd rules above, untouched). */

/* ── Canvas + palette ── */
#landing{
  --ld-accent:#e5484d;
  --ld-bg:#09090b; --ld-panel:rgba(255,255,255,.015); --ld-panel-hover:rgba(255,255,255,.04);
  --ld-line:#1d1d22; --ld-line-2:#26262b; --ld-line-3:#3a3a41;
  /* Dark grey ramp lifted 2026-08-31 — the old --ld-dim #6d6d76 at
     font-weight 300 was nearly unreadable on the #09090b canvas. Same
     neutral zinc hue (classy, no color cast), just enough luminance that
     card descriptions clear comfortable contrast. Light theme untouched. */
  --ld-text:#fafafa; --ld-text-2:#d4d4d8; --ld-mut:#aaaab3; --ld-dim:#94949e; --ld-faint:#8b8b95;
  --ld-glow:rgba(229,72,77,.32); --ld-tint:rgba(229,72,77,.10); --ld-tint-bg:rgba(229,72,77,.08);
  background:radial-gradient(56% 42% at 50% 0%, var(--ld-tint-bg) 0%, rgba(0,0,0,0) 70%), var(--ld-bg);
  font-family:'Inter','DM Sans',system-ui,sans-serif;
}
/* Weight-300 Inter thins out badly against a dark canvas — dark mode gets
   regular weight on the small descriptive text; light mode keeps 300. */
html:not([data-fc-theme="light"]) #landing .ld-card-desc,
html:not([data-fc-theme="light"]) #landing .ld-sub{font-weight:400;}
html[data-fc-theme="light"] #landing{
  --ld-bg:#fafafa; --ld-panel:rgba(0,0,0,.015); --ld-panel-hover:rgba(0,0,0,.035);
  --ld-line:#e7e7ea; --ld-line-2:#dddde1; --ld-line-3:#c6c6cd;
  --ld-text:#18181b; --ld-text-2:#3f3f46; --ld-mut:#52525b; --ld-dim:#71717a; --ld-faint:#a1a1aa;
  --ld-glow:rgba(229,72,77,.20); --ld-tint:rgba(229,72,77,.08); --ld-tint-bg:rgba(229,72,77,.05);
}
#landing .landing-container{max-width:1080px;padding:2rem 1.75rem 4.5rem;position:relative;}

/* (The old rule that dimmed .ecg-line to .3 lived here — removed. The
   spectrum border frame is meant to be visible on every page, landing
   included; dimming belongs on the ::before layer only.) */

/* ── Tour "?" — pinned top-left, out of the account chip's corner ── */

/* ── Hero ── */
.ld-hero{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:2.4rem auto 0;text-align:center;}
.ld-mark{display:block;}
.ld-mark path{fill:var(--ld-accent);}
.ld-title{font-family:inherit;font-size:2.55rem;font-weight:200;letter-spacing:-.015em;line-height:1.12;color:var(--ld-text);margin:0;}
.ld-sub{font-size:.92rem;font-weight:300;letter-spacing:.005em;color:var(--ld-mut);margin:0;max-width:460px;line-height:1.5;}

/* ── Hairline dividers with micro-labels ── */
.ld-divider{display:flex;align-items:center;gap:1rem;width:100%;max-width:620px;margin:0 auto;}
.ld-divider-line{flex:1 1 auto;height:1px;background:var(--ld-line);}
.ld-divider-lbl{font-size:.66rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ld-dim);white-space:nowrap;}
.landing-container>.ld-divider{margin-top:3.4rem;}  /* the standalone "Explore" one */

/* ── Quick Case (.qc2, rendered by quickCase.js) ── */
#landing .quick-case{width:100%;max-width:640px;margin:2.8rem auto 0;}
.qc2{display:flex;flex-direction:column;align-items:center;gap:.95rem;}
.qc2-picks{display:flex;align-items:baseline;gap:.7rem;background:none;border:none;cursor:pointer;
  font-family:inherit;padding:.15rem .45rem;border-radius:8px;}
.qc2-picks-txt{font-size:.95rem;font-weight:400;color:var(--ld-text-2);}
.qc2-sep{color:var(--ld-faint);font-weight:300;}
.qc2-change{font-size:.8rem;font-weight:400;color:var(--ld-dim);text-decoration:underline;text-underline-offset:3px;transition:color .15s;}
.qc2-picks:hover .qc2-change{color:var(--ld-text);}
.qc2-editor{width:100%;padding:1.05rem 1rem .45rem;border:1px solid var(--ld-line);border-radius:16px;background:var(--ld-panel);}
.qc2-go{margin-top:.15rem;padding:.95rem 3.4rem;border:none;border-radius:999px;cursor:pointer;
  background:var(--ld-accent);color:#fff;font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:.01em;
  box-shadow:0 10px 44px var(--ld-glow);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;}
.qc2-go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 52px var(--ld-glow);}
.qc2-go:disabled{opacity:.65;cursor:default;transform:none;}
/* Chip rows inside the expanded editor — same markup as the old card
   (qc-row / qc-chips / qc-chip, quickCase.js), reskinned to the ld
   palette. The "For You" signature chip keeps no emoji or purple; being
   the selected default is emphasis enough under a one-accent system. */
#landing .qc-row{gap:.45rem;margin-bottom:.85rem;}
#landing .qc-row-lbl{font-family:inherit;font-size:.64rem;font-weight:500;letter-spacing:.18em;color:var(--ld-dim);}
#landing .qc-chip{border:1px solid var(--ld-line-2);background:transparent;color:var(--ld-mut);font-family:inherit;}
#landing .qc-chip:hover{border-color:var(--ld-line-3);color:var(--ld-text);transform:none;}
#landing .qc-chip-on{border-color:var(--ld-accent);color:var(--ld-text);background:var(--ld-tint);font-weight:600;}
#landing .qc-chip-on .qc-chip-sub{opacity:.85;}
#landing .qc-chip-signature .qc-chip-label::before{content:'';}
#landing .qc-chip-signature:not(.qc-chip-on){border-color:var(--ld-line-2);}
#landing .qc-chip-signature.qc-chip-on{border-color:var(--ld-accent);background:var(--ld-tint);}
#landing .qc-adv-note{color:var(--ld-dim);font-size:.76rem;margin-bottom:.5rem;}
#landing .qc-inline-link{color:var(--ld-mut);font-size:.76rem;}
#landing .qc-inline-link:hover{color:var(--ld-text);}
/* The For-You rationale line — plain quiet text, no box. */
#landing .qc-why{background:none;border:none;padding:0;margin:0;gap:.2rem;
  font-size:.82rem;font-weight:300;color:var(--ld-dim);line-height:1.6;max-width:480px;text-align:center;}
#landing .qc-why-quiet{background:none;border:none;color:var(--ld-dim);padding:0;}
#landing .qc-why-src{font-family:inherit;font-size:.62rem;font-weight:500;letter-spacing:.16em;color:var(--ld-faint);}
#landing .qc-why strong{font-weight:500;color:var(--ld-mut);}
#landing .qc-dot{background:var(--ld-faint);}

/* ── Explore cards ── */
.ld-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;margin:1.3rem auto 0;align-items:stretch;}
.ld-grid>div{display:flex;min-width:0;}
.ld-grid>div>*{width:100%;}
.ld-card{appearance:none;display:flex;flex-direction:column;gap:.5rem;padding:1.45rem 1.6rem;box-sizing:border-box;
  border:1px solid var(--ld-line);border-radius:16px;background:var(--ld-panel);cursor:pointer;text-align:left;
  font-family:inherit;color:var(--ld-text);transition:border-color .18s ease,background .18s ease,transform .18s ease;}
.ld-card:hover{border-color:var(--ld-line-3);background:var(--ld-panel-hover);transform:translateY(-2px);}
.ld-card-loading{opacity:.55;cursor:default;}
.ld-card-loading:hover{border-color:var(--ld-line);background:var(--ld-panel);transform:none;}
.ld-card-top{display:flex;align-items:center;gap:.6rem;min-width:0;}
.ld-card-title{font-size:.95rem;font-weight:500;color:var(--ld-text);white-space:nowrap;}
.ld-card-arrow{margin-left:auto;font-size:.9rem;color:var(--ld-faint);transition:color .18s ease;}
.ld-card:hover .ld-card-arrow{color:var(--ld-mut);}
.ld-card-desc{font-size:.82rem;font-weight:300;color:var(--ld-dim);line-height:1.55;}
/* Assignment status chip: the dot + count IS the attention signal —
   static color, no glow animation. */
.ld-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;font-weight:500;color:var(--ld-accent);white-space:nowrap;}
.ld-status .ld-dot{width:6px;height:6px;border-radius:999px;background:var(--ld-accent);}
.ld-status-clear{color:var(--ld-faint);}
.ld-card-wide{width:100%;margin:1rem auto 0;}

/* ── Daily strip: flashcards left, notes right, one hairline above ── */
.ld-strip{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;width:100%;
  margin:2.8rem auto 0;padding-top:1.7rem;border-top:1px solid var(--ld-line);}
.ld-strip-cell{min-width:0;flex:1 1 0;display:flex;}
.dd2,.pn2{display:flex;align-items:center;gap:1.1rem;width:100%;flex-wrap:wrap;}
.pn2{justify-content:flex-end;}
.dd2-copy,.pn2-copy{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.pn2-copy{align-items:flex-end;text-align:right;}
.dd2-title,.pn2-title{font-size:.88rem;font-weight:500;color:var(--ld-text-2);}
.pn2-count{font-size:.72rem;font-weight:400;color:var(--ld-faint);}
.dd2-sub{font-size:.79rem;font-weight:300;color:var(--ld-dim);}
/* The pearl itself pops in neon cyan (2026-08-31) — the dim grey was the
   least readable text on the dark landing, and it is the one line the
   card exists to make you re-read. Light theme gets a deep cyan instead
   (true neon on white is unreadable). */
.pn2-note{font-size:.79rem;font-weight:400;font-style:italic;color:#2ee6f7;text-shadow:0 0 14px rgba(46,230,247,.28);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;}
.pn2-note-empty{font-style:normal;white-space:normal;max-width:300px;line-height:1.5;}
.dd2-actions,.pn2-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.dd2-start{padding:.55rem 1.45rem;border:1px solid var(--ld-accent);color:var(--ld-accent);background:transparent;
  border-radius:999px;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s;}
.dd2-start:hover:not(:disabled){background:var(--ld-tint);}
.dd2-start:disabled{border-color:var(--ld-line-2);color:var(--ld-faint);cursor:default;background:transparent;}
html[data-fc-theme="light"] .pn2-note{color:#0e7490;text-shadow:none;}
.pn2-note-empty{color:var(--ld-dim);text-shadow:none;}
/* "Open note" — red-bordered like the landing's accent CTAs. */
.pn2-open{border-color:color-mix(in srgb,var(--ld-accent) 55%,transparent)!important;color:var(--ld-accent)!important;}
.pn2-open:hover{border-color:var(--ld-accent)!important;background:color-mix(in srgb,var(--ld-accent) 10%,transparent)!important;}
.pn2-add{padding:.55rem 1.45rem;border:1px solid var(--ld-line-2);color:var(--ld-mut);background:transparent;
  border-radius:999px;font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.pn2-add:hover{border-color:var(--ld-line-3);color:var(--ld-text);}
.dd2-link,.pn2-link{background:none;border:none;padding:.2rem;color:var(--ld-dim);
  font-family:inherit;font-size:.78rem;font-weight:400;cursor:pointer;transition:color .15s;}
.dd2-link:hover,.pn2-link:hover{color:var(--ld-text);}

/* Landing skeletons sit on the quiet canvas, not the app card color. */
#landing .skel{background:var(--ld-panel);border:1px solid var(--ld-line);border-radius:16px;}

/* ── Responsive ── */
@media(max-width:960px){
  .ld-grid{grid-template-columns:1fr;}
  .ld-strip{flex-direction:column;align-items:stretch;gap:1.5rem;}
  .pn2{justify-content:flex-start;}
  .pn2-copy{align-items:flex-start;text-align:left;}
  .ld-title{font-size:1.9rem;}
}
@media(max-width:520px){
  .qc2-go{width:100%;padding:.95rem 0;text-align:center;}
  .pn2-note{max-width:220px;}
}

/* ══════════════════════════════════════════════════════════════
   LANDING V2.1 + LIBRARY POLISH — 2026-08-30 (second feedback round)
   ══════════════════════════════════════════════════════════════ */

/* ── Daily strip: two MATCHING left-aligned cards (the left-title /
   right-title asymmetry read as sloppy, and the one-line note lost
   its context). Both cells now share the explore-card look; the notes
   card regained its crumb (source chapter + date), count, and ‹ ›
   browsing arrows from the pre-V2 design. ── */
.ld-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;
  margin:1rem auto 0;padding-top:0;border-top:none;}
.dd2,.pn2{flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;
  gap:.7rem;padding:1.35rem 1.6rem;box-sizing:border-box;
  border:1px solid var(--ld-line);border-radius:16px;background:var(--ld-panel);}
.pn2-hdr{display:flex;align-items:center;gap:.55rem;}
.pn2-nav{margin-left:auto;display:flex;gap:.35rem;}
.pn2-arrow{width:26px;height:26px;border-radius:999px;border:1px solid var(--ld-line-2);
  background:transparent;color:var(--ld-mut);cursor:pointer;font-size:.95rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.pn2-arrow:hover:not(:disabled){color:var(--ld-text);border-color:var(--ld-line-3);}
.pn2-arrow:disabled{opacity:.35;cursor:default;}
.pn2-crumb{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-size:.72rem;font-weight:400;color:var(--ld-mut);}
.pn2-ts{color:var(--ld-faint);font-size:.68rem;}
.pn2-note{white-space:normal;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dd2-actions,.pn2-actions{margin-top:auto;padding-top:.35rem;}
@media(max-width:960px){.ld-strip{grid-template-columns:1fr;}}

/* ── Library Browse: the three priority tiles share ONE top row, each
   with its own neon identity — green Pocket Guide, red Daily Learning,
   amber institution materials — so the tier reads as three distinct
   flagships instead of a color repeated. The 12-column grid gives the
   top row 3 × span-4 and the regular tiles 4 × span-3, so everything
   below the flagships lines up evenly. ── */
#lib-hub-flat-grid{grid-template-columns:repeat(12,minmax(0,1fr));}
#lib-hub-flat-grid>.lib-hub-tile{grid-column:span 3;}
#lib-hub-flat-grid>.lib-hub-tile.lib-tile-priority{grid-column:span 4;}
@media(max-width:1000px){
  #lib-hub-flat-grid>.lib-hub-tile{grid-column:span 4;}
  #lib-hub-flat-grid>.lib-hub-tile.lib-tile-priority{grid-column:span 6;}
}
@media(max-width:700px){
  #lib-hub-flat-grid>.lib-hub-tile{grid-column:span 6;}
  #lib-hub-flat-grid>.lib-hub-tile.lib-tile-priority{grid-column:span 12;}
}
@media(max-width:420px){#lib-hub-flat-grid>.lib-hub-tile{grid-column:span 12;}}
.lib-hub-tile.lib-tile-priority{--prio:var(--accent-amber,#f59e0b);
  border-color:color-mix(in srgb,var(--prio) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--prio) 13%,transparent),color-mix(in srgb,var(--prio) 4%,transparent));
  box-shadow:0 0 20px color-mix(in srgb,var(--prio) 10%,transparent);}
.lib-hub-tile.lib-tile-priority:hover{border-color:var(--prio);
  box-shadow:0 4px 22px color-mix(in srgb,var(--prio) 26%,transparent);}
.lib-hub-tile.lib-tile-priority[data-tile-id="mgh"]{--prio:var(--accent-green,#22c55e);}
.lib-hub-tile.lib-tile-priority[data-tile-id="daily"]{--prio:var(--accent-red,#ef4444);}

/* ── Personal page: flashcards vs notes color coding — amber = cards,
   cyan = notes — carried consistently across the My Learning tiles and
   the Up-for-review belt (which now mixes both). ── */
.lib-hub-tile.lib-feature-fc{border-color:color-mix(in srgb,var(--accent-amber,#f59e0b) 45%,var(--border));}
.lib-hub-tile.lib-feature-nt{border-color:color-mix(in srgb,var(--accent-cyan,#06b6d4) 45%,var(--border));}
.lib-belt-tile.lib-due-tile{border-color:color-mix(in srgb,var(--accent-amber,#f59e0b) 45%,var(--border));}
.lib-belt-tile.lib-note-belt-tile{--belt-accent:var(--accent-cyan,#06b6d4);
  border-color:color-mix(in srgb,var(--accent-cyan,#06b6d4) 45%,var(--border));}

/* ── Drills modal: the one chat entry ("Ask about this card") sits as
   the final, centered row of the card. ── */
.dd-chat-row-bottom{justify-content:center;margin-top:.65rem;}

/* ── "Report a bug" — quiet fixed pill (bottom-right, every page) +
   its modal. Uses the app-wide theme vars, not the landing set, so it
   matches whichever page and theme it floats over. ── */
.bugrep-pill{position:fixed;right:12px;bottom:12px;z-index:220;padding:.4rem .85rem;
  border-radius:999px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);
  font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);transition:color .15s,border-color .15s;}
.bugrep-pill:hover{color:var(--text-primary);border-color:var(--border-light);}
.bugrep-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10800;
  display:flex;align-items:center;justify-content:center;padding:1.25rem;}
.bugrep-modal{position:relative;width:min(480px,94vw);background:var(--bg-card);
  border:1px solid var(--border);border-radius:14px;padding:1.25rem 1.35rem;
  box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:'DM Sans',sans-serif;}
.bugrep-modal h3{font-size:1rem;font-weight:700;color:var(--text-primary);margin:0 0 .35rem;}
.bugrep-sub{font-size:.78rem;color:var(--text-secondary);line-height:1.5;margin:0 0 .8rem;}
.bugrep-text{width:100%;box-sizing:border-box;padding:.6rem .7rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);
  font-family:'DM Sans',sans-serif;font-size:.82rem;line-height:1.5;resize:vertical;outline:none;}
.bugrep-text:focus{border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(6,182,212,.15);}
.bugrep-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.75rem;flex-wrap:wrap;}
.bugrep-ctx{font-size:.66rem;color:var(--text-dim);line-height:1.4;max-width:200px;}
.bugrep-btns{display:flex;gap:.5rem;margin-left:auto;}
.bugrep-cancel{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;}
.bugrep-cancel:hover{color:var(--text-primary);background:var(--bg-card-hover);}
.bugrep-send{padding:.45rem 1.1rem;border-radius:999px;border:none;background:var(--accent-red);
  color:#fff;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;}
.bugrep-send:hover:not(:disabled){filter:brightness(1.08);}
.bugrep-send:disabled{opacity:.6;cursor:default;}
/* ══════════════════════════════════════════════════════════════
   MODAL LAYER SCALE — read before adding a new overlay
   The global account chip (z 10000) and theme toggle (z 9999) are
   position:fixed on every page. Any modal below those floats UNDER
   them, which put the chip squarely on top of the modal's ✕ button
   and made several dialogs impossible to close on a phone. So every
   page-level overlay sits above them:
     10600  base modal layer (chat, drills, flashcards, FOTD, …)
     10700  modals that can open ON TOP of another modal
     10750  flashcard preview (opens from the note modal)
     10800  bug report (must be reachable from anywhere)
     99998  image viewer (deliberately top-most)
   In-sim panels (.rsi-overlay et al) stay low on purpose — the sim
   page hides the global chrome, so they have nothing to clear.
   ══════════════════════════════════════════════════════════════ */
.bugrep-close{position:absolute;top:.55rem;right:.6rem;background:none;border:none;
  color:var(--text-dim);font-size:.95rem;cursor:pointer;}
.bugrep-close:hover{color:var(--text-primary);}

/* ══════════════════════════════════════════════════════════════
   ICU LIBRARY UPGRADES — 2026-08-30
   ══════════════════════════════════════════════════════════════
   Per-section presentation upgrades for Infection & Sepsis, Cardiac
   Emergencies, and ACLS & Cardiac Arrest (advanced_topics.js):
   1. .at-router — presentation-first entry chips on a topic page
      ("What is the patient doing?"), routing to the right subtopic.
   2. .at-hfq / .at-rt — inline interactive decision widgets (HF
      phenotype quadrant, tachycardia decision tree).
   3. .cr-* — the Code Runner practice tool (codeRunner.js).
   Everything rides the app-wide theme vars, so light/dark both work,
   and reuses the at-* visual vocabulary (cards, kickers, accents). */

/* ── Presentation router ── */
.at-router{margin:0 0 1rem;padding:.85rem .9rem;border:1.5px solid var(--border);border-radius:14px;background:var(--bg-card);}
.at-router-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.6rem;text-align:center;}
.at-router-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;}
.at-router-chip{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.65rem .5rem;cursor:pointer;text-align:center;
  border:1.5px solid color-mix(in srgb,var(--at-router-accent) 40%,var(--border));border-radius:12px;
  background:color-mix(in srgb,var(--at-router-accent) 7%,var(--bg-card));color:var(--text-primary);
  font-family:'DM Sans',sans-serif;transition:transform .15s,border-color .15s,box-shadow .15s;}
.at-router-chip:hover{transform:translateY(-2px);border-color:var(--at-router-accent);box-shadow:0 6px 18px color-mix(in srgb,var(--at-router-accent) 18%,transparent);}
.at-router-ic{font-size:1.25rem;line-height:1;}
.at-router-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.at-router-title{font-size:.76rem;font-weight:700;line-height:1.2;}
.at-router-sub{font-size:.64rem;color:var(--text-secondary);line-height:1.3;}
@media(max-width:900px){.at-router-row{grid-template-columns:repeat(2,minmax(0,1fr));}.at-router-chip:last-child{grid-column:1 / -1;}}

/* ── Shared widget shell ── */
.at-widget{margin:0 0 1.1rem;padding:.95rem 1rem 1.05rem;border:1.5px solid var(--border);border-radius:14px;background:var(--bg-card);}
.at-widget-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.7rem;text-align:center;}

/* ── HF phenotype quadrant ── */
.at-hfq-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:520px;margin:0 auto .75rem;padding:1.15rem 0 0 1.15rem;}
.at-hfq-axis{position:absolute;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--text-dim);}
.at-hfq-axis-x{top:0;left:50%;transform:translateX(-38%);}
.at-hfq-axis-y{left:0;top:55%;transform:rotate(-90deg) translateX(50%);transform-origin:left top;}
.at-hfq-cell{display:flex;flex-direction:column;gap:.2rem;align-items:center;justify-content:center;padding:.8rem .6rem;cursor:pointer;text-align:center;
  border:1.5px solid color-mix(in srgb,var(--at-hfq-accent) 35%,var(--border));border-radius:12px;
  background:color-mix(in srgb,var(--at-hfq-accent) 6%,var(--bg-card));color:var(--text-primary);font-family:'DM Sans',sans-serif;
  transition:border-color .15s,box-shadow .15s,transform .15s;}
.at-hfq-cell:hover{transform:translateY(-1px);border-color:var(--at-hfq-accent);}
.at-hfq-cell.active{border-color:var(--at-hfq-accent);background:color-mix(in srgb,var(--at-hfq-accent) 14%,var(--bg-card));box-shadow:0 0 0 3px color-mix(in srgb,var(--at-hfq-accent) 15%,transparent);}
.at-hfq-cell-title{font-size:.82rem;font-weight:700;}
.at-hfq-cell-gloss{font-size:.66rem;color:var(--text-secondary);line-height:1.3;}
.at-hfq-detail{border:1px solid color-mix(in srgb,var(--at-hfq-accent) 35%,var(--border));border-left:3px solid var(--at-hfq-accent);border-radius:10px;background:var(--bg-secondary);padding:.7rem .85rem;}
.at-hfq-detail-title{font-size:.8rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;}
.at-hfq-rows{display:flex;flex-direction:column;gap:.4rem;}
.at-hfq-row{display:flex;gap:.6rem;font-size:.76rem;color:var(--text-secondary);line-height:1.5;}
.at-hfq-row>span:last-child{flex:1;}
.at-hfq-k{flex:0 0 66px;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);padding-top:.15rem;}

/* ── Tachycardia decision tree ── */
.at-rt-steps{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.75rem;}
.at-rt-step{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.at-rt-q{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;color:var(--text-secondary);flex:0 0 auto;min-width:110px;}
.at-rt-chips{display:flex;gap:.45rem;flex-wrap:wrap;}
.at-rt-chip{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem .85rem;cursor:pointer;
  border:1.5px solid var(--border);border-radius:999px;background:var(--bg-card);color:var(--text-secondary);font-family:'DM Sans',sans-serif;
  transition:border-color .15s,background .15s,color .15s;}
.at-rt-chip:hover{border-color:var(--border-light);color:var(--text-primary);}
.at-rt-chip.active{border-color:var(--accent-cyan);color:var(--text-primary);background:color-mix(in srgb,var(--accent-cyan) 12%,var(--bg-card));font-weight:700;}
.at-rt-chip-l{font-size:.78rem;font-weight:600;}
.at-rt-chip-s{font-size:.62rem;opacity:.8;}
.at-rt-result{border:1px solid color-mix(in srgb,var(--at-rt-accent) 40%,var(--border));border-left:3px solid var(--at-rt-accent);border-radius:10px;background:var(--bg-secondary);padding:.7rem .85rem;}
.at-rt-result-title{font-size:.82rem;font-weight:700;color:var(--at-rt-accent);margin-bottom:.5rem;}
.at-rt-caution .at-hfq-k{color:var(--accent-red);}
.at-rt-reset{margin-top:.6rem;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;cursor:pointer;}
.at-rt-reset:hover{color:var(--text-primary);background:var(--bg-card-hover);}

/* ── Code Runner ── */
.cr-mount-host{margin-bottom:1.1rem;}
.cr-card{border:1.5px solid var(--border);border-radius:14px;background:var(--bg-card);padding:.95rem 1rem 1.05rem;font-family:'DM Sans',sans-serif;}
.cr-hdr{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem;}
.cr-title{font-family:'JetBrains Mono',monospace;font-size:.92rem;font-weight:700;color:var(--text-primary);}
.cr-badge{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-amber);border:1px solid color-mix(in srgb,var(--accent-amber) 45%,transparent);border-radius:999px;padding:.16rem .55rem;}
.cr-end{margin-left:auto;background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-dim);font-size:.68rem;font-weight:600;padding:.25rem .6rem;cursor:pointer;}
.cr-end:hover{color:var(--accent-red);border-color:var(--accent-red);}
.cr-blurb{font-size:.78rem;color:var(--text-secondary);line-height:1.55;margin:0 0 .7rem;}
.cr-start-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.cr-start{padding:.6rem 1.2rem;border-radius:999px;border:1.5px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-size:.78rem;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s;}
.cr-start:hover{border-color:var(--border-light);background:var(--bg-card-hover);}
.cr-start-vf{border-color:color-mix(in srgb,var(--accent-red) 55%,transparent);color:var(--accent-red);}
.cr-start-vf:hover{background:color-mix(in srgb,var(--accent-red) 10%,var(--bg-card));border-color:var(--accent-red);}
.cr-start-pea{border-color:color-mix(in srgb,var(--accent-blue) 55%,transparent);color:var(--accent-blue);}
.cr-start-pea:hover{background:color-mix(in srgb,var(--accent-blue) 10%,var(--bg-card));border-color:var(--accent-blue);}
.cr-top{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.6rem;}
.cr-rhythm{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:8px;}
.cr-rhythm-vf{color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-red) 40%,transparent);}
.cr-rhythm-pea{color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-blue) 40%,transparent);}
.cr-chip{font-size:.68rem;font-weight:600;color:var(--text-secondary);border:1px solid var(--border);border-radius:999px;padding:.22rem .6rem;}
.cr-chip.due{color:var(--accent-amber);border-color:color-mix(in srgb,var(--accent-amber) 55%,transparent);background:color-mix(in srgb,var(--accent-amber) 10%,transparent);font-weight:700;}
.cr-clock{text-align:center;border:1px solid var(--border);border-radius:12px;background:var(--bg-secondary);padding:.65rem .8rem;margin-bottom:.6rem;}
.cr-clock-due{border-color:color-mix(in srgb,var(--accent-amber) 60%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-amber) 12%,transparent);}
.cr-clock-big{font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:700;color:var(--text-primary);line-height:1.1;font-variant-numeric:tabular-nums;}
.cr-clock-sub{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin:.15rem 0 .45rem;}
.cr-clock-due .cr-clock-sub{color:var(--accent-amber);}
.cr-clock-bar{height:5px;border-radius:999px;background:var(--border);overflow:hidden;}
.cr-clock-bar span{display:block;height:100%;background:var(--accent-cyan);border-radius:999px;transition:width 1s linear;}
.cr-clock-due .cr-clock-bar span{background:var(--accent-amber);}
.cr-clock-meta{font-size:.66rem;color:var(--text-dim);margin-top:.4rem;}
.cr-speed{background:none;border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);font-size:.62rem;font-weight:700;padding:.1rem .5rem;cursor:pointer;}
.cr-speed:hover{color:var(--text-primary);border-color:var(--border-light);}
.cr-coach{font-size:.76rem;line-height:1.5;border-radius:10px;padding:.5rem .7rem;margin-bottom:.6rem;border:1px solid var(--border);border-left-width:3px;color:var(--text-secondary);background:var(--bg-secondary);}
.cr-coach-good{border-left-color:var(--accent-green);}
.cr-coach-bad{border-left-color:var(--accent-red);color:var(--text-primary);}
.cr-coach-warn{border-left-color:var(--accent-amber);}
.cr-coach-due{border-left-color:var(--accent-amber);color:var(--text-primary);}
.cr-coach-info{border-left-color:var(--accent-cyan);}
.cr-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.7rem;}
.cr-act{padding:.5rem .95rem;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-primary);font-size:.76rem;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
.cr-act:hover{border-color:var(--border-light);background:var(--bg-card-hover);}
.cr-act-shock{border-color:color-mix(in srgb,var(--accent-red) 55%,transparent);color:var(--accent-red);}
.cr-act-shock:hover{border-color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 10%,var(--bg-card));}
.cr-act-due{border-color:var(--accent-amber);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-amber) 15%,transparent);}
.cr-act-rosc{border-color:color-mix(in srgb,var(--accent-green) 50%,transparent);color:var(--accent-green);}
.cr-hts{border-top:1px dashed var(--border);padding-top:.6rem;margin-bottom:.7rem;}
.cr-hts-label{font-size:.68rem;color:var(--text-dim);margin-bottom:.45rem;line-height:1.45;}
.cr-hts-label em{color:var(--text-secondary);font-style:italic;}
.cr-hts-row{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem;}
.cr-ht{padding:.24rem .6rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.66rem;font-weight:600;cursor:pointer;transition:border-color .12s,color .12s,background .12s;}
.cr-ht:hover{color:var(--text-primary);border-color:var(--border-light);}
.cr-ht.on{color:var(--accent-cyan);border-color:color-mix(in srgb,var(--accent-cyan) 55%,transparent);background:color-mix(in srgb,var(--accent-cyan) 9%,transparent);}
.cr-treat{padding:.42rem .9rem;border-radius:10px;border:1.5px solid color-mix(in srgb,var(--accent-purple) 50%,transparent);background:color-mix(in srgb,var(--accent-purple) 7%,var(--bg-card));color:var(--accent-purple);font-size:.72rem;font-weight:700;cursor:pointer;}
.cr-treat:hover:not(:disabled){border-color:var(--accent-purple);}
.cr-treat.done{border-color:color-mix(in srgb,var(--accent-green) 55%,transparent);color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 8%,var(--bg-card));cursor:default;}
.cr-log{border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);padding:.5rem .65rem;max-height:180px;overflow-y:auto;}
.cr-log-label{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.35rem;}
.cr-ev{display:flex;gap:.55rem;font-size:.7rem;color:var(--text-secondary);line-height:1.5;padding:.12rem 0;}
.cr-ev-t{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--text-dim);flex:0 0 52px;font-variant-numeric:tabular-nums;}
.cr-ev-good{color:var(--accent-green);}
.cr-ev-bad{color:var(--accent-red);}
.cr-ev-warn{color:var(--accent-amber);}
.cr-ev-due{color:var(--accent-amber);font-weight:700;}
.cr-card-rosc{border-color:color-mix(in srgb,var(--accent-green) 45%,var(--border));}
.cr-post-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.7rem;}
.cr-post-item{display:flex;align-items:flex-start;gap:.55rem;text-align:left;padding:.45rem .6rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);color:var(--text-secondary);font-size:.74rem;line-height:1.45;cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .12s,background .12s;}
.cr-post-item:hover{border-color:var(--border-light);}
.cr-post-item.done{border-color:color-mix(in srgb,var(--accent-green) 50%,transparent);color:var(--text-primary);background:color-mix(in srgb,var(--accent-green) 6%,var(--bg-card));}
.cr-post-box{flex:0 0 18px;height:18px;border:1.5px solid var(--border-light);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--accent-green);margin-top:.05rem;}
.cr-post-item.done .cr-post-box{border-color:var(--accent-green);}
@media(max-width:640px){.at-hfq-grid{max-width:none;}.cr-actions{gap:.35rem;}.cr-act{flex:1 1 45%;}}

/* ══════════════════════════════════════════════════════════════
   UI POLISH ROUND — 2026-08-31
   ══════════════════════════════════════════════════════════════
   1. Library headers stop impersonating tiles (.at-hdr).
   2. Landing: centered tile text, assignments in the middle with a
      PULSING status dot, red "Add a note".
   3. One fixed bottom-right utility rail: Tutorial + Report a bug.
   4. Flashcard review modal: three distinct action colors instead of
      three cyan buttons, and a filled "Ask about this card".
   All rules use theme vars, so light and dark stay correct. */

/* ── 1. Section headers read as HEADERS, not clickable tiles ──
   The topic header carried the same card chrome (white panel, border,
   radius) as the subtopic tiles directly beneath it, so it looked like
   a tile that simply refused to be clicked. It now reads as page
   furniture: no panel, no border, larger title, and a hairline rule
   that separates the header from the grid it introduces. */
.at-hdr{background:transparent;border:none;border-radius:0;padding:.35rem .5rem 1rem;margin-bottom:.35rem;
  text-align:center;position:relative;}
.at-hdr::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(220px,45%);height:1px;background:var(--border);}
.at-hdr h4{font-family:'JetBrains Mono',monospace;font-size:1.12rem;font-weight:700;
  color:var(--text-primary);letter-spacing:.01em;margin-bottom:.4rem;}
.at-hdr p{font-size:.78rem;line-height:1.6;color:var(--text-secondary);max-width:70ch;margin:0 auto;}
/* The count line becomes a quiet kicker rather than a red accent badge. */
.at-topic-shell .at-subtopic-meta{margin-top:.6rem;color:var(--text-dim);}

/* ── 2. Landing tiles: centered content ── */
#landing .ld-card{text-align:center;align-items:center;}
#landing .ld-card-top{justify-content:center;flex-wrap:wrap;}
#landing .ld-card-arrow{margin-left:0;}
#landing .ld-card-desc{text-align:center;}
#landing .dd2,#landing .pn2{align-items:center;text-align:center;}
#landing .dd2-copy,#landing .pn2-copy{align-items:center;text-align:center;}
#landing .pn2-hdr{justify-content:center;}
#landing .pn2-nav{margin-left:0;}
#landing .pn2-crumb{justify-content:center;text-align:center;}
#landing .pn2-note{text-align:center;}
#landing .dd2-actions,#landing .pn2-actions{justify-content:center;}

/* Pulsing status dot — a count that is WAITING on the learner should
   read as alive. Respects prefers-reduced-motion. */
#landing .ld-status .ld-dot{animation:ldDotPulse 1.8s ease-in-out infinite;}
#landing .ld-status-clear .ld-dot{animation:none;}
@keyframes ldDotPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ld-accent) 55%,transparent);opacity:1;}
  70%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ld-accent) 0%,transparent);opacity:.85;}
}
@media(prefers-reduced-motion:reduce){#landing .ld-status .ld-dot{animation:none;}}

/* "Add a note" joins the accent family — it is the one capture action
   on the landing page and was reading as disabled chrome. */
#landing .pn2-add{border-color:color-mix(in srgb,var(--ld-accent) 55%,transparent);color:var(--ld-accent);}
#landing .pn2-add:hover{border-color:var(--ld-accent);background:var(--ld-tint);color:var(--ld-accent);}

/* ── 3. Fixed bottom-right utility rail ── */
.util-rail{position:fixed;right:12px;bottom:12px;z-index:220;display:flex;align-items:center;gap:.4rem;}
.util-rail .bugrep-pill{position:static;right:auto;bottom:auto;}
.tutorial-pill{padding:.4rem .85rem;border-radius:999px;border:1px solid var(--border);
  background:var(--bg-card);color:var(--text-dim);font-family:'DM Sans',sans-serif;
  font-size:.7rem;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:color .15s,border-color .15s;}
.tutorial-pill:hover{color:var(--accent-cyan);border-color:var(--accent-cyan);}

/* ── 4. Flashcard review modal — one color per action ──
   Set (apply) green · Edit amber · Delete red · Ask cyan and FILLED,
   so the chat entry is the emphasized option rather than the third
   cyan outline in a row. */
.dd-snooze-btn{border-color:color-mix(in srgb,var(--accent-green) 50%,transparent);
  background:color-mix(in srgb,var(--accent-green) 10%,transparent);color:var(--accent-green);}
.dd-snooze-btn:hover{background:color-mix(in srgb,var(--accent-green) 20%,transparent);}
.dd-drills-edit{border-color:color-mix(in srgb,var(--accent-amber) 50%,transparent);color:var(--accent-amber);}
.dd-drills-edit:hover{background:color-mix(in srgb,var(--accent-amber) 12%,transparent);}
.dd-chat-btn{background:color-mix(in srgb,var(--accent-cyan) 12%,var(--bg-card));font-weight:700;
  box-shadow:0 1px 3px rgba(2,6,23,.06);}
.dd-chat-btn:hover{background:color-mix(in srgb,var(--accent-cyan) 22%,var(--bg-card));}

/* ══════════════════════════════════════════════════════════════
   LIBRARY & SIM ROUND — 2026-08-31b
   ══════════════════════════════════════════════════════════════
   1. Daily Learning: once-a-day pulse on the hub tile; the Fact and
      Question of the Day side by side with their own thin, distinct
      four-sided borders.
   2. Add-note bar hint copy (now the highlight loop) + the landing
      page's clinical-pearl hint.
   3. Note preview overlay (belt → one specific note).
   4. Flashcard view-only state (belt → a card that is not due yet).
   5. Lab reference ranges: sim side panel + Labs page drawer. */

/* ── 1a. Daily Learning tile pulse (first library visit of the day) ── */
.lib-hub-tile.lib-tile-daily-pulse{animation:libDailyPulse 2.1s ease-in-out infinite;}
@keyframes libDailyPulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent-red) 40%,transparent);}
  55%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent-red) 0%,transparent);}
}
@media(prefers-reduced-motion:reduce){.lib-hub-tile.lib-tile-daily-pulse{animation:none;border-color:var(--accent-red);}}

/* ── 1b. Fact / Question of the Day side by side ──
   They previously stacked and shared a blue-violet border, so they read
   as one long thing. Now: two columns, each with its own thin border on
   all four sides — amber for the fact you READ, indigo for the question
   you ANSWER. */
.lib-daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start;width:100%;}
@media(max-width:900px){.lib-daily-grid{grid-template-columns:1fr;}}
.lib-daily-grid>.fotd,.lib-daily-grid>.qotd{width:100%;max-width:none;margin:0;}
.lib-daily-grid>.fotd::before,.lib-daily-grid>.fotd::after{display:none;}
.lib-daily-grid>.fotd{--fotd-chrome:var(--accent-amber);
  border:1px solid color-mix(in srgb,var(--accent-amber) 55%,transparent);
  border-radius:14px;background:var(--bg-card);box-shadow:var(--shadow-1);
  padding:1rem 1.15rem 1.1rem;transition:border-color .18s ease,box-shadow .18s ease;}
.lib-daily-grid>.fotd:hover{transform:none;border-color:var(--accent-amber);box-shadow:var(--shadow-2);}
.lib-daily-grid>.fotd .fotd-lbl{color:var(--accent-amber);}
.lib-daily-grid>.fotd .fotd-date{color:var(--accent-amber);
  background:color-mix(in srgb,var(--accent-amber) 10%,transparent);
  border-color:color-mix(in srgb,var(--accent-amber) 32%,transparent);}
.lib-daily-grid>.qotd{margin-top:0;--qotd-accent:#6366f1;}
.lib-daily-grid>.qotd .qotd-inner{
  border:1px solid color-mix(in srgb,var(--qotd-accent) 55%,transparent);
  border-radius:14px;padding:1rem 1.15rem 1.1rem;}
.lib-daily-grid>.qotd .qotd-inner::before{display:none;}
.lib-daily-grid .fotd-txt,.lib-daily-grid .qotd-stem,
.lib-daily-grid .qotd-lead,.lib-daily-grid .qotd-choices{max-width:none;}
.lib-daily-grid .qotd-idle{flex-direction:column;align-items:stretch;gap:.65rem;}

/* ── 2. Add-note bar + landing pearl hint ── */
.pn2-hint{font-size:.7rem;font-weight:300;line-height:1.5;color:var(--ld-dim);
  max-width:44ch;margin:.15rem auto 0;text-align:center;}

/* ── 3. Note preview overlay ── */
.np-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10700;
  display:flex;align-items:center;justify-content:center;padding:1.25rem;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.np-modal{position:relative;width:min(560px,94vw);max-height:82vh;overflow-y:auto;
  background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--accent-cyan);
  border-radius:14px;padding:1.15rem 1.3rem 1.2rem;box-shadow:0 20px 60px rgba(0,0,0,.35);
  font-family:'DM Sans',sans-serif;}
.np-close{position:absolute;top:.55rem;right:.65rem;background:none;border:none;
  color:var(--text-dim);font-size:.95rem;cursor:pointer;}
.np-close:hover{color:var(--text-primary);}
.np-crumb{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  color:var(--accent-cyan);margin-bottom:.75rem;padding-right:1.5rem;}
.np-when{color:var(--text-dim);font-weight:400;}
.np-label{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);margin:.65rem 0 .3rem;}
.np-note{font-size:.88rem;line-height:1.6;color:var(--text-primary);}
.np-empty{color:var(--text-dim);font-style:italic;}
.np-label-passage{color:var(--accent-blue);}
.np-passage{font-size:.78rem;line-height:1.55;color:var(--text-secondary);
  background:color-mix(in srgb,var(--accent-blue) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent-blue) 22%,transparent);
  border-left:3px solid color-mix(in srgb,var(--accent-blue) 55%,transparent);
  border-radius:8px;padding:.5rem .7rem;}
.np-acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;}
.np-btn{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-secondary);font-family:'DM Sans',sans-serif;
  font-size:.74rem;font-weight:600;cursor:pointer;transition:color .15s,border-color .15s,background .15s;}
.np-btn:hover{color:var(--text-primary);border-color:var(--border-light);background:var(--bg-card-hover);}
.np-btn-go{border-color:color-mix(in srgb,var(--accent-cyan) 55%,transparent);color:var(--accent-cyan);
  background:color-mix(in srgb,var(--accent-cyan) 9%,transparent);}
.np-btn-go:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}
.np-btn-card{border-color:color-mix(in srgb,var(--accent-amber) 50%,transparent);color:var(--accent-amber);}
.np-btn-card:hover{border-color:var(--accent-amber);color:var(--accent-amber);}

/* ── 4. Flashcard view-only (not yet due) ── */
.dd-viewonly{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;
  padding:.7rem .8rem;border:1px dashed var(--border-light);border-radius:10px;background:var(--bg-secondary);}
.dd-viewonly-tag{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;
  letter-spacing:.05em;color:var(--accent-blue);}
.dd-viewonly-sub{font-size:.72rem;color:var(--text-dim);text-align:center;line-height:1.45;}
.dd-viewonly-anyway{margin-top:.35rem;padding:.4rem 1rem;border-radius:8px;
  border:1px solid var(--border-light);background:transparent;color:var(--text-secondary);
  font-size:.74rem;font-weight:600;cursor:pointer;}
.dd-viewonly-anyway:hover{color:var(--text-primary);border-color:var(--accent-cyan);}
/* The escape hatch is a small inline control, never a stretched
   grid button — it sits inside a column flex, so grow must be off. */
.dd-viewonly-anyway{flex:0 0 auto;align-self:center;width:auto;}
/* View-only hides the snooze box, so the remaining actions align right. */
.dd-extra-row-solo{justify-content:flex-end;}

/* ── 5. Lab reference ranges (shared by the sim panel + Labs drawer) ── */
.lr-group{margin-bottom:.9rem;}
.lr-group-title{display:flex;align-items:center;gap:.4rem;margin:0 0 .35rem;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--lr-accent);}
.lr-group-ic{font-size:.85rem;}
.lr-rows{border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.lr-row{display:grid;grid-template-columns:minmax(120px,1.15fr) minmax(110px,1fr) minmax(0,.8fr) minmax(0,1.4fr);
  gap:.5rem;align-items:baseline;padding:.34rem .6rem;font-size:.72rem;line-height:1.45;
  border-bottom:1px solid var(--border);background:var(--bg-card);}
.lr-row:last-child{border-bottom:none;}
.lr-row:nth-child(even){background:var(--bg-secondary);}
.lr-t{font-weight:700;color:var(--text-primary);}
.lr-r{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--lr-accent);font-weight:600;}
.lr-si{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text-dim);}
.lr-n{font-size:.68rem;color:var(--text-secondary);}
.lr-note{font-size:.66rem;line-height:1.5;color:var(--text-dim);font-style:italic;
  border-top:1px dashed var(--border);padding-top:.5rem;margin-top:.3rem;}
.lr-empty{font-size:.75rem;color:var(--text-dim);padding:.8rem;text-align:center;}
@media(max-width:820px){
  .lr-row{grid-template-columns:1fr 1fr;row-gap:.15rem;}
  .lr-si{grid-column:1 / -1;}
  .lr-n{grid-column:1 / -1;}
}
/* Sim side panel is narrow — collapse to a two-line row there always. */
.lr-panel-body .lr-row{grid-template-columns:1fr;row-gap:.05rem;padding:.4rem .55rem;}
.lr-panel-body .lr-si,.lr-panel-body .lr-n{grid-column:auto;}
.lr-panel-body{padding:.5rem .55rem 1rem;}

/* Labs page drawer — folded shut by default so the page's teaching
   content keeps the top of the screen. */
.lr-drawer{border:1px solid var(--border);border-radius:10px;background:var(--bg-card);overflow:hidden;}
.lr-drawer-hdr{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .75rem;
  background:none;border:none;cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;
  color:var(--text-primary);transition:background .15s;}
.lr-drawer-hdr:hover{background:var(--bg-card-hover);}
.lr-drawer-ic{font-size:1rem;flex:0 0 auto;}
.lr-drawer-txt{display:flex;flex-direction:column;gap:.05rem;flex:1;min-width:0;}
.lr-drawer-title{font-size:.8rem;font-weight:700;}
.lr-drawer-sub{font-size:.68rem;color:var(--text-dim);}
.lr-drawer-caret{color:var(--text-dim);font-size:.75rem;flex:0 0 auto;}
.lr-drawer-body{display:none;padding:.7rem .75rem .8rem;border-top:1px solid var(--border);}
.lr-drawer.lr-open .lr-drawer-body{display:block;}

/* ══════════════════════════════════════════════════════════════
   DEV ROLE SWITCH — 2026-08-31
   The "Viewing as: <role> ▾" pill and its menu. Lives in the
   bottom-right utility rail beside Tutorial and Report a bug, and
   is only ever mounted for the server-allowlisted account, so its
   styling deliberately reads as a tool rather than a feature:
   amber (the app's "developer/attention" accent), never crimson,
   which is reserved for the primary action on any screen.
   ══════════════════════════════════════════════════════════════ */
.devrole-pill{padding:.4rem .85rem;border-radius:999px;
  border:1px dashed color-mix(in srgb,var(--accent-amber) 55%,transparent);
  background:color-mix(in srgb,var(--accent-amber) 10%,var(--bg-card));
  color:var(--accent-amber);font-family:'JetBrains Mono',monospace;
  font-size:.66rem;font-weight:700;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.18);white-space:nowrap;
  transition:border-color .15s,background .15s;}
.devrole-pill:hover{border-style:solid;
  background:color-mix(in srgb,var(--accent-amber) 18%,var(--bg-card));}

.devrole-menu{position:absolute;right:0;bottom:calc(100% + .5rem);z-index:240;
  width:min(300px,calc(100vw - 24px));padding:.4rem;
  border:1px solid var(--border);border-radius:12px;background:var(--bg-card);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  display:flex;flex-direction:column;gap:.15rem;}
.devrole-menu-head{padding:.4rem .55rem .3rem;font-family:'JetBrains Mono',monospace;
  font-size:.6rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-dim);}
.devrole-opt{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  width:100%;padding:.45rem .55rem;border:1px solid transparent;border-radius:8px;
  background:transparent;text-align:left;cursor:pointer;
  transition:background .12s,border-color .12s;}
.devrole-opt:hover{background:var(--bg-secondary);border-color:var(--border-light);}
.devrole-opt-cur{background:color-mix(in srgb,var(--accent-amber) 9%,transparent);
  border-color:color-mix(in srgb,var(--accent-amber) 34%,transparent);}
.devrole-opt-label{font-size:.78rem;font-weight:600;color:var(--text-primary);}
.devrole-opt-tag{margin-left:.35rem;font-family:'JetBrains Mono',monospace;
  font-size:.55rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-amber);}
.devrole-opt-hint{font-size:.66rem;color:var(--text-dim);line-height:1.4;}
.devrole-menu-foot{padding:.4rem .55rem .25rem;margin-top:.15rem;
  border-top:1px solid var(--border);font-size:.62rem;color:var(--text-dim);
  line-height:1.45;}

/* .util-rail is already position:fixed (see the UI POLISH ROUND block),
   so it is the containing block for the absolutely-positioned menu. */

/* ══════════════════════════════════════════════════════════════
   POST-ROTATION TESTS — 2026-08-31
   ══════════════════════════════════════════════════════════════ */

/* Prev/Next moved above the question stem. The stems run to a full
   paragraph, so a bottom-anchored control meant scrolling past the whole
   question to move on. Keeping it tight to the question navigator also
   puts every way of moving between questions in one place. */
.pr-navbar-top{margin:.55rem 0 .7rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--border);}
.pr-navbar-right{display:flex;align-items:center;gap:.45rem;}
/* "Next unanswered" is the recovery path once the reader has been
   paging back through graded questions — cyan so it reads as the
   forward action without competing with the crimson submit button. */
.pr-nav-skip{border-color:color-mix(in srgb,var(--accent-cyan) 45%,transparent);
  color:var(--accent-cyan);}
.pr-nav-skip:hover:not([disabled]){border-color:var(--accent-cyan);}

@media (max-width:560px){
  .pr-navbar-top{flex-wrap:wrap;gap:.4rem;}
  .pr-navbar-right{flex:1 1 100%;justify-content:flex-end;}
}

/* ── PD post-rotation panel: privacy notice, block tracker, scrolling log ──
   2026-08-31. The panel is the program director's working view of who has
   and has not completed a test, so it leads with WHO CAN SEE IT (a PD
   reading resident scores should never have to wonder), then the tracker
   (the actionable number), then the transcript (the detail). */

.pr-dash-private{margin:.15rem 0 .6rem;padding:.4rem .55rem;border-radius:8px;
  border:1px dashed color-mix(in srgb,var(--accent-purple) 40%,transparent);
  background:color-mix(in srgb,var(--accent-purple) 7%,transparent);
  font-size:.68rem;line-height:1.5;color:var(--text-dim);}

/* Block tracker ------------------------------------------------ */
.pr-blocks{margin-bottom:.75rem;}
.pr-blocks-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  margin-bottom:.45rem;}
.pr-blocks-title{font-family:'JetBrains Mono',monospace;font-size:.66rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.pr-blocks-sum{flex:1 1 240px;font-size:.72rem;color:var(--text-secondary);line-height:1.45;}
.pr-blocks-sum strong{color:var(--accent-amber);}
.pr-blocks-grid{display:grid;gap:.3rem;
  grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
.pr-blk{display:flex;flex-direction:column;gap:.12rem;padding:.35rem .4rem;
  border:1px solid var(--border);border-radius:8px;background:var(--bg-card);
  /* --pr-blk-tone drives the count colour and the bar fill together, so a
     block reads the same way at a glance whichever you look at. */
  --pr-blk-tone:var(--text-dim);}
.pr-blk-n{font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;
  color:var(--text-primary);display:flex;align-items:center;gap:.25rem;}
.pr-blk-now{font-size:.52rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-cyan);}
.pr-blk-range{font-size:.58rem;color:var(--text-dim);white-space:nowrap;}
.pr-blk-count{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;
  color:var(--pr-blk-tone);}
.pr-blk-bar{height:3px;border-radius:2px;background:var(--border);overflow:hidden;}
.pr-blk-bar-fill{display:block;height:100%;background:var(--pr-blk-tone);
  transition:width .3s ease;}
.pr-blk-done{--pr-blk-tone:var(--accent-green);}
.pr-blk-part{--pr-blk-tone:var(--accent-amber);}
/* A started block with nobody done is the one that needs chasing. */
.pr-blk-none{--pr-blk-tone:var(--accent-red,#e5484d);}
.pr-blk-future{--pr-blk-tone:var(--text-dim);opacity:.55;}
.pr-blk-current{border-color:var(--accent-cyan);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-cyan) 30%,transparent);
  opacity:1;}

/* Scrolling transcript ------------------------------------------ */
/* 5 rows + the sticky header ≈ 9.6rem at the measured row height; 10.4rem
   leaves the 6th row half-visible, which is what tells the eye there is
   more below. Capping in rem rather than counting rows keeps it correct
   when a long name wraps onto a second line. */
.pr-dash-scroll{max-height:10.4rem;overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--border);border-radius:8px;padding:0 .35rem;
  background:color-mix(in srgb,var(--bg-card) 55%,transparent);}
.pr-dash-scroll .pr-dash-head{position:sticky;top:0;z-index:1;
  background:var(--bg-card);padding-top:.4rem;}
.pr-dash-more{margin-top:.35rem;font-size:.65rem;color:var(--text-dim);text-align:right;}

@media (max-width:560px){
  .pr-blocks-grid{grid-template-columns:repeat(auto-fit,minmax(72px,1fr));}
  .pr-blk-range{font-size:.54rem;}
}

/* Question figures are radiology plates — tall enough at full width to push
   the answer choices off-screen, so the reader loses sight of what they are
   choosing between. Cap the height (the aspect ratio is preserved) and let
   them click through to the full-size image when they want detail. */
.pr-q-figure{max-height:22rem;width:auto;object-fit:contain;cursor:zoom-in;
  background:#0b0b0c;display:block;}
.pr-q-figure:hover{border-color:var(--accent-cyan);}
/* Expanded state: toggled by prZoomFigure, so a click swaps between the
   scannable size and the full plate without leaving the question. */
.pr-q-figure.pr-q-figure-zoom{max-height:none;width:100%;cursor:zoom-out;}

/* ══════════════════════════════════════════════════════════════
   LANDING V2.2 — 2026-08-31 (fourth feedback round)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Quick Sim header: focus on its own, larger line ──
   "For You · ~10 min · Coach mode" ran the three picks together at one
   weight, so the one that actually changes what case you get read as
   equal to its two modifiers. The focus now leads on its own line at a
   size that says "this is the choice"; length and mode sit under it as
   the settings they are. The separator between them was a 0.95rem
   middot in the faintest colour in the palette — technically present,
   practically invisible — so it is now larger, rounder and a step
   brighter. */
.qc2-picks{flex-direction:column;align-items:center;gap:.15rem;}
.qc2-picks-txt{display:flex;flex-direction:column;align-items:center;gap:.1rem;}
.qc2-focus{font-size:1.5rem;font-weight:500;color:var(--ld-text);line-height:1.25;
  letter-spacing:-.01em;}
/* Length, mode, and the Change affordance share one line under the focus,
   so the block stays three lines tall at most instead of four. */
.qc2-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;
  font-size:.9rem;font-weight:400;color:var(--ld-text-2);}
.qc2-meta .qc2-change{margin-left:.35rem;}
.qc2-sep{font-size:1.25rem;line-height:0;color:var(--ld-mut);font-weight:400;
  position:relative;top:.06em;}
.qc2-change{font-size:.78rem;}

/* ── 2. The hover halo belongs to every tile, not just the first ──
   .lc-sim carried a legacy red-glow hover rule from the pre-V2 landing,
   so Clinical Simulation lit up and its neighbours did not — which read
   as "this one is special" rather than "this one is hoverable". Same
   treatment for all of them, including the two strip tiles that are now
   links themselves. */
#landing .ld-card:hover,
#landing .dd2.ld-tile-link:hover,
#landing .pn2.ld-tile-link:hover{
  border-color:color-mix(in srgb,var(--ld-accent) 45%,var(--ld-line-3));
  box-shadow:0 8px 32px var(--ld-glow);
  transform:translateY(-2px);
}
/* A loading skeleton is not hoverable — no halo, no lift. */
#landing .ld-card-loading:hover{border-color:var(--ld-line);box-shadow:none;transform:none;}

/* ── 3. Whole-tile links ──
   The tile body navigates; the buttons inside it do their own thing
   (ldTileOpen ignores clicks that originate on an interactive child).
   The cursor and focus ring have to advertise that, or the affordance
   is invisible until someone happens to click dead space. */
.ld-tile-link{cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;}
.ld-tile-link:focus-visible{outline:2px solid var(--ld-accent);outline-offset:2px;}
/* Children keep the default cursor so the buttons still read as buttons. */
.ld-tile-link button{cursor:pointer;}

/* ── 4. "+ Add a flashcard" matches "+ Add a note" ──
   Both are the capture action on their tile, so both wear the accent
   outline. Sharing the rule keeps them identical if either is restyled. */
.dd2-add,
#landing .pn2-add{padding:.55rem 1.45rem;border-radius:999px;background:transparent;
  border:1px solid color-mix(in srgb,var(--ld-accent) 55%,transparent);
  color:var(--ld-accent);font-family:inherit;font-size:.82rem;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;}
.dd2-add:hover,
#landing .pn2-add:hover{background:var(--ld-tint);border-color:var(--ld-accent);}

/* ── 5. The two action rows land on the same line ──
   The notes tile carried a hint line under its actions and the
   flashcards tile did not, so with both rows pinned to the bottom of
   their tile the flashcards' sat exactly one hint-height lower. The
   flashcards tile now has its own hint, and the pair share the hint
   style — same type, same spacing, same reserved height. */
/* These are real sentences the user is meant to READ, not metadata — at
   --ld-faint (#6e6e78) + weight 300 they were effectively invisible on the
   dark canvas. --ld-mut + weight 400 keeps them secondary but legible. */
.dd2-hint,
.pn2-hint{font-size:.72rem;font-weight:400;line-height:1.5;color:var(--ld-mut);
  margin-top:.55rem;}
#landing .dd2-hint,
#landing .pn2-hint{text-align:center;}
/* Actions push to the bottom of the tile; the hint sits below them. Both
   tiles now have both, so the rows align at any tile height. */
.dd2-actions,.pn2-actions{margin-top:auto;padding-top:.35rem;}

/* ══════════════════════════════════════════════════════════════
   BUG REPORT — screenshots + captions + guidance (2026-08-31)
   ══════════════════════════════════════════════════════════════ */

/* The dialog now carries guidance, a dropzone and up to four captioned
   thumbnails, so it is taller than it is wide and needs its own scroll —
   the page behind it must not be what scrolls. */
.bugrep-modal{width:min(560px,94vw);max-height:min(88vh,860px);overflow-y:auto;
  overscroll-behavior:contain;}

/* ── Guidance ──
   Collapsible and open by default: a first-time reporter reads it, a
   repeat reporter collapses it once and the browser remembers nothing —
   which is correct, because the advice is cheap to re-skim and the cost
   of a vague report is paid by both sides. */
.bugrep-guide{margin:0 0 .8rem;padding:.5rem .7rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-secondary);}
.bugrep-guide summary{cursor:pointer;font-size:.74rem;font-weight:700;
  color:var(--text-secondary);list-style:none;}
.bugrep-guide summary::-webkit-details-marker{display:none;}
.bugrep-guide summary::before{content:'▸ ';color:var(--text-dim);}
.bugrep-guide[open] summary::before{content:'▾ ';}
.bugrep-guide summary:hover{color:var(--text-primary);}
.bugrep-guide-list{margin:.5rem 0 0;padding-left:1.1rem;
  font-size:.72rem;line-height:1.55;color:var(--text-secondary);}
.bugrep-guide-list li{margin-bottom:.35rem;}
.bugrep-guide-list strong{color:var(--text-primary);font-weight:600;}
.bugrep-guide-phi{margin:.5rem 0 0;font-size:.68rem;line-height:1.5;
  color:var(--accent-amber);}

/* ── Guide v2 (2026-09-13): per-platform sections instead of a 6-step
   list, plus the one instruction people actually miss on a Mac (the
   floating preview → Save to Clipboard) called out loudly. ── */
.bugrep-guide-lead{margin:.5rem 0 0;font-size:.72rem;line-height:1.55;
  color:var(--text-secondary);}
.bugrep-guide-lead strong,.bugrep-guide-sec strong{color:var(--text-primary);font-weight:600;}
.bugrep-guide-sec{margin:.55rem 0 0;}
.bugrep-guide-os{font-size:.7rem;font-weight:700;letter-spacing:.03em;
  color:var(--text-primary);margin-bottom:.12rem;}
.bugrep-guide-sec p{margin:0;font-size:.72rem;line-height:1.55;
  color:var(--text-secondary);}
/* The instruction everyone misses — deliberately loud: a step up in
   size, full bold, bright red in both themes. */
.bugrep-mac-key{font-weight:800;font-size:1.09em;color:#ff4d57;}
:root[data-fc-theme="light"] .bugrep-mac-key{color:#e11d48;}

/* ── General-feedback section (moved below the screenshots) ── */
.bugrep-gen{margin-top:.7rem;}
.bugrep-gen-label{font-size:.78rem;font-weight:700;color:var(--text-primary);}
.bugrep-gen-hint{margin:.12rem 0 .4rem;font-size:.68rem;line-height:1.45;
  color:var(--text-dim);}

/* ── Anonymous checkbox ── */
.bugrep-anon{display:flex;align-items:flex-start;gap:.5rem;margin-top:.6rem;
  font-size:.72rem;line-height:1.5;color:var(--text-secondary);cursor:pointer;}
.bugrep-anon input{margin:.15rem 0 0;flex:0 0 auto;accent-color:var(--accent-cyan);cursor:pointer;}
.bugrep-anon strong{color:var(--text-primary);font-weight:600;}

/* ── Dropzone ── */
.bugrep-drop{display:flex;flex-direction:column;gap:.2rem;margin-top:.6rem;
  padding:.7rem .8rem;border:1px dashed var(--border-light);border-radius:10px;
  background:var(--bg-secondary);text-align:center;
  transition:border-color .15s,background .15s;}
.bugrep-drop-over{border-color:var(--accent-cyan);border-style:solid;
  background:color-mix(in srgb,var(--accent-cyan) 8%,var(--bg-secondary));}
.bugrep-drop-main{font-size:.76rem;color:var(--text-secondary);}
.bugrep-drop-browse{background:none;border:none;padding:0;cursor:pointer;
  color:var(--accent-cyan);font-family:inherit;font-size:.76rem;font-weight:600;
  text-decoration:underline;text-underline-offset:2px;}
.bugrep-drop-sub{font-size:.66rem;color:var(--text-dim);line-height:1.45;}
.bugrep-shot-count{color:var(--accent-cyan);font-weight:600;}
.bugrep-paste-btn{align-self:center;margin:.3rem 0 .1rem;padding:.4rem .9rem;
  border-radius:999px;border:1px solid var(--accent-cyan);cursor:pointer;
  background:color-mix(in srgb,var(--accent-cyan) 10%,var(--bg-card));
  color:var(--accent-cyan);font-family:'DM Sans',sans-serif;
  font-size:.74rem;font-weight:700;transition:background .15s;}
.bugrep-paste-btn:hover{background:color-mix(in srgb,var(--accent-cyan) 18%,var(--bg-card));}
.bugrep-guide-list kbd{display:inline-block;padding:0 .3em;border-radius:4px;
  border:1px solid var(--border-light);background:var(--bg-card);
  font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--text-primary);}

/* ── Attached screenshots ──
   Thumbnail left, caption right. The caption is the point of the
   attachment, so it gets the width; the thumbnail only has to be big
   enough to tell the images apart. */
.bugrep-shots{display:flex;flex-direction:column;gap:.5rem;margin-top:.55rem;}
.bugrep-shot{display:flex;gap:.65rem;padding:.5rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-secondary);}
.bugrep-shot-img{width:88px;height:66px;flex:0 0 auto;object-fit:cover;
  border-radius:6px;border:1px solid var(--border);background:#0b0b0c;}
.bugrep-shot-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem;}
.bugrep-shot-head{display:flex;align-items:center;gap:.5rem;}
.bugrep-shot-n{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);}
.bugrep-shot-x{margin-left:auto;background:none;border:none;padding:0;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:600;color:var(--text-dim);}
.bugrep-shot-x:hover{color:var(--accent-red);}
.bugrep-cap{width:100%;box-sizing:border-box;padding:.4rem .55rem;border-radius:8px;
  border:1px solid var(--border);background:var(--bg-card);color:var(--text-primary);
  font-family:'DM Sans',sans-serif;font-size:.74rem;line-height:1.45;outline:none;}
.bugrep-cap::placeholder{color:var(--text-dim);}
.bugrep-cap:focus{border-color:var(--accent-cyan);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-cyan) 15%,transparent);}
.bugrep-add-note{align-self:flex-start;background:none;
  border:1px dashed var(--border-light);border-radius:8px;padding:.22rem .55rem;
  cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:600;
  color:var(--text-secondary);transition:color .15s,border-color .15s;}
.bugrep-add-note:hover{color:var(--accent-cyan);border-color:var(--accent-cyan);}

@media (max-width:520px){
  .bugrep-shot{flex-direction:column;}
  .bugrep-shot-img{width:100%;height:120px;}
}

/* ══════════════════════════════════════════════════════════════
   INSTITUTIONAL EMAIL VERIFICATION — 2026-08-31
   A pre-app gate, so it deliberately matches the sign-in and
   invite-code screens (opaque near-black, system font) rather than
   the in-app theme — the app's palette has not been established yet
   at this point in the boot, and this screen must look like part of
   the door, not part of the building.
   ══════════════════════════════════════════════════════════════ */
.iv-overlay{display:none;position:fixed;inset:0;background:#0a0a0a;z-index:99998;
  align-items:center;justify-content:center;padding:1rem;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;overflow-y:auto;}
.iv-card{width:min(420px,100%);padding:1.9rem 1.75rem;border-radius:16px;
  background:#141416;border:1px solid #26262a;box-shadow:0 24px 70px rgba(0,0,0,.5);}
.iv-title{margin:0 0 .5rem;font-size:1.15rem;font-weight:700;color:#fafafa;}
.iv-sub{margin:0 0 1.25rem;font-size:.82rem;line-height:1.6;color:#a1a1aa;}
.iv-sub strong{color:#e4e4e7;font-weight:600;}
.iv-label{display:block;margin-bottom:.4rem;font-size:.72rem;font-weight:600;
  letter-spacing:.02em;color:#a1a1aa;}
.iv-input{width:100%;box-sizing:border-box;padding:.7rem .8rem;border-radius:10px;
  border:1px solid #303036;background:#0d0d0f;color:#fafafa;
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:.92rem;outline:none;
  transition:border-color .15s,box-shadow .15s;}
.iv-input::placeholder{color:#52525b;}
.iv-input:focus{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.18);}
/* The code is six characters read back off a phone — space them out so a
   transposed digit is obvious before it is submitted. */
.iv-input-code{text-align:center;font-size:1.5rem;letter-spacing:.5em;
  text-indent:.5em;padding:.8rem;}
.iv-hint{margin:.5rem 0 0;font-size:.7rem;line-height:1.55;color:#71717a;}
.iv-primary{width:100%;margin-top:1rem;padding:.75rem 1rem;border:none;border-radius:999px;
  background:#e5484d;color:#fff;font-family:inherit;font-size:.85rem;font-weight:600;
  cursor:pointer;transition:filter .15s,opacity .15s;}
.iv-primary:hover:not(:disabled){filter:brightness(1.08);}
.iv-primary:disabled{opacity:.6;cursor:default;}
.iv-secondary{width:100%;margin-top:.5rem;padding:.6rem 1rem;border:1px solid #303036;
  border-radius:999px;background:transparent;color:#a1a1aa;font-family:inherit;
  font-size:.78rem;font-weight:600;cursor:pointer;}
.iv-secondary:hover{color:#fafafa;border-color:#3f3f46;}
.iv-error{margin:.85rem 0 0;padding:.55rem .7rem;border-radius:8px;
  background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.3);
  font-size:.76rem;line-height:1.5;color:#fca5a5;}
.iv-info{margin:.85rem 0 0;padding:.55rem .7rem;border-radius:8px;
  background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);
  font-size:.76rem;line-height:1.5;color:#86efac;}
.iv-foot{margin-top:1.4rem;text-align:center;}
.iv-link{background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:.74rem;color:#6b7280;text-decoration:underline;}
.iv-link:hover{color:#a1a1aa;}
.iv-foot-note{margin:.7rem 0 0;font-size:.68rem;color:#52525b;}

/* ══════════════════════════════════════════════════════════════
   QOTD ACTION ROW — 2026-08-31
   ══════════════════════════════════════════════════════════════
   Before: two pills of very different widths ("Make a flashcard from
   this" / "Run a simulation on this topic") wrapped onto separate
   lines at the card's width, and "Next question tomorrow." sat inline
   as a third flex item — so a quiet status note read as a peer of two
   buttons and the row never looked deliberate at any width.

   Now: the three actions are one equal-width grid (so they line up
   whatever their labels say, and stay aligned if a label is ever
   reworded), and the note drops to its own centered line below where a
   status note belongs. Labels lost their trailing "from this" / "on
   this topic" — the row sits directly under the question, so what
   "this" refers to was never in doubt. */

.qotd-foot{flex-direction:column;gap:.6rem;}
.qotd-foot-actions{display:grid;gap:.5rem;width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));}

.qotd-foot-btn{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  width:100%;min-height:2.3rem;padding:.5rem .5rem;
  /* A softer radius than the old 999px: three side-by-side pills read as
     a segmented control the eye tries to group, while rounded rectangles
     read as three distinct actions — which is what they are. */
  border-radius:10px;
  font-size:.74rem;line-height:1.25;text-align:center;
}
.qotd-foot-ico{font-size:.88rem;line-height:1;flex:0 0 auto;}
.qotd-foot-lbl{min-width:0;}

/* One accent each, matching what the action leads to elsewhere in the
   app: cyan for chat, purple for flashcards, crimson for simulation. */
.qotd-foot-ask{color:var(--accent-cyan);border-color:color-mix(in srgb,var(--accent-cyan) 45%,transparent);}
.qotd-foot-ask:hover{background:color-mix(in srgb,var(--accent-cyan) 12%,transparent);color:var(--accent-cyan);}

.qotd-next{
  align-self:center;margin-left:0;text-align:center;
}

/* The constraint that matters is the CARD's width, not the viewport's:
   on Daily Learning this card sits in a two-column grid, so at a perfectly
   ordinary 1280px viewport it is only ~380px wide and three labels across
   wrap to two lines each ("Make a / flashcard"), which is exactly the
   ragged look this round set out to fix. A container query measures the
   thing that actually varies. Below ~440px of card the three stack full
   width — cleaner than a 2+1 grid, and it puts every action under the
   thumb on a phone. */
.qotd-inner{container-type:inline-size;}
/* Measured, not guessed: three of these need 343px with every label on one
   line (widest = "Make a card" at 109px, plus two 8px gaps). The Daily
   Learning card gives 383px of CONTENT width — the container query measures
   the content box, which is 39px narrower than the 422px the card occupies,
   and mistaking one for the other is what made the first two attempts at
   this row wrap. 360 sits between the two with slack on both sides. */
@container (max-width: 360px){
  .qotd-foot-actions{grid-template-columns:1fr;}
  .qotd-foot-btn{min-height:2.4rem;}
}
/* Viewport fallback for engines without container queries, and for the
   genuinely narrow-screen case. */
@media(max-width:520px){
  .qotd-foot-actions{grid-template-columns:1fr;}
  .qotd-foot-btn{min-height:2.5rem;}
}

/* ══════════════════════════════════════════════════════════════
   FACULTY / CHIEF CENTER LANDING TILE — 2026-08-31
   ══════════════════════════════════════════════════════════════
   This tile is the one entry on the landing page that only some
   accounts can see, and it opens a workspace with other people's data
   in it. A neon purple edge marks it as that — the same purple the
   setup-page pill and the PD dashboard already use for this workspace,
   so the colour means "leadership surface" consistently rather than
   being decoration. Every other landing tile keeps the crimson hover
   halo; this one carries its accent at rest. */
#landing .ld-card-fc{
  border-color:color-mix(in srgb,var(--accent-purple) 62%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-purple) 22%,transparent),
             0 6px 26px color-mix(in srgb,var(--accent-purple) 18%,transparent);
}
#landing .ld-card-fc .ld-card-title{color:var(--accent-purple);}
#landing .ld-card-fc .ld-card-arrow{color:color-mix(in srgb,var(--accent-purple) 70%,transparent);}
/* Hover lifts the same distance as its neighbours, but stays purple —
   inheriting the crimson halo here would undo the whole point. */
#landing .ld-card-fc:hover{
  border-color:var(--accent-purple);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-purple) 40%,transparent),
             0 10px 34px color-mix(in srgb,var(--accent-purple) 34%,transparent);
  transform:translateY(-2px);
}
#landing .ld-card-fc:hover .ld-card-arrow{color:var(--accent-purple);}

/* ── Roster removal actions — 2026-08-31 ──
   Both removals are destructive, so both are red and underlined: an
   underline is what tells a scanning eye "this is a control", and the row
   sits among plain-text metadata where an unadorned red word reads as a
   status, not a button. Delete and Delete & block look alike on purpose —
   they differ in consequence, not in kind, and the confirm text is where
   that difference is spelled out. */
.fc-roster-person-actions .fc-link-btn-danger{
  text-decoration:underline;text-underline-offset:2px;
}
.fc-roster-person-actions .fc-link-btn-danger:disabled{
  opacity:.45;cursor:not-allowed;text-decoration:none;
}
/* Four actions wrap rather than squeeze on a narrow tile. */
.fc-roster-person-actions{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;}

/* ── Assignment disclosure (2026-08-31) ──
   Collapsed by default: the three facts matter, but a learner opening
   their assignment list wants the case first. Open once and it is a
   plain definition list — no styling flourish, because this is the
   place in the product where the text is the whole point. */
.ma-disclose{margin-top:.7rem;padding:.5rem .7rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-secondary);}
.ma-disclose-sum{cursor:pointer;list-style:none;font-size:.74rem;font-weight:600;
  color:var(--text-secondary);}
.ma-disclose-sum::-webkit-details-marker{display:none;}
.ma-disclose-sum::before{content:'▸ ';color:var(--text-dim);}
.ma-disclose[open] .ma-disclose-sum::before{content:'▾ ';}
.ma-disclose-sum:hover{color:var(--text-primary);}
.ma-disclose-grid{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;
  margin:.6rem 0 .1rem;font-size:.74rem;line-height:1.55;}
.ma-disclose-grid dt{color:var(--text-dim);white-space:nowrap;}
.ma-disclose-grid dd{margin:0;color:var(--text-secondary);}
.ma-disclose-list{margin:0;padding-left:1.05rem;}
.ma-disclose-note{color:var(--text-dim);font-style:italic;}
@media (max-width:560px){
  .ma-disclose-grid{grid-template-columns:1fr;gap:.1rem;}
  .ma-disclose-grid dt{margin-top:.4rem;}
}

/* Anonymity toggle in the assign form — the warning carries the weight,
   so it is amber and sits directly under the checkbox it argues against. */
.fc-anon-option{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  padding:.5rem 0;}
.fc-anon-option input{margin-top:.2rem;}
.fc-anon-warn{margin:.2rem 0 0;padding:.5rem .65rem;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--accent-amber) 32%,transparent);
  background:color-mix(in srgb,var(--accent-amber) 8%,transparent);
  font-size:.72rem;line-height:1.55;color:var(--text-secondary);}
.fc-anon-warn strong{color:var(--accent-amber);}

/* ══════════════════════════════════════════════════════════════
   QUICK SIM — NEON GRADIENTS (2026-08-31)
   ══════════════════════════════════════════════════════════════
   The flat crimson CTA and the flat focus label were the two elements
   on the landing page that most needed to pull the eye, and both were
   the same weight as everything around them. A gradient does that job
   without adding a second element to the page.

   The ramp is defined once as four stops and reused by the button and
   the label, so they read as one system rather than two decorations
   that happen to be colourful. Both themes get their OWN stops: the
   dark-mode neons (#ff4d6d → #c026ff) are luminous on near-black but
   turn to acid on white, so light mode uses deeper, more saturated
   versions of the same hues, which keeps the identity and holds the
   4.5:1 contrast the label needs against #fafafa. */

#landing{
  --qs-1:#ff3d68;   /* crimson — the app's own accent, kept as the anchor */
  --qs-2:#ff5e3a;   /* ember   */
  --qs-3:#a855f7;   /* violet  */
  --qs-4:#22d3ee;   /* cyan    */
  --qs-glow-a:rgba(255,61,104,.40);
  --qs-glow-b:rgba(168,85,247,.34);
}
:root[data-fc-theme="light"] #landing{
  /* Same four hues, darkened ~15% and desaturated slightly so the text
     ramp stays legible on a near-white page and the button's white
     label keeps its contrast across every stop. */
  --qs-1:#e11d48;
  --qs-2:#e14d1d;
  --qs-3:#8b21e8;
  --qs-4:#0891b2;
  --qs-glow-a:rgba(225,29,72,.26);
  --qs-glow-b:rgba(139,33,232,.22);
}

/* ── The CTA ──
   background-size 200% + a position shift on hover makes the ramp
   travel rather than just brighten, which is what reads as "alive"
   on a button people are meant to press every day. */
.qc2-go{
  /* The ramp is MIRRORED across the full 200% width: stops 0-50% are the
     complete c1 -> c4 spectrum, 50-100% is the same spectrum reversed.
     With background-size:200% the visible half therefore already shows
     every hue at rest (a plain 4-stop ramp at 200% would hide the violet
     and cyan off-canvas until hover, which is exactly how the first cut
     of this ended up looking like a red button). Sliding to 100% on hover
     runs the spectrum backwards rather than revealing anything new. */
  background:linear-gradient(100deg,
    var(--qs-1) 0%,  var(--qs-2) 14%, var(--qs-3) 33%, var(--qs-4) 50%,
    var(--qs-3) 67%, var(--qs-2) 86%, var(--qs-1) 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  box-shadow:0 10px 38px var(--qs-glow-a), 0 4px 22px var(--qs-glow-b);
  transition:transform .18s ease, box-shadow .18s ease,
             background-position .55s ease, opacity .15s ease;
}
.qc2-go:hover:not(:disabled){
  background-position:100% 50%;
  transform:translateY(-2px);
  box-shadow:0 16px 52px var(--qs-glow-a), 0 8px 30px var(--qs-glow-b);
}
.qc2-go:active:not(:disabled){transform:translateY(0);}
.qc2-go:disabled{
  background:var(--ld-line-2,#3f3f46);box-shadow:none;opacity:.6;
}

/* ── The focus label ──
   Whatever quickCase.js puts here — For You, Surprise me, ICU — gets
   the same ramp, so the gradient belongs to the SLOT, not to one
   string. background-clip:text is the only way to gradient live text;
   the color fallback below matters because a browser without it would
   otherwise render the text transparent, i.e. invisible. */
.qc2-focus{
  color:var(--ld-text);                       /* fallback, must come first */
  /* Mirrored for the same reason as the button — the whole spectrum has
     to land inside the few characters this label occupies. */
  background:linear-gradient(96deg,
    var(--qs-1) 0%,  var(--qs-2) 15%, var(--qs-3) 34%, var(--qs-4) 50%,
    var(--qs-3) 66%, var(--qs-2) 85%, var(--qs-1) 100%);
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background-position .6s ease;
}
/* Drift the ramp when the reader is over the control the label sits in,
   tying the two gradients together as one gesture. */
.qc2-picks:hover .qc2-focus{background-position:100% 50%;}

@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .qc2-focus{-webkit-text-fill-color:currentColor;background:none;color:var(--qs-1);}
}
@media (prefers-reduced-motion:reduce){
  .qc2-go,.qc2-focus{transition:none;}
  .qc2-go:hover:not(:disabled){transform:none;}
}

/* ── Quick Sim saved default (2026-08-31) ──
   Sits at the foot of the expanded editor, above the full-setup link:
   you configure, then you decide whether this is your usual. Quiet by
   default — it is a preference control, not a call to action, and it
   must not compete with the Start button below it. */
.qc-default-row{margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--ld-line);
  display:flex;flex-direction:column;gap:.45rem;}
.qc-default-cur{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;}
.qc-default-lbl{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ld-faint);}
.qc-default-sum{font-size:.75rem;color:var(--ld-mut);}
.qc-default-acts{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;}
.qc-default-save{padding:.4rem .9rem;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--qs-3) 50%,transparent);
  background:color-mix(in srgb,var(--qs-3) 9%,transparent);
  color:var(--qs-3);font-family:inherit;font-size:.75rem;font-weight:600;
  transition:background .15s,border-color .15s;}
.qc-default-save:hover{background:color-mix(in srgb,var(--qs-3) 16%,transparent);
  border-color:var(--qs-3);}
/* The confirmed state is a statement, not a button — nothing to press
   once the current combination already IS the default. */
.qc-default-badge{font-size:.75rem;font-weight:600;
  color:color-mix(in srgb,var(--qs-4) 80%,var(--ld-text-2));}
.qc-default-clear{font-size:.72rem;}
.qc-default-hint{margin:0;font-size:.7rem;line-height:1.5;color:var(--ld-faint);}

/* ══════════════════════════════════════════════════════════════
   NOTE READER MODAL (landingNotes.js "Open note", 2026-08-31)
   Reuses the drills modal shell (.drills-overlay/.drills-modal) so it
   reads as the same family as the flashcard popup; pnm-* styles the
   passage/note content + footer nav. Blue-passage / green-note follows
   the My Notes color scheme.
   ══════════════════════════════════════════════════════════════ */
.pnm-modal{max-width:560px;width:min(560px,94vw);}
.pnm-count{font-size:.72rem;font-weight:600;color:var(--text-dim);margin-left:.4rem;}
.pnm-body{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.7rem;overflow-y:auto;}
.pnm-crumb{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:600;letter-spacing:.03em;color:var(--accent-cyan);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.pnm-ts{color:var(--text-dim);font-weight:400;}
.pnm-lbl{font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.3rem;}
.pnm-passage{border-left:3px solid var(--accent-blue);background:rgba(59,130,246,.07);border-radius:0 8px 8px 0;padding:.55rem .7rem;}
.pnm-passage-text{font-size:.8rem;line-height:1.6;font-style:italic;color:var(--text-primary);}
.pnm-note{border-left:3px solid var(--accent-green);background:rgba(34,197,94,.07);border-radius:0 8px 8px 0;padding:.55rem .7rem;}
.pnm-note-text{font-size:.8rem;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;}
.pnm-none{color:var(--text-dim);font-style:italic;}
.pnm-ta{width:100%;box-sizing:border-box;padding:.5rem .6rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.8rem;line-height:1.55;resize:vertical;}
.pnm-ta:focus{outline:none;border-color:var(--accent-green);}
.pnm-edit-acts{display:flex;justify-content:flex-end;gap:.4rem;margin-top:.45rem;}
.pnm-ftr{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.6rem 1rem;border-top:1px solid var(--border);}
.pnm-nav,.pnm-acts{display:flex;gap:.4rem;}
.pnm-btn{padding:.4rem .8rem;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.73rem;font-weight:600;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);transition:border-color .15s,color .15s,background .15s;}
.pnm-btn:hover:not(:disabled){border-color:var(--border-light);color:var(--text-primary);}
.pnm-btn:disabled{opacity:.4;cursor:default;}
.pnm-btn-primary{border-color:color-mix(in srgb,var(--accent-cyan) 55%,transparent);color:var(--accent-cyan);background:rgba(6,182,212,.07);}
.pnm-btn-primary:hover:not(:disabled){border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(6,182,212,.14);}

/* ══════════════════════════════════════════════════════════════
   FACULTY CENTER — Assignments hub (2026-09-01)
   The tab opens as two tiles; opening one shows that section in
   full with the other available as a collapsed fold underneath.
   ══════════════════════════════════════════════════════════════ */
.fc-assn-tiles{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.fc-head-btns{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;}
.fc-ghost-btn{padding:.4rem .8rem;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;
  font-size:.76rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;}
.fc-ghost-btn:hover{border-color:var(--accent-cyan);color:var(--text-primary);
  background:var(--bg-card-hover);}
.fc-fold{padding-top:.35rem;padding-bottom:.35rem;}
.fc-fold-toggle{display:flex;align-items:center;gap:.55rem;width:100%;
  padding:.55rem .2rem;background:none;border:none;cursor:pointer;text-align:left;}
.fc-fold-caret{color:var(--accent-cyan);font-size:.8rem;width:1em;flex-shrink:0;}
.fc-fold-title{font-size:.86rem;font-weight:700;color:var(--text-primary);}
.fc-fold-count{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-dim);}
.fc-fold-hint{margin-left:auto;font-size:.7rem;color:var(--accent-cyan);white-space:nowrap;}
.fc-fold-body{padding-top:.5rem;border-top:1px solid var(--border);margin-top:.15rem;}
.fc-fold-actions{margin-top:.7rem;}
@media (max-width:768px){
  .fc-fold-hint{display:none;}
  .fc-head-btns{width:100%;}
}

/* ══════════════════════════════════════════════════════════════
   CUP OF JOE — dark-mode legibility (2026-09-01)
   The section's amber (#b48028) and the generic --text-dim/-secondary
   greys were near-unreadable on the dark canvas, and the stat/reader
   pills carried a light-mode `rgba(255,255,255,.42)` fill that washed
   them out further. Dark mode gets a neon amber for dates/stats and a
   neon cyan for the people + filter labels, so the two kinds of
   metadata stay visually distinct. Light mode is untouched.
   ══════════════════════════════════════════════════════════════ */
html:not([data-fc-theme="light"]) {
  --coj-accent:#ffc94a;          /* neon amber — dates, kicker, chips */
  --coj-neon-2:#2ee6f7;          /* neon cyan  — authors, filter labels */
}
html:not([data-fc-theme="light"]) .coj-hero-stat,
html:not([data-fc-theme="light"]) .coj-reader-pill,
html:not([data-fc-theme="light"]) .coj-archive-chip {
  background:rgba(255,201,74,.10);
  border-color:rgba(255,201,74,.42);
  color:var(--coj-accent);
}
html:not([data-fc-theme="light"]) .coj-archive-byline {
  color:var(--coj-neon-2);
  font-weight:700;
}
html:not([data-fc-theme="light"]) .coj-filter-label,
html:not([data-fc-theme="light"]) .coj-filter-results {
  color:var(--coj-neon-2);
}
html:not([data-fc-theme="light"]) .coj-archive-preview {
  color:var(--mgh-body-dim, #bccbe0);
}

/* ══════════════════════════════════════════════════════════════
   CUSTOMIZE (2026-09-02) — screen border presets + institution tile
   backgrounds. Driven by customize.js via <html data-frame=…
   data-inst-tile=…> and the --frame-c / --frame-c2 / --inst-tile-c
   custom properties. The base .ecg-line rules near the top of this
   file remain the Rainbow preset (data-frame unset or "rainbow").
   ══════════════════════════════════════════════════════════════ */
:root{--frame-c:#22d3ee;--frame-c2:#60a5fa;--inst-tile-c:#f59e0b;--inst-tile-c2:#fbbf24;}

/* ── The control ── */
.global-customize-btn{
  position:fixed;
  top:calc(92px + env(safe-area-inset-top,0px));
  right:calc(14px + env(safe-area-inset-right,0px));
  z-index:9998;
  padding:.35rem .7rem;border-radius:999px;
  border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);
  cursor:pointer;font-size:.68rem;font-family:'DM Sans',sans-serif;font-weight:600;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s,opacity .15s;
  box-shadow:0 2px 6px rgba(0,0,0,.15);user-select:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem;}
.global-customize-btn:hover,.global-customize-btn[aria-expanded="true"]{
  border-color:var(--frame-c);color:var(--text-primary);transform:translateY(-1px);
  box-shadow:0 3px 10px color-mix(in srgb,var(--frame-c) 30%,transparent);}
/* Same visibility rules as the theme toggle it sits under. */
body.page-chat .global-customize-btn{display:none!important;}
@media print{.global-customize-btn,.cz-panel,.cz-backdrop{display:none!important;}}
@media(max-width:480px){
  .global-customize-btn:not(.cz-btn-rail){top:calc(84px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));padding:.3rem .55rem;font-size:.7rem;}
}
/* Landing page on phones: the chip stays fixed under the theme toggle
   (user request: match the desktop placement), shrunk to the icon so it
   reads as a sibling of the ☀️/🌙 pill rather than a second label. */
@media(max-width:620px){
  body.page-landing .global-customize-btn.cz-btn-top{
    top:calc(92px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
    width:36px;height:36px;min-height:0;padding:0;justify-content:center;font-size:1rem;}
}
@media(max-width:480px){
  body.page-landing .global-customize-btn.cz-btn-top{
    top:calc(84px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));}
}
/* Phone placement: an icon-only chip in the utility rail (customize.js
   moves the element there at ≤620px). Static inside the flex rail. */
.global-customize-btn.cz-btn-rail{position:static;top:auto;right:auto;
  width:38px;height:38px;padding:0;justify-content:center;font-size:1.05rem;border-radius:999px;}

/* ── The panel ── */
.cz-backdrop{position:fixed;inset:0;z-index:10490;background:rgba(0,0,0,0);transition:background .2s;}
.cz-backdrop-in{background:rgba(0,0,0,.28);}
@media(min-width:621px){.cz-backdrop{pointer-events:none;background:transparent!important;}}
.cz-panel{position:fixed;z-index:10500;
  top:calc(130px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));
  width:min(360px,calc(100vw - 28px));max-height:calc(100vh - 150px);
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:14px;
  /* Opaque no matter what --bg-card resolves to on a given page (the
     library shell tints its cards translucent): paint the card color OVER
     the solid page ground, and blur whatever sits behind for good measure. */
  background:linear-gradient(var(--bg-card),var(--bg-card)),var(--bg-primary,#0a0e17);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  opacity:0;transform:translateY(-6px);transition:opacity .16s,transform .16s;}
.cz-panel-in{opacity:1;transform:none;}
.cz-hdr{display:flex;align-items:center;justify-content:space-between;padding:.7rem .85rem .5rem;border-bottom:1px solid var(--border);}
.cz-title{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;letter-spacing:.03em;color:var(--text-primary);}
.cz-x{border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:.95rem;padding:.2rem .4rem;border-radius:6px;min-width:32px;min-height:32px;}
.cz-x:hover{background:var(--bg-secondary);color:var(--text-primary);}
.cz-body{overflow:auto;padding:.6rem .85rem .2rem;display:flex;flex-direction:column;gap:.9rem;-webkit-overflow-scrolling:touch;}
.cz-sec-hdr{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.45rem;}
.cz-sec-title{font-size:.74rem;font-weight:700;color:var(--text-primary);}
.cz-sec-hint{font-size:.64rem;color:var(--text-dim);}
.cz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;}
.cz-opt{display:flex;flex-direction:column;align-items:stretch;gap:.28rem;padding:.3rem;border-radius:9px;
  border:1.5px solid var(--border);background:var(--bg-secondary);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;font-family:'DM Sans',sans-serif;}
.cz-opt:hover{transform:translateY(-1px);border-color:var(--border-light);}
.cz-opt-on{border-color:var(--frame-c);box-shadow:0 0 0 2px color-mix(in srgb,var(--frame-c) 30%,transparent);}
.cz-opt-name{font-size:.62rem;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.2;}
.cz-opt-on .cz-opt-name{color:var(--text-primary);}
.cz-prev{display:block;height:40px;border-radius:6px;position:relative;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);}
.cz-prev::before{content:'';position:absolute;inset:0;}
.cz-color-row{display:flex;align-items:center;gap:.45rem;margin-top:.55rem;flex-wrap:wrap;}
.cz-color-row-off{opacity:.38;pointer-events:none;}
.cz-color-lbl{font-size:.62rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.cz-swatches{display:flex;gap:.3rem;flex-wrap:wrap;}
.cz-swatch{width:22px;height:22px;min-height:0;min-width:0;flex:0 0 22px;border-radius:50%;border:2px solid transparent;background:var(--sw);cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:transform .12s,border-color .12s;}
.cz-swatch:hover{transform:scale(1.12);}
.cz-swatch-on{border-color:var(--text-primary);transform:scale(1.12);}
.cz-picker{position:relative;width:26px;height:26px;border-radius:50%;cursor:pointer;flex:0 0 auto;
  background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ef4444);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}
.cz-picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.cz-picker-dot{position:absolute;inset:6px;border-radius:50%;background:var(--sw);pointer-events:none;box-shadow:0 0 0 2px var(--bg-card);}
.cz-note{font-size:.68rem;color:var(--text-dim);line-height:1.5;padding:.55rem .65rem;border:1px dashed var(--border);border-radius:9px;}
.cz-ftr{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .85rem .7rem;border-top:1px solid var(--border);margin-top:.4rem;}
.cz-ftr-hint{font-size:.62rem;color:var(--text-dim);}
.cz-reset{border:1px solid var(--border);background:transparent;color:var(--text-secondary);border-radius:999px;padding:.3rem .7rem;font-size:.64rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;}
.cz-reset:hover{border-color:var(--accent-red);color:var(--accent-red);}
/* Bottom sheet on phones. */
@media(max-width:620px){
  .cz-panel{top:auto;right:0;left:0;bottom:0;width:100%;max-height:min(80vh,80dvh);
    border-radius:16px 16px 0 0;border-bottom:none;transform:translateY(14px);
    padding-bottom:env(safe-area-inset-bottom,0px);}
  .cz-panel-in{transform:none;}
  .cz-hdr{padding:.8rem 1rem .55rem;}
  .cz-hdr::before{content:'';position:absolute;top:6px;left:50%;width:38px;height:4px;border-radius:2px;background:var(--border-light);transform:translateX(-50%);}
  .cz-panel{position:fixed;}
  .cz-body{padding:.6rem 1rem .2rem;}
  /* Global ≤620px touch-target rules inflate buttons; swatches must stay round. */
  .cz-swatch{width:28px;height:28px;flex-basis:28px;min-height:0!important;}
  .cz-picker{width:30px;height:30px;}
  .cz-x{min-height:36px;}
  .cz-opt{min-height:44px;}
}

/* ── Border presets ──
   Two axes: data-frame (style) × data-frame-color (rainbow | custom).
   Rainbow = the conic spectrum in .ecg-line::before (base rules above);
   custom = var(--frame-c). Each rule also styles the matching panel
   preview (.cz-fx-*), so the swatch the user taps is the effect they get. */
html[data-frame="none"] .ecg-line{display:none;}
.cz-fx-none{background:repeating-linear-gradient(45deg,transparent 0 6px,var(--border) 6px 7px);}
.cz-swatch-rainbow{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);}

/* AURORA — a wide, feathered, translucent edge glow (was the default until 2026-09-10). The hard
   XOR ring mask is replaced by four edge gradients (union), so the glow is
   opaque only at the very edge and fades to nothing ~26px in. Text that
   scrolls under it stays readable — the reason this is the default. */
html[data-frame="aurora"] .ecg-line{padding:0;--aur-w:26px;
  -webkit-mask:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) top/100% var(--aur-w) no-repeat,
               linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) bottom/100% var(--aur-w) no-repeat,
               linear-gradient(to right,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) left/var(--aur-w) 100% no-repeat,
               linear-gradient(to left,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) right/var(--aur-w) 100% no-repeat;
  -webkit-mask-composite:source-over;
  mask:linear-gradient(to bottom,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) top/100% var(--aur-w) no-repeat,
       linear-gradient(to top,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) bottom/100% var(--aur-w) no-repeat,
       linear-gradient(to right,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) left/var(--aur-w) 100% no-repeat,
       linear-gradient(to left,rgba(0,0,0,.95),rgba(0,0,0,.4) 40%,transparent) right/var(--aur-w) 100% no-repeat;
  mask-composite:add;}
@media(max-width:620px){html[data-frame="aurora"] .ecg-line{--aur-w:18px;}}
html[data-frame="aurora"][data-frame-color="rainbow"] .ecg-line::before{opacity:.9;}
html[data-frame="aurora"][data-frame-color="custom"] .ecg-line::before{
  background:linear-gradient(120deg,var(--frame-c),var(--frame-c2),var(--frame-c),var(--frame-c2));
  background-size:400% 400%;opacity:.9;animation:czAurora 14s ease-in-out infinite alternate;}
@keyframes czAurora{from{background-position:0% 0%}to{background-position:100% 100%}}
.cz-fx-aurora::before{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);
  -webkit-mask:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 45%,#000 100%);mask:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 45%,#000 100%);}
html[data-frame-color="custom"] .cz-fx-aurora::before{background:linear-gradient(120deg,var(--frame-c),var(--frame-c2),var(--frame-c));}

/* SOLID (default since 2026-09-10) — the thin 4px ring. Rainbow = base rules; custom = one color. */
html[data-frame="solid"][data-frame-color="custom"] .ecg-line::before{background:var(--frame-c);opacity:.9;animation:none;}
.cz-fx-solid::before{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);}
html[data-frame-color="custom"] .cz-fx-solid::before{background:var(--frame-c);opacity:.9;}

/* COMET — a bright arc orbiting the screen (spinning disc). */
html[data-frame="comet"] .ecg-line::before{inset:auto;top:50%;left:50%;width:300vmax;height:300vmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0%,transparent 58%,color-mix(in srgb,var(--frame-c) 40%,transparent) 72%,var(--frame-c) 84%,#ffffff 89%,transparent 90%);
  opacity:1;animation:ecgSpin 8s linear infinite;}
html[data-frame="comet"][data-frame-color="rainbow"] .ecg-line::before{
  background:conic-gradient(from 0deg,transparent 0%,transparent 58%,rgba(239,68,68,.35) 66%,#ef4444 72%,#f59e0b 76%,#22c55e 80%,#06b6d4 84%,#8b5cf6 88%,#ffffff 89.5%,transparent 90%);}
.cz-fx-comet::before{inset:auto;top:50%;left:50%;width:300%;height:300%;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0%,transparent 58%,color-mix(in srgb,var(--frame-c) 40%,transparent) 72%,var(--frame-c) 84%,#ffffff 89%,transparent 90%);
  animation:ecgSpin 8s linear infinite;}
html[data-frame-color="rainbow"] .cz-fx-comet::before{
  background:conic-gradient(from 0deg,transparent 0%,transparent 58%,rgba(239,68,68,.35) 66%,#ef4444 72%,#f59e0b 76%,#22c55e 80%,#06b6d4 84%,#8b5cf6 88%,#ffffff 89.5%,transparent 90%);}

/* CIRCUIT — marching dashes. Rainbow = spectrum seen through a dash mask. */
html[data-frame="circuit"] .ecg-line::before{inset:auto;top:50%;left:50%;width:300vmax;height:300vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,var(--frame-c) 0deg 2.4deg,transparent 2.4deg 6deg);
  opacity:.85;animation:ecgSpin 120s linear infinite;}
html[data-frame="circuit"][data-frame-color="rainbow"] .ecg-line::before{
  background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);
  -webkit-mask:repeating-conic-gradient(from 0deg,#000 0deg 2.4deg,transparent 2.4deg 6deg);mask:repeating-conic-gradient(from 0deg,#000 0deg 2.4deg,transparent 2.4deg 6deg);}
.cz-fx-circuit::before{inset:auto;top:50%;left:50%;width:300%;height:300%;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,var(--frame-c) 0deg 6deg,transparent 6deg 14deg);
  animation:ecgSpin 60s linear infinite;}
html[data-frame-color="rainbow"] .cz-fx-circuit::before{
  background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444);
  -webkit-mask:repeating-conic-gradient(from 0deg,#000 0deg 6deg,transparent 6deg 14deg);mask:repeating-conic-gradient(from 0deg,#000 0deg 6deg,transparent 6deg 14deg);}

@media (prefers-reduced-motion:reduce){
  html[data-frame] .ecg-line::before,.cz-prev::before{animation:none!important;}
}

/* ── Institution tile backgrounds ──
   Target the institution tile in BOTH Library layouts via data-tile-id
   (never the hub's other tiles). --prio is re-pointed to the chosen
   color so the border + glow tint along with the background. The same
   rules style the panel previews (.cz-tile-*). */
.cz-tile-default{background:linear-gradient(180deg,color-mix(in srgb,#f59e0b 22%,transparent),color-mix(in srgb,#f59e0b 6%,transparent)),var(--bg-card);}

html:not([data-inst-tile="default"]) .lib-hub-tile[data-tile-id="institution-docs"]{--prio:var(--inst-tile-c);}

html[data-inst-tile="tint"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-tint{
  background:color-mix(in srgb,var(--inst-tile-c) 22%,var(--bg-card));}

html[data-inst-tile="gradient"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-gradient{
  background:linear-gradient(135deg,color-mix(in srgb,var(--inst-tile-c) 48%,var(--bg-card)),color-mix(in srgb,var(--inst-tile-c2) 10%,var(--bg-card)));}

html[data-inst-tile="dots"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-dots{
  background:radial-gradient(color-mix(in srgb,var(--inst-tile-c) 60%,transparent) 1.3px,transparent 1.5px) 0 0/12px 12px,
             color-mix(in srgb,var(--inst-tile-c) 9%,var(--bg-card));}

html[data-inst-tile="grid"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-grid{
  background:linear-gradient(color-mix(in srgb,var(--inst-tile-c) 32%,transparent) 1px,transparent 1px) 0 0/16px 16px,
             linear-gradient(90deg,color-mix(in srgb,var(--inst-tile-c) 32%,transparent) 1px,transparent 1px) 0 0/16px 16px,
             color-mix(in srgb,var(--inst-tile-c) 8%,var(--bg-card));}

html[data-inst-tile="stripes"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-stripes{
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--inst-tile-c) 26%,transparent) 0 6px,transparent 6px 16px),
             color-mix(in srgb,var(--inst-tile-c) 8%,var(--bg-card));}

html[data-inst-tile="chevron"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-chevron{
  background:linear-gradient(135deg,color-mix(in srgb,var(--inst-tile-c) 34%,transparent) 25%,transparent 25%) -10px 0/20px 20px,
             linear-gradient(225deg,color-mix(in srgb,var(--inst-tile-c) 34%,transparent) 25%,transparent 25%) -10px 0/20px 20px,
             linear-gradient(315deg,color-mix(in srgb,var(--inst-tile-c) 34%,transparent) 25%,transparent 25%) 0 0/20px 20px,
             linear-gradient(45deg,color-mix(in srgb,var(--inst-tile-c) 34%,transparent) 25%,transparent 25%) 0 0/20px 20px,
             color-mix(in srgb,var(--inst-tile-c) 7%,var(--bg-card));}

html[data-inst-tile="cubes"] .lib-hub-tile[data-tile-id="institution-docs"],.cz-tile-cubes{
  --cz-a:color-mix(in srgb,var(--inst-tile-c) 38%,transparent);
  --cz-b:color-mix(in srgb,var(--inst-tile-c2) 24%,transparent);
  background:
    linear-gradient(30deg,var(--cz-a) 12%,transparent 12.5%,transparent 87%,var(--cz-a) 87.5%,var(--cz-a)),
    linear-gradient(150deg,var(--cz-a) 12%,transparent 12.5%,transparent 87%,var(--cz-a) 87.5%,var(--cz-a)),
    linear-gradient(30deg,var(--cz-a) 12%,transparent 12.5%,transparent 87%,var(--cz-a) 87.5%,var(--cz-a)),
    linear-gradient(150deg,var(--cz-a) 12%,transparent 12.5%,transparent 87%,var(--cz-a) 87.5%,var(--cz-a)),
    linear-gradient(60deg,var(--cz-b) 25%,transparent 25.5%,transparent 75%,var(--cz-b) 75%,var(--cz-b)),
    linear-gradient(60deg,var(--cz-b) 25%,transparent 25.5%,transparent 75%,var(--cz-b) 75%,var(--cz-b)),
    color-mix(in srgb,var(--inst-tile-c) 7%,var(--bg-card));
  background-size:40px 70px;
  background-position:0 0,0 0,20px 35px,20px 35px,0 0,20px 35px;}

/* Keep the tile's text readable over every pattern: a soft plate behind
   the title/description only when a custom background is active. */
html:not([data-inst-tile="default"]) .lib-hub-tile[data-tile-id="institution-docs"] .lht-title,
html:not([data-inst-tile="default"]) .lib-hub-tile[data-tile-id="institution-docs"] .lht-desc{
  background:color-mix(in srgb,var(--bg-card) 72%,transparent);border-radius:6px;padding:.1rem .35rem;}

/* Faculty Center crumb (2026-09-02): the current-page pill is a real button
   there — it resets the Assignments tab to its two-tile hub. */
.lib-crumb-pill-reset{cursor:pointer;}
.lib-crumb-pill-reset:hover{border-color:var(--accent-cyan);color:var(--text-primary);}

/* ══════════════════════════════════════════════════════════════
   BRAND — Clinical Imprint (2026-09-02)
   ══════════════════════════════════════════════════════════════ */
.ld-hero .ci-logo{display:block;width:96px;height:96px;filter:drop-shadow(0 10px 26px rgba(139,92,246,.30));}
@media(max-width:620px){.ld-hero .ci-logo{width:76px;height:76px;}}
html[data-fc-theme="light"] .ci-logo .ci-logo-i{fill:#1a1a2e;}
.ld-slogan{font-style:italic;letter-spacing:.01em;}

/* ══════════════════════════════════════════════════════════════
   FACULTY CENTER — masthead redesign (2026-09-02). The four stat
   tiles are gone; the header is a quiet masthead with a one-line
   "pulse" of numbers, and the tabs are underline tabs.
   ══════════════════════════════════════════════════════════════ */
.fc-header.fc-header-main{gap:.7rem;padding:1.25rem 1.3rem 1rem;border-radius:18px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent-purple) 9%,var(--bg-card)),var(--bg-card) 70%);
  border:1px solid color-mix(in srgb,var(--accent-purple) 22%,var(--border));
  box-shadow:0 10px 30px rgba(0,0,0,.14);}
.fc-masthead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.fc-masthead-text{min-width:0;flex:1 1 420px;}
.fc-header-main .fc-eyebrow{font-size:.64rem;letter-spacing:.14em;color:color-mix(in srgb,var(--accent-purple) 80%,var(--text-secondary));}
.fc-header-main .fc-title{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:.2rem 0 0;}
.fc-title-sub{font-size:.8rem;color:var(--text-dim);margin-top:.15rem;}
.fc-header-main .fc-header-sub{margin-top:.55rem;max-width:64ch;font-size:.8rem;line-height:1.6;}
.fc-pulse{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .35rem;padding-top:.65rem;border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);}
.fc-pulse-item{display:inline-flex;align-items:baseline;gap:.35rem;padding:.2rem .45rem;border:none;background:transparent;border-radius:8px;
  color:var(--text-secondary);cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.76rem;transition:background .12s,color .12s;}
.fc-pulse-item:hover{background:color-mix(in srgb,var(--accent-purple) 10%,transparent);color:var(--text-primary);}
.fc-pulse-n{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums;}
.fc-pulse-zero .fc-pulse-n{color:var(--text-dim);}
.fc-pulse-warn .fc-pulse-n,.fc-pulse-warn .fc-pulse-l{color:var(--accent-amber);}
.fc-pulse-sep{color:var(--text-dim);opacity:.5;font-size:.9rem;}
/* Underline tabs */
/* flex:none — .ref-page-content is a column flex container, and an
   overflow:auto child gets min-height:0, so once the roster made the page
   taller than the viewport the bar shrank to its 1px border (2026-09-02). */
.fc-tab-bar{flex:none;justify-content:center;gap:.15rem;padding-bottom:0;margin:.35rem 0 1.1rem;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.fc-header.fc-header-main{flex:none;}
.fc-workflow{justify-content:center;}
.fc-tab-bar::-webkit-scrollbar{display:none;}
.fc-tab-btn{border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent;padding:.6rem .85rem .55rem;
  font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:600;letter-spacing:0;color:var(--text-secondary);white-space:nowrap;margin-bottom:-1px;}
.fc-tab-btn:hover{color:var(--text-primary);background:transparent;border-bottom-color:color-mix(in srgb,var(--accent-purple) 40%,transparent);}
.fc-tab-btn.active{background:transparent;color:var(--text-primary);border-bottom-color:var(--accent-purple);}
.fc-tab-btn.active .fc-tab-count{background:color-mix(in srgb,var(--accent-purple) 18%,transparent);color:var(--accent-purple);}
.fc-tab-btn.fc-tab-locked{background:transparent;border-radius:6px;}
@media(max-width:620px){
  .fc-tab-bar{justify-content:flex-start;}
  .fc-header.fc-header-main{padding:1rem .95rem .8rem;border-radius:14px;}
  .fc-header-main .fc-title{font-size:1.35rem;}
  .fc-pulse{gap:.1rem .2rem;}
  .fc-pulse-item{font-size:.7rem;padding:.15rem .3rem;}
}

/* ══════════════════════════════════════════════════════════════
   EXAMS — medical-school proposal page (clerkshipExams.js)
   ══════════════════════════════════════════════════════════════ */
.cx-hero{padding:.4rem 0 1.4rem;max-width:68ch;}
.cx-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#f97316;}
.cx-h{font-size:1.5rem;font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:.35rem 0 .5rem;color:var(--text-primary);text-wrap:balance;}
.cx-lede{font-size:.88rem;line-height:1.65;color:var(--text-secondary);margin:0;}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem;}
.cx-card{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem 1.25rem 1.1rem;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--cx-tone) 30%,var(--border));
  background:linear-gradient(180deg,color-mix(in srgb,var(--cx-tone) 8%,var(--bg-card)),var(--bg-card) 55%);}
.cx-card-head{display:flex;align-items:center;gap:.65rem;}
.cx-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:1.15rem;background:color-mix(in srgb,var(--cx-tone) 16%,transparent);}
.cx-title{margin:0;font-size:1rem;font-weight:700;color:var(--text-primary);line-height:1.25;}
.cx-body{margin:0;font-size:.84rem;line-height:1.7;color:var(--text-secondary);}
.cx-decide{margin:.15rem 0 0;padding:.6rem .75rem;border-radius:10px;font-size:.78rem;line-height:1.55;color:var(--text-primary);
  background:color-mix(in srgb,var(--cx-tone) 9%,transparent);border-left:3px solid var(--cx-tone);}
.cx-decide-lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cx-tone);margin-bottom:.2rem;}
.cx-foot{margin:1.4rem 0 0;font-size:.76rem;color:var(--text-dim);line-height:1.6;max-width:68ch;}
/* Exams roadmap page (2026-09-03): the "what is true today" list under the hero. */
.cx-today{margin:.9rem 0 0;padding:.7rem .9rem .7rem 1.6rem;border:1px dashed var(--border);border-radius:10px;color:var(--text-secondary);font-size:.82rem;line-height:1.6;max-width:68ch;}
.cx-today li{margin:.15rem 0;}

/* ══════════════════════════════════════════════════════════════
   LANDING TILE BORDERS + SECTION DIVIDERS (2026-09-03)
   ══════════════════════════════════════════════════════════════
   The five landing tiles (Clinical Simulation, My Assignments, Library,
   Daily flashcards, My notes) drew their 1px edge in --ld-line, which on
   the #09090b canvas (#1d1d22) and the #fafafa canvas (#e7e7ea) is so
   close to the background that the tiles read as loose text floating on
   the page. Same story for the hairlines flanking the "Quick Sim" and
   "Explore" labels — the two section boundaries were effectively
   invisible. Two dedicated tokens fix both without touching the rest of
   the --ld-line users (editor panel, default row, chips):
     --ld-card-line     tile edge at rest (hover still swaps to the
                        crimson halo rule above — unchanged)
     --ld-divider-line  the section hairlines; label lifted to match
   The Faculty Center tile keeps its own purple border. */
#landing{
  --ld-card-line:#3f3f48;
  --ld-divider-line:#55555f;
  --ld-divider-lbl:#b4b4bd;
}
html[data-fc-theme="light"] #landing{
  --ld-card-line:#c9c9d1;
  --ld-divider-line:#a3a3ad;
  --ld-divider-lbl:#5b5b66;
}
#landing .ld-card,
#landing .dd2,
#landing .pn2,
#landing .skel{border-color:var(--ld-card-line);}
/* A loading skeleton stays put on hover, but at the new visible edge. */
#landing .ld-card-loading:hover{border-color:var(--ld-card-line);}
#landing .ld-divider-line{height:1px;background:var(--ld-divider-line);}
#landing .ld-divider-lbl{color:var(--ld-divider-lbl);}

/* ── Note reader: "File to library" chooser (2026-09-03) ──
   Standalone notes (Custom::<discipline>) opened from the landing card
   get a 📂 File to library action. The AI proposes up to three library
   topics; the learner picks one or keeps the note standalone. */
.pnm-file{border-left:3px solid var(--accent-cyan);background:rgba(6,182,212,.07);border-radius:0 8px 8px 0;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.5rem;}
.pnm-file-sub{font-size:.76rem;line-height:1.5;color:var(--text-secondary);}
.pnm-file-loading{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--text-secondary);}
.pnm-spin{width:14px;height:14px;border-radius:999px;border:2px solid var(--border);border-top-color:var(--accent-cyan);animation:pnm-spin .8s linear infinite;flex:0 0 auto;}
@keyframes pnm-spin{to{transform:rotate(360deg);}}
.pnm-file-opts{display:flex;flex-direction:column;gap:.4rem;}
.pnm-file-opt{appearance:none;display:flex;flex-direction:column;gap:.15rem;text-align:left;width:100%;padding:.55rem .7rem;border-radius:10px;cursor:pointer;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);font-family:'DM Sans',sans-serif;
  transition:border-color .15s,background .15s,transform .15s;}
.pnm-file-opt:hover:not(:disabled){border-color:var(--accent-cyan);background:rgba(6,182,212,.10);transform:translateY(-1px);}
.pnm-file-opt:disabled{opacity:.5;cursor:default;}
.pnm-file-opt-num{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.06em;color:var(--accent-cyan);margin-right:.4rem;}
.pnm-file-opt-crumb{font-size:.8rem;font-weight:600;color:var(--text-primary);}
.pnm-file-opt-why{font-size:.72rem;line-height:1.45;color:var(--text-dim);}
.pnm-file-acts{display:flex;justify-content:flex-end;gap:.4rem;flex-wrap:wrap;margin-top:.15rem;}
.pnm-file-err{font-size:.76rem;line-height:1.5;color:var(--accent-red,#ef4444);}
.pnm-btn-file{border-color:color-mix(in srgb,var(--accent-purple) 55%,transparent);color:var(--accent-purple);background:rgba(168,85,247,.07);}
.pnm-btn-file:hover:not(:disabled){border-color:var(--accent-purple);color:var(--accent-purple);background:rgba(168,85,247,.14);}
@media(prefers-reduced-motion:reduce){.pnm-spin{animation:none;}.pnm-file-opt:hover:not(:disabled){transform:none;}}

/* ── Collapsible utility rail (2026-09-03) ──
   The rail (Report a bug · Tutorial · dev switch) can be folded into a
   26px chevron nub so it stops covering the corner of the page — the
   debrief panel's Submit button during a simulation, most of all. The
   toggle is always the rightmost item (flex order), sits quietly at low
   opacity, and the collapsed state hides every other child of the rail,
   including the dev-switch menu. */
.util-rail-toggle{order:99;width:26px;height:26px;padding:0;border-radius:999px;
  border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);
  font-family:'DM Sans',sans-serif;font-size:1rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  opacity:.6;box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:opacity .15s,color .15s,border-color .15s;}
.util-rail-toggle:hover,.util-rail-toggle:focus-visible{opacity:1;color:var(--text-primary);border-color:var(--border-light);outline:none;}
/* The Customize chip is exempt from the collapse — on phones the rail is
   the ONLY place it lives (customize.js moves it there at ≤620px), so a
   collapsed rail was silently removing Customize from the landing page. */
.util-rail.util-rail-collapsed>*:not(.util-rail-toggle):not(.cz-btn-rail){display:none!important;}
.util-rail.util-rail-collapsed .util-rail-toggle{opacity:.45;}
.util-rail.util-rail-collapsed .util-rail-toggle:hover{opacity:1;}

/* ── Transcript sharing (2026-09-04) ──
   Send dialog + the "Shared Transcripts" tile on My Assignments.
   Modal chrome mirrors the bug-report dialog so the two read as one
   family of quiet utility surfaces. */
.trs-overlay{position:fixed;inset:0;z-index:10600;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto;}
.trs-modal{position:relative;width:min(480px,100%);max-height:calc(100vh - 2rem);overflow-y:auto;
  padding:1.3rem 1.4rem;border-radius:16px;border:1px solid var(--border);
  background:var(--bg-card);box-shadow:0 24px 70px rgba(0,0,0,.45);}
.trs-modal h3{margin:0 0 .3rem;font-size:1rem;color:var(--text-primary);}
.trs-close{position:absolute;top:.7rem;right:.7rem;background:none;border:none;
  color:var(--text-dim);font-size:.95rem;cursor:pointer;padding:.2rem .4rem;}
.trs-close:hover{color:var(--text-primary);}
.trs-sub{margin:0 0 .8rem;font-size:.78rem;line-height:1.5;color:var(--text-secondary);}
.trs-label{display:block;margin:.6rem 0 .25rem;font-size:.68rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim);}
.trs-select,.trs-note{width:100%;box-sizing:border-box;padding:.55rem .65rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);
  font-family:'DM Sans',sans-serif;font-size:.82rem;outline:none;}
.trs-select:focus,.trs-note:focus{border-color:var(--accent-cyan);}
.trs-note{resize:vertical;line-height:1.45;}
.trs-foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;}
.trs-cancel{padding:.5rem .9rem;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;
  font-size:.78rem;cursor:pointer;}
.trs-send{padding:.5rem 1.1rem;border:none;border-radius:10px;background:var(--accent-blue);
  color:#fff;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;}
.trs-send:disabled{opacity:.5;cursor:default;}

.si-share-row{display:flex;justify-content:flex-end;margin:.1rem 0 .35rem;}
.si-share-btn{padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border);
  background:var(--bg-secondary);color:var(--text-secondary);font-family:'DM Sans',sans-serif;
  font-size:.68rem;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s;}
.si-share-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);}

.trs-inbox{margin:0 0 1rem;padding:.9rem 1rem;border-radius:14px;
  border:1.5px solid color-mix(in srgb,var(--accent-cyan) 45%,var(--border));
  background:color-mix(in srgb,var(--accent-cyan) 6%,var(--bg-card));}
.trs-inbox-hdr{font-size:.9rem;font-weight:700;color:var(--text-primary);
  display:flex;align-items:center;gap:.5rem;}
.trs-inbox-n{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;
  padding:.1rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--accent-cyan) 18%,transparent);
  color:var(--accent-cyan);}
.trs-inbox-sub{margin:.25rem 0 .6rem;font-size:.72rem;color:var(--text-dim);}
.trs-si.trs-unread .si-h{border-left:3px solid var(--accent-cyan);}

/* Scores & Data → transcripts tile (links to Recent Simulations, which
   holds the 3 most recent full transcripts + the send action). */
.sx-transcripts-tile{display:flex;align-items:center;gap:.8rem;width:100%;box-sizing:border-box;
  margin:0 0 .9rem;padding:.8rem 1rem;border-radius:14px;text-align:left;cursor:pointer;
  border:1.5px solid color-mix(in srgb,var(--accent-blue) 45%,var(--border));
  background:color-mix(in srgb,var(--accent-blue) 7%,var(--bg-card));
  font-family:'DM Sans',sans-serif;transition:border-color .15s,background .15s,transform .15s;}
.sx-transcripts-tile:hover{border-color:var(--accent-blue);transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent-blue) 12%,var(--bg-card));}
.sx-tt-icon{font-size:1.3rem;flex:0 0 auto;}
.sx-tt-copy{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.sx-tt-title{font-size:.88rem;font-weight:700;color:var(--text-primary);}
.sx-tt-sub{font-size:.72rem;line-height:1.45;color:var(--text-secondary);}
.sx-tt-arrow{margin-left:auto;color:var(--accent-blue);font-weight:700;}

/* ── Sim resume banner (2026-09-04) ──
   Offered after a reload interrupted an active case (see the SIM RESUME
   block at the end of simulation.js). Fixed to the bottom so it reads as
   a continuation prompt, not a blocking modal. */
#sim-resume-banner{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 14px);z-index:9000;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
  max-width:min(560px,calc(100vw - 24px));padding:.6rem .9rem;border-radius:14px;
  background:var(--bg-card);border:1.5px solid var(--accent-blue);
  box-shadow:0 8px 30px rgba(0,0,0,.4);}
#sim-resume-banner .srb-text{font-size:.78rem;color:var(--text-primary);font-weight:600;}
#sim-resume-banner .srb-resume{padding:.45rem .9rem;border:none;border-radius:10px;
  background:var(--accent-blue);color:#fff;font-family:'DM Sans',sans-serif;
  font-size:.78rem;font-weight:700;cursor:pointer;}
#sim-resume-banner .srb-discard{padding:.45rem .7rem;border:1px solid var(--border);
  border-radius:10px;background:transparent;color:var(--text-dim);
  font-family:'DM Sans',sans-serif;font-size:.74rem;cursor:pointer;}
#sim-resume-banner .srb-discard:hover{color:var(--accent-red);border-color:var(--accent-red);}

/* ── Faculty Center tile: purple wash (2026-09-03) ──
   The purple border alone left the tile reading like its neighbours at a
   glance. A light purple background tint (stronger on hover) makes the
   leadership surface unmistakable without adding a second accent hue —
   it is the same purple the tile's border and title already use. */
#landing .ld-card-fc{
  background:color-mix(in srgb,var(--accent-purple) 16%,var(--ld-panel));
}
#landing .ld-card-fc:hover{
  background:color-mix(in srgb,var(--accent-purple) 24%,var(--ld-panel));
}
html[data-fc-theme="light"] #landing .ld-card-fc{
  background:color-mix(in srgb,var(--accent-purple) 11%,#ffffff);
}
html[data-fc-theme="light"] #landing .ld-card-fc:hover{
  background:color-mix(in srgb,var(--accent-purple) 17%,#ffffff);
}

/* ══════════════════════════════════════════════════════════════
   NOTE CAPTURE: file now / save for later + unfiled reminders (2026-09-03)
   ══════════════════════════════════════════════════════════════
   • Add-note hub: the AI now proposes up to three chapters (.lib-addnote-opt)
     and "Save for later" keeps a note UNFILED (amber, .lib-addnote-later).
   • Anything holding unfiled notes pulses amber until they are filed:
     the landing My notes card (.pn2-unfiled), the Personal dashboard tile
     (.lib-feature-unfiled), the My Notes hub tile (.lib-note-disc-tile-unfiled)
     and the File-to-library button in the note reader (.pnm-btn-pulse).
   • Tour: the two note-capture steps are emphasised in green
     (.tour-card-emph / .tour-spot-emph) with spaced points (.tour-pt). */
@keyframes unfiledPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.5);}
  60%{box-shadow:0 0 0 8px rgba(245,158,11,0);}
}
/* Add-note hub */
.lib-addnote-later{background:transparent!important;border-color:var(--accent-amber)!important;color:var(--accent-amber)!important;}
.lib-addnote-later:hover{background:rgba(245,158,11,.12)!important;}
.lib-addnote-opts{display:flex;flex-direction:column;gap:.4rem;margin:.45rem 0 .6rem;}
.lib-addnote-opt{display:flex;align-items:flex-start;gap:.6rem;width:100%;text-align:left;padding:.55rem .7rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-family:inherit;
  transition:border-color .15s,background .15s,transform .15s;}
.lib-addnote-opt:hover{border-color:var(--accent-purple);background:rgba(168,85,247,.10);transform:translateY(-1px);}
.lib-addnote-opt-num{flex:0 0 22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;color:var(--accent-purple);background:rgba(168,85,247,.16);margin-top:.05rem;}
.lib-addnote-opt-main{display:flex;flex-direction:column;gap:.15rem;font-size:.78rem;line-height:1.35;}
.lib-addnote-opt-why{font-size:.68rem;color:var(--text-dim);line-height:1.4;}
/* Landing My notes card */
#landing .pn2.pn2-unfiled{border-color:color-mix(in srgb,var(--accent-amber) 70%,var(--ld-card-line));animation:unfiledPulse 2.2s ease-out infinite;}
.pn2-unfiled-badge{margin-left:.35rem;padding:.14rem .55rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent-amber) 65%,transparent);
  background:rgba(245,158,11,.12);color:var(--accent-amber);font-family:inherit;font-size:.68rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.pn2-unfiled-badge:hover{background:rgba(245,158,11,.22);}
#landing .pn2-hint strong{color:var(--ld-text);font-weight:600;}
/* Note reader */
.pnm-unfiled-tag{color:var(--accent-amber);font-weight:700;}
.pnm-btn-pulse{border-color:var(--accent-amber)!important;color:var(--accent-amber)!important;background:rgba(245,158,11,.08)!important;animation:unfiledPulse 2.2s ease-out infinite;}
/* Personal dashboard tile + My Notes hub */
.lib-feature-nt.lib-feature-unfiled{border-color:rgba(245,158,11,.75);animation:unfiledPulse 2.2s ease-out infinite;}
.lib-badge-unfiled{color:var(--accent-amber);font-weight:700;}
.lib-note-disc-tile-unfiled{grid-column:1 / -1;flex-direction:row;align-items:center;gap:.55rem;
  border-color:rgba(245,158,11,.75);background:rgba(245,158,11,.06);animation:unfiledPulse 2.2s ease-out infinite;}
.lib-note-disc-tile-unfiled .lib-note-disc-name{color:var(--accent-amber);}
.lib-note-disc-tile-unfiled .lib-note-disc-count{position:static;margin-left:auto;}
.lib-notes-unfiledhint{border-left:3px solid var(--accent-amber);}
/* Tour emphasis */
#tour-card.tour-card-emph{border-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 7%,var(--bg-card));
  box-shadow:0 0 0 3px rgba(34,197,94,.18),0 18px 50px rgba(0,0,0,.45);width:min(560px,calc(100vw - 2rem));}
.tour-card-emph .tour-card-title{color:var(--accent-green);}
.tour-card-emph .tour-card-pos{color:var(--accent-green);opacity:.8;}
.tour-card-emph .tour-btn-next{border-color:var(--accent-green);background:rgba(34,197,94,.14);color:var(--accent-green);}
.tour-card-emph .tour-btn:hover:not(:disabled){border-color:var(--accent-green);color:var(--accent-green);}
.tour-spot.tour-spot-emph{box-shadow:0 0 0 4px var(--accent-green),0 0 36px 10px rgba(34,197,94,.45)!important;}
.tour-lead{font-weight:600;color:var(--text-primary);margin-bottom:.35rem;line-height:1.5;}
.tour-pt{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;border-top:1px solid var(--border);line-height:1.5;}
.tour-pt-ic{flex:0 0 auto;font-size:1.05rem;line-height:1.3;}
.tour-pt b{color:var(--text-primary);font-weight:700;}
.tour-close{margin-top:.15rem;padding-top:.45rem;border-top:1px solid var(--border);color:var(--text-dim);font-size:.74rem;line-height:1.5;}
@media(prefers-reduced-motion:reduce){
  #landing .pn2.pn2-unfiled,.pnm-btn-pulse,.lib-feature-nt.lib-feature-unfiled,.lib-note-disc-tile-unfiled{animation:none;}
}

/* ══════════════════════════════════════════════════════════════════════
   CROSS-DEVICE COMPATIBILITY LAYER — appended 2026-09-04
   ──────────────────────────────────────────────────────────────────────
   Every rule below fixes something that is invisible on an up-to-date
   Mac or a current iPhone in Chrome DevTools device-mode, and visible
   on the phones and hospital workstations everyone else is using.
   Appended as one block (rather than edited inline) so it is trivial to
   review, and last in the cascade so it wins without !important where
   possible.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. iOS force-zoom on input focus ─────────────────────────────────
   iOS Safari zooms the whole viewport whenever a focused input has a
   computed font-size under 16px. Thirty-four input rules in this file
   are under 16px and none is at or above it — including .ci, the main
   simulation chat composer at 13.4px. So the page jumped and zoomed on
   EVERY turn of EVERY simulation, sliding the header and side panels
   off screen. Scoped to coarse pointers so the desktop type scale is
   untouched. */
@media (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input:not([type]), textarea, select,
  .ci, .cpa, .text-input,
  .lib-search-input, .lib-chat-input textarea, .proc-chat-input textarea,
  .orders-custom-input, .consult-reason-input, .rsi-dose, .rsi-row select {
    font-size: 16px !important;
  }
}

/* ── 2. Software keyboard covering the chat composer ──────────────────
   .page is a fixed-height flex column with the composer pinned at the
   bottom — the layout iOS handles worst. When the keyboard opens, iOS
   does not shrink the layout viewport, so the composer ends up behind
   the keyboard with nothing to scroll. --app-vh is driven from
   window.visualViewport by the script in index.html; the 100dvh value
   is the fallback for browsers without it. */
:root { --app-vh: 100dvh; }
.page { height: 100vh; height: var(--app-vh, 100dvh); }

/* ── 3. calc(100vh - …) has no dvh fallback in four places ────────────
   On iOS, 100vh is the LARGE viewport (address bar hidden), so a box
   sized calc(100vh - 2rem) is taller than the visible area while the
   address bar is showing. .trs-modal is the transcript-share dialog:
   its confirm/cancel row fell below the fold and, being max-height
   constrained rather than page-scrolled, could not be reached. */
.at-section-rail { max-height: calc(100dvh - 1.5rem); }
.phys-rail       { max-height: calc(100dvh - 190px); }
.trs-modal       { max-height: calc(100dvh - 2rem); }

/* ── 4. Hover-only reveals are unreachable on touch ───────────────────
   493 :hover rules in this file, none guarded by (hover: hover). On
   touch, tapping applies :hover and LEAVES it applied. Most of that is
   cosmetic, but six rules hide actual functionality behind hover.
   .lib-fc-open-hint is the worst: the "open" hint on a library
   flashcard is opacity:0 until hover, so on a phone the card gives no
   sign it is tappable at all. */
@media (hover: none) {
  .lib-fc-open-hint,
  .fc-header-stat-cta,
  .ccp-edit,
  .util-rail-toggle,
  #disclaimer-restore-pill { opacity: 1 !important; }
}

/* ── 5. Windows High Contrast / forced-colors ─────────────────────────
   Common on hospital-managed machines where accessibility settings are
   enforced by policy. forced-colors REMOVES box-shadow — and this app
   draws nearly every boundary and every focus ring with box-shadow and
   color-mix() tints rather than border/outline, so the UI flattens into
   undifferentiated blocks with no visible focus indicator. */
@media (forced-colors: active) {
  .card, .panel, .lib-tile, .home-tile, [role="button"], button {
    border: 1px solid CanvasText;
  }
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ── 6. Focus rings that vanish on pinned enterprise browsers ─────────
   Every focus ring in this file is `box-shadow: 0 0 0 3px color-mix(…)`.
   color-mix() needs Chrome/Edge 111+, Safari 16.2+, Firefox 113+ — all
   post-March-2023 — and an unsupported value invalidates the WHOLE
   declaration, so on a hospital workstation running a pinned Chrome or
   Edge channel keyboard focus becomes completely invisible. A plain
   outline needs no fallback and also survives forced-colors mode. */
:focus-visible {
  outline: 2px solid var(--accent-cyan, #22d3ee);
  outline-offset: 2px;
}

/* ── 7. Printing from any page other than the chat produced a blank
   sheet (`body > *:not(#chat){display:none}`), and printing the
   transcript in dark mode burned a cartridge on a #0a0e17 background. */
@media print {
  :root {
    --bg-primary: #fff; --bg-secondary: #fff; --bg-card: #fff;
    --bg-card-nested: #fff; --text-primary: #000; --text-secondary: #222;
    --text-dim: #444; --border: #bbb;
  }
  body { background: #fff !important; color: #000 !important; }
  .ecg-line, .util-rail, .home-cta-bar, .global-customize-btn { display: none !important; }
}

/* ── 8. The 300vmax animated masked backdrop ──────────────────────────
   .ecg-line::before is a 300vmax conic-gradient disc with
   will-change:transform, spinning at 60fps forever, on every page,
   inside a parent using mask-composite:exclude (which forces an
   off-screen render target composited every frame). On a 390x844 phone
   at DPR 3 that layer is ~57 megapixels. It pins a core, heats the
   device, and iOS Safari reaps the tab under memory pressure — which
   presents to the user as "the app randomly reloaded and I lost my
   case", and never happens on a desktop GPU. Static on touch/small
   screens; the desktop animation is untouched. */
@media (max-width: 900px), (pointer: coarse) {
  /* 2026-09-08: the Rainbow/Solid/Aurora looks no longer use the disc, so
     only Comet and Circuit still need to be flattened and frozen. The
     angle-animated spectrum is paused off the landing page (rule 8b). */
  html[data-frame="comet"] .ecg-line::before,
  html[data-frame="circuit"] .ecg-line::before {
    animation: none !important;
    will-change: auto !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    transform: none !important;
  }
  body:not(.page-landing) .ecg-line::before { animation: none !important; }
}

/* ── 8b. Landing page keeps the spectrum moving on phones ─────────────
   Rule 8 pauses the angle animation off the landing page (a case in
   progress must never be lost to a reaped tab). The landing page has
   nothing to lose and is where the frame is meant to be seen, so the
   Rainbow sweep runs there — as a plain repaint in coarse steps, not a
   transform layer. Comet/Circuit stay static on touch (rule 8). */
@media (max-width: 900px), (pointer: coarse) {
  html[data-frame-color="rainbow"]:not([data-frame="comet"]):not([data-frame="circuit"]) body.page-landing .ecg-line::before {
    animation: ecgTurn 14s steps(168) infinite !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-landing .ecg-line::before { animation: none !important; }
}

/* ── Phone notice (landingTour.js, 2026-09-08) — one-time bottom card ── */
#mobile-notice{position:fixed;left:0;right:0;bottom:0;z-index:10850;padding:0 .75rem calc(.75rem + env(safe-area-inset-bottom,0px));pointer-events:none;
  opacity:0;transform:translateY(16px);transition:opacity .22s ease,transform .22s ease;}
#mobile-notice.mobile-notice-in{opacity:1;transform:none;}
.mobile-notice-card{pointer-events:auto;display:flex;align-items:flex-start;gap:.65rem;max-width:560px;margin:0 auto;
  background:var(--bg-card);border:1.5px solid var(--accent-cyan);border-radius:14px;padding:.8rem .9rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);}
.mobile-notice-icon{font-size:1.35rem;line-height:1;flex:0 0 auto;margin-top:.1rem;}
.mobile-notice-text{flex:1 1 auto;min-width:0;}
.mobile-notice-title{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.82rem;color:var(--text-primary);margin-bottom:.2rem;}
.mobile-notice-body{font-size:.76rem;line-height:1.5;color:var(--text-secondary);}
.mobile-notice-btn{flex:0 0 auto;align-self:center;border:1px solid var(--accent-cyan);background:transparent;color:var(--accent-cyan);
  border-radius:999px;padding:.4rem .8rem;font-size:.74rem;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;min-height:36px;}
.mobile-notice-btn:hover{background:rgba(6,182,212,.12);}


/* ══════════════════════════════════════════════════════════════
   SIM UI ROUND (2026-09-10): desktop display controls in the rail,
   disclaimer link, debrief quick-ask chips, orders panel legibility.
   ══════════════════════════════════════════════════════════════ */

/* Theme + border pills for the sim on desktop. Hidden everywhere else and
   on phones (the floating circles cover that). They collapse with the rail's
   ‹ › toggle exactly like Report a bug. */
.rail-sim-pill{display:none;}
@media(min-width:601px){
  body.page-chat .rail-sim-pill{display:inline-flex;align-items:center;gap:.3rem;}
  body.page-chat .util-rail{gap:.45rem;}
}

/* "See disclaimer for more information." under the chat input. */
.phi-disc-link{color:inherit;text-decoration:underline dotted;text-underline-offset:2px;cursor:pointer;}
.phi-disc-link:hover{color:var(--accent-amber);}

/* Debrief panel: one-tap common questions, shown only while a highlighted
   excerpt is waiting. Pure DOM — nothing is sent until the learner adds it. */
.qs-quick{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;padding:.4rem .6rem .2rem;
  border-top:1px solid rgba(245,158,11,.2);background:rgba(245,158,11,.04);}
.qs-quick-lbl{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin-right:.1rem;}
.qs-qc{padding:.22rem .55rem;border-radius:999px;border:1px solid rgba(245,158,11,.45);background:rgba(245,158,11,.08);
  color:var(--accent-amber);font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:600;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;}
.qs-qc:hover,.qs-qc:focus-visible{background:var(--accent-amber);color:var(--bg-primary);border-color:var(--accent-amber);outline:none;}

/* ── Orders panel: colour-coded sections ──
   Blue = pick orders (header, tabs, search), cyan = category list,
   amber = your panel orders, violet = custom order, cyan = actions.
   Each section gets a 2px tinted top edge and a faint wash so the eye can
   find the boundaries without reading. */
.orders-hdr{border-bottom:2px solid var(--accent-blue);background:rgba(59,130,246,.06);}
.orders-tabs{background:rgba(59,130,246,.04);border-bottom:2px solid rgba(59,130,246,.45);}
.orders-tab.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue);box-shadow:0 2px 8px rgba(59,130,246,.35);}
.orders-tab.active[style*="accent-amber"]{background:var(--accent-amber);border-color:var(--accent-amber);color:#1a1a2e!important;}
.order-bulk{border-bottom:1px dashed rgba(6,182,212,.35);}
.order-subcat-hdr{border-left:3px solid var(--accent-cyan);border-bottom:1px solid rgba(6,182,212,.25);padding-left:.5rem;
  background:rgba(6,182,212,.05);border-radius:0 5px 5px 0;margin-top:.3rem;}
.order-subcat-hdr.collapsed{border-left-color:var(--border-light);background:transparent;}
.order-subcat-body{padding-left:.35rem;border-left:1px solid rgba(6,182,212,.2);margin-left:1px;}
.orders-tray{border-top:2px solid var(--accent-amber);background:rgba(245,158,11,.05);}
.ot-title{color:var(--accent-amber);}
.ot-count{background:var(--accent-amber);color:#1a1a2e;}
.orders-tray.ot-is-empty .ot-count{background:var(--border);color:var(--text-dim);}
.ot-min-btn:hover{border-color:var(--accent-amber);color:var(--accent-amber);background:rgba(245,158,11,.1);}
.orders-custom{border-top:2px solid rgba(139,92,246,.6);background:rgba(139,92,246,.05);}
.orders-custom-input:focus{border-color:#8b5cf6;}
.orders-custom-add{background:#8b5cf6;}
.orders-custom-add:hover{background:#7c3aed;}
.orders-footer{border-top:2px solid rgba(6,182,212,.5);background:rgba(6,182,212,.03);}

/* The discoverability tip is collapsible (state remembered per browser).
   Minimised it shrinks to a right-aligned "💡 Tip" chip. */
.orders-tip{position:relative;display:flex;align-items:flex-start;gap:.4rem;border-color:rgba(6,182,212,.4);border-left:3px solid var(--accent-cyan);}
.orders-tip-body{flex:1;}
.orders-tip-toggle{flex-shrink:0;padding:.12rem .4rem;border-radius:999px;border:1px solid rgba(6,182,212,.4);background:transparent;
  color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.58rem;font-weight:700;cursor:pointer;line-height:1.2;white-space:nowrap;}
.orders-tip-toggle:hover{background:rgba(6,182,212,.12);}
.orders-tip.tip-min{background:transparent;border:none;padding:0 0 .1rem;justify-content:center;margin-bottom:.25rem;}
.orders-tip.tip-min .orders-tip-body{display:none;}


/* ══════════════════════════════════════════════════════════════
   GRADE EDITS (phase 47, 2026-09-10) — My Scores rows + faculty transcript
   ══════════════════════════════════════════════════════════════ */
.shi-right{display:flex;align-items:center;gap:.4rem;flex-shrink:0;}
.score-edited-chip{font-family:'JetBrains Mono',monospace;font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.1rem .4rem;border-radius:999px;border:1px solid rgba(245,158,11,.5);color:var(--accent-amber);background:rgba(245,158,11,.1);vertical-align:middle;}
.shi-edit-btn{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-size:.8rem;line-height:1;padding:0;}
.shi-edit-btn:hover,.shi-edit-btn:focus-visible{border-color:var(--accent-amber);color:var(--accent-amber);outline:none;}
.fc-score-orig{font-size:.7rem;color:var(--text-dim);margin-left:.35rem;font-weight:500;text-decoration:line-through;}
.fc-score-edit-meta{font-size:.62rem;color:var(--text-dim);margin-top:.2rem;line-height:1.3;}
.fc-edit-grade-btn{margin-top:.4rem;padding:.25rem .6rem;border-radius:6px;border:1px solid var(--accent-amber);background:rgba(245,158,11,.08);
  color:var(--accent-amber);font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:700;cursor:pointer;}
.fc-edit-grade-btn:hover{background:rgba(245,158,11,.18);}


/* ══════════════════════════════════════════════════════════════
   RECENT SIMULATIONS (2026-09-10 redesign)
   ══════════════════════════════════════════════════════════════ */
/* The bug behind the "sliver rows": .si sets overflow:hidden, which lets a
   flex item shrink below its content inside the page's column flex
   container — so every card beyond the open one was squashed to a few
   pixels. Cards must never shrink. */
.si{flex:0 0 auto;}
.si-list{width:100%;max-width:680px;display:flex;flex-direction:column;gap:.55rem;flex:0 0 auto;}
.si-group-hd{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin:.6rem 0 .1rem;padding:0 .15rem;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-cyan);}
.si-group-hd + .si-group-hd{margin-top:1rem;}
.si-group-sub{font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-dim);}
.si-h{gap:.6rem;}
.si-m{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;}
.si-m span{margin-right:0;}
.si-date{font-weight:600;color:var(--text-primary);}
.si-date .si-time{color:var(--text-dim);font-weight:500;}
.si-tag{font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.12rem .45rem;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);}
.si-tag-tx{border-color:rgba(6,182,212,.5);color:var(--accent-cyan);background:rgba(6,182,212,.08);}
.si-h-static{cursor:default;}
.si-h-static:hover{background:transparent;}
.si-nontx{border-style:dashed;}
.si-static{padding:0 .85rem .7rem;}
.si-static .si-sum{padding-top:.1rem;}
.si-sum-none{font-style:italic;color:var(--text-dim);}
/* The transcript panel: tall enough to actually read a case. */
.si-b{max-height:min(78vh,1100px);padding:.85rem .9rem 1rem;}
.si-b .si-sum{margin-bottom:.6rem;padding:.55rem .7rem;border-radius:8px;background:var(--bg-card-nested,var(--bg-secondary));border-left:3px solid var(--accent-amber);}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION TRAIL (2026-09-10) — ← / → arrows + glowing current crumb
   ══════════════════════════════════════════════════════════════ */
.fwd-btn{width:30px;height:30px;font-size:.95rem;padding:0;}
.fwd-btn:hover{background:var(--bg-card);}
.back-btn:disabled,.fwd-btn:disabled,.back-btn.nav-disabled,.fwd-btn.nav-disabled{opacity:.3;cursor:default;background:none;}
.crumb-bar .crumb-current{
  color:var(--text-primary);cursor:default;border-color:var(--accent-cyan);
  box-shadow:0 0 0 1px var(--accent-cyan),0 0 12px color-mix(in srgb,var(--accent-cyan) 55%,transparent);
  animation:crumbGlow 2.6s ease-in-out infinite;}
.crumb-bar button.crumb-current:hover{background:var(--bg-card);color:var(--text-primary);}
.crumb-bar .crumb-home.crumb-current{border-color:var(--accent-purple);
  box-shadow:0 0 0 1px var(--accent-purple),0 0 12px color-mix(in srgb,var(--accent-purple) 55%,transparent);}
@keyframes crumbGlow{50%{box-shadow:0 0 0 1px var(--accent-cyan),0 0 4px color-mix(in srgb,var(--accent-cyan) 30%,transparent);}}
.crumb-bar .crumb-ahead{opacity:.55;border-style:dashed;}
.crumb-bar .crumb-ahead:hover{opacity:1;}
/* With a trail in the header, the page's own <h2> only repeated the glowing
   current crumb. Visually hidden, still present for assistive tech. */
.page-header.has-trail>h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@media(max-width:720px){
  .crumb-bar .crumb-ahead{display:none!important;}
}
@media(prefers-reduced-motion:reduce){.crumb-bar .crumb-current{animation:none;}}

/* ═══════════════════════════════════════════════════════════════
   LIBRARY SIDEBAR v2 (2026-09-11, revised 2026-09-11c) — "command rail"
   Supabase-style behaviour on desktop: the collapsed state is an 86px
   icon rail that expands to full width when the pointer rests on it (or
   a link inside it receives keyboard focus). There is no edge arrow any
   more: the ☰ tile at the top of the rail is the "pin open" button, and
   the ‹ tab on a pinned-open sidebar collapses it back to the rail.
   Phones keep the off-canvas drawer and its own hamburger.
   --sb-rail / --sb-full live on :root because the page padding and the
   disclaimer pill read them from outside the sidebar.
   ═══════════════════════════════════════════════════════════════ */
:root{--sb-rail:86px;--sb-full:232px;}
.lib-sidebar{
  --text-secondary:#c7d2fe;
  --text-dim:#8b9ccc;
  --text:#f1f5ff;
  --text-primary:#f1f5ff;
  --border:rgba(99,102,241,.28);
  --bg-input:rgba(99,102,241,.16);
  --bg-secondary:rgba(99,102,241,.16);
  background:linear-gradient(180deg,#0b1226 0%,#111b3d 48%,#0a142c 100%);
  border-right:1px solid rgba(6,182,212,.35);
  box-shadow:inset -1px 0 0 rgba(6,182,212,.18),4px 0 28px rgba(6,182,212,.10);
  color:var(--text-secondary);
  scrollbar-color:rgba(99,102,241,.35) transparent;
  transition:transform .22s ease,width .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s;
}
.lib-sidebar::before{
  content:'';position:sticky;top:0;display:block;height:3px;flex:0 0 3px;
  background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple),var(--accent-cyan));
  background-size:200% 100%;opacity:.9;z-index:1;
}
.lib-sidebar::-webkit-scrollbar-thumb{background:rgba(99,102,241,.35);}
.lib-sidebar .lib-sidebar-header{border-bottom:1px solid rgba(99,102,241,.22);}
.lib-sidebar .lib-sidebar-header-title{color:var(--accent-cyan);letter-spacing:.14em;text-shadow:0 0 12px rgba(6,182,212,.45);}
/* Pin button (rail only, 2026-09-11j): rendered as an ordinary sidebar row —
   📌 sits in the icon column and "Pin sidebar open" fades in with the other
   labels, so nothing pops when the rail glides. Hidden when the sidebar is
   pinned open (the ‹ tab collapses it again) and on phones. */
.lib-sidebar-pin{display:none;border-color:rgba(6,182,212,.35);background:rgba(6,182,212,.10);color:#a5f3fc;font-weight:600;}
.lib-sidebar-pin:hover{background:rgba(6,182,212,.22);color:#fff;border-color:rgba(6,182,212,.6);}
.lib-sidebar .lib-sidebar-link.active{
  background:rgba(6,182,212,.14);border-color:rgba(6,182,212,.55);
  box-shadow:0 0 0 1px rgba(6,182,212,.12) inset,0 0 18px rgba(6,182,212,.18);
}
.lib-sidebar .lib-sidebar-link:hover{background:rgba(99,102,241,.18);color:#fff;}
.lib-sidebar .lib-sidebar-group-body{border-left-color:rgba(99,102,241,.35);}
.lib-sidebar .lib-sidebar-subhdr{color:#8b9ccc;}
.lib-sidebar .lib-sidebar-link-sim{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.38);color:#fca5a5;}
.lib-sidebar .lib-sidebar-link-sim:hover{background:rgba(239,68,68,.22);color:#fecaca;}
.lib-sidebar .lib-sidebar-link-cards{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.38);color:#6ee7b7;}
.lib-sidebar .lib-sidebar-link-cards:hover{background:rgba(16,185,129,.22);color:#a7f3d0;}
/* The ‹ collapse tab (pinned-open state only) matches the rail. */
.lib-sidebar-toggle{
  background:linear-gradient(180deg,#132048 0%,#0b1226 100%);
  border-right:1px solid rgba(6,182,212,.45);
  color:#a5f3fc;box-shadow:2px 0 12px rgba(6,182,212,.18);
}
.lib-sidebar-toggle:hover{background:linear-gradient(180deg,#1a2b5e 0%,#111b3d 100%);color:#fff;}

/* ── Light theme (2026-09-12i): the command rail mirrors the page ─────────
   The v2 rail above pins a navy palette by overriding the text/border/bg
   tokens on .lib-sidebar itself, so it stayed dark while the rest of the
   screen switched to light. In light mode the tokens are handed back to the
   page (custom properties accept `inherit`) and every fixed navy value is
   replaced with the page surface, so the sidebar always matches the theme. */
html[data-fc-theme="light"] .lib-sidebar{
  --text-secondary:inherit;--text-dim:inherit;--text:inherit;--text-primary:inherit;
  --border:inherit;--bg-input:inherit;--bg-secondary:inherit;
  background:var(--bg-card);
  border-right:1px solid var(--border);
  box-shadow:2px 0 16px rgba(15,23,42,.06);
  color:var(--text-secondary);
  scrollbar-color:var(--border) transparent;
}
html[data-fc-theme="light"] .lib-sidebar::before{opacity:.75;}
html[data-fc-theme="light"] .lib-sidebar::-webkit-scrollbar-thumb{background:var(--border);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-header{border-bottom:1px solid var(--border);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-header-title{text-shadow:none;}
html[data-fc-theme="light"] .lib-sidebar-pin{border-color:rgba(6,182,212,.4);background:rgba(6,182,212,.08);color:#0e7490;}
html[data-fc-theme="light"] .lib-sidebar-pin:hover{background:rgba(6,182,212,.16);color:#155e75;border-color:rgba(6,182,212,.6);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-link.active{background:rgba(6,182,212,.12);border-color:rgba(6,182,212,.5);box-shadow:none;color:var(--text-primary);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-link:hover{background:rgba(99,102,241,.10);color:var(--text-primary);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-group-body{border-left-color:rgba(99,102,241,.3);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-subhdr{color:var(--text-dim);}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-link-sim{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.35);color:#b91c1c;}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-link-sim:hover{background:rgba(239,68,68,.16);color:#991b1b;}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-link-cards{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.35);color:#047857;}
html[data-fc-theme="light"] .lib-sidebar .lib-sidebar-link-cards:hover{background:rgba(16,185,129,.16);color:#065f46;}
html[data-fc-theme="light"] .lib-sidebar-toggle{background:var(--bg-card);border-right:1px solid var(--border);color:#0e7490;box-shadow:2px 0 10px rgba(15,23,42,.08);}
html[data-fc-theme="light"] .lib-sidebar-toggle:hover{background:var(--bg-secondary);color:#155e75;}

/* ── Desktop rail behaviour (≥769px) ──────────────────────────
   Collapsed = an 86px icon rail that glides to full width on hover or
   keyboard focus. Rewritten 2026-09-11j to remove the hitch: the old rules
   toggled `display` on every label, caret, badge and sub-header (which
   cannot animate, so they popped in before the width moved), changed icon
   sizes and padding in one jump, and waited 150ms before starting. Now
   nothing toggles display during the glide — labels animate max-width +
   opacity in step with the width, icons keep one size and slide with an
   animated padding, the sub-headers animate max-height, the scrollbar stays
   hidden in both rail states (no reflow), and the expansion starts at once
   while the collapse waits 120ms so crossing the edge never flickers. ── */
@media (min-width:769px){
  body.lib-sidebar-collapsed .lib-sidebar{
    transform:none;width:var(--sb-rail);overflow-x:hidden;
    scrollbar-width:none;
    transition:width .24s cubic-bezier(.2,.7,.2,1) .12s,box-shadow .24s ease .12s,transform .22s ease;
  }
  body.lib-sidebar-collapsed .lib-sidebar::-webkit-scrollbar{display:none;width:0;}
  body.lib-sidebar-collapsed.lib-shell{padding-left:var(--sb-rail);}
  /* No edge arrow on desktop — the rail itself is the target. */
  body.lib-sidebar-collapsed.lib-shell .lib-sidebar-reopen{display:none!important;}
  /* Header: the title is not shown in the rail (set once, not on hover); the
     pin row takes its place. */
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-header{padding:.55rem .55rem .45rem;}
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-header-title{display:none;}
  body.lib-sidebar-collapsed .lib-sidebar-pin{display:flex;}
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-inner{padding:.6rem .55rem 1.25rem;gap:.7rem;}
  /* Rows keep one layout: a fixed icon column, and an animated left padding
     that centres the icon in the rail and slides it left as the rail widens. */
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-link,
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-group-hdr{
    justify-content:flex-start;padding:.5rem .4rem .5rem 1.4rem;gap:0;min-height:40px;
    transition:background .12s,border-color .12s,color .12s,padding .24s cubic-bezier(.2,.7,.2,1) .12s,gap .24s cubic-bezier(.2,.7,.2,1) .12s;
  }
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-link-icon,
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-group-icon{flex:0 0 1.5rem;width:1.5rem;text-align:center;font-size:1.15rem;}
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-link-label,
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-group-label,
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-group-caret,
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-caret{
    max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
    transition:max-width .22s cubic-bezier(.2,.7,.2,1) .12s,opacity .1s ease .02s;
  }
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-card-badge{
    max-width:0;min-width:0;padding-left:0;padding-right:0;margin-left:0;opacity:0;overflow:hidden;
    transition:max-width .22s cubic-bezier(.2,.7,.2,1) .12s,padding .22s cubic-bezier(.2,.7,.2,1) .12s,margin .22s cubic-bezier(.2,.7,.2,1) .12s,opacity .1s ease .02s;
  }
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-subhdr{
    max-height:0;opacity:0;overflow:hidden;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;
    transition:max-height .22s cubic-bezier(.2,.7,.2,1) .12s,margin .22s cubic-bezier(.2,.7,.2,1) .12s,opacity .1s ease .02s;
  }
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-submenu:not(.hidden){
    max-height:0;opacity:0;overflow:hidden;margin-top:0;margin-bottom:0;
    transition:max-height .22s cubic-bezier(.2,.7,.2,1) .12s,margin .22s cubic-bezier(.2,.7,.2,1) .12s,opacity .1s ease .02s;
  }
  body.lib-sidebar-collapsed .lib-sidebar .lib-sidebar-group-body{
    padding-left:0;margin-left:0;border-left-color:transparent;gap:.1rem;
    transition:max-height .25s ease,opacity .15s,padding .24s cubic-bezier(.2,.7,.2,1) .12s,margin .24s cubic-bezier(.2,.7,.2,1) .12s,border-color .24s ease .12s,gap .24s ease .12s;
  }
  /* Disclaimer chrome follows the rail width (overrides the 22px/28px rules above). */
  body.lib-sidebar-collapsed #disclaimer-footer{left:var(--sb-rail)!important;}
  body.lib-sidebar-collapsed #disclaimer-restore-pill{left:calc(var(--sb-rail) + 12px)!important;}

  /* Hover / keyboard focus glides the rail open over the content. Pointer
     devices only — a finger cannot hover, and phones use the drawer. */
  @media (hover:hover) and (pointer:fine){
    body.lib-sidebar-collapsed .lib-sidebar:hover,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within{
      width:var(--sb-full);transition-delay:.04s;
      box-shadow:inset -1px 0 0 rgba(6,182,212,.25),12px 0 40px rgba(2,6,23,.55),4px 0 28px rgba(6,182,212,.18);
    }
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-link,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-link,
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-group-hdr,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-group-hdr{padding:.5rem .65rem;gap:.55rem;transition-delay:.04s;}
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-link-label,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-link-label,
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-group-label,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-group-label{
      max-width:180px;opacity:1;
      transition:max-width .26s cubic-bezier(.2,.7,.2,1) .04s,opacity .2s ease .12s;
    }
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-group-caret,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-group-caret,
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-caret,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-caret{
      max-width:1.4em;opacity:1;
      transition:max-width .26s cubic-bezier(.2,.7,.2,1) .04s,opacity .2s ease .14s;
    }
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-card-badge,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-card-badge{
      max-width:4em;min-width:1.4em;padding:.18rem .42rem;margin-left:auto;opacity:1;
      transition:max-width .26s cubic-bezier(.2,.7,.2,1) .04s,padding .26s cubic-bezier(.2,.7,.2,1) .04s,opacity .2s ease .14s;
    }
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-subhdr,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-subhdr{
      max-height:2.4em;opacity:1;margin:.55rem 0 .15rem;
      transition:max-height .26s cubic-bezier(.2,.7,.2,1) .04s,margin .26s cubic-bezier(.2,.7,.2,1) .04s,opacity .2s ease .12s;
    }
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-submenu:not(.hidden),
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-submenu:not(.hidden){
      max-height:240px;opacity:1;margin:.1rem 0 .15rem 1.5rem;
      transition:max-height .26s cubic-bezier(.2,.7,.2,1) .04s,margin .26s cubic-bezier(.2,.7,.2,1) .04s,opacity .2s ease .12s;
    }
    body.lib-sidebar-collapsed .lib-sidebar:hover .lib-sidebar-group-body,
    body.lib-sidebar-collapsed .lib-sidebar:focus-within .lib-sidebar-group-body{
      padding-left:.35rem;margin-left:.55rem;border-left-color:rgba(99,102,241,.35);gap:.15rem;
      transition:max-height .25s ease,opacity .15s,padding .26s cubic-bezier(.2,.7,.2,1) .04s,margin .26s cubic-bezier(.2,.7,.2,1) .04s,border-color .26s ease .04s,gap .26s ease .04s;
    }
  }
}
@media (max-width:768px){.lib-sidebar-pin{display:none!important;}}
@media (prefers-reduced-motion:reduce){.lib-sidebar{transition:none!important;}}

/* ── Radiology sub-pages added 2026-09-11 (CXR / POCUS / Incidental) — same
   760px column as the other radiology sub-pages (rule at ~line 5399). ── */
#rad-cxr-content, #rad-pocus-content, #rad-incidental-content, #rad-ild-content { max-width: 760px; width: 100%; }
#rad-cxr-content .mgh-lib-card, #rad-pocus-content .mgh-lib-card, #rad-incidental-content .mgh-lib-card, #rad-ild-content .mgh-lib-card { max-width: 760px; width: 100%; }

/* ── ICU & Critical Care: bedside brief, first-week prep path, sources, reading tabs
   (moved here from library-experience.css on 2026-09-12a — the prep path rendered
   unstyled when a browser kept the old copy of that file) ── */
/* 2026-09-14: the brief now closes a page (above Clinical Pearls) on every
   topic except On-Call Algorithms, so it needs air above it to read as a
   summary rather than as another section of the reference. */
.icu-brief { margin: 1.1rem 0 .9rem; padding: .85rem .95rem .7rem; border: 1px solid var(--border); border-left: 3px solid var(--accent-red); border-radius: 12px; background: var(--bg-card); text-align: left; }
.icu-brief-kicker { font-family: 'JetBrains Mono', monospace; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-red); margin-bottom: .3rem; }
.icu-brief-decision { margin: 0 0 .6rem; font-family: 'DM Sans', sans-serif; font-size: .92rem; font-weight: 700; line-height: 1.4; color: var(--text-primary); }
.icu-brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.icu-brief-card { padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-secondary); }
.icu-brief-card h6 { margin: 0 0 .3rem; font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-cyan); }
.icu-brief-card.icu-brief-escalate h6 { color: var(--accent-amber); }
.icu-brief-card p { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--text-secondary); }
.icu-brief-check { margin-top: .6rem; border-top: 1px dashed var(--border); padding-top: .5rem; }
.icu-brief-check summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; font-size: .78rem; font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.icu-brief-check-kicker { font-family: 'JetBrains Mono', monospace; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-purple); }
.icu-brief-a { margin: .5rem 0 .1rem; padding: .55rem .7rem; border-left: 3px solid var(--accent-purple); background: rgba(168,85,247,.07); border-radius: 0 8px 8px 0; font-size: .76rem; line-height: 1.55; color: var(--text-secondary); }
.icu-sources { margin: .6rem 0 .8rem; }
.icu-sources summary { cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.icu-sources ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.icu-sources li { font-size: .74rem; line-height: 1.5; margin: .15rem 0; }
.icu-sources a { color: var(--accent-cyan); text-decoration: underline; overflow-wrap: anywhere; }
.icu-view-tabs { margin: .2rem 0 .6rem; }
.hemo-in input[aria-invalid="true"] { border-color: var(--accent-red) !important; box-shadow: 0 0 0 2px rgba(239,68,68,.22); }
@media (max-width: 700px) { .icu-brief-grid { grid-template-columns: 1fr; } }

/* ── Library chat → flashcard row (2026-09-12a): saved-count chip ── */
.lib-chat-cardrow{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;}
.lib-chat-cardcount{font-size:.72rem;font-weight:600;color:var(--accent-green);}

/* ── Shock Types tab (2026-09-12a): larger tile type, worded arrows, the selected
   phenotype's detail attached directly under the tiles, reference figure last ── */
.shock-compare{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.shock-cmp-rows{gap:.15rem;margin-top:.3rem;}
.shock-cmp-row{gap:.5rem;}
.shock-cmp-lbl{font-size:.74rem;letter-spacing:.04em;}
.shock-cmp-val{display:inline-flex;align-items:center;justify-content:flex-end;gap:.28rem;flex-wrap:wrap;
  font-family:'DM Sans',sans-serif;font-size:.8rem;}
.shock-cmp-row-key .shock-cmp-val{font-size:.82rem;padding:.08rem .4rem;}
.shock-arr{font-size:1.1rem;font-weight:800;line-height:1;}
.shock-arr-up{color:#ef4444;}
.shock-arr-dn{color:#22c55e;}
.shock-arr-var{color:var(--text-dim);}
.shock-arr-word{font-weight:700;}
.shock-arr-txt{font-weight:600;color:var(--text-secondary);}
.shock-cmp-legend{gap:.7rem;flex-wrap:wrap;justify-content:center;}
.shock-cmp-legend > span{display:inline-flex;align-items:center;gap:.28rem;}
.shock-cmp-sel{margin-top:.4rem;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.shock-cmp-card.active .shock-cmp-sel{color:var(--cmp-accent);}
.shock-detail-bridge{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .8rem;
  border:1px solid var(--border);border-top:0;border-bottom:0;text-align:center;
  background:color-mix(in srgb,var(--cmp-accent) 9%,var(--bg-card));
  font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cmp-accent);}
.shock-detail-full{border-top:3px solid var(--at-section-accent);border-top-left-radius:0;border-top-right-radius:0;
  margin-bottom:1rem;scroll-margin-top:90px;}
.shock-figure-block{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed var(--border);}
.shock-figure-kicker{text-align:center;margin-bottom:.45rem;}
.shock-types-overview{margin-top:0;}
@media(max-width:1100px){.shock-compare-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:460px){.shock-compare-grid{grid-template-columns:1fr !important;}}

/* ── Library chat (2026-09-12b): one-tap questions, "for your highlighted text" actions ── */
.lib-chat-quick{display:flex;flex-wrap:wrap;gap:.35rem;padding:.4rem .75rem 0;flex-shrink:0;background:var(--bg-card);}
.lib-chat-quick-lbl{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);align-self:center;margin-right:.15rem;}
.lib-chat-quick-btn{min-height:32px;padding:.3rem .7rem;border:1px solid rgba(6,182,212,.35);border-radius:999px;background:transparent;color:var(--accent-cyan);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;}
.lib-chat-quick-btn:hover{background:rgba(6,182,212,.1);border-color:var(--accent-cyan);}
.lib-chat-hlrow{margin-top:.6rem;padding:.5rem .6rem;border:1px solid rgba(245,158,11,.35);border-left:3px solid var(--accent-amber);border-radius:8px;background:rgba(245,158,11,.06);}
.lib-chat-hlrow-kicker{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-amber);}
.lib-chat-hlrow-snip{margin:.2rem 0 .45rem;font-size:.74rem;font-style:italic;line-height:1.45;color:var(--text-secondary);}
.lib-chat-hlrow-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;}
.lib-chat-cardbtn.lib-chat-notebtn{border-color:rgba(6,182,212,.5);color:var(--accent-cyan);}
.lib-chat-cardbtn.lib-chat-notebtn:hover:not(:disabled){background:rgba(6,182,212,.1);}
/* Note modal tag row */
.lib-note-modal-tag{display:flex;align-items:center;gap:.5rem;font-size:.72rem;color:var(--text-secondary);}
.lib-note-modal-tag > span{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.lib-note-modal-tag input{flex:1;min-width:0;min-height:36px;padding:.35rem .6rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.78rem;}
.lib-note-modal-tag input:focus{outline:none;border-color:var(--accent-cyan);box-shadow:0 0 0 3px rgba(6,182,212,.15);}
/* Shock subtype item tables (warm/cold × wet/dry) */
.shock-item-table{margin-top:.5rem;}
.shock-item-table .at-table td:first-child{font-weight:700;color:var(--text-primary);}

/* Shock subtype action row (2026-09-12c) */
.shock-sub-actions{margin:.7rem 0 .15rem;justify-content:center;}

/* ── Library action rows (2026-09-12e): page rows carry one Simulate button ── */
.lib-chat-actions-page{justify-content:center;}
/* ── Simulate-from-library length popup ── */
.sim-len-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10800;display:flex;align-items:center;justify-content:center;padding:1rem;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.sim-len-modal{background:var(--bg-card);border:1.5px solid var(--border);border-radius:14px;width:min(560px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;display:flex;flex-direction:column;}
.sim-len-hdr{display:flex;justify-content:space-between;align-items:center;padding:.7rem .9rem;border-bottom:1px solid var(--border);background:var(--bg-secondary);font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:var(--text-primary);}
.sim-len-hdr button{background:none;border:none;color:var(--text-dim);font-size:1.05rem;cursor:pointer;padding:4px 8px;border-radius:6px;}
.sim-len-hdr button:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.sim-len-body{padding:.9rem;display:flex;flex-direction:column;gap:.6rem;}
.sim-len-topic{font-size:.8rem;font-weight:600;line-height:1.45;color:var(--text-primary);padding:.5rem .65rem;border-left:3px solid var(--accent-purple);background:rgba(168,85,247,.07);border-radius:0 8px 8px 0;}
.sim-len-q{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-top:.15rem;}
.sim-len-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;}
.sim-len-tile{display:flex;flex-direction:column;gap:.15rem;text-align:left;padding:.7rem .8rem;min-height:56px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg-secondary);cursor:pointer;font-family:'DM Sans',sans-serif;transition:border-color .15s,background .15s,transform .15s;}
.sim-len-tile strong{font-size:.86rem;font-weight:700;color:var(--text-primary);}
.sim-len-tile span{font-size:.72rem;color:var(--text-secondary);}
.sim-len-tile:hover,.sim-len-tile:focus-visible{border-color:var(--accent-purple);background:rgba(168,85,247,.1);transform:translateY(-1px);outline:none;}
.sim-len-type{font-size:.72rem;color:var(--text-secondary);}
.sim-len-ftr{display:flex;justify-content:space-between;gap:.5rem;padding:.6rem .9rem;border-top:1px solid var(--border);background:var(--bg-secondary);}
.sim-len-ftr button{padding:.45rem .9rem;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);}
.sim-len-ftr button:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.sim-len-ftr .sim-len-full{color:var(--accent-purple);border-color:rgba(168,85,247,.4);}
@media(max-width:460px){.sim-len-grid{grid-template-columns:1fr;}}

/* ── ITE slots (2026-09-12j): one card per residency year, weighted picture below ── */
.ite-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin:.6rem 0 .2rem;}
@media(max-width:640px){.ite-slots{grid-template-columns:1fr;}}
.ite-slot{padding:.6rem .7rem;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-secondary);display:flex;flex-direction:column;gap:.4rem;min-height:6.4rem;}
.ite-slot-empty{border-style:dashed;background:color-mix(in srgb,var(--accent-blue) 3%,var(--bg-card));}
.ite-slot-filled{border-color:color-mix(in srgb,var(--accent-blue) 45%,transparent);}
.ite-slot-year{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--accent-blue);display:flex;flex-direction:column;gap:.1rem;}
.ite-slot-sub{font-family:'DM Sans',sans-serif;font-size:.66rem;font-weight:500;color:var(--text-dim);}
.ite-slot-none{font-size:.72rem;color:var(--text-dim);}
.ite-slot-stats{display:flex;flex-wrap:wrap;gap:.3rem .7rem;font-size:.7rem;color:var(--text-secondary);}
.ite-slot-stats b{font-family:'JetBrains Mono',monospace;color:var(--text-primary);font-weight:700;}
.ite-slot-actions{display:flex;gap:.4rem;margin-top:auto;}
.ite-upload-sm{padding:.4rem .8rem;font-size:.72rem;text-align:center;margin-top:auto;}
.ite-replace-danger{border-color:rgba(239,68,68,.35);color:var(--accent-red);}
.ite-replace-danger:hover{border-color:var(--accent-red);color:var(--accent-red);background:rgba(239,68,68,.08);}
.ite-slot-pick{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 .2rem;}
.ite-slot-pick-lbl{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.ite-slot-pick-btn{padding:.35rem .75rem;border-radius:999px;border:1.5px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;cursor:pointer;}
.ite-slot-pick-btn.active{border-color:var(--accent-blue);color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 12%,transparent);}
.ite-slot-note{font-size:.7rem;line-height:1.5;color:var(--text-secondary);margin-top:.35rem;}
.ite-weighted-kicker{font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:.85rem 0 .35rem;}
.ite-trend{font-family:'JetBrains Mono',monospace;font-size:.62rem;margin-left:.3rem;font-weight:700;}
.ite-trend-up{color:var(--accent-green);}
.ite-trend-dn{color:var(--accent-red);}
.ite-otag{display:inline-block;margin-left:.35rem;padding:.02rem .35rem;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--text-dim);border:1px solid var(--border);vertical-align:middle;}

/* ── Medications (2026-09-12l): centred category chips, typeahead, AI card, add-to-section ── */
#drugs-subcats .ref-subcat-chips{justify-content:center;}
.drug-found{padding:.5rem .7rem;font-size:.75rem;color:var(--accent-green);border:1px solid rgba(34,197,94,.25);border-radius:8px;margin-bottom:.4rem;background:rgba(34,197,94,.06);}
.drug-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:var(--bg-card);border:1.5px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);max-height:340px;overflow-y:auto;padding:.3rem;}
.drug-suggest[hidden]{display:none;}
.drug-suggest-item{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;width:100%;padding:.45rem .6rem;border:none;border-radius:8px;background:transparent;text-align:left;cursor:pointer;font-family:'DM Sans',sans-serif;}
.drug-suggest-item:hover,.drug-suggest-item.active{background:color-mix(in srgb,var(--accent-cyan) 12%,transparent);}
.drug-suggest-name{font-size:.78rem;font-weight:600;color:var(--text-primary);}
.drug-suggest-name mark{background:transparent;color:var(--accent-cyan);}
.drug-suggest-where{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text-dim);white-space:nowrap;}
.drug-suggest-foot{padding:.4rem .6rem .2rem;font-size:.66rem;color:var(--text-dim);border-top:1px dashed var(--border);margin-top:.2rem;}
.drug-ai-card{margin:.4rem 0 .8rem;}
.drug-ai-kicker{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-cyan);}
.drug-tag.ai{background:rgba(6,182,212,.14);color:var(--accent-cyan);}
.drug-tag.custom{background:rgba(168,85,247,.14);color:var(--accent-purple);}
.drug-ai-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.7rem;}
.drug-ai-note{font-size:.68rem;color:var(--text-dim);}
.drug-ai-place{margin-top:.6rem;padding:.65rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-secondary);display:flex;flex-direction:column;gap:.5rem;}
.drug-ai-place[hidden]{display:none;}
.drug-ai-place-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}
.drug-ai-place label{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.drug-ai-place select,.drug-ai-place input{min-height:34px;padding:.3rem .5rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.74rem;}
.drug-ai-place input[hidden]{display:none;}
.drug-ai-place-hint{font-size:.72rem;line-height:1.5;color:var(--text-secondary);}
.drug-custom-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 .2rem;}
.drug-misc-explain{padding:.9rem 1rem;border:1.5px dashed var(--border);border-radius:12px;color:var(--text-secondary);font-size:.78rem;line-height:1.55;max-width:760px;margin:.4rem auto .8rem;}
.drug-misc-explain p{margin:.3rem 0 0;}
.drug-misc-title{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;color:var(--text-primary);}

/* ── Medications pilot (2026-09-12m): per-category tools, hide-not-delete, add-here ── */
.drug-cat-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;max-width:760px;margin:.6rem auto .2rem;}
.drug-tool-btn{min-height:34px;padding:.35rem .85rem;border-radius:999px;border:1.5px dashed var(--border);background:transparent;color:var(--text-secondary);font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.drug-tool-btn:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);background:rgba(6,182,212,.06);}
.drug-tool-quiet{border-style:solid;color:var(--text-dim);}
.drug-add-panel{flex-basis:100%;text-align:left;}
.drug-tag.hidden{background:rgba(100,116,139,.18);color:var(--text-dim);}
.drug-manual-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;width:100%;}
.drug-manual-form .drug-manual-full{grid-column:1/-1;}
.drug-manual-form textarea{min-height:64px;padding:.4rem .55rem;border-radius:8px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-family:'DM Sans',sans-serif;font-size:.74rem;resize:vertical;}
@media(max-width:560px){.drug-manual-form{grid-template-columns:1fr;}}

/* ── ITE drag-and-drop (2026-09-12n) ── */
.ite-slot{position:relative;}
.ite-slot-drop{font-size:.66rem;color:var(--text-dim);text-align:center;margin-top:.15rem;}
.ite-slot.ite-slot-drag{border-style:solid;border-color:var(--accent-blue);background:color-mix(in srgb,var(--accent-blue) 12%,var(--bg-card));box-shadow:0 0 0 3px rgba(59,130,246,.18);}
.ite-slot.ite-slot-drag .ite-slot-drop{color:var(--accent-blue);font-weight:600;}
#lib-ite-panel.ite-slot-drag{outline:2px dashed var(--accent-blue);outline-offset:6px;border-radius:12px;}

/* ── ITE missed objectives: collapsible per area (2026-09-12n) ── */
.ite-otools{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.2rem;}
.ite-otools-lbl{flex:1;font-size:.7rem;color:var(--text-dim);}
details.ite-ogroup > summary.ite-oarea{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem;user-select:none;}
details.ite-ogroup > summary.ite-oarea::-webkit-details-marker{display:none;}
.ite-ocaret{display:inline-block;font-size:.7rem;color:var(--text-dim);transition:transform .15s;}
details.ite-ogroup[open] > summary .ite-ocaret{transform:rotate(90deg);}
.ite-ocount{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:600;color:var(--text-dim);white-space:nowrap;}
details.ite-ogroup > summary:hover .ite-ocount{color:var(--accent-blue);}
.ite-olist{margin-top:.3rem;}

/* ── ITE stats are opt-in (2026-09-12o) ── */
.ite-stats-toggle{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.7rem 0 .2rem;}
.ite-stats-note{flex:1;min-width:14rem;font-size:.7rem;line-height:1.45;color:var(--text-dim);}
.ite-stats-btn{border-color:var(--accent-blue);color:var(--accent-blue);}
.ite-slot-stats-hidden{color:var(--text-dim);font-size:.68rem;}