/* =============================================================
   Psychofarm - Library, Patients and Plans pages
   -------------------------------------------------------------
   Shared by library.html, guides.html, dsm-sheets.html,
   patient-resources.html, skill-sheets.html, guide-builder.html,
   patients.html and plans.html. The tab bar, unlock options and plans
   table are stamped into those pages by sync-site-header.mjs from
   site-plans.mjs, so the markup here is written for that output.
   Tokens come from styles.css.
   ============================================================= */

/* ---------- Colour: one hue for every group in the Library ----------
   Every group gets a hue, set as --h (degrees on the OKLCH wheel) by a data attribute: the 22 drug classes
   (data-cls), the 7 drug categories and 9 rating-scale topics (data-cat), the 15 DSM-5 chapters (data-sheet),
   the Patient resources kinds and skill-sheet themes (data-section, data-theme), the Guide Builder steps
   (data-step) and the six shelves (data-shelf). Anything inside inherits it. OKLCH keeps every hue at the same
   lightness, so a card is the same navy-blue card the site started with, turned to a new hue: SSRI blue is
   the original. --k lowers the colour for quieter groups, --dl lifts a hue that reads muddy when dark.
   The tokens below turn --h into the colours a card, a heading and a dot use. */
:root {
  --h: 255; --k: 1; --dl: 0;
  /* plain colours for a browser without OKLCH; the block under it replaces them */
  --c-deep: #102A43; --c-lift: #1e3a5f; --c-glow: rgb(34 211 238 / .2); --c-soft: #B7C7DB;
  --c-ink: #0F172A; --c-tint: #E6EBF1; --c-line: rgb(15 23 42 / .14); --c-dot: #94A3B8; --c-dot-hi: #94A3B8;
}
@supports (color: oklch(0.5 0.1 200)) {
  * {
    /* orange goes brown when dark, so it rises a little: 0 outside red-orange to amber, full from 40 to 85 */
    --warm: calc(0.10 * clamp(0, (var(--h) - 15) / 25, 1) * clamp(0, (115 - var(--h)) / 30, 1));
    --c-deep: oklch(calc(0.30 + var(--dl) + var(--warm)) calc(0.085 * var(--k)) var(--h));
    --c-lift: oklch(calc(0.44 + var(--dl) + var(--warm)) calc(0.145 * var(--k)) var(--h));
    --c-glow: oklch(0.78 calc(0.16 * var(--k)) var(--h) / .35);
    --c-soft: oklch(0.86 calc(0.065 * var(--k)) var(--h));
    --c-ink: oklch(0.38 calc(0.11 * var(--k)) var(--h));
    --c-tint: oklch(0.94 calc(0.04 * var(--k)) var(--h));
    --c-line: oklch(0.86 calc(0.07 * var(--k)) var(--h));
    --c-dot: oklch(0.70 calc(0.15 * var(--k)) var(--h));
    --c-dot-hi: oklch(0.80 calc(0.15 * var(--k)) var(--h));
  }
}

/* drug classes, in page order */
[data-cls="SSRI"]                               { --h: 255; }
[data-cls="SNRI"]                               { --h: 215; }
[data-cls="TCA"]                                { --h: 279; }
[data-cls="MAOI"]                               { --h: 310; }
[data-cls="Atypical Antidepressant"]            { --h: 178; }
[data-cls="Rapid-Acting Antidepressant"]        { --h: 238; --dl: .08; }
[data-cls="Atypical (2nd-Gen) Antipsychotic"]   { --h: 332; }
[data-cls="Typical (1st-Gen) Antipsychotic"]    { --h: 357; }
[data-cls="Class Guide"]                        { --h: 158; --dl: .05; }
[data-cls="Mood Stabilizer"]                    { --h: 158; }
[data-cls="Benzodiazepine"]                     { --h: 58; }
[data-cls="Hypnotic / Sleep Medication"]        { --h: 292; }
[data-cls="Non-Benzodiazepine Anxiolytic"]      { --h: 142; }
[data-cls="Stimulant"]                          { --h: 24; }
[data-cls="Non-Stimulant ADHD Medication"]      { --h: 46;  --dl: .02; }
[data-cls="Substance Use Disorder Medication"]  { --h: 200; }
[data-cls="Gabapentinoid"]                      { --h: 215; --k: .5; }
[data-cls="Wakefulness-Promoting Agent"]        { --h: 50;  --k: .5; }
[data-cls="NMDA-Antagonist Cognitive Enhancer"] { --h: 300; --k: .5; }
[data-cls="Dopamine Agonist"]                   { --h: 350; --k: .5; }
[data-cls="Alpha-1 Antagonist"]                 { --h: 158; --k: .5; }
[data-cls="Beta Blocker"]                       { --h: 255; --k: .5; }

