/* ── atlas.css — the star chart (company-map.html AND ai.html) ────────────────
   TWO PAGES SHARE THIS SHEET SINCE 2026-08-28. company-map.html is its home: the plate is
   the whole body there, full-bleed and viewport-tall. ai.html embeds the same chart in its
   black hero as a card, via the .atl-stage--ainx variant at the foot of this file — same
   markup, same atlas.js, a different frame and a forced dark palette. A change to the base
   .atl-* rules lands on both pages; check both.
   The page has two halves that describe the same sky: an interactive plate
   (canvas) and the static register beneath it. The register is the accessible
   and crawlable half and is NOT a fallback bolted on — it is the content, and
   the plate is the enhancement over it (REQ-001, and the crawlability finding
   that JS-built content is unreadable to anything that does not execute JS).

   Every colour here resolves from the site's own tokens rather than a private
   palette, so the plate follows light/dark and the a11y-contrast theme for
   free. --red-ink already flips #AB0000 → #E05252 in dark, which is exactly
   the behaviour the figure lines want.

   Everything is namespaced .atl-* and the canvas is #atl-chart: tpl.css is
   730 KB of global rules and owns short names like .panel, .find, .tip,
   .chip and .border outright.
   ─────────────────────────────────────────────────────────────────────────── */

.atl-page{
  --atl-plate:var(--paper-0);
  --atl-sky:var(--paper-200);
  --atl-fig:var(--red-ink);
  --atl-grat:var(--hairline);
  --atl-shadow:var(--shadow-panel);
}

/* ── the plate ─────────────────────────────────────────────────────────── */
.atl-plate-sec{margin:clamp(30px,4vw,56px) 0 clamp(34px,4vw,60px)}

/* FULL-BLEED: the stage is a direct child of .atl-plate-sec, not of .wrap, so it is the
   viewport wide rather than the 1280px measure wide (2026-08-28). No negative margins and
   no 100vw — either would put a horizontal scrollbar back on the page the moment a vertical
   one appears. Only the top and bottom hairlines survive: a side rule sitting flush against
   the window edge reads as a rendering fault, and .atl-border already frames the sky.

   Height is the viewport minus the sticky header and a little air, so the whole plate can be
   on screen at once — a taller stage than that would defeat the point of enlarging it. svh,
   not vh: on mobile vh is the tallest the viewport ever gets, which puts the foot of the
   plate under the browser's own chrome. */
.atl-stage{
  position:relative;
  height:clamp(560px,calc(100svh - 120px),1160px);
  background:var(--atl-sky);
  border:1px solid var(--hairline);
  border-left:0;border-right:0;
  overflow:hidden;
  contain:paint;
}
#atl-chart{
  display:block;width:100%;height:100%;
  cursor:grab;
  /* pan-y, never none: the wheel and a vertical drag belong to the PAGE.
     ADR-023 — a scrollable region must not latch on and trap the reader. */
  touch-action:pan-y;
}
#atl-chart.is-grabbing{cursor:grabbing}
#atl-chart.is-pointing{cursor:pointer}

/* the engraved double rule, inside the stage rather than the viewport */
.atl-border{position:absolute;inset:14px;border:1.5px solid var(--hairline);pointer-events:none;z-index:2}
.atl-border::after{content:'';position:absolute;inset:5px;border:.75px solid var(--hairline)}

/* ── the furniture ─────────────────────────────────────────────────────── */
/* Two boxes, both on the right: the readout above, Find a star below. The cartouche
   (top left) and the constellation list (bottom left) were removed on 2026-08-28 — see the
   note in company-map.html — and fit() in atlas.js was re-padded to claim the space.

   THE SURFACE IS 90% OPAQUE, THE TEXT IS NOT (owner request, 2026-08-28: "opacity 0.9").
   opacity on the box itself would have taken the text down with it, and the readout's
   smallest label is --ink-muted at 10px: composited at .9 over the sky it measures 4.34:1,
   under the 4.5 that WCAG 2.2 AA 1.4.3 wants. Fading only the background is the same
   picture — filaments read through the box — with the text left at 5.3:1. */
