/* =============================================
   KINETIC EDGE HEALTH — Health Library
   Card pages (tools/library/templates/card.html) and the index (templates/index.html).

   Loaded after css/styles.css, which supplies the tokens used below (--purple-primary,
   --bg-tint, --nav-h ...), the reset, and the nav and footer. Every class here is lib-*,
   so no existing page changes. Keep it out of styles.css: that file is cached for a year
   and every page's ?v= would have to move with it.

   Do not use <nav> or <footer> elements inside the page body. styles.css styles those two
   element names directly (a fixed top bar, a dark footer), so a stray one would take the
   same look.
   ============================================= */

.lib-page {
  padding-top: var(--nav-h);   /* the site nav is position: fixed */
  background: var(--bg);
  color: var(--text-body);
}

/* ── Draft banner: preview builds only, never production ── */
.lib-draft-banner {
  background: #0F0818;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 12px 16px;
}

/* ── Card column ── */
.lib-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.lib-card a {
  color: var(--purple-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lib-card a:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Head: eyebrow, name, FDA label, aliases ── */
.lib-eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.lib-eyebrow a { text-decoration: none; }

.lib-name {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.lib-label-row { margin-top: 16px; }

.lib-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
}

.lib-label--approved {
  background: var(--purple-pale);
  border-color: var(--purple-light);
  color: var(--purple-deep);
}

.lib-label--not-approved {
  background: var(--bg-alt);
  color: var(--text-primary);
}

.lib-label-note,
.lib-aliases {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── Structure picture ── */
.lib-structure {
  margin: 36px 0 0;
  padding: 20px;
  background: var(--bg-tint);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}

.lib-structure svg {
  display: block;
  max-width: 100%;
  height: auto;          /* the width/height attributes are the drawing's own size; it only ever shrinks */
  margin: 0 auto 14px;
}

.lib-structure-source {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* sequence drawing (sequence_svg in render.py) */
.lib-bond { stroke: var(--purple-light); stroke-width: 2; }

.lib-res rect {
  fill: #FFFFFF;
  stroke: var(--purple-mid);
  stroke-width: 1.5;
}

.lib-res--nonstd rect {
  fill: var(--purple-pale);
  stroke-dasharray: 3 2;
}

.lib-res text,
.lib-term text {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  fill: var(--purple-deep);
}

.lib-term text {
  font-weight: 500;
  fill: var(--text-muted);
}

/* small-molecule drawing (render.py _smiles_picture; js/library.js has SmilesDrawer fill it) */
.lib-smiles {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 10px;
}

/* 3D viewer (render.py _pdb_picture; js/library.js has 3Dmol fill it) */
.lib-pdb {
  position: relative;
  width: 100%;
  height: 340px;
  margin-bottom: 14px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
}

.lib-pdb .lib-structure-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
}

.lib-structure-status {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
}

svg .lib-structure-status { fill: var(--text-muted); }   /* SVG text is coloured by fill, not color */

/* No single structure (render.py _none_picture): a short note stands where the picture would be.
   Same white box, hairline border and 10px corners as the two boxes above, so the card keeps its shape. */
.lib-none {
  margin: 0 0 14px;
  padding: 20px 22px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-body);
  overflow-wrap: anywhere;
}

/* Tap-to-activate shield over the 3D viewer (touch screens; js/library.js builds it and lifts it on a tap).
   It is a plain button with no touch handlers: a swipe over it scrolls the page, and 3Dmol never sees it. */
.lib-pdb-shield {
  position: absolute;
  inset: 0;
  z-index: 1;                      /* above 3Dmol's canvas (z-index 0) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lib-pdb-shield[hidden] { display: none; }

.lib-pdb-shield-label {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #FFFFFF;
  background: rgba(15, 8, 24, 0.82);   /* obsidian, #0F0818 */
  border-radius: 999px;
}

.lib-pdb-shield:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: -4px;
}

.lib-structure-hint,
.lib-structure-note {
  margin: -4px 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  color: var(--text-muted);
}

.lib-structure-hint[hidden] { display: none; }   /* js/library.js shows it once the viewer is up */

/* Without scripting there is nothing to draw; the <noscript> note says so instead. */
@media (scripting: none) {
  .lib-smiles,
  .lib-pdb,
  .lib-structure-hint { display: none; }
}

/* ── Biomarker cards: test line and range picture (templates/biomarker.html, render.py range_picture) ──
   The test line sits where a compound has its FDA label. The picture sits in the same tinted box as a
   structure picture: a band bar with its legend under it, a goal ladder, or a note (.lib-none, above).

   The band colours are one purple scale, lightest (lib-band-1) to darkest (lib-band-5). It says "higher",
   never "good" or "bad": for some tests a low number is the worry. Each colour is a custom property set on
   its class, so the bar (fill) and the legend swatch (background) can never drift apart. The site has no
   dark theme (no prefers-color-scheme rule anywhere), so the page is always light and this is the one set;
   a dark theme would redefine the five properties on these same classes. */
.lib-label--test {
  background: var(--bg-alt);
  color: var(--text-primary);
}

.lib-range {
  margin: 36px 0 0;
  padding: 20px;
  background: var(--bg-tint);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}

.lib-band-1 { --lib-band: #DDD6FE; }
.lib-band-2 { --lib-band: #C4B5FD; }   /* --purple-light */
.lib-band-3 { --lib-band: #A78BFA; }
.lib-band-4 { --lib-band: #8B5CF6; }   /* --purple-mid */
.lib-band-5 { --lib-band: #6B21A8; }   /* --purple-primary */

/* The bar: a viewBox and no pixel size, stretched to the column at a fixed height (no text inside it,
   so stretching distorts nothing). */
.lib-range-bar {
  display: block;
  width: 100%;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-light);
}

.lib-range-bar .lib-band {
  fill: var(--lib-band);
  stroke: #FFFFFF;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;   /* a hairline between neighbours at any width */
}

.lib-range-legend {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.lib-range-legend li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.lib-swatch {
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--lib-band);
  box-shadow: inset 0 0 0 1px var(--border-light);
}

.lib-range-label { font-weight: 700; color: var(--text-primary); }
.lib-range-text { color: var(--text-body); font-variant-numeric: tabular-nums; }

/* The goal ladder: one rung per risk tier, as a list (no picture to collide at phone width). */
.lib-ladder {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-ladder-rung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tier goal" "who goal";
  align-items: center;
  gap: 2px 16px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--purple-mid);
  border-radius: 10px;
}

.lib-ladder-tier { grid-area: tier; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--text-primary); }
.lib-ladder-who { grid-area: who; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.lib-ladder-goal {
  grid-area: goal;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  color: var(--purple-primary);
  font-variant-numeric: tabular-nums;
}

.lib-range-notes {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.lib-range-notes p + p { margin-top: 4px; }

.lib-range-caption {
  font-size: 14px;
  color: var(--text-body);
}

/* ── Summary ── */
.lib-summary { margin-top: 36px; }

.lib-lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-primary);
}

.lib-approved-for {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--purple-primary);
}

/* ── Sections ── */
.lib-section { margin-top: 48px; }

.lib-section h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.lib-list {
  padding-left: 1.25em;
  font-size: 16.5px;
  line-height: 1.75;
}

.lib-list li { margin-bottom: 10px; }
.lib-list li::marker { color: var(--purple-mid); }

/* ── Evidence rows ── */
.lib-evidence-row {
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

.lib-evidence-row:first-of-type { border-top: 1px solid var(--border-light); }

.lib-evidence-use {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.lib-evidence-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 12px;
}

.lib-grade {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--purple-pale);
  color: var(--purple-deep);
}

.lib-cebm {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.lib-evidence-text {
  font-size: 15.5px;
  line-height: 1.7;
}

/* ── References ── */
.lib-refs {
  padding-left: 1.4em;
  font-size: 14.5px;
  line-height: 1.65;
}

.lib-refs li { margin-bottom: 8px; padding-left: 4px; }
.lib-refs a { overflow-wrap: anywhere; }

/* ── Related ── */
.lib-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.lib-links a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  padding: 9px 14px;
  border: 1px solid var(--purple-light);
  border-radius: 999px;
  text-decoration: none;
}

.lib-links a:hover { background: var(--purple-pale); }

.lib-back {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
}

/* ── Byline, review note, caveat line ── */
.lib-card-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.lib-byline {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-primary);
}

.lib-review-note {
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg-tint);
  border-left: 3px solid var(--purple-primary);
  border-radius: 0 8px 8px 0;
}

