/* FLUKE app — THE SHERWOOD SKIN, matched to site/board.html.
   Reskinned 2026-08-27: this file was the last thing in the shipped site still
   wearing the retired flat palette (field green #216240, Space Grotesk, gold trim)
   — the same diagnosis made of the tech page before it was reskinned: a visitor
   moving between pages fell straight out of the world.
   The receipt is the page a win links to, so it must not look like a different
   project. Values are the board's tokens; the variable NAMES are kept because the
   classes below are load-bearing — fluke.js generates HTML that uses them. Gold
   still appears only where it means luck: an in-play pot, a win, a verified seal.
   The board's rule that panels stay OPAQUE is kept here too. */
:root {
  --green: #6edea5; --cream: #f1f6ef; --shadow: #b3c5b8; --muzzle: #f1f6ef;
  --ink: #082017; --gold: #eec25c; --gold-deep: #c79a3c;
  --night: #09120e; --panel: #17261e;
  --mut: #b3c5b8; --mut2: #8aa295; --line: #243d30;
  --bg: var(--night); --fg: var(--cream);
  --disp: 'Cinzel', Georgia, serif;
  --body: 'Alegreya Sans', 'Gill Sans', system-ui, sans-serif;
  --monof: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--muzzle); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--monof); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 90px; }

/* ---- nav ---- */
nav { display: flex; align-items: center; gap: 20px; padding: 15px 0;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 40; background: rgba(9, 18, 14, .92);
  backdrop-filter: blur(12px); }
@media (max-width: 760px) { nav { position: static; gap: 12px; } }
nav .brand { display: flex; align-items: center; gap: 10px; font-family: var(--disp);
  font-weight: 700; letter-spacing: .02em; color: var(--muzzle); }
nav .brand img { width: 26px; height: 26px; border-radius: 50%; display: block; }
nav .brand .wordmark { display: inline-flex; align-items: flex-end; font-family: var(--disp);
  font-weight: 700; letter-spacing: -.045em; color: var(--muzzle); line-height: 1;
  white-space: nowrap; font-size: 19px; }
nav .brand .wordmark .flick { flex: none; width: .44em; height: .44em; margin-left: .05em;
  margin-bottom: .04em; }
nav .brand .wordmark .flick svg { display: block; width: 100%; height: 100%; overflow: visible; }
nav .brand .wordmark .flick path { fill: none; stroke: var(--gold); stroke-width: 9;
  stroke-linecap: round; }
nav .brand .pg { font-family: var(--monof); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--mut); font-weight: 500; margin-left: 2px; }
nav a { color: var(--mut); font-size: 13.5px; font-weight: 500; }
nav a:hover { color: var(--cream); text-decoration: none; }
nav .spacer { flex: 1; }

.chip { font-family: var(--monof); font-size: 10.5px; letter-spacing: .08em;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--mut);
  background: transparent; }
button.chip { font: 10.5px var(--monof); letter-spacing: .08em; }
button.chip:hover { background: rgba(241, 246, 239, .06); }
.chip.on { background: rgba(241, 246, 239, .1); border-color: rgba(241, 246, 239, .45);
  color: var(--muzzle); }
.chip.dead { background: rgba(138, 162, 149, .22); border-color: var(--mut2); color: var(--mut); }

h1 { font-family: var(--disp); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.08;
  letter-spacing: -.025em; font-weight: 700; color: var(--muzzle); margin: 40px 0 8px; }
h2 { font-family: var(--monof); font-size: 10.5px; letter-spacing: .28em;
  text-transform: uppercase; margin: 56px 0 14px; color: var(--shadow); font-weight: 500; }
.sub { color: var(--mut); margin: 0 0 10px; max-width: 72ch; }
.sub.small { font-size: 13px; }

/* ---- cards & grids ---- */
.grid { display: grid; gap: 14px; }
.grid > * { min-width: 0; }
.grid.pots { grid-template-columns: 1fr 1fr 1.3fr; }
.grid.stats { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 800px) { .grid.pots, .grid.stats, .grid.two { grid-template-columns: 1fr !important; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px; }
.card.inplay { border-color: rgba(238, 194, 92, .6);
  box-shadow: 0 0 30px rgba(238, 194, 92, .10), inset 0 0 46px rgba(238, 194, 92, .04); }
.card .label { font-family: var(--monof); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mut); }
.card .value { font-family: var(--disp); font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; margin: 6px 0; color: var(--cream);
  font-variant-numeric: tabular-nums; }
.card.inplay .value { color: var(--gold); }
.card .value.big { font-size: 33px; }
.card .row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
  padding: 5px 0; border-top: 1px solid var(--line); color: var(--mut); }
.card .row:first-of-type { border-top: 0; }
.card .row .mono { color: var(--cream); }

.bar { height: 5px; background: rgba(241, 246, 239, .1); border-radius: 99px;
  margin: 10px 0 6px; position: relative; }
.bar > i { display: block; height: 100%; background: var(--green); border-radius: 99px;
  box-shadow: 0 0 9px rgba(110, 222, 165, .5); }
.bar > i.gold { background: var(--gold); box-shadow: 0 0 11px rgba(238, 194, 92, .6); }
.mark { position: absolute; top: -3px; width: 2px; height: 11px; background: var(--shadow); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (max-width: 700px) {
  table { display: block; overflow-x: auto; white-space: nowrap; } }
thead { background: var(--panel); }
th { text-align: left; font-family: var(--monof); font-weight: 500; font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mut2);
  padding: 11px 14px; border-bottom: 1px solid var(--line); }
td { padding: 10px 14px; border-bottom: 1px solid rgba(241, 246, 239, .05);
  vertical-align: top; color: var(--mut); }