.atl-readout,.atl-find{
  position:absolute;z-index:3;
  background:rgba(255,255,255,0.9);
  background:color-mix(in srgb,var(--atl-plate) 90%,transparent);
  border:1px solid var(--hairline);
  box-shadow:var(--atl-shadow);
}
/* 92px, not 32: the plate is full-bleed now, so its right edge IS the window edge, and the
   site's fixed back-to-top button lives at right:20px/bottom:20px in a 52px circle with
   z-index 80 — it was sitting on the corner of Find a star, over the last search hit. A
   horizontal nudge clears it at every scroll position; a vertical one only clears it while
   the foot of the plate is on screen. The readout follows so the two share a right edge. */
.atl-readout{top:30px;right:92px;padding:12px 14px;text-align:right}
.atl-find{right:92px;bottom:30px;width:min(286px,40%);padding:11px 13px}

.atl-readout dl{
  display:grid;grid-template-columns:auto auto;gap:2px 15px;margin:0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.atl-readout dt{color:var(--ink-muted);text-align:left}
.atl-readout dd{margin:0;color:var(--ink)}
.atl-readout dd.is-hot{color:var(--atl-fig)}

.atl-acts{display:flex;gap:5px;justify-content:flex-end;margin-top:11px;flex-wrap:wrap}
.atl-acts button{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid var(--hairline);color:var(--ink-muted);
  padding:6px 9px;cursor:pointer;border-radius:2px;
  transition:color 150ms var(--ease),border-color 150ms var(--ease);
}
.atl-acts button:hover,.atl-acts button[aria-pressed="true"]{color:var(--atl-fig);border-color:var(--atl-fig)}

.atl-find label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 8px;font-weight:500;display:block;
}
/* min-height, not padding alone: at 12.5px/1.55 the box came out 23.4px and WCAG 2.2 AA
   2.5.8 wants 24. These sit in a wrapped row, so the spacing exception does not save them. */
.atl-find li button,.atl-psec button,.atl-chip{min-height:24px}
.atl-find li button{
  background:none;border:0;padding:3px 4px;cursor:pointer;display:flex;gap:7px;
  align-items:center;font-size:12.5px;text-align:left;color:inherit;border-radius:2px;
}
.atl-find li button:hover{color:var(--atl-fig);background:var(--paper-100)}
.atl-find .atl-rf{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-muted)}

.atl-find input{
  width:100%;background:var(--atl-sky);border:1px solid var(--hairline);
  padding:7px 9px;font-size:13px;font-family:var(--font-body);color:var(--ink);border-radius:2px;
}
.atl-find ul{margin:8px 0 0;padding:0;list-style:none;max-height:26vh;overflow:auto}
.atl-find li button{width:100%}
.atl-find .atl-rf{flex:none;width:54px}
.atl-find .atl-empty{font-size:11.5px;color:var(--ink-muted);padding:3px 5px}

/* ── hover tip ─────────────────────────────────────────────────────────── */
.atl-tip{
  position:absolute;z-index:6;pointer-events:none;
  background:var(--atl-plate);border:1px solid var(--hairline);box-shadow:var(--atl-shadow);
  padding:7px 10px;font-size:12.5px;max-width:280px;opacity:0;transition:opacity 120ms var(--ease);
}
.atl-tip.is-on{opacity:1}
.atl-tip b{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin-bottom:2px;
}

