/* ============================================================================
   Design code (original-ui, 2026-09-29)

   Category convention avoided: every hackathon listing and job board is a stack
   of rounded cards, title on top, a prize chip, a days-left chip, one filled
   pill per card. This app was exactly that an hour ago.

   Metaphor: the tote board at a racetrack, the morning line. Rows of runners
   with a post position, a purse, a post time, the field, and the line (odds),
   lit brighter where the bet is better. Family: luminous-emissive, because the
   brand this app inherits (jonathanandrei.com) is emitted light on near-black.

   - The score is the emitted light, because expected value is the only reason
     the board ranks anything. Luminance encodes data; nothing else glows.
   - Money is the only amber, because the purse is the currency and no other
     element may borrow its colour.
   - Violet is reserved for a decision Jonathan must make (Start, Approve, Pull,
     a key he must paste), because most rows are fine and the eye should go
     straight to the tap that starts a build.
   - Rows are separated by rules on one board and never boxed, because they are
     one ranked field and boxes would say they are unrelated.

   Locked inputs: the site's palette (near-black #08080b / ivory #f4f2ec, violet
   and fuchsia, amber, emerald), Inter, JetBrains Mono, Instrument Serif italic
   for the wordmark, dark as home polarity. Differentiation from the ledger runs
   on structure (a board, not cards), ornament (lit figures) and motion (the
   6:00 sweep that lights the board in rank order, then stillness).
   ============================================================================ */

@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/static/fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/static/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  /* board (home polarity: dark) */
  --board: #08080b;
  --face: #100d17;
  --face-lit: #18141f;
  --rule: rgba(190, 175, 230, .13);
  --rule-strong: rgba(190, 175, 230, .28);
  --ink: #fafafa;
  --ink-2: #cfc9dc;
  --ink-mute: #8f889f;
  --ink-faint: #6a6379;
  --decide: #a78bfa;            /* the one job: a decision Jonathan must make */
  --decide-deep: #8b5cf6;
  --decide-2: #d946ef;          /* only inside the brand primary gradient */
  --purse: #fbbf24;             /* money, nothing else */
  --live: #34d399;              /* running, online */
  --stop: #f87171;              /* destructive, failed */
  --led-glow: 167, 139, 250;    /* rgb of the lit figure */
  --shadow: 0 8px 32px rgba(0, 0, 0, .35);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  /* scale: base 15, ratio 1.2 */
  --t-1: 12.5px; --t0: 15px; --t1: 18px; --t2: 21.6px; --t3: 26px;
  --u: 4px;
  --r-key: 6px; --r-face: 10px;
  --dur-fast: 140ms; --dur: 260ms; --dur-slow: 480ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    /* the same board in daylight: matte face, ink figures, no emitted light */
    --board: #f4f2ec;
    --face: #fbfaf6;
    --face-lit: #ffffff;
    --rule: rgba(46, 34, 68, .14);
    --rule-strong: rgba(46, 34, 68, .3);
    --ink: #0e0e12;
    --ink-2: #33313d;
    --ink-mute: #5c5a68;
    --ink-faint: #8a8794;
    --decide: #6d28d9;
    --decide-deep: #6d28d9;
    --decide-2: #c026d3;
    --purse: #a16207;
    --live: #047857;
    --stop: #b91c1c;
    --led-glow: 109, 40, 217;
    --shadow: 0 8px 32px rgba(46, 34, 68, .10);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--board); color: var(--ink);
  font: 400 var(--t0)/1.5 var(--sans); font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}
a { color: var(--decide); text-decoration: none; }
::selection { background: rgba(139, 92, 246, .35); }
:focus-visible { outline: 2px solid var(--decide); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-mute); }
.hidden { display: none !important; }

