/* BuildLab (buildlab.html, app/buildlab-item.html). The AI News world (app.css, news.css) and Workflows' run frame,
   file tree, sheets and viewer (workflows.css). Its own parts, from Spoorthi's pick (A · The thread, with proof on
   every step, 2026-09-27): the thread of steps in Home's grammar, a step's own page with our run at that step, code
   blocks with Copy, the guide's reading type, the tick and the peach progress bar. No verdicts, no kickers, no
   coloured side stripes, no shadows on cards. Terracotta: the filled line, done stops, the next ring, one button. */
:root { --peach: #DFA78F; --peach-soft: rgba(223, 167, 143, .22); }
:root[data-theme="dark"] { --peach-soft: rgba(223, 167, 143, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --peach-soft: rgba(223, 167, 143, .14); } }

/* every column shrinks to the screen: long code lines and file names scroll or clip inside their own box, never the page */
.bl-build, .bl-sec, .bl-hd, .bl-md, .bl-step, .bl-after, .bl-repos, .bl-dl, .bl-list, .bl-proofs, .bl-tickrow, .bl-stop .bd { grid-template-columns: minmax(0, 1fr); }

/* ---------- small parts ---------- */
.bl-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.bl-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bl-pill .ico { width: 14px; height: 14px; }
.bl-need { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.bl-need .ico { width: 15px; height: 15px; flex-shrink: 0; }
.bl-progress { display: grid; gap: 7px; }
.bl-bar { display: block; height: 6px; border-radius: 999px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.bl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--peach); transition: width .4s cubic-bezier(.16, 1, .3, 1); }
.bl-progress [data-prog-text] { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bl-locked { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.bl-locked .ico { width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- the list ---------- */
.bl-list { display: grid; gap: 14px; margin-top: 18px; }
.bl-card { display: grid; border-radius: var(--r-lg); background: var(--sheet); box-shadow: 0 0 0 1px var(--line); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
.bl-card:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.bl-card:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.bl-card .bd { display: grid; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.bl-card h2 { margin: 0; font: 600 26px/1.12 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.bl-card .promise { display: none; margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); max-width: 62ch; text-wrap: pretty; }

/* ---------- one build ---------- */
.bl-item-col .st-bar { margin-bottom: 4px; }
.bl-item-col .back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 62vw; }
.bl-build { display: grid; gap: 26px; }
.bl-build > .wf-run { margin-top: 8px; }
.bl-hd { display: grid; gap: 12px; }
.bl-hd h1 { margin: 0; font: 600 30px/1.1 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.bl-hd .promise { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.bl-sec { display: grid; gap: 14px; min-width: 0; }
.bl-sec > h2, .bl-after > h2 { margin: 0; font: 600 28px/1.12 var(--sans); letter-spacing: -.01em; }
.bl-dl { display: grid; gap: 10px; }
.bl-dl .btn { width: 100%; }
.bl-code-sec .wf-gate .gate-btns { display: grid; gap: 10px; }

/* the two repos: a folder each, opening to its files */
.bl-repos { display: grid; gap: 8px; }
.bl-repo { border-radius: 14px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.bl-repo > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; cursor: pointer; list-style: none; border-radius: 14px; }
.bl-repo > summary::-webkit-details-marker { display: none; }
.bl-repo > summary > .ico { width: 17px; height: 17px; color: var(--accent-ink); flex-shrink: 0; }
/* the folder name shortens from its shared start, so "…starter/" and "…finished/" always stay readable */
.bl-repo > summary code { flex: 1; min-width: 0; display: flex; font: 400 13px/1.3 var(--mono); color: var(--ink); white-space: nowrap; }
.bl-repo > summary code .sl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bl-repo > summary code .rp { flex-shrink: 0; }
.bl-repo > summary small { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.bl-repo > summary .chev { width: 16px; height: 16px; color: var(--faint); transition: transform .2s; }
.bl-repo[open] > summary .chev { transform: rotate(90deg); }
.bl-repo .wf-files { border-radius: 0 0 14px 14px; box-shadow: none; border-top: 1px solid var(--line); }

/* ---------- the thread: each step a stop on one line (Home's grammar) ---------- */
.bl-thread { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.bl-stop { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 30px; }
.bl-stop:last-child { padding-bottom: 0; }
.bl-stop::before { content: ""; position: absolute; left: 19.5px; top: 40px; bottom: 0; width: 1px; background: var(--line-strong); }
.bl-stop:last-child::before { display: none; }
.bl-stop.run::before { left: 19px; width: 2px; background: var(--accent); }
.bl-node { position: relative; z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 5px var(--ground); font: 600 18px/1.1 var(--sans); color: var(--faint); text-decoration: none; transition: background .3s, color .3s; }
.bl-node .ico { width: 18px; height: 18px; }
.bl-stop.done .bl-node { background: var(--peach-soft); color: var(--accent-ink); box-shadow: 0 0 0 5px var(--ground); }
.bl-stop.done.inrun .bl-node { background: var(--accent); color: var(--on-accent); }
.bl-stop.next .bl-node { color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px var(--ground); }
.bl-stop .bd { display: grid; gap: 6px; padding-top: 4px; min-width: 0; }
.bl-stop h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.bl-stop h3 a { display: inline-flex; align-items: center; min-height: 32px; font: 600 22px/1.18 var(--sans); letter-spacing: -.01em; color: var(--ink); text-decoration: none; text-wrap: balance; }
.bl-stop h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.bl-stop h3 small { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--faint); white-space: nowrap; }
.bl-stop h3 small .ico { width: 14px; height: 14px; }
.bl-stop .goal { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.bl-stop .goal code { font: 500 .86em var(--mono); background: var(--sand-2); padding: 1px 5px; border-radius: 5px; }
.bl-continue { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; padding: 0 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--accent-ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bl-continue .ico { width: 17px; height: 17px; }
.bl-continue:hover { box-shadow: inset 0 0 0 1px var(--accent); }

/* after you've built it: each page opens in place */
.bl-after { display: grid; gap: 10px; }
.bl-pages { display: grid; border-top: 1px solid var(--line); }
.bl-pagerow { border-bottom: 1px solid var(--line); }
.bl-pagerow > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; cursor: pointer; list-style: none; }
.bl-pagerow > summary::-webkit-details-marker { display: none; }
.bl-pagerow > summary h3 { margin: 0; font: 500 16.5px/1.35 var(--sans); color: var(--ink); }
.bl-pagerow > summary .ico { width: 17px; height: 17px; color: var(--faint); transition: transform .2s; flex-shrink: 0; }
.bl-pagerow[open] > summary .ico.chev { transform: rotate(90deg); }
.bl-pagerow > .bl-md, .bl-pagerow > .bl-locked { padding: 2px 0 26px; }

/* ---------- a step's own page ---------- */
.bl-step { display: grid; gap: 18px; max-width: 760px; }
.bl-mini { display: flex; align-items: center; margin: 6px 0 2px; }
.bl-mini a { position: relative; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12.5px; font-weight: 500; color: var(--faint); text-decoration: none; }
.bl-mini a .ico { width: 14px; height: 14px; }
.bl-mini a.done { background: var(--peach-soft); color: var(--accent-ink); box-shadow: none; }
.bl-mini a.done.inrun { background: var(--accent); color: var(--on-accent); }
.bl-mini a[aria-current="step"] { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--accent); }
.bl-mini a[aria-current="step"]:not(.done) { color: var(--accent-ink); }
.bl-mini i { flex: 1; height: 1px; min-width: 6px; background: var(--line-strong); }
.bl-mini i.run { height: 2px; background: var(--accent); }
.bl-step .meta { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--faint); }
.bl-step .meta .ico { width: 15px; height: 15px; }
.bl-step h1 { margin: -6px 0 0; font: 600 36px/1.1 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.bl-proofs { display: grid; gap: 14px; }
.bl-proof { display: grid; gap: 8px; margin: 0; }
.bl-proof button { display: block; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--code-bg); box-shadow: 0 0 0 1px var(--line); cursor: zoom-in; }
.bl-proof button:focus-visible { outline-offset: 3px; }
.bl-tickrow { display: grid; gap: 12px; margin-top: 6px; padding-top: 22px; border-top: 1px solid var(--line); }
.bl-tick { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; border-radius: 16px; background: var(--accent); color: var(--on-accent); font: 600 16px/1.2 var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.bl-tick:hover { background: var(--accent-hover); }
.bl-tick .ring { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; flex-shrink: 0; }
.bl-tick .ico { width: 20px; height: 20px; }
.bl-tick[aria-pressed="true"] { background: var(--ok-soft); color: var(--ok); }
.bl-tick[aria-pressed="true"]:hover { background: var(--ok-soft); }
.bl-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 16px; border-radius: 16px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; }
.bl-next span { display: grid; gap: 2px; min-width: 0; }
.bl-next small { font-size: 12.5px; color: var(--faint); }
.bl-next b { font-size: 16px; font-weight: 500; }
.bl-next > .ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.bl-next:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* ---------- the guide's text ---------- */
.bl-md { display: grid; gap: 14px; min-width: 0; font-size: 17px; line-height: 1.65; color: var(--ink); }
.bl-md > * { margin: 0; max-width: 68ch; }
.bl-md > .bl-code, .bl-md > .bl-table { max-width: none; }
.bl-md h2 { margin-top: 16px; font: 600 26px/1.15 var(--sans); letter-spacing: -.01em; }
.bl-md h2:first-child, .bl-md h3:first-child { margin-top: 0; }
.bl-md h3 { margin-top: 14px; font: 600 18px/1.35 var(--sans); }
.bl-md h4 { margin-top: 8px; font: 600 16px/1.35 var(--sans); }
.bl-md ul, .bl-md ol { padding-left: 22px; display: grid; gap: 8px; }
.bl-md li::marker { color: var(--faint); }
.bl-md b { font-weight: 600; }
.bl-md code { font: 500 .86em/1.4 var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--sand-2); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.bl-md a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.bl-md blockquote { padding: 12px 16px; border-radius: 12px; background: var(--sand-2); font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.bl-md blockquote p { margin: 0; }
.bl-code { position: relative; min-width: 0; padding-top: 44px; border-radius: 14px; background: var(--code-bg); overflow: hidden; }
.bl-code::before { content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 1px; background: rgba(239, 230, 223, .08); }
.bl-code pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; font: 400 13px/1.6 var(--mono); color: var(--code-ink); white-space: pre; tab-size: 2; scrollbar-color: rgba(239, 230, 223, .25) transparent; }
.bl-code pre code { font: inherit; padding: 0; background: none; box-shadow: none; overflow-wrap: normal; }
.bl-copy { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(239, 230, 223, .1); color: var(--code-ink); font: 500 13px/1 var(--sans); cursor: pointer; }
.bl-copy:hover { background: rgba(239, 230, 223, .18); }
.bl-copy:focus-visible { outline: 2px solid var(--code-ink); outline-offset: 2px; }
.bl-table { overflow-x: auto; border-radius: 14px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.bl-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.bl-table th, .bl-table td { padding: 12px 14px; text-align: left; vertical-align: top; }
.bl-table th { font-size: 13px; font-weight: 600; color: var(--faint); border-bottom: 1px solid var(--line); }
.bl-table tr + tr td { border-top: 1px solid var(--line); }
.bl-table td:first-child { min-width: 108px; font-weight: 600; }

/* members' builds, and the gate, in Workflows' parts */
.bl-gate h2 .ico { color: var(--muted); }

@media (min-width: 761px) {
  .bl-hd h1 { font-size: 40px; }
  .bl-step h1 { font-size: 40px; }
  .bl-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a computer: the list as rows; the build's code sits in a side column beside the thread */
@media (min-width: 1180px) {
  .bl-app .bl-col { max-width: 1080px; }
  .bl-card { grid-template-columns: 420px minmax(0, 1fr); align-items: center; }
  .bl-card > .wf-shot { height: 100%; }
  .bl-card .bd { border-top: 0; border-left: 1px solid var(--line); padding: 28px 32px; }
  .bl-card h2 { font-size: 32px; }
  .bl-card .promise { display: block; }
  .bl-app .bl-item-col { max-width: 1080px; }
  .bl-build { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; align-items: start; }
  .bl-code-sec .btn { padding-inline: 14px; font-size: 15px; white-space: nowrap; }
  .bl-build > * { grid-column: 1; }
  .bl-build > .bl-code-sec { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: 76px; padding: 22px; border-radius: var(--r-lg); background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
  .bl-build > .bl-code-sec > h2 { font-size: 24px; }
  .bl-code-sec .bl-dl { grid-template-columns: 1fr; }
  .bl-code-sec .bl-repo { box-shadow: 0 0 0 1px var(--line); background: var(--ground); }
  .bl-hd h1 { font-size: 44px; }
  .bl-stop h3 a { font-size: 26px; }
  .bl-step { margin: 0; }
}
@media (max-width: 760px) {
  .bl-app .main { padding-bottom: 110px; }
  .bl-md { font-size: 16.5px; }
  /* a phone: the downloads follow the name straight away, on the first screen; the heading stays for screen readers */
  .bl-build { gap: 22px; }
  .bl-code-sec > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bl-build > .bl-code-sec { margin-top: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-bar i, .bl-node, .bl-repo > summary .chev, .bl-pagerow > summary .ico { transition: none; }
}