/* The waiting-room screen: large, calm, readable across a room. The clinic's browns; 2px corners, no shadows. */
@font-face { font-family: 'DM Sans'; src: url('dmsans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Bricolage'; src: url('bricolage.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root { --bg: #1d130d; --panel: #2a1c13; --line: #46301f; --ink: #fbf3e8; --muted: #c9b39c; --gold: #e4ae6c; --brown: #8a5a33; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; overflow: hidden; cursor: default; }
[hidden] { display: none !important; }

.q { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 2vh; padding: 3vh 3vw; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.q-brand { display: flex; align-items: center; gap: 1.4vw; font-size: 2.6vh; font-weight: 600; letter-spacing: .02em; }
.q-brand img { height: 7vh; width: auto; border-radius: 2px; }
.q-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.q-clock #clock { font-family: 'Bricolage', 'DM Sans', sans-serif; font-size: 5vh; font-weight: 600; font-variant-numeric: tabular-nums; }
.q-clock #date { color: var(--muted); font-size: 2.2vh; }

.q-main { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2vw; min-height: 0; }
.q-label { color: var(--gold); font-size: 2.2vh; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.q-now { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 3vh 2vw; min-height: 0; }
.q-token { font-family: 'Bricolage', 'DM Sans', sans-serif; font-size: 30vh; line-height: 1; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin: 1vh 0; }
.q-place { font-size: 7vh; font-weight: 600; color: var(--gold); line-height: 1.1; }
.q-name { font-size: 4vh; color: var(--muted); margin-top: 1.5vh; min-height: 4vh; }
.q-now.flash { animation: q-flash 1.2s ease-in-out 3; }
@keyframes q-flash { 0%, 100% { background: var(--panel); border-color: var(--line); } 50% { background: var(--brown); border-color: var(--gold); } }

.q-side { background: var(--panel); border: 1px solid var(--line); border-radius: 2px; padding: 3vh 2vw; min-height: 0; overflow: hidden; }
.q-list { list-style: none; margin: 2vh 0 0; padding: 0; display: grid; gap: 1.2vh; }
.q-list li { display: grid; grid-template-columns: 9vh 1fr; align-items: baseline; gap: 1.5vw; padding: 1.2vh 0; border-bottom: 1px solid var(--line); animation: q-in .5s ease-out both; }
.q-list li:last-child { border-bottom: 0; }
.q-list b { font-family: 'Bricolage', 'DM Sans', sans-serif; font-size: 5.5vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.q-list span { font-size: 3.2vh; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.q-foot { display: flex; align-items: center; gap: 1.5vw; min-height: 7vh; border-top: 1px solid var(--line); padding-top: 1.5vh; }
.q-waiting { flex: 1; display: flex; flex-wrap: wrap; gap: .8vw; overflow: hidden; max-height: 7vh; }
.q-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 6vh; height: 5.5vh; padding: 0 1vw; border: 1px solid var(--line); border-radius: 2px; font-size: 3vh; font-weight: 600; font-variant-numeric: tabular-nums; }
.q-none { color: var(--muted); font-size: 2.6vh; }
.q-off { color: var(--gold); font-size: 2.2vh; }

.q-start { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; padding: 6vh 8vw; background: var(--bg); }
.q-start img { width: 14vh; height: 14vh; border-radius: 2px; }
.q-start h1 { margin: 0; font-family: 'Bricolage', 'DM Sans', sans-serif; font-size: 6vh; font-weight: 600; }
.q-start p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 2.8vh; line-height: 1.4; }
.q-start button { margin-top: 2vh; font: inherit; font-size: 3.4vh; font-weight: 600; color: var(--bg); background: var(--gold); border: 0; border-radius: 2px; padding: 1.6vh 6vh; cursor: pointer; }
.q-start button:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }

@media (orientation: portrait) {
  .q-main { grid-template-columns: 1fr; grid-template-rows: 1.6fr 1fr; }
  .q-token { font-size: 20vh; }
}
@media (prefers-reduced-motion: reduce) { .q-now.flash, .q-list li { animation: none; } }
.q-sound { position: fixed; left: 50%; bottom: 3vh; transform: translateX(-50%); font: inherit; font-size: 2.4vh; color: var(--bg); background: var(--gold); border: 0; border-radius: 2px; padding: 1.2vh 3vh; cursor: pointer; }
.q-sound:focus-visible { outline: 4px solid var(--ink); outline-offset: 4px; }