/* whilehelpless.css — styles for the deaths-while-helpless page.
 *
 * Palette lives HERE and nowhere else: whilehelpless.js reads it back with
 * getComputedStyle, so a colour changes in one place. Chrome/ink tokens are
 * byte-identical to deathdungeon.css and usagestats.css so the three d3 pages
 * read as one system.
 *
 * CATEGORICAL palette, 4 hues -- family identity, not magnitude. Slots 1/2/3/7
 * of the dataviz reference palette (blue, orange, aqua, violet).
 * 🔴 FOUR is the ceiling, and it is measured, not taste: no five-hue set from
 * that palette clears the all-pairs normal-vision floor (validate_palette.js,
 * 2026-08-23 -- magenta fails against orange at dE 12.9, yellow at 13.7, green
 * fails CVD against orange at 3.2). Treemap tiles from different families sit
 * edge to edge and the deviation bars stack in |z| order with no family
 * grouping, so the ADJACENT pairlist is not the applicable gate; all-pairs is.
 * Adding a fifth hue here re-breaks it. The fifth family is therefore neutral
 * grey and every game in it is listed individually in the rare-combos panel.
 * Verified all-pairs at these four: worst CVD dE 9.2, worst normal-vision 16.3.
 * --f2 (aqua) sits at 2.74:1 on the surface, under 3:1 -- allowed, and the
 * relief it obliges is shipped: a tooltip on every tile and every bar, plus a
 * full table view one click away. ⚠️ NOT "every tile is labelled" -- small tiles
 * are deliberately unlabelled (fitText), so the tooltip and the table ARE the
 * relief here and neither may be removed while this hue is in the palette.
 *
 * Light-only on purpose, same call as deathdungeon.css and usagestats.css:
 * altorg.css is a light theme and a dark card would be a dark island on a
 * white page. */

.wh-wrap {
  /* chrome / ink — identical to deathdungeon.css / usagestats.css */
  --surface:   #fcfcfb;
  --plane:     #f4f3ef;
  --ink:       #0b0b0b;
  --ink2:      #52514e;
  --muted:     #898781;
  --grid:      #e6e5df;
  --axis:      #c3c2b7;
  --ring:      rgba(11,11,11,0.10);
  --ring2:     rgba(11,11,11,0.06);

  /* categorical: one hue per family, assigned in fixed order and never cycled */
  --f0: #2a78d6;   /* Immobilized */
  --f1: #eb6834;   /* Unconscious */
  --f2: #1baf7a;   /* Occupied    */
  --f3: #4a3aa7;   /* Impaired    */
  --f4: #898781;   /* Other — deliberately neutral, see header */

  max-width: 1080px;
  margin: 0 auto;
  padding: 4px 6px 40px;
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wh-wrap h1 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
}
.wh-empty { color: var(--ink2); padding: 24px 0; }

/* ---- a loud banner, for the one failure that is otherwise invisible ------- */
.wh-alarm {
  background: #fdecea; border: 1px solid #e34948; border-radius: 10px;
  color: #7d1c1b; padding: 10px 14px; margin: 0 0 18px; font-weight: 600;
}

/* ---- panels -------------------------------------------------------------- */
.wh-panel {
  background: var(--surface);
  border: 1px solid var(--grid); border-radius: 12px;
  padding: 16px 16px 12px; margin-bottom: 20px;
}
.wh-panel-head { margin-bottom: 12px; }
.wh-panel-title { font-size: 16px; font-weight: 650; }
/* The ONE line of description on this page. Equation, not prose — see the JS. */
.wh-eq { font-size: 12px; color: var(--muted); margin-top: 4px; }
.wh-eq i { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; }
.wh-plot { position: relative; }
.wh-plot svg { display: block; max-width: 100%; height: auto; }

/* ---- controls ------------------------------------------------------------ */
.wh-ctl-row { margin-bottom: 12px; }
.wh-ctl { display: inline-flex; align-items: center; gap: 9px; }
.wh-ctl-lbl {
  font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.wh-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.wh-chip {
  font: inherit; font-size: 13px; line-height: 1;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--axis); background: var(--surface);
  color: var(--ink2); cursor: pointer;
}
.wh-chip:hover { border-color: var(--ink2); color: var(--ink); }
.wh-chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600;
}

