/*
 * Turnstile — one surface, held in one hand, outdoors, at night, by somebody
 * who will scan four hundred people in an hour. So: the verdict is the
 * biggest thing on the screen, the unsynced count is the second biggest,
 * every target is 48px, and nothing important is below the fold.
 */
.ts-gate { max-width: 760px; margin: 0 auto; display: grid; gap: var(--sp-4, 16px); min-width: 0; }
/* Grid children default to min-width:auto, which is how an input's intrinsic
   width pushed the whole column past a 320px phone. Everything may shrink. */
.ts-gate > * { min-width: 0; }
.ts-card {
    background: var(--surface-1, #fff); border: 1px solid var(--border-1, #e2e8f0);
    border-radius: var(--radius-2, 12px); padding: var(--sp-4, 16px); display: grid; gap: var(--sp-3, 12px);
}
.ts-card > *, .ts-actions > * { min-width: 0; }
.ts-actions .field__input { min-width: 0; width: 100%; }
.ts-card__title { font-weight: 650; font-size: 0.95rem; letter-spacing: 0.01em; }
.ts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2, 8px); }
.ts-spacer { flex: 1 1 auto; }

/* The verdict. Read from arm's length, in the dark, in under a second. */
.ts-verdict {
    min-height: 120px; display: grid; align-content: center; justify-items: center; gap: 4px;
    border-radius: var(--radius-2, 12px); padding: 16px; text-align: center;
    background: var(--surface-2, #f1f5f9); color: var(--text, #0f172a);
    transition: background .15s;
}
.ts-verdict__word { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1; }
.ts-verdict__why { font-size: 1rem; opacity: .85; }
.ts-verdict.is-admitted { background: #166534; color: #fff; }
.ts-verdict.is-refused { background: #991b1b; color: #fff; }

.ts-scan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2, 8px); }
.ts-scan input { min-width: 0; width: 100%; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; min-height: 48px; }
.ts-scan button { min-height: 48px; }
.ts-video { width: 100%; max-height: 260px; border-radius: var(--radius-2, 12px); background: #000; object-fit: cover; }

/* Counters: unsynced is the one a supervisor reads from three metres. */
.ts-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-2, 8px); }
.ts-count { display: grid; min-width: 0; gap: 2px; padding: 10px 12px; border-radius: var(--radius-2, 12px); background: var(--surface-2, #f1f5f9); }
.ts-count b { font-size: 1.8rem; font-variant-numeric: tabular-nums; line-height: 1; }
.ts-count span { font-size: .8rem; opacity: .75; }
.ts-count.is-unsynced b { color: #b45309; }
.ts-count.is-unsynced.is-zero b { color: inherit; }
.ts-count.is-collisions b { color: #991b1b; }

.ts-codes { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; white-space: pre-wrap; word-break: break-all; max-height: 160px; overflow: auto; }
.ts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.ts-list li { padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #f1f5f9); }
.ts-list li b { font-family: ui-monospace, Menlo, monospace; }
.ts-offline { border-color: #b45309; }
.ts-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: #0f172a; color: #fff; font-size: .95rem; z-index: 50; }
.ts-toast.is-warn { background: #b45309; }
.ts-toast.is-error { background: #991b1b; }
.ts-toast.is-ok { background: #166534; }
.ts-state { font-size: .85rem; opacity: .8; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .ts-verdict__word { font-size: 2rem; } .ts-count b { font-size: 1.4rem; } }