.lib-review-note[hidden] { display: none; }  /* js/library.js un-hides it when a card is overdue */

.lib-caveat-line {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ── Phone: 16px side gutter ── */
@media (max-width: 768px) {
  .lib-card { padding: 36px 16px 72px; }
  .lib-structure { padding: 14px; }
  .lib-range { padding: 14px; }
  .lib-ladder-rung {               /* the goal drops under the tier on a phone */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tier" "who" "goal";
  }
  .lib-ladder-goal { text-align: left; margin-top: 4px; }
  .lib-pdb { height: 280px; }
  .lib-none { padding: 16px; font-size: 15px; }
  .lib-lead { font-size: 17.5px; }
  .lib-section { margin-top: 40px; }
  .lib-list { font-size: 16px; }
}

/* ── Index page (tools/library/templates/index.html) ── */
.lib-index {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.lib-index-head .lib-lead {
  max-width: 640px;
  margin-top: 16px;
}

/* ── Explore: the pillar buttons, the 3D body and its panel (render.py _body_html, js/library-body.js) ──
   Phone: the buttons, the body, then the panel directly under it. Wider: the body on the left, the buttons
   and the panel beside it. The panel is hidden until a live body is up (never without JavaScript or WebGL). */
.lib-explore {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "filters" "body" "panel";
  gap: 20px;
  margin-top: 32px;
}

/* Once a biomarker card is published, render.py adds the Peptides | Biomarkers toggle and this modifier: the
   toggle gets the first row, above the pillar buttons. Without it the grid is exactly as before. */
.lib-explore--views { grid-template-areas: "view" "filters" "body" "panel"; }

.lib-explore .lib-view { grid-area: view; }
.lib-explore .lib-filters { grid-area: filters; margin-top: 0; }
.lib-explore .lib-body { grid-area: body; min-width: 0; }
.lib-explore .lib-panel { grid-area: panel; }

/* One column: the body and its panel stop at about 440px, the desktop size. Without the cap a 4:5 stage the
   full width of a small tablet (600-768px) would be taller than the screen. */
@media (max-width: 768px) {
  .lib-explore .lib-view,
  .lib-explore .lib-body,
  .lib-explore .lib-panel {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 769px) {
  .lib-explore {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "body filters" "body panel";
    align-items: start;
    column-gap: 40px;
    row-gap: 20px;
  }

  /* With the Peptides | Biomarkers toggle: its own row across the top, over the glass model and above the
     pillar buttons, at the model's width so it reads as the model's switch. */
  .lib-explore--views {
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "view view" "body filters" "body panel";
  }

  .lib-explore .lib-view { max-width: 440px; }
}

/* The stage: a fixed 4:5 box, so the page never shifts. It holds the still image (the picture a browser
   without JavaScript or WebGL keeps), the hint, and, once js/library-body.js has drawn its first frame under
   the still, the canvas and its overlays. The background is the glass backdrop (dark aubergine, a purple glow
   behind the body), close to what the canvas draws, so nothing flashes before the still arrives. */
.lib-body-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(64% 40% at 50% 44%, rgba(78, 44, 140, 0.55) 0%, rgba(78, 44, 140, 0) 100%),
    linear-gradient(180deg, #150C24 0%, #0A0511 100%);
}

/* Browsers without aspect-ratio (Safari before 15): the same 4:5 box from padding, or the stage would
   collapse to nothing (everything in it is absolutely positioned) and hide the still. */
@supports not (aspect-ratio: 4 / 5) {
  .lib-body-stage { height: 0; padding-top: 125%; }
}

.lib-body-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

.lib-body-still {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;                     /* above the canvas until the first frame is drawn */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.lib-body-stage--live .lib-body-still {
  opacity: 0;
  visibility: hidden;
}

/* The hint: an overlay along the bottom of the stage, so showing it moves nothing on the page. */
.lib-body-hint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: rgba(238, 232, 250, 0.74);
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.lib-body-hint[hidden] { display: none; }   /* js/library-body.js shows it once there is a body to drag */
.lib-body-hint--gone { opacity: 0; }        /* ... and fades it at the first drag */

/* Never under the "Tap to rotate" label: while the shield is up (js/library.js), the hint steps aside.
   (A browser without :has, only Firefox 108-120 among those that run the 3D, shows both.) */
.lib-body-stage:has(.lib-pdb-shield:not([hidden])) .lib-body-hint { display: none; }

/* The tap-to-activate shield (js/library.js) sits on the dark stage here: a purple label reads better.
   The caption, chooser and toast sit above it, so their buttons work without engaging the canvas. */
.lib-body-stage .lib-pdb-shield { z-index: 2; }
.lib-body-stage .lib-pdb-shield-label { background: rgba(107, 33, 168, 0.92); }   /* #6B21A8 */

/* Overlays on the stage (js/library-body.js): smoked glass on the dark backdrop. */
.lib-body-caption,
.lib-body-chooser,
.lib-body-toast {
  position: absolute;
  z-index: 3;
  color: #EEE8FA;
  background: rgba(17, 9, 28, 0.78);
  border: 1px solid rgba(196, 181, 253, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lib-body-caption {
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-radius: 14px;
}

.lib-body-caption-text { min-width: 0; flex: 1 1 auto; }

.lib-body-caption-eyebrow,
.lib-body-toast b {
  display: block;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #A89CC6;
}

.lib-body-caption-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.lib-body-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 7px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #EEE8FA;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(196, 181, 253, 0.24);
  border-radius: 999px;
  cursor: pointer;
}

.lib-body-btn:hover { border-color: #A78BFA; }

.lib-body-chooser {
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(17, 9, 28, 0.84);
}

.lib-body-chooser-q {
  margin: 0;
  padding-right: 36px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.lib-body-chooser-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #A89CC6;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.lib-body-chooser-x:hover { color: #EEE8FA; }

.lib-body-opts { display: flex; flex-wrap: wrap; gap: 8px; }

.lib-body-opt {
  min-height: 40px;
  padding: 10px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  color: #EEE8FA;
  background: none;
  border: 1px solid #A78BFA;
  border-radius: 999px;
  cursor: pointer;
}

.lib-body-opt:hover { background: rgba(167, 139, 250, 0.16); }

.lib-body-caption[hidden],
.lib-body-chooser[hidden] { display: none; }

.lib-body-toast {
  left: 50%;
  bottom: 46px;
  max-width: calc(100% - 32px);
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lib-body-toast--show { opacity: 1; transform: translate(-50%, 0); }

.lib-body-btn:focus-visible,
.lib-body-opt:focus-visible,
.lib-body-chooser-x:focus-visible {
  outline: 2px solid #A78BFA;
  outline-offset: 2px;
}

/* The Peptides | Biomarkers toggle (render.py _view_toggle, js/library.js): the first row of the explore block,
   above the pillar buttons and the dark stage. A two-option segmented switch on the page's own background.
   Shown only once a biomarker card is published, and hidden in the markup until js/library.js runs it. Never
   .lib-filter: js/library-body.js reads every .lib-filter as a pillar. */
.lib-view {
  display: flex;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 4px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: 999px;
}

.lib-view[hidden] { display: none; }

.lib-view-toggle {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-body);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.lib-view-toggle:hover { color: var(--purple-primary); }

.lib-view-toggle[aria-checked="true"] {
  color: #FFFFFF;
  background: var(--purple-primary);
  box-shadow: 0 1px 3px rgba(45, 16, 96, 0.25);
}

.lib-view-toggle:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lib-view-toggle { transition: none; }
}

.lib-body-credit {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.lib-body-credit a {
  color: var(--purple-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lib-body-credit a:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── The panel beside the body: the chosen pillar's organs and cards (js/library-body.js fills it) ── */
.lib-panel {
  min-width: 0;
  padding: 20px 20px 22px;
  background: var(--bg-tint);
  border: 1px solid var(--border-light);
  border-radius: 16px;
}

.lib-panel[hidden] { display: none; }

/* The panel's status line: read by screen readers, not shown. */
.lib-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lib-panel-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lib-panel-name {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.lib-panel-name:focus { outline: none; }   /* focus lands here after a choice in the chooser; it is not a control */

.lib-panel-intro {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
}

.lib-panel-from {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.lib-panel-sub {
  margin: 18px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lib-panel-organs {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
}

.lib-panel-organs li { position: relative; padding-left: 14px; }

.lib-panel-organs li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-mid);
}

.lib-panel-note {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--purple-mid);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.lib-panel-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-light);
}

.lib-panel-cards li { border-bottom: 1px solid var(--border-light); }

.lib-panel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  text-decoration: none;
}

.lib-panel-card-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.lib-panel-card .lib-icon {
  flex: none;
  color: var(--purple-primary);
  transition: transform 0.2s ease;
}

.lib-panel-card:hover { color: var(--purple-primary); }
.lib-panel-card:hover .lib-icon { transform: translateX(2px); }

.lib-panel-card:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
  border-radius: 6px;
}

.lib-panel-empty {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.lib-panel-opts { margin-top: 12px; }

.lib-panel .lib-body-opt {
  color: var(--purple-primary);
  background: var(--bg);
  border-color: var(--purple-light);
}

.lib-panel .lib-body-opt:hover { background: var(--purple-pale); }

.lib-panel .lib-body-opt:focus-visible { outline-color: var(--purple-mid); }

@media (prefers-reduced-motion: reduce) {
  .lib-body-still,
  .lib-body-hint,
  .lib-body-toast,
  .lib-panel-card .lib-icon { transition: none; }
}

/* Pillar filter. The group is hidden in the markup; js/library.js un-hides it. */
.lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}

.lib-filters[hidden] { display: none; }
.lib-filter[hidden] { display: none; }   /* js/library.js hides a pillar with no card in the chosen view */

.lib-filter {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 40px;
  padding: 9px 16px;
  color: var(--purple-primary);
  background: var(--bg);
  border: 1px solid var(--purple-light);
  border-radius: 999px;
  cursor: pointer;
}

.lib-filter:hover { background: var(--purple-pale); }

.lib-filter[aria-pressed="true"] {
  color: #FFFFFF;
  background: var(--purple-primary);
  border-color: var(--purple-primary);
}

.lib-filter:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
}

/* Tiles: the whole tile is the link (the name's ::after covers it). */
.lib-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 28px 0 0;
  padding: 0;
}

.lib-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: var(--bg-tint);
  border: 1px solid var(--border-light);
  border-radius: 14px;
}

.lib-tile[hidden] { display: none; }  /* js/library.js hides the tiles outside the chosen pillar */

.lib-tile:hover {
  background: var(--purple-pale);
  border-color: var(--purple-light);
}

.lib-tile-name {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.lib-tile-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
}

.lib-tile-link:hover { color: var(--purple-primary); }

.lib-tile-link:focus-visible { outline: none; }

.lib-tile-link:focus-visible::after {
  outline: 2px solid var(--purple-mid);
  outline-offset: 2px;
}

/* "Draft" marker on an index tile: preview builds only, as the production index lists signed cards. */
.lib-tile-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lib-tile-draft {
  display: inline-block;
  padding: 5px 10px;
  background: #0F0818;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  border-radius: 999px;
}

.lib-tile-pillars {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.lib-empty {
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.lib-empty[hidden] { display: none; }

.lib-index-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.lib-index-foot .lib-caveat-line { margin-top: 0; }

@media (max-width: 768px) {
  .lib-index { padding: 36px 16px 72px; }
  .lib-filters { margin-top: 24px; }
  .lib-explore { margin-top: 24px; gap: 16px; }
  .lib-body-stage { border-radius: 16px; }
  .lib-grid { margin-top: 20px; }
}