/* atlas-overrides.css — EEGMaster palette for the Seizure Semiology Atlas.
 *
 * Loaded from a <link> immediately after the generated <style> block in
 * index.html, so every rule here has equal specificity and simply wins on
 * order. Nothing in the generated file is edited. Reverting the whole restyle
 * is deleting that one <link>; re-applying it after an upstream rebuild is
 * re-adding it. That is the entire reason this lives in its own file rather
 * than being patched into index.html.
 *
 * Two layers:
 *   1. an --em-* token set, defined once for light and once for dark
 *   2. the twelve :root variables of the generated sheet remapped onto those
 *      tokens, plus the ~70 rules that hardcode a colour instead of using them
 *
 * Upstream is light-only (:root declares `color-scheme: light`, and there is no
 * prefers-color-scheme or [data-theme] anywhere in the generated CSS), so dark
 * mode is built here rather than merely re-tinted. Theme selection is by
 * [data-theme] on <html>, matching css/redesign.css; the atlas sets that on
 * itself from the site theme cookie, and seizure-atlas.php mirrors live toggles
 * into the frame.
 *
 * Region and lateralization colours are deliberately NOT recoloured. They
 * arrive from the projection data as --group-color / --region-color /
 * --target-color and encode which lobe or which side a finding belongs to.
 * They are meaning, not decoration; flattening them to gold destroys
 * information. Only the neutral mix targets they blend against move here.
 *
 * The exception is the browse tree's own bars (2026-09-14). Upstream repeats the
 * group colour down every level of it — region bar, section bar, sign bar,
 * weighted-view heading — where it is decoration rather than information: each
 * bar already says in words which region it is. Those are flattened to a neutral
 * dark-to-light ramp. The region buttons and the map, which are the places the
 * colour actually tells you something, keep it. See the browse-tree block.
 */

:root {
  /* Site palette, from css/redesign.css:
     --primary-color #f9d25f · --primary-color-2 #fff8dc · --text-color #0B0B0B

     Surfaces are deliberately NEUTRAL rather than the site cream: at the scale
     of this page a #fff8dc ground reads as a yellow cast over everything, not
     as brand colour. The identity is carried by the gold accent and the
     near-black chrome instead. Only selection states keep a gold wash. */
  --em-bg:            #f4f4f5;   /* neutral page ground, no cream cast    */
  --em-panel:         #ffffff;   /* cards and panels sit above the cream  */
  --em-panel-2:       #fafafa;   /* subtler raised surface                */
  --em-ink:           #0B0B0B;
  --em-muted:         #5b5b60;   /* neutral grey                          */
  --em-line:          #e2e2e5;
  --em-line-2:        #eeeef0;

  /* Third step of the browse tree's bar ramp, under --em-chrome (region) and
     --em-chrome-2 (section). See the browse-tree block for why it is flat. */
  --em-sign:          #45454a;

  /* Dark chrome: the header and the collapsible group bars. Upstream used a
     navy gradient; the site equivalent at that weight is its near-black. */
  --em-chrome:        #0B0B0B;
  --em-chrome-2:      #2c2c2c;
  --em-on-chrome:     #ffffff;
  --em-on-chrome-dim: #c9c9cd;

  /* Gold is the accent, but kept OFF surfaces: it appears only on the search
     button, the selected-region outline, and text. Selection washes are neutral
     grey, because a pale gold behind open facets and the active tab reads as a
     yellow cast across the page rather than as an accent. The text role is a
     darkened gold, since #f9d25f on white is roughly 1.5:1 and unreadable. */
  --em-accent:        #f9d25f;
  --em-accent-strong: #ecb807;
  --em-accent-ink:    #6b5000;   /* 5.2:1 on the gold button; #7a5c00 was 4.3 */
  /* The map's count badges. The brain plates are the same pale illustration in
     both themes — nothing inverts them — so these are fixed rather than
     theme-flipping, like the gold above. Red because the plate carries no red
     at all: the cortex is beige and grey, the markers are white discs with a
     dark-gold ring and near-black area numbers, and gold put the count in the
     same family as the ring and the selected-marker fill. This is the one thing
     on the map that is neither anatomy nor a control. */
  --em-count:         #d92b1f;
  --em-count-halo:    #ffffff;
  --em-accent-tint:   #eeeef1;   /* selection wash: neutral, not gold */
  --em-accent-edge:   #d8d8dd;

  --em-warn-bg:       #f6f6f7;
  --em-warn-edge:     #dededf;
  --em-warn-ink:      #8a5209;
  --em-error-ink:     #8b3341;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --em-bg:            #1e1e1e;   /* --bs-body-bg dark          */
  --em-panel:         #2c2c2c;   /* --primary-color-2 dark     */
  --em-panel-2:       #262626;
  --em-ink:           #e0e0e0;
  --em-muted:         #a49e8c;
  --em-line:          #444444;
  --em-line-2:        #383838;

  --em-sign:          #3a3a40;

  --em-chrome:        #0B0B0B;
  --em-chrome-2:      #2c2c2c;
  --em-on-chrome:     #f9d25f;
  --em-on-chrome-dim: #cfc7ae;

  /* On a dark ground gold is legible as text, so both accent roles collapse. */
  --em-accent:        #f9d25f;
  --em-accent-strong: #ffe484;
  --em-accent-ink:    #f9d25f;
  --em-accent-tint:   #3a331f;
  --em-accent-edge:   #5c5330;

  --em-warn-bg:       #332a1a;
  --em-warn-edge:     #5c4a2a;
  --em-warn-ink:      #e8b866;
  --em-error-ink:     #e8909c;
}

