/* ==========================================================================
   SODL — public site

   ONE THEME, ON PURPOSE: oat cream. Light, never white, and never dark.
   The site does NOT follow prefers-color-scheme — a deliberate single-look
   commitment, not an oversight. (The product's own `sodl report` page still
   follows the reader's theme; that is a different artifact with a different
   job. This is the welcome, and it stays warm and quiet in every context.)

   Minimal by construction: no shadows, no fills that aren't doing work, no
   dark slabs. Structure is carried by hairline rules and space alone.
   Command blocks are a deeper oat tint rather than the conventional dark
   terminal, so nothing on the page reads heavy.

   No web fonts, no third-party requests, no build step.
   ========================================================================== */

:root {
  /* oat neutrals — cream, never white */
  --bg:#f5f0e5; --sheet:#fdfbf5; --ink:#37322a; --mut:#6a6255; --faint:#706a5d;
  --line:#e7dfcd; --hair:#efe8d9; --chipbg:#f1ebdd; --msgbg:#f2ede1;
  /* accent — dusty slate, the one cool note */
  --link:#546b87; --linkh:#3e5069;
  /* status — sage / terracotta / honey / mauve. Status only, never decoration */
  --pass:#527255; --fail:#ab5038; --skip:#ded6c4; --ns:#736581; --warn:#9d7a2a;
  --passbg:#edf2e8; --passbr:#d3dfcb;
  --failbg:#faece6; --failbr:#ecd3c6; --failink:#95452e;
  --warnbg:#f7efd9; --warnbr:#e3d2a3; --warnink:#75601f;
  /* command blocks — a deeper oat, not a dark terminal */
  --termbg:#f2ede1; --termink:#3b352c; --termmut:#70695d; --termline:#e5ddca;
  /* minimal: structure comes from hairlines and space, not from elevation */
  --shadow:none;
  --shadow-lift:none;
  --measure:1180px; --prose:730px;
}

* { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; animation:none !important; }
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.62 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- primitives ---------------------------------------------------- */

a { color:var(--link); text-decoration:none; }
a:hover { color:var(--linkh); text-decoration:underline; text-underline-offset:2px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:2px solid var(--link); outline-offset:2px; border-radius:3px;
}

h1,h2,h3,h4 { margin:0; font-weight:640; letter-spacing:-.011em; line-height:1.25; }
h1 { font-size:40px; letter-spacing:-.022em; }
h2 { font-size:25px; }
h3 { font-size:17px; }
p { margin:0 0 14px; }
ul,ol { margin:0 0 14px; padding-left:20px; }
li { margin:0 0 6px; }
strong { font-weight:640; }
hr { border:0; border-top:1px solid var(--hair); margin:0; }

.mono, code, kbd, pre {
  font-family:"Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
}
code { font-size:.875em; background:var(--chipbg); border:1px solid var(--hair);
       border-radius:4px; padding:.08em .34em; }
pre code { background:none; border:0; padding:0; font-size:inherit; }

.eyebrow {
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin:0 0 10px;
}
.lede { font-size:18px; line-height:1.6; color:var(--mut); }
.muted { color:var(--mut); }
.faint { color:var(--faint); }
.small { font-size:13px; }
.tiny { font-size:11.5px; }
.center { text-align:center; }
.nowrap { white-space:nowrap; }

/* ---------- layout -------------------------------------------------------- */

.wrap { max-width:var(--measure); margin:0 auto; padding:0 28px; }
.prose { max-width:var(--prose); }
.section { padding:78px 0; }
.section + .section { border-top:1px solid var(--hair); }
.section-tight { padding:52px 0; }
.stack > * + * { margin-top:14px; }

.grid { display:grid; gap:18px; }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start; }
.split-wide { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
/* hero: the scenario snippet needs the wider half so no line clips */
.split-hero { grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:40px; }
.hero-code pre { font-size:12.5px; }
/* rows where the terminal is the subject: give it the wider half */
.split-code { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
/* a command block that must never wrap or clip runs the full measure */
.stackblocks > * + * { margin-top:16px; }

/* ---------- header -------------------------------------------------------- */

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sheet); color:var(--ink); padding:10px 16px;
  border:1px solid var(--line); border-radius:0 0 8px 0;
}
.skip-link:focus { left:0; }

