/* deathdungeon.css — styles for the deaths-by-dungeon-level page.
 *
 * Palette lives HERE and nowhere else: deathdungeon.js reads the ramp back out
 * with getComputedStyle, so a colour changes in one place. Chrome/ink tokens are
 * byte-identical to usagestats.css so the two d3 pages read as one system.
 *
 * SEQUENTIAL blue ramp, 13 steps, light -> dark (dataviz reference palette).
 * All three panels are magnitude heatmaps, so they share ONE hue -- a per-panel
 * or per-version hue would encode identity where there is only magnitude, and
 * would stop the three panels being comparable to each other.
 * Verified 2026-08-21: lightness strictly monotonic across all 13 steps (the
 * applicable gate for a sequential ramp; the categorical CVD/chroma checks in
 * validate_palette.js do not apply and correctly FAIL a smooth ramp).
 * The lightest steps sit under 3:1 on the surface -- that is allowed for
 * sequential, and the "relief" it obliges is shipped: a scale legend, a tooltip
 * on every cell, and a full table view.
 *
 * Light-only on purpose, same call as usagestats.css: altorg.css is a light
 * theme and a dark card would be a dark island on a white page. */

.dd-wrap {
  /* chrome / ink — identical to 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);

  /* sequential ramp (blue 100 -> 700) */
  --s0:  #cde2fb; --s1:  #b7d3f6; --s2:  #9ec5f4; --s3:  #86b6ef;
  --s4:  #6da7ec; --s5:  #5598e7; --s6:  #3987e5; --s7:  #2a78d6;
  --s8:  #256abf; --s9:  #1c5cab; --s10: #184f95; --s11: #104281;
  --s12: #0d366b;
  /* a zero cell is not "the lightest blue" — it is nothing, and must read as
   * nothing or the eye counts empty cells as low values */
  --zero: #f4f3ef;

  /* version-family hues, same values as usagestats.css, used ONLY to tint the
   * version chip — never the data */
  --fam-3-3: #2a78d6; --fam-3-4: #eb6834;
  --fam-3-6: #1baf7a; --fam-5-0: #eda100;

  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;
}

.dd-wrap h1 {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
}
.dd-lede { color: var(--ink2); max-width: 68ch; margin: 0 0 20px; }
.dd-empty { color: var(--ink2); padding: 24px 0; }

/* ---- controls ------------------------------------------------------------ */
.dd-controls {
  display: flex; flex-wrap: wrap; gap: 22px;
  align-items: center;
  padding: 12px 14px; margin-bottom: 18px;
  background: var(--plane);
  border: 1px solid var(--grid);
  border-radius: 10px;
}
.dd-ctl { display: flex; align-items: center; gap: 9px; }
.dd-ctl-lbl {
  font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.dd-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.dd-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;
  display: inline-flex; align-items: center; gap: 7px;
}
.dd-chip:hover { border-color: var(--ink2); color: var(--ink); }
.dd-chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600;
}
.dd-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--chip-hue, var(--axis));
  box-shadow: 0 0 0 2px var(--surface);
}
.dd-chip[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px var(--ink); }