/* ---- 1. the generated sheet's own variables, remapped -------------------- */
:root {
  --navy:   var(--em-chrome);
  --navy2:  var(--em-chrome-2);
  --teal:   var(--em-accent);
  --teal-d: var(--em-accent-ink);
  --bg:     var(--em-bg);
  --panel:  var(--em-panel);
  --ink:    var(--em-ink);
  --muted:  var(--em-muted);
  --line:   var(--em-line);
  --line2:  var(--em-line-2);
  --gold:   var(--em-accent-strong);
}

/* ---- 2. rules that hardcode a colour ------------------------------------- */

/* header */
header               { background: var(--em-chrome); color: var(--em-on-chrome); }
header p             { color: var(--em-on-chrome-dim); }
header .release-note { color: var(--em-on-chrome-dim); }

/* guide */
.page-guide      { background: var(--em-panel-2); }
.guide-content p { color: var(--em-muted); }

/* form controls */
.search-wrap input,
.atlas-choice select,
.choice-search,
.result-tools select,
.browse-controls select,
.map-view select        { background: var(--em-panel); color: var(--em-ink); border-color: var(--em-line); }
.search-wrap input      { border: 1px solid var(--em-line); }
.primary                { background: var(--em-accent); color: var(--em-accent-ink); border-color: var(--em-accent-strong); }
.quiet                  { background: var(--em-panel); color: var(--em-ink); border-color: var(--em-line); }

/* facets */
.facet summary          { background: var(--em-panel-2); }
.facet[open] summary    { background: var(--em-accent-tint); }
.facet-menu             { background: var(--em-panel); }
.facet-menu label:hover { background: var(--em-accent-tint); }
.active-filter          { border: 1px solid var(--em-accent-edge); background: var(--em-accent-tint); color: var(--em-accent-ink); }