/* ---- keys (buttons) ---------------------------------------------------- */
button, .act {
  font: 500 14px/1 var(--sans); color: var(--ink-2);
  background: var(--face-lit); border: 1px solid var(--rule-strong); border-radius: var(--r-key);
  padding: 12px 14px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
button:hover, .act:hover { color: var(--ink); border-color: var(--ink-faint); }
button:disabled { opacity: .45; cursor: default; }
.act.primary, button.primary {
  color: #fff; border-color: transparent; font-weight: 600;
  background: linear-gradient(90deg, var(--decide-deep), var(--decide-2));
}
.act.decide, button.decide { color: var(--decide); border-color: rgba(var(--led-glow), .55); }
.act.stop, button.stop { color: var(--stop); border-color: rgba(248, 113, 113, .4); background: transparent; }
input, select, textarea {
  font: 14px var(--sans); color: var(--ink); background: var(--board);
  border: 1px solid var(--rule-strong); border-radius: var(--r-key); padding: 12px; width: 100%; min-height: 44px;
}
input:focus { border-color: var(--decide); outline: none; }
code { font: 12.5px var(--mono); background: var(--face-lit); padding: 1px 6px; border-radius: 4px; }

/* ---- header board ------------------------------------------------------ */
.top { position: sticky; top: 0; z-index: 5; padding: calc(env(safe-area-inset-top) + 8px) 12px 0; background: var(--board); }
.top-inner {
  max-width: 760px; margin: 0 auto; background: var(--face); border: 1px solid var(--rule); border-radius: var(--r-face);
  padding: 10px 14px 0;
}
.brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 6px; }
.brand-name { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.brand-name .serif { font: italic 400 19px/1 var(--serif); letter-spacing: -.01em; }
.live-dot { position: relative; width: 8px; height: 8px; }
.live-dot::before, .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); }
.live-dot::before { animation: ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; opacity: .6; }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
.eyebrow { font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.tabs { display: flex; gap: 2px; }
.tabs button {
  flex: 1; background: transparent; border: 0; border-radius: 8px 8px 0 0; padding: 8px 0 12px; min-height: 44px;
  color: var(--ink-mute); position: relative; font-weight: 500;
}
.tabs button .num { font: 500 10px/1 var(--mono); letter-spacing: .15em; color: var(--ink-faint); }
.tabs button.active { color: var(--ink); }
.tabs button.active .num { color: var(--decide); }
.tabs button::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--decide); opacity: 0; transform: scaleX(0); transition: opacity var(--dur), transform var(--dur) var(--ease-out);
}
.tabs button.active::after { opacity: 1; transform: scaleX(1); }

/* ---- layout ------------------------------------------------------------ */
main { padding: 12px 12px 24px; max-width: 760px; margin: 0 auto; }
.tab { display: none; } .tab.active { display: block; }
.strip { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; }
.strip-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.strip-line .serif { font: italic 400 var(--t2)/1.1 var(--serif); color: var(--ink); }
.strip-line .meta { font: 400 12px/1.4 var(--mono); color: var(--ink-mute); text-align: right; }
.posts { display: flex; gap: 6px; flex-wrap: wrap; }
.post-key { padding: 8px 12px; min-height: 36px; font-size: 13px; color: var(--ink-mute); background: transparent; border-color: var(--rule); border-radius: var(--r-key); }
.post-key.active { color: var(--ink); border-color: var(--decide); background: rgba(var(--led-glow), .10); }
.post-key.ghost { margin-left: auto; }
.posts.sorts { border-top: 1px solid var(--rule); padding-top: 10px; }
.posts.windows { padding-top: 2px; }
select.post-key { width: auto; min-height: 36px; padding: 6px 10px; font: 500 13px var(--sans); color: var(--ink-2); background: var(--board); }
select.act { font: 500 14px var(--sans); color: var(--ink-2); background: var(--board); min-height: 44px; }

