/* 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. */
/* Layouts: page rules, the stage (device and window frames, the zones overlay), tiles, tables and diagrams.
   The wireframe vocabulary inside a stage is injected by js/app.js, scoped to .lo, so it renders the same on every page. */

/* Filters */
.tools { padding: 22px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.active:empty { display: none; }
.active .chip { background: var(--fg); border-color: var(--fg); color: var(--bg); padding-right: 8px; }
.active .chip::after { content: " ×"; opacity: 0.7; }
.clear { background: none; border: 0; color: var(--accent); font: 500 13px var(--ui); cursor: pointer; padding: 4px 6px; }
.themes__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.themes__name { font: 600 11px/1 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg3); margin-right: 4px; }
.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; }
.more-btn small { color: var(--fg3); font-weight: 500; margin-left: 8px; }
.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 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; }
.detail .lede { color: var(--fg2); font-size: 16px; max-width: 62ch; 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: 16.5px; line-height: 1.6; max-width: 66ch; }
.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); }
.badge a { color: inherit; }
a.badge:hover { color: var(--fg); }
.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: 360px; }
.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); }
.exports { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.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: 120px; }
.kv td small { color: var(--fg3); }

/* Controls above the stage */
.controls { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin: 16px 0 12px; font-size: 13px; color: var(--fg2); }
.controls .lab { font: 600 11px/1 var(--ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg3); margin-right: 8px; }
.controls label.grp { display: flex; align-items: center; }
.controls select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--fg); font: 500 13px var(--ui); }
.controls .tog { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.controls .tog input { accent-color: var(--fg); margin: 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg label { display: inline-flex; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font: 500 12.5px/1.2 var(--ui); color: var(--fg2); cursor: pointer; background: var(--panel); white-space: nowrap; }
.seg span small { color: inherit; opacity: 0.6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.seg input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg input:disabled + span { opacity: 0.45; cursor: not-allowed; }

/* The stage: a device outline at compact and medium, a window at expanded and wide. The screen inside is exactly the
   width (360, 768, 1024, 1440), so the layout's container queries see the true width; the whole device is scaled to fit. */
.stagebox { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 16px; background: var(--panel2); display: flex; justify-content: center; overflow: hidden; min-height: 200px; }
.lo-fit { position: relative; flex: none; }
.lo-scale { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.lo-dev--device { border: 12px solid #1c1c21; border-radius: 40px; background: #1c1c21; box-shadow: 0 18px 50px -20px rgba(0,0,0,.45); }
.lo-dev--device[data-w="medium"] { border-width: 16px; border-radius: 30px; }
.lo-dev--device .lo-screen { border-radius: 28px; }
.lo-dev--device[data-w="medium"] .lo-screen { border-radius: 14px; }
.lo-dev--window { border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 50px -24px rgba(0,0,0,.35); overflow: hidden; }
.lo-win { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.lo-win i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 20%, transparent); }
.lo-win span { margin-left: 10px; font: 500 11.5px var(--ui); color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-screen { position: relative; overflow: hidden; background: #fff; }
.lo-dev--none .lo-screen { background: transparent; }
.lo-ov { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.lo-zb { position: absolute; background: color-mix(in srgb, var(--zc) 11%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--zc) 70%, transparent); }
.lo-zl { position: absolute; left: 4px; top: 4px; padding: 2px 6px; border-radius: 4px; background: var(--zc); color: #fff; font: 700 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.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; }
.stage-note .bad { color: #c2410c; }

/* Tiles: the live wireframe at medium width, scaled into a 4:3 box */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; padding: 12px 0 48px; align-items: start; }
@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } }
.lt { min-width: 0; cursor: pointer; }
.lt__stage { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.lt:hover .lt__stage { box-shadow: 0 10px 28px rgba(0,0,0,0.12); transform: translateY(-2px); }
.lt__stage .lo-fit { position: absolute; inset: 0; width: auto !important; height: auto !important; }
.lt__stage .lo { pointer-events: none; }
.lt__cap { display: flex; align-items: center; gap: 8px; padding: 9px 4px 0; flex-wrap: wrap; }
.lt__name { font-weight: 600; font-size: 14.5px; }
.lt__name:hover { color: var(--accent); }
.lt__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lt__tags a { font: 500 11px/1 var(--ui); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg3); }
.lt__tags a:hover { color: var(--fg); border-color: var(--fg3); }
.lt__cap .lo-word { margin-left: auto; }
.lo-word { display: inline-block; font: 600 11px/1 var(--ui); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.lo-word--pass { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.lo-word--watch { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.lo-word--fail { background: color-mix(in srgb, #dc2626 14%, transparent); color: #b91c1c; }
:root[data-theme="dark"] .lo-word--pass { color: #4ade80; } :root[data-theme="dark"] .lo-word--watch { color: #fbbf24; } :root[data-theme="dark"] .lo-word--fail { color: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lo-word--pass { color: #4ade80; } :root:not([data-theme="light"]) .lo-word--watch { color: #fbbf24; } :root:not([data-theme="light"]) .lo-word--fail { color: #f87171; } }

/* Reflow table and scorecard */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.lo-rt, .lo-sc { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; }
.lo-rt th, .lo-rt td, .lo-sc th, .lo-sc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lo-rt tr:last-child > *, .lo-sc tr:last-child > * { border-bottom: 0; }
.lo-rt thead th { font: 600 11px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); white-space: nowrap; }
.lo-rt thead th small { font-weight: 500; letter-spacing: 0; color: var(--fg3); margin-left: 3px; }
.lo-rt tbody th { white-space: nowrap; font: 600 12.5px var(--mono); color: var(--fg); width: 110px; }
.lo-rt td { min-width: 170px; color: var(--fg2); }
.lo-rt td small { color: var(--fg3); font-size: 11px; }
.lo-rt td[data-same] { color: var(--fg3); }
.lo-rt .on { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lo-rt thead th.on { color: var(--fg); }
.lo-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--zc); margin-right: 8px; vertical-align: 0; }
.lo-sc td:first-child { width: 72px; }
.lo-sc th { width: 190px; font-weight: 600; font-size: 13.5px; }
.lo-sc th small { display: block; font: 500 11px var(--mono); color: var(--fg3); margin-top: 2px; }
.lo-sc td { color: var(--fg2); }

/* Diagrams: a shell at one width, a pattern's slots (drawn at true size, scaled down) */
.lo-dgbox { position: relative; overflow: hidden; }
.lo-dg { display: grid; gap: 6px; padding: 6px; transform-origin: 0 0; background: var(--panel2); border-radius: 18px; position: relative; }
.lo-dg__a { position: relative; border-radius: 10px; background: color-mix(in srgb, var(--zc) 13%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--zc) 55%, transparent); display: flex; align-items: flex-start; padding: 10px 12px; min-width: 0; min-height: 0; }
.lo-dg__a span, .lo-dg__f span { font: 700 22px/1 ui-monospace, Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--zc) 80%, var(--fg)); }
.lo-dgbox--p .lo-dg__a span { font-size: 15px; }
.lo-dg__f { position: absolute; border-radius: 12px; background: color-mix(in srgb, var(--zc) 22%, var(--panel)); box-shadow: inset 0 0 0 2px var(--zc), 0 8px 24px -10px rgba(0,0,0,.35); padding: 10px 12px; }
.lo-dg__f--top-right { top: 18%; right: 3%; width: 30%; height: 7%; min-height: 34px; }
.lo-dg__f--top-centre { top: 21%; left: 16%; width: 68%; height: 6%; min-height: 34px; }
.lo-dg__f--sheet { left: 6px; right: 6px; bottom: 6px; height: 46%; border-radius: 22px 22px 10px 10px; }
.lo-dg__f--overlay-right { right: 6px; top: 13%; bottom: 6px; width: 56%; border-radius: 22px 10px 10px 22px; }
.lo-dg__f--float-bottom { left: 34%; right: 34%; bottom: 7%; height: 7%; min-height: 38px; border-radius: 999px; }
.lo-dg__f--drawer { display: none; }
.dgrow { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; }
.dgcell { display: flex; flex-direction: column; gap: 8px; }
.dgcell b { font: 600 11px/1 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); }
.dgcell b small { font-weight: 500; letter-spacing: 0; margin-left: 4px; }

/* Shell and pattern cards (index, shell and pattern list pages) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 6px 0 18px; }
.scard { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; transition: border-color .15s ease, transform .15s ease; }
.scard:hover { border-color: var(--fg3); transform: translateY(-2px); }
.scard__cap { display: flex; align-items: baseline; gap: 8px; }
.scard__cap b { font-size: 15px; font-weight: 600; }
.scard__cap small { margin-left: auto; color: var(--fg3); font-size: 12px; white-space: nowrap; }
.scard p { margin: 0; color: var(--fg3); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; padding: 34px 0 28px; }
.hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 700; }
.hero p.lede { color: var(--fg2); font-size: 16px; max-width: 34em; margin: 0 0 20px; line-height: 1.55; }
.hero .search input { max-width: none; font-size: 16px; padding: 14px 16px; }
.hero > * { min-width: 0; }
.hero .stagebox { padding: 18px 12px; }
.hero__controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.hero__controls a { color: var(--accent); font-size: 13px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.quick a { font-size: 12.5px; color: var(--fg2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--panel); }
.shelf, .group { padding: 22px 0 6px; border-top: 1px solid var(--line); }
.shelf__head, .group__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.shelf__head h2, .group__head h2 { font-size: 20px; margin: 0; letter-spacing: -0.015em; }
.shelf__head p, .group__head p { margin: 0; color: var(--fg3); font-size: 13.5px; flex: 1; min-width: 200px; }
.shelf__head a { font-size: 13px; color: var(--accent); white-space: nowrap; }
.shelfrow { display: grid; grid-auto-flow: column; grid-auto-columns: 320px; gap: 16px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: thin; align-items: start; }
.all { text-align: center; padding: 30px 0 40px; border-top: 1px solid var(--line); margin-top: 10px; }
.all a { display: inline-block; padding: 11px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-weight: 600; font-size: 14px; }

/* Guide */
.guide { padding: 30px 0 80px; max-width: 760px; }
.guide h1 { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; }
.guide .lede { font-size: 19px; color: var(--fg2); margin: 0 0 30px; line-height: 1.5; }
.guide h2 { font-size: 24px; margin: 46px 0 10px; letter-spacing: -0.01em; scroll-margin-top: 70px; }
.guide p, .guide li { font-size: 16.5px; line-height: 1.65; }
.guide .toc { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.guide .toc a { color: var(--fg2); font-size: 15px; }
.guide .ex { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.guide .ex a { font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--accent); }
.guide table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 10px 0; }
.guide th, .guide td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.guide th { color: var(--fg3); font-weight: 500; }
.guide code { font: 13.5px var(--mono); background: var(--panel2); padding: 1px 5px; border-radius: 5px; }
.guide .fig { margin: 16px 0 6px; }
@media (max-width: 560px) { .guide .toc { grid-template-columns: 1fr; } }
.lt__stage [data-zone="messages"], .scard [data-zone="messages"], #stagebox:not([data-zones="1"]) [data-zone="messages"] { visibility: hidden; }
/* The toast standing for the messages zone shows only with Show zones on, so a filled or wireframe stage is not read as having a bug. */