/* FOREMAN — the acidalchamy.com design system, not a new one. MASTER PROMPT §9. */

:root{
  --bg:#03050a;            /* the TRUE ground. style.css declares --bg:#000 then body
                              overrides it to #03050a. Use #03050a. */
  --bg-elev:#0b0f16;
  --fg:#f4f4f4; --fg-dim:#9fadc4; --fg-faint:#6b7688;
  --brand:#61dafb;         /* 38 occurrences across the homepage — this IS the site */
  --brand-2:#6ab7ff;
  --ink-on-brand:#04111c;
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --idle:#64748b;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;
  --measure:66ch;
  color-scheme:dark;
}

/* ---------- OWNER LAW: no rounded corners, anywhere, ever. ----------
   Machines, receipts and price tags have square edges; so does this app.
   One rule so nothing sneaks back in via a new component. */
*, *::before, *::after { border-radius: 0 !important; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* clip, NEVER hidden: overflow-x:hidden on body makes a scroll container and
     silently kills every position:sticky element, including /all's header. */
  overflow-x:clip;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
figure,h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
b,strong{font-weight:600}

/* every figure, everywhere */
.num,td,th,.mono,.chip,time{font-variant-numeric:tabular-nums}

/* faint HUD grid, masked to fade downward */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(97,218,251,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(97,218,251,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse at 50% -10%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% -10%,#000 35%,transparent 78%)}

.wrap{max-width:860px;margin:0 auto;padding:22px 20px 80px}
.fold{min-height:calc(100svh - 44px)}

/* mono eyebrow with a "// " prefix — the domain's fingerprint */
.eyebrow{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.24em;
  color:#7fd1ff;text-transform:uppercase;font-weight:600}
.eyebrow::before{content:'// ';opacity:.55}
.eyebrow.rule{display:flex;align-items:center;gap:14px}
.eyebrow.rule::after{content:'';flex:1;height:1px;background:var(--line)}

.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-faint)}

/* hairline-gap grid: depth from a 1px line + lighter ground, never a drop shadow */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid > *{background:var(--bg-elev);padding:20px 22px}

/* ---------------------------------------------------------------- topbar */
.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.topbar .quiet{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;
  color:var(--fg-faint);border:1px solid var(--line-strong);padding:4px 10px}
.topbar .quiet:hover{color:var(--brand);border-color:var(--brand);text-decoration:none}

/* ------------------------------------------------------------ energy row */
.ask{font-family:var(--font-display);font-size:.95rem;letter-spacing:.02em;
  color:var(--fg-dim);margin:26px 0 10px;font-weight:500}
.energy{display:block;margin:0 -3px}
.energy a{display:inline-block;margin:3px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim);
  border:1px solid var(--line-strong);padding:9px 13px;line-height:1}
.energy a:hover{color:var(--fg);border-color:var(--fg-dim);text-decoration:none}
.energy a[aria-current="true"]{background:var(--brand);color:var(--ink-on-brand);
  border-color:var(--brand);font-weight:600}

/* ---------------------------------------------------------------- today */
.today{margin-top:30px;border-left:3px solid var(--accent,var(--brand));padding-left:18px;
  position:relative}
.today::before{content:'';position:absolute;left:-3px;right:0;top:-22px;height:1px;
  background:var(--line)}
.today h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  /* the ONLY large type on the page */
  font-size:clamp(34px,5vw,56px);line-height:1.02;max-width:14ch}
.today .why{font-size:18px;color:var(--fg-dim);margin-top:14px;max-width:44ch}
.today .do{font-size:20px;color:var(--fg);margin-top:16px;max-width:46ch}
.today .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-faint);margin-top:18px}
.acts{display:block;margin:20px -3px 0}
.acts > *{display:inline-block;margin:3px;vertical-align:top}
.acts summary{display:inline-block}
.acts a,.acts button,.acts summary{font-family:var(--font-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg);
  border:1px solid var(--line-strong);padding:10px 14px;line-height:1;
  background:none;cursor:pointer;font-weight:500;list-style:none}
.lg{display:inline} .sm{display:none}
@media (max-width:560px){ .lg{display:none} .sm{display:inline} }
.acts .primary{background:var(--brand);color:var(--ink-on-brand);border-color:var(--brand);font-weight:600}
.acts a:hover,.acts summary:hover{border-color:var(--brand);text-decoration:none}
.acts details{position:relative;display:inline-block}
.acts details summary::-webkit-details-marker{display:none}
.acts details:not([open]) ul{display:none}
.acts details ul{position:absolute;z-index:9;top:calc(100% + 4px);left:0;min-width:170px;
  border:1px solid var(--line-strong);background:var(--bg-elev)}
.acts details li a{display:block;border:0;border-bottom:1px solid var(--line);padding:11px 14px}

/* ------------------------------------------------------------- calm rest */
.more{margin-top:60px}
.runners{margin-top:14px;border-top:1px solid var(--line)}
.runners li{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.runners .n{font-family:var(--font-mono);font-size:.72rem;color:var(--fg-faint);min-width:2.2em}
.runners .b{flex:1;min-width:0}
.runners .b b{font-family:var(--font-display);font-weight:600;font-size:1rem;display:block}
.runners .b span{color:var(--fg-dim);font-size:.92rem}
.dimline{color:var(--fg-faint);font-size:.92rem;margin-top:22px}
.dimline a{color:var(--fg-faint);text-decoration:underline;text-underline-offset:3px}
.ages{margin-top:10px}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 7px;border:1px solid var(--line-strong);
  color:var(--fg-dim);vertical-align:middle}