/* ── the record panel ──────────────────────────────────────────────────── */
.atl-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(370px,94%);z-index:7;
  background:var(--atl-plate);border-left:1px solid var(--hairline);box-shadow:var(--atl-shadow);
  overflow-y:auto;transform:translateX(101%);transition:transform 340ms var(--ease-out);
  visibility:hidden;
}
.atl-panel.is-open{transform:none;visibility:visible}
.atl-phead{padding:20px 20px 15px;border-bottom:1px solid var(--hairline);position:relative}
.atl-pclose{
  position:absolute;top:14px;right:14px;width:30px;height:30px;background:none;
  border:1px solid var(--hairline);cursor:pointer;line-height:1;color:var(--ink-muted);border-radius:2px;
}
.atl-pclose:hover{color:var(--atl-fig);border-color:var(--atl-fig)}
.atl-pkick{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--atl-fig);margin:0 36px 7px 0;
}
.atl-ptitle{
  font-family:var(--font-display);font-weight:700;font-size:21px;line-height:1.14;margin:0;
  letter-spacing:-.014em;text-wrap:balance;
}
.atl-pmeta{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-muted);margin:10px 0 0;
}
.atl-pbody{padding:16px 20px;font-size:13.5px;line-height:1.62;color:var(--ink-soft);max-width:60ch}
.atl-pbody p{margin:0}
.atl-psec{padding:14px 20px;border-top:1px solid var(--hairline)}
.atl-psec h3{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);margin:0 0 8px;font-weight:500;
}
.atl-psec button{
  display:flex;gap:9px;align-items:center;width:100%;background:none;border:0;
  padding:5px 6px;margin-left:-6px;cursor:pointer;text-align:left;color:inherit;border-radius:2px;
}
.atl-psec button:hover{background:var(--paper-100)}
.atl-psec .atl-id{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);flex:none;width:54px}
.atl-psec .atl-tx{font-size:12.5px;line-height:1.4}
.atl-chips{display:flex;flex-wrap:wrap;gap:5px}
.atl-chip{
  background:var(--paper-100);border:1px solid var(--hairline);color:var(--ink-soft);
  font-family:var(--font-mono);font-size:10px;padding:4px 8px;cursor:pointer;border-radius:2px;
}
.atl-chip:hover{color:var(--atl-fig);border-color:var(--atl-fig)}
.atl-pfoot{padding:13px 20px 24px;font-size:11.5px;color:var(--ink-muted);line-height:1.5}
.atl-pfoot a{color:var(--atl-fig)}

/* ── the note that ties the two halves together ────────────────────────── */
.atl-note{
  margin:14px 0 0;font-size:13px;color:var(--ink-muted);max-width:74ch;
}
.atl-note a{color:var(--atl-fig)}

/* ── the static register ───────────────────────────────────────────────── */
.atl-index{margin:clamp(44px,6vw,88px) 0 clamp(56px,7vw,104px)}
.atl-groups{
  margin-top:clamp(28px,3.4vw,48px);
  columns:2;column-gap:clamp(32px,4vw,60px);
}
@media(max-width:900px){.atl-groups{columns:1}}
/* Groups FLOW across the columns; only a row is atomic. break-inside:avoid on the group
   itself stranded ~400px of white beside 06-Decisions, which is 30 records and taller than
   any column — multicol cannot balance an unbreakable block bigger than the column box.
   A heading is instead tied to what follows it, which is the part that actually mattered. */
.atl-group{margin:0 0 clamp(28px,3.2vw,44px)}
.atl-group h3{
  font-size:clamp(16px,1vw + 12px,19px);line-height:1.25;margin:0 0 6px;
  padding-bottom:8px;border-bottom:1px solid var(--ink);
  break-after:avoid;break-inside:avoid;
}
.atl-count{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  color:var(--ink-muted);margin-left:8px;vertical-align:2px;
}
.atl-group-sum{break-after:avoid;margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-muted);max-width:60ch}
.atl-group dl{margin:12px 0 0}
.atl-rec{break-inside:avoid;padding:11px 0;border-bottom:1px solid var(--hairline)}
.atl-rec:last-child{border-bottom:0}
.atl-rec dt{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-weight:600;color:var(--ink);font-size:14.5px}
.atl-ref{
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  color:var(--atl-fig);flex:none;
}
.atl-rec dd{margin:5px 0 0}
.atl-rec dd p{margin:0 0 5px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.atl-meta{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-muted)!important;
}
.atl-tags{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:7px 0 0;padding:0}
.atl-tags li{
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-muted);
  border:1px solid var(--hairline);padding:2px 6px;border-radius:2px;
}
/* a record jumped to from the plate should be findable once the page lands on it */
.atl-rec:target{background:var(--paper-100);box-shadow:0 0 0 10px var(--paper-100)}

/* ── narrow ────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .atl-find{display:none}
}
@media(max-width:760px){
  /* A PHONE DOES NOT GET THE FULL-HEIGHT TREATMENT. The sky is roughly as tall as it is
     wide, so inside a 390x748 plate it is fitted by the WIDTH and the extra height is just
     empty plate under it. ~62svh keeps the stage's shape near the sky's own. */
  .atl-stage{height:clamp(440px,62svh,620px)}
  .atl-readout{top:18px;right:18px;padding:9px 11px}
  .atl-readout dl{font-size:9px;gap:2px 10px}
  .atl-border{inset:9px}
}

