/* Ardennes German casualties — on top of style.css.
 * Killed, wounded and captured take the first three validated categorical slots (blue,
 * orange, aqua); aqua is under 3:1 on the light surface, so every chart has a legend and
 * the unit panel a table. Magnitude in the grid is one blue ramp, stepped light to dark
 * (dark mode: dark to light), with zero a neutral and unread a hatch. */

:root {
  --kind-killed: #2a78d6; --kind-wounded: #eb6834; --kind-captured: #1baf7a;
  --seq-1: #86b6ef; --seq-2: #5598e7; --seq-3: #2a78d6; --seq-4: #256abf;
  --seq-5: #1c5cab; --seq-6: #104281;
  --seq-ink-light: #0b0b0b; --seq-ink-dark: #ffffff;
  --grid-line: #e1e0d9; --axis: #c3c2b7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kind-killed: #3987e5; --kind-wounded: #d95926; --kind-captured: #199e70;
    --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #256abf; --seq-4: #2a78d6;
    --seq-5: #5598e7; --seq-6: #86b6ef;
    --seq-ink-light: #ffffff; --seq-ink-dark: #0b0b0b;
    --grid-line: #2c2c2a; --axis: #383835;
  }
}
:root[data-theme="dark"] {
  --kind-killed: #3987e5; --kind-wounded: #d95926; --kind-captured: #199e70;
  --seq-1: #184f95; --seq-2: #1c5cab; --seq-3: #256abf; --seq-4: #2a78d6;
  --seq-5: #5598e7; --seq-6: #86b6ef;
  --seq-ink-light: #ffffff; --seq-ink-dark: #0b0b0b;
  --grid-line: #2c2c2a; --axis: #383835;
}

html, body { height: auto; }
#page { min-height: 100%; }
main { max-width: 1240px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }

.caveat {
  margin: 0; padding: 10px 14px; font-size: 13px; line-height: 1.5;
  color: var(--text-secondary); background: var(--surface-1);
  border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 6px;
}
.caveat b { color: var(--text-primary); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile {
  padding: 12px 14px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 8px;
}
.tile .label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.tile .value { font-size: 24px; font-weight: 620; font-variant-numeric: tabular-nums; margin-top: 4px; }
.tile .sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.panel {
  min-width: 0; padding: 14px 16px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 8px;
}
.panel h2 { margin: 0; font-size: 14px; font-weight: 620; }
.panel h3 { margin: 0 0 2px; font-size: 16px; font-weight: 620; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.panel-head .legend { width: auto; }
.fineprint { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); }

.key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.key.killed { background: var(--kind-killed); }
.key.wounded { background: var(--kind-wounded); }
.key.captured { background: var(--kind-captured); }

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart .gridline { stroke: var(--grid-line); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .hit:hover + g rect, .chart .col:hover rect { opacity: 0.85; }
.chart .hover-band { fill: var(--surface-2); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.unit-panel { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.seg button {
  font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer; border: 0;
  color: var(--text-secondary); background: var(--surface-1);
}
.seg button[aria-checked="true"] { color: var(--surface-1); background: var(--text-primary); }
.seg button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }

#grid-legend { margin-bottom: 10px; }
.cell-key { width: 14px; height: 12px; border-radius: 2px; display: inline-block; }
.grid-scroll { overflow-x: auto; }
#grid { --cell: 18px; display: grid; grid-template-columns: 112px repeat(32, var(--cell)); gap: 2px; min-width: max-content; }
#grid .group { grid-column: 1 / -1; font-size: 11px; font-weight: 620; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 0 2px; }
#grid .name {
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-primary); background: none; border: 0; padding: 0 6px 0 0; text-align: left;
  font: inherit; font-size: 12px; cursor: pointer;
}
#grid .name.active { font-weight: 620; text-decoration: underline; }
#grid .day-head { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; }
.c {
  position: relative; height: var(--cell); border-radius: 2px; cursor: pointer;
  font-size: 9.5px; font-weight: 620; line-height: var(--cell); text-align: center;
}
.c.none { background: transparent; cursor: default; }
.c.zero { background: var(--surface-2); }
.c.unread { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, var(--border-strong) 3px 4px); }
.c.b1 { background: var(--seq-1); color: var(--seq-ink-light); }
.c.b2 { background: var(--seq-2); }
.c.b3 { background: var(--seq-3); }
.c.b4 { background: var(--seq-4); }
.c.b5 { background: var(--seq-5); }
.c.b6 { background: var(--seq-6); }
.c.lv-active { background: var(--seq-5); color: var(--seq-ink-dark); }
.c.lv-inactive { background: var(--seq-2); color: var(--seq-ink-dark); }
.c.lv-out_of_contact { background: var(--surface-2); color: var(--text-secondary); }
.c.lv-outside { background: transparent; color: var(--text-muted); }
.c.primary::after {
  content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px;
  transform: rotate(45deg); background: var(--warn);
}
.c.sel { outline: 2px solid var(--text-primary); outline-offset: -1px; }
#grid .row-active { box-shadow: inset 0 -2px 0 var(--text-primary); }

.unit-panel .empty { color: var(--text-muted); margin: 0; }
.unit-panel .facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0; font-size: 13px; }
.unit-panel .facts dt { color: var(--text-secondary); }
.unit-panel .facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.unit-panel table.grid tbody tr { cursor: default; }
.unit-panel table.grid td.lv { white-space: nowrap; }
a.page { color: var(--text-secondary); font-size: 11.5px; }

.tip {
  position: fixed; z-index: 10; pointer-events: none; max-width: 260px;
  padding: 7px 10px; font-size: 12px; line-height: 1.45;
  color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow);
}
.tip b { font-weight: 620; }
.tip .row { display: flex; align-items: center; gap: 6px; }
.tip .row span:last-child { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

#about p { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 8px 0 0; }
#about a { color: var(--text-primary); }

@media (max-width: 1000px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .unit-panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
  main { padding: 12px 16px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #grid { --cell: 16px; grid-template-columns: 92px repeat(32, var(--cell)); }
}