/* drug categories, then rating-scale topics (a topic that echoes a drug category takes its colour) */
[data-cat="Antidepressants"]                    { --h: 255; }
[data-cat="Antipsychotics"]                     { --h: 335; }
[data-cat="Mood Stabilizers"]                   { --h: 158; }
[data-cat="Anxiolytics & Sedatives"]            { --h: 58; }
[data-cat="ADHD & Stimulants"]                  { --h: 30; }
[data-cat="Substance Use Disorder Meds"]        { --h: 200; }
[data-cat="Other / Adjunct"]                    { --h: 255; --k: .3; }
[data-cat="Depression and mood"]                { --h: 255; }
[data-cat="Bipolar spectrum"]                   { --h: 148; }
[data-cat="Anxiety and trauma"]                 { --h: 182; }
[data-cat="Obsessive-compulsive disorder"]      { --h: 305; }
[data-cat="ADHD"]                               { --h: 28; }
[data-cat="Suicide risk"]                       { --h: 355; }
[data-cat="Substance use and withdrawal"]       { --h: 220; }
[data-cat="Psychosis and global severity"]      { --h: 330; }
[data-cat="Medication side effects"]            { --h: 255; --k: .35; }

/* DSM-5 chapters: a chapter and its companion share a hue, the companion a touch lighter */
[data-sheet="dsm-disruptive-paraphilic"]        { --h: 20; }
[data-sheet="dsm-eating-elimination"]           { --h: 44; }
[data-sheet="dsm-anxiety-trauma"]               { --h: 148; }
[data-sheet="dsm-somatic-medication"]           { --h: 234; }
[data-sheet="dsm-neurocognitive"]               { --h: 172; }
[data-sheet="dsm-neurocognitive-subtypes"]      { --h: 172; --dl: .05; }
[data-sheet="dsm-substance"]                    { --h: 192; }
[data-sheet="dsm-neurodevelopmental"]           { --h: 212; }
[data-sheet="dsm-mood"]                         { --h: 255; }
[data-sheet="dsm-sleep"]                        { --h: 278; }
[data-sheet="dsm-ocd-dissociative"]             { --h: 302; }
[data-sheet="dsm-psychotic"]                    { --h: 324; }
[data-sheet="dsm-sexual-gender"]                { --h: 342; }
[data-sheet="dsm-personality"]                  { --h: 358; }
[data-sheet="dsm-personality-conditions"]       { --h: 358; --dl: .05; }

/* Patient resources: the five kinds of sections, and the five themes inside Skill sheets */
[data-section="overview"]   { --h: 176; }
[data-section="skill"]      { --h: 255; }
[data-section="guide"]      { --h: 305; }
[data-section="course"]     { --h: 50; }
[data-section="screener"]   { --h: 355; }
[data-theme="Anxiety and worry"]                { --h: 200; }
[data-theme="Thoughts and mood"]                { --h: 255; }
[data-theme="Calming the body and the moment"]  { --h: 148; }
[data-theme="Sleep, trauma and grief"]          { --h: 280; }
[data-theme="Relationships and families"]       { --h: 345; }
.fr-chip[data-topic="anxiety"]       { --h: 200; }
.fr-chip[data-topic="depression"]    { --h: 255; }
.fr-chip[data-topic="bipolar"]       { --h: 158; }
.fr-chip[data-topic="sleep"]         { --h: 280; }
.fr-chip[data-topic="adhd"]          { --h: 28; }
.fr-chip[data-topic="ocd"]           { --h: 305; }
.fr-chip[data-topic="trauma"]        { --h: 14; }
.fr-chip[data-topic="psychosis"]     { --h: 322; }
.fr-chip[data-topic="bpd"]           { --h: 358; }
.fr-chip[data-topic="addiction"]     { --h: 220; }
.fr-chip[data-topic="skills"]        { --h: 148; }
.fr-chip[data-topic="relationships"] { --h: 340; }

