/* CORRESPONDENCES — What is said to correspond to what: sourced claims, the correspondence pages, and the atlas you walk them in.

   One of ten stylesheets split out of a single 10,361-line tree.css.
   THE ORDER MATTERS AND IS NOT ALPHABETICAL. The layout links them as
   base → tree → correspondences → reference → tarot → chrome → astrology → history → sections → editing,
   and the rules inside this file keep the order they had in the original,
   so the cascade resolves exactly as it did before the split. */

/* --- sourced correspondences (Claims) ------------------------------------ */

.claims {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}

.claims__heading {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* The tally of what is sourced, and it sits UNDER the prose that introduces
   the page — the scope notes above it carry no bottom margin, so with none of
   its own this line touched the paragraph and read as part of it. It is a
   different kind of statement from the sentence above it and wants the gap to
   say so. */
.coverage {
  margin: 1.1rem 0 0.9rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.55;
}

.coverage--none {
  color: var(--ink-faint);
  font-style: italic;
  max-width: 44ch;
}

.coverage__lead { color: var(--ink); }
.coverage__count { font-variant-numeric: tabular-nums; }

.claims__list { margin: 0; padding: 0; list-style: none; }

.claim {
  border-bottom: 1px solid var(--rule);
  padding: 0.65rem 0;
}

.claim__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.claim__predicate {
  color: var(--ink-faint);
  font-variant: small-caps;
  letter-spacing: 0.03em;
  font-size: var(--type-small);
}

.claim__value {
  color: var(--ink);
  font-size: 0.95rem;
}

.claim__notes {
  margin: 0.35rem 0 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* Colour-coded so a glance across the panel tells you how the material is
   attested. The choices go from confident (canonical: warm gold) through
   modern (cool violet) to unsourced (faint neutral). */
.pill {
  display: inline-block;
  padding: 0 0.4rem;
  /* WCAG 2.2 SC 2.5.8 asks 24x24 of any target you can press. As a static
     label a pill is text and exempt; as `.pill--button` it is a control, and
     it was 108x21. The floor goes on all of them so the two cannot drift. */
  min-height: 24px;
  line-height: 24px;
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  border: 1px solid;
  border-radius: 3px;
  white-space: nowrap;
}

.pill--canonical   { color: #f2c300; border-color: rgba(242, 195, 0, 0.6); }
.pill--traditional { color: #87ceeb; border-color: rgba(135, 206, 235, 0.6); }
.pill--modern      { color: #b8a6c9; border-color: rgba(184, 166, 201, 0.6); }
.pill--contested   { color: #f04e23; border-color: rgba(240, 78, 35, 0.7); }
.pill--disputed    { color: #f04e23; border-color: rgba(240, 78, 35, 0.7); border-style: dashed; }
.pill--unsourced   { color: var(--ink-faint); border-color: var(--rule); }

/* THE LIGHT THEME PAINTS THE PILL AND NOT ITS TEXT, AND THE HEX DOES NOT
   CHANGE.
   These five colours are DATA — they are what attestation status looks like —
   so they are the same in both themes by rule, and a reader comparing two
   claims must not be comparing two themes. But they were chosen to be read as
   TEXT on a near-black ground, where canonical gold is 11.20:1, and on cream
   the same gold is 1.43:1. Traditional blue is 1.49:1 and modern lilac 1.93:1.
   Keeping the hex AND keeping it as the ink is the one combination that cannot
   be made to work.
   So the colour changes job rather than value: it fills the pill, and the ink
   goes to the page's own near-black, which puts all five back between 5.18:1
   and 11.20:1 — as readable as the dark theme is now. It is also the answer the
   Tree already gives, where `inkFor` derives a label's ink from whatever King
   or Queen scale colour it has landed on, for exactly this reason.
   `--unsourced` is not here because it was never a data colour: it is
   `--ink-faint` on `--rule`, and both of those already follow the theme. */
:root[data-theme="light"] .pill--canonical   { background: #f2c300; border-color: #f2c300; color: var(--text-primary); }
:root[data-theme="light"] .pill--traditional { background: #87ceeb; border-color: #87ceeb; color: var(--text-primary); }
:root[data-theme="light"] .pill--modern      { background: #b8a6c9; border-color: #b8a6c9; color: var(--text-primary); }
:root[data-theme="light"] .pill--contested,
:root[data-theme="light"] .pill--disputed    { background: #f04e23; border-color: #f04e23; color: var(--text-primary); }

.claim__sources {
  margin-top: 0.5rem;
}

.claim__sources summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.claim__citations {
  margin: 0.5rem 0 0;
  padding: 0 0 0 1.25rem;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.citation + .citation { margin-top: 0.5rem; }

.citation__edition, .citation__locator, .citation__mark {
  color: var(--ink-faint);
}

.citation--contradicts .citation__where em { color: #f04e23; }

.citation__quote {
  margin: 0.3rem 0 0.2rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--rule);
  color: var(--ink);
  font-size: var(--type-small);
  font-style: italic;
}

.citation__notes {
  margin: 0.25rem 0 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
}

/* --- Correspondences page ----------------------------------------------- */

.correspondences {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.correspondences__back {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--ink-faint);
  text-decoration: none;
  font-size: var(--type-small);
}

.correspondences__back:hover { color: var(--ink); }

.correspondences__name {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  font-weight: 400;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.correspondences__number {
  color: var(--ink-faint);
  font-size: 0.7em;
  font-variant-numeric: tabular-nums;
}

.correspondences__title {
  margin: 0.15rem 0 0.9rem;
  color: var(--ink-muted);
  font-style: italic;
}

.correspondences__summary {
  margin: 0 0 1rem;
  max-width: 60ch;
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.filter-radios {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 1rem 0 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}

.filter-radios__label {
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.filter-radios__option {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: var(--type-small);
  text-decoration: none;
}

.filter-radios__option--on {
  background: var(--ground-lift);
  color: var(--ink);
  border-color: var(--ink-faint);
}

.corr-group {
  margin-top: 2rem;
}

.corr-group__heading {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 400;
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.corr-group__note {
  margin: 0 0 1rem;
  color: var(--ink-faint);
  font-size: var(--type-small);
  max-width: 60ch;
}

.corr-card {
  border: 1px solid var(--rule);
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--ground-lift);
}

.corr-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.pill--button {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.pill--button:hover {
  background: var(--ink);
  color: var(--ground);
}

.corr-card__label {
  color: var(--ink-faint);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}

.corr-card__value {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.15rem;
  color: var(--ink);
  font-family: var(--serif);
}

/* Hebrew inline within a value renders RTL with the Hebrew font. */
.corr-card__value:lang(he),
.corr-card__value [lang="he"] {
  font-family: var(--hebrew);
  direction: rtl;
  unicode-bidi: isolate;
}

.corr-card__notes {
  margin: 0 0 0.55rem;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.55;
  max-width: 62ch;
}

.corr-card__sources { margin-top: 0.5rem; }

.corr-card__sources summary {
  cursor: pointer;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.03em;
}

.corr-card__citations {
  margin: 0.6rem 0 0;
  padding: 0 0 0 1.4rem;
  color: var(--ink-muted);
}

.corr-card__citations .citation + .citation { margin-top: 0.6rem; }

.citation__read {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
}

.citation__read a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-faint);
}

.citation__incomplete {
  color: var(--ink-faint);
  font-style: italic;
}

.source-modal {
  max-width: min(42rem, calc(100vw - 2rem));
  border: 1px solid var(--rule);
  padding: 0;
  background: var(--ground);
  color: var(--ink);
}

.source-modal::backdrop {
  background: var(--scrim);
}

.source-modal__panel {
  padding: 1rem;
}

.source-modal__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
}

.source-modal__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.source-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

.source-modal__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}

.source-modal__close:hover {
  border-color: var(--ink);
}

.source-modal__citations {
  margin: 0;
  padding-left: 1.25rem;
}

.source-modal__citations .citation + .citation {
  margin-top: 0.75rem;
}

/* --- the correspondence network ------------------------------------------
   The provenance is the point, so it is on the face of every card rather than
   behind a disclosure. Status is never carried by fill alone: --ground-lift on
   --ground is 1.05:1, so each badge takes a border in its own colour. */

.correspondence__glyph { margin-right: 0.4rem; }
.correspondence__earliest {
  margin: 0.75rem 0 0;
  color: var(--ink-muted);
}
.correspondence__note { color: var(--ink-faint); margin: 1rem 0; }
.correspondence__group { margin: 2rem 0; }
.correspondence__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.correspondence-index__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.correspondence-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 46rem;
  margin: 1.15rem 0 0;
  padding: 1px;
  background: var(--rule);
}
.correspondence-stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.7rem;
  background: var(--ground-lift);
}
.correspondence-stats dt {
  color: var(--ink-faint);
  font-size: var(--type-label);
  line-height: 1.35;
}
.correspondence-stats dd {
  order: -1;
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.correspondence-zone {
  margin: 3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.correspondence-zone__head {
  display: grid;
  gap: 0.6rem 2rem;
  align-items: end;
  margin-bottom: 1.15rem;
}
.correspondence-zone__head p:last-child {
  max-width: 60ch;
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.55;
}
@media (min-width: 800px) {
  .correspondence-zone__head { grid-template-columns: minmax(16rem, 0.8fr) minmax(20rem, 1.2fr); }
}
.correspondence-starts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  list-style: none;
  background: var(--rule);
}
.correspondence-starts li { min-width: 0; background: var(--ground-lift); }
.correspondence-starts a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.65rem;
  height: 100%;
  box-sizing: border-box;
  padding: 0.85rem;
  color: var(--ink);
  text-decoration: none;
}
.correspondence-starts a:hover { background: var(--history-band); }
.correspondence-starts__glyph {
  color: var(--history-event);
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
}
.correspondence-starts strong { display: block; font-family: var(--serif); }
.correspondence-starts small {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.25rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.correspondence-catalogue { display: grid; gap: 0.65rem; }
.correspondence-catalogue__group { margin: 0; }
.correspondence-catalogue__body { padding: 0 !important; }
.correspondence-kind { border-top: 1px solid var(--rule); }
.correspondence-kind:first-child { border-top: 0; }
.correspondence-kind > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--type-small);
  list-style: none;
}
.correspondence-kind > summary::-webkit-details-marker { display: none; }
.correspondence-kind > summary:hover { color: var(--ink); background: var(--history-band); }
.correspondence-kind > summary > span:last-child { flex: none; color: var(--ink-faint); font-size: var(--type-label); }
.correspondence-kind__body { padding: 0.35rem 0.9rem 0.9rem 2rem; }
.correspondence-schools { margin: 0; }
.correspondence-schools__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  margin: 1rem 0 0;
  padding: 1px;
  list-style: none;
  background: var(--rule);
}
.correspondence-schools__list li { padding: 0.8rem; background: var(--ground); }
.correspondence-schools__list strong { display: block; }
.correspondence-schools__list span { color: var(--ink-faint); font-size: var(--type-label); }
.correspondence-schools__list p { margin: 0.35rem 0 0; color: var(--ink-muted); font-size: 0.8rem; line-height: 1.5; }

@media (max-width: 560px) {
  .correspondence-stats { grid-template-columns: 1fr; }
}

.correspondence-card { box-sizing: border-box; }
.correspondence-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.correspondence-card__title { margin: 0; font-size: 1.05rem; }
.correspondence-card__period { color: var(--ink-faint); }
/* A finding, not a blank. "None located" is information and is styled as
   quiet rather than as missing. */
.correspondence-card__absent { color: var(--ink-faint); font-style: italic; }
.correspondence-card__why { margin: 0.75rem 0 0; }
.correspondence-card__evidence-heading {
  margin: 1rem 0 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.correspondence-card__evidence { margin: 0; padding-left: 1.1rem; }
.correspondence-card__citation { margin-bottom: 0.75rem; }
.correspondence-card__work { margin: 0; }
.correspondence-card__citation-meta,
.correspondence-card__citation-note { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: var(--type-small); }
.correspondence-card__quote {
  margin: 0.4rem 0 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
}

/* Status is a border as well as a tint: the tints are one step apart and a
   fill alone is not a distinction anyone can see on this ground. */
.badge--canonical   { border: 1px solid #6f9f7a; }
.badge--traditional { border: 1px solid #8a93b8; }
.badge--modern      { border: 1px solid #b08fb4; }
.badge--contested   { border: 1px solid var(--history-event); }
.badge--disputed    { border: 1px solid var(--history-event); }
.badge--unsourced   { border: 1px dashed var(--ink-faint); color: var(--ink-faint); }

/* The same flip, for the same reason, on the badges: as 1px borders on cream
   these three are 2.60:1, 2.59:1 and 2.42:1, under the 3:1 a non-text indicator
   owes — and here the border is the ONLY status carrier, because `.badge` has no
   fill of its own. Filling it with the status colour and taking the page's ink
   puts them at 6.16:1 to 6.62:1. Contested and disputed are absent because they
   already read through `--history-event`, which is a token and follows. */
:root[data-theme="light"] .badge--canonical   { background: #6f9f7a; color: var(--text-primary); }
:root[data-theme="light"] .badge--traditional { background: #8a93b8; color: var(--text-primary); }
:root[data-theme="light"] .badge--modern      { background: #b08fb4; color: var(--text-primary); }

.correspondence-network__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.5rem 0 0.5rem;
}
.correspondence-filters { flex: 1 1 20rem; }
.correspondence-filters__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.correspondence-filters__toggle,
.correspondence-filters__clear {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 3px;
  padding: 0.4rem 0.7rem;
  min-height: 24px;
  cursor: pointer;
}
.correspondence-filters__clear:disabled { color: var(--ink-faint); cursor: default; }
.correspondence-filters__count { margin-left: 0.5rem; color: var(--ink-faint); }
.correspondence-filters__reading { margin: 0; color: var(--ink-muted); }
.correspondence-filters__panel {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
}
.correspondence-filters__group { border: 0; margin: 0; padding: 0; }
.correspondence-filters__group legend {
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.correspondence-filters__option { display: flex; align-items: center; gap: 0.45rem; min-height: 24px; }
.correspondence-filters__tally { color: var(--ink-faint); }

.correspondence-graph { margin: 1.5rem 0; }
.correspondence-graph__svg { display: block; width: 100%; height: auto; max-width: 46rem; margin: 0 auto; }
.correspondence-graph__edge { stroke: var(--rule); stroke-width: 1.4; }
/* Unsourced reads as provisional in the picture too, or the diagram would
   flatten the distinction the whole section is built on. */
.correspondence-graph__edge[data-status="unsourced"] { stroke-dasharray: 5 4; stroke: var(--ink-faint); }
.correspondence-graph__edge[data-status="contested"],
.correspondence-graph__edge[data-status="disputed"] { stroke: var(--history-event); }
.correspondence-graph__dot { fill: var(--ground-lift); stroke: var(--ink); stroke-width: 2; }
.correspondence-graph__dot[data-status="unsourced"] { stroke: var(--ink-faint); stroke-dasharray: 3 3; }
.correspondence-graph__label { fill: var(--ink); font-size: 14px; }
.correspondence-graph__centre { fill: var(--ground-lift); stroke: var(--ink); stroke-width: 2.5; }
.correspondence-graph__centre-label { fill: var(--ink); font-size: 15px; font-weight: 600; }
.correspondence-graph__node:focus-visible .correspondence-graph__dot { stroke: var(--history-event); stroke-width: 3.5; }
.correspondence-graph__caption { margin: 0.75rem auto 0; max-width: 46rem; color: var(--ink-faint); }
.correspondence-graph__empty { color: var(--ink-faint); }

/* --- the atlas -----------------------------------------------------------
   A map you wander rather than a table you read down. Colour carries the
   family, the LINE carries the evidence: solid where somebody found an ancient
   source, dashed where they looked and found none. That is the one thing this
   section is for, so it is the one thing drawn into the picture. */

.atlas-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 1rem 0 2rem;
}
@media (min-width: 62rem) {
  .atlas-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
}

.atlas { min-width: 0; }
.atlas__toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 0.8rem;
  padding: 1px;
  background: var(--rule);
}
.atlas__toolgroup,
.atlas__legend { padding: 0.65rem; background: var(--ground-lift); }
.atlas__toolgroup-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink-faint);
  font-size: var(--type-label);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.atlas__toolgroup-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.atlas__legend { grid-column: 1 / -1; }
.atlas__zoom, .atlas__actions { display: flex; gap: 0.4rem; }
.atlas__zoom button, .atlas__actions button {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 3px;
  min-height: 28px;
  min-width: 28px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.atlas__zoom button:hover, .atlas__actions button:hover { border-color: var(--ink-faint); }
.atlas__actions button:disabled { color: var(--ink-faint); cursor: default; }
.atlas__key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin: 0;
  padding: 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
}
.atlas__key li { display: inline-flex; align-items: center; gap: 0.35rem; }
.atlas__swatch { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }

@media (max-width: 680px) {
  .atlas__toolbar { grid-template-columns: 1fr; }
  .atlas__legend { grid-column: auto; }
}

.atlas__canvas {
  position: relative;
  border: 1px solid var(--rule);
  background:
    /* The lift, written out by hand before the palette had a token for it.
       A vignette says nothing about the material, so it follows the theme. */
    radial-gradient(circle at 50% 40%, var(--ground-lift) 0%, var(--ground) 70%);
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.atlas__canvas:active { cursor: grabbing; }
.atlas__svg { display: block; width: 100%; height: clamp(24rem, 58vh, 40rem); }

.atlas__edge-group { cursor: pointer; }
.atlas__edge-hit { stroke: transparent; stroke-width: 14; fill: none; }
.atlas__edge {
  stroke: var(--ink-faint);
  fill: none;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 120ms ease, stroke 120ms ease;
}
/* No ancient source found is not the same as nobody having looked, and the
   two are drawn differently: dashes for a search that came back empty, a
   fainter dotted line for one nobody has made. */
.atlas__edge[data-sacred="none_located"] { stroke-dasharray: 7 5; }
.atlas__edge[data-sacred="not_investigated"] { stroke-dasharray: 2 6; opacity: 0.35; }
.atlas__edge[data-status="contested"],
.atlas__edge[data-status="disputed"] { stroke: var(--history-event); }
.atlas__edge[data-lit="false"] { opacity: 0.08; }
.atlas__edge[data-selected="true"] { stroke: var(--ink); opacity: 1; }
.atlas__edge-group:hover .atlas__edge { opacity: 1; stroke: var(--ink); }

.atlas__node { cursor: pointer; }
.atlas__halo { opacity: 0; transition: opacity 140ms ease; }
.atlas__node[data-selected="true"] .atlas__halo,
.atlas__node:hover .atlas__halo { opacity: 0.18; }
.atlas__node:focus-visible { outline: none; }
.atlas__node:focus-visible .atlas__halo { opacity: 0.34; }
.atlas__dot { stroke: var(--ground); stroke-width: 2; transition: r 180ms ease; }
/* A closed circle is hollow: there is more behind it. An open one is filled. */
.atlas__node[data-open="false"] .atlas__dot { fill-opacity: 0.15; stroke: currentColor; }
.atlas__label {
  fill: var(--ink);
  font-size: 13px;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
}
.atlas__node[data-lit="false"] { opacity: 0.18; }
.atlas__node[data-open="true"] .atlas__label { font-weight: 600; }

.atlas__more {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
  pointer-events: none;
}

.atlas-panel {
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  border-radius: 4px;
  padding: 1rem;
  min-width: 0;
}
.atlas-panel--empty { color: var(--ink-muted); }
.atlas-panel__legend { color: var(--ink-faint); font-size: var(--type-small); }
.atlas-panel__head { position: relative; padding-right: 1.5rem; }
.atlas-panel__kicker {
  margin: 0;
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.atlas-panel__title { margin: 0.15rem 0 0.6rem; font-size: 1.15rem; }
.atlas-panel__close {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-size: 1.3rem;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  cursor: pointer;
}
.atlas-panel__body { max-height: 34rem; overflow-y: auto; }

.panel-lede { margin: 0 0 1rem; color: var(--ink-muted); }
.panel-links { list-style: none; margin: 0; padding: 0; }
.panel-links__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.5rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  padding: 0.55rem 0;
  min-height: 28px;
  cursor: pointer;
}
.panel-links__row:hover { color: var(--history-event); }
.panel-links__relation {
  grid-column: 1 / -1;
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel-links__other { font-weight: 600; }
.panel-links__when { color: var(--ink-faint); font-size: var(--type-small); }
.panel-links__row[data-sacred="none_located"] .panel-links__when::before { content: "no ancient source · "; }
.panel-jump { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.panel-jump__button {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  min-height: 28px;
  cursor: pointer;
}

.evidence { border-top: 1px solid var(--rule); padding-top: 0.75rem; margin-top: 0.75rem; }
.evidence__school { margin: 0 0 0.35rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.evidence__period { color: var(--ink-faint); font-weight: 400; }
.evidence__why { margin: 0 0 0.5rem; }
.evidence__mode, .evidence__note { margin: 0.25rem 0; color: var(--ink-faint); font-size: var(--type-small); }
.evidence__list { margin: 0; padding-left: 1.05rem; }
.evidence__item { margin-bottom: 0.7rem; }
.evidence__work { margin: 0; }
.evidence__year { color: var(--ink-faint); }
.evidence__meta { margin: 0.15rem 0 0; color: var(--ink-faint); font-size: 0.82rem; }
.evidence__quote {
  margin: 0.35rem 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
}
.evidence__none { color: var(--ink-faint); font-style: italic; }

/* The card, unstuffed: a line of prose where a four-row definition list was. */
.correspondence-card__line { margin: 0; }
.correspondence-card__sacred { margin: 0.3rem 0 0; color: var(--ink-muted); }
.correspondence-card__sacred--none_located,
.correspondence-card__sacred--unknown { color: var(--ink-faint); }
.correspondence-card__mode { margin: 0.3rem 0 0; color: var(--ink-faint); font-size: var(--type-small); }

@media (prefers-reduced-motion: reduce) {
  .atlas__dot, .atlas__halo, .atlas__edge { transition: none; }
}

/* --- showing less of it at once ------------------------------------------
   Venus has fifty-seven correspondences and most of them are one of Agrippa's
   plants. The strongest are drawn; the rest are one click behind, per thing
   and per kind of relation. */

.atlas__per-branch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-faint);
  font-size: var(--type-small);
}
.atlas__per-branch select {
  background: var(--ground-lift);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.25rem 0.4rem;
  min-height: 28px;
}
/* "+41 more", on the node that is holding them back. */
.atlas__held {
  fill: var(--ink-faint);
  font-size: 11px;
  cursor: pointer;
  paint-order: stroke;
  stroke: var(--ground);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.atlas__held:hover { fill: var(--history-event); }

.panel-group { border-top: 1px solid var(--rule); padding-top: 0.6rem; margin-top: 0.6rem; }
.panel-group__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: var(--type-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel-group__count { font-variant-numeric: tabular-nums; }
.panel-group__more {
  background: none;
  border: 0;
  color: var(--ink-muted);
  padding: 0.3rem 0;
  min-height: 28px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.panel-group__more:hover { color: var(--ink); }

.panel-trails { border-top: 1px solid var(--rule); padding-top: 0.6rem; margin-top: 0.9rem; }
/* A chain is a route through sourced steps, never a correspondence of its own,
   and the page says so above the list rather than leaving it to be assumed. */
.panel-trails__caveat { margin: 0 0 0.5rem; color: var(--ink-faint); font-size: 0.82rem; }
.panel-trails__list { list-style: none; margin: 0; padding: 0; }
.panel-trails__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
  padding: 0.5rem 0;
  min-height: 28px;
  cursor: pointer;
}
.panel-trails__route:first-child { border-top: 0; }
.panel-trails__route:hover { color: var(--history-event); }
.panel-trails__arrow { color: var(--ink-faint); }

/* --- picking what is in the web ------------------------------------------ */

.kinds { position: relative; }
.kinds__toggle {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 3px;
  padding: 0.35rem 0.65rem;
  min-height: 28px;
  cursor: pointer;
}
.kinds__toggle:hover { border-color: var(--ink-faint); }
.kinds__count { margin-left: 0.45rem; color: var(--ink-faint); }
/* A dropdown that hides what is on is worse than the row it replaced. */
.kinds__active {
  margin: 0.3rem 0 0;
  color: var(--ink-faint);
  font-size: 0.8rem;
  max-width: 22rem;
}
.kinds__panel {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(24rem, 78vw);
  padding: 0.7rem;
  border: 1px solid var(--rule);
  background: var(--ground-lift);
  border-radius: 4px;
  box-shadow: 0 12px 28px var(--shadow-strong);
}
.kinds__bulk { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.kinds__bulk button {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  min-height: 28px;
  cursor: pointer;
}
.kinds__bulk button:disabled { color: var(--ink-faint); cursor: default; }
.kinds__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  columns: 2;
  column-gap: 0.9rem;
}
.kinds__option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  break-inside: avoid;
}
.kinds__swatch { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.kinds__tally { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- the tables ---------------------------------------------------------- */

.correspondence-table-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.correspondence-table-picker__item { min-width: 0; }
.correspondence-table-picker__link {
  display: grid;
  grid-template-rows: 8.5rem 1fr;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 0.35rem;
  background: var(--ground-lift);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.correspondence-table-picker__link:hover,
.correspondence-table-picker__link:focus-visible {
  border-color: color-mix(in srgb, var(--table-group-colour) 72%, #20201d);
  box-shadow: 0 0.35rem 0.9rem var(--shadow-soft);
  transform: translateY(-2px);
}
.correspondence-table-picker__link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--table-group-colour) 72%, #20201d);
  outline-offset: 3px;
}
.correspondence-table-picker__art {
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--table-group-colour) 6%, transparent), transparent 56%),
    var(--ground);
  color: color-mix(in srgb, var(--table-group-colour) 78%, #20201d);
}
.correspondence-table-picker__svg {
  display: block;
  width: 5.25rem;
  height: 5.25rem;
}
.correspondence-table-picker__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.8rem;
}
.correspondence-table-picker__name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
}
.correspondence-table-picker__count {
  margin-top: 0.3rem;
  color: var(--ink-muted);
  font-size: var(--type-label);
  line-height: 1.35;
}
@media (max-width: 52rem) {
  .correspondence-table-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 36rem) {
  .correspondence-table-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .correspondence-table-picker__link { grid-template-rows: 7.25rem 1fr; }
  .correspondence-table-picker__svg { width: 4.4rem; height: 4.4rem; }
  .correspondence-table-picker__body { padding: 0.7rem; }
  .correspondence-table-picker__name { font-size: var(--type-small); }
}
@media (prefers-reduced-motion: reduce) {
  .correspondence-table-picker__link { transition: none; }
  .correspondence-table-picker__link:hover,
  .correspondence-table-picker__link:focus-visible { transform: none; }
}

.correspondence-table__scroll { overflow-x: auto; margin: 1.5rem 0; }
.correspondence-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 44rem;
}
.correspondence-table th,
.correspondence-table td {
  border: 1px solid var(--rule);
  padding: 0.5rem 0.6rem;
  vertical-align: top;
  text-align: left;
}
.correspondence-table thead th {
  position: sticky;
  top: 0;
  background: var(--ground-lift);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
}
.correspondence-table tbody th { background: var(--ground-lift); white-space: nowrap; }
.correspondence-table tbody tr:nth-child(even) td { background: var(--history-band); }
.correspondence-table__cell { list-style: none; margin: 0; padding: 0; }
.correspondence-table__cell li { margin-bottom: 0.15rem; }
.correspondence-table__empty { color: var(--ink-faint); }
.correspondence-table__hebrew {
  display: inline-block;
  min-width: 1.1em;
  margin-inline-end: 0.18em;
  font-size: 1.35em;
  font-weight: 500;
  line-height: 0.8;
  text-align: center;
}
/* Same rule as the map's lines: an underline where no ancient source was
   located, so the table carries the provenance rather than flattening it. */
.correspondence-table__link[data-sacred="none_located"],
.correspondence-table__link[data-sacred="not_investigated"] {
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- the hover card, and the way into a thing's own table ----------------- */

.section-index__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0; }
.section-index__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.4rem 0.7rem;
  min-height: 28px;
  text-decoration: none;
}
.section-index__action:hover { border-color: var(--ink-faint); }

/* The little grid beside a name: open that thing's own table. */
.correspondence-table__open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 0.25rem;
  vertical-align: middle;
  color: var(--ink-faint);
  border-radius: 3px;
}
.correspondence-table__open:hover,
.correspondence-table__open:focus-visible { color: var(--history-event); background: var(--ground); }
.correspondence-table__note { color: var(--ink-faint); margin: 0.75rem 0 0; }

.node-table__sacred--none_located,
.node-table__sacred--not_investigated { color: var(--ink-faint); font-style: italic; }
.node-table__sources {
  background: none;
  border: 0;
  color: var(--ink);
  padding: 0;
  min-height: 28px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.node-table__sources:hover { color: var(--history-event); }

/* Appears when a reader RESTS on a name — three quarters of a second, which is
   long enough that crossing a table of six hundred cells never fires one. */
.hovercard {
  position: absolute;
  z-index: 20;
  max-width: 22rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ground-lift);
  box-shadow: 0 10px 26px var(--shadow-strong);
  pointer-events: none;
}
.hovercard__name { margin: 0; font-weight: 600; }
.hovercard__kind,
.hovercard__attested { margin: 0.1rem 0 0; color: var(--ink-faint); font-size: 0.82rem; }
.hovercard__body { margin: 0.4rem 0 0; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) { .hovercard { box-shadow: none; } }

/* --- the trail ------------------------------------------------------------
   Where a reader has been. The browser's own back button goes one step and
   says nothing about the route; tracing a chain of correspondences is the
   point of this section, so the route is drawn. */

.trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 1rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ground-lift);
}
.trail__back {
  font-weight: 600;
  text-decoration: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.trail__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  color: var(--ink-faint);
  font-size: var(--type-small);
  min-width: 0;
}
.trail__list li { display: inline-flex; align-items: center; gap: 0.3rem; }
.trail__list li + li::before { content: "→"; color: var(--ink-faint); }
.trail__here { color: var(--ink); }
.trail__clear {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ink-faint);
  min-height: 28px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trail__clear:hover { color: var(--ink); }

/* --- the correspondence panel, on a thing's own page ----------------------
   Rendered only where there is something to show: an empty "Correspondences"
   heading on a page about Bael is noise, not information. */

.corr-panel {
  margin: 2rem 0 0;
  padding: 0;
}
.corr-panel__disclosure { margin: 0; }
.corr-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.corr-panel__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1.05rem;
}
.corr-panel__count { margin: 0; color: var(--ink-faint); }
.corr-panel__table { border-collapse: collapse; width: 100%; margin-top: 0.75rem; }
.corr-panel__table th,
.corr-panel__table td {
  border-top: 1px solid var(--rule);
  padding: 0.4rem 0.5rem 0.4rem 0;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.corr-panel__table thead th {
  border-top: 0;
  font-size: var(--type-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.corr-panel__table tbody th { font-weight: 600; }
.corr-panel__table td:first-child { color: var(--ink-muted); white-space: nowrap; }
/* The same distinction the map's lines and the big tables draw. */
.corr-panel__table tr[data-sacred="none_located"] th a,
.corr-panel__table tr[data-sacred="not_investigated"] th a {
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
}
.corr-panel__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; }

/* --- focus, and taking a picture of part of the map ---------------------- */

.atlas__show { flex-wrap: wrap; }

.atlas__capture {
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-radius: 3px;
  padding: 0.35rem 0.65rem;
  min-height: 28px;
  cursor: pointer;
}
.atlas__capture:hover { border-color: var(--ink-faint); }
.atlas__capture--armed { border-color: var(--history-event); color: var(--history-event); }

/* While a region is being chosen the drag belongs to the marquee, so the
   grab cursor would be a lie. */
.atlas__canvas--arming { cursor: crosshair; }
.atlas__canvas--arming:active { cursor: crosshair; }

/* Viewport coordinates, so fixed rather than absolute. */
.atlas__marquee {
  position: fixed;
  z-index: 15;
  border: 1px dashed var(--history-event);
  background: rgb(226 183 107 / 0.08);
  pointer-events: none;
}

.atlas__capture-status {
  position: absolute;
  right: 0.75rem;
  bottom: 0.6rem;
  margin: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  font-size: var(--type-small);
}
.atlas__capture-status--ok { color: var(--ink); }
.atlas__capture-status--no { color: var(--history-event); }

/* --- a chain the reader builds ------------------------------------------- */

.chainbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ground-lift);
}
.chainbar__empty { margin: 0; color: var(--ink-faint); font-size: var(--type-small); }
.chainbar__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}
.chainbar__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem 0.2rem 0.15rem 0.6rem;
}
.chainbar__list li + li::before {
  content: "→";
  color: var(--ink-faint);
  margin: 0 0.35rem 0 -0.1rem;
}
.chainbar__drop {
  background: none;
  border: 0;
  color: var(--ink-faint);
  cursor: pointer;
  min-width: 24px;
  min-height: 24px;
  line-height: 1;
}
.chainbar__drop:hover { color: var(--history-event); }
/* The chain read out in words, which is the thing worth copying. */
.chainbar__reading { margin: 0; color: var(--ink-muted); font-size: var(--type-small); flex: 1 1 16rem; }
/* A gap is an answer, not a failure, and is coloured like the other findings
   this section reports rather than like an error. */
.chainbar__gap { margin: 0; color: var(--history-event); font-size: var(--type-small); flex: 1 1 100%; }
.chainbar__clear {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ink-faint);
  min-height: 28px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chainbar__clear:hover { color: var(--ink); }

/* --- setting the map up before wandering it ------------------------------
   A native <dialog>, so the backdrop, the focus trap and Escape are the
   browser's job rather than this stylesheet's. What is left here is the
   panel: the same ground-lift card, rule border and swatch vocabulary the
   kind picker and the evidence panel already use, at the size of a page
   rather than a dropdown. */

dialog.setup {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(90vh, 52rem);
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--ground-lift);
  color: var(--ink);
  box-shadow: 0 24px 60px var(--shadow-strong);
  overflow: hidden;
}
dialog.setup::backdrop { background: var(--scrim); }

.setup__form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-height: inherit;
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1.35rem;
}

.setup__title { margin: 0; font-size: 1.3rem; }
.setup__lede { margin: 0; color: var(--ink-muted); font-size: var(--type-small); max-width: 38rem; }

/* Rules between the three questions, not boxes around them: they are one
   form read downwards, not three panels. */
.setup__part { border-top: 1px solid var(--rule); padding-top: 1rem; }
.setup__heading {
  margin: 0 0 0.5rem;
  font-size: var(--type-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
dialog.setup .setup__hint { margin: 0.45rem 0 0; color: var(--ink-faint); font-size: 0.82rem; max-width: 38rem; }

.setup__field { display: flex; flex-direction: column; gap: 0.3rem; max-width: 24rem; }
.setup__field > span { font-size: var(--type-small); color: var(--ink-muted); }
.setup__field input,
.setup__field select {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font: inherit;
  min-height: 32px;
  padding: 0.35rem 0.5rem;
}
.setup__field input:focus-visible,
.setup__field select:focus-visible { border-color: var(--ink-faint); }

/* Loading and failure both say something. A silent empty list reads as "no
   matches", which is a different answer from "no answer yet". */
.setup__status { margin: 0.6rem 0 0; color: var(--ink-faint); font-size: var(--type-small); max-width: 38rem; }
.setup__status--no { color: var(--history-event); }
.setup__retry {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 24px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.setup__group { margin-top: 0.85rem; }
.setup__group-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--ink-muted);
}
.setup__swatch { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.setup__tally { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-weight: 400; }

.setup__results {
  list-style: none;
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
}
.setup__result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  width: 100%;
  min-height: 44px;
  padding: 0.35rem 0.55rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.setup__result:hover { border-color: var(--ink-faint); }
/* The chosen start is never marked by fill alone — ground-lift against
   ground is 1.05:1. The left rule is what carries it, as it does in the
   site nav. */
.setup__result--on {
  border-color: var(--history-event);
  box-shadow: inset 3px 0 0 var(--history-event);
}
.setup__result-name { font-weight: 600; }
.setup__result-kind, .setup__result-degree { color: var(--ink-faint); font-size: var(--type-label); }

.setup__bulk { display: flex; gap: 0.4rem; margin: 0.5rem 0; }
.setup__bulk button,
.setup__cancel,
.setup__apply {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  min-height: 32px;
  padding: 0.35rem 0.75rem;
}
.setup__bulk button:hover, .setup__cancel:hover, .setup__apply:hover { border-color: var(--ink-faint); }
.setup__bulk button:disabled { color: var(--ink-faint); cursor: default; }

.setup__kinds {
  list-style: none;
  display: grid;
  gap: 0.15rem 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  margin: 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
}
.setup__kind {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  cursor: pointer;
}

dialog.setup .setup__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
/* The confirm is the only thing on this screen that changes the map, so it
   is the only thing wearing the accent. */
.setup__apply { border-color: var(--history-event); color: var(--history-event); }
.setup__apply:hover { border-color: var(--history-event); background: var(--tint-deepen); }

/* The way into the setup modal. Given the same weight as the view controls
   beside it: choosing where to start is not a secondary action on a map of
   five hundred things. */
.atlas__setup {
  background: none;
  border: 1px solid var(--history-event);
  color: var(--history-event);
  border-radius: 3px;
  padding: 0.35rem 0.65rem;
  min-height: 28px;
  cursor: pointer;
}
.atlas__setup:hover { background: rgb(226 183 107 / 0.1); }

/* --- the setup dialog, folded -------------------------------------------
   Three questions stacked out flat made a box taller than most windows, and a
   reader answering the first had to scroll past the other two to reach the
   button. One open at a time; each shut one says what it holds. */

.setup__part { border-top: 1px solid var(--rule); }
.setup__part:first-of-type { border-top: 0; }

.setup__disclose {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: 0;
  color: var(--ink);
  padding: 0.7rem 0;
  min-height: 44px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.setup__disclose:hover .setup__disclose-title { color: var(--history-event); }
.setup__disclose-title { font-weight: 600; }
/* A marker as well as the fill, since a shut fold and an open one must differ
   by more than a background nobody can see. */
.setup__disclose::before {
  content: "▸";
  position: absolute;
  margin-left: -1rem;
  color: var(--ink-faint);
}
.setup__part--open .setup__disclose::before { content: "▾"; color: var(--ink); }
.setup__part { position: relative; padding-left: 1rem; }

/* What is set, while it is shut. A fold that hides its own answer is worse
   than the section it replaced. */
.setup__summary { color: var(--ink-faint); font-size: var(--type-small); text-align: right; }
.setup__part--open .setup__summary { color: var(--ink-muted); }

.setup__body { padding-bottom: 0.9rem; }
/* The results are the tall part; they scroll inside themselves rather than
   growing the dialog. */
.setup__results { max-height: 15rem; overflow-y: auto; }

/* The dialog was already capped at 90vh — but everything, the confirm button
   included, sat inside one scrolling column, so answering the first question
   meant scrolling past the other two to reach it. The folds shortened the
   middle; this pins the ends. The topics scroll between a fixed head and a
   fixed foot, so the button a reader is heading for never moves. */
.setup__form {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.setup__form > .setup__title { padding: 1.25rem 1.35rem 0; }
.setup__form > .setup__lede { padding: 0.4rem 1.35rem 1rem; }
.setup__parts {
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.35rem;
}
dialog.setup .setup__actions {
  padding: 0.9rem 1.35rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--ground-lift);
}
/* One list per group, and the groups scroll together in the panel above
   rather than each growing its own scrollbar. */
.setup__results { max-height: none; overflow-y: visible; }