/* Tool pages and the Lab's archive (redesign brief 4.1 to 4.3, 2026-11-09). Loaded only on /lab/ and the showcased
   tool pages, so Home and Work stay light (first paint on Slow 4G). The parts Home also uses (tags, thumbnails, the
   plan card, History) are in main.css. Figma: Lab showcase (Desktop, Mobile), Tool/Plan, Tool/Card. */
/* The showcased tool page: title, one line, tags, then the console. */
.tl-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(20px, 3vw, 32px); }
.tl-head .crumbs { margin-bottom: 0; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; }
.tl-avail { font-size: var(--fs-sm); font-weight: 600; }
.tl-demo { scroll-margin-top: calc(var(--header-h) + 16px); }
.tl-console { border: 1px solid var(--ink); border-top: 3px solid var(--tool); background: var(--paper); }
.tl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 20px; border-bottom: 1px solid var(--rule); }
.tl-bar-t { font-size: var(--fs-sm); font-weight: 600; }
.tl-bar-n { font-size: var(--fs-sm); color: var(--ink-3); }
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 20px 28px; padding: 20px; }
.tl-stage-col, .tl-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.tl-side { gap: 16px; }
/* Step 3, History. */
.tl-hist-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* Under the stage. */
.tl-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.tl-k { font-size: var(--fs-sm); color: var(--ink-3); }
.tl-layer { padding: 4px 10px; border: 1px solid var(--rule); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.tl-layer.is-on { border-color: var(--tool); box-shadow: inset 0 0 0 1px var(--tool); }
.tl-layer.is-locked { border-style: dashed; color: var(--ink-3); }
.tl-layer.is-gone { color: var(--ink-3); text-decoration: line-through; }
.tl-link { margin-inline-start: auto; padding: 4px 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Step 4, what leaves the page: code and exports. */
.tl-out { grid-column: 1 / -1; display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rule); }
.tl-out-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tl-out-head .tl-p { flex: 1 1 260px; }
.tl-out-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-code { margin: 0; max-height: 340px; overflow: auto; padding: 16px; background: var(--night); color: var(--on-night); font-family: var(--f-mono); font-size: var(--fs-sm); line-height: 1.55; white-space: pre; tab-size: 2; }
.tl-code:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-code-k { color: var(--on-night-2); }
/* Brand Motion Controls. */
.bmc-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bmc-g { display: grid; gap: 6px; }
.bmc-g-wide { grid-column: 1 / -1; }
.bmc-g svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.bmc-g figcaption { font-size: var(--fs-sm); color: var(--ink-3); }
.bmc-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.bmc-colors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bmc-color { display: grid; gap: 4px; font-size: var(--fs-sm); }
.bmc-color input { width: 100%; height: 40px; padding: 2px; border: 1px solid var(--ink); background: var(--paper); cursor: pointer; }
.bmc-range { display: grid; gap: 6px; font-size: var(--fs-sm); }
.bmc-range > span { display: flex; justify-content: space-between; gap: 8px; }
.bmc-range input { width: 100%; accent-color: var(--ink); }
.bmc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); }
.bmc-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.tl-badge { padding: 0 6px; border: 1px solid var(--ink); font-family: var(--f-mono); font-size: var(--fs-sm); line-height: 1.4; }
.bmc-checks [data-ok="true"] .tl-badge { background: var(--ink); color: var(--paper); }
.bmc-checks [data-ok="false"] .tl-badge { border-style: dashed; }
/* Kinetic Type Director. */
.ktd-stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); container-type: inline-size; }
.ktd-line { padding: 0 6cqw; color: var(--on-night); font-size: 11cqw; font-weight: var(--display-w); font-stretch: var(--display-wdth); letter-spacing: var(--display-track); line-height: 1.05; text-align: center; }
.ktd-line .w { display: inline-block; }
.ktd-spec { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.ktd-linebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ktd-linebar input { flex: 1 1 160px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-ui); }
/* The docs below the demo: plain sections, no accordion wall. */
.tl-demo + .tl-sec { margin-top: clamp(56px, 8vw, 96px); }
.tl-sec-in { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 760px); gap: 16px 64px; padding: 40px 0 56px; border-top: 1px solid var(--rule); }
.tl-sec-l { display: grid; gap: 4px; align-content: start; }
.tl-sec-h { font-size: var(--fs-d3); font-weight: var(--title-w); font-stretch: var(--title-wdth); letter-spacing: var(--title-track); line-height: var(--title-lh); }
.tl-sec-r { display: grid; gap: 16px; align-content: start; font-size: var(--fs-base); line-height: 1.6; }
.tl-lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); }
.tl-points, .tl-list, .tl-facts, .tl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tl-points li, .tl-list li { position: relative; padding-inline-start: 20px; }
.tl-points li::before, .tl-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 8px; height: 8px; background: var(--tool); }
.tl-steps { counter-reset: tl-step; }
.tl-steps li { counter-increment: tl-step; display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 12px; }
.tl-steps li::before { content: counter(tl-step, decimal-leading-zero); padding-top: 0.2em; font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--ink-3); }
.tl-facts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.tl-facts li { padding-top: 12px; border-top: 1px solid var(--ink); font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.tl-h3 { margin-top: 8px; font-size: var(--fs-md); font-weight: 600; }
.tl-dl { display: grid; gap: 10px; justify-items: start; }
.tl-draft { display: grid; gap: 6px; padding: 12px 16px; border: 1px dashed var(--ink); }
.tl-draft-k { font-family: var(--f-mono); font-size: var(--fs-s); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tl-more-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: clamp(40px, 6vw, 56px); padding-bottom: var(--space-block); }
.tl-more-tools .wgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); max-width: 900px; }
/* The Lab index: the collapsed Archive. */
.lx-archive { border-block: 1px solid var(--ink); }
.lx-archive-sum { display: flex; align-items: center; gap: 12px 32px; padding: 28px 0; list-style: none; cursor: pointer; }
.lx-archive-sum::-webkit-details-marker { display: none; }
.lx-archive-sum:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.lx-archive-text { flex: 1; display: grid; gap: 6px; }
.lx-archive-h { font-size: var(--fs-d3); font-weight: var(--title-w); font-stretch: var(--title-wdth); letter-spacing: var(--title-track); line-height: var(--title-lh); }
.lx-archive-d { font-size: var(--fs-md); color: var(--ink-2); }
.lx-archive-o::after { content: attr(data-closed) "  +"; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.lx-archive[open] .lx-archive-o::after { content: attr(data-open) "  \2212"; }
.lx-archive-body { padding-bottom: 32px; }
@media (max-width: 900px) {
  .tl-body { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
  .tl-bar { padding: 10px 14px; }
  .tl-out-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-sec-in { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0 36px; }
  .lx-archive-sum { flex-wrap: wrap; }
}