/* Guide Builder steps, and the six shelves (the Library home cards) */
[data-step="1"] { --h: 255; }
[data-step="2"] { --h: 190; }
[data-step="3"] { --h: 150; }
[data-step="4"] { --h: 305; }
[data-step="5"] { --h: 345; }
[data-shelf="guides"]   { --h: 190; }
[data-shelf="handouts"] { --h: 240; }
[data-shelf="dsm"]      { --h: 278; }
[data-shelf="scales"]   { --h: 12; }
[data-shelf="patients"] { --h: 55; }
[data-shelf="builder"]  { --h: 305; }

/* a small dot in a group's colour, in front of a filter button */
.chip-dot {
  content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%;
  background: var(--c-dot-hi); box-shadow: 0 0 0 1.5px rgb(11 18 32 / .45); vertical-align: 1px;
}

/* ---------- Library tab bar: where you are, every other shelf one click away ---------- */
.lib-tabs { position: relative; background: var(--ink); border-bottom: 1px solid var(--line-dark); }
.lib-tabs .container {
  display: flex; align-items: center; gap: var(--s-3); padding-block: 12px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lib-tabs .container::-webkit-scrollbar { display: none; }
.lib-tabs-home {
  flex: none; font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); text-decoration: none; padding-right: var(--s-3); border-right: 1px solid var(--line-dark-strong);
}
.lib-tabs-home:hover { color: #fff; }
.lib-tabs ul { flex: none; display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.lib-tab {
  display: inline-block; white-space: nowrap; padding: 7px clamp(8px, 1.1vw, 15px); border-radius: var(--r-pill);
  font-size: clamp(0.8125rem, 0.5rem + 0.55vw, 0.9375rem); font-weight: 500; color: var(--on-dark-soft); text-decoration: none;
  border: 1px solid transparent; transition: color .16s, background .16s, border-color .16s;
}
.lib-tab:hover { color: #fff; border-color: var(--line-dark-strong); }
.lib-tab[aria-current="page"] { background: #fff; color: var(--ink); font-weight: 600; }
.lib-tab-sep { flex: none; width: 1px; align-self: stretch; margin-inline: var(--s-1); background: var(--line-dark-strong); }
@media (max-width: 900px) { .lib-tabs-home { display: none; } }   /* the header's Members Library link goes to the same page; the room keeps all six tabs on one strip */
@media (max-width: 800px) {
  /* a window this narrow scrolls the strip: room at the end and a fade, so the last tab is not cut by the edge */
  .lib-tabs ul { padding-right: 32px; }
  .lib-tabs::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--ink)); }
}
.lib-tab:focus-visible, .lib-tabs-home:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 2px; }

/* ---------- Unlock options (on a dark hero) ---------- */
.unlock-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
  max-width: 780px; margin-top: var(--s-4);
}
.unlock-opt {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s-4) var(--s-5);
  border-radius: var(--r); background: rgba(255,255,255,.05); border: 1px solid var(--line-dark-strong);
  color: var(--on-dark); text-decoration: none;
  transition: border-color .16s var(--ease), transform .16s var(--ease), background .16s var(--ease);
}
a.unlock-opt:hover { border-color: var(--cyan); transform: translateY(-2px); background: rgba(255,255,255,.08); }
a.unlock-opt:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 2px; }
.unlock-opt--featured { border-color: var(--violet-soft); background: rgba(124,58,237,.16); }
.unlock-name { font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: .12em; text-transform: uppercase; color: var(--violet-soft); }
.unlock-price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); line-height: 1.1; color: #fff; }
.unlock-price small { font-family: var(--font-body); font-size: var(--fs-100); font-weight: 400; color: var(--on-dark-soft); }
.unlock-sub { font-size: var(--fs-100); line-height: 1.5; color: var(--on-dark-soft); }
.unlock-soon { margin-top: 4px; font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.unlock-opt--soon { opacity: .8; }
.unlock-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; font-size: var(--fs-100); }
.page-hero .unlock-foot { font-size: var(--fs-100); max-width: none; margin: var(--s-3) 0 0; }
.unlock-foot a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; }
.unlock-foot a:hover { color: var(--teal); }
.btn--disabled { opacity: .55; pointer-events: none; cursor: default; }
@media (max-width: 820px) {
  .unlock-grid { grid-template-columns: 1fr; max-width: 520px; }
}