tr:last-child td { border-bottom: 0; }
td.win { color: var(--gold); font-weight: 600; }
td .mono, td.mono { color: var(--cream); }

/* ---- controls ---- */
input[type=text] { font: 15px/1.4 var(--body); padding: 10px 14px;
  border: 1px solid rgba(241, 246, 239, .22); border-radius: 10px;
  background: rgba(241, 246, 239, .05); color: var(--cream); width: 100%; max-width: 480px; }
input[type=text]::placeholder { color: var(--mut2); }
/* `outline: none` here (0,2,1) beat the page focus ring at the bottom of this
   file (0,1,1) regardless of source order, so the ONE input this page exists
   for had no focus ring at all: driven with real Tab key events, :focus-visible
   was true while outline-style computed "none", leaving a 2.02:1 border-colour
   change (rgb(69,77,72) -> rgb(140,120,62)) as the entire focus indication.
   Chrome draws the UA outline only on :focus-visible and the author rule below
   wins over it, so removing this brings no mouse-click ring back. */
input[type=text]:focus { border-color: rgba(238, 194, 92, .55); }
button { font: 600 14px var(--disp); padding: 10px 20px; border: 0; border-radius: 10px;
  background: var(--muzzle); color: var(--ink); cursor: pointer; }
button:hover { background: #f3d07a; }
button.ghost { background: transparent; color: var(--cream);
  border: 1px solid rgba(241, 246, 239, .25); font-weight: 500; }
button.ghost:hover { border-color: rgba(241, 246, 239, .5); background: transparent; }

.muted { color: var(--mut); }
.small { font-size: 12px; }
.notice { border: 1px solid rgba(238, 194, 92, .4); border-radius: 12px; padding: 11px 16px;
  background: rgba(238, 194, 92, .07); color: var(--shadow); margin: 14px 0; font-size: 13.5px; }
footer { margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--monof); font-size: 10.5px; line-height: 2; color: var(--mut2);
  letter-spacing: .04em; }
.dog { width: 44px; height: 44px; }

/* ---- receipt (verify page) ---- */
.receipt { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; }
.step { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--mut);
  font-size: 13.5px; }
.step b { color: var(--cream); }
.step:last-child { border-bottom: 0; }
.step .n { display: inline-block; width: 22px; height: 22px; text-align: center;
  line-height: 22px; border: 1px solid rgba(241, 246, 239, .4); border-radius: 50%;
  font-family: var(--monof); font-size: 11px; color: var(--muzzle); margin-right: 9px; }
.ok { color: var(--gold); font-weight: 700; }
.bad { color: #df8360; font-weight: 700; }
code { font-family: var(--monof); font-size: 12px; word-break: break-all;
  color: var(--shadow); background: rgba(241, 246, 239, .06); padding: 1px 5px;
  border-radius: 4px; }
pre.mono { color: var(--shadow); }
.seal { display: inline-block; padding: 4px 12px; border-radius: 6px;
  background: var(--gold); color: #082017; font-family: var(--disp); font-weight: 700; }

/* ---- designed states ---- */
.ghost { opacity: .6; }
.ghost .value { color: var(--mut); }
.empty { display: flex; align-items: center; gap: 12px; color: var(--mut); }
.empty img { width: 30px; height: 30px; border-radius: 50%; opacity: .8; }
.demobar { border: 1px solid rgba(238, 194, 92, .4); border-radius: 12px; padding: 11px 16px;
  background: rgba(238, 194, 92, .07); color: var(--shadow); margin: 14px 0; font-size: 13px;
  font-family: var(--monof); letter-spacing: .04em; }
.demobar b { color: var(--mut); }
pre.mono { overflow-x: auto; font-size: 11.5px; line-height: 1.9; }
.footrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footrow img { width: 24px; height: 24px; border-radius: 50%; }
.footrow .links { margin-left: auto; display: flex; gap: 18px; }
.footrow a { color: var(--mut); }
.footrow a:hover { color: var(--cream); }

/* ---- interaction polish ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(241, 246, 239, .035); }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.flash { animation: goldflash 1.2s ease; }
@keyframes goldflash { 0% { color: var(--gold); } 100% { } }
.updated { font-family: var(--monof); font-size: 10px; letter-spacing: .1em; color: var(--mut2); }
.popover { position: absolute; right: 24px; top: 56px; z-index: 50; max-width: 380px;
  background: #17261e; border: 1px solid rgba(238, 194, 92, .4); border-radius: 14px;
  padding: 16px 18px; font-size: 13px; color: var(--mut); line-height: 1.6;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.popover b { color: var(--cream); }
.popover .g { color: var(--gold); }
nav { position: sticky; }
.verdict { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; border-radius: 14px;
  padding: 16px 20px; margin-bottom: 16px; font-family: var(--disp); font-weight: 700;
  font-size: 22px; letter-spacing: -.01em; border: 1px solid var(--line);
  background: var(--panel); color: var(--cream); }
.verdict.won { border-color: rgba(238, 194, 92, .55); background: rgba(238, 194, 92, .08);
  color: var(--gold); }
.verdict .sub2 { font-family: var(--monof); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; color: var(--mut); }
.verdict .act { margin-left: auto; }
button.mini { font: 500 11.5px var(--monof); letter-spacing: .06em; padding: 7px 13px;
  background: transparent; color: var(--mut); border: 1px solid rgba(241, 246, 239, .25); }
button.mini:hover { color: var(--cream); border-color: rgba(241, 246, 239, .5); background: transparent; }
.filterrow { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }

/* The oversubscription note on the draw card: gold-deep, not a red — it is a
   heads-up about the numbers, not an error state */
.row .warn { color: var(--muzzle); }