/* Library page: green hero, tests ledger + quiz, states, myths, pharma, books. */

:root { --lib-accent: var(--green); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --lib-accent: color-mix(in srgb, var(--green) 50%, var(--on-green)); }
}
:root[data-theme="dark"] { --lib-accent: color-mix(in srgb, var(--green) 50%, var(--on-green)); }

/* ---------- hero (green plane) ---------- */
.lib-hero { padding: clamp(44px, 6vw, 96px) 0 8px; }
.lib-hero-grid { display: grid; gap: clamp(24px, 3vw, 40px); }
.lib-hero .h1 { font-size: clamp(50px, 19vw, 150px); }
.lib-hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(32px, 5vw, 96px); align-items: end; }
.lib-hero-crisis { font-size: 17px; line-height: 1.45; max-width: 26em; }
.lib-hero-crisis a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 0 12px; margin: 2px 0; border: 2px solid currentColor; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lib-jump { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 48px); border-top: 2px solid var(--on-green); padding-top: 6px; margin-top: clamp(4px, 1vw, 16px); }
.lib-jump a { display: inline-flex; align-items: center; min-height: 52px; font-weight: 700; font-size: clamp(19px, .6vw + 16px, 24px); text-decoration-thickness: 2px; }
.lib-jump a:hover { text-decoration-thickness: 4px; }
@media (max-width: 760px) {
  .lib-hero-copy { grid-template-columns: 1fr; }
  .lib-hero { padding-top: 32px; }
  .lib-jump { flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .lib-jump::-webkit-scrollbar { display: none; }
  .lib-jump a { min-height: 48px; white-space: nowrap; flex: none; }
}

.lib-head p { max-width: 40em; font-size: clamp(18px, .3vw + 16px, 20px); }

/* ---------- tests ledger ---------- */
.tests { border-bottom: var(--rule); }
.test-row {
  display: grid; grid-template-columns: clamp(150px, 17vw, 260px) minmax(0, 1fr) auto; align-items: center;
  gap: 10px clamp(20px, 3vw, 48px); border-top: var(--rule); padding: 20px 0; min-height: 104px;
}
.test-code { font-weight: 700; font-size: clamp(26px, 1.4vw + 17px, 38px); line-height: 1.05; letter-spacing: -.02em; color: var(--lib-accent); }
.test-title { font-weight: 700; font-size: clamp(19px, .5vw + 17px, 23px); line-height: 1.22; }
.test-meta { margin-top: 4px; }
.test-done { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; }
.test-done .mark-check { color: var(--lib-accent); flex: none; }
.test-go { min-width: 170px; }
.tests-store { margin-top: 16px; }
@media (max-width: 700px) {
  .test-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "code go" "body body"; padding: 16px 0 18px; }
  .test-code { grid-area: code; font-size: 28px; }
  .test-go { grid-area: go; min-width: 0; min-height: 44px; padding: 0 16px; font-size: 16px; }
  .test-body { grid-area: body; }
}

/* ---------- states navigator ---------- */
.states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); border-bottom: var(--rule); }
.states li { display: flex; border-top: var(--rule); }
.state {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-content: start;
  padding: 18px 0 24px; background: none; border: 0; text-align: left; cursor: pointer; min-height: 44px;
}
.state-cat { grid-column: 1; }
.state-title { grid-column: 1; margin-top: 4px; font-weight: 700; font-size: clamp(21px, .8vw + 17px, 27px); line-height: 1.2; letter-spacing: -.005em; }
.state .mark-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.state:hover .state-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
@media (prefers-reduced-motion: no-preference) {
  .state .mark-go { transition: transform .18s var(--ease); }
  .state:hover .mark-go { transform: translateX(4px); }
}
@media (max-width: 760px) { .states { grid-template-columns: 1fr; } }

/* ---------- myths ---------- */
.myths { border-bottom: var(--rule); }
.myth { border-top: var(--rule); }
.myth summary {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 24px; align-items: start;
  padding: 20px 0; cursor: pointer;
}
.myth summary::-webkit-details-marker { display: none; }
.myth-q { font-weight: 700; font-size: clamp(20px, .9vw + 16px, 26px); line-height: 1.24; max-width: 34em; }
.myth summary:hover .myth-q { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
.pm { position: relative; width: 44px; height: 44px; margin-top: -6px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.pm::before { width: 24px; height: 3px; margin: -1.5px 0 0 -12px; }
.pm::after { width: 3px; height: 24px; margin: -12px 0 0 -1.5px; }
.myth[open] .pm::after { transform: scaleY(0); }
.myth-fact { max-width: 42em; padding: 0 68px 28px 0; font-size: clamp(18px, .3vw + 16px, 20px); }
@media (prefers-reduced-motion: no-preference) { .pm::after { transition: transform .2s var(--ease); } }
@media (max-width: 560px) {
  .myth summary { gap: 12px; }
  .myth-fact { padding-right: 0; }
}

/* ---------- pharmacotherapy ---------- */
.pharma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 96px); }
.pharma-item { border-top: var(--rule); padding: 18px 0 clamp(28px, 3vw, 44px); }
.pharma-item p { margin-top: 10px; max-width: 34em; }
@media (max-width: 760px) { .pharma { grid-template-columns: 1fr; } }