/* ---------- "Get access" rectangle: first thing on every Library page, apart from the hero ---------- */
/* The band is the same midnight ink as the tab bar and the hero, so the tab bar, the rectangle and the
   page title read as one dark header with the rectangle as a panel inside it (no light strip around it).
   The panel is a lighter navy with a thin cyan-to-violet edge so it stands out from the title below. */
.lib-access-band { background: var(--ink); padding-block: var(--s-5) var(--s-3); }
.lib-access-band + .page-hero { padding-top: var(--s-6); border-top: 1px solid var(--line-dark); }
.lib-access-band + .page-hero .hero-grid-bg { top: 1px; }
.lib-access {
  background:
    linear-gradient(140deg, #0f1c33 0%, #122c49 100%) padding-box,
    linear-gradient(135deg, rgba(34, 211, 238, .55), rgba(124, 58, 237, .6)) border-box;
  border: 1px solid transparent; color: var(--on-dark);
  border-radius: var(--r-lg); padding: var(--s-6) var(--s-6);
  box-shadow: 0 18px 50px -24px rgba(124, 58, 237, .4);
}
.lib-access h2 { color: #fff; margin: 0 0 var(--s-2); font-size: var(--fs-600); line-height: 1.15; }
.lib-access .lib-access-offer > p:not(.eyebrow):not(.unlock-foot) { color: var(--on-dark-soft); max-width: 44rem; margin: 0; font-size: var(--fs-300); line-height: 1.55; }
.lib-access .unlock-grid { max-width: 1000px; }
.lib-confirmed { display: none; margin: 0; font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 600; color: var(--teal); }
/* for someone who already has access, the rectangle shrinks to one line */
.lib-access-band.is-member .lib-access { padding: var(--s-4) var(--s-5); box-shadow: none; }
.lib-access-band.is-member .lib-access-offer { display: none; }
.lib-access-band.is-member .lib-confirmed { display: block; }
@media (max-width: 640px) {
  .lib-access { padding: var(--s-5); }
  .lib-access h2 { font-size: var(--fs-500); }
  .lib-access .lib-access-offer > p:not(.eyebrow):not(.unlock-foot) { font-size: var(--fs-200); }
}

/* ---------- Pop-up: opens when someone without the Library tries to open something that needs it ---------- */
/* Same dark panel and cyan-to-violet edge as the card on the Library home. Stamped from the
   library-modal region; assets/js/lib-paywall.js opens and closes it. */
.lib-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: var(--s-4); background: rgba(5, 10, 20, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow-y: auto; overscroll-behavior: contain;
}
.lib-modal[hidden] { display: none; }
.lib-modal-card {
  position: relative; width: 100%; max-width: 720px; margin: auto; color: var(--on-dark);
  background:
    linear-gradient(140deg, #0f1c33 0%, #122c49 100%) padding-box,
    linear-gradient(135deg, rgba(34, 211, 238, .55), rgba(124, 58, 237, .6)) border-box;
  border: 1px solid transparent; border-radius: var(--r-lg); padding: var(--s-6);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), 0 0 60px -30px rgba(124, 58, 237, .6);
  animation: lib-modal-in .18s var(--ease);
}
@keyframes lib-modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lib-modal-card { animation: none; } }
.lib-modal-card h2 { color: #fff; margin: 0 0 var(--s-2); font-size: var(--fs-600); line-height: 1.15; padding-right: var(--s-6); }
.lib-modal-what { margin: 0 0 var(--s-2); font-family: var(--font-mono); font-size: var(--fs-100); color: var(--cyan); }
.lib-modal-sub { margin: 0; color: var(--on-dark-soft); font-size: var(--fs-300); line-height: 1.55; max-width: 36rem; }
.lib-modal-card .unlock-grid { max-width: none; margin-top: var(--s-5); }
.lib-modal-x {
  position: absolute; top: var(--s-3); right: var(--s-3); width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--on-dark-soft); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark-strong);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.lib-modal-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lib-modal-x:focus-visible, .lib-modal-signin-btn:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 2px; }
