/* ══════════════════════════════════════════════════════════════════════
   Meridian — views
   Dashboard, test assembly, the runner, notebook, and analytics.
   ══════════════════════════════════════════════════════════════════════ */

/* ── section heading ────────────────────────────────────────────────── */

.shead {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.shead h2 { font-size: 15px; font-weight: 640; letter-spacing: -.012em; }
.shead p { font-size: 12.5px; color: var(--ink-3); }
.shead .push { display: flex; gap: 6px; align-items: center; }

.page-head { margin-bottom: 22px; }
.page-head h1 {
  font-size: 24px; font-weight: 660; letter-spacing: -.022em; margin-bottom: 4px;
}
.page-head p { font-size: 13.5px; color: var(--ink-3); max-width: 68ch; }

/* ── dashboard ──────────────────────────────────────────────────────── */

.dash-hero {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px; margin-bottom: 26px;
}
@media (max-width: 900px) { .dash-hero { grid-template-columns: 1fr; } }

.hero-card {
  padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule);
  display: grid; gap: 16px; align-content: space-between;
}
.hero-card__top { display: flex; align-items: flex-start; gap: 16px; }
.hero-card h2 {
  font-size: 19px; font-weight: 650; letter-spacing: -.018em; margin-bottom: 3px;
}
.hero-card p { font-size: 13px; color: var(--ink-3); }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule); padding-top: 15px; gap: 14px;
}
.stat-grid > * { border-left: 1px solid var(--rule); padding-left: 13px; }
.stat-grid > *:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .stat-grid > *:nth-child(3) { border-left: 0; padding-left: 0; }
}

.ring { position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--surface-3); }
.ring__fill { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.ring__mid {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; line-height: 1.1;
}
.ring__mid b { font-size: 19px; font-weight: 640; letter-spacing: -.02em; }
.ring__mid span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); }

/* resume strip */
.resume {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--blue-2); background: var(--blue-tint);
}
.resume__i {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  display: grid; place-content: center;
  background: var(--blue); color: #fff; font-size: 15px; font-weight: 620;
}
[data-theme="dark"] .resume__i { color: #08121e; }
.resume b { font-size: 13.5px; font-weight: 620; display: block; }
.resume p { font-size: 12.5px; color: var(--ink-2); }

/* category grid */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}
.cat-card {
  position: relative; display: grid; gap: 11px; align-content: start;
  padding: 15px 16px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--rule);
  overflow: hidden; text-align: left;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.cat-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--cdot);
}
.cat-card:hover {
  border-color: var(--rule-2); transform: translateY(-1px); box-shadow: var(--shadow-2);
}
.cat-card__name { font-size: 13.5px; font-weight: 620; letter-spacing: -.008em; }
.cat-card__blurb {
  font-size: 12px; color: var(--ink-3); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-card__foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.cat-card__foot b { font-weight: 620; color: var(--ink); font-variant-numeric: tabular-nums; }

/* activity list */
.act-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.act-row:last-child { border-bottom: 0; }
.act-row__m {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  display: grid; place-content: center; font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--ink-3);
}
.act-row__m--pass { background: var(--green-tint); color: var(--green); }
.act-row__m--fail { background: var(--red-tint); color: var(--red); }

/* ── create test ────────────────────────────────────────────────────── */

/* Keep focus scrolling inside the form; the document must not move the app's
   navigation or the start action off the viewport on narrow screens. */
.app:has(.create-page) { position:fixed; inset:0; overflow:clip; }
.view:has(.create-page) { scroll-padding-bottom:110px; }
.create-page { max-width:940px; min-height:100%; padding:18px 28px 0; display:flex; flex-direction:column; }
.create-body { display:grid; gap:12px; align-content:start; flex:1; padding-bottom:12px; }
.create-page h2 { font-size:13.5px; font-weight:620; line-height:1.4; margin:0 0 12px; }
.create-setup { padding:16px 22px 0; }
.create-setup__fields { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.create-field { min-width:0; }
.create-page .seg button { min-height:40px; }
.create-page .seg button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.create-hint { font-size:12px; line-height:1.5; color:var(--ink-3); margin:8px 0 0; }
.create-count { display:flex; gap:10px; }
.create-count__presets { display:flex; flex:1; }
.create-count__presets button { flex:1; }
.create-count__input { width:84px; min-width:64px; height:46px; font-size:15px; font-weight:600; text-align:center; font-variant-numeric:tabular-nums; }
.create-count__input[aria-invalid="true"] { border-color:var(--amber); }
.create-timing { border-top:1px solid var(--rule); margin-top:14px; }
.create-switch { min-height:62px; gap:16px; position:relative; }
.create-switch input { right:0; top:50%; transform:translateY(-50%); width:44px; height:44px; z-index:1; cursor:pointer; }
.create-timing .create-switch { min-height:58px; }
.create-switch__text { order:1; flex:1; display:grid; gap:3px; min-width:0; }
.create-switch__text b { font-size:13px; font-weight:550; line-height:1.4; }
.create-switch__text small { color:var(--ink-3); font-size:12px; line-height:1.5; }
.create-switch .switch__track { order:2; flex:none; }
.create-timing__options { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 0 16px; }
.create-timing__options .create-hint { margin:0; }
.create-status { padding:16px 22px 10px; }
.create-status h2 { margin-bottom:6px; }
.create-status__list { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px 10px; }
.create-status__option { display:grid; grid-template-columns:17px auto 1fr; align-items:center; gap:7px; min-height:44px; padding:6px 4px; border-radius:5px; cursor:pointer; font-size:12.5px; }
.create-status__option small { font-size:11.5px; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums; }
.create-status__option input,.create-option input { width:17px; height:17px; margin:0; accent-color:var(--blue); cursor:pointer; }
.create-status__option:hover,.create-option:hover { background:var(--surface-2); }
.create-status__option:focus-within,.create-option:focus-within { outline:2px solid var(--blue); outline-offset:1px; }
.create-categories { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.create-page summary { padding:15px 22px; cursor:pointer; font-size:12px; line-height:1.5; color:var(--ink-3); }
.create-page summary:focus-visible { outline:2px solid var(--blue); outline-offset:-3px; border-radius:var(--r); }
.create-disclosure__line { display:inline-flex; align-items:center; vertical-align:middle; gap:16px; width:calc(100% - 16px); }
.create-disclosure__line strong { flex:none; font-size:13px; font-weight:550; color:var(--ink); }
.create-disclosure__value { margin-left:auto; text-align:right; font-size:12px; overflow-wrap:break-word; }
.create-categories__body { padding:0 22px 16px; }
.create-categories__body .category-actions { justify-content:flex-end; margin-bottom:8px; }
.create-focus { padding:0 22px; }
.create-focus .create-switch + .create-switch { border-top:1px solid var(--rule); }
.create-options__body { padding:0 22px; }
.create-choice-group { padding:0 0 14px; border-bottom:1px solid var(--rule); }
.create-choice-group + .create-choice-group { padding-top:12px; }
.create-choice-group__head { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.create-choice-group__head h2 { margin:0; }
.create-choice-group__head .btn { min-height:36px; }
.create-option-list { display:flex; gap:2px 18px; flex-wrap:wrap; }
.create-option { display:flex; align-items:center; gap:9px; min-height:44px; padding:5px 4px; cursor:pointer; border-radius:5px; font-size:13px; }
.create-reset { display:flex; justify-content:center; }
.create-reset .btn { min-height:40px; font-size:12px; color:var(--ink-3); }
.create-summary { position:sticky; bottom:0; z-index:3; background:var(--paper); border-top:1px solid var(--rule); padding:14px 0 max(14px, env(safe-area-inset-bottom)); }
.create-summary__row { display:flex; align-items:center; gap:20px; }
.create-summary__details { display:flex; flex:1; min-width:0; align-items:center; gap:16px; justify-content:space-between; }
.create-summary .summary__n { font-size:18px; font-weight:620; letter-spacing:-.015em; line-height:1.4; font-variant-numeric:tabular-nums; }
.create-summary__meta,.create-summary__available { color:var(--ink-3); font-size:12px; line-height:1.5; }
.create-summary__available { white-space:nowrap; font-variant-numeric:tabular-nums; }
.create-start { min-height:44px; min-width:148px; font-size:14px; }
.create-summary__warning { margin-top:8px; color:var(--amber); font-size:12px; line-height:1.45; }

.category-head { align-items: center; margin-bottom: 8px; }
.category-actions { display: flex; gap: 3px; margin-left: auto; }
.category-actions .btn { min-height: 36px; }
.category-actions .btn:disabled { opacity: .4; }
.category-picker {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
}
.category-option {
  display: grid; grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; min-height: 48px; padding: 10px 12px;
  border-bottom: 1px solid var(--rule); cursor: pointer;
  transition: background var(--t);
}
.category-option:nth-child(odd) { border-right: 1px solid var(--rule); }
.category-option:last-child { border-bottom: 0; }
.category-option:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.category-option:hover { background: var(--surface-2); }
.category-option:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-tint); }
.category-option input { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); cursor: pointer; }
.category-option__name { font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.category-option__count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; min-width: 22px; }
.category-option--empty .category-option__name { color: var(--ink-3); }
.category-caption { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 11px; color: var(--ink-3); }
@media (max-width: 600px) {
  .category-picker { grid-template-columns: minmax(0, 1fr); }
  .category-option:nth-child(odd) { border-right: 0; }
  .category-option:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule); }
  .category-option { min-height: 48px; }
  .category-option__name { font-size: 13px; }
  .category-caption { flex-wrap: wrap; gap: 4px 12px; }
}