header.site {
  position:sticky; top:0; z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
header.site .wrap { display:flex; align-items:center; gap:26px; height:58px; }

.brand { display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:640;
         letter-spacing:.02em; font-size:15.5px; }
.brand:hover { text-decoration:none; color:var(--ink); }
.brand svg { display:block; }

nav.site { margin-left:auto; display:flex; align-items:center; gap:22px; }
nav.site a { color:var(--mut); font-size:13.5px; }
nav.site a:hover { color:var(--ink); text-decoration:none; }
nav.site a[aria-current="page"] { color:var(--ink); font-weight:600; }

/* ---------- buttons ------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; line-height:1;
  padding:9px 16px; border-radius:8px;
  border:1px solid var(--line); background:var(--sheet); color:var(--ink);
  transition:border-color .12s ease, background .12s ease, color .12s ease;
  cursor:pointer;
}
.btn:hover { text-decoration:none; border-color:var(--faint); color:var(--ink); }
/* the accent, not near-black: an espresso slab reads severe on warm paper */
.btn-primary { background:var(--link); border-color:var(--link); color:var(--sheet); }
.btn-primary:hover { background:var(--linkh); border-color:var(--linkh); color:var(--sheet); }
.btn-sm { padding:6px 11px; font-size:12.5px; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ---------- cards & sheets ------------------------------------------------ */

.card {
  background:var(--sheet); border:1px solid var(--line);
  border-radius:12px; padding:22px 24px;
}
.card h3 { margin-bottom:7px; }
.card p:last-child { margin-bottom:0; }
.card-flat { background:transparent; }
.card-quiet { background:transparent; border-style:dashed; }

.sheet {
  background:var(--sheet); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
}

.note {
  border-left:3px solid var(--line); padding:2px 0 2px 16px;
  color:var(--mut); font-size:14px;
}
.note-accent { border-left-color:var(--link); }

.callout {
  background:var(--chipbg); border:1px solid var(--hair);
  border-radius:11px; padding:17px 19px; font-size:14px; color:var(--mut);
}
.callout strong { color:var(--ink); }

/* ---------- chips & badges ------------------------------------------------ */

.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--chipbg); border:1px solid var(--line); border-radius:20px;
  padding:3px 10px; font-size:11.5px; color:var(--mut); white-space:nowrap;
}
.chip.pass { background:var(--passbg); border-color:var(--passbr); color:var(--pass); }
.chip.warn { background:var(--warnbg); border-color:var(--warnbr); color:var(--warnink); }
.chip.fail { background:var(--failbg); border-color:var(--failbr); color:var(--failink); }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot.p{background:var(--pass)} .dot.f{background:var(--fail)}
.dot.s{background:var(--skip)} .dot.n{background:var(--ns)}

.st { font-size:10.5px; font-weight:680; letter-spacing:.04em; }
.st.p{color:var(--pass)} .st.f{color:var(--fail)}
.st.s{color:var(--mut)} .st.n{color:var(--ns)}

/* ---------- terminal blocks ----------------------------------------------- */