/* brain map */
.region-button              { border: 1px solid var(--region-color, var(--em-line)); }
.region-button.selected     { outline: 3px solid var(--em-accent-strong); }
.brain-map                  { background: var(--em-panel-2); }
.map-chip                   { background: var(--em-accent-tint); color: var(--em-accent-ink); }
.map-marker circle          { fill: var(--em-panel); }
.map-marker.selected circle { stroke: var(--em-accent-strong); }
.map-marker.selected text   { fill: var(--em-ink); }
.map-marker.zero circle     { stroke: var(--em-muted); }
/* "Show counts" badges on the markers. Upstream draws a 14px-tall rect behind a
   9px number — the rect's height, y and width are inline attributes computed in
   renderMap() from the text length, so the badge cannot be grown from CSS
   without the number spilling out of it (it already does on the dorsal and
   ventral plates, where the label is set to 20px against that same 14px box).

   So the box goes and the number carries itself: heavy, in --em-count, with a
   white halo painted under the glyphs. That reads anywhere on the plate, scales
   with font-size on every plate for free, and has no geometry to keep in sync
   with the generator. */
.map-marker .count-badge    { display: none; }
.map-marker .count-label    { fill: var(--em-count); font-weight: 800;
                              paint-order: stroke; stroke: var(--em-count-halo);
                              stroke-width: 5px; stroke-linejoin: round; }
.map-result                 { background: var(--em-panel); }
.show-map                   { border: 1px solid var(--em-accent-edge); background: var(--em-accent-tint); }

/* results */
.result              { background: var(--em-panel); }
.source-term,
.anatomy-context     { color: var(--em-muted); }
.chip                { background: var(--em-line-2); color: var(--em-muted); }
.chip.role           { background: var(--em-accent-tint); color: var(--em-warn-ink); }
.citation            { color: var(--em-muted); }
blockquote,
.source-detail       { border-left: 3px solid var(--em-line); color: var(--em-muted); }
.stat-context        { background: var(--em-panel); }
.stat-context dd     { color: var(--em-muted); }
.stat-table thead th { background: var(--em-line-2); color: var(--em-ink); }
.error               { color: var(--em-error-ink); }

/* toolbar chooser */
.toolbar-chooser-button,
.toolbar-chooser-menu,
.toolbar-chooser-option                       { background: var(--em-panel); color: var(--em-ink); }
.toolbar-chooser-button[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--em-accent); }
.toolbar-chooser-option:hover,
.toolbar-chooser-option:focus                 { background: var(--em-accent-tint); }
.toolbar-chooser-option[aria-selected="true"] { background: var(--em-accent-tint); }

/* segmented control */
.segmented        { background: var(--em-line-2); }
.segmented button { color: var(--em-muted); }
.segmented button[aria-selected="true"],
.segmented button[aria-pressed="true"] { background: var(--em-panel); color: var(--em-ink); box-shadow: 0 1px 4px rgba(0,0,0,.18); }

/* browse tree.

   --group-color arrives inline on every disclosure, carrying the colour of the
   lobe the node sits under: navy Temporal, green Frontal, plum Parietal, brown
   Insular, purple Limbic. Upstream paints the whole tree with it — the region
   bar, the section bar under it, the sign bar under that, and the weighted
   view's group headings — so one page of results is five or six bar colours
   deep, all repeating the label already written on the bar itself.

   Flattened 2026-09-14 to a neutral three-step ramp, dark to light with depth,
   so the tree reads as a hierarchy rather than a palette. Nothing is lost: each
   bar is captioned with its own region, and the region buttons above the results
   and the map still carry the data colours. --group-color is left
   untouched rather than redefined, so re-colouring is just deleting these
   backgrounds. */
.browse-region              { --group-color: var(--em-chrome-2); }
.browse-region > summary    { background: var(--em-chrome); }
.browse-section > summary   { background: var(--em-chrome-2); }
.browse-evidence > summary  { background: var(--em-chrome-2); }
.browse-section             { border-left: 3px solid var(--em-line); }

/* Sign rows, but NOT the weighted view's sign cards: those share .browse-sign
   while looking nothing like it — a light card with the bar colour reduced to a
   left stripe. Without this exclusion they take the bar fill and their own
   near-black title text becomes dark-on-dark. */
.browse-sign:not(.weight-card) > summary { background: var(--em-sign); border-left: 3px solid var(--em-line); }
.browse-sign > .browse-body { background: var(--em-panel-2); }

