/* ============================================================
   BioRx — component layer
   Loaded after style.css. Calculator, directory, monographs,
   videos, studies, mega-menu.
   ============================================================ */

/* ---------- 1. Reconstitution calculator ---------- */
.calc-grid { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 1000px) { .calc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.calc-panel { padding: clamp(1.25rem, .9rem + 1.6vw, 2rem); border-radius: var(--r-lg); }
.calc-panel--sticky { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }

.field-set {
  border: 0; padding: 0; margin: 0 0 var(--sp-6);
  /* Browsers give fieldset a default min-inline-size of min-content, so it
     refuses to shrink below its widest child and pushes the calculator off the
     side of a phone screen. Nothing else here relies on that behaviour. */
  min-width: 0;
}
.field-set:last-of-type { margin-bottom: 0; }
.field-set > legend {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base);
  color: var(--fg); padding: 0; margin-bottom: var(--sp-1);
}
.field-hint { font-size: var(--fs-sm); color: var(--fg-subtle); margin-bottom: var(--sp-3); }

.opt-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.opt {
  flex: 1 1 auto; min-width: 72px; min-height: 46px; padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.opt:hover { border-color: var(--fg-subtle); color: var(--fg); transform: translateY(-1px); }
.opt[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent-deep); color: var(--accent-ink); font-weight: 700;
  box-shadow: 0 6px 16px -8px rgba(127,163,10,.75), inset 0 1px 0 rgba(255,255,255,.5);
}

.field { display: flex; gap: var(--sp-2); align-items: stretch; }
.field input[type="number"] {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600;
  color: var(--fg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input[type="number"]:focus {
  outline: none; border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent);
}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.unit-toggle {
  display: flex; padding: 4px; gap: 2px; flex: none;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--bg-sunken);
}
[data-theme="dark"] .unit-toggle { background: rgba(255,255,255,.05); }
.unit-toggle button {
  min-width: 56px; min-height: 44px; border-radius: 9px;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--fg-subtle);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.unit-toggle button[aria-pressed="true"] { background: var(--olive-700); color: #F4F5EC; }
[data-theme="dark"] .unit-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* readouts */
.readout-main {
  display: grid; gap: var(--sp-1);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--olive-700);
  color: #F4F5EC;
  position: relative; overflow: hidden;
  transition: background var(--dur-slow) var(--ease);
}
.readout-main.is-over { background: #7A4A22; }
.readout-main__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--lime-400);
}
.readout-main.is-over .readout-main__label { color: #FFD9AE; }
.readout-main__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.75rem, 2rem + 3.4vw, 4.25rem);
  line-height: 1; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
}
.readout-main__value small { font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.01em; color: var(--inv-muted); }
.readout-main__sub { font-size: var(--fs-sm); color: var(--inv-muted); }

.readout-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: var(--sp-3); margin-top: var(--sp-4);
}
.readout {
  padding: var(--sp-4); border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--bg-sunken);
  display: grid; gap: 2px;
}
[data-theme="dark"] .readout { background: rgba(255,255,255,.04); }
.readout dt {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-subtle);
}
.readout dd {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xl); letter-spacing: -.025em; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.readout dd small { font-size: var(--fs-sm); font-weight: 500; color: var(--fg-muted); }

/* syringe */
.syringe-stage { position: relative; padding: var(--sp-4) 0 var(--sp-2); overflow-x: auto; scrollbar-width: thin; }
.syringe-stage svg { width: 100%; min-width: 520px; height: auto; display: block; }
/* The markings need 520px before they stop being legible, so on a phone the
   illustration is wider than its column and scrolls sideways. Everything that
   carries information sits in the right-hand two thirds of the viewBox, so
   calculator.js opens it there: the barrel, the markings, the fill and the unit
   callout all land inside the visible width, and only blank rod is left off the
   edge. Nothing is lost, so there is no affordance to explain. */