@media (max-width:760px) {
  .create-page { padding:18px 18px 0; }
  .create-status__list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .create-setup__fields { gap:20px; }
}
@media (max-width:540px) {
  .create-page { padding:14px 14px 0; }
  .create-setup { padding:16px 16px 0; }
  .create-setup__fields { grid-template-columns:1fr; gap:18px; }
  .create-status { padding:14px 16px 10px; }
  .create-status__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
  .create-page summary { padding:16px; }
  .create-categories__body { padding:0 16px 14px; }
  .create-focus,.create-options__body { padding:0 16px; }
  .create-switch { min-height:74px; }
  .create-timing .create-switch { min-height:64px; }
  .create-timing__options { flex-direction:column; align-items:stretch; gap:6px; }
  .create-timing__options .seg { display:flex; }
  .create-timing__options .seg button { flex:1; }
  .create-summary__row { gap:12px; }
  .create-summary__details { display:block; }
  .create-summary__available { font-size:11px; }
  .create-summary .summary__n { font-size:16px; }
  .create-start { min-width:126px; }
}

/* ── runner ─────────────────────────────────────────────────────────── */

.review-list { list-style: none; margin: 0; padding: 0 18px; }
.review-list > li + li { border-top: 1px solid var(--rule); }
.review-question { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; color: var(--ink); text-decoration: none; }
.review-question:hover .review-question__title { color: var(--blue); }
.review-question:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.review-question > .status-pip { margin-top: 6px; flex: none; }
.review-question__body { min-width: 0; }
.review-question__title { display: block; font-size: 14px; line-height: 1.5; font-weight: 600; }
.review-question__preview { margin-top: 4px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-question__details { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.review-question__details .item-head__cat { font-size: 11px; }

.runner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }

.runner__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 22px; border-bottom: 1px solid var(--rule);
  background: var(--surface); min-height: 44px;
}
.runner__pos { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.runner__pos small { color: var(--ink-3); font-weight: 500; }

.pdots { display: flex; gap: 3px; flex-wrap: wrap; max-width: 100%; }
.pdot {
  width: 15px; height: 5px; border-radius: 2px; background: var(--surface-3);
  transition: background var(--t), transform var(--t);
}
.pdot:hover { transform: scaleY(1.6); }
.pdot--done { background: var(--ink-4); }
.pdot--right { background: #3f8f5f; }
.pdot--wrong { background: #b45445; }
.pdot--mark { background: var(--amber); }
.pdot--now { background: var(--blue); transform: scaleY(1.7); }

.timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  padding: 3px 9px; border-radius: var(--r);
  background: var(--surface-2); color: var(--ink-2);
}
.timer--warn { background: var(--amber-tint); color: var(--amber); }
.timer--over { background: var(--red-tint); color: var(--red); }

.runner__body {
  display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0;
}
.runner__body.has-rail { grid-template-columns: minmax(0, 1fr) 336px; }
@media (max-width: 1100px) { .runner__body.has-rail { grid-template-columns: minmax(0, 1fr); } }

.runner__main { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.runner__inner { max-width: 820px; margin: 0 auto; padding: 26px 30px 120px; }


/* item header */
.item-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.item-head__id {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--ink-3); letter-spacing: -.01em;
}
.item-head__cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; }

/* clinical prose */
.vig { font-family: var(--prose); font-size: 16.5px; line-height: 1.62; color: var(--ink); }
.vig p { margin-bottom: 15px; }
.vig p:last-child { margin-bottom: 0; }

.vitals {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 18px 0; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.vitals__c {
  flex: 1 1 0; min-width: 88px; padding: 9px 12px;
  border-left: 1px solid var(--rule);
}
.vitals__c:first-child { border-left: 0; }
.vitals__k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 1px;
}
.vitals__v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vitals__c--abn .vitals__v { color: var(--red); }
.vitals__c--abn { background: var(--red-tint); }

.labtab {
  margin: 18px 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
}
.labtab caption {
  padding: 8px 12px; text-align: left; background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.labtab td { padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--rule); }
.labtab tr:last-child td { border-bottom: 0; }
.labtab td:nth-child(2) { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.labtab td:nth-child(3) { color: var(--ink-3); font-size: 12px; white-space: nowrap; width: 1%; }
.labtab td:nth-child(4) { color: var(--ink-4); font-size: 11.5px; text-align: right; white-space: nowrap; width: 1%; }
.labtab tr.abn td:nth-child(2) { color: var(--red); }
.labtab tr.abn td:nth-child(2)::after { content: " ✱"; font-size: 10px; }

.ask {
  font-family: var(--prose); font-size: 16.5px; font-weight: 600;
  line-height: 1.5; margin: 22px 0 16px;
}

/* choices */
.choices { display: grid; gap: 7px; }
.choice {
  display: flex; align-items: flex-start; gap: 11px; width: 100%;
  padding: 11px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--t), background var(--t), opacity var(--t);
}
.choice:hover:not([aria-disabled="true"]) { border-color: var(--ink-4); background: var(--surface-2); }
.choice[aria-disabled="true"] { cursor: default; }
.choice__k {
  width: 21px; height: 21px; flex: none; border-radius: 5px;
  display: grid; place-content: center;
  border: 1px solid var(--rule-2); background: var(--surface);
  font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  transition: all var(--t);
}
.choice__t { font-family: var(--prose); font-size: 15.5px; line-height: 1.5; padding-top: 1px; }
.choice__copy { min-width: 0; }
.choice__why { margin: 6px 0 0; color: var(--ink-2); font-family: var(--prose); font-size: 14px; line-height: 1.5; }
.choice__pct {
  margin-left: auto; padding-left: 12px; flex: none; align-self: center;
  font-size: 11.5px; font-weight: 600; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.choice[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); }
.choice[aria-pressed="true"] .choice__k { background: var(--blue); border-color: var(--blue); color: #fff; }
[data-theme="dark"] .choice[aria-pressed="true"] .choice__k { color: #08121e; }

.choice--struck .choice__t { text-decoration: line-through; text-decoration-thickness: 1px; }
.choice--struck { opacity: .45; }

/* Revealed states must outrank the selected state, which carries an extra
   attribute selector — hence the doubled class. */
.choice.choice--right { border-color: #3f8f5f; background: var(--green-tint); }
.choice.choice--right .choice__k { background: #3f8f5f; border-color: #3f8f5f; color: #fff; }
.choice.choice--wrong { border-color: #b45445; background: var(--red-tint); }
.choice.choice--wrong .choice__k { background: #b45445; border-color: #b45445; color: #fff; }
.choice__bar {
  position: absolute; left: 0; bottom: 0; height: 2px; background: var(--ink-4); opacity: .4;
}
.choice { position: relative; overflow: hidden; }

/* rule-out control */
.choice__x {
  flex: none; align-self: center; margin-left: 8px;
  width: 24px; height: 24px; border-radius: 5px;
  display: grid; place-content: center;
  font-size: 13px; line-height: 1; color: var(--ink-4);
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity var(--t), color var(--t), background var(--t), border-color var(--t);
}
.choice:hover .choice__x,
.choice:focus-within .choice__x,
.choice__x:focus-visible,
.choice__x[aria-pressed="true"] { opacity: 1; }
.choice__x:hover { background: var(--surface-3); color: var(--red); border-color: var(--rule-2); }
.choice__x[aria-pressed="true"] { color: var(--ink-3); }
@media (hover: none) { .choice__x { opacity: 1; } }

.hint {
  margin-top: 10px; font-size: 12px; color: var(--ink-4);
  display: flex; align-items: center; gap: 6px;
}

/* explanation */
.expl { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink); }
.expl__verdict {
  display: flex; align-items: center; gap: 11px; margin-bottom: 18px;
  padding: 13px 15px; border-radius: var(--r-lg);
}
.expl__verdict--right { background: var(--green-tint); }
.expl__verdict--wrong { background: var(--red-tint); }
.expl__verdict--omit { background: var(--surface-2); }
.expl__vi {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-content: center; color: #fff; font-size: 14px; font-weight: 700;
}
.expl__verdict--right .expl__vi { background: #3f8f5f; }
.expl__verdict--wrong .expl__vi { background: #b45445; }
.expl__verdict--omit .expl__vi { background: var(--ink-4); }
.expl__verdict b { font-size: 14px; font-weight: 640; display: block; }
.expl__verdict p { font-size: 12.5px; color: var(--ink-2); }

.expl__stats {
  display: flex; gap: 0; margin-bottom: 22px;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
}
.expl__stat { flex: 1; padding: 10px 13px; border-left: 1px solid var(--rule); }
.expl__stat:first-child { border-left: 0; }
.expl__stat b { font-size: 16px; font-weight: 630; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.expl__stat span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }

.expl h3 {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin: 26px 0 10px;
}
.expl h3:first-of-type { margin-top: 0; }

.expl__lead {
  font-family: var(--prose); font-size: 16px; line-height: 1.55; font-weight: 600;
  padding: 14px 16px; border-left: 3px solid var(--blue);
  background: var(--blue-tint); border-radius: 0 var(--r) var(--r) 0;
  margin-bottom: 20px;
}
.expl__body { font-family: var(--prose); font-size: 16px; line-height: 1.64; }
.expl__body p { margin-bottom: 14px; }

.why { display: grid; gap: 1px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.why__row { display: flex; gap: 11px; padding: 11px 13px; background: var(--surface); }
.why__row + .why__row { border-top: 1px solid var(--rule); }
.why__k {
  width: 20px; height: 20px; flex: none; border-radius: 5px;
  display: grid; place-content: center;
  font-size: 11px; font-weight: 650;
  background: var(--surface-2); color: var(--ink-3);
}
.why__row--right { background: var(--green-tint); }
.why__row--right .why__k { background: #3f8f5f; color: #fff; }
.why__row--picked .why__k { background: #b45445; color: #fff; }
.why__t { font-family: var(--prose); font-size: 14.5px; line-height: 1.55; }
.why__t b { font-weight: 650; }

.objective {
  padding: 15px 18px; margin: 22px 0 26px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border: 1px solid var(--rule); border-radius: var(--r-lg);
}
.expl .objective__label {
  margin: 0 0 6px; font-family: var(--ui); font-size: 12px; font-weight: 650;
  line-height: 1.4; letter-spacing: .01em; text-transform: none; color: var(--ink-2);
}
/* The labelled shell stays outside the highlightable passage. Its text nodes
   and marks remain inline, with unchanged source offsets. */
.objective__text {
  display: block; margin: 0; font-family: var(--prose); font-size: 16px;
  color: var(--ink); line-height: 1.6; overflow-wrap: break-word;
}

.related { display: flex; flex-wrap: wrap; gap: 6px; }

/* clipable blocks */
.clipable { position: relative; }
.clipable__act {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  opacity: 0; transition: opacity var(--t);
}
.clipable:hover .clipable__act, .clipable:focus-within .clipable__act { opacity: 1; }

/* figures */
.fig {
  margin: 22px 0; border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface);
}
.fig__head { padding: 11px 14px 0; }
.fig__title { font-size: 12.5px; font-weight: 640; letter-spacing: -.005em; }
.fig__canvas { padding: 12px 14px; }
.fig__canvas svg { width: 100%; height: auto; }
.fig__cap {
  padding: 9px 14px 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
  border-top: 1px solid var(--rule); margin-top: 2px;
}
.fig__legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; font-size: 11px; color: var(--ink-4); }

/* Scoped to the svg itself, not its wrapper, so clipped figures keep their
   styling when rendered inside a notebook entry. */
.figsvg text { font-family: var(--ui); fill: var(--ink-2); }
.figsvg .ax { stroke: var(--rule-2); }
.figsvg .grid { stroke: var(--rule); stroke-dasharray: 2 3; }
.figsvg .bar { fill: var(--blue); }
.figsvg .bar-2 { fill: var(--ink-4); }
.figsvg .ln { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.figsvg .ln-2 { fill: none; stroke: var(--ink-4); stroke-width: 2; stroke-dasharray: 4 3; stroke-linejoin: round; }
.figsvg .node { fill: var(--surface-2); stroke: var(--rule-2); }
.figsvg .node--start { fill: var(--blue-tint); stroke: var(--blue-2); }
.figsvg .node--end { fill: var(--green-tint); stroke: color-mix(in srgb, var(--green) 45%, transparent); }
.figsvg .edge { stroke: var(--ink-4); fill: none; }
.figsvg .lbl { font-size: 11px; }
.figsvg .lbl--sm { font-size: 9.5px; fill: var(--ink-4); }
.figsvg .mark { fill: none; stroke: var(--red); stroke-width: 1.6; }
.figsvg .trace { fill: none; stroke: var(--blue); stroke-width: 1.6; }

/* explanation tables */
.xtab { margin: 22px 0; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.xtab__head { padding: 11px 14px; border-bottom: 1px solid var(--rule); }
.xtab__title { font-size: 12.5px; font-weight: 640; }
.xtab__cap { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.xtab table { font-size: 13px; }
.xtab th {
  padding: 8px 13px; text-align: left; background: var(--surface-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--rule);
}
.xtab td { padding: 9px 13px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.45; }
.xtab tr:last-child td { border-bottom: 0; }
.xtab td:first-child { font-weight: 550; }
.xtab__note { padding: 8px 13px; font-size: 11.5px; color: var(--ink-4); background: var(--surface-2); }

/* runner footer */
.runner__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px; border-top: 1px solid var(--rule);
  background: var(--surface);
}
.runner__foot .grow { display: flex; justify-content: center; gap: 8px; }

/* ── results ────────────────────────────────────────────────────────── */

.score-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px;
  align-items: center; padding: 24px 26px; margin-bottom: 20px;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface);
}
@media (max-width: 700px) { .score-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.score-hero__n { font-size: 44px; font-weight: 650; letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums; }

.bar-row { display: grid; gap: 5px; padding: 9px 0; }
.bar-row__top { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; }
.bar-row__top b { font-weight: 550; }
.bar-row__v { margin-left: auto; font-weight: 620; font-variant-numeric: tabular-nums; }
.bar-row__peer { font-size: 11px; color: var(--ink-4); }
.bar-track { height: 7px; border-radius: 99px; background: var(--surface-3); position: relative; overflow: visible; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .5s var(--ease); }
.bar-peer {
  position: absolute; top: -3px; width: 2px; height: 13px;
  background: var(--ink-3); border-radius: 1px;
}
.bar-peer::after {
  content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 2px var(--surface);
  border-radius: 1px; z-index: -1;
}

/* ── browse ─────────────────────────────────────────────────────────── */

.browse { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .browse { grid-template-columns: 1fr; } }
.filters { position: sticky; top: 0; display: grid; gap: 18px; }
.filter-group { display: grid; gap: 8px; }
.filter-list { display: grid; gap: 2px; }
.filter-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 8px; border-radius: var(--r); text-align: left;
  font-size: 12.5px; color: var(--ink-2);
  transition: background var(--t);
}
.filter-row:hover { background: var(--surface-2); }
.filter-row[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.filter-row small { margin-left: auto; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.filter-row[aria-pressed="true"] small { color: inherit; opacity: .7; }

.qrow-id { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.qrow-topic { font-weight: 550; }
.qrow-prev {
  font-size: 12px; color: var(--ink-3); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.status-pip { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-pip--right { background: #3f8f5f; }
.status-pip--wrong { background: #b45445; }
.status-pip--none { background: var(--surface-3); border: 1px solid var(--rule-2); }

/* ══ the notebook panel ═══════════════════════════════════════════════ */

/* Scoped to the notebook's own surfaces: `.panel` alone is the generic card
   that views build content from, and giving it a grid placement here once
   stacked every question panel on the Highlights page into the same cell. */
aside.panel, .panel--page {
  grid-column: 3; grid-row: 1;
  /* header, toolbar, document, footer — the document takes what is left.
     One row short and the toolbar would take the flexible row and collapse. */
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-height: 0; position: relative;
  background: var(--surface);
  border-left: 1px solid var(--rule);
}

.panel__grip {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 3;
}
.panel__grip:hover { background: color-mix(in srgb, var(--blue) 26%, transparent); }
body.resizing-panel { cursor: col-resize; user-select: none; }

.panel__head {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 10px 9px 14px; border-bottom: 1px solid var(--rule);
  min-height: 44px;
}
.panel__book {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  padding: 4px 8px; border-radius: var(--r);
  font-size: 12px; font-weight: 550; color: var(--ink-3);
  transition: background var(--t), color var(--t);
}
.panel__book:hover { background: var(--surface-2); color: var(--ink); }
.panel__ico {
  width: 26px; height: 26px; border-radius: var(--r-sm); flex: none;
  display: grid; place-content: center;
  color: var(--ink-4); font-size: 13px;
  transition: background var(--t), color var(--t);
}
.panel__ico:hover { background: var(--surface-2); color: var(--ink); }

.panel__body { overflow-y: auto; overscroll-behavior: contain; }
.panel__inner { padding: 22px 26px 120px 22px; }


.panel__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 11.5px; color: var(--ink-4);
}
.panel__srcs { display: flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; }
.panel__srcs input { accent-color: var(--blue); width: 13px; height: 13px; }

/* ── the document: writing, and nothing that looks like a card ───────── */

.doc {
  position: relative; outline: none;
  font-family: var(--prose); font-size: 16px; line-height: 1.66; color: var(--ink);
  min-height: 60vh;
}
.doc > * { margin: 0 0 12px; }
.doc > *:last-child { margin-bottom: 0; }
.doc p { min-height: 1.66em; }
/* Three levels that have to be told apart at a glance, so each step changes
   size and weight together rather than relying on size alone. They mirror the
   16/14/12pt the .docx exports, and none drops below the 16px body — a
   heading smaller than its own text reads as a caption. */
.doc h1, .doc h2, .doc h3 {
  font-family: var(--ui); letter-spacing: -.015em; line-height: 1.3;
  color: var(--ink);
}
.doc h1 { font-size: 20px; font-weight: 660; margin: 26px 0 8px; }
.doc h2 { font-size: 18.5px; font-weight: 650; margin: 22px 0 7px; }
.doc h3 { font-size: 16px; font-weight: 680; margin: 18px 0 6px; }
/* Nothing above the first heading, so it should not push off the top edge. */
.doc > h1:first-child, .doc > h2:first-child, .doc > h3:first-child { margin-top: 0; }
.doc ul, .doc ol { margin-left: 20px; }
.doc ul li { list-style: disc; margin-bottom: 4px; }
.doc ol li { list-style: decimal; margin-bottom: 4px; }
.doc blockquote { border-left: 2px solid var(--rule-2); padding-left: 13px; color: var(--ink-2); }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }
.doc a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.doc > *:first-child:empty::after { content: ""; }

.doc[data-empty="1"]::before {
  content: "Start writing. Anything you save from a question lands here.";
  position: absolute; top: 0; left: 0; pointer-events: none;
  color: var(--ink-4); font-family: var(--ui); font-size: 13.5px;
}

/* Clipped prose is ordinary text. Its only trace is a mark in the margin,
   which the reader can switch off entirely. */
/* The mark sits inside a gutter of the paragraph's own box, so it can be
   clicked — and so the click test has a region to test against that is not
   the text itself. */
.doc[data-sources="on"] p[data-qid],
.doc[data-sources="on"] p[data-topic] { position: relative; padding-right: 20px; }
.doc[data-sources="on"] p[data-qid]::after,
.doc[data-sources="on"] p[data-topic]::after {
  content: "";
  position: absolute; top: .6em; right: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rule-2);
  transition: background var(--t), transform var(--t);
}
.doc[data-sources="on"] p[data-qid]:hover::after,
.doc[data-sources="on"] p[data-topic]:hover::after {
  background: var(--blue); transform: scale(1.35); cursor: pointer;
}

/* Figures and tables cannot be prose, so they sit plainly — no frame. */
.doc-obj { position: relative; margin: 16px 0; }
.clinical-figure__actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:8px 10px; }
.image-viewer__controls { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:12px; }
.image-viewer__scale { min-width:48px; text-align:center; font-variant-numeric:tabular-nums; }
.image-viewer__canvas { max-height:60dvh; overflow:auto; overscroll-behavior:contain; border-radius:10px; background:var(--surface-2); cursor:grab; }
.image-viewer__canvas:active { cursor:grabbing; }
.image-viewer__canvas img { display:block; width:100%; max-width:none; height:auto; }
.image-viewer__caption { margin-top:12px; font-size:13px; color:var(--ink-2); }
.settings-popover { width:100%; max-width:none; padding:0; margin:0; }
.settings-popover .set-row { flex-wrap:wrap; gap:12px; }
.settings-dialog .modal__head { position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:4px 12px 4px 20px;background:var(--surface);border-bottom:1px solid var(--rule); }
.settings-close { width:44px;height:44px;border:0;background:none;color:var(--ink-3);border-radius:8px; }
.settings-close:hover { background:var(--surface-2);color:var(--ink); }
.doc-obj__tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:6px; font:500 11.5px var(--ui); }
.doc a.doc-obj__source { color:var(--ink-3); text-decoration:none; padding:4px 2px; }
.doc a.doc-obj__source:hover { color:var(--blue); }
.doc .doc-obj__tools .doc-obj__x { position:static; opacity:1; width:28px; height:28px; }
.doc .note-table { max-width:100%; overflow-x:auto; margin:14px 0; overscroll-behavior-x:contain; }
.doc .note-table table { border-collapse:collapse; width:100%; }
.doc .note-table td,.doc .note-table th { border:1px solid var(--rule); padding:8px 10px; min-width:110px; vertical-align:top; overflow-wrap:anywhere; }
.doc .note-table th { text-align:left; background:var(--surface-2); }
.tb__b[aria-pressed="true"] { background:var(--surface-3); color:var(--blue); box-shadow:inset 0 -2px var(--blue); }
@media (pointer:coarse) { .doc a.doc-obj__source { min-height:44px; display:inline-flex; align-items:center; } .doc .doc-obj__tools .doc-obj__x { width:44px; height:44px; } }
.doc-obj__x {
  position: absolute; top: -2px; right: -8px; z-index: 2;
  width: 20px; height: 20px; border-radius: var(--r-sm);
  display: grid; place-content: center;
  color: var(--ink-4); font-size: 11px; background: var(--surface);
  opacity: 0; transition: opacity var(--t), color var(--t);
}
.doc-obj:hover .doc-obj__x { opacity: 1; }
.doc-obj__x:hover { color: var(--red); background: var(--surface-2); }

.doc-fig { margin: 0; }
.doc-fig svg { width: 100%; height: auto; }
.doc-fig figcaption {
  margin-top: 4px; font-family: var(--ui); font-size: 11.5px; color: var(--ink-4);
}
.doc-tbl .xtab { border: 0; border-radius: 0; margin: 0; }
.doc-tbl .xtab__head { padding: 0 0 6px; border: 0; }
.doc-tbl .xtab__title { font-size: 11.5px; font-family: var(--ui); color: var(--ink-4); font-weight: 600; }
.doc-tbl .xtab__cap { display: none; }
.doc-tbl .xtab th { background: none; padding: 4px 10px 4px 0; }
.doc-tbl .xtab td { padding: 6px 10px 6px 0; font-size: 13px; }
.doc-tbl .xtab__note { display: none; }

/* ── block dragging ─────────────────────────────────────────────────── */

.doc-wrap { position: relative; padding-left: 20px; margin-left: -20px; }

.doc-handle {
  /* Clear of the caret bar, which claims the first few pixels of the gutter. */
  position: absolute; left: 5px; width: 15px; height: 20px;
  border-radius: var(--r-sm); cursor: grab;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t), background var(--t);
  display: grid; place-content: center;
}
.doc-handle.on { opacity: 1; pointer-events: auto; }
.doc-handle::before {
  content: ""; width: 11px; height: 13px; background: var(--ink-4);
  -webkit-mask: var(--grip) center / 11px no-repeat;
  mask: var(--grip) center / 11px no-repeat;
  --grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cg fill='%23000'%3E%3Ccircle cx='3.5' cy='3' r='1.35'/%3E%3Ccircle cx='8.5' cy='3' r='1.35'/%3E%3Ccircle cx='3.5' cy='7' r='1.35'/%3E%3Ccircle cx='8.5' cy='7' r='1.35'/%3E%3Ccircle cx='3.5' cy='11' r='1.35'/%3E%3Ccircle cx='8.5' cy='11' r='1.35'/%3E%3C/g%3E%3C/svg%3E");
}
.doc-handle:hover { background: var(--surface-2); }
.doc-handle:active { cursor: grabbing; }

.doc-dropline {
  position: absolute; left: 20px; right: 0; height: 2px;
  background: var(--blue); border-radius: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity 90ms linear, top 90ms var(--ease);
}
.doc-dropline.on { opacity: 1; }
.doc > .is-dragging { opacity: .38; }
body.dragging-block { cursor: grabbing; user-select: none; }

/* ── the shelf: notebooks, and the notes inside them ────────────────── */

.shelf { display: grid; gap: 10px; }
.shelf--page { gap: 12px; }
.shelf__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }

.shelf__book {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}

.shelf__head {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 4px;
  background: var(--surface-2); border-bottom: 1px solid transparent;
  transition: border-color var(--t);
}
.shelf__book:has(.shelf__notes) .shelf__head { border-bottom-color: var(--rule); }

.shelf__toggle {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  padding: 9px 6px; border-radius: var(--r); text-align: left;
  color: var(--ink);
}
.shelf__toggle:hover .shelf__name { color: var(--blue); }
.shelf__chev {
  width: 14px; height: 14px; flex: none;
  font-size: 0;                       /* the glyph is drawn, not typed */
  background: var(--ink-3);
  -webkit-mask: var(--chev) center / 10px no-repeat;
  mask: var(--chev) center / 10px no-repeat;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 2.5 4 3.5-4 3.5'/%3E%3C/svg%3E");
  transition: transform .18s var(--ease), background var(--t);
}
.shelf__toggle[aria-expanded="true"] .shelf__chev { transform: rotate(90deg); }
.shelf__toggle:hover .shelf__chev { background: var(--ink); }
.shelf__name { font-size: 13px; font-weight: 640; letter-spacing: -.008em; }
.shelf__count {
  flex: none; min-width: 20px; padding: 0 6px; height: 17px;
  display: grid; place-content: center; border-radius: 99px;
  background: var(--surface-3); color: var(--ink-3);
  font-size: 10.5px; font-weight: 620; font-variant-numeric: tabular-nums;
}
/* notebook colour swatches */
.sw {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: inset 0 0 0 2px var(--surface);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
.sw:hover { transform: scale(1.08); }
/* The ring reads as selection without tinting the colour being chosen. */
.sw[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px var(--ink-2);
}
.sw:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.shelf__more {
  flex: none; width: 24px; height: 24px; border-radius: var(--r-sm);
  display: grid; place-content: center;
  color: var(--ink-4); font-size: 12px; letter-spacing: .5px;
  opacity: 0; transition: opacity var(--t), background var(--t), color var(--t);
}
.shelf__head:hover .shelf__more, .shelf__more:focus-visible { opacity: 1; }
.shelf__more:hover { background: var(--surface-3); color: var(--ink); }
@media (hover: none) { .shelf__more { opacity: 1; } }

.shelf__notes { display: grid; }

/* a note inside a notebook */
.shelf__rowwrap { position: relative; }
.shelf__rowwrap.is-dragging { opacity: .4; }
.shelf__row {
  display: grid; align-items: baseline; gap: 12px; width: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
  padding: 9px 14px 9px 26px; text-align: left;
  border-top: 1px solid var(--rule);
  transition: background var(--t);
}
.shelf__rowwrap:first-child .shelf__row { border-top: 0; }
.shelf__row:hover { background: var(--surface-2); }
.shelf__row[aria-current="true"] {
  background: var(--blue-tint);
  box-shadow: inset 3px 0 0 var(--blue);
}
.shelf__row-t { font-size: 13.5px; font-weight: 600; min-width: 0; }
.shelf__row-p { font-family: var(--prose); font-size: 13.5px; color: var(--ink-3); min-width: 0; }
.shelf__row-d {
  font-size: 11.5px; color: var(--ink-4); white-space: nowrap;
  justify-self: end; font-variant-numeric: tabular-nums;
  transition: opacity var(--t);
}

/* the row's own options, sitting where the date is until the row is hovered */
.shelf__rowwrap > .shelf__more {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
}
.shelf__rowwrap:hover > .shelf__more,
.shelf__rowwrap:focus-within > .shelf__more { opacity: 1; }
.shelf__rowwrap:hover .shelf__row-d,
.shelf__rowwrap:focus-within .shelf__row-d { opacity: 0; }
@media (hover: none) { .shelf__rowwrap .shelf__row-d { display: none; } }

/* the match, inside a search result's preview */
.shelf__hit {
  background: var(--hl-yellow); color: inherit;
  border-radius: 2px; padding: .05em 0;
}

/* a notebook ready to take the note being dragged over it */
.shelf__book--drop {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 1px var(--blue-2) inset;
}
.shelf__book--drop .shelf__head { background: var(--blue-tint); }

.shelf__empty {
  width: 100%; padding: 12px 26px; text-align: left;
  font-size: 12.5px; color: var(--ink-4);
  transition: color var(--t), background var(--t);
}
.shelf__empty:hover { color: var(--blue); background: var(--surface-2); }

/* the compact shelf inside the panel's dialog */
.shelf .shelf__note {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 14px 7px 24px; text-align: left;
  font-size: 13px; color: var(--ink-2);
  border-top: 1px solid var(--rule);
  transition: background var(--t), color var(--t);
}
.shelf__note:first-child { border-top: 0; }
.shelf__note:hover { background: var(--surface-2); color: var(--ink); }
.shelf__note[aria-current="true"] {
  background: var(--blue-tint); color: var(--blue); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--blue);
}
.shelf__dot {
  width: 4px; height: 4px; border-radius: 50%; flex: none;
  background: var(--rule-2);
}
.shelf__note[aria-current="true"] .shelf__dot { background: var(--blue); }
.shelf__open {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue); opacity: .75;
}

@media (max-width: 720px) {
  .shelf__row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 20px; }
  .shelf__row-p { grid-column: 1 / -1; }
}

/* ── performance ────────────────────────────────────────────────────── */

.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }

.spark { width: 100%; height: 132px; }
.spark .area { fill: var(--blue); opacity: .1; }
.spark .ln { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .pt { fill: var(--surface); stroke: var(--blue); stroke-width: 1.8; }
.spark .grid { stroke: var(--rule); stroke-dasharray: 2 3; }
.spark text { font-size: 10px; fill: var(--ink-4); font-family: var(--ui); }

.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(15px, 1fr)); gap: 3px; }
.heat__c { aspect-ratio: 1; border-radius: 2px; background: var(--surface-3); }

/* ── settings ───────────────────────────────────────────────────────── */

.set-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.set-row:last-child { border-bottom: 0; }
.set-row__t { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.set-row__t b { font-size: 13.5px; font-weight: 600; }
.set-row__t span { font-size: 12.5px; color: var(--ink-3); max-width: 56ch; line-height: 1.45; }
.set-row__c { margin-left: auto; flex: none; }
.account-controls { padding: 16px 0; }
.account-profile { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.account-profile .field { flex:1; min-width:180px; }
.account-profile .btn { flex:none; }
.account-message { margin:8px 0 0; color:var(--ink-3); font-size:12.5px; line-height:1.45; }
.account-message:empty { display:none; }
.account-message--error { color:var(--red); }
.account-password { margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }
.account-password summary { cursor:pointer; font-size:13px; font-weight:600; }
.account-password[open] summary { margin-bottom:14px; }
.account-password .btn { justify-self:start; }
.account-verification { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.account-verification[hidden] { display:none; }

/* ── notice ─────────────────────────────────────────────────────────── */

.notice {
  display: flex; gap: 10px; padding: 11px 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
}
.notice b { font-weight: 620; color: var(--ink); }
.notice--amber { background: var(--amber-tint); border-color: color-mix(in srgb, var(--amber) 34%, transparent); }

/* ── print ──────────────────────────────────────────────────────────── */

@media print {
  body { overflow: visible; background: #fff; }
  .rail, .topbar, .runner__bar, .runner__foot, aside.panel, .overlays,
  .clipable__act, .nb__rail, .nb__list, .nb-toolbar { display: none !important; }
  .app { display: block; height: auto; }
  .view, .runner__main { overflow: visible; height: auto; }
  .runner__inner, .wrap { max-width: none; padding: 0; }
  .card, .panel, .fig, .xtab { break-inside: avoid; box-shadow: none; }
}

/* ── highlights view ────────────────────────────────────────────────── */

.hl-row { display: flex; align-items: flex-start; gap: 11px; }
.hl-row__bar { width: 4px; align-self: stretch; border-radius: 2px; flex: none; min-height: 22px; }
.hl-row__main { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.hl-row__meta { font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.hl-row__t {
  font-family: var(--prose); font-size: 15px; line-height: 1.55;
  padding-top: 1px; text-align: left; cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--t);
}
.hl-row__t:hover { color: var(--blue); }
.hl-row__t:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* The mark you asked for, once the item opens. Fades rather than sitting lit,
   so it points without becoming a permanent second highlight. */
mark.hl--found { animation: hl-found 2.2s var(--ease); }
@keyframes hl-found {
  0%, 62% { box-shadow: 0 0 0 3px var(--blue-tint), 0 0 0 4px var(--blue); }
  100% { box-shadow: 0 0 0 3px transparent, 0 0 0 4px transparent; }
}
.hl-row__act { display: flex; gap: 4px; flex: none; opacity: 0; transition: opacity var(--t); }
.hl-row:hover .hl-row__act, .hl-row:focus-within .hl-row__act { opacity: 1; }
@media (hover: none) { .hl-row__act { opacity: 1; } }
.hl-row + .hl-row { border-top: 1px solid var(--rule); padding-top: 10px; }

/* ── notebook toolbar ───────────────────────────────────────────────── */

.tb {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 2px;
  padding: 6px 8px; border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  position: relative; z-index: 2;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tb::-webkit-scrollbar { display: none; }
.tb__b, .tb__sel, .tb__sep { flex: none; }
.tb__b {
  min-width: 25px; height: 25px; padding: 0 5px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 1;
  transition: background var(--t), color var(--t);
}
.tb__b:hover { background: var(--surface-3); color: var(--ink); }
.tb__b:active { background: var(--rule-2); }
.tb__b--b { font-weight: 800; }
.tb__b--i { font-family: var(--prose); font-style: italic; font-weight: 500; }
.tb__b--u { text-decoration: underline; text-underline-offset: 2px; }
.tb__b--s { text-decoration: line-through; }
.tb__ink { border-bottom: 3px solid var(--blue); line-height: 1.1; }
.tb__mark { background: #fde68a; color: #101f33; padding: 0 3px; border-radius: 2px; }

/* split button: face applies the last colour, caret opens the palette */
.tb__split { flex: none; display: inline-flex; align-items: center; }
.tb__split__face {
  min-width: 22px; padding: 0 3px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.tb__split__more {
  min-width: 0; width: 13px; padding: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.tb__split__more::after {
  content: ""; width: 9px; height: 9px; background: var(--ink-3);
  -webkit-mask: var(--chev-d) center / 9px no-repeat;
  mask: var(--chev-d) center / 9px no-repeat;
  --chev-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}
.tb__split__more:hover::after { background: var(--ink); }
/* Hovering either half lights the whole control, so it reads as one button. */
.tb__split:hover .tb__b { background: var(--surface-3); color: var(--ink); }

/* Ring kept tight: the swatch gap is 5px, so a wider one would touch its
   neighbours. */
.tb__sw[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), 0 0 0 1.5px var(--surface), 0 0 0 3px var(--blue);
}

.tb__sep { width: 1px; height: 16px; background: var(--rule-2); margin: 0 4px; }

.tb__sel {
  height: 25px; padding: 0 20px 0 7px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  font-size: 12px; font-weight: 550; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236c7b8e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m3 4.6 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 11px;
}
.tb__sel:hover { background-color: var(--surface-3); color: var(--ink); }

.tb__pop {
  position: fixed; z-index: 66;
  padding: 7px; border-radius: 9px;
  background: var(--surface); border: 1px solid var(--rule);
  box-shadow: var(--shadow-3);
  animation: pop .13s var(--ease);
}
.tb__swatches { display: grid; grid-template-columns: repeat(6, 22px); gap: 5px; }
.tb__sw {
  width: 22px; height: 22px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: transform var(--t);
}
.tb__sw:hover { transform: scale(1.12); }
.tb__clear {
  display: block; width: 100%; margin-top: 6px; padding: 4px;
  border-radius: var(--r-sm); font-size: 11.5px; color: var(--ink-3);
}
.tb__clear:hover { background: var(--surface-2); color: var(--ink); }

/* formatting produced by the toolbar */
.doc s, .doc strike, .doc del { text-decoration: line-through; }
.doc pre {
  font-family: var(--mono); font-size: 13.5px; background: var(--surface-2);
  padding: 10px 12px; border-radius: var(--r); white-space: pre-wrap;
}

/* choice cards in the export dialog */
.pick-card {
  display: grid; gap: 3px; width: 100%; padding: 11px 13px; text-align: left;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--t), background var(--t);
}
.pick-card:hover { border-color: var(--ink-4); }
.pick-card[aria-pressed="true"] {
  border-color: var(--blue); background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.pick-card b { font-size: 13.5px; font-weight: 620; }
.pick-card span { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* where the caret was, once the note loses focus */
.doc-caret {
  position: absolute; left: 0; width: 2px; border-radius: 1px;
  background: var(--blue); opacity: 0; pointer-events: none;
  transition: opacity var(--t), top .18s var(--ease), height .18s var(--ease);
}
.doc-caret.on { opacity: .5; pointer-events: auto; }

/* the note's own title, above the document */
/* Clearly above Heading 1, or the note's name and its first section read as
   the same rank. */
.note-title {
  width: 100%; border: 0; background: none; padding: 0 0 8px;
  font-family: var(--ui); font-size: 25px; font-weight: 670;
  letter-spacing: -.022em; color: var(--ink);
}
.note-title:focus { outline: none; }
.note-title::placeholder { color: var(--ink-4); font-weight: 600; }


/* ── a note on a page of its own ────────────────────────────────────── */

/* Same editor as the panel, so it keeps the panel's four-row grid; only the
   things that made it a side panel are undone. */
.panel--page {
  grid-column: auto; grid-row: auto;
  /* Three children here, not four — the head moved to the shell's topbar. One
     row too many and the toolbar takes the flexible row and collapses. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%; border-left: 0;
  background: var(--surface);
}
.panel--page .tb,
.panel--page .panel__foot { padding-inline: 24px; }
/* A line length you can actually read, rather than the full width of a screen.
   The full page earns its room the way a document does — the footprint of a
   Letter sheet with the type scaled up to fill it, headings in step — because
   wider lines would pass a hundred characters and cost more than they give. */
.panel--page .panel__inner { max-width: 816px; margin: 0 auto; padding: 34px 24px 80px; }
.panel--page .note-title { font-size: 32px; }
.panel--page .doc { font-size: 18px; }
.panel--page .doc h1 { font-size: 22px; }
.panel--page .doc h2 { font-size: 20px; }
.panel--page .doc h3 { font-size: 17.5px; }

/* A phone is not a sheet of paper: the page's margins and its larger type are
   what a wide screen earns, and keeping them here would leave barely thirty
   characters on a line. */
@media (max-width: 700px) {
  .panel--page .tb,
  .panel--page .panel__foot { padding-inline: 14px; }
  .panel--page .panel__inner { padding: 20px 16px 72px; }
  .panel--page .note-title { font-size: 26px; }
  .panel--page .doc { font-size: 16.5px; }
  .panel--page .doc h1 { font-size: 20px; }
  .panel--page .doc h2 { font-size: 18.5px; }
  .panel--page .doc h3 { font-size: 16px; }
}

/* Dragged past the point of being readable: it fades out under the pointer so
   the gesture reads as closing rather than as a resize that has stuck. */
.panel--shutting { opacity: .35; }
.panel--shutting .panel__grip { background: color-mix(in srgb, var(--blue) 40%, transparent); }
body.resizing-panel .panel { transition: opacity .12s var(--ease); }

/* ══ the reading sheet ════════════════════════════════════════════════ */

/* Placed in the shell's own grid at the main column, which is what keeps it
   off the notebook: the note stays in column three, readable and writable,
   while the sheet covers only the page being read. */
.sheet-layer {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 20;
  display: flex; justify-content: flex-end;
  min-width: 0;
}

.sheet__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  animation: fade .16s var(--ease);
  cursor: pointer;
}

.sheet {
  position: relative;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  min-height: 0; max-width: 100%;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-3);
  animation: sheet-in .24s var(--ease);
}
@keyframes sheet-in { from { transform: translateX(18px); opacity: 0 } }

.sheet__grip {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; z-index: 3;
  cursor: col-resize;
}
.sheet__grip:hover { background: color-mix(in srgb, var(--blue) 26%, transparent); }
.sheet--shutting { opacity: .35; }
.sheet--shutting .sheet__grip { background: color-mix(in srgb, var(--blue) 40%, transparent); }
body.resizing-panel .sheet { transition: opacity .12s var(--ease); }

.sheet__head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px 9px 14px;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  min-height: 46px;
}
.sheet__title { display: grid; gap: 1px; min-width: 0; flex: 1; }
.sheet__title h2 { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.sheet__title p { font-size: 11.5px; color: var(--ink-3); }
.sheet__act { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }

.sheet__ico {
  width: 27px; height: 27px; border-radius: var(--r-sm); flex: none;
  display: grid; place-content: center;
  color: var(--ink-3); font-size: 13px;
  transition: background var(--t), color var(--t);
}
.sheet__ico:hover { background: var(--surface-3); color: var(--ink); }
.sheet__ico[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue); }

.sheet__load { padding: 40px; text-align: center; font-size: 13px; color: var(--ink-4); }

/* Contents beside the text, the way a bound volume carries them. */
.sheet__body {
  display: grid; grid-template-columns: 186px minmax(0, 1fr);
  min-height: 0;
}
.sheet__body--plain, .sheet--noToc .sheet__body { grid-template-columns: minmax(0, 1fr); }
.sheet--noToc .sheet__toc { display: none; }

.sheet__toc {
  border-right: 1px solid var(--rule);
  padding: 14px 10px; overflow-y: auto;
  background: var(--surface-2);
}
.sheet__toc .label { padding: 0 8px 8px; display: block; }
.sheet__toc-list { display: grid; gap: 1px; }
.sheet__toc-l {
  display: block; width: 100%; text-align: left;
  padding: 5px 8px; border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.35;
  transition: background var(--t), color var(--t);
}
.sheet__toc-l:hover { background: var(--surface-3); color: var(--ink); }

.sheet__toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  margin-top: 14px; padding: 8px; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-2); user-select: none;
}
.sheet__toggle input { accent-color: var(--blue); width: 13px; height: 13px; }
.sheet__toggle-n {
  margin-left: auto; font-size: 10.5px; font-weight: 620;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}

.sheet__doc { min-height: 0; overflow-y: auto; }
.sheet__inner { max-width: 74ch; padding: 26px 30px 90px; }
.sheet__item { max-width: none; }

/* Below the width where a column of its own makes sense, the sheet is the
   page: full bleed, contents folded away behind its button. */
@media (max-width: 1000px) {
  .sheet-layer { position: fixed; inset: 0; z-index: 46; }
  .sheet { width: 100% !important; border-left: 0; }
  .sheet__grip { display: none; }
  .sheet__body { grid-template-columns: minmax(0, 1fr); }
  .sheet__toc { display: none; }
  .sheet__inner { padding: 20px 18px 80px; }
}

/* ══ a library topic, as a document ═══════════════════════════════════ */

.topic { font-family: var(--prose); font-size: 16.5px; line-height: 1.68; color: var(--ink); }
/* What the entry covers, under the name that already says what it is. */
.topic__blurb {
  font-family: var(--ui); font-size: 12.5px; line-height: 1.45;
  color: var(--ink-3); margin-bottom: 14px;
}
.topic__lead {
  font-size: 17.5px; line-height: 1.6; color: var(--ink-2);
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}
.topic__sec { margin-top: 26px; }
.topic__h {
  font-family: var(--ui); font-size: 15px; font-weight: 660;
  letter-spacing: .0;
  padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 12px;
}
.topic p { margin-bottom: 12px; }
.topic p:last-child { margin-bottom: 0; }
.topic__sec, .topic { min-width: 0; }
/* A wide comparison table scrolls within its own box rather than widening the
   column the prose is set in. */
.topic .xtab { margin: 16px 0; max-width: 100%; }
.topic .xtab .table-wrap { max-width: 100%; overflow-x: auto; }

.topic__keys {
  margin-top: 18px; padding: 13px 15px;
  border-left: 2px solid var(--blue);
  background: var(--blue-tint);
  border-radius: 0 var(--r) var(--r) 0;
}
.topic__keys .label { margin-bottom: 7px; }
.topic__keys ul { display: grid; gap: 5px; }
.topic__keys li {
  font-size: 14.5px; line-height: 1.5; padding-left: 15px; position: relative;
}
.topic__keys li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--blue);
}

.topic__related { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule); }
.topic__related .label { margin-bottom: 8px; }

/* The bank's questions, filed under the passage each one examines. */
.topic__qs {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface-2);
}
.topic__qs .label { margin-bottom: 8px; }
.topic__qlist { display: grid; gap: 1px; min-width: 0; }
/* A grid item will not shrink below its content unless told to, which is what
   let a long lead-in push the whole document sideways. */
.topic__q {
  display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0;
  padding: 7px 8px; border-radius: var(--r-sm); text-align: left;
  font-family: var(--ui); font-size: 12.5px; color: var(--ink-2);
  transition: background var(--t), color var(--t);
}
.topic__q:hover { background: var(--surface); color: var(--ink); }
.topic__q-id {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4); flex: none;
}
.topic__q-ask { flex: 1; min-width: 0; }

/* The item's own way into the reading, at the end of its explanation. */
.expl__lib {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--surface-2);
}
.expl__lib b { font-size: 14px; font-weight: 640; }
.expl__lib p { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }

.badge--link {
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.badge--link:hover { background: var(--blue-tint); color: var(--blue); }

/* ══ the library viewer ═══════════════════════════════════════════════ */

/* Sized against the space the viewer actually has rather than the window's
   width: with the notebook open the page is a third narrower, and a layout
   that only watched the viewport would keep three columns in room for one. */
.lib-wrap { container: lib / inline-size; height: 100%; min-height: 0; }

.lib {
  display: grid;
  grid-template-columns: 234px minmax(0, 1fr) 190px;
  height: 100%; min-height: 0;
}

.lib-nav {
  border-right: 1px solid var(--rule);
  padding: 16px 10px 30px; overflow-y: auto;
  background: var(--surface);
  min-height: 0;
}
.lib-nav__back {
  display: block; width: 100%; text-align: left;
  padding: 4px 8px 10px;
  font-size: 12px; color: var(--ink-3);
  transition: color var(--t);
}
.lib-nav__back:hover { color: var(--blue); }

/* Browsing every chapter without leaving the topic on screen. */
.lib-nav__chs { display: grid; gap: 1px; min-width: 0; }
.lib-nav__chs > li { min-width: 0; }
.lib-nav__chb {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 7px 8px; border-radius: var(--r); text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: background var(--t), color var(--t);
}
.lib-nav__chb:hover { background: var(--surface-2); color: var(--ink); }
.lib-nav__chb[aria-expanded="true"] { color: var(--ink); }
.lib-nav__chb .shelf__chev { width: 12px; height: 12px; }
.lib-nav__chb[aria-expanded="true"] .shelf__chev { transform: rotate(90deg); }
.lib-nav__chs .lib-nav__ts { padding: 2px 0 8px 14px; }
.lib-nav__chs .lib-nav__t { font-size: 12.5px; padding: 5px 9px; }
.lib-nav__ch {
  display: flex; align-items: center; gap: 7px;
  padding: 0 8px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.lib-nav ul { display: grid; gap: 1px; min-width: 0; }
.lib-nav li { min-width: 0; }
.lib-nav { overflow-x: hidden; }
.lib-nav__t {
  display: block; width: 100%; text-align: left;
  padding: 6px 9px; border-radius: var(--r);
  font-size: 13px; color: var(--ink-2); line-height: 1.35;
  transition: background var(--t), color var(--t);
}
.lib-nav__t:hover { background: var(--surface-2); color: var(--ink); }
.lib-nav__t[aria-current="true"] {
  background: var(--blue-tint); color: var(--blue); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--blue);
}

.lib-doc { min-height: 0; overflow-y: auto; background: var(--paper); }
.lib-doc__inner { max-width: 76ch; margin: 0 auto; padding: 34px 40px 100px; }
.lib-doc__head { margin-bottom: 20px; }
.lib-doc__ch {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
}
.lib-doc__head h1 {
  font-size: 31px; font-weight: 660; letter-spacing: -.022em; line-height: 1.15;
}
/* The viewer names the topic in its heading, so the entry's own blurb sits
   with that heading rather than repeating itself further down. */
.lib-doc__head .topic__blurb { margin: 8px 0 0; font-size: 13px; }
.lib-doc .topic { font-size: 17px; }
.lib-doc .notice { margin-top: 30px; }

.lib-toc {
  border-left: 1px solid var(--rule);
  padding: 34px 12px 30px; overflow-y: auto;
  min-height: 0;
}
.lib-toc .label { display: block; padding: 0 8px 8px; }
.lib-toc ul { display: grid; gap: 1px; }
.lib-toc__l {
  display: block; width: 100%; text-align: left;
  padding: 4px 8px; border-radius: var(--r-sm);
  font-size: 12px; color: var(--ink-3); line-height: 1.35;
  border-left: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.lib-toc__l:hover { color: var(--ink); }
.lib-toc__l[aria-current="true"] {
  color: var(--blue); border-left-color: var(--blue); font-weight: 600;
}

/* contents listing */
.lib-topics { display: grid; }
.lib-topic {
  display: grid; gap: 2px; width: 100%; text-align: left;
  padding: 10px 16px 10px 26px;
  border-top: 1px solid var(--rule);
  transition: background var(--t);
}
.lib-topic:first-child { border-top: 0; }
.lib-topic:hover { background: var(--surface-2); }
.lib-topic__t { font-size: 13.5px; font-weight: 600; }
.lib-topic__s { font-family: var(--prose); font-size: 13px; color: var(--ink-3); }

.lib-hits { display: grid; gap: 1px; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.lib-hit {
  display: grid; grid-template-columns: auto auto auto minmax(0, 1fr);
  align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 10px 14px; background: var(--surface);
  border-top: 1px solid var(--rule);
  transition: background var(--t);
}
.lib-hit:first-child { border-top: 0; }
.lib-hit:hover { background: var(--surface-2); }
.lib-hit__t { font-size: 13.5px; font-weight: 620; }
.lib-hit__c { font-size: 11.5px; color: var(--ink-4); }
.lib-hit__s { font-family: var(--prose); font-size: 13px; color: var(--ink-3); }

@container lib (max-width: 1000px) {
  .lib { grid-template-columns: 216px minmax(0, 1fr); }
  .lib-toc { display: none; }
  .lib-doc__inner { padding: 30px 28px 90px; }
}
@container lib (max-width: 680px) {
  .lib { grid-template-columns: minmax(0, 1fr); }
  .lib-nav { display: none; }
  .lib-doc__inner { padding: 22px 18px 80px; }
  .lib-doc__head h1 { font-size: 26px; }
}
@media (max-width: 860px) {
  .lib-hit { grid-template-columns: auto minmax(0, 1fr); }
  .lib-hit__c, .lib-hit__s { grid-column: 1 / -1; }
}

/* Evicue account, study focus and unobtrusive save state. */
.login-card { width:min(390px, calc(100vw - 40px)); text-align:left; display:grid; gap:18px; padding:32px; background:var(--paper, #fff); border:1px solid var(--rule); border-radius:18px; }
.login-brand { width:156px; margin-bottom:2px; }
.login-card h1 { font-size:26px; line-height:1.2; margin:0; }
.login-card .input,.login-card .btn { min-height:44px; }
.login-label { display:grid; gap:8px; font-size:14px; font-weight:550; }
.login-error { color:var(--red, #b45445); font-size:14px; margin:0; }
.login-card .login-error:empty { display:none; }
.save-status { font-size:12px; color:var(--ink-3); max-width:240px; }
.save-status[data-phase="pending"], .save-status[data-phase="attention"] { color:var(--amber); }
.focus-toggle { display:flex; gap:12px; align-items:center; margin:14px 0; cursor:pointer; }
.focus-toggle input { width:18px; height:18px; accent-color:var(--blue); }
.focus-toggle span { display:grid; gap:4px; }
.focus-toggle small { font-size:13px; color:var(--ink-3); }
.first-attempt-stat { white-space:nowrap; }
.first-attempt-stat small { color:var(--ink-3); font-size:12px; }
.clinical-figure { margin:24px 0; }
.clinical-figure img { display:block; width:auto; max-width:100%; max-height:70vh; object-fit:contain; border-radius:8px; background:#fff; }
.clinical-figure figcaption { color:var(--ink-3); font-size:13px; margin-top:8px; line-height:1.5; }
.clinical-figure a { color:inherit; }
.clinical-table { overflow-x:auto; margin:20px 0; }
.clinical-table table { width:100%; border-collapse:collapse; font-size:15px; }
.clinical-table th, .clinical-table td { text-align:left; vertical-align:top; padding:12px; border-bottom:1px solid var(--rule); }
.clinical-table th { background:var(--wash); }
.clinical-emphasis { color:var(--red, #b45445); font-weight:600; }
@media(max-width:700px) { .save-status { max-width:120px; font-size:12px; } .topbar__actions { gap:6px; } }
.editor-controls { display:grid;grid-template-columns:2fr 1fr;gap:16px; }
.modal__box.editor-dialog { display:flex;flex-direction:column;overflow:hidden; }
.editor-dialog .modal__head,.editor-dialog .modal__foot { flex-shrink:0; }
.editor-dialog .modal__body { overflow:auto;min-height:0;overscroll-behavior:contain; }
.editor-form .focus-toggle { margin:0;min-height:44px; }
.editor-section summary { cursor:pointer;padding:8px 0;font-weight:550; }
.editor-section[open] summary { margin-bottom:8px; }
.editor-current:not(:empty) { padding:12px;border:1px solid var(--rule);border-radius:10px; }
.editor-form .login-error:empty,.editor-current:empty,.editor-local-actions:empty,.editor-pending:empty { display:none; }
.feedback-card { display:block;padding:14px 0;border-bottom:1px solid var(--rule);text-align:left;white-space:pre-wrap; }
.feedback-card p { margin:6px 0; }
.feedback-card--link { width:100%;background:none;border-width:0 0 1px;color:inherit;cursor:pointer; }
.feedback-card--link:hover { background:var(--surface-2); }
.clinical-teaching li { margin:12px 0;line-height:1.65; }
.references { font-size:.84rem;line-height:1.6; }
.references li { margin:8px 0; }
@media(max-width:600px){
  .editor-controls {grid-template-columns:1fr;}
  .editor-dialog .input,.editor-dialog .btn {min-height:44px;}
  .editor-dialog .modal__foot {flex-wrap:wrap;}
}
.login-email summary { cursor:pointer;font-size:14px;color:var(--ink-2);padding:10px 0;min-height:44px; }
.login-email .login-label { margin-top:12px; }
.login-email .btn { margin-top:16px; }