/* Counts — the "3 signs" / "22 papers" pill on the right of every bar and card.
   Upstream sets them in white-at-15% at .65rem, which on these neutral bars
   reads as a watermark. It is the one number that tells you whether a collapsed
   row is worth opening, so it gets the site gold and a size you can read
   without leaning in. Tabular figures so the pills do not jitter in width as
   the numbers change. The 780px rule is upstream's own shrink, restated because
   this file loads after it and a media query adds no specificity. */
.browse-count {
  /* White pill, not the gold one tried first: gold at this size against the
     near-black bar is a bright field with low-contrast text on it, and the
     numbers were harder to read than the faint ones they replaced. White with
     near-black text is the highest contrast available and adds no colour to a
     tree that was just flattened. Written literally rather than as --em-panel /
     --em-ink because the bars are fixed near-black in BOTH themes, so the pill
     on them must not flip with the theme either. */
  background: #ffffff;
  color: #0B0B0B;
  font-size: .72rem;             /* up from .65; the bar labels are .8rem and
                                    this should not outrun them */
  font-weight: 800;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 780px) { .browse-count { font-size: .66rem; } }
.context-field h4           { color: var(--em-muted); }
.context-value              { color: var(--em-muted); }

/* evidence + papers */
.evidence-section                 { border: 1px solid var(--em-warn-edge); background: var(--em-warn-bg); }
.evidence-section > summary       { color: var(--em-warn-ink); }
.paper-section                    { background: var(--em-panel-2); border-left: 3px solid var(--em-accent-edge); }
.paper-authors                    { color: var(--em-muted); }
.paper-disclosure[open] > summary { background: var(--em-accent-tint); }
.source-result .statistics        { background: var(--em-panel-2); }

/* tabs + weighted view */
.view-tabs button[aria-selected="true"] { background: var(--em-accent-tint); border-color: var(--em-accent-edge); color: var(--em-ink); }
.weight-pips i             { background: var(--em-line); }
/* The weighted cards are a light surface, so the white pill would disappear on
   them; these keep a grey chip that follows the theme. */
.weight-card .browse-count { background: var(--em-line-2); color: var(--em-ink); }
/* upstream hardcodes `white` on the card and its body, which is a white card on
   a dark page once the theme flips. */
.weight-card               { border-color: var(--em-line); }
.weight-card > summary     { background: var(--em-panel); color: var(--em-ink); border-left-color: var(--em-sign); }
.weight-card > .browse-body{ background: var(--em-panel); border-color: var(--em-line); }
.weight-group > h3         { background: var(--em-chrome); }
.weight-support            { color: var(--em-ink); }
#weightMethod::backdrop    { background: rgba(0, 0, 0, .55); }

/* Attribution panel at the foot of <main>, in place of the release-notes
   disclosure. Sized like the panel it replaced (.release-notes: muted, .8rem,
   generous leading) so it reads as a closing note rather than another results
   section competing with the evidence above it. */
.atlas-credit-panel                { margin-top: 16px; padding: 14px 18px;
                                     color: var(--em-muted); font-size: .8rem; line-height: 1.6; }
.atlas-credit-panel h2             { margin: 0 0 6px; font-size: .85rem; color: var(--em-ink); }
.atlas-credit-panel p              { margin: 0 0 6px; }
.atlas-credit-panel p:last-child   { margin-bottom: 0; }
.atlas-credit-panel a              { color: var(--em-accent-ink); font-weight: 700; }

/* dialogs still painting themselves white from the UA sheet */
:root[data-theme="dark"] dialog { background: var(--em-panel); color: var(--em-ink); }

/* ---- 3. eight-plate Brodmann grid ---------------------------------------- */
/* Upstream showed one plate at a time, chosen with the Surface and Hemisphere
   tabs, in a column beside the notes panel. renderMap() now emits all four
   surfaces for both hemispheres, so the controls have nothing left to switch
   and the map takes the full width as the way into the page. */

.map-controls { display: none; }
.map-layout   { grid-template-columns: minmax(0, 1fr); }

