/* Owner 07/11/2026: the flexnet.dev look - warm grey paper with faint column lines, a boxed
   mono wordmark, small spaced mono labels, orange accents, light geometric type, soft cards. */
:root {
  --paper:#e4e2dd; --card:#f3f2ee; --ink:#1b1b1b; --soft:#6f6d68; --line:#c9c6bf; --rule:rgba(27,27,27,.13);
  --orange:#f26a0f; --orange-ink:#fff; --green:#1f9d55; --red:#c4321b;
  --sans:"Outfit", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, monospace;
}
/* Dark: the flexnet.dev dark page (dot grid, light boxed wordmark). Follows the device unless the
   person picks Light or Dark with the header button (owner 07/11/2026), remembered in this browser. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper:#141414; --card:#1c1c1c; --ink:#efede8; --soft:#9b9893; --line:#3b3a38; --rule:transparent; --red:#ff7a63; --green:#2fbf6a; }
:root:not([data-theme="light"]) body { background-image:radial-gradient(circle, rgba(239,237,232,.16) 1px, transparent 1.4px); background-size:44px 44px; }
:root:not([data-theme="light"]) header .brand { background:var(--ink); color:#141414; border-color:var(--ink); }
:root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .wrap, :root:not([data-theme="light"]) form.grid { box-shadow:none; background:rgba(28,28,28,.92); }
:root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background:#191919; }
}
:root[data-theme="dark"] { --paper:#141414; --card:#1c1c1c; --ink:#efede8; --soft:#9b9893; --line:#3b3a38; --rule:transparent; --red:#ff7a63; --green:#2fbf6a; }
:root[data-theme="dark"] body { background-image:radial-gradient(circle, rgba(239,237,232,.16) 1px, transparent 1.4px); background-size:44px 44px; }
:root[data-theme="dark"] header .brand { background:var(--ink); color:#141414; border-color:var(--ink); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .wrap, :root[data-theme="dark"] form.grid { box-shadow:none; background:rgba(28,28,28,.92); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background:#191919; }

* { box-sizing:border-box; }
html { background:var(--paper); }
body {
  margin:0; font:300 16px/1.55 var(--sans); color:var(--ink); background:var(--paper); min-height:100vh;
  /* four faint column lines, like the reference */
  background-image:linear-gradient(to right, transparent calc(50% - 616px), var(--rule) calc(50% - 616px), var(--rule) calc(50% - 615px), transparent calc(50% - 615px),
    transparent calc(50% - 308px), var(--rule) calc(50% - 308px), var(--rule) calc(50% - 307px), transparent calc(50% - 307px),
    transparent calc(50% - 1px), var(--rule) calc(50% - 1px), var(--rule) 50%, transparent 50%,
    transparent calc(50% + 307px), var(--rule) calc(50% + 307px), var(--rule) calc(50% + 308px), transparent calc(50% + 308px),
    transparent calc(50% + 615px), var(--rule) calc(50% + 615px), var(--rule) calc(50% + 616px), transparent calc(50% + 616px));
}
a { color:inherit; }
.mono, header nav a, header nav button, th, h2, .card .k, .chip, label > span.lab, .types label, .btn { font-family:var(--mono); }

header { max-width:1232px; margin:0 auto; padding:20px 16px 8px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
header .brand { font:700 17px var(--mono); letter-spacing:.08em; border:1.5px solid var(--ink); padding:5px 9px; text-decoration:none; margin-right:auto; }
header nav { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
header nav a, header nav button { font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--soft); background:none; border:0; padding:6px 0; cursor:pointer; }
header nav a:hover, header nav button:hover { color:var(--ink); }
header nav a.cta { background:var(--orange); color:var(--orange-ink); font-weight:700; padding:8px 12px; }
header .live { font:12px var(--mono); letter-spacing:.08em; color:var(--soft); text-transform:uppercase; }
header .live::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:7px; }

main { max-width:1232px; margin:0 auto; padding:16px 16px 60px; }
.kicker { font:12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:22px 0 6px; }
.kicker b { color:var(--orange); font-weight:500; }
h1 { font:400 clamp(28px, 4vw, 40px)/1.15 var(--sans); letter-spacing:-.01em; margin:0 0 18px; }
h2 { font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin:34px 0 10px; }
h2::before { content:"· "; color:var(--orange); }
p.lead, .muted { color:var(--soft); }

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.card, .wrap, form.grid {
  background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 40px -28px rgba(0,0,0,.35);
}
.card { padding:16px 18px; }
.card .k { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.card .v { font:400 28px/1.2 var(--sans); margin-top:4px; font-variant-numeric:tabular-nums; }
.wrap { overflow-x:auto; padding:4px 6px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:11px; font-weight:500; color:var(--soft); text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.n { font-family:var(--mono); font-size:14px; }
tr:last-child td { border-bottom:0; }
td a { color:var(--orange); font-family:var(--mono); text-decoration:none; }
.neg { color:var(--red); font-weight:500; } .pos { color:var(--green); }
.void td { color:var(--soft); text-decoration:line-through; } .void td.keep { text-decoration:none; }

form.grid { display:grid; gap:14px; padding:20px; }
label { display:grid; gap:6px; font-weight:400; font-size:13px; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
label small { text-transform:none; letter-spacing:0; font-family:var(--sans); }
input, select, textarea { font:300 16px var(--sans); color:var(--ink); padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); min-height:44px; width:100%; text-transform:none; letter-spacing:0; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--orange); outline-offset:1px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:560px) { .row2 { grid-template-columns:1fr; } }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--orange); color:var(--orange-ink); border:0; border-radius:0; padding:12px 18px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:none; min-height:44px; }
.btn.ghost { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn.danger { background:var(--red); }
.err, .ok { border-radius:12px; padding:12px 14px; margin-bottom:14px; font-size:15px; }
.err { background:rgba(196,50,27,.1); color:var(--red); border:1px solid rgba(196,50,27,.35); }
.ok { background:rgba(31,157,85,.1); color:var(--green); border:1px solid rgba(31,157,85,.35); }
.bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.bar.card { padding:12px 14px; }
.types { display:flex; flex-wrap:wrap; gap:8px; }
.types label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:9px 14px; background:var(--paper); cursor:pointer; }
.types label:has(input:checked) { background:var(--orange); color:#fff; border-color:var(--orange); }
.types input { width:auto; min-height:0; accent-color:#fff; }
details { margin-top:20px; } summary { cursor:pointer; font:12px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }
.chip { display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border:1px solid currentColor; border-radius:999px; }
header nav .theme { font-size:15px; letter-spacing:0; text-transform:none; padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:var(--ink); }