/* Showcase prototype (t-2026-10-14-40). Static files, no build: the shadcn neutral theme as CSS variables,
   Geist, base text 16 px; 14 px only for the caption how.wallet, badges, category captions and the frame label. */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2'); }

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --status-live: oklch(0.696 0.17 162.48); /* emerald-500: the live dot only */
  --overlay: oklch(0 0 0 / 0.4);
  --radius: 0.625rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0);
    --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0);
    --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --destructive: oklch(0.704 0.191 22.216);
    --overlay: oklch(0 0 0 / 0.6); color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0);
  --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0);
  --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --destructive: oklch(0.704 0.191 22.216);
  --overlay: oklch(0 0 0 / 0.6); color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }


.page { width: 100%; max-width: 768px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 768px) { .page { padding: 56px 32px 96px; gap: 48px; } }

/* head */
.head { display: flex; flex-direction: column; gap: 12px; }
.head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.head-title { font-size: 30px; line-height: 1.2; font-weight: 600; text-wrap: balance; }
@media (min-width: 640px) { .head-title { font-size: 36px; } }
.head-lead { color: var(--muted-foreground); }
.head-stats { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; align-items: baseline; margin-top: 8px; color: var(--muted-foreground); }
.stat { display: inline-flex; align-items: baseline; column-gap: 8px; white-space: nowrap; }
.stat .sep { color: var(--muted-foreground); }
.num { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--foreground); }
.stat-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
.stat-btn:hover { color: var(--foreground); }
.head-pace { color: var(--muted-foreground); }
.page-down { color: var(--foreground); }

/* buttons, inputs, badges (shadcn sizes) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: calc(var(--radius) - 2px); border: 1px solid transparent; font: inherit; font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 150ms, color 150ms;
}
.btn-sm { height: 36px; padding: 0 12px; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn-outline:hover, .btn-ghost:hover { background: var(--muted); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lang { flex: none; margin-top: 2px; }
.textarea, .input {
  width: 100%; font: inherit; font-size: 16px; color: var(--foreground); background: transparent;
  border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); padding: 8px 12px;
}
.textarea { min-height: 88px; resize: vertical; display: block; }
.input { height: 40px; }
.textarea::placeholder, .input::placeholder { color: var(--muted-foreground); }
.textarea:focus-visible, .input:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent); }
.textarea[aria-invalid='true'] { border-color: var(--destructive); }
.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--secondary); color: var(--foreground); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.badge-outline { background: transparent; border: 1px solid var(--border); }
.caption { display: block; font-size: 14px; color: var(--muted-foreground); }

/* feed = vertical timeline: future (slot, queue) dashed, now, released solid */
.feed { display: flex; flex-direction: column; }
.tl { position: relative; padding: 0 0 24px 32px; }
.tl::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; border-left: 2px solid var(--border); }
.tl:first-child::before { top: 24px; }
.tl:last-child::before { bottom: auto; height: 28px; }
.tl-empty:last-child::before { height: 13px; }
.tl:only-child::before, .feed[data-solo] .tl::before { display: none; }
.feed[data-solo] .tl { padding-left: 0; }
.feed[data-solo] .tl-dot { display: none; }
.tl-future::before { border-left-style: dashed; }
.tl-dot { position: absolute; left: 0; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: var(--foreground); border: 2px solid var(--foreground); }
.tl-dot-open { background: var(--background); border-style: dashed; border-color: var(--muted-foreground); }
.tl-dot-sm { left: 3px; top: 8px; width: 10px; height: 10px; }
.tl-dot-now { background: var(--background); }
.tl-dot-now::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--foreground); }
.tl-label { padding-bottom: 16px; }
.section-title { font-size: 20px; line-height: 1.3; font-weight: 600; }
@media (min-width: 640px) { .section-title { font-size: 24px; } }

.card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.card-title { font-size: 18px; line-height: 1.35; font-weight: 600; text-wrap: balance; }
.card-slot { border-style: dashed; background: transparent; }

