/* ASL Live: styles shared by the hub, Live and Learn pages. Builds on /assets/site.css tokens. */
:root {
  --signal: #b8700f; --ok: #1f7a55; --warn: #b4441c; --cam: #0f151c; --track: #e3e8ee;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --signal: #f2b456; --ok: #4cc28f; --warn: #f08a5d; --cam: #070a0d; --track: #222b37; }
}
:root[data-theme="dark"] { --signal: #f2b456; --ok: #4cc28f; --warn: #f08a5d; --cam: #070a0d; --track: #222b37; }

[hidden] { display: none !important; }
.asl-page { padding-block: 40px 72px; }
.asl-page h1 { font-weight: 400; font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -0.015em; line-height: 1.12; margin: 0 0 14px; text-wrap: balance; }
.asl-page .sub { color: var(--ink-soft); font-size: 1.1875rem; max-width: 60ch; margin: 0 0 28px; }
.asl-page h2 { font-weight: 500; font-size: 1.375rem; margin: 0 0 10px; }
.ui { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; }
.muted { color: var(--ink-soft); }

/* hub */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin: 8px 0 48px; }
.door { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 6px; background: var(--panel); color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color 0.2s; }
.door:hover { border-color: var(--ink-soft); }
.door .kicker { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.door h2 { font-size: 1.625rem; margin: 0; }
.door p { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; }
.door .go { font-family: var(--sans); font-size: 0.9375rem; color: var(--link); margin-top: auto; padding-top: 6px; }
.prose { max-width: 680px; }
.prose section { padding: 26px 0; border-top: 1px solid var(--rule); }
.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 1.2em; }
.prose li { margin-bottom: 6px; }
.credits { font-size: 1rem; color: var(--ink-soft); }

/* app layout */
.app { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; } }
.cam-col { display: grid; gap: 10px; min-width: 0; }
.cam { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--cam); border-radius: 6px; overflow: hidden; outline: 3px solid transparent; }
.cam.flash { animation: flash 0.8s ease-out; }
@keyframes flash { from { outline-color: var(--ok); } to { outline-color: transparent; } }
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-cover { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 22px; text-align: center; color: #e6ecf2; background: radial-gradient(circle at 50% 38%, #1d2935, var(--cam)); font-family: var(--sans); }
.cam-cover p { margin: 0; max-width: 38ch; font-size: 0.9375rem; color: #b9c4cf; }
.cam-cover .err { color: #ffb38a; }
.cam-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--sans); font-size: 0.9375rem; }
.hand-state { font-weight: 600; }
.hand-state[data-state="signing"] { color: var(--signal); }
.hand-state[data-state="lower"] { color: var(--ok); }
.meter { height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 0.12s linear; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--rule); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.pill[data-kind="live"]::before { background: var(--ok); }
.pill[data-kind="loading"]::before { background: var(--signal); animation: blink 0.9s steps(2) infinite; }
.pill[data-kind="error"]::before { background: var(--warn); }
@keyframes blink { 50% { opacity: 0.2; } }

.panel { background: var(--panel); border-radius: 6px; padding: 22px; display: grid; gap: 16px; min-width: 0; }
.label { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0; }
.big-word { font-family: var(--serif); font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1.05; margin: 0; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.big-word.unsure { color: var(--ink-soft); font-style: italic; }
.meta { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); margin: 0; font-variant-numeric: tabular-nums; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-family: var(--sans); font-size: 0.875rem; }
.bars li { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 42px; gap: 10px; align-items: center; }
.bars .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .track { height: 9px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bars .fill { display: block; height: 100%; background: var(--link); transform-origin: left; }
.bars li:first-child .fill { background: var(--signal); }
.bars .pct { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.sentence { min-height: 2.6em; font-family: var(--serif); font-size: 1.5rem; line-height: 1.3; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sentence .w { border-bottom: 2px solid var(--rule); }
.sentence .w:last-child { border-bottom-color: var(--signal); }
.sentence .empty { color: var(--ink-soft); font-size: 1.0625rem; font-style: italic; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--sans); }
.btn { appearance: none; font: 600 0.9375rem/1.2 var(--sans); padding: 10px 16px; border-radius: 6px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink-soft); }
.btn.big { padding: 13px 22px; font-size: 1rem; }
.btn:focus-visible, .word:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.9375rem; }
.check input { accent-color: var(--link); width: 16px; height: 16px; }

.feedback { font-family: var(--sans); font-size: 1rem; border-radius: 6px; padding: 12px 14px; margin: 0; background: var(--paper); }
.feedback.ok { color: var(--ok); }
.feedback.close { color: var(--signal); }
.feedback.no { color: var(--warn); }
.stats { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); }
.stats strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* word list */
.words { margin-top: 36px; }
.words summary { cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 1rem; padding: 6px 0; }
.search { width: min(100%, 320px); font: 0.9375rem var(--sans); padding: 9px 12px; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); margin: 12px 0; }
.word-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 6px; }
.word { width: 100%; text-align: left; appearance: none; font: 0.9375rem var(--sans); padding: 8px 10px; border-radius: 5px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: 6px; }
.word:hover { border-color: var(--ink-soft); }
.word.done { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.word.done::after { content: "✓"; color: var(--ok); }
.word.current { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.foot-note { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); margin-top: 28px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
a.word { text-decoration: none; }
.crumb { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); margin: 0 0 14px; }
.prose section { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; padding: 3px; background: var(--paper); justify-self: start; font-family: var(--sans); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 14px; border-radius: 5px; font-size: 0.9375rem; font-weight: 600; color: var(--ink-soft); }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.spell-own { display: flex; gap: 8px; flex-wrap: wrap; }
.spell-own input { flex: 1 1 180px; font: 0.9375rem var(--sans); padding: 9px 12px; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.cam-cover .btn { background: #ffffff; color: #15202b; border-color: #ffffff; }