/* ---- KPI ----------------------------------------------------------------- */
.dd-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 24px;
}
.dd-kpi .k {
  padding: 12px 14px; background: var(--plane);
  border: 1px solid var(--grid); border-radius: 10px;
}
.dd-kpi .k-lbl {
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.dd-kpi .k-val { font-size: 22px; font-weight: 660; letter-spacing: -0.01em; }
.dd-kpi .k-sub { font-size: 12px; color: var(--ink2); margin-top: 2px; }

/* ---- panels -------------------------------------------------------------- */
.dd-panel {
  background: var(--surface);
  border: 1px solid var(--grid); border-radius: 12px;
  padding: 16px 16px 10px; margin-bottom: 20px;
}
.dd-panel-head { margin-bottom: 12px; }
.dd-panel-title { font-size: 16px; font-weight: 650; }
.dd-panel-note { font-size: 12.5px; color: var(--ink2); margin-top: 3px; max-width: 74ch; }

/* 🔴 The plot is a FIXED label gutter + a SCROLLING grid, side by side. The cause
 * panel is ~4,300px wide at 100 columns, and in one scrolling svg the dlvl labels
 * would scroll off the left — the shared axis is the whole point of the page, so
 * it must stay on screen. Only `.dd-scroll` scrolls; the page body never does. */
.dd-plotbox { display: flex; align-items: flex-start; }
.dd-gutter  { flex: 0 0 auto; }
.dd-scroll  { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; }
.dd-plot svg { display: block; }
/* a visible edge where the grid slides under the gutter */
.dd-scroll { border-left: 1px solid var(--grid); }

.dd-plot .cell { shape-rendering: crispEdges; }
.dd-plot .cell.hot { stroke: var(--ink); stroke-width: 1.5px; }
.dd-plot .lbl { font-size: 11px; fill: var(--ink2); }
.dd-plot .lbl.row { font-variant-numeric: tabular-nums; }
.dd-plot .lbl.dim { fill: var(--muted); }
.dd-plot .axis-title {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; fill: var(--muted);
}
/* row band highlight on hover — the shared axis is the point of the page, so
 * hovering a level should read across the whole panel */
.dd-plot .rowband { fill: var(--ink); opacity: 0; pointer-events: none; }
.dd-plot .rowband.on { opacity: 0.05; }
/* the hovered level, called out in the fixed gutter */
.dd-plot .lbl.row.on { fill: var(--ink); font-weight: 700; }

/* ---- scale legend -------------------------------------------------------- */
.dd-scale { display: flex; align-items: center; gap: 8px; margin: 10px 2px 4px; }
.dd-scale .sw { display: flex; }
.dd-scale .sw i { width: 20px; height: 11px; display: block; }
.dd-scale .sw i:first-child { border-radius: 2px 0 0 2px; }
.dd-scale .sw i:last-child  { border-radius: 0 2px 2px 0; }
.dd-scale .cap { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- tooltip ------------------------------------------------------------- */
/* 🔴 COLORS HERE ARE LITERAL ON PURPOSE. The tooltip node is appended to
 * <body> (deathdungeon.js), NOT inside .dd-wrap, and the palette tokens are
 * defined ON .dd-wrap -- custom properties inherit DOWN, so none of them resolve
 * here. `background: var(--ink)` was invalid-at-computed-value-time, the
 * background dropped to transparent, and #fff text landed on the white page:
 * unreadable, at HTTP 200, with the box still there (dtype, 2026-08-24).
 * Values mirror --ink / --axis. Either keep them literal, or re-parent the node
 * into .dd-wrap first -- do not reintroduce var() while it hangs off <body>.
 * (whilehelpless.js appends its tip INTO its wrap, which is why .wh-tip's
 * var(--ink) is correct there and would not be correct here.) */
.dd-tip {
  position: fixed; z-index: 40; pointer-events: none;
  background: #0b0b0b; color: #fff;
  padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  max-width: 280px; opacity: 0; transition: opacity .08s;
}
.dd-tip.on { opacity: 1; }
.dd-tip .t-hd { font-weight: 650; margin-bottom: 3px; }
.dd-tip .t-row { display: flex; justify-content: space-between; gap: 14px; }
.dd-tip .t-k { color: #c3c2b7; }
.dd-tip .t-v { font-variant-numeric: tabular-nums; }

/* ---- table view ---------------------------------------------------------- */
.dd-table { overflow-x: auto; }
.dd-table table { border-collapse: collapse; font-size: 12px; }
.dd-table th, .dd-table td {
  border: 1px solid var(--grid); padding: 3px 7px;
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dd-table th { background: var(--plane); font-weight: 650; color: var(--ink2); }

/* 🔴 altorg.css:105 is `.body:not(.dudley) tr:nth-child(odd) td` — it stripes the
 * `td`, not the `tr`, and a td background is OPAQUE. Left alone it tints half of
 * this table grey (#f0f0f0) and leaves the other half untouched, which reads as a
 * cascade bug and is not one. Its specificity is (0,3,2); these are (0,3,3), and
 * both parities are set so the result is deterministic rather than inherited.
 * Same for its `tr:hover td` at :109. → nao-admin docs/www/CLAUDE.md § Page shell. */
.dd-wrap .dd-table table tr:nth-child(odd) td  { background: var(--plane); }
.dd-wrap .dd-table table tr:nth-child(even) td { background: var(--surface); }
.dd-wrap .dd-table table tr:hover td           { background: #e8eef7; }
.dd-table th.rowhdr, .dd-table td.rowhdr { text-align: left; }
.dd-table caption {
  caption-side: top; text-align: left; font-size: 12px;
  color: var(--muted); padding-bottom: 6px;
}

.dd-foot { color: var(--muted); font-size: 12px; margin-top: 22px; max-width: 78ch; }
.dd-foot b { color: var(--ink2); font-weight: 600; }

@media (max-width: 620px) {
  .dd-controls { gap: 12px; }
  .dd-wrap h1 { font-size: 22px; }
}