/* the sign-in line is the biggest thing after the prices, so a member who is just signed out sees it at once */
.lib-modal-signin { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); }
.lib-modal-signin-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 14px var(--s-5);
  border-radius: var(--r-pill); background: #fff; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-400); line-height: 1.2; text-align: center;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.lib-modal-signin-btn:hover { background: var(--cyan); transform: translateY(-1px); }
html.lib-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .lib-modal { align-items: flex-end; padding: var(--s-3); }
  .lib-modal-card { padding: var(--s-5); }
  .lib-modal-card h2 { font-size: var(--fs-500); }
  .lib-modal-sub { font-size: var(--fs-200); }
  .lib-modal-signin-btn { font-size: var(--fs-300); min-height: 52px; }
}

/* ---------- Library home: one card per shelf ---------- */
/* Two bands: reference for the prescriber, and things to hand to patients. The cards are the same dark panels
   as the drug cards, each in its shelf's hue (see Colour, above). */
.shelf-band + .shelf-band { margin-top: var(--s-8); }
.shelf-band-head { margin-bottom: var(--s-5); max-width: 46rem; }
.shelf-band-head h2 { margin-bottom: var(--s-2); }
.shelf-band-head p { margin: 0; color: var(--slate); font-size: var(--fs-300); line-height: 1.55; }
.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.shelf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shelf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .shelf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf-grid .shelf-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .shelf-grid, .shelf-grid--2, .shelf-grid--4 { grid-template-columns: 1fr; } }
.shelf-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  min-height: 196px; padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-lg);
}
.shelf-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.shelf-card h3 { margin: 0; font-size: 1.65rem; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.shelf-card p { margin: 0; font-size: var(--fs-200); line-height: 1.5; color: var(--c-soft); }

/* ---------- Filter chips: the row of buttons under each shelf's search ---------- */
/* One look for every row of choice buttons in the Library: the guides, handouts and rating-scale filters,
   the DSM "Try" row, the Patient resources topic and type rows (.fr-chip), and the Guide Builder's chips
   and feedback-type buttons (.gb-chip, .gb-feedback-type). They were small outlined mono tags with a count
   glued on, which read as one long string; now they are plain body text at reading size on soft filled
   buttons, with no count on the button (the line under the row gives it) and a short label in front that
   says what the row is. */
.filter-row { display: flex; align-items: flex-start; gap: var(--s-2) var(--s-4); }
/* padding matches a chip's, so the label lines up with the first row when the chips wrap */
.filter-label { flex: none; padding-block: 10px; font-size: var(--fs-200); font-weight: 500; line-height: 1.2; color: var(--muted-light); }
.library-chips, .calc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-chip, .calc-chip, .dc-try .dc-chip, .fr-chip, .gb-chip, .gb-feedback-type span {
  font-family: var(--font-body); font-size: var(--fs-200); font-weight: 500; line-height: 1.2; letter-spacing: 0;
  color: var(--heading-ink); background: #E6EBF1; border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.filter-chip:hover, .calc-chip:hover, .dc-try .dc-chip:hover, .fr-chip:hover, .gb-chip:hover, .gb-feedback-type:hover span {
  background: #D3DCE6; color: var(--heading-ink); border-color: transparent;
}
.filter-chip.active, .calc-chip[aria-pressed="true"], .fr-chip[aria-pressed="true"], .gb-chip[aria-pressed="true"],
.gb-feedback-type input:checked + span { background: var(--navy); color: #fff; }
.filter-chip:focus-visible, .calc-chip:focus-visible, .dc-try .dc-chip:focus-visible, .fr-chip:focus-visible, .gb-chip:focus-visible,
.gb-feedback-type input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
/* on a phone the label sits above and the buttons scroll sideways in one line, so the sticky bar stays short */
@media (max-width: 640px) {
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-label { padding-block: 0; }
  .library-chips, .calc-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .library-chips::-webkit-scrollbar, .calc-chips::-webkit-scrollbar { display: none; }
  .filter-chip, .calc-chip { flex: none; }
}

/* ---------- The dark band: each shelf page opens on the tab bar and this band, with no intro text ----------
   The search box and the filter rows sit in the band (it replaced the page hero and the light sticky bar).
   The page's h1 stays in the markup as .sr-only. The chips keep the shared look, in light-on-dark colours. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lib-band {
  position: sticky; top: var(--header-h); z-index: 20; overflow: hidden;
  background: var(--ink); color: var(--on-dark); border-bottom: 1px solid var(--line-dark);
  padding: var(--s-5) 0; margin-bottom: var(--s-6);
}
.lib-band .hero-grid-bg { opacity: 0.4; }
.lib-band > .container { position: relative; z-index: 2; }
.lib-band .filter-label, .lib-band .fr-row .lbl, .lib-band .dc-try-label { color: var(--on-dark-soft); }
.lib-band .filter-chip, .lib-band .calc-chip, .lib-band .fr-chip, .lib-band .dc-try .dc-chip {
  background: rgba(255, 255, 255, 0.10); color: var(--on-dark); border-color: transparent;
}
.lib-band .filter-chip:hover, .lib-band .calc-chip:hover, .lib-band .fr-chip:hover, .lib-band .dc-try .dc-chip:hover {
  background: rgba(255, 255, 255, 0.18); color: #fff; border-color: transparent;
}
.lib-band .filter-chip.active, .lib-band .calc-chip[aria-pressed="true"], .lib-band .fr-chip[aria-pressed="true"], .lib-band .dc-try .dc-chip[aria-pressed="true"] {
  background: var(--cyan); color: var(--ink);
}
.lib-band .filter-chip:focus-visible, .lib-band .calc-chip:focus-visible, .lib-band .fr-chip:focus-visible,
.lib-band .dc-try .dc-chip:focus-visible, .lib-band input:focus-visible { outline: 3px solid var(--violet-soft); outline-offset: 2px; }
.lib-band input:focus { outline: 3px solid var(--violet-soft); outline-offset: 1px; box-shadow: none; }

/* ---------- Library search ---------- */
.lib-search-wrap { position: relative; max-width: 640px; margin-top: var(--s-5); }
.lib-search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-light); pointer-events: none; }
.lib-search {
  width: 100%; font: inherit; font-size: var(--fs-300); color: var(--heading-ink); background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 14px 20px 14px 46px;
}
.lib-search:focus { outline: 3px solid var(--violet-soft); outline-offset: 1px; border-color: var(--violet); }
.lib-results { margin-top: var(--s-4); display: grid; gap: var(--s-2); max-width: 760px; }
.lib-results[hidden] { display: none; }
.lib-res {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; color: var(--heading-ink);
}
.lib-res-main { min-width: 0; }
.lib-res-title { display: block; font-weight: 600; font-size: var(--fs-200); }
.lib-res-sub { display: block; font-size: var(--fs-100); color: var(--muted-light); }
.lib-res-links { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.lib-res-link {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-100); font-weight: 500; text-decoration: none;
  color: var(--teal-deep); background: var(--teal-tint); border-radius: var(--r-pill); padding: 4px 12px;
}
.lib-res-link:hover { background: var(--teal-deep); color: #fff; }
.lib-res-link.is-locked { color: var(--violet); background: var(--violet-tint); }
.lib-res-link.is-locked:hover { background: var(--violet); color: #fff; }
.lib-res-none { color: var(--muted-light); font-size: var(--fs-200); }

.plans-grid { max-width: none; }
/* the two cards under "Without a membership" sit in the middle of the page, not in the left two thirds of a three-up row */
.plans-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
@media (max-width: 820px) { .plans-grid--two { grid-template-columns: 1fr; max-width: 520px; } }
.tier-grid.plans-grid .tier-card { scroll-margin-top: calc(var(--header-h) + 20px); }

/* ---------- Plans: one hue per plan, the same dark panels as the Library cards ----------
   The three memberships share the violet family, so "membership" reads as one colour. Library Access is
   blue (the Library's own colour) and the Course is orange. Also used on the two options in the Library pop-up. */
[data-plan="insider"]  { --h: 275; }
[data-plan="premium"]  { --h: 292; }
[data-plan="frontrow"] { --h: 312; }
[data-plan="library"]  { --h: 232; }
[data-plan="course"]   { --h: 50; }

.tier-card[data-plan] {
  border: 0; color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--c-glow) 0%, transparent 58%),
    linear-gradient(140deg, var(--c-deep) 0%, var(--c-lift) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), var(--shadow-sm);
}
.tier-card[data-plan]::before, .tier-card[data-plan]:hover::before { height: 4px; background: linear-gradient(90deg, var(--c-dot), var(--c-dot-hi)); }
.tier-card[data-plan]:hover { border-color: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 24px 40px -22px var(--c-lift); }
.tier-card.featured[data-plan] { box-shadow: inset 0 0 0 2px var(--c-dot-hi), 0 26px 60px -30px var(--c-lift); }
.tier-card[data-plan] .tier-name { color: var(--c-soft); }
.tier-card[data-plan] .tier-price .amount { color: #fff; }
.tier-card[data-plan] .tier-price .per { color: var(--c-soft); }
.tier-card[data-plan] .tier-pitch { color: var(--c-soft); font-size: var(--fs-200); line-height: 1.5; }
.tier-card[data-plan] .tier-features li { color: rgb(255 255 255 / .95); font-size: var(--fs-200); }
.tier-card[data-plan] .tier-features .tick { color: var(--c-dot-hi); }
.tier-card[data-plan] .tier-note { color: #fff; background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .24); font-size: var(--fs-100); }
.tier-card[data-plan] .tier-badge { color: var(--c-deep); background: #fff; box-shadow: none; font-weight: 600; }
.tier-card[data-plan] .btn { color: var(--c-deep); background: #fff; border-color: #fff; font-weight: 600; }
.tier-card[data-plan] .btn:hover { background: var(--c-soft); border-color: var(--c-soft); }

/* what a plan includes: filled pill = included, dashed and dim "No ..." pill = not included */
.tier-inc { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-4); padding: 0; }
.tier-inc li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-100); font-weight: 600; line-height: 1.2; border: 1px solid transparent;
}
.tier-inc li::before { font-weight: 700; }
.tier-inc .on { color: var(--c-deep); background: #fff; }
.tier-inc .on::before { content: "\2713"; }
.tier-inc .off { color: var(--c-soft); border: 1px dashed rgb(255 255 255 / .38); opacity: .85; font-weight: 500; }
.tier-inc .off::before { content: "\2715"; }

/* the two options in the Library pop-up and on the shelf pages take the same hues */
.unlock-opt[data-plan] {
  --panel: radial-gradient(120% 100% at 100% 0%, var(--c-glow) 0%, transparent 58%), linear-gradient(140deg, var(--c-deep) 0%, var(--c-lift) 100%);
  background: var(--panel); border-color: rgb(255 255 255 / .18);
}
a.unlock-opt[data-plan]:hover { background: var(--panel); border-color: var(--c-dot-hi); }
.unlock-opt--featured[data-plan] { border-color: var(--c-dot-hi); }
.unlock-opt[data-plan] .unlock-name { color: #fff; font-size: var(--fs-100); letter-spacing: .1em; }
.unlock-opt[data-plan] .unlock-price small { color: var(--c-soft); }
.unlock-opt[data-plan] .unlock-sub { color: rgb(255 255 255 / .92); font-size: var(--fs-200); line-height: 1.5; }
.unlock-opt[data-plan] .tier-inc { margin: var(--s-2) 0 0; }

/* Links inside a dark hero paragraph: the site's dark teal is unreadable there */
.page-hero p a:not(.btn) { color: var(--cyan); text-underline-offset: 3px; }
.page-hero p a:not(.btn):hover { color: #fff; }

/* ---------- Cards and headings, shared by every shelf ----------
   A card is one dark panel in its group's hue. The Library home, the prescribing guides and medication
   handouts, the rating scales and the DSM-5 chapters all use it (Patient resources builds its own in its page,
   because free.html shares its card class); each page sets
   only what goes inside. A heading is a colour bar, the group's name in its dark hue and a count pill. */
.guide-card, .shelf-card, .lib-free a, .dc-chapter {
  position: relative; overflow: hidden; color: #fff; text-decoration: none;
  background:
    radial-gradient(120% 100% at 100% 0%, var(--c-glow) 0%, transparent 58%),
    linear-gradient(140deg, var(--c-deep) 0%, var(--c-lift) 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease);
}
a.guide-card:hover, a.shelf-card:hover, .lib-free a:hover {
  transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), 0 20px 34px -18px var(--c-lift);
}
a.guide-card:focus-visible, a.shelf-card:focus-visible, .lib-free a:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.guide-card[hidden] { display: none; }

.guide-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5);
  min-height: 152px; padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-lg);
}
.guide-card.is-pending { opacity: .72; }
/* a smaller card, for a long list (the rating scales) */
.guide-card--sm { min-height: 0; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r); }
.guide-card--sm .gc-generic { font-size: 1.45rem; }
.guide-card--sm .gc-top { min-height: 28px; }
.guide-card--sm .gc-go { width: 30px; height: 30px; }