/* ---------- books ---------- */
.books { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.book { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; }
.book img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border: var(--rule); margin-bottom: 10px; background: var(--paper-2); }
.book-title { font-weight: 700; font-size: clamp(17px, .3vw + 15px, 19px); line-height: 1.25; }
.book:hover .book-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .16em; }
@media (max-width: 860px) {
  .books {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scroll-padding: 0 var(--gutter);
  }
  .books li { flex: 0 0 min(56vw, 240px); scroll-snap-align: start; }
}

/* ---------- closing band ---------- */
.lib-cta { padding: var(--course) 0; }
.lib-cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
.lib-cta .lede { margin-bottom: 28px; }
@media (max-width: 900px) { .lib-cta-grid { grid-template-columns: 1fr; } }

/* ---------- dialog content ---------- */
.dlg-list li { position: relative; padding: 10px 0 10px 26px; border-top: var(--hair); }
.dlg-list li:first-child { border-top: 0; }
.dlg-list li::before { content: ""; position: absolute; left: 2px; top: calc(10px + .62em); width: 9px; height: 9px; background: var(--lib-accent); }
.dlg-disclaimer { margin-top: 24px; }
.book-detail { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; }
.book-detail img { width: 100%; border: var(--rule); }
.book-tag { margin-bottom: 10px; }
@media (max-width: 560px) { .book-detail { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; } }

/* ---------- quiz ---------- */
.quiz-progress { margin-bottom: 16px; }
.quiz-count { margin-bottom: 8px; }
.quiz-bar { height: 4px; background: var(--paper-2); }
.quiz-bar span { display: block; height: 100%; background: var(--ink); }
.quiz-instr { margin-bottom: 14px; }
.quiz-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.dlg-body .quiz-q { font-size: clamp(21px, 1vw + 17px, 26px); line-height: 1.25; margin: 0 0 18px; }
.quiz-q:focus { outline: none; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 16px; border: var(--rule); cursor: pointer; line-height: 1.3;
}
.quiz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.quiz-mark { width: 24px; height: 24px; border: 2px solid currentColor; display: grid; place-items: center; }
.quiz-opt.is-on { font-weight: 700; }
.quiz-opt.is-on .quiz-mark::after { content: ""; width: 12px; height: 12px; background: currentColor; }
@media (hover: hover) { .quiz-opt:hover { background: var(--paper-2); } }
.quiz-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.quiz-nav .btn { min-width: 140px; }
@media (max-width: 560px) { .quiz-nav .btn { flex: 1; min-width: 0; padding: 0 14px; } }
@media (prefers-reduced-motion: no-preference) { .quiz-bar span { transition: width .3s var(--ease); } }

.quiz-score { font-weight: 700; line-height: .9; letter-spacing: -.03em; }
.quiz-score b { font-size: clamp(72px, 9vw, 112px); }
.quiz-score span { font-size: clamp(28px, 3vw, 40px); color: var(--ink-2); letter-spacing: 0; }
.quiz-score:focus { outline: none; }
.quiz-level { margin-top: 14px; font-weight: 700; font-size: clamp(24px, 1.2vw + 18px, 32px); line-height: 1.15; }
.quiz-advice { margin-top: 12px; }
.quiz-flag { padding: 18px 18px 16px; margin-bottom: 24px; }
.quiz-flag > b { display: block; font-size: clamp(22px, 1vw + 18px, 28px); line-height: 1.15; }
.quiz-flag p { margin-top: 8px; }
.quiz-flag .quiz-flag-call { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.quiz-warn { background: var(--paper-2); padding: 14px 16px; margin-top: 16px; font-size: 16px; }
.quiz-warn p { margin-top: 4px; }
.quiz-scales { border-top: var(--rule); border-bottom: var(--rule); }
.quiz-scale { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 10em); gap: 2px 16px; align-items: baseline; padding: 12px 0; border-top: var(--hair); }
.quiz-scale:first-child { border-top: 0; }
.quiz-scale-name { font-weight: 700; }
.quiz-scale-num { font-weight: 700; font-size: 26px; line-height: 1; white-space: nowrap; }
.quiz-scale-num small { font-size: 16px; font-weight: 400; color: var(--ink-2); }
.quiz-scale-level { color: var(--ink-2); font-size: 16px; text-align: right; }
@media (max-width: 560px) {
  .quiz-scale { grid-template-columns: minmax(0, 1fr) auto; }
  .quiz-scale-level { grid-column: 1 / -1; text-align: left; }
}
.quiz-note { margin-top: 16px; }
.quiz-foot { margin-top: 20px; padding-top: 16px; border-top: var(--hair); }