/* PisteCast shell — "Modernist" design system from the Claude Design handoff.
   Light-first, dark via html[data-theme="dark"], persisted as ss-theme.
   Archivo everywhere, sharp corners, 2px rules, vermilion accent. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --sbg: #f3f2f2;
  --ssurf: #ffffff;
  --stext: #201e1d;
  --sdiv: color-mix(in srgb, #201e1d 40%, transparent);
  --smut: #7d7979;
  --smut2: #605d5d;
  --sfaint: #dedcd9;
  --sacc: #ec3013;
  --sacc-hover: #dd2b0f;
  --sacctext: #ae1800;
  --sok: #1d7a3e;
  --sbad: #ae1800;
  --swarn: #b98d00;
  --sfont: 'Archivo', system-ui, sans-serif;
  --smono: ui-monospace, Menlo, Consolas, monospace;
}
html[data-theme="dark"] {
  --sbg: #201e1d;
  --ssurf: #2a2827;
  --stext: #f3f2f2;
  --sdiv: #4a4644;
  --smut: #8d8885;
  --smut2: #a8a3a0;
  --sfaint: #383532;
  --sacctext: #ff7a63;
  --sok: #5fc07f;
  --sbad: #ff7a63;
  --swarn: #d9b545;
}

html { background: var(--sbg); }
::selection { background: color-mix(in srgb, var(--sacc) 30%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sacc); outline-offset: 2px; }

header.shell {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 12px 32px;
  border-bottom: 2px solid var(--sdiv);
  background: var(--sbg);
  position: sticky; top: 0; z-index: 100;
  font-family: var(--sfont);
}
header.shell .lhs { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
header.shell .rhs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

header.shell .brand {
  cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  text-decoration: none;
}
header.shell .brand .word {
  font: 700 18px/1 var(--sfont); color: var(--stext); letter-spacing: -.01em;
}
header.shell .brand .word em { color: var(--sacc); font-style: normal; }

header.shell nav { display: flex; gap: 24px; font: 500 13px/1 var(--sfont); }
header.shell nav a {
  color: var(--smut); text-decoration: none; cursor: pointer; padding-bottom: 4px;
}
header.shell nav a:hover { color: var(--stext); }
header.shell nav a.active { color: var(--stext); border-bottom: 2px solid var(--sacc); }

.shell-score {
  font: 600 12px/1 var(--smono);
  border: 2px solid var(--sdiv);
  padding: 8px 12px; color: var(--stext);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.shell-score .swapflag { color: var(--sacctext); font-weight: 700; }

.shell-seg {
  display: flex; border: 2px solid var(--sdiv);
  font: 600 10.5px/1 var(--sfont); letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; user-select: none;
}
.shell-seg span { padding: 8px 12px; color: var(--smut); }
.shell-seg span.on { background: var(--stext); color: var(--sbg); }

.shell-machine {
  display: flex; align-items: center; gap: 7px;
  font: 600 10.5px/1 var(--sfont); letter-spacing: .08em; text-transform: uppercase;
  color: var(--sbad); white-space: nowrap;
}
.shell-machine .dot { width: 8px; height: 8px; background: var(--sbad); }
.shell-machine.on { color: var(--sok); }
.shell-machine.on .dot { background: var(--sok); }

.shell-user { font: 500 12px/1 var(--sfont); color: var(--smut2); white-space: nowrap; }
.shell-user a { color: var(--sacctext); text-decoration: none; cursor: pointer; }
.shell-user a:hover { text-decoration: underline; }
.shell-user a.signin {
  display: inline-block;
  font: 600 11px/1 var(--sfont); letter-spacing: .05em; text-transform: uppercase;
  border: 2px solid var(--sdiv); padding: 8px 12px; color: var(--stext);
}
.shell-user a.signin:hover { border-color: var(--stext); text-decoration: none; }

@media (max-width: 640px) {
  header.shell { padding: 12px 16px; }
  header.shell .lhs { gap: 18px; }
}