/* redbox - visual style: BRUTALIST
 * ============================================================================
 * The full spec, rationale, and reproduction recipe live in docs/design.md.
 * This file is the single source of truth for the look. No framework, one file,
 * system fonts only.
 *
 * Principle: visual clarity. Every boundary is a real 2px line. Nothing floats
 * on a blur. Depth is a hard offset shadow, never a soft one. Corners are
 * square. Type is set with weight and case, not decoration. High contrast in
 * both light and dark.
 *
 * Structure:
 *   1. reset
 *   2. tokens        :root = light; @media dark = dark. These are the ONLY
 *                    place colours/metrics are defined.
 *   3. base elements
 *   4. components    each drawn purely from tokens
 *   5. responsive
 *
 * Dark mode follows prefers-color-scheme. To add a manual override later, see
 * "Adding a light/dark toggle" in docs/design.md.
 */

/* ============================================================ 1. reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ============================================================ 2. tokens */

:root {
  /* --- metrics (mode-independent) --- */
  --maxw: 1180px;
  --sp: 8px;                 /* spacing unit; multiply, never guess */
  --border-w: 2px;           /* every visible border is this thick */
  --radius: 0px;             /* square. do not raise. */
  --radius-sm: 0px;

  --ff-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ff-body: var(--ff-sans);
  --ff-head: var(--ff-sans);
  --ff-num: var(--ff-mono);  /* all figures are monospaced, for column alignment */

  --head-transform: uppercase;
  --head-spacing: -0.01em;
  --head-weight: 800;

  /* --- palette: LIGHT --- */
  --bg: #ffffff;             /* page ground */
  --panel: #ffffff;          /* card / surface ground (same as bg; the border does the work) */
  --panel-2: #f2f2f2;        /* sunken: inputs, nested fills */
  --ink: #000000;            /* primary text and every border */
  --ink-dim: #444444;        /* secondary text, labels, muted cells */
  --line: #000000;           /* border colour (tracks --ink in light) */
  --line-strong: #000000;    /* emphatic border (table header underline) */

  --accent: #1a3cff;         /* one accent. links, primary action, active nav. */
  --on-accent: #ffffff;      /* text/%icons on an --accent fill */

  --danger: #e5231b;
  --on-danger: #ffffff;
  --ok: #0a7d2c;             /* positive delta, ally */
  --warn: #9a6a00;           /* warning text */
  --warn-bg: #ffef9f;        /* warning fill, table row hover */

  --shadow: 4px 4px 0 var(--ink);      /* hard offset. the only shadow. */
  --shadow-lg: 8px 8px 0 var(--ink);
  --shadow-press: 3px 3px 0 var(--ink); /* buttons at rest */

  color-scheme: light;
}

/* --- palette: DARK ---
 * Eased off the light version so it is not punishing at night: charcoal ground
 * instead of pure black, panels lifted one step above it, grey borders instead
 * of white, the shadow a dark grey, and the accent shifts blue -> muted amber
 * (blue on charcoal reads dull; amber keeps the one-accent rule with presence).
 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16161a;
    --panel: #1e1e22;
    --panel-2: #29292f;
    --ink: #ededed;
    --ink-dim: #9a9aa2;
    --line: #6c6c76;
    --line-strong: #8b8b95;

    --accent: #e6cf5b;
    --on-accent: #17170c;

    --danger: #ff6b62;
    --on-danger: #17170c;
    --ok: #56d98a;
    --warn: #e6cf5b;
    --warn-bg: #262410;

    --shadow: 4px 4px 0 #35353b;
    --shadow-lg: 8px 8px 0 #35353b;
    --shadow-press: 3px 3px 0 #35353b;

    color-scheme: dark;
  }
}

/* ============================================================ 3. base elements */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--ff-head);
  font-weight: var(--head-weight);
  text-transform: var(--head-transform);
  letter-spacing: var(--head-spacing);
  line-height: 1.1;
}

a { text-underline-offset: 2px; }

:focus-visible {
  outline: var(--border-w) solid var(--accent);
  outline-offset: 2px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 50;
  background: var(--accent); color: var(--on-accent);
  padding: 8px 12px;
  border: var(--border-w) solid var(--ink);
}

/* ============================================================ 4. components */

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--sp) * 3) calc(var(--sp) * 3) calc(var(--sp) * 12);
}

/* --- surface: the shared card treatment --- */
.topbar,
.stat,
.panel {
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  box-shadow: var(--shadow);
}

