/* Molecular Atlas: deep blue working archive over an ambient molecular film. */
body[data-design="atlas"] {
  --bg:#0b141b; --surface:#14232d; --surface-raised:#172733;
  --ink:#edf4f5; --muted:#b5c8ce; --dim:#91aab3;
  --line:#334a55; --line-strong:#53707b;
  --blue:#85ddeb; --blue-deep:#a4ebf2; --blue-soft:#213e49;
  --on-accent:#0b1b22; --shadow:0 20px 45px #030b1073;
  --story-bg:#0b141b; --story-wash:#0b141b;
  --ambient-poster:url('/assets/premium/atlas/hero.jpg');
  --ambient-mobile-poster:url('/assets/premium/atlas/hero-mobile.jpg');
  --ambient-tint:#07131ba8;
  --hero-border:#64818b;
  --hero-ink:#f2f8f8; --hero-muted:#bfd3d8; --hero-accent:#a4ebf2;
  --hero-input:#132a37cf; --hero-input-ink:#f1f6f8; --hero-input-icon:#a4ebf2;
  --hero-placeholder:#c2d4d8; --hero-search-hover:#244551bf;
  color-scheme:dark; background:#0b141b; color:var(--ink);
}
/* The sticky header is glass on every Atlas page (review round 2: the Database page's recipe; the flat
   95 % header let the page subtitle scrolling under it show as ghost text among the nav labels, and
   moving between the Database and the tree changed the header's material). */
