/* Shelfware Labs — Terminal Ledger. Monospace, dot-matrix, a P&L printout that reads zero. Light + dark + system. */

/* ---------- design tokens ---------- */
:root{
  /* dark = the native terminal */
  --bg:#080b0c; --bg-raise:#0d1214; --bg-raise-2:#111819;
  --text:#c7d1ca; --text-muted:#7c877f; --text-dim:#586159;
  --amber:#e8b04b;   /* the value / ticker color (primary accent) */
  --green:#7bd88f;   /* positive / live (used sparingly) */
  --red:#e0563f;     /* zero / dead / shelved */
  --rule:#1a2420; --stripe:#0c1210; --glow:rgba(232,176,75,.05);

  --mono:ui-monospace,"Cascadia Code","JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#edefe7; --bg-raise:#e7eae0; --bg-raise-2:#e0e4d8;
    --text:#161a12; --text-muted:#586055; --text-dim:#7a8274;
    --amber:#8a5a12; --green:#2f7d4f; --red:#b23a26;
    --rule:#ccd3c3; --stripe:#e3ead9; --glow:rgba(138,90,18,.06);
  }
}
:root[data-theme="light"]{
  --bg:#edefe7; --bg-raise:#e7eae0; --bg-raise-2:#e0e4d8;
  --text:#161a12; --text-muted:#586055; --text-dim:#7a8274;
  --amber:#8a5a12; --green:#2f7d4f; --red:#b23a26;
  --rule:#ccd3c3; --stripe:#e3ead9; --glow:rgba(138,90,18,.06);
}
:root[data-theme="dark"]{
  --bg:#080b0c; --bg-raise:#0d1214; --bg-raise-2:#111819;
  --text:#c7d1ca; --text-muted:#7c877f; --text-dim:#586159;
  --amber:#e8b04b; --green:#7bd88f; --red:#e0563f;
  --rule:#1a2420; --stripe:#0c1210; --glow:rgba(232,176,75,.05);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 560px at 82% -12%, var(--glow), transparent 60%),
    repeating-linear-gradient(0deg, transparent, transparent 3px, color-mix(in srgb, var(--rule) 26%, transparent) 3px, color-mix(in srgb, var(--rule) 26%, transparent) 4px);
  background-attachment:fixed;
  transition:background-color .2s ease, color .2s ease;
}
.wrap{max-width:1020px; margin:0 auto; padding:0 24px}
.wrap.reading{max-width:880px}
a{color:inherit}
.mono{font-family:var(--mono)}
.eyebrow{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted)}
.eyebrow::before{content:"// "; color:var(--text-dim)}
h1,h2,h3{font-family:var(--mono); font-weight:700; line-height:1.15; margin:0; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
::selection{background:color-mix(in srgb, var(--amber) 30%, transparent)}

/* ---------- top bar + theme toggle ---------- */
header.top{border-bottom:1px solid var(--rule); background:color-mix(in srgb, var(--bg) 88%, transparent); position:sticky; top:0; z-index:10; backdrop-filter:blur(4px)}
header.top .bar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-size:.82rem; letter-spacing:.06em; color:var(--text); text-decoration:none; font-weight:700}
.brand b{color:var(--amber); font-weight:700}
.brand::after{content:"▊"; color:var(--green); margin-left:4px; animation:blink 1.1s steps(1) infinite}
.nav-right{display:flex; align-items:center; gap:20px}
nav.top-nav{display:flex; gap:8px; font-size:.72rem; color:var(--text-muted)}
nav.top-nav a{text-decoration:none; padding:2px 0}
nav.top-nav a::before{content:"["; color:var(--text-dim)}
nav.top-nav a::after{content:"]"; color:var(--text-dim)}
nav.top-nav a:hover{color:var(--amber)}
.back{font-size:.72rem; text-decoration:none; color:var(--text-muted)}
.back:hover{color:var(--amber)}
.theme-toggle{color:var(--text-muted); background:transparent; border:1px solid var(--rule); border-radius:3px;
  padding:5px 8px; cursor:pointer; transition:.15s; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); line-height:1}
.theme-toggle .ico{font-size:1.02rem; display:block}
.theme-toggle:hover{border-color:var(--amber); color:var(--amber)}
@media(max-width:620px){ nav.top-nav{display:none} .brand::after{display:none} }
@keyframes blink{50%{opacity:0}}