.syr-barrel-glass { fill: rgba(255,255,255,.5); }
[data-theme="dark"] .syr-barrel-glass { fill: rgba(255,255,255,.07); }
.syr-tick { stroke: var(--fg-subtle); stroke-width: 1.5; opacity: .55; }
.syr-tick--major { stroke: var(--fg); stroke-width: 2; opacity: .85; }
.syr-tick-label { fill: var(--fg-muted); font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
.syr-target line { stroke: var(--accent-deep); stroke-width: 2.5; stroke-dasharray: 4 4; }
.syr-target circle { fill: var(--accent-deep); }
.syr-target text { fill: var(--accent-deep); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-anchor: middle; }
.is-over .syr-target line { stroke: #C4622A; }
.is-over .syr-target circle { fill: #C4622A; }
.is-over .syr-target text { fill: #C4622A; }

@keyframes drip {
  0%, 62% { opacity: 0; transform: translateY(0) scale(.5); }
  72%     { opacity: 1; transform: translateY(0) scale(1); }
  100%    { opacity: 0; transform: translateY(16px) scale(.72); }
}
.syr-drop { transform-box: fill-box; transform-origin: center; animation: drip 3.4s var(--ease) infinite; }

.calc-warn {
  display: none; gap: var(--sp-3); align-items: flex-start;
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--ev-limited) 45%, transparent);
  background: color-mix(in srgb, var(--ev-limited) 10%, transparent);
  font-size: var(--fs-sm);
}
.calc-warn.is-shown { display: flex; }
.calc-warn svg { width: 20px; height: 20px; color: var(--ev-limited); flex: none; margin-top: 1px; }
.calc-warn strong { display: block; color: var(--fg); }
.calc-warn p { color: var(--fg-muted); margin-top: 2px; font-size: var(--fs-sm); }

.calc-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }

/* ---------- 2. Directory / A–Z ---------- */
.az-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--border-soft); background: var(--surface);
}
.az-bar a, .az-bar span {
  min-width: 38px; min-height: 38px;
  display: inline-grid; place-items: center;
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--fg-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.az-bar a:hover { background: var(--accent); color: var(--accent-ink); }
.az-bar span { opacity: .3; cursor: default; }

.az-group { scroll-margin-top: calc(var(--nav-h) + var(--sp-6)); }
.az-group__letter {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl);
  color: var(--accent-deep); letter-spacing: -.03em;
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--border-soft);
}

.pep-row {
  position: relative;
  display: grid; gap: var(--sp-2) var(--sp-4); grid-template-columns: 1fr;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
@media (min-width: 760px) {
  .pep-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; align-items: center; }
}
.pep-row:hover { border-color: var(--accent-deep); transform: translateX(3px); box-shadow: 0 14px 32px -24px rgba(20,21,15,.6); }
.pep-row h3 { font-size: var(--fs-lg); margin-bottom: 2px; }
.pep-row h3 a::after { content: ""; position: absolute; inset: 0; }
.pep-row__alias { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); }
.pep-row__desc { font-size: var(--fs-sm); color: var(--fg-muted); }
.pep-row__meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ---------- 3. Monograph pages ---------- */
.mono-grid { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 1024px) { .mono-grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } }

.spec-table { display: grid; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-soft); }
.spec-table > div {
  /* Stack label above value: in the narrow 240px rail this gives the value the
     full width, so "Metabolic & incretin" and formulae stop wrapping to shreds. */
  display: grid; gap: 3px; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.spec-table > div:last-child { border-bottom: 0; }
.spec-table > div:nth-child(odd) { background: var(--bg-sunken); }
[data-theme="dark"] .spec-table > div:nth-child(odd) { background: rgba(255,255,255,.03); }
.spec-table dt {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .09em; color: var(--fg-subtle);
}
.spec-table dd { margin: 0; font-size: var(--fs-sm); color: var(--fg); word-break: break-word; }
.spec-table dd.seq { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .05em; line-height: 1.7; }

.study-card {
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-left: 3px solid var(--border);
  overflow: hidden;
}
.study-card + .study-card { margin-top: var(--sp-3); }
.study-card--strong      { border-left-color: var(--ev-strong); }
.study-card--mixed       { border-left-color: var(--ev-moderate); }
.study-card--limited     { border-left-color: var(--ev-limited); }
.study-card--preclinical { border-left-color: var(--ev-pre); }
.study-card__head {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer; list-style: none; user-select: none;
  transition: background var(--dur) var(--ease);
}
.study-card__head::-webkit-details-marker { display: none; }
.study-card__head:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.study-card__title { flex: 1 1 60%; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.study-card__chev { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--fg-subtle); transition: transform var(--dur) var(--ease); }
.study-card[open] > .study-card__head .study-card__chev { transform: rotate(90deg); }
.study-card__body { display: grid; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-5); }
.study-card h4 { font-size: var(--fs-base); line-height: 1.35; }
.study-card__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); }
.study-card__finding { font-size: var(--fs-sm); color: var(--fg-muted); }
.study-card__links { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
.study-card__links a {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 4px var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--fg-muted);
  min-height: 32px; display: inline-flex; align-items: center; gap: 4px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.study-card__links a:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.unverified { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ev-limited); }

/* ---------- video library, YouTube-channel pattern ---------- */
/* Deliberately mirrors youtube.com's channel grid (16:9 thumb, avatar, two-line
   title, channel and date beneath) so nobody has to learn the layout. */
.yt-grid { display: grid; gap: var(--sp-6) var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.yt-card { display: block; text-decoration: none; color: inherit; }
.yt-card__thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; background: linear-gradient(140deg, #2A1856, #130826);
  display: grid; place-items: center;
}
.yt-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.yt-card:hover .yt-card__thumb img { transform: scale(1.05); }
.yt-card__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(19, 8, 38, 0); transition: background var(--dur) var(--ease);
}
.yt-card__play svg { width: 52px; height: 52px; fill: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); opacity: 0; transform: scale(.8); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.yt-card:hover .yt-card__play { background: rgba(19, 8, 38, .28); }
.yt-card:hover .yt-card__play svg { opacity: 1; transform: scale(1); }
.yt-card__dur {
  position: absolute; bottom: 8px; right: 8px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, .82); color: #fff;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
}
.yt-card__meta { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 2px 0; }
.yt-card__avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #1A0F35; color: var(--lime);
}
.yt-card__avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.yt-card__title {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); line-height: 1.4;
  color: var(--fg); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-card:hover .yt-card__title { color: var(--accent-deep); }
.yt-card__chan { font-size: var(--fs-xs); color: var(--fg-subtle); margin: 3px 0 0; }
.yt-card--slot .yt-card__thumb { border: 1.5px dashed color-mix(in srgb, var(--lime) 40%, transparent); }
.yt-card--slot { opacity: .75; }

/* ---------- playable page explainers (voiced diagrams) ---------- */
.xp { position: relative; }
.xp svg { display: block; }
.xp__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); width: 100%;
  background: radial-gradient(120% 120% at 50% 45%, rgba(19, 8, 38, .18), rgba(19, 8, 38, .44));
  border: 0; cursor: pointer; border-radius: inherit;
  transition: background var(--dur) var(--ease);
}
.xp__play:hover { background: radial-gradient(120% 120% at 50% 45%, rgba(19, 8, 38, .10), rgba(19, 8, 38, .36)); }
.xp__play[hidden] { display: none; }
.xp__dot {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--purple);
  box-shadow: 0 12px 30px -8px rgba(10, 17, 36, .5);
  transition: transform var(--dur-fast) var(--ease);
}
.xp__play:hover .xp__dot { transform: scale(1.06); }
.xp__dot svg { width: 32px; height: 32px; margin-left: 4px; }
.xp__label {
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm);
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.xp__pause {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(19, 8, 38, .62); color: #fff; border: 0; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.xp__pause[hidden] { display: none; }
.xp__pause svg { width: 20px; height: 20px; fill: currentColor; }
/* narration spotlight: the active region stays lit, the rest recede */
.xp svg.is-guided [data-spotlight] { opacity: .2; transition: opacity .5s var(--ease); }
.xp svg.is-guided [data-spotlight].is-lit { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .xp svg.is-guided [data-spotlight] { transition: opacity .2s linear; }
  .xp__play:hover .xp__dot { transform: none; }
}

/* Calculator "Still confused? Ask Helen" hand-off to the chat. */
.calc-ask {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); padding: var(--sp-4);
  border-radius: 14px; text-decoration: none; color: var(--fg);
  border: 1.5px solid var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.calc-ask:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); transform: translateY(-2px); }