body[data-design="atlas"] .top {
  background: rgba(13, 26, 34, .88);
  border-color: #304652;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}
body[data-design="atlas"] .brand span { box-shadow:none; }
body[data-design="atlas"] .stackcard { background:#182a34; }
body[data-design="atlas"] .foot { border-top-color:var(--line); }

/* Review round 1 (2026-10-11): the homepage is the one page that missed the project's own contrast
   gate, and only at phone width — at p .75 97.9 % of 47 text rects reached 4.5:1 against a 98 %
   gate (worst 4.34 on a card one-liner) and at p 1 95.1 % of 41 against the recorded 96 % floor
   (worst 4.23 on the footer copyright). Both failing groups sit over the brightest part of the DNA
   at the end of the scroll, and both had NO surface of their own: the homepage archive sets
   .stackcard background to transparent (premium/common.css), and the footer's dark backing was
   scoped to [data-scene-page], which the homepage does not carry. Phone-only, because desktop
   stays inside its recorded floors and the owner approved that look: the cards get a soft surface
   of the page tint and the footer gets the same backing the six page scenes already use. No
   layout, type or colour of the desktop look changes.

   Owner request of 2026-10-11 ("a very faint dark panel behind those lines, phones only … you'd
   barely notice it"): the first pass gave every stack card its own 50 % slab, which on the phone —
   one card per row, no row gap — stacked into a hard-edged dark column with a visible edge against
   the bright strand, read as a box drawn around the text rather than as the page. It is now ONE
   panel under the whole stack column at .32 (a third of the way to the page colour, measured below),
   feathered on every side by a blurred shadow of the same colour: the spread (20 px) is wider than
   the archive's own 14 px side margin, so the darkening runs off both edges of the screen instead
   of ending on a line, and the top and bottom fade out over the blur. Nothing moves: a background
   and an outer shadow take no layout. Measured over the whole phone scroll in 15 px steps (390×844,
   every rect by the gate's own probe): without any backing the ten stack one-liners read 3.90–4.44
   and the footer copyright 4.18; at .32 the worst stack one-liner reads 6.08 and the lowest rect on
   the page is the hero's own class count at 5.42, which this backing does not touch. The footer
   keeps the six page scenes' recipe unchanged, so the homepage's footer and theirs stay one thing. */
@media (max-width: 700px) {
  body[data-design="atlas"] .utility-home .premium-archive .stackgrid {
    background: rgba(11, 20, 27, .32);
    box-shadow: 0 0 48px 20px rgba(11, 20, 27, .32);
  }
  body[data-design="atlas"]:not([data-scene-page]) .foot {
    background: rgba(11, 20, 27, .76);
    box-shadow: 0 0 56px 30px rgba(11, 20, 27, .76);
  }
}

/* Reading contrast remains >=4.5:1 even over the darkest/lightest video pixel. */
body[data-design="atlas"] .utility-home {
  --muted:#d9e3e6;
  --dim:#dbe3e6;
  --blue:#b5eaf3;
  --hero-muted:#d7e3e6;
}

/* Atlas Database page over the Pearl Road scene (owner 2026-10-08): the page background is the
   moving scene (build_premium.py injects it on the pages named in variants.json "pages" and marks
   <body data-scene-page>), and the filter row, the filter input and the table become translucent
   dark glass so the animation shows through and around them. Colours and transparency only: the
   layout, type, borders' widths, controls and behaviour are those of every other design. Every
   text keeps >= 4.5:1 over the scene (verify_scene.mjs --database). */
/* Every Atlas page with a scene (the Database page, and from 2026-10-09 the Tree, Stacks, Guides, Sources and
   About page scenes): the archive's own reading colours, lifted like the homepage's over its scene (.utility-home). */
body[data-design="atlas"][data-scene-page] {
  --muted: #cfdce0;
  --dim: #bfd0d6;
}
/* Review round 1: clear glass (1px) instead of 3px, which turned the smoked-glass pearls into soap-
   bubble rings; the scene's glass detail (rims, highlights, sticks) now reads through the table, as
   the owner asked ("make the table more transparent"). The frosted alternative is the filter
   input's recipe (blur 10px): the scene then shows as soft moving light behind clean letters. */
/* Review round 2: a crafted slab rather than a tint: a 1 px inner highlight along the top edge and a
   lit edge (top and left borders a little brighter than right and bottom), colours only. */
body[data-design="atlas"][data-scene-page="database"] .dbwrap {
  background: rgba(11, 20, 27, .5);
  border-color: rgba(133, 221, 235, .3) rgba(133, 221, 235, .2) rgba(133, 221, 235, .2) rgba(133, 221, 235, .3);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(1px) saturate(1.05);
  backdrop-filter: blur(1px) saturate(1.05);
}
/* Phones: .05 more glass (review round 2: the dense probe's one thin read, 4.52:1 where an examined N
   cube crosses behind a row at p .835, reads 5.19:1 at .55); desktops keep the owner's clearer .5. */
@media (max-width: 700px) {
  body[data-design="atlas"][data-scene-page="database"] .dbwrap { background: rgba(11, 20, 27, .55); }
}
/* A soft dark halo under the table text: invisible over the dark glass, it only separates the
   letters from a bright pearl passing behind them (review round 1: 3.5:1 locally at p .2). */
body[data-design="atlas"][data-scene-page="database"] table.db :is(td, th) {
  text-shadow: 0 0 3px rgba(9, 17, 23, .9), 0 0 9px rgba(9, 17, 23, .6);
}
body[data-design="atlas"][data-scene-page="database"] table.db th {
  background: rgba(23, 39, 51, .5);
}
body[data-design="atlas"][data-scene-page="database"] :is(table.db td, table.db th) {
  border-bottom-color: rgba(83, 112, 123, .42);
}
/* A hovered row darkens the glass under its text and carries a cyan edge on its left (review round 2:
   the light cyan hover tint lightened the glass and read 4.1:1 over the reveal). */
body[data-design="atlas"][data-scene-page="database"] table.db tr:hover td {
  background: rgba(9, 17, 23, .3);
}
body[data-design="atlas"][data-scene-page="database"] table.db tr:hover td:first-child {
  box-shadow: inset 2px 0 0 rgba(133, 221, 235, .6);
}
body[data-design="atlas"][data-scene-page="database"] .filters button:not(.on) {
  background: rgba(20, 35, 45, .55);
  border-color: rgba(133, 221, 235, .3);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
}
body[data-design="atlas"][data-scene-page="database"] .filters button:not(.on):hover {
  border-color: var(--blue);
}
body[data-design="atlas"][data-scene-page="database"] .filterq {
  background: rgba(19, 42, 55, .55);
  border-color: rgba(133, 221, 235, .32);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
body[data-design="atlas"][data-scene-page="database"] .filterq:focus {
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08), 0 0 0 2px var(--blue-soft);
}
/* The footer reads on a soft dark backing: wherever the page ends (every window, every filtered
   list) the scene recedes behind the disclaimer instead of putting its brightest pearls under it
   (review round 1: "liečebné odporúčania" read 1.6–2.6:1 over the last residue at p = 1). The
   backing is the footer's own background plus a blurred shadow, so it never changes the layout and
   fades out above the divider before it reaches the table. Every page scene's footer gets it. */
body[data-design="atlas"][data-scene-page] .foot {
  background: rgba(11, 20, 27, .76);
  box-shadow: 0 0 56px 30px rgba(11, 20, 27, .76);
}

/* ── Sources page over its BPC-157 scene (page scenes 2026-10-10; this block is the Sources page's only) ──────────
   The partner catalogues lie on translucent Atlas glass where they cover the scene, in the Database table's recipe:
   the summary line takes the filter input's frosted glass, and each catalogue column becomes a clear slab (.5,
   1 px blur, a lit top/left edge, a 1 px inner highlight) drawn by negative margins with an equal padding and
   border, so not one text, line or box of the page moves. The Ascend slab ends with its list (align-self: start),
   which leaves the right half of the page open for the residue walk, while the Limitless slab runs to the end of
   the page; the two meet in the middle of the column gap, so the pair reads as one two-column sheet. A soft dark
   halo under the letters separates them from a bright pearl passing behind (as the Database table's). */
body[data-design="atlas"][data-scene-page="sources"] .catalog-summary {
  background: rgba(19, 42, 55, .55);
  border-color: rgba(133, 221, 235, .32);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
body[data-design="atlas"][data-scene-page="sources"] .twocol > div {
  margin: -4px -12px -16px;
  padding: 3px 11px 15px;
  border: 1px solid rgba(133, 221, 235, .2);
  border-color: rgba(133, 221, 235, .3) rgba(133, 221, 235, .2) rgba(133, 221, 235, .2) rgba(133, 221, 235, .3);
  border-radius: 4px 0 4px 4px;
  background: rgba(11, 20, 27, .5);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(1px) saturate(1.05);
  backdrop-filter: blur(1px) saturate(1.05);
}
body[data-design="atlas"][data-scene-page="sources"] .twocol > div:last-child {
  align-self: start;
  border-left-color: transparent;
  border-radius: 0 4px 4px 0;
}
body[data-design="atlas"][data-scene-page="sources"] :is(.catalog-summary, .twocol) {
  text-shadow: 0 0 3px rgba(9, 17, 23, .9), 0 0 9px rgba(9, 17, 23, .6);
}
/* One column (≤ 860 px): the two slabs stack, each a whole sheet. Phones (≤ 700 px) take more glass, .62 (the Database
   table's phones .55): the walk passes close behind the lists there, and a bond's crossing flash behind an 11 px "·"
   separator read 4.0–4.4:1 at .55 (the dense probe at the crossings; 5.2:1 at .62, 360–430 px phones). */
@media (max-width: 860px) {
  body[data-design="atlas"][data-scene-page="sources"] .twocol > div,
  body[data-design="atlas"][data-scene-page="sources"] .twocol > div:last-child {
    border-color: rgba(133, 221, 235, .3) rgba(133, 221, 235, .2) rgba(133, 221, 235, .2) rgba(133, 221, 235, .3);
    border-radius: 4px;
  }
}
@media (max-width: 700px) {
  body[data-design="atlas"][data-scene-page="sources"] .twocol > div { background: rgba(11, 20, 27, .62); }
}
/* ── end of the Sources page block ── */

/* === Stacks page scene (owner 2026-10-09: Ipamorelin, page variant atlas-stacks-ipamorelin) =============== */
/* The fourteen stack cards become the Database table's glass (the same tint, 1 px blur and lit edge), so the
   Ipamorelin walk reads through them; their radius, border width, padding, type and hover lift stay, and the
   hover keeps its cyan edge (the glass edge colours below would outrank site.css .stackcard:hover). */
body[data-design="atlas"][data-scene-page="stacks"] .stackcard {
  background: rgba(11, 20, 27, .5);
  border-color: rgba(133, 221, 235, .3) rgba(133, 221, 235, .2) rgba(133, 221, 235, .2) rgba(133, 221, 235, .3);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(1px) saturate(1.05);
  backdrop-filter: blur(1px) saturate(1.05);
}
body[data-design="atlas"][data-scene-page="stacks"] .stackcard:hover { border-color: var(--blue); }
@media (max-width: 700px) {
  body[data-design="atlas"][data-scene-page="stacks"] .stackcard { background: rgba(11, 20, 27, .55); }
}
/* the table's text halo: invisible over the dark glass, it parts the letters from a bright pearl behind them */
body[data-design="atlas"][data-scene-page="stacks"] .stackcard :is(em, strong, span) {
  text-shadow: 0 0 3px rgba(9, 17, 23, .9), 0 0 9px rgba(9, 17, 23, .6);
}
/* === end of the Stacks page scene ======================================================================== */

/* ---- Guides page scene (SS-31; page scenes 2026-10-09, page builder 2026-10-10) ------------------------------------
   The reading column on a soft veil of the page colour: the walk crosses the gutter and its side chains reach behind the
   column's right edge (and on narrow windows and phones the whole walk runs behind the text), so the column darkens the
   scene softly instead of becoming a box. The veil is the column's own background plus a blurred shadow of the same tint
   (the footer backing's technique: no layout change, no scroll width, and the contrast probe sees the background);
   lighter on phones, where the molecule only shows through the text. The halo separates letters from a pearl passing
   behind them (the Database table's). Colours and shadows only. */
body[data-design="atlas"][data-scene-page="guides"] .prose {
  background: rgba(11, 20, 27, .45);
  box-shadow: 0 0 48px 28px rgba(11, 20, 27, .45);
}
@media (max-width: 700px) {
  body[data-design="atlas"][data-scene-page="guides"] .prose {
    background: rgba(11, 20, 27, .3);
    box-shadow: 0 0 40px 24px rgba(11, 20, 27, .3);
  }
}
body[data-design="atlas"][data-scene-page="guides"] .prose :is(p, h2) {
  text-shadow: 0 0 3px rgba(9, 17, 23, .9), 0 0 9px rgba(9, 17, 23, .6);
}

/* ---- Atlas Compound tree page over its GHK-Cu scene (page scenes; owner swap 2026-10-10: Tree runs GHK-Cu) ----------
   The tree shell is the Database table's glass, so the copper peptide's walk shows through the three columns: the same
   translucent slab (.5, 1 px blur, a lit edge and a 1 px inner highlight) and the same halo under the row labels.
   Colours and transparency only: layout, type, borders' widths, controls and behaviour are every other design's. */
body[data-design="atlas"][data-scene-page="tree"] .tree-shell {
  background: rgba(11, 20, 27, .5);
  border-color: rgba(133, 221, 235, .3) rgba(133, 221, 235, .2) rgba(133, 221, 235, .2) rgba(133, 221, 235, .3);
  box-shadow: inset 0 1px 0 rgba(164, 235, 242, .08);
  -webkit-backdrop-filter: blur(1px) saturate(1.05);
  backdrop-filter: blur(1px) saturate(1.05);
}
/* The column headers are sticky inside their scrolling columns: the rows pass under them, so they stay nearly solid
   (a row label must not ghost through a header) and carry no backdrop filter of their own (the page intro fades the
   tree inside the glass, resources/intro.js; a fading filter would unfrost the scene). The status bar is the
   Database header cells' glass. */
/* Review round 1 (2026-10-11): .9 was not "nearly solid" enough and the comment above forbids
   exactly what it allowed. Measured at 390x844 and 1486x682 with the Group column scrolled,
   "Oncology research 2" read clearly through "GROUP - 23", and the rows' own text-shadow halo
   made the bleed-through MORE legible, not less. The header is now opaque, as it always was on
   the base site; the glass of this page comes from .tree-shell around it, not from the 10 %
   that rows were passing through. */
body[data-design="atlas"][data-scene-page="tree"] .col > .kicker { background: rgb(23, 39, 51); }
body[data-design="atlas"][data-scene-page="tree"] .treebar { background: rgba(23, 39, 51, .5); }
/* The selected row keeps its tint and a hovered one darkens the glass (the Database rows' hover), both translucent:
   opaque fills read as tiles laid on the glass. */
body[data-design="atlas"][data-scene-page="tree"] .tree-row.on { background: rgba(33, 62, 73, .7); }
body[data-design="atlas"][data-scene-page="tree"] .tree-row:hover { background: rgba(9, 17, 23, .32); }
body[data-design="atlas"][data-scene-page="tree"] .tree-row.on:hover { background: rgba(33, 62, 73, .78); }
body[data-design="atlas"][data-scene-page="tree"] :is(.tree-row > button, .treebar p) {
  text-shadow: 0 0 3px rgba(9, 17, 23, .9), 0 0 9px rgba(9, 17, 23, .6);
}
/* ---- end of the Compound tree page block ---- */

/* About page over its KPV scene (page scenes, owner swap 2026-10-10; this block is the About page's own, scoped to
   [data-scene-page="about"]). On windows wider than 1180 px (the choreography's camera.narrow.maxWidth) the molecule
   stays in the free right gutter beside the 800 px text column, so the prose reads on the page exactly as before. At
   1180 px and below no gutter is wide enough: the scene stands beside the heading and walks behind the text column,
   so the prose sits on a pane of the Database table's clear glass (the table's .5 dark tint, 1 px blur and text halo,
   .55 on phones) carried by its own background and a spread box-shadow with a thin lit edge (no layout change, and the
   contrast probe composites the background). */
@media (max-width: 1180px) {
  body[data-design="atlas"][data-scene-page="about"] .prose {
    background: rgba(11, 20, 27, .5);
    border-radius: 4px;
    box-shadow: 0 0 0 22px rgba(11, 20, 27, .5), 0 0 0 23px rgba(133, 221, 235, .22);
    -webkit-backdrop-filter: blur(1px) saturate(1.05);
    backdrop-filter: blur(1px) saturate(1.05);
  }
  body[data-design="atlas"][data-scene-page="about"] .prose :is(p, h2, a) {
    text-shadow: 0 0 3px rgba(9, 17, 23, .9), 0 0 9px rgba(9, 17, 23, .6);
  }
}
@media (max-width: 700px) {
  body[data-design="atlas"][data-scene-page="about"] .prose {
    background: rgba(11, 20, 27, .55);
    box-shadow: 0 0 0 12px rgba(11, 20, 27, .55), 0 0 0 13px rgba(133, 221, 235, .22);
  }
}