/* ---------- hero ---------- */
.hero{position:relative; padding:74px 0 60px}
.prompt-line{color:var(--text-dim); font-size:.86rem; margin-bottom:22px}
.prompt-line b{color:var(--green)}
.hero h1.wordmark{font-size:clamp(2.6rem,8vw,5rem); font-weight:700; letter-spacing:-.02em; line-height:1}
.hero h1.wordmark .us{color:var(--amber)}
.hero h1.wordmark .cursor{display:inline-block; width:.5ch; height:.86em; background:var(--green); margin-left:8px; vertical-align:baseline; animation:blink 1.1s steps(1) infinite}
.tagline{font-size:clamp(.95rem,2.2vw,1.18rem); color:var(--green); margin:22px 0 0}
.dek{max-width:66ch; margin:22px 0 0; font-size:1rem; color:var(--text)}
.dek em{color:var(--amber); font-style:normal}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; font-family:var(--mono);
  padding:11px 16px; border:1px solid var(--rule); border-radius:3px; color:var(--text); transition:.15s}
.btn::before{content:"$ "; color:var(--text-dim)}
.btn:hover{border-color:var(--amber); color:var(--amber)}
.btn.primary{background:var(--amber); color:var(--bg); border-color:var(--amber); font-weight:700}
.btn.primary::before{color:color-mix(in srgb, var(--bg) 55%, transparent)}
.btn.primary:hover{filter:brightness(1.08); color:var(--bg)}

.stamp{display:inline-block; border:1px solid var(--red); color:var(--red); border-radius:3px;
  font-size:.74rem; letter-spacing:.14em; padding:7px 12px; font-weight:700}
.stamp::before{content:"[ "} .stamp::after{content:" ]"}
.stamp.useful{border-color:var(--green); color:var(--green)}
.stamp small{letter-spacing:.06em; font-weight:400; opacity:.85; text-transform:none}
.stamp small::before{content:" · "}
.hero .stamp{position:absolute; top:74px; right:2px}
@media(max-width:760px){ .hero .stamp{position:static; margin-top:26px} }

/* ---------- index = the edge ledger ---------- */
section.index{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--bg-raise); padding:36px 0}
.ledger{border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-top:8px}
.ledger .hd{display:flex; justify-content:space-between; padding:9px 16px; background:var(--bg-raise-2); border-bottom:1px solid var(--rule); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted)}
.ledger .hd .dot{color:var(--red)}
.lrow{display:flex; align-items:baseline; gap:10px; padding:8px 16px}
.lrow:nth-child(even){background:var(--stripe)}
.lrow .lbl{color:var(--text-muted); font-size:.9rem}
.lrow .dots{flex:1 1 auto; border-bottom:1px dotted var(--rule); transform:translateY(-5px); min-width:20px}
.lrow .val{color:var(--amber); font-variant-numeric:tabular-nums; font-size:.95rem}
.lrow.total{border-top:1px solid var(--rule); padding:14px 16px; background:var(--bg-raise-2)}
.lrow.total .lbl{color:var(--text); font-weight:700; letter-spacing:.06em; font-size:1rem}
.lrow.total .val{color:var(--red); font-weight:700; font-size:clamp(1.4rem,4vw,2rem); line-height:1}

/* ---------- the shelf ---------- */
section.shelf{padding:64px 0 36px}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px}
.sec-head h2{font-size:clamp(1.5rem,4vw,2.1rem)}
.sec-head h2::before{content:"~/"; color:var(--text-dim)}
.sec-head p{margin:0; color:var(--text-muted); font-size:.85rem; max-width:40ch}
.featured{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:820px){ .featured{grid-template-columns:1fr} }
.file{display:flex; flex-direction:column; gap:11px; background:var(--bg-raise); border:1px solid var(--rule);
  border-radius:4px; padding:18px; text-decoration:none; transition:.15s}
.file:hover{border-color:var(--amber)}
.file .meta{display:flex; align-items:center; gap:9px; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase}
.file .id{color:var(--text-dim)}
.tag{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber)}
.tag::before{content:"["; color:var(--text-dim)} .tag::after{content:"]"; color:var(--text-dim)}
.tag.live{color:var(--green)} .tag.queued{color:var(--amber)} .tag.shelved{color:var(--red)} .tag.useful{color:var(--green)}
.file h3{font-size:1.02rem; color:var(--text); font-weight:700}
.file.is-live h3{color:var(--amber)}
.file .find{font-size:.84rem; color:var(--text-muted); margin:0; line-height:1.55}
.file .epi{font-size:.72rem; color:var(--text-dim); border-top:1px dashed var(--rule); padding-top:10px; margin-top:auto}
.file .epi::before{content:"# "; color:var(--green)}

