/* Metatron Health — /search/, the field instrument.
   ---------------------------------------------------------------------------
   Every colour and face here comes from the site's own tokens (health-world.css:
   --paper, --ink, --forest, --clay, --amber, --line, --serif, --sans). Nothing
   is redefined on :root -- the previous graph stylesheet overwrote --paper,
   --ink, --line and --serif globally, which is why the page it loaded on stopped
   looking like the rest of the site.

   Sizes follow the Metatron density rule: nothing above 28px, h2 22, h3 18,
   body 15, blocks separated by 24px and a hairline rather than by empty space.
   The site's own h1/h2/h3 rules are !important up to 96px, so the caps here
   have to be !important too. */

.field-atlas {
  --atlas-hair: rgba(23, 36, 31, .12);
  --atlas-raised: #fbf9f4;
  margin: 0 var(--gutter, clamp(1.1rem, 4vw, 4.5rem)) 32px;
}

/* ---- hero: three real things above the fold, not one headline in a void ---- */

.atlas-hero {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--line, #d8d0c0);
}
.atlas-hero h1 {
  max-width: 30ch;
  margin: 0 0 .35rem;
  font: 400 1.75rem/1.15 var(--serif, Georgia, serif) !important;
  letter-spacing: -.02em;
}
.atlas-hero p {
  max-width: 68ch;
  margin: 0;
  color: var(--ink-2, #53615b);
  font-size: .9375rem;
  line-height: 1.55;
}
.atlas-hero p a { color: var(--forest, #173f35); }

/* ---- the search field ---- */

.atlas-search { margin: 20px 0 0; }
.atlas-search label {
  display: block;
  margin: 0 0 .4rem;
  color: var(--ink-2, #53615b);
  font-size: .8125rem;
  letter-spacing: .01em;
}
.atlas-field {
  display: flex;
  align-items: center;
  gap: .4rem;
  max-width: 700px;
  padding: .3rem .3rem .3rem .85rem;
  background: var(--white, #fffdf8);
  border: 1px solid var(--forest, #173f35);
  border-radius: 999px;
}
.atlas-field:focus-within { outline: 2px solid var(--forest, #173f35); outline-offset: 3px; }
.atlas-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink, #17241f);
  font: 400 .9375rem/1.4 var(--sans, system-ui, sans-serif);
  outline: 0;
}
.atlas-field input::-webkit-search-cancel-button { display: none; }
.atlas-field input:disabled { color: var(--ink-2, #53615b); }
.atlas-clear,
.atlas-go {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  font: 400 .875rem/1 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}
.atlas-clear {
  width: 40px;
  background: transparent;
  color: var(--ink-2, #53615b);
  font-size: 1.1rem;
}
.atlas-clear:hover { color: var(--clay, #b85f42); }
.atlas-go {
  min-width: 96px;
  padding: 0 1.1rem;
  background: var(--forest, #173f35);
  color: var(--white, #fffdf8);
}
.atlas-go:hover { background: var(--forest-bright, #286a58); }
.atlas-hint {
  margin: .5rem 0 0;
  color: var(--ink-2, #53615b);
  font: 400 .75rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .02em;
}

/* The live region must exist in the markup from the start and must never be
   display:none -- a hidden live region is announced by nothing. */
.atlas-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- type chips ---- */

.atlas-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}
.atlas-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 32px;
  padding: 0 .7rem;
  background: transparent;
  border: 1px solid var(--line, #d8d0c0);
  border-radius: 999px;
  color: var(--ink, #17241f);
  font: 400 .8125rem/1 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}
.atlas-chip:hover { border-color: var(--forest, #173f35); }
.atlas-chip.is-on {
  background: var(--forest, #173f35);
  border-color: var(--forest, #173f35);
  color: var(--white, #fffdf8);
}
.atlas-chip-n {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .75rem;
  opacity: .75;
}

/* ---- results ---- */

.atlas-resulthead {
  margin: 16px 0 0;
  color: var(--ink-2, #53615b);
  font: 400 .8125rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
}
.atlas-results {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line, #d8d0c0);
}
.atlas-results[hidden] { display: none; }
.atlas-result { border-bottom: 1px solid var(--atlas-hair); }
.atlas-result-link {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 10px 4px;
  color: var(--ink, #17241f);
  text-decoration: none;
}
.atlas-result-link:hover,
.atlas-result-link[aria-selected="true"] { background: var(--atlas-raised); }
.atlas-result-link[aria-selected="true"] { outline: 2px solid var(--forest, #173f35); outline-offset: -2px; }
.atlas-result-kind {
  grid-row: 1 / span 3;
  color: var(--clay, #b85f42);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: .18rem;
}
.atlas-result-title {
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--forest, #173f35);
}
.atlas-result-link:hover .atlas-result-title { text-decoration: underline; }
.atlas-result-snip,
.atlas-result-in {
  grid-column: 2;
  color: var(--ink-2, #53615b);
  font-size: .8125rem;
  line-height: 1.5;
}
.atlas-result-in { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .75rem; }
.atlas-results mark {
  background: rgba(162, 123, 47, .22);
  color: inherit;
  padding: 0 .1em;
}

.atlas-empty { padding: 16px 4px 24px; }
.atlas-empty p { margin: 0 0 .5rem; font-size: .9375rem; }
.atlas-suggest {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--forest, #173f35);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.atlas-starts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.atlas-starts a { font-size: .875rem; }

/* ---- the instrument ---- */

.atlas-instrument {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 24px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line, #d8d0c0);
}
.atlas-stagewrap { min-width: 0; }
.atlas-stagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.atlas-stagehead h2 {
  margin: 0;
  font: 400 1.375rem/1.2 var(--serif, Georgia, serif) !important;
  letter-spacing: -.02em;
}
.atlas-stage { position: relative; }
.atlas-svg { display: block; width: 100%; height: auto; }

.atlas-lattice circle { fill: none; stroke: var(--atlas-hair); stroke-width: 1; }

/* The lines carry the adjacency data, so they must clear WCAG 1.4.11's 3:1 for
   non-text contrast. The site's --line hairline measures 1.38 against paper --
   fine for a rule between paragraphs, not for the graph's only quantitative
   channel. --ink-2 at .8 measures ~3.7. */
.atlas-edge {
  stroke: var(--ink-2, #53615b);
  fill: none;
  opacity: .8;
  transition: opacity 180ms ease-out, stroke 180ms ease-out;
}
.atlas-edge.s1 { stroke-width: 1; }
.atlas-edge.s2 { stroke-width: 1.8; }
.atlas-edge.s3 { stroke-width: 2.8; }
.atlas-edge.s4 { stroke-width: 4; }
.atlas-edge.is-extra { /* marker only; visibility is is-off's job */ }
.atlas-edge.is-off { opacity: 0; }
.atlas-edge.is-on { stroke: var(--forest, #173f35); opacity: .9; }
.atlas-edge.is-lit { stroke: var(--clay, #b85f42); opacity: 1; }

.atlas-node { cursor: pointer; }
.atlas-hit { fill: transparent; }
.atlas-halo { fill: var(--forest-bright, #286a58); opacity: 0; transition: opacity 180ms ease-out; }
.atlas-disc {
  fill: var(--white, #fffdf8);
  stroke: var(--forest, #173f35);
  stroke-width: 1.6;
  transition: fill 180ms ease-out, stroke 180ms ease-out, opacity 180ms ease-out;
}
.atlas-label {
  fill: var(--ink-2, #53615b);
  font: 400 12px/1 var(--sans, system-ui, sans-serif);
  pointer-events: none;
  transition: fill 180ms ease-out, opacity 180ms ease-out;
}
.atlas-node:hover .atlas-disc { stroke: var(--forest-bright, #286a58); stroke-width: 2.4; }
.atlas-node:hover .atlas-label { fill: var(--ink, #17241f); }
.atlas-node:focus-visible { outline: none; }
.atlas-node:focus-visible .atlas-disc { stroke: var(--clay, #b85f42); stroke-width: 3; }

.atlas-node.is-neighbour .atlas-disc { stroke-width: 2.2; }
.atlas-node.is-focus .atlas-disc { fill: var(--forest, #173f35); stroke: var(--forest, #173f35); }
.atlas-node.is-focus .atlas-halo { opacity: .16; }
.atlas-node.is-focus .atlas-label { fill: var(--ink, #17241f); font-weight: 600; }

/* Search dims, it never removes: taking the unmatched fields away destroys the
   only thing the ring is for -- seeing what a field sits next to, and what it
   does not. */
.atlas-node.is-dim .atlas-disc { opacity: .28; }
.atlas-node.is-dim .atlas-label { opacity: .3; }
.atlas-node.is-match .atlas-disc { fill: var(--clay, #b85f42); stroke: var(--clay, #b85f42); }
.atlas-node.is-match .atlas-label { fill: var(--ink, #17241f); font-weight: 600; }

.atlas-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 8px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--atlas-hair);
  color: var(--ink-2, #53615b);
  font-size: .75rem;
  line-height: 1.5;
}
.atlas-legend b { color: var(--ink, #17241f); font-weight: 600; }
.atlas-legend svg { vertical-align: middle; }
.atlas-edgebtn {
  align-self: flex-start;
  min-height: 32px;
  padding: 0 .7rem;
  background: transparent;
  border: 1px solid var(--line, #d8d0c0);
  border-radius: 999px;
  color: var(--ink, #17241f);
  font: 400 .75rem/1 var(--sans, system-ui, sans-serif);
  cursor: pointer;
}
.atlas-edgebtn[aria-pressed="true"] { border-color: var(--forest, #173f35); color: var(--forest, #173f35); }

/* ---- the panel ---- */

/* start, not stretch: the panel is as tall as the field it describes, and
   stretching it only manufactures a box of empty space. */
.atlas-panel { min-width: 0; align-self: start; }
.atlas-panel-head { padding-bottom: 12px; border-bottom: 1px solid var(--atlas-hair); }
.atlas-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 .35rem;
}
.atlas-tag {
  padding: .12rem .5rem;
  border: 1px solid var(--forest, #173f35);
  border-radius: 999px;
  color: var(--forest, #173f35);
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.atlas-window {
  color: var(--ink-2, #53615b);
  font: 400 .6875rem/1.4 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .04em;
}
.atlas-panel h3 {
  margin: 0 0 .25rem;
  font: 400 1.125rem/1.25 var(--serif, Georgia, serif) !important;
  letter-spacing: -.015em;
}
.atlas-lede {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2, #53615b);
  font-size: .875rem;
  line-height: 1.55;
}

.atlas-descend {
  display: grid;
  gap: .1rem;
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--atlas-raised);
  border: 1px solid var(--line, #d8d0c0);
  border-radius: 4px;
  text-decoration: none;
}
.atlas-descend:hover { border-color: var(--forest, #173f35); }
.atlas-descend b { color: var(--forest, #173f35); font-size: .875rem; font-weight: 600; }
.atlas-descend span { color: var(--ink-2, #53615b); font-size: .75rem; }

.atlas-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
  margin: 16px 0 0;
}
.atlas-stat {
  display: grid;
  gap: .1rem;
  padding: 10px 12px;
  border: 1px solid var(--line, #d8d0c0);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink, #17241f);
}
.atlas-stat:hover { border-color: var(--forest, #173f35); background: var(--atlas-raised); }
.atlas-stat-lab { color: var(--ink-2, #53615b); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; }
.atlas-stat-val {
  font: 400 1.125rem/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.atlas-stat-sub { display: flex; justify-content: space-between; gap: 8px; font-size: .6875rem; color: var(--ink-2, #53615b); }
.atlas-stat-go { color: var(--forest, #173f35); }

.atlas-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
}
.atlas-figures figure { margin: 0; }
.atlas-figures svg { display: block; width: 100%; height: auto; }
.atlas-figures figcaption {
  margin-top: .25rem;
  color: var(--ink-2, #53615b);
  font-size: .6875rem;
  line-height: 1.45;
}
.sig-grid { fill: none; stroke: var(--atlas-hair); stroke-width: 1; }
.sig-median { fill: none; stroke: var(--ink-2, #53615b); stroke-width: 1; stroke-dasharray: 3 3; opacity: .8; }
.sig-shape { fill: rgba(23, 63, 53, .14); stroke: var(--forest, #173f35); stroke-width: 2; stroke-linejoin: round; }
.sig-axis { fill: var(--ink-2, #53615b); font: 400 8px/1 ui-monospace, Menlo, monospace; }
.sig-year { stroke: var(--forest, #173f35); stroke-width: 6; stroke-linecap: round; }
.sig-year.is-partial { opacity: .45; }

.atlas-xref { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--atlas-hair); }
.atlas-xref h4 {
  margin: 0 0 .2rem;
  font: 400 1.125rem/1.25 var(--serif, Georgia, serif);
  letter-spacing: -.015em;
}
.atlas-why { margin: 0 0 8px; color: var(--ink-2, #53615b); font-size: .75rem; line-height: 1.5; max-width: 62ch; }
.atlas-xref ul { margin: 0; padding: 0; list-style: none; }
.atlas-xref li { border-bottom: 1px solid var(--atlas-hair); }
.atlas-xrow {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  padding: .3rem .2rem;
  background: transparent;
  border: 0;
  color: var(--ink, #17241f);
  font: 400 .8125rem/1.4 var(--sans, system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
}
.atlas-xrow:hover { background: var(--atlas-raised); }
.atlas-xrow:hover .atlas-xname { color: var(--forest, #173f35); text-decoration: underline; }
.atlas-bar { display: block; height: 5px; background: var(--atlas-hair); border-radius: 999px; overflow: hidden; }
.atlas-bar i { display: block; height: 100%; background: var(--forest, #173f35); }
.atlas-xmeta {
  color: var(--ink-2, #53615b);
  font: 400 .6875rem/1.4 ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- the table: the same sixteen rows, and the accessible peer of the ring ---- */

.atlas-table-wrap { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line, #d8d0c0); overflow-x: auto; }
.atlas-table-wrap h2 {
  margin: 0 0 .2rem;
  font: 400 1.375rem/1.2 var(--serif, Georgia, serif) !important;
  letter-spacing: -.02em;
}
.atlas-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.atlas-table caption { text-align: left; color: var(--ink-2, #53615b); font-size: .75rem; line-height: 1.5; padding-bottom: 8px; max-width: 68ch; }
.atlas-table th, .atlas-table td { padding: .42rem .6rem .42rem 0; border-bottom: 1px solid var(--atlas-hair); text-align: left; vertical-align: baseline; }
.atlas-table thead th { color: var(--ink-2, #53615b); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.atlas-table td.num, .atlas-table th.num {
  text-align: right;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.atlas-table tbody tr:hover { background: var(--atlas-raised); }
.atlas-table a { color: var(--forest, #173f35); }

@media (max-width: 900px) {
  .atlas-instrument { grid-template-columns: minmax(0, 1fr); }
  /* A sixteen-node labelled ring is not legible at 375px wide. Rather than
     shrink it into illegibility, the stage keeps the ring at a readable size and
     scrolls inside itself -- the same rule the table follows. The page body
     still never scrolls sideways. */
  .atlas-stage { overflow-x: auto; overscroll-behavior-x: contain; }
  .atlas-svg { width: 640px; max-width: none; }
  .atlas-result-link { grid-template-columns: minmax(0, 1fr); }
  .atlas-result-kind { grid-row: auto; }
  .atlas-hero h1 { font-size: 1.5rem !important; }
  .atlas-stagehead h2, .atlas-table-wrap h2 { font-size: 1.25rem !important; }
  .field-atlas { margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-edge, .atlas-disc, .atlas-halo, .atlas-label { transition-duration: 1ms; }
}