/* The shared chrome (tokens, reset, .wrap, header, nav, search, chips, dropdowns, footer) comes from
   /css/stack.css (uistack/site/css/stack.css), linked before this file. Only what differs here stays here. */
/* Lettering: page rules. The stage, knobs, tiles, the lookbook grid, scorecards, tables. The treatments inside a stage
   carry their own css, injected by js/app.js. */

/* Filters */
.tools { padding: 22px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: 500 13px var(--ui); max-width: 100%; }
.bar .search { flex: 1 1 260px; }
.clear { background: none; border: 0; color: var(--accent); font: 500 13px var(--ui); cursor: pointer; padding: 4px 6px; }
.facet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.facet__name { font: 600 11px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); margin-right: 4px; min-width: 76px; }
.more-wrap { display: flex; justify-content: center; padding: 0 0 48px; }
.more-btn { padding: 11px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--fg); font: 600 14px var(--ui); cursor: pointer; }
.empty { padding: 60px 0; color: var(--fg3); text-align: center; }

/* Detail pages */
.detail { padding: 22px 0 64px; }
.crumbs { font-size: 13px; color: var(--fg3); margin-bottom: 14px; }
.crumbs a { color: var(--fg2); }
.detail h1, .page h1 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; }
.lede { color: var(--fg2); font-size: 16px; max-width: 64ch; margin: 0 0 14px; line-height: 1.55; }
.section { margin-top: 40px; }
.section__title { font: 600 11.5px/1 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.section__title span { font-weight: 400; letter-spacing: 0; text-transform: none; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; min-width: 0; }
.panel h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.prose { font-size: 16px; line-height: 1.6; max-width: 68ch; }
.prose p { margin: 0 0 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--ui); padding: 6px 10px; border-radius: 999px; background: var(--panel2); color: var(--fg2); }
a.badge:hover { color: var(--fg); }
.badge--warn { background: color-mix(in srgb, #b45309 14%, transparent); color: #b45309; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
pre.snippet { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; font: 12px/1.6 var(--mono); overflow: auto; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; }
.btn-sm { padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: 600 13px var(--ui); cursor: pointer; }
.btn-sm:hover { border-color: var(--fg3); }
.btn-sm[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.exports { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv th, .kv td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv th { color: var(--fg3); font-weight: 500; width: 140px; }
.kv td small { color: var(--fg3); display: block; margin-top: 3px; line-height: 1.45; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }

/* The stage: the treatment on its palette at the chosen size */
.stagebox { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stagebox .lt-stage { min-height: 300px; padding: 48px 40px; display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; }
.stagebox--fb .lt-stage { min-height: 160px; padding: 28px 40px; }
.stagebox:hover .lt-stage > [data-lt] { outline: 1px dashed color-mix(in srgb, var(--pfg) 30%, transparent); outline-offset: .06em; }
.stage-note { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 2px 0; font-size: 12.5px; color: var(--fg3); }
.stage-note b { color: var(--fg2); font-weight: 600; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.controls .panel { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.controls h3 { font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); margin: 0; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg2); position: relative; }
.field input[type="text"], .field input[type="search"], .field select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: 500 13.5px var(--ui); min-width: 0; width: 100%; }
.row { display: flex; gap: 8px; align-items: center; }
.row > input { flex: 1; min-width: 0; }
.knob { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; color: var(--fg2); }
.knob select { grid-column: 2 / 4; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: 500 13px var(--ui); }
.knob input[type="range"], .range input { accent-color: var(--fg); width: 100%; }
.knob output, .range output { font: 500 12px var(--mono); color: var(--fg2); min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.range { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.tog { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg2); cursor: pointer; }
.tog input { accent-color: var(--fg); margin: 0; }
.hint { font-size: 12px; color: var(--fg3); line-height: 1.45; margin: 0; }
.warnchip { display: inline-block; font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 8px; background: color-mix(in srgb, #b45309 13%, transparent); color: #92400e; }
:root[data-theme="dark"] .warnchip { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warnchip { color: #fbbf24; } }

/* Typeahead */
.ta { position: relative; }
.ta__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 30; padding: 4px; }
.ta__list button { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; color: var(--fg); font: 13.5px var(--ui); text-align: left; cursor: pointer; }
.ta__list button:hover, .ta__list button[aria-selected="true"] { background: var(--panel2); }
.ta__list button small { color: var(--fg3); white-space: nowrap; }
.ta__list button.off { color: var(--fg3); }
.ta__line { font: 600 10.5px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); padding: 10px 10px 6px; border-top: 1px solid var(--line); margin-top: 4px; }

/* Scorecard */
.lt-sc { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lt-sc td, .lt-sc th { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lt-sc th { font-weight: 600; white-space: nowrap; }
.lt-sc th small { display: block; color: var(--fg3); font: 500 11px var(--mono); }
.lt-sc td:last-child { color: var(--fg2); }
.lt-word { display: inline-block; font: 700 10.5px/1 var(--ui); letter-spacing: .05em; text-transform: uppercase; padding: 4px 7px; border-radius: 5px; white-space: nowrap; }
.lt-word--pass { color: #15803d; background: color-mix(in srgb, #15803d 12%, transparent); }
.lt-word--watch { color: #b45309; background: color-mix(in srgb, #b45309 14%, transparent); }
.lt-word--fail { color: #b91c1c; background: color-mix(in srgb, #b91c1c 12%, transparent); }
:root[data-theme="dark"] .lt-word--pass { color: #4ade80; } :root[data-theme="dark"] .lt-word--watch { color: #fbbf24; } :root[data-theme="dark"] .lt-word--fail { color: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lt-word--pass { color: #4ade80; } :root:not([data-theme="light"]) .lt-word--watch { color: #fbbf24; } :root:not([data-theme="light"]) .lt-word--fail { color: #f87171; } }

/* Tiles: the live treatment at a small size on its default pairing and palette */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: 12px 0 48px; align-items: start; }
@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } }
.lt-tile { display: block; min-width: 0; border-radius: var(--radius); }
.lt-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.lt-tile__stage { position: relative; height: 190px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 14px; }
.lt-tile__stage .lt-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.lt-tile:hover .lt-tile__stage { border-color: var(--fg3); }
.lt-tile__cap { display: flex; align-items: center; gap: 8px; padding: 9px 4px 0; }
.lt-tile__cap b { font-weight: 600; font-size: 14.5px; }
.lt-tile:hover .lt-tile__cap b { color: var(--accent); }
.lt-tile__cap .lt-word { margin-left: auto; }
.lt-tile__meta { display: block; padding: 3px 4px 0; font-size: 12.5px; color: var(--fg3); }
.shelfrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 16px; overflow-x: auto; padding: 4px 0 16px; scrollbar-width: thin; }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; padding: 34px 0 28px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 700; }
.hero > * { min-width: 0; }
.hero .stagebox .lt-stage { min-height: 280px; justify-content: center; }
.hero__edit { display: flex; gap: 8px; margin-top: 10px; }
.hero__edit input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--fg); font: 500 14px var(--ui); }
.hero__cap { font-size: 13px; color: var(--fg3); margin-top: 8px; }
.hero__cap a { color: var(--accent); }
.shelf { margin: 22px 0 8px; }
.shelf__head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.shelf__head h2 { font-size: 20px; letter-spacing: -0.01em; margin: 0; }
.shelf__head p { margin: 0; color: var(--fg2); font-size: 14px; flex: 1 1 300px; }
.shelf__head a { color: var(--accent); font-size: 14px; font-weight: 500; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.scard { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.scard:hover { border-color: var(--fg3); }
.scard--off { opacity: .6; }
.scard__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.scard__cap b { font-size: 16px; }
.scard__cap small { color: var(--fg3); font-variant-numeric: tabular-nums; }
.scard p { margin: 0; color: var(--fg2); font-size: 13.5px; line-height: 1.5; }

/* Lookbook */
.lb-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 760px) { .lb-head { grid-template-columns: 1fr; } }
.lb-head__spec { padding: 28px 30px; background: var(--pbg); color: var(--pfg); }
.lb-head__spec h2 { margin: 0 0 10px; font-family: var(--h); font-weight: var(--hw); font-style: var(--hs); text-transform: var(--hcase); letter-spacing: var(--htrack); font-size: 44px; line-height: 1.05; }
.lb-head__spec p { margin: 0; font-family: var(--b); font-weight: var(--bw); font-size: 17px; line-height: 1.6; color: color-mix(in srgb, var(--pfg) 85%, var(--pbg)); }
.lb-head__facts { padding: 22px 26px; background: var(--panel); font-size: 14px; }
.lb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 18px 0 6px; }
.lb-tools .field { flex: 1 1 220px; }
.lb-group { margin-top: 30px; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.lb-cell { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); display: flex; flex-direction: column; }
.lb-cell__stage { height: 210px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px 16px; }
.lb-cell__stage .lt-stage { background: transparent; display: flex; justify-content: center; align-items: center; max-width: 100%; }
.lb-cell__cap { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.lb-cell__cap a.name { font-weight: 600; }
.lb-cell__cap a.name:hover { color: var(--accent); }
.lb-cell__cap .btn-sm { margin-left: auto; padding: 4px 9px; font-size: 12px; }
.lb-cell__cap small { color: var(--fg3); }

/* Numerals */
.figs { width: 100%; border-collapse: collapse; font-size: 14px; }
.figs th, .figs td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.figs th { color: var(--fg3); font-weight: 500; font-size: 12.5px; }
.figs td.n { font-size: 30px; line-height: 1; white-space: nowrap; }
.figs td.n span { display: block; }
.figs td small { color: var(--fg3); display: block; }
.yes { color: #15803d; font-weight: 600; } .no { color: var(--fg3); }

/* Guide */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding: 28px 0 64px; }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } .guide nav.toc { position: static; } }
.guide nav.toc { position: sticky; top: 74px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.guide nav.toc a { padding: 5px 8px; border-radius: 6px; color: var(--fg2); }
.guide nav.toc a:hover { background: var(--panel2); color: var(--fg); }
.guide article h2 { font-size: 22px; letter-spacing: -0.01em; margin: 34px 0 10px; scroll-margin-top: 70px; }
.guide article h2:first-child { margin-top: 0; }
.guide article p, .guide article li { font-size: 16px; line-height: 1.62; max-width: 68ch; }
.guide article code { font: 13px var(--mono); background: var(--panel2); padding: 1px 5px; border-radius: 5px; }
.guide .demo { margin: 14px 0; }
.stagebox .lt-stage > *, .lt-tile__stage .lt-stage > *, .lb-cell__stage .lt-stage > * { flex: none; }