.cat{margin-top:52px}
.cat .tier{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--rule); padding-bottom:9px; margin:34px 0 2px; font-weight:700}
.cat .tier::before{content:"$ ls "; color:var(--text-dim)}
.row{display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:baseline; padding:11px 6px; border-bottom:1px solid var(--rule); text-decoration:none; font-size:.86rem}
.row:hover{background:var(--stripe)}
.row .rid{color:var(--text-dim); font-variant-numeric:tabular-nums}
.row .rstat{font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; justify-self:end; padding-top:2px}
.row .rstat::before{content:"["; color:var(--text-dim)} .row .rstat::after{content:"]"; color:var(--text-dim)}
.row .rstat.queued{color:var(--amber)} .row .rstat.shelved{color:var(--red)} .row .rstat.live{color:var(--green)}
.row .rstat.next{color:var(--amber); border:1px solid var(--amber); padding:2px 7px; border-radius:3px; font-weight:700}
.row .rstat.next::before,.row .rstat.next::after{content:""}
.row.is-live{background:color-mix(in srgb, var(--green) 5%, transparent)}
.row.is-live .rtitle b{color:var(--amber)}
.row.is-live .rstat.live{background:var(--green); color:var(--bg); font-weight:700; padding:2px 8px; border-radius:3px; letter-spacing:.06em}
.row.is-live .rstat.live::before,.row.is-live .rstat.live::after{content:""} .row .rstat.useful{color:var(--green)}
.row .rtitle b{color:var(--text); font-weight:700}
.row .rtitle span{color:var(--text-muted)}
@media(max-width:560px){ .row{grid-template-columns:48px 1fr} .row .rstat{grid-column:2; justify-self:start} }

/* ---------- about section on landing ---------- */
section.about{padding:60px 0; border-top:1px solid var(--rule); background:var(--bg-raise)}
.about-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:38px}
@media(max-width:760px){ .about-grid{grid-template-columns:1fr} }
.about h2{font-size:clamp(1.4rem,4vw,1.9rem); margin-bottom:16px}
.about p{color:var(--text); max-width:60ch; margin:0 0 14px; font-size:.94rem}
.about p em{color:var(--amber); font-style:normal}
.callout{background:var(--bg-raise-2); border:1px solid var(--rule); border-radius:4px; overflow:hidden; font-size:.9rem}
.callout .eyebrow{margin:0 !important; padding:9px 16px; background:color-mix(in srgb, var(--amber) 12%, transparent); border-bottom:1px solid var(--rule); color:var(--amber)}
.callout .eyebrow::before{content:"// "}
.callout .line{display:flex; gap:12px; align-items:flex-start; padding:0 16px}
.callout .line:first-of-type{padding-top:16px} .callout .line:last-of-type{padding-bottom:16px}
.callout .line + .line{margin-top:12px}
.callout .k{font-size:.68rem; letter-spacing:.06em; color:var(--text-muted); white-space:nowrap; padding-top:3px}
.callout .v{color:var(--text)} .callout .v.hit{color:var(--green)}

