/* One stylesheet for the whole site, so the library and the console are
   visibly the same place.

   Light by default and dark only when asked. Following the system setting meant
   the page turned black on a machine that happens to be in dark mode, which
   reads as a decision nobody made. The toggle in the header is the decision. */

:root{
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --paper:#FBFAF7; --panel:#F3F1EB; --sunk:#EBE8E0;
  --ink:#1C1B18; --muted:#6E6A60;
  --rule:rgba(28,27,24,.11); --rule2:rgba(28,27,24,.22);
  --accent:#1F5F54; --warn:#8C3A20;
  --shadow:0 1px 2px rgba(28,27,24,.05);
}
:root[data-theme="dark"]{
  --paper:#16181B; --panel:#1E2125; --sunk:#121417;
  --ink:#E4E2DC; --muted:#9A968C;
  --rule:rgba(228,226,220,.13); --rule2:rgba(228,226,220,.26);
  --accent:#5FBFAE; --warn:#DE8C6C;
  --shadow:none;
}

*{box-sizing:border-box}
/* A class that sets display beats the browser's own rule for [hidden], so a
   hidden element stays visible. This has to outrank both. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* ---- header ---- */
.top{border-bottom:1px solid var(--rule)}
.top .in{max-width:820px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; gap:26px; height:66px}
.brand{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; text-decoration:none; color:var(--muted)}
.brand:hover{color:var(--ink)}
.top nav{margin-left:auto; display:flex; gap:24px; align-items:center}
.top nav a{font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--muted); text-decoration:none; padding:3px 0;
  border-bottom:1px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink); border-bottom-color:var(--accent)}
.theme{background:none; border:0; padding:4px; margin-left:2px; cursor:pointer;
  color:var(--muted); font-size:13px; line-height:1; border-radius:4px}
.theme:hover{color:var(--ink); background:var(--panel)}

main{max-width:820px; margin:0 auto; padding:56px 28px 110px}
.lede{font-size:21px; line-height:1.5; margin:0 0 12px; max-width:33em;
  letter-spacing:-.005em}
.stats{font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); margin:0}

/* ---- the library ---- */
.eps{list-style:none; margin:44px 0 0; padding:0}
.ep{padding:26px 0; border-top:1px solid var(--rule)}
.eps .ep:last-child{border-bottom:1px solid var(--rule)}
.ep .head{display:flex; align-items:baseline; gap:18px}
.ep .t{font-size:25px; line-height:1.22; text-decoration:none; letter-spacing:-.012em}
.ep .t:hover{color:var(--accent)}
.ep .dur{margin-left:auto; font-family:var(--mono); font-size:11px;
  color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.ep .m{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:8px;
  letter-spacing:.02em}
.ep .m a{color:var(--muted); text-underline-offset:3px}
.ep .m a:hover{color:var(--accent)}
.ch{list-style:none; margin:15px 0 0; padding:0; counter-reset:c;
  display:flex; flex-wrap:wrap; gap:6px 7px}
.ch li{counter-increment:c; max-width:100%;
  font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--muted);
  background:var(--panel); border:1px solid var(--rule); border-radius:999px;
  padding:3px 11px}
.ch li::before{content:counter(c); margin-right:7px; color:var(--accent); opacity:.7}

/* ---- the console ---- */
textarea,input{width:100%; font-family:var(--serif); font-size:17px; color:var(--ink);
  background:var(--panel); border:1px solid var(--rule2); border-radius:8px;
  padding:15px 17px; box-shadow:var(--shadow)}
textarea{min-height:150px; line-height:1.5; resize:vertical; display:block}
input{font-family:var(--mono); font-size:13px}
textarea::placeholder,input::placeholder{color:var(--muted); opacity:.75}
textarea:focus,input:focus{outline:none; border-color:var(--accent)}
.row{display:flex; align-items:center; gap:16px; margin-top:16px}
button{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; cursor:pointer;
  background:var(--accent); color:var(--paper); border:1px solid transparent;
  border-radius:7px; padding:11px 22px}
button:hover{filter:brightness(1.1)}
button:disabled{opacity:.4; cursor:default; filter:none}
button.plain{background:none; color:var(--muted); padding:11px 0}
button.plain:hover{color:var(--ink); filter:none}
.note{font-family:var(--mono); font-size:11px; color:var(--muted)}
.note.bad{color:var(--warn)}

/* The gate sits above the box you type in; without this its button and that box
   read as one control. */
#gate{margin-bottom:40px; padding-bottom:36px; border-bottom:1px solid var(--rule)}
#gate .note{margin:0 0 14px}

.runs{list-style:none; margin:44px 0 0; padding:0}
.run{padding:22px 0; border-top:1px solid var(--rule); display:flex; gap:18px}
.runs .run:last-child{border-bottom:1px solid var(--rule)}
.run .body{flex:1; min-width:0}
.run .p{font-size:17px; line-height:1.45; overflow-wrap:anywhere}
.run .m{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:7px}
.run .m a{color:var(--accent)}
.state{display:inline-block; min-width:62px; letter-spacing:.05em}
.state.running{color:var(--accent)}
.state.failed{color:var(--warn)}
.x{font-family:var(--mono); font-size:11px; color:var(--muted); background:none;
  border:0; padding:5px 4px; cursor:pointer; align-self:flex-start;
  min-width:56px; text-align:right}
.x:hover{color:var(--warn); filter:none}
.empty{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:44px}

/* ---- one run, in detail ---- */
.back{font-family:var(--mono); font-size:11px; margin:0 0 26px}
.back a{color:var(--muted); text-decoration:none}
.back a:hover{color:var(--accent)}
.ledger{width:100%; max-width:520px; border-collapse:collapse; margin:34px 0 0}
.ledger td{font-family:var(--mono); font-size:11.5px; color:var(--muted);
  padding:10px 0; border-bottom:1px solid var(--rule)}
.ledger .took{text-align:right; font-variant-numeric:tabular-nums}
.ledger tr.now td{color:var(--ink)}
.ledger tr.now .took{color:var(--accent)}
.ledger tr.now .step::after{content:"…"}   /* on the name, not after the hint */
.ledger .usual{display:block; color:var(--muted); opacity:.75; margin-top:3px}
.ledger tfoot td{border-bottom:0; padding-top:14px; color:var(--ink)}
.listen{font-family:var(--mono); font-size:12px; color:var(--accent);
  text-decoration:none; display:inline-block; margin-top:26px}
.listen:hover{text-decoration:underline; text-underline-offset:4px}
.run .p{text-decoration:none; display:block}
a.p:hover{color:var(--accent)}

/* Progress while it runs, and the timing report once it has. */
.steps{list-style:none; margin:14px 0 0; padding:0; max-width:360px}
.steps li{display:flex; gap:14px; font-family:var(--mono); font-size:10.5px;
  color:var(--muted); padding:4px 0; border-bottom:1px dotted var(--rule)}
.steps li:last-child{border-bottom:0}
.steps li .took{margin-left:auto; font-variant-numeric:tabular-nums}
.steps li.now{color:var(--ink)}
.steps li.now .took{color:var(--accent)}
.steps li.now span:first-child::after{content:"…"}

@media (max-width:640px){
  .top .in{padding:0 18px; gap:14px; height:58px}
  .top nav{gap:16px}
  main{padding:36px 18px 80px}
  body{font-size:16px}
  .lede{font-size:18px}
  .ep .t{font-size:20px}
  .ep .head{flex-wrap:wrap; gap:4px 14px}
  .ep .dur{margin-left:0}
}