.gc-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 30px; }
.gc-flags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gc-flag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: var(--fs-50); letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  color: #fff; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22);
}
.gc-flag--free { color: var(--c-deep); background: #fff; box-shadow: none; font-weight: 600; }
.gc-flag--lock { padding: 5px 7px; }
.gc-go {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgb(255 255 255 / .12); color: #fff;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
a.guide-card:hover .gc-go, a.shelf-card:hover .gc-go { background: #fff; color: var(--c-deep); transform: translateX(2px); }
.gc-name { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gc-generic {
  margin: 0; font-size: 1.65rem; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: #fff;
  overflow-wrap: break-word;
}
/* a name with a long word steps down a size so it stays on its line: 15 or 16 letters one step, 17 or more two */
.gc-generic--long { font-size: 1.4rem; }
.gc-generic--xlong { font-size: 1.25rem; }
.gc-brand { font-size: var(--fs-300); font-weight: 500; line-height: 1.3; color: var(--c-soft); }
.guide-card--sm .gc-brand { font-size: var(--fs-100); line-height: 1.35; }
.gc-desc { position: relative; z-index: 1; margin: 0; font-size: var(--fs-100); line-height: 1.45; color: var(--c-soft); }

.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4); }

/* a category title (all drugs, "All" view) */
.class-group { margin-bottom: var(--s-6); }
.cat-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  margin: var(--s-8) 0 var(--s-1); font-size: var(--fs-700); line-height: 1.1; letter-spacing: -0.02em; color: var(--heading-ink);
}
.class-group:first-child .cat-title { margin-top: var(--s-4); }

/* a group heading: bar, name, count */
.class-group-head { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.class-group-head::before {
  content: ''; flex: none; width: 6px; height: 1.7rem; border-radius: 3px;
  background: linear-gradient(180deg, var(--c-dot), var(--c-lift));
}
.class-group-head :is(h2, h3) { margin: 0; font-size: var(--fs-500); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink); }
.class-group-head .grp-count {
  font-size: var(--fs-100); font-weight: 600; line-height: 1; padding: 5px 11px; border-radius: var(--r-pill);
  color: var(--c-ink); background: var(--c-tint);
}
.class-group-head::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-line), transparent); }

@media (max-width: 520px) {
  .guides-grid { grid-template-columns: 1fr; }
  .guide-card { min-height: 136px; }
  .guide-card--sm { min-height: 0; }
  .shelf-card { min-height: 0; }
  .shelf-card .gc-flag { line-height: 1.3; border-radius: 14px; }
  .gc-generic--long, .gc-generic--xlong { font-size: 1.65rem; }
  .guide-card--sm .gc-generic--long, .guide-card--sm .gc-generic--xlong { font-size: 1.45rem; }
  .cat-title { font-size: var(--fs-600); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card, .shelf-card, .lib-free a, .gc-go { transition: none; }
  a.guide-card:hover, a.shelf-card:hover, .lib-free a:hover, a.guide-card:hover .gc-go, a.shelf-card:hover .gc-go { transform: none; }
}