/* ---- the board --------------------------------------------------------- */
.board { background: var(--face); border: 1px solid var(--rule); border-radius: var(--r-face); overflow: hidden; position: relative; }
.colhead {
  display: grid; grid-template-columns: 34px 1fr 64px; gap: 10px; padding: 10px 14px 8px;
  font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--rule);
}
.colhead span:last-child { text-align: right; }
.run { border-bottom: 1px solid var(--rule); background: transparent; transition: background var(--dur); }
.run:last-child { border-bottom: 0; }
.run[open], .run:hover { background: var(--face-lit); }
.run > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 64px; gap: 10px; align-items: start;
  padding: 12px 14px; min-height: 60px;
}
.run > summary::-webkit-details-marker { display: none; }
.post-no { font: 500 13px/1.2 var(--mono); color: var(--ink-mute); padding-top: 3px; font-variant-numeric: tabular-nums; }
.runner { min-width: 0; }
.name { display: block; font: 500 var(--t0)/1.35 var(--sans); color: var(--ink); letter-spacing: -.005em; overflow-wrap: anywhere; }
.facts { display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 5px; font: 400 13px/1.3 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.facts .purse { color: var(--purse); font-weight: 600; }
.facts .first { color: var(--purse); opacity: .85; }
.prizes { margin-top: 10px; border-top: 1px solid var(--rule); }
.prize-row { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 13px; align-items: baseline; }
.prize-row .prize-title { color: var(--ink-2); }
.prize-row .prize-val { color: var(--purse); font-weight: 600; text-align: right; }
.prize-row .prize-note { grid-column: 1 / -1; color: var(--ink-mute); font-size: 12px; line-height: 1.4; }
.facts .src { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; align-self: center; }
.facts .src.dev { color: var(--live); }
.line { text-align: right; padding-top: 1px; }
.led {
  display: inline-block; font: 600 var(--t1)/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: rgb(var(--led-glow)); opacity: calc(.45 + .55 * var(--lit, 0));
  text-shadow: 0 0 calc(12px * var(--lit, 0)) rgba(var(--led-glow), calc(.9 * var(--lit, 0)));
}
@media (prefers-color-scheme: light) {
  .led { text-shadow: none; opacity: 1; color: var(--ink); background: rgba(var(--led-glow), calc(.06 + .30 * var(--lit, 0))); padding: 3px 6px; border-radius: 4px; }
}
.led-note { display: block; font: 400 10px/1.2 var(--mono); color: var(--ink-faint); margin-top: 5px; letter-spacing: .04em; }
.paddock { padding: 2px 14px 16px 58px; }
.run[open] .paddock { animation: reveal var(--dur) var(--ease-out); }
@keyframes reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.paddock .detail { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.paddock .detail b { color: var(--ink); font-weight: 600; }
.paddock .note { font-size: 12.5px; color: var(--ink-mute); margin-top: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .04em; padding: 5px 8px; border-radius: 4px; color: var(--ink-mute); border: 1px solid var(--rule); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.acts .act.wide { grid-column: 1 / -1; }
.acts .act { text-decoration: none; }

/* allowance against the purse */
.econ { border: 1px solid var(--rule); border-left-width: 3px; border-radius: var(--r-key); padding: 10px 12px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.econ-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.econ-row { display: grid; grid-template-columns: 96px 1fr; gap: 2px 10px; padding: 2px 0; align-items: baseline; }
.econ-row > span:first-child { font: 500 10.5px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.econ-row .dim { grid-column: 2; font-size: 12px; }
.econ.e-ok { border-left-color: var(--live); } .econ.e-ok .state { color: var(--live); }
.econ.e-caution { border-left-color: var(--purse); } .econ.e-caution .state { color: var(--purse); }
.econ.e-stop { border-left-color: var(--stop); } .econ.e-stop .state { color: var(--stop); }
.econ.e-unknown { border-left-color: var(--ink-faint); } .econ.e-unknown .state { color: var(--ink-mute); }

/* empty / loading */
.empty { padding: 28px 16px; text-align: center; color: var(--ink-mute); font-size: 14px; }
.empty .serif { display: block; font: italic 400 var(--t2)/1.2 var(--serif); color: var(--ink); margin-bottom: 6px; }
.skel { height: 60px; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.skel::after { content: ""; position: absolute; inset: 14px 14px 14px 58px; border-radius: 4px; background: var(--face-lit); }

/* ---- the 6:00 sweep: the board lights up in rank order ------------------ */
.board.sweeping::before {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; top: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--led-glow), .8), transparent);
  animation: sweep 700ms var(--ease-out) forwards;
}
@keyframes sweep { from { transform: translateY(0); opacity: 1; } to { transform: translateY(var(--sweep-h, 900px)); opacity: 0; } }
.board.sweeping .run { animation: light-up var(--dur-slow) var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 18) * 32ms); }
@keyframes light-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.board.sweeping .led { animation: settle 520ms steps(6) both; animation-delay: calc(min(var(--i, 0), 18) * 32ms + 120ms); }
@keyframes settle { 0% { opacity: 0; } 30% { opacity: .35; } 50% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: calc(.45 + .55 * var(--lit, 0)); } }
@media (prefers-color-scheme: light) { @keyframes settle { 0% { opacity: 0; } 30% { opacity: .5; } 100% { opacity: 1; } } }