/* motion: the survey settles instantly rather than animating, and the panel does not slide */
html.a11y-no-motion .atl-panel{transition:none}
@media(prefers-reduced-motion:reduce){
  .atl-panel,.atl-tip,.atl-acts button,.atl-find li button{transition:none}
}

/* ══ ai.html: the same chart, as a card in a black hero ══════════════════════════
   .atl-stage--ainx replaces the DOM force graph that used to live in ai.html's hero
   (.ainx-graph + .gnode + tpl.js's Graph, all now unused — see the note on .ainx-fallback
   in tpl.css). It reuses the plate verbatim and changes two things: the frame, and the
   palette.

   THE FRAME. company-map's stage is full-bleed and sized to the viewport; here it is a
   rounded card inside .wrap on the same aspect ratios the old graph used, so the hero's
   composition — headline, lede, chart, CTA — is unchanged. Two selectors deep (.ainx-sec
   .atl-stage--ainx) on purpose: the base height lives in a max-width:760px block further
   up, and a tie on specificity there would be decided by source order alone.

   THE PALETTE. .ainx-sec is #0B0B0C at every site theme, and the dark plate's own sky is
   already exactly that (tpl.css's dark block: --paper-200 #0B0B0C), so the chart is pinned
   to the dark tokens rather than following the theme switch. atlas.js reads its colours off
   this element with getComputedStyle, so overriding the tokens here is all it takes — the
   canvas follows, and so do the readout and Find a star, which are its children.

   a11y-contrast is deliberately exempt: that mode forces a white paper and a #767676
   hairline for contrast, and a bright plate on a black hero is the correct outcome there. */
.ainx-sec .atl-stage--ainx{
  --atl-plate:var(--paper-0);
  --atl-sky:var(--paper-200);
  --atl-fig:var(--red-ink);
  --atl-grat:var(--hairline);
  --atl-shadow:0 28px 48px -20px rgba(0,0,0,.55);
  /* AN EXPLICIT COLOR, NOT JUST THE TOKENS. Overriding --ink here reaches everything that
     says color:var(--ink), but .atl-ptitle, .atl-tip and the panel's link rows carry no
     colour of their own and inherit it — and inheritance walks past this element to <body>,
     which is outside the override and still light. The record panel opened with a #181818
     title on a #1A1A1C ground: 1.03:1, i.e. a blank panel. */
  color:var(--ink);
  height:auto;
  aspect-ratio:1180/620;
  margin-top:clamp(26px,4vw,44px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
}
/* the dark palette, mirroring tpl.css's own dark block so the two never drift apart */
html:not(.a11y-contrast) .ainx-sec .atl-stage--ainx{
  --paper-0:#1A1A1C; --paper-100:#101012; --paper-200:#0B0B0C;
  --hairline:#2E2E33;
  --ink:#F2F1ED; --ink-soft:#C9C8C2; --ink-muted:#989791;
  --red-ink:#E05252;
}
/* The note sits OUTSIDE the stage, so it never sees the dark tokens above — and its
   --ink-muted is the light theme's #6B6C6C, which on this hero is #6B6C6C on #0B0B0C: 1.9:1,
   effectively invisible. The dark theme's own muted ink instead, at 6.7:1. <kbd> inside it
   has no style anywhere on the site, so it inherits this and is covered too. */
.ainx-sec .atl-note{color:#989791}

/* the engraved rule follows the card's corner instead of cutting across it */
.ainx-sec .atl-stage--ainx .atl-border{border-radius:4px}
.ainx-sec .atl-stage--ainx .atl-border::after{border-radius:2px}
/* One narrow shape, not the old graph's two. That graph's 320/560 phone stage suited a thin
   portrait blob of ~48 nodes; this sky is roughly as tall as it is wide however hard the seed
   ellipse stretches, so inside a 350x613 card it is fitted by the WIDTH and the extra 270px
   is empty plate under it. Square keeps the same chart and stops scrolling past nothing. */
@media(max-width:900px){.ainx-sec .atl-stage--ainx{aspect-ratio:1/1}}