.term {
  background:var(--termbg); color:var(--termink);
  border:1px solid var(--termline); border-radius:12px;
  overflow:hidden;
}
.term-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--termline);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--termmut);
}
/* a filename is not a label — never uppercase a path */
.term-bar .file {
  text-transform:none; letter-spacing:0; font-size:11px;
  font-family:"Cascadia Code", Consolas, ui-monospace, monospace;
}
.term-bar .copy {
  margin-left:auto; background:none; border:1px solid var(--termline); color:var(--termmut);
  border-radius:5px; padding:2px 8px; font-size:10px; letter-spacing:.06em; cursor:pointer;
  font-family:inherit; text-transform:uppercase;
}
.term-bar .copy:hover { color:var(--termink); border-color:var(--termmut); }
.term pre {
  margin:0; padding:15px 17px; overflow-x:auto;
  font-size:12px; line-height:1.7; white-space:pre;
}
.term .c  { color:var(--termmut); }         /* comment / prompt chrome    */
.term .k  { color:var(--termink); font-weight:650; }  /* the command you type */
.term .s  { color:#5a6f45; }                /* string / path — olive      */
.term .ok { color:var(--pass); font-weight:650; }
.term .no { color:var(--fail); font-weight:650; }
.term .wn { color:var(--warnink); font-weight:650; }
.term .vi { color:var(--ns); font-weight:650; }

/* the scenario-source block sits on the sheet; command blocks on deeper oat */
.code {
  background:var(--sheet); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
}
.code .term-bar { border-bottom-color:var(--hair); color:var(--faint); }
.code .term-bar .copy { border-color:var(--line); color:var(--faint); }
.code .term-bar .copy:hover { color:var(--ink); border-color:var(--faint); }
.code pre { margin:0; padding:16px 18px; overflow-x:auto; font-size:13px; line-height:1.7; }
.code .kw { color:#7d5578; font-weight:650; }
.code .op { color:var(--link); }
.code .str { color:#4f7454; }
.code .cm { color:var(--faint); font-style:italic; }
.code .en { color:#8c5f1f; font-weight:650; }

/* ---------- ledger table -------------------------------------------------- */

/* a wide table scrolls inside itself — the page body never scrolls sideways */
.tablewrap { overflow-x:auto; }
.tablewrap .ledger { min-width:560px; }

.ledger { width:100%; border-collapse:collapse; font-size:14px; }
.ledger th {
  text-align:left; font-weight:600; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
  padding:0 14px 8px 0; border-bottom:1px solid var(--line);
}
.ledger td { padding:11px 14px 11px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
.ledger tr:last-child td { border-bottom:0; }
.ledger td:first-child { white-space:nowrap; }
.ledger .num { color:var(--faint); font-size:11.5px; }

/* ---------- numbered capability blocks ------------------------------------ */

.cap { display:grid; grid-template-columns:34px minmax(0,1fr); gap:16px; align-items:start; }
.cap .n {
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); background:var(--sheet);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:680; color:var(--mut);
}
.cap h3 { margin-bottom:5px; }
.cap p { margin-bottom:0; font-size:14px; color:var(--mut); }
.cap .aside { display:block; margin-top:6px; font-size:12.5px; color:var(--faint); font-style:italic; }

/* ---------- figures ------------------------------------------------------- */

/* The site deliberately carries NO product screenshots -- see
   brand/PICTURE-BRIEF.md section 0. If that
   changes, the .frame placeholder and .shot image styles were removed in the
   same commit that removed the images; git has them. */
figure { margin:0; }
figcaption { margin-top:9px; font-size:12px; color:var(--faint); }

/* ---------- report mock (structure only, no fabricated data) -------------- */

.mock { font-size:12.5px; }
.mock .mock-head { padding:16px 20px 14px; border-bottom:1px solid var(--hair); }
.mock .mock-body { padding:16px 20px 18px; }
.bar { display:flex; height:9px; border-radius:5px; overflow:hidden; margin:12px 0 8px; }
.bar div { height:100%; }
.bar .p{background:var(--pass)} .bar .f{background:var(--fail)}
.bar .s{background:var(--skip)} .bar .n{background:var(--ns)}
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--mut); align-items:center; }
.legend i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; }
.rowline {
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:6px 0; border-bottom:1px dashed var(--hair); font-size:12.5px;
}
.rowline:last-child { border-bottom:0; }
.covbar { height:7px; background:var(--hair); border-radius:4px; overflow:hidden; flex:1; min-width:80px; }
.covbar div { height:100%; background:var(--link); }
.bnd { font-size:11.5px; color:var(--faint); font-style:italic;
       border-top:1px solid var(--hair); margin-top:14px; padding-top:10px; }

/* ---------- q & a (the challenge) ----------------------------------------- */

.qa { border-top:1px solid var(--hair); padding:18px 0; display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:baseline; }
.qa:last-child { border-bottom:1px solid var(--hair); }
.qa .q { font-size:16px; font-weight:600; }
.qa .a { font-size:14px; color:var(--mut); }
.qa .a strong { color:var(--ink); }

/* ---------- steps --------------------------------------------------------- */

.step { display:grid; grid-template-columns:30px minmax(0,1fr); gap:16px; }
.step + .step { margin-top:26px; padding-top:26px; border-top:1px solid var(--hair); }
.step .n {
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:680;
}
.step h3 { margin-bottom:6px; }

/* ---------- pipeline diagram (CSS, so it reflows and follows the theme) --- */

.pipe { display:flex; align-items:stretch; gap:0; flex-wrap:nowrap; }
.pipe-box {
  flex:1 1 0; min-width:0;
  background:var(--sheet); border:1px solid var(--line); border-radius:11px;
  padding:16px 17px;
}
.pipe-box.src { border-style:dashed; background:transparent; }
.pipe-box .t { font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
               color:var(--faint); font-weight:600; margin-bottom:6px; }
.pipe-box .h { font-size:14px; font-weight:640; margin-bottom:5px; }
.pipe-box .d { font-size:12px; color:var(--mut); line-height:1.5; }
.pipe-arrow {
  flex:0 0 96px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; padding:0 6px;
}
.pipe-arrow .lb {
  font-family:"Cascadia Code", Consolas, ui-monospace, monospace;
  font-size:10px; color:var(--faint); text-align:center; line-height:1.3;
}
.pipe-arrow .ar { position:relative; width:100%; height:1px; background:var(--line); }
.pipe-arrow .ar::after {
  content:""; position:absolute; right:0; top:-3.5px;
  border-left:7px solid var(--line);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.pipe-note {
  margin-top:14px; font-size:12.5px; color:var(--faint); text-align:center;
  font-style:italic;
}

@media (max-width: 900px) {
  .pipe { flex-direction:column; }
  .pipe-arrow { flex:0 0 auto; padding:10px 0; width:100%; flex-direction:row; gap:10px; }
  .pipe-arrow .ar { width:34px; transform:rotate(90deg); flex:0 0 34px; }
  .pipe-arrow .lb { text-align:left; }
}

/* ---------- gate diagram (two-outcome) ------------------------------------ */

.gate { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
.gate .g {
  border:1px solid var(--line); border-radius:11px; padding:15px 17px; background:var(--sheet);
}
.gate .g.ok { border-left:3px solid var(--pass); }
.gate .g.no { border-left:3px solid var(--fail); }
.gate .g .v { font-family:"Cascadia Code", Consolas, monospace; font-size:12.5px;
              font-weight:700; letter-spacing:.06em; margin-bottom:6px; }
.gate .g.ok .v { color:var(--pass); }
.gate .g.no .v { color:var(--fail); }
.gate .g p { font-size:13px; color:var(--mut); margin:0; }
@media (max-width: 900px) { .gate { grid-template-columns:minmax(0,1fr); } }

/* ---------- two-list comparison ------------------------------------------- */

.lists { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
.lists ul { list-style:none; padding:0; margin:0; }
.lists li { padding:9px 0 9px 26px; border-bottom:1px solid var(--hair);
            font-size:14px; position:relative; margin:0; }
.lists li:last-child { border-bottom:0; }
.lists li::before { position:absolute; left:0; top:9px; font-size:13px; }
.lists .yes li::before { content:"✓"; color:var(--pass); }
.lists .no  li::before { content:"—"; color:var(--faint); }
@media (max-width: 900px) { .lists { grid-template-columns:minmax(0,1fr); } }

/* ---------- footer -------------------------------------------------------- */

footer.site { border-top:1px solid var(--line); padding:40px 0 46px; margin-top:16px; }
footer.site .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; }
footer.site h4 { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                 color:var(--faint); margin-bottom:11px; font-weight:600; }
footer.site ul { list-style:none; padding:0; margin:0; }
footer.site li { margin-bottom:7px; font-size:13.5px; }
footer.site a { color:var(--mut); }
footer.site a:hover { color:var(--ink); }
.colophon { margin-top:34px; padding-top:18px; border-top:1px solid var(--hair);
            font-size:11.5px; color:var(--faint); display:flex; gap:18px;
            flex-wrap:wrap; justify-content:space-between; }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1200px) { .split-hero { grid-template-columns:minmax(0,1fr); gap:28px; } }
@media (max-width: 1080px) { .split-code { grid-template-columns:minmax(0,1fr); } }

@media (max-width: 900px) {
  /* the install one-liner is the most important string on the site — on a
     phone it wraps rather than hiding itself behind a horizontal scroll.
     Only opted-in blocks wrap: aligned CLI output must keep its columns. */
  .wrapsm pre { white-space:pre-wrap; overflow-wrap:anywhere; }
  .split, .split-wide, .g3, .g2, .qa { grid-template-columns:minmax(0,1fr); }
  .qa { gap:8px; }
  footer.site .cols { grid-template-columns:1fr 1fr; }
  h1 { font-size:32px; }
  h2 { font-size:22px; }
  .section { padding:48px 0; }
}
@media (max-width: 620px) {
  .wrap { padding:0 18px; }
  header.site .wrap { gap:14px; height:54px; }
  nav.site { gap:14px; }
  nav.site a.hide-sm { display:none; }
  h1 { font-size:28px; }
  .lede { font-size:16px; }
  footer.site .cols { grid-template-columns:1fr; }
}

/* ---------- print --------------------------------------------------------- */

@media print {
  header.site, footer.site, .btn, .term-bar .copy { display:none; }
  body { background:#fff; color:#000; }
  .section { padding:18px 0; }
}