/* ---- treemap ------------------------------------------------------------- */
.wh-tile { stroke: var(--surface); stroke-width: 2px; rx: 2; cursor: pointer; }
.wh-tile:hover { fill-opacity: 0.92; }
.wh-fam-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.wh-tile-lbl { font-size: 12px; fill: #fff; font-weight: 600; pointer-events: none; }
.wh-tile-sub { font-size: 11px; fill: #fff; fill-opacity: .82; pointer-events: none; }
/* The map letter, wherever a monster class is named. Mono + bold so `a` / `@` /
 * `:` read as the game glyph they are rather than as punctuation. */
.wh-glyph { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }

/* ---- deviation bars ------------------------------------------------------ */
.wh-devgrp {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; fill: var(--muted);
}
.wh-devrule { stroke: var(--grid); stroke-width: 1px; }
/* 🔴 DIRECTION, not identity. Red = happens more than expected, green = less.
 * Family hue is the identity channel on the treemap and carries no meaning here.
 * ⚠️ Red/green is normally a CVD trap and is allowed ONLY because direction is
 * encoded THREE times over: the group heading, the "× more/less often" label,
 * and the colour. Remove either of the other two and this palette has to go. */
.wh-devbar { pointer-events: none; fill-opacity: .85; }
.wh-devbar.more { fill: #e34948; }
.wh-devbar.less { fill: #008300; }
.wh-devlbl { font-size: 12px; fill: var(--ink); pointer-events: none; }
.wh-devval { font-size: 11px; fill: var(--muted); pointer-events: none;
             font-variant-numeric: tabular-nums; }
/* Sits ON the bar when it will not fit beside it — needs to read against the
 * family hue, not against the page surface. */
.wh-devval.inside { fill: #fff; font-weight: 600; }
.wh-axis text { font-size: 11px; fill: var(--muted); }
.wh-band { fill: var(--plane); opacity: 0; }
.wh-band:hover { opacity: 1; }

/* ---- rare tail ----------------------------------------------------------- */
.wh-rare { display: flex; flex-direction: column; gap: 8px; }
.wh-rare-grp {
  border: 1px solid var(--grid); border-radius: 10px; overflow: hidden;
  background: var(--surface);
}
.wh-rare-hd {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 12px; background: var(--plane);
  border-bottom: 1px solid var(--grid);
}
.wh-rare-hd .swatch {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  align-self: center;
}
.wh-rare-hd .w { font-weight: 650; font-size: 14px; }
.wh-rare-hd .c { font-size: 12px; color: var(--muted); margin-left: auto; }
.wh-rare-g {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 14px; padding: 9px 12px; align-items: baseline;
  border-top: 1px solid var(--grid);
}
.wh-rare-grp .wh-rare-g:first-of-type { border-top: 0; }
.wh-rare-g .d { font-size: 13.5px; }
.wh-rare-g .d b { font-weight: 650; }
.wh-rare-g .m { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---- tooltip ------------------------------------------------------------- */
.wh-tip {
  position: absolute; pointer-events: none; z-index: 20;
  background: var(--ink); color: #fff; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45;
  max-width: 280px; box-shadow: 0 6px 20px rgba(0,0,0,.22);
  opacity: 0; transition: opacity .1s;
}
.wh-tip.on { opacity: 1; }
.wh-tip b { font-weight: 650; }
.wh-tip .r { color: #c9c8c2; }
.wh-tip ul { margin: 5px 0 0; padding-left: 15px; }
.wh-tip li { margin: 1px 0; }

/* ---- table view ---------------------------------------------------------- */
/* 🔴 altorg.css:105/:109 stripe and hover the `td`, NOT the `tr`, and a td
 * background is opaque -- so a `tr` rule here would tint even rows and do
 * nothing on odd ones. Style the td and out-specify (0,3,2). */
.wh-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.wh-table th {
  text-align: left; font-weight: 650; color: var(--ink2);
  border-bottom: 1px solid var(--axis); padding: 6px 10px 6px 0;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.wh-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--grid); }
.wh-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.wh-table .sw {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}

/* ---- footer -------------------------------------------------------------- */
.wh-foot { font-size: 12px; color: var(--muted); margin-top: 6px; max-width: 78ch; }

@media (max-width: 640px) {
  .wh-rare-g { grid-template-columns: minmax(0,1fr); }
  .wh-rare-g .m { white-space: normal; }
}