/* ---- runners (projects) -------------------------------------------------- */
.run-link { display: block; color: inherit; text-decoration: none; }
.run-link:hover { text-decoration: none; }
.lamp { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-top: 6px; background: var(--ink-faint); }
.lamp.l-decide { background: var(--decide); box-shadow: 0 0 10px rgba(var(--led-glow), .8); }
.lamp.l-live { background: var(--live); }
.lamp.l-stop { background: var(--stop); }
.lamp.l-done { background: var(--ink-2); }
.state { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.state.s-decide { color: var(--decide); } .state.s-live { color: var(--live); } .state.s-stop { color: var(--stop); } .state.s-idle { color: var(--ink-mute); }
.rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 10px 0 0; padding: 0; list-style: none; }
.rail li { height: 4px; border-radius: 2px; background: var(--rule-strong); position: relative; }
.rail li.done { background: var(--ink-2); }
.rail li.now { background: var(--live); }
.rail li.now.decide { background: var(--decide); box-shadow: 0 0 8px rgba(var(--led-glow), .7); }
.rail li.now.stop { background: var(--stop); }
.rail-labels { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 4px; font: 400 9px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.rail-labels span { overflow: hidden; white-space: nowrap; text-overflow: clip; }

/* ---- detail panels ----------------------------------------------------- */
.panel { background: var(--face); border: 1px solid var(--rule); border-radius: var(--r-face); padding: 14px; }
.panel + .panel, .board + .panel, .panel + .board { margin-top: 10px; }
h1 { font: 500 var(--t2)/1.25 var(--sans); letter-spacing: -.01em; margin: 6px 0 4px; }
h2 { font: 500 10.5px/1 var(--mono); color: var(--ink-mute); letter-spacing: .2em; text-transform: uppercase; margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.verdict { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 8px; }
.verdict .word { font: 700 var(--t3)/1 var(--mono); letter-spacing: .06em; color: rgb(var(--led-glow)); text-shadow: 0 0 14px rgba(var(--led-glow), .7); }
.verdict .word.kill { color: var(--stop); text-shadow: none; }
.verdict .word.reaim { color: var(--purse); text-shadow: none; }
@media (prefers-color-scheme: light) { .verdict .word { text-shadow: none; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14px; align-items: baseline; }
.kv > :nth-child(odd) { font: 500 10.5px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.kv .on { color: var(--live); } .kv .off { color: var(--stop); }
.need { border-top: 1px solid var(--rule); padding: 12px 0; }
.need:first-of-type { border-top: 0; }
.need label { display: block; font-weight: 600; margin-bottom: 4px; }
.need .why { color: var(--ink-mute); font-size: 13px; margin-bottom: 8px; }
pre.log { background: var(--board); border: 1px solid var(--rule); border-radius: var(--r-key); padding: 10px 12px; font: 12px/1.45 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; color: var(--ink-2); margin: 0; }
.back { background: transparent; border: 0; color: var(--decide); padding: 6px 0 10px; min-height: 0; justify-content: flex-start; }
.back:hover { border: 0; }
details.fold summary { cursor: pointer; color: var(--ink-mute); font-size: 13px; padding: 6px 0; }
.event { font-size: 13px; color: var(--ink-mute); padding: 7px 0; border-bottom: 1px solid var(--rule); }
.event:last-child { border-bottom: 0; }
.event b { color: var(--ink-2); font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.small { font-size: 12.5px; }
.err { color: var(--stop); font-size: 13.5px; }

/* ---- modal, toast, footer ---------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
.modal.hidden { display: none; }
.modal-card { background: var(--face); border: 1px solid var(--rule-strong); width: 100%; max-width: 760px; max-height: 88dvh; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.modal-head button { background: transparent; border: 0; font-size: 18px; padding: 8px 10px; min-height: 0; color: var(--ink-2); }
#modal-body { margin: 0; padding: 14px 16px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 13px/1.55 var(--mono); color: var(--ink-2); }
.toast { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 20px); left: 50%; transform: translateX(-50%); background: var(--face-lit); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--shadow); padding: 12px 16px; border-radius: var(--r-key); z-index: 30; max-width: 90vw; font-size: 14px; }
footer.site { max-width: 760px; margin: 0 auto; padding: 22px 16px 8px; display: flex; align-items: center; justify-content: center; gap: 12px; }
footer.site .rule-line { height: 1px; width: 32px; background: var(--rule-strong); }
footer.site a { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .live-dot::before { display: none; }
}