/* slot */
.slot-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.field-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 0; }
.field-msg:empty { display: none; }
.field-msg { color: var(--muted-foreground); }
.field-msg[data-kind='error'] { color: var(--destructive); }
.counter { margin-left: auto; font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted-foreground); }
.counter[data-over='true'] { color: var(--destructive); }
.suggest { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.suggest button { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px;
  font: inherit; color: var(--foreground); background: var(--background); border: 0; border-top: 1px solid var(--border); cursor: pointer; text-align: left; }
.suggest li:first-child button { border-top: 0; }
.suggest button:hover { background: var(--muted); }
.slot-actions { display: flex; }
.slot-thanks { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

/* queue line */
.queue-line { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 2px; }
@media (min-width: 640px) { .queue-line { flex-direction: row; align-items: baseline; justify-content: space-between; } }
.queue-line p { color: var(--muted-foreground); }
.queue-line strong { color: var(--foreground); font-weight: 500; }

/* building now */
.now-label { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-foreground); font-weight: 500; }
.live-dot { width: 6px; height: 6px; margin-top: calc((1lh - 6px) / 2); border-radius: 50%; background: var(--status-live); flex: none; animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.35; } }
.now-app { font-size: 18px; line-height: 1.35; font-weight: 600; }
.now-text { color: var(--foreground); }
.now-meta { color: var(--muted-foreground); }
.now-meta .step-name { color: var(--foreground); }
.scene { width: 100%; height: auto; display: block; color: var(--muted-foreground); }
.scene .belt { stroke: var(--border); stroke-width: 2; }
.scene .belt-run { stroke: var(--muted-foreground); stroke-width: 2; stroke-dasharray: 6 8; }
.scene .station rect { fill: var(--background); stroke: currentColor; stroke-width: 1.5; }
.scene .station svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scene .station.todo { opacity: 0.4; }
.scene .station.done { color: var(--muted-foreground); }
.scene .station.current { color: var(--foreground); }
.scene .station.current rect { fill: var(--muted); stroke-width: 2; }
.scene .parcel { fill: var(--foreground); }
.scene[data-motion='on'] .belt-run { animation: belt 1.2s linear infinite; }
.scene[data-motion='on'] .parcel { animation: bob 1.6s ease-in-out infinite; }
.scene[data-motion='on'] .station.current rect { animation: glow 2.4s ease-in-out infinite; }
@keyframes belt { to { stroke-dashoffset: -14; } }
@keyframes bob { 50% { transform: translateY(-3px); } }
@keyframes glow { 50% { stroke-opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .scene .belt-run, .scene .parcel, .scene .station rect, .live-dot { animation: none !important; }
}

/* released card */
.card-app { gap: 8px; }
.app-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.app-name { font-size: 18px; line-height: 1.35; font-weight: 600; }
.app-tagline { color: var(--muted-foreground); }
.app-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; color: var(--muted-foreground); }
.app-meta .caption { display: inline; }
.app-tags { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.app-icons { display: inline-flex; gap: 8px; color: var(--muted-foreground); }
.app-icons svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 8px; }
@media (min-width: 480px) { .app-actions { display: flex; } }
.feed-empty { color: var(--muted-foreground); padding-top: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.card-app.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { border-color: var(--foreground); } }

/* how it works */
.how { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.how-list { display: flex; flex-direction: column; gap: 12px; }
.how-list li { padding-left: 16px; border-left: 2px solid var(--border); }

/* queue panel: full screen on a phone, a centred panel from 640 px */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: stretch; justify-content: center; }
.panel { background: var(--background); width: 100%; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: hidden; }
@media (min-width: 640px) {
  .overlay { align-items: center; padding: 24px; }
  .panel { max-width: 560px; height: auto; max-height: min(80vh, 760px); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title { font-size: 18px; font-weight: 600; }
.qlist { overflow-y: auto; scrollbar-width: none; flex: 1 1 auto; min-height: 0; border-top: 1px solid var(--border); }
.qlist::-webkit-scrollbar { display: none; }
.qlist:empty { flex: none; } /* no rows: «no match» sits right under the search, not at the bottom of a phone screen */
#panel-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } /* the browser's own blue cross is not a theme colour */
.qrow { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qrow .caption { grid-column: 1; }
.qrow .badge { grid-column: 2; grid-row: 1; }
.qrow a { text-decoration: none; }
.qrow a:hover { text-decoration: underline; }
.qrow[data-hit='true'] { background: var(--muted); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.qnone a { color: var(--foreground); text-underline-offset: 4px; }
body.panel-open { overflow: hidden; }