/* table/cairn/theme.css — the palette, the page furniture, and the party
   overview card.

   Extracted when a second page (/cairn/kit/) needed the same card. Two copies
   of a radar's CSS is two radars that drift apart, and a radar that means one
   thing on one page and another on the next is worse than no radar. The markup
   that fills these classes is overview-card.js, for the same reason.

   Page-specific styling stays in the page. */

:root {
  --bg: #f7f4ec;
  --panel: #fffdf7;
  --text: #1c1a17;
  --muted: #6d675c;
  --rule: #d8d2c4;
  --rule-hard: #b3ab99;
  --accent: #3f6d4e;          /* the Wood */
  --accent-soft: rgba(63, 109, 78, 0.08);
  --ink: #8a3324;             /* the roll: rust-red, like a die pip */
  --slot-empty: rgba(0, 0, 0, 0.03);
  --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Menlo, monospace;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12120f; --panel: #1a1a16; --text: #ddd8cc; --muted: #8f887a;
    --rule: #33322b; --rule-hard: #4c4a40;
    --accent: #7dbb92; --accent-soft: rgba(125, 187, 146, 0.1);
    --ink: #d98c72; --slot-empty: rgba(255, 255, 255, 0.03);
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--serif); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 900px; margin: 0 auto; padding: 2rem 1.2rem 5rem;
}
a { color: var(--accent); }
h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1rem; font-weight: 600; }

.crumb {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  display: inline-block; margin-bottom: 1.2rem;
}
.lede { color: var(--muted); margin-top: 0.5rem; font-size: 0.98rem; }
.lede code { font-family: var(--mono); font-size: 0.85em; }
.lede.onward { margin: 0 0 1.6rem; font-size: 0.9rem; }
/* The detail behind the headline. Kept in the DOM for readers and for print;
   dropped on a phone, where the vertical budget is spent on the party card. */
@media (max-width: 620px) { .lede .aside { display: none; } }

/* ------------------------------------------------------------- controls -- */
.controls {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin: 1.4rem 0 1.8rem; padding: 0.85rem;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--panel);
}
button, select, input[type=text] {
  font-family: var(--mono); font-size: 0.8rem;
  padding: 0.45rem 0.7rem; border-radius: 6px;
  border: 1px solid var(--rule-hard); background: var(--panel); color: var(--text);
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--panel); font-weight: 600; }
button.primary:hover { filter: brightness(1.1); color: var(--panel); }
input[type=text] { min-width: 11rem; flex: 1 1 11rem; }
.ctl-label { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.status { font-family: var(--mono); font-size: 0.7rem; color: var(--accent); min-height: 1rem; flex-basis: 100%; }

/* ------------------------------------------------------------- overview -- */
/* Two columns at every width. Stacking the radar above the numbers on a phone
   made the card 497px tall, which pushed it off the screen it exists to sit
   on; the radar shrinks instead, and the chips and the note run full width
   underneath it. Measured at 390x844 — see the page check. */
.overview {
  border: 1px solid var(--rule-hard); border-radius: 8px; background: var(--panel);
  padding: 0.9rem 1rem; margin-bottom: 1.2rem;
  display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 0.5rem 1.1rem;
  align-items: start;
}
.overview[hidden] { display: none; }
.overview .radar { width: 172px; height: 172px; overflow: visible; grid-row: span 2; }
/* Wide: the chips and the note sit beside the radar, in its column's shadow,
   so the card is exactly as tall as the chart. Narrow: they run full width. */
.overview .ov-tail { grid-column: 2; }
.radar .ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar .spoke { stroke: var(--rule); stroke-width: 1; }
.radar .shape { fill: var(--accent); fill-opacity: 0.17; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.radar .dot { fill: var(--accent); }
.radar .dot.nil { fill: var(--muted); opacity: 0.45; }
.radar text {
  font-family: var(--mono); font-size: 9px; fill: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.radar text.off { opacity: 0.45; }

.ov-body { min-width: 0; width: 100%; }
.ov-head { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.ov-head .n { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.ov-head h2 { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ov-head .of { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }

.ov-legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.9rem;
  margin: 0.55rem 0 0; font-size: 0.82rem; max-width: 30rem;
}
/* nowrap matters: without it a narrow column breaks a row between its value
   and its correlation, and the two halves read as separate facts. */
.ov-legend div { display: flex; gap: 0.4rem; align-items: baseline; cursor: help; white-space: nowrap; }
.ov-legend .k { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.ov-legend .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.ov-legend .c { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); margin-left: auto; }
.ov-legend .off .v, .ov-legend .off .k { opacity: 0.45; }

.ov-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.ov-role {
  font-family: var(--mono); font-size: 0.66rem; padding: 0.16rem 0.5rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); cursor: help;
}
.ov-role.gap { border-style: dashed; border-color: var(--rule-hard); background: none; color: var(--muted); }
.ov-note { font-size: 0.8rem; line-height: 1.45; color: var(--muted); margin-top: 0.5rem; }
.ov-note b { color: var(--text); font-weight: 600; }
.ov-note b.warn { color: var(--ink); }

/* Phone: the radar shrinks and the legend goes single-column. This block sits
   last on purpose — it overrides .ov-legend's own grid, which is declared
   after .overview and would otherwise win on source order. */
@media (max-width: 620px) {
  .overview { grid-template-columns: 130px minmax(0, 1fr); gap: 0.35rem 0.7rem; padding: 0.8rem; }
  .overview .radar { width: 130px; height: 130px; }
  .ov-legend { grid-template-columns: minmax(0, 1fr); font-size: 0.8rem; }
  .ov-head .n { font-size: 1.35rem; }
  .overview .ov-tail { grid-column: 1 / -1; }
}


/* The ghost polygon and the score delta — only the kit screen draws these, but
   they are part of the card, so they live with the card. */
.radar .shape.was { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 2; opacity: 0.8; }
.ov-head .delta { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; }
.ov-head .delta.up { color: var(--accent); }
.ov-head .delta.down { color: var(--ink); }
.ov-legend .was { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); }
.ov-role.new { border-style: solid; box-shadow: inset 0 0 0 1px var(--accent); }