/* ---------- article / prose pages ---------- */
article{padding:52px 0 20px}
.art-meta{display:flex; gap:10px; align-items:center; margin-bottom:20px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim)}
.art-meta .tag{color:var(--green)}
.art-meta .tag.shelved{color:var(--red)}
h1.title{font-size:clamp(1.9rem,5.5vw,3rem); line-height:1.12; letter-spacing:-.02em}
.art-dek{font-size:1.05rem; line-height:1.55; color:var(--text-muted); margin:18px 0 0; max-width:66ch}
.art-dek::before{content:"// "; color:var(--text-dim)}
.hr{height:1px; background:var(--rule); margin:34px 0}
.hr::before{content:""}
.body{font-size:1rem; line-height:1.8; color:var(--text)}
.body p{margin:0 0 1.4em}
.body h2{font-size:1.15rem; margin:2.2em 0 .7em; color:var(--amber); font-weight:700}
.body h2::before{content:"## "; color:var(--text-dim)}
.body em{color:var(--text); font-style:italic}
.body strong{color:var(--text); font-weight:700}
.body a{color:var(--green); text-underline-offset:3px}
.body .lede::first-letter{font-size:inherit; float:none; padding:0; color:inherit} /* no drop-cap in terminal mode */
.body .num{color:var(--amber); font-variant-numeric:tabular-nums}
.body ul{padding-left:1.4em} .body li{margin:.4em 0}
.body li::marker{content:"› "; color:var(--green)}
.pull{font-size:1.12rem; line-height:1.5; color:var(--amber); border-left:2px solid var(--amber); padding:6px 0 6px 18px; margin:32px 0}
.pull::before{content:"> "; color:var(--green)}
.article .callout{margin:34px 0; font-size:.9rem}
.endmark{margin:46px 0 10px; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.epitaph{font-size:.86rem; color:var(--text-muted)}
.epitaph::before{content:"# "; color:var(--green)}

/* ---------- footer ---------- */
footer{padding:40px 0 56px; border-top:1px solid var(--rule); color:var(--text-dim); font-size:.78rem}
footer .foot-top{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:baseline}
footer .tl{color:var(--green)}
footer .tl::before{content:"// "}
footer .disc{max-width:64ch; margin-top:16px; line-height:1.6}
footer .disc::before{content:"/* "; color:var(--text-dim)} footer .disc::after{content:" */"; color:var(--text-dim)}
footer a{color:var(--amber); text-decoration:none}
footer .prompt{color:var(--text-dim)}

/* ---------- two-version switch ---------- */
.version-switch{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:20px 0 0; padding:8px 10px; border:1px solid var(--rule); border-radius:5px; background:var(--bg-raise); font-size:.82rem}
.version-switch .lbl{color:var(--text-dim); padding:0 6px} .version-switch .lbl::before{content:"// "}
.version-switch a{text-decoration:none; padding:6px 12px; border-radius:3px; border:1px solid transparent}
.version-switch a:not([aria-current]){color:var(--amber); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:4px}
.version-switch a:not([aria-current]):hover{background:var(--stripe); border-color:var(--rule); text-decoration-style:solid}
.version-switch a[aria-current]{background:var(--amber); color:var(--bg); font-weight:700; border-color:var(--amber)}
.version-switch a[aria-current]::before{content:"● "; color:var(--bg)}
.wrap.tech{max-width:880px}

/* ---------- TL;DR box ---------- */
.tldr{border:1px solid var(--rule); border-left:3px solid var(--amber); border-radius:4px; background:var(--bg-raise); padding:18px 20px; margin:30px 0; font-size:.94rem}
.tldr .h{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:10px} .tldr .h::before{content:"// "}
.tldr ul{margin:0; padding-left:1.3em} .tldr li{margin:.4em 0}
.tldr b{color:var(--text)}

/* ---------- data tables ---------- */
.tbl-wrap{overflow-x:auto; margin:24px 0}
table.data{border-collapse:collapse; width:100%; font-size:.85rem; font-family:var(--mono)}
table.data caption{text-align:left; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); padding-bottom:8px} table.data caption::before{content:"// "}
table.data th,table.data td{border-bottom:1px solid var(--rule); padding:8px 12px; text-align:left; vertical-align:top}
table.data thead th{color:var(--text-muted); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--text-dim)}
table.data td.num,table.data th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
table.data td.num{color:var(--amber)}
table.data td.good{color:var(--green)} table.data td.bad{color:var(--red)}
table.data tbody tr:hover{background:var(--stripe)}
table.data tfoot td{border-top:2px solid var(--text-dim); font-weight:700; color:var(--text)}
table.data tfoot td.bad{color:var(--red)}

/* ---------- figures / charts ---------- */
figure.chart{margin:30px 0; border:1px solid var(--rule); border-radius:4px; background:var(--bg-raise); padding:18px 18px 14px}
figure.chart .cap-top{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px} figure.chart .cap-top::before{content:"// "}
figure.chart figcaption{font-size:.82rem; color:var(--text-muted); margin-top:10px; line-height:1.55}
figure.chart figcaption b{color:var(--text)}
.chart svg{width:100%; height:auto; display:block}
.c-axis{stroke:var(--text-dim); stroke-width:1; fill:none}
.c-line{fill:none; stroke:var(--amber); stroke-width:2}
.c-fill{fill:var(--amber); opacity:.08}
.c-ref{stroke:var(--green); stroke-width:1.2; stroke-dasharray:4 3; fill:none}
.c-dot{fill:var(--red)}
.c-lbl{fill:var(--text-muted); font-family:var(--mono); font-size:9px}
.c-lbl.mid{text-anchor:middle} .c-lbl.end{text-anchor:end}
.c-lbl.hi{fill:var(--text)} .c-lbl.ref{fill:var(--green)} .c-lbl.peak{fill:var(--red)}

/* ---------- method / reproduce ---------- */
.method{border:1px dashed var(--rule); border-radius:4px; padding:18px 20px; margin:30px 0; font-size:.86rem; background:var(--stripe)}
.method .h{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px} .method .h::before{content:"$ "}
.method ol{margin:0; padding-left:1.4em} .method li{margin:.45em 0}
.method code{color:var(--amber)}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:reduce){ .brand::after,.hero .wordmark .cursor{animation:none} }