.calc-ask__mark { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.calc-ask__mark svg { width: 22px; height: 22px; }
.calc-ask__text { flex: 1; font-size: var(--fs-sm); line-height: 1.35; }
.calc-ask__text strong { color: var(--accent-deep); }
.calc-ask__arrow { width: 20px; height: 20px; flex: none; color: var(--accent-deep); }

/* ---------- 4. Video library ---------- */
.video-card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border-soft); background: var(--surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(20,21,15,.55); }
.video-facade {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--olive-800); cursor: pointer;
  display: block; border: 0; padding: 0; overflow: hidden;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease); }
.video-facade:hover img { opacity: 1; transform: scale(1.04); }
.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-facade__play {
  position: absolute; inset: 0; margin: auto;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(212,242,76,.94); color: var(--accent-ink);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.5);
  transition: transform var(--dur) var(--ease-spring);
}
.video-facade:hover .video-facade__play { transform: scale(1.1); }
.video-facade__play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-facade__dur {
  position: absolute; right: 10px; bottom: 10px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(0,0,0,.78); color: #fff;
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.video-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.video-card__body h4 { font-size: var(--fs-base); line-height: 1.35; }
.video-card__chan { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-subtle); }
.video-card__note { font-size: var(--fs-sm); color: var(--fg-muted); }
.video-card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- 5. Mega menu ---------- */
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  width: min(92vw, 660px);
  transform: translateX(-50%) translateY(-8px);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: 0 28px 60px -28px rgba(20,21,15,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: var(--z-nav);
}
.has-mega:hover .mega,
.has-mega:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-1) var(--sp-4); }
.mega__item { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-sm); min-height: 52px; transition: background var(--dur) var(--ease); }
.mega__item:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.mega__item strong { font-family: var(--font-display); font-size: var(--fs-base); color: var(--fg); font-weight: 600; }
.mega__item span { font-size: var(--fs-xs); color: var(--fg-subtle); }
.mega__foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); }

/* ---------- 6. Misc ---------- */

/* Filtering works on cards, rows and table rows alike. */
[data-entry][data-hidden="true"] { display: none; }
[data-letter-group][hidden] { display: none; }

.legal-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.note-box {
  padding: var(--sp-5); border-radius: var(--r-md);
  border: 1px dashed var(--border); background: var(--bg-sunken);
  font-size: var(--fs-sm); color: var(--fg-muted);
}
[data-theme="dark"] .note-box { background: rgba(255,255,255,.04); }
.note-box strong { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .syr-drop { animation: none; opacity: 0; }
}

/* ---------- featured compound vial tiles ----------
   Lucid's model: one clean photoreal vial (ours, not theirs) with the label
   overlaid in CSS, so the same base render serves every compound. */
.vial-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .vial-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vial-strip { grid-template-columns: 1fr; } }

.vial-tile {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.vial-tile:hover { border-color: var(--accent-deep); transform: translateY(-3px); box-shadow: 0 22px 46px -26px rgba(10,17,36,.42); }
.vial-tile__shot {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: #14092E;   /* the vial render carries its own purple ground; this only shows at the seams */
}
/* The label is now baked into the render (logo + name, wrapped on the glass),
   so the image simply fills the square. */
.vial-tile__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vial-tile__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-soft);
}
.vial-tile__foot strong { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; }