/* Showroom — a contact sheet off the shop floor.
   Neutral dark ground on purpose: 83 thumbnails carry every bit of colour on this
   page, so the furniture stays grey and gets out of their way. Monospace for the
   identifiers because they are things you type into a command, not names you read. */
:root {
 color-scheme: dark;
 --ink: oklch(0.97 0.004 250);
 --ink-2: oklch(0.78 0.008 250);
 --ink-3: oklch(0.64 0.010 250);
 --bg: oklch(0.19 0.008 250);
 --panel: oklch(0.24 0.010 250);
 --panel-2: oklch(0.28 0.012 250);
 --line: oklch(0.36 0.012 250);
 --accent: oklch(0.82 0.15 85);
 --accent-ink: oklch(0.22 0.04 85);
 --warn: oklch(0.80 0.15 55);
 --ok: oklch(0.80 0.13 150);
 --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
 margin: 0; background: var(--bg); color: var(--ink);
 font: 400 16px/1.5 var(--sans);
 -webkit-text-size-adjust: 100%;
}
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.bar { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); }
.bar-in { max-width: 1500px; margin: 0 auto; padding: 14px 20px 16px; display: grid; gap: 6px;
 grid-template-columns: auto 1fr minmax(240px, 380px); align-items: center; }
.bar h1 { margin: 0; font-size: 1.15rem; letter-spacing: .02em; font-weight: 650; }
.count { margin: 0; color: var(--ink-2); font-size: .9rem; }
.count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.find { display: block; }
#q {
 width: 100%; padding: 11px 13px; min-height: 44px;
 background: oklch(0.16 0.008 250); color: var(--ink);
 border: 1px solid var(--line); border-radius: 8px; font: 400 15px var(--sans);
}
#q::placeholder { color: var(--ink-3); }
#q:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.stamp { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink-3); font-size: .78rem; }
@media (max-width: 760px) {
 .bar-in { grid-template-columns: 1fr; gap: 10px; }
 .bar { position: static; }
}

main { max-width: 1500px; margin: 0 auto; padding: 22px 20px 60px; }

.note { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--warn);
 border-radius: 10px; padding: 14px 18px; margin: 0 0 24px; }
.note h2 { margin: 0 0 6px; font-size: 1rem; color: var(--warn); }
.note p { margin: 0 0 8px; color: var(--ink-2); font-size: .92rem; max-width: 70ch; }
.note ul { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.note li { color: var(--ink-2); font-size: .85rem; margin-bottom: 3px; break-inside: avoid; }
@media (max-width: 700px) { .note ul { columns: 1; } }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
 overflow: hidden; display: flex; flex-direction: column;
 transition: transform 180ms ease-out, border-color 180ms ease-out; }
.tile:hover { transform: translateY(-2px); border-color: var(--ink-3); }
.tile.is-infra { border-style: dashed; }
.shot { display: block; aspect-ratio: 8 / 5; background: oklch(0.15 0.006 250); line-height: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.noshot { display: grid; place-items: center; height: 100%; color: var(--ink-3);
 font: 400 .85rem var(--mono); line-height: 1.4; }

.meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.meta h2 { margin: 0; font-size: 1.02rem; line-height: 1.25; font-weight: 620; }
.tag { margin: 0; color: var(--ink-2); font-size: .84rem; line-height: 1.4; }
.ids { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ids code { font: 400 .76rem var(--mono); color: var(--ink-3);
 background: oklch(0.16 0.008 250); padding: 2px 6px; border-radius: 5px; }
.warn { font: 600 .7rem var(--mono); color: var(--warn); }
.chip { font: 500 .7rem var(--sans); color: var(--ink-2);
 border: 1px solid var(--line); padding: 2px 7px; border-radius: 99px; }
.chip-dom { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 45%, var(--line)); }

.acts { margin: auto 0 0; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center;
 min-height: 44px; min-width: 44px; padding: 0 15px; border-radius: 8px;
 font: 600 .85rem var(--sans); text-decoration: none; cursor: pointer;
 background: var(--accent); color: var(--accent-ink); border: 1px solid transparent;
 transition: filter 150ms ease-out; }
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.94); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-ghost { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.btn-ghost[data-done] { color: var(--ok); border-color: var(--ok); }
.stat { margin-left: auto; font: 400 .74rem var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stat.ok { color: var(--ok); }

.empty { text-align: center; color: var(--ink-2); padding: 48px 0; font-size: 1rem; }
footer { border-top: 1px solid var(--line); }
footer p { max-width: 1500px; margin: 0 auto; padding: 18px 20px 30px; color: var(--ink-3); font-size: .8rem; }
footer code { font-family: var(--mono); color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
 * { animation: none !important; transition: none !important; }
 .tile:hover { transform: none; }
}