/* --- topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: calc(var(--sp) * 3);
  padding: calc(var(--sp) * 1.5) calc(var(--sp) * 2);
}
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand__mark { color: var(--accent); font-size: 18px; font-weight: 800; }
.brand__word { font-weight: 800; letter-spacing: .02em; font-size: 18px; text-transform: uppercase; }
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav__link {
  text-decoration: none;
  padding: 6px 10px;
  color: var(--ink-dim);
  font-weight: 600;
  border: var(--border-w) solid transparent;
}
.nav__link:hover { color: var(--ink); border-color: var(--line); }
.nav__link.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--ink); }
.topbar__right { display: flex; align-items: center; gap: 10px; }
.whoami { font-weight: 700; }
.tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 7px;
  border: var(--border-w) solid var(--line);
  color: var(--accent);
  font-weight: 800;
}

/* --- page head --- */
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp);
  flex-wrap: wrap;
  margin: calc(var(--sp) * 4) 0 calc(var(--sp) * 2.5);
}
.pagehead__title { font-size: 34px; line-height: 1.02; }
.pagehead__sub { color: var(--ink-dim); font-size: 13px; margin-top: 4px; }
.pagehead__actions { display: flex; gap: 8px; }

/* --- stats --- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--sp) * 1.5);
  margin-bottom: calc(var(--sp) * 2);
}
.stat {
  padding: calc(var(--sp) * 1.75);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat__label {
  font-size: 12px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}
.stat__value {
  font-family: var(--ff-num);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.stat__foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.stat__unit { color: var(--ink-dim); }
.delta { font-weight: 700; font-family: var(--ff-num); }
.delta--up { color: var(--ok); }
.delta--down { color: var(--danger); }
.delta--flat { color: var(--ink-dim); }

/* --- grid of panels --- */
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: calc(var(--sp) * 1.5);
}
.panel { padding: calc(var(--sp) * 2.25); }
.panel--wide { grid-column: 1 / -1; }
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp);
  margin-bottom: calc(var(--sp) * 1.75);
  flex-wrap: wrap;
}
.panel__title { font-size: 15px; }
.panel__hint { color: var(--ink-dim); font-size: 12px; }

/* --- table: full grid, every cell bounded --- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-dim);
  font-weight: 800;
  padding: 8px 10px;
  border: var(--border-w) solid var(--line-strong);
}
.table td {
  padding: 9px 10px;
  border: var(--border-w) solid var(--line);
}
.table tbody tr:hover td { background: var(--warn-bg); }
.table .num { text-align: right; font-family: var(--ff-num); font-variant-numeric: tabular-nums; }
.table .strong { font-weight: 700; }
.table .muted { color: var(--ink-dim); }

/* --- badges / chips: bounded, square, uppercase --- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border: var(--border-w) solid var(--line);
}
.badge--ally { color: var(--ok); }
.badge--enemy { color: var(--danger); }
.badge--neutral { color: var(--ink-dim); }
.filters, .form__actions, .pagehead__actions { display: flex; gap: 8px; }
.chip {
  border: var(--border-w) solid var(--line);
  background: var(--panel);
  color: var(--ink-dim);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--ink); }

/* --- buttons: filled block + hard offset shadow, presses into the page --- */
.btn {
  --_bg: var(--panel);
  --_fg: var(--ink);
  --_bd: var(--ink);
  appearance: none;
  border: var(--border-w) solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-press);
  transition: transform .04s linear, box-shadow .04s linear;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn--primary { --_bg: var(--accent); --_fg: var(--on-accent); --_bd: var(--ink); }
.btn--danger  { --_bg: var(--danger); --_fg: var(--on-danger); --_bd: var(--ink); }
.btn--ghost   { --_bg: var(--panel); }

/* --- form --- */
.form { display: flex; flex-direction: column; gap: calc(var(--sp) * 1.75); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--row { flex-direction: row; align-items: center; gap: 10px; }
.field__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.input {
  background: var(--panel-2);
  border: var(--border-w) solid var(--line);
  padding: 9px 11px;
  width: 100%;
}

/* --- callout --- */
.callout {
  font-size: 13px;
  padding: 10px 12px;
  border: var(--border-w) solid var(--line);
  background: var(--panel-2);
}
.callout--warn {
  background: var(--warn-bg);
  border-color: var(--ink);
  color: var(--warn);
  font-weight: 600;
}

/* --- chart (server-rendered SVG; classes only, no inline style) --- */
.chart { width: 100%; height: auto; }
.chart__bar { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.chart__label { fill: var(--ink); font-size: 13px; font-family: var(--ff-body); font-weight: 700; }
.chart__value { fill: var(--ink-dim); font-size: 12px; font-family: var(--ff-num); }

/* --- footer --- */
.foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: calc(var(--sp) * 4);
  color: var(--ink-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ============================================================ 5. responsive */

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .nav { order: 3; flex-basis: 100%; }
}