.chip.warn{color:var(--warn);border-color:var(--warn)}
.chip.bad{color:var(--bad);border-color:var(--bad)}
.chip.ok{color:var(--ok);border-color:var(--ok)}
.chip.owner{color:var(--brand);border-color:var(--brand)}
.stale{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--fg-faint)}
.faint{color:var(--fg-faint)}
.dot{display:inline-block;width:9px;height:9px;background:var(--idle);vertical-align:middle}
.dot.up{background:var(--ok)} .dot.down{background:var(--bad)} .dot.quiet{background:var(--warn)}

/* -------------------------------------------------------------- project */
.phead{border-left:3px solid var(--accent,var(--brand));padding-left:18px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between}
.phead h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(28px,4vw,44px);line-height:1.05;max-width:18ch}
.sect{margin-top:44px}
.sect > h2{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.24em;
  color:#7fd1ff;text-transform:uppercase;font-weight:600;margin-bottom:14px}
.sect > h2::before{content:'// ';opacity:.55}
.syn{font-size:17px;color:var(--fg-dim);max-width:var(--measure)}
.todo{max-height:340px;overflow-y:auto;border:1px solid var(--line)}
.todo li{display:flex;gap:12px;align-items:baseline;padding:12px 14px;border-bottom:1px solid var(--line)}
.todo li:last-child{border-bottom:0}
.todo li.owner{background:rgba(97,218,251,.045)}
.todo .marker{width:9px;height:9px;background:var(--brand);flex:none;translate:0 -1px}
.todo .t{flex:1;min-width:0}
kbd{font-family:var(--font-mono);font-size:.8rem;color:var(--fg-dim);
  border:1px solid var(--line);padding:2px 6px;background:var(--bg-elev)}

table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-faint);font-weight:600;position:sticky;top:0;background:var(--bg);z-index:2}
tbody tr:hover{background:var(--bg-elev)}
td.name{border-left:2px solid var(--accent,transparent);font-weight:500}
.bar{display:inline-block;height:7px;background:var(--brand);opacity:.55;vertical-align:middle}
.scroll{overflow-x:auto}

.spark{display:block}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters a{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);border:1px solid var(--line-strong);padding:7px 11px}
.filters a[aria-current="true"]{background:var(--brand);color:var(--ink-on-brand);border-color:var(--brand)}

textarea{width:100%;min-height:420px;background:var(--bg-elev);color:var(--fg);
  border:1px solid var(--line-strong);font-family:var(--font-mono);font-size:13px;
  line-height:1.6;padding:16px;resize:vertical}
input[type=text],input[type=password],select{background:var(--bg-elev);color:var(--fg);
  border:1px solid var(--line-strong);padding:10px 12px;font-family:inherit;font-size:15px;width:100%}
form.inline{display:flex;gap:8px;margin-top:12px}
form.inline input{flex:1}
form.inline button{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;background:none;color:var(--fg);border:1px solid var(--line-strong);
  padding:0 16px;cursor:pointer}

/* -------------------------------------------------------------- reveal --
   ONLY inside @supports(animation-timeline:view()). Never gate content
   visibility on JS: IntersectionObserver + opacity:0 renders a blank page in
   frozen/snapshot renderers, and it has already happened here. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .more, .sect{animation:fmrise linear both;animation-timeline:view();
      animation-range:entry 0% entry 42%}
    @keyframes fmrise{from{opacity:.35;translate:0 10px}to{opacity:1;translate:0 0}}
  }
}

/* ---------------------------------------------------------- QUIET MODE --
   The direct answer to "my eyes are literally getting SO TIRED". Not a
   nice-to-have. Server-rendered from a cookie, so it survives a reload with
   JS off and follows him between machines via prefs. */
body.quiet{
  /* The spec named #c8ccd4 here and described it as "~7.5:1 contrast, not
     15:1". Those two facts disagree: #c8ccd4 on #06080c measures 12.45:1.
     The ratio is the point — it is the direct answer to "my eyes are literally
     getting SO TIRED" — so the token moves and the ratio stays. #9b9ea4
     measures 7.46:1, with dim at 6.0:1 and faint at 4.6:1 underneath it. */
  --bg:#06080c; --fg:#9b9ea4; --fg-dim:#868a91; --fg-faint:#71757c;
  --brand:#5aa8c4; --brand-2:#5aa8c4; --line:rgba(255,255,255,.08);
  font-size:19px; line-height:1.85;
}
body.quiet::before{display:none}
body.quiet .wrap{max-width:62ch}
body.quiet .eyebrow{color:#5aa8c4}
body.quiet .sect > h2{color:#5aa8c4}
body.quiet *,body.quiet *::before,body.quiet *::after{
  animation:none !important;transition:none !important}
body.quiet .spark,body.quiet .traffic{display:none}