/*
 * Token display screen: a wall-mounted TV or monitor in the waiting area.
 * Read from across the room, so everything is large and high contrast. Landscape first, stacks on portrait screens.
 */

/* ---------- Base ---------- */
html, body { height: 100%; background: #f5f7f8 !important; }
body { font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #2f3a4a; margin: 0; overflow: hidden; }
.fq-d { min-height: 100vh; height: 100vh; display: flex; flex-direction: column; padding: clamp(.75rem, 2vw, 2rem); gap: clamp(.75rem, 1.6vw, 1.5rem); box-sizing: border-box; }

/* ---------- Header and footer ---------- */
.fq-d-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; }
.fq-d-logo { height: clamp(36px, 6vh, 72px); width: auto; max-width: 45vw; object-fit: contain; object-position: left center; }
.fq-d-clock { font-size: clamp(1.25rem, 3.2vh, 2.25rem); font-weight: 700; color: #2f3a4a; font-variant-numeric: tabular-nums; }
.fq-d-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex: 0 0 auto; min-height: 2.25rem; color: #6b7780; font-size: clamp(.8rem, 1.6vh, 1rem); }
.fq-d-powered { display: inline-flex; align-items: center; gap: .4rem; }
.fq-d-powered img { height: 1.1em; width: auto; }
.fq-d-tools { display: flex; gap: .5rem; margin-left: auto; }
.fq-d-tool { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #e3e7ea; background: #fff; color: #2f3a4a; border-radius: 999px; padding: .35rem .9rem; font: inherit; font-weight: 600; cursor: pointer; }
.fq-d-tool:hover, .fq-d-tool:focus { border-color: #22847a; color: #22847a; outline: none; }
.fq-d-tool .ph-duotone { font-size: 1.25em; }
.fq-d-tool.fq-attention { background: #22847a; border-color: #22847a; color: #fff; }

/* ---------- Board ---------- */
.fq-d-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.fq-d-board { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(.75rem, 1.6vw, 1.5rem); }
.fq-d-main { display: flex; flex-direction: column; gap: clamp(.75rem, 1.6vw, 1.5rem); min-height: 0; }
.fq-d-label { font-size: clamp(.9rem, 2.2vh, 1.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.fq-d-hero { flex: 1 1 60%; min-height: 0; background: #2f3a4a; color: #fff; border-radius: clamp(16px, 2vw, 32px); padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.fq-d-hero .fq-d-label { color: #9fd9cf; }
.fq-d-call { display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem); flex-wrap: wrap; margin-top: .5rem; }
.fq-d-token { font-size: clamp(4rem, 22vh, 14rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fq-d-token small { display: block; font-size: clamp(.9rem, 2.4vh, 1.5rem); font-weight: 600; color: #c9d3d9; letter-spacing: .04em; margin-bottom: .25em; }
.fq-d-arrow { font-size: clamp(2rem, 9vh, 6rem); color: #e9b44c; line-height: 1; }
.fq-d-arrow svg { width: 1em; height: 1em; display: block; }
.fq-d-counter { font-size: clamp(2rem, 9vh, 6.5rem); font-weight: 800; line-height: 1.05; color: #fff; overflow-wrap: anywhere; min-width: 0; flex: 1 1 0; }
.fq-d-counter small { display: block; font-size: clamp(.9rem, 2.4vh, 1.5rem); font-weight: 600; color: #c9d3d9; letter-spacing: .04em; margin-bottom: .25em; }
.fq-d-idle { font-size: clamp(1.5rem, 5vh, 3.25rem); font-weight: 700; color: #fff; margin-top: .5rem; }
.fq-d-idle-sub { font-size: clamp(1rem, 2.6vh, 1.6rem); color: #c9d3d9; margin-top: .5rem; }

/* A fresh call: the hero flashes amber for a few seconds */
.fq-d-hero.fq-calling { animation: fqDCall 1s ease-in-out 0s 6 alternate; }
@keyframes fqDCall { from { background: #2f3a4a; } to { background: #22847a; } }
@media (prefers-reduced-motion: reduce) { .fq-d-hero.fq-calling { animation: none; background: #22847a; } }

/* Everyone else being served right now */
.fq-d-serving { flex: 0 1 auto; min-height: 0; background: #fff; border: 1px solid #e3e7ea; border-radius: clamp(14px, 1.6vw, 24px); padding: clamp(.75rem, 2vh, 1.5rem) clamp(1rem, 2vw, 2rem); overflow: hidden; }
.fq-d-serving .fq-d-label { color: #6b7780; margin-bottom: .5rem; }
.fq-d-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: .5rem clamp(1rem, 2vw, 2rem); }
.fq-d-row { display: flex; align-items: flex-start; gap: .75rem; font-size: clamp(1.25rem, 3.6vh, 2.5rem); font-weight: 700; padding: .35rem 0; border-bottom: 1px solid #eef1f3; min-width: 0; }
.fq-d-row .fq-d-row-token { font-variant-numeric: tabular-nums; color: #22847a; min-width: 2.5ch; }
.fq-d-row-arrow { color: #9aa5ad; flex-shrink: 0; margin-top: .2em; }
.fq-d-row-arrow svg { width: .8em; height: .8em; display: block; }
.fq-d-row .fq-d-row-counter { overflow-wrap: anywhere; min-width: 0; line-height: 1.15; }

/* Up next */
.fq-d-next { background: #fff; border: 1px solid #e3e7ea; border-radius: clamp(16px, 2vw, 32px); padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 2vw, 2rem); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fq-d-next .fq-d-label { color: #6b7780; margin-bottom: .75rem; }
.fq-d-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(.4rem, 1vh, .75rem); min-height: 0; overflow: hidden; }
.fq-d-next-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: #f5f7f8; border-radius: 14px; padding: clamp(.4rem, 1.2vh, .9rem) 1rem; }
.fq-d-next-item strong { font-size: clamp(1.5rem, 4.4vh, 3rem); font-weight: 800; font-variant-numeric: tabular-nums; color: #2f3a4a; line-height: 1.1; }
.fq-d-next-item span { font-size: clamp(.85rem, 1.9vh, 1.25rem); color: #6b7780; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fq-d-next-item:first-child { background: #e3f3f0; }
.fq-d-next-more { margin-top: auto; padding-top: .75rem; font-size: clamp(.9rem, 2vh, 1.25rem); color: #6b7780; font-weight: 600; }
.fq-d-next-empty { font-size: clamp(1rem, 2.4vh, 1.5rem); color: #6b7780; }

/* Paused: a banner over the board */
.fq-d-banner { display: flex; align-items: center; gap: .75rem; background: #fbf1dc; color: #7a4b05; border-radius: 14px; padding: .75rem 1.25rem; font-size: clamp(1rem, 2.6vh, 1.6rem); font-weight: 700; flex: 0 0 auto; }
.fq-d-banner .ph-duotone { font-size: 1.4em; }
.fq-d-banner.fq-offline { background: #f8e3e3; color: #8a2f2f; }

/* ---------- Full-screen messages (closed, limit reached, errors) ---------- */
.fq-d-msg { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
.fq-d-msg img { height: clamp(120px, 28vh, 280px); width: auto; margin-bottom: clamp(1rem, 3vh, 2rem); }
.fq-d-msg h1 { font-size: clamp(1.75rem, 5.5vh, 3.5rem); font-weight: 800; color: #2f3a4a; margin: 0 0 .5rem; }
.fq-d-msg p { font-size: clamp(1rem, 2.6vh, 1.6rem); color: #4f5b63; margin: 0 auto; max-width: 42rem; }
.fq-d-msg .btn { margin-top: 1.5rem; }

/* ---------- Portrait screens and phones: stack ---------- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    body { overflow: auto; }
    .fq-d { height: auto; }
    .fq-d-board { grid-template-columns: minmax(0, 1fr); }
    .fq-d-hero { min-height: 32vh; }
    .fq-d-token { font-size: clamp(4rem, 16vw, 12rem); }
    .fq-d-arrow, .fq-d-counter { font-size: clamp(2rem, 9vw, 6rem); }
    .fq-d-row { font-size: clamp(1.15rem, 5vw, 2.25rem); }
    .fq-d-next-item strong { font-size: clamp(1.4rem, 6vw, 2.75rem); }
}
@media (max-width: 480px) {
    .fq-d-tool .fq-d-tool-label { display: none; }
    .fq-d-arrow { display: none; }
    .fq-d-call { flex-direction: column; align-items: flex-start; gap: .75rem; }
}