.brain-map {
  place-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  max-height: none;
}
/* Four across fits all eight in two rows, so nothing needs scrolling to be
   seen — which is the point of showing them all. */
/* Four across: row one is every Left plate, row two every Right. The first two
   columns (lateral, medial) are widened because those plates are wide and short
   while dorsal and ventral are tall and narrow — at equal column widths the
   tall pair sets the row height and the lateral/medial drawings end up small
   with dead space above and below them. */
@media (min-width: 1000px) {
  /* 1.6:1 is the ratio at which both render the same height once the
     viewBoxes are cropped to their content (0.662 vs 1.057), so no column
     carries dead space. It was 2:1 against the uncropped 0.620 / 1.257. */
  .brain-map { grid-template-columns: 1.6fr 1.6fr 1fr 1fr; }
}

.brain-plate {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  background: var(--em-panel);
  border: 1px solid var(--em-line);
  border-radius: 8px;
  padding: 6px 6px 4px;
}
.brain-plate figcaption {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--em-muted);
  text-align: center;
}
.brain-map svg { width: 100%; height: auto; max-height: none; }

/* Each plate is now roughly a quarter of the old width, so markers drawn at
   r=15 in a 1000-unit viewBox land at about 4 screen pixels. Enlarged in user
   units so they survive the reduction; these override the generated sheet's
   own responsive bump because this file loads after it. */
/* Marker size is in viewBox units, and the cropped frames no longer share a
   scale: lateral renders at about 0.43 px per unit, dorsal and ventral at 0.30.
   Sized per plate kind so every marker lands near 9.5px on screen instead of
   the tall plates coming out a third smaller. */
.brain-map .map-marker circle       { r: 22px; stroke-width: 3.5; }
.brain-map .map-marker text         { font-size: 21px; }
/* Counts enlarged about 1.5x (2026-09-16): ~13px on screen on every plate, up
   from ~8.5px. renderMap() anchors the label at marker +16/-15 units, which was
   set for a 9px number; at this size it would sit over the marker's own area
   number, so it is pushed further up and right. overflow: visible so counts on
   markers near the cropped frame edge are not cut off. */
.brain-map svg                      { overflow: visible; }
.brain-map .map-marker .count-label { font-size: 30px; stroke-width: 7px; transform: translate(8px, -6px); }
.brain-plate[data-view="dorsal"]  .map-marker circle,
.brain-plate[data-view="ventral"] .map-marker circle       { r: 31px; stroke-width: 5; }
.brain-plate[data-view="dorsal"]  .map-marker text,
.brain-plate[data-view="ventral"] .map-marker text         { font-size: 30px; }
.brain-plate[data-view="dorsal"]  .map-marker .count-label,
.brain-plate[data-view="ventral"] .map-marker .count-label { font-size: 42px; stroke-width: 10px; transform: translate(14px, -10px); }

/* The atlas's own title block is removed at Ray's request: the page is framed
   inside seizure-atlas.php, which already carries the site header, so the h1,
   the standfirst and the release line were a second masthead inside the first.
   Note this also hides the "v1.5.2 · Updated ..." release stamp, which is the
   quickest way to confirm which build is live — check release.json instead. */
header { display: none; }

/* The map notes box is a <details> now (see the comment on it in index.html).
   Styled to match the disclosure triangles used elsewhere on the page rather
   than inventing a new affordance. The generated sheet gives .map-note a 14px
   padding meant for a static box; that moves onto the summary and body so the
   closed state is just the one row. */
.map-note { padding: 0; }
.map-note > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9px;
  user-select: none;
}
.map-note > summary::-webkit-details-marker { display: none; }
.map-note > summary::before { content: '▸'; flex: none; color: var(--em-muted); }
.map-note[open] > summary::before { content: '▾'; }
.map-note > summary:hover { background: var(--em-accent-tint); }
.map-note > summary strong { margin: 0; }
.map-note-body { padding: 0 14px 12px; }