/* ==========================================================================
   Queue Theme — clinical (light + dark). Shared by every queue screen.

   Switch mode with <html data-theme="light|dark"> (views read ?theme=dark).
   All colours are tokens below; edit them here only.

   Status meaning
     --color-serving   emerald   patient being seen / now serving
     --color-waiting   amber     waiting / pending / next in line
     --color-done      muted     completed / recently called
     --color-brand     blue      header, calls, neutral emphasis
     --color-priority  violet    priority / senior / VIP visit type
   ========================================================================== */

:root,
[data-theme="light"] {
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-2: #f1f5f9;      /* table header, alternate rows */
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-ink: #0f172a;
    --color-ink-2: #334155;
    --color-ink-3: #64748b;

    --color-brand: #1e3a8a;          /* header bar */
    --color-brand-2: #0284c7;        /* links, call highlight */
    --color-brand-soft: #e0f2fe;
    --color-on-brand: #ffffff;

    --color-serving: #10b981;
    --color-serving-strong: #047857; /* text on light surfaces */
    --color-serving-soft: #d1fae5;
    --color-waiting: #f59e0b;
    --color-waiting-strong: #b45309;
    --color-waiting-soft: #fef3c7;
    --color-done: #6b8a7d;
    --color-done-strong: #4b6359;
    --color-done-soft: #e8efec;
    --color-priority: #6d28d9;
    --color-priority-soft: #ede9fe;
    --color-alert: #dc2626;
    --color-alert-soft: #fee2e2;

    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
    --shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 4px 14px rgb(15 23 42 / 0.06);

    /* Department badges (R G B), tuned for a light surface */
    --dept-rose: 190 18 60;
    --dept-cyan: 14 116 144;
    --dept-emerald: 4 120 87;
    --dept-amber: 180 83 9;
    --dept-violet: 109 40 217;
    --dept-sky: 3 105 161;
    --dept-pink: 190 24 93;
    --dept-lime: 77 124 15;
    --dept-teal: 15 118 110;
    --dept-orange: 194 65 12;
    --dept-indigo: 67 56 202;
    --dept-fuchsia: 162 28 175;

    color-scheme: light;
}

[data-theme="dark"] {
    --color-bg: #0b1220;
    --color-surface: #111b2e;
    --color-surface-2: #0f172a;
    --color-border: #1f2b44;
    --color-border-strong: #2c3b5a;
    --color-ink: #f1f5f9;
    --color-ink-2: #cbd5e1;
    --color-ink-3: #94a3b8;

    --color-brand: #1e3a8a;
    --color-brand-2: #38bdf8;
    --color-brand-soft: rgb(56 189 248 / 0.14);
    --color-on-brand: #ffffff;

    --color-serving: #10b981;
    --color-serving-strong: #34d399;
    --color-serving-soft: rgb(16 185 129 / 0.16);
    --color-waiting: #f59e0b;
    --color-waiting-strong: #fbbf24;
    --color-waiting-soft: rgb(245 158 11 / 0.16);
    --color-done: #8fb3a4;
    --color-done-strong: #a7c4b8;
    --color-done-soft: rgb(143 179 164 / 0.14);
    --color-priority: #a78bfa;
    --color-priority-soft: rgb(167 139 250 / 0.16);
    --color-alert: #f87171;
    --color-alert-soft: rgb(248 113 113 / 0.15);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);

    --dept-rose: 251 113 133;
    --dept-cyan: 34 211 238;
    --dept-emerald: 52 211 153;
    --dept-amber: 251 191 36;
    --dept-violet: 167 139 250;
    --dept-sky: 56 189 248;
    --dept-pink: 244 114 182;
    --dept-lime: 163 230 53;
    --dept-teal: 45 212 191;
    --dept-orange: 251 146 60;
    --dept-indigo: 129 140 248;
    --dept-fuchsia: 232 121 249;

    color-scheme: dark;
}

:root {
    --radius: 0.85rem;
    --radius-sm: 0.6rem;
    --gap: 1rem;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Department badge hook: <span class="qd-dept" data-dept="rose"> */
[data-dept="rose"]    { --dept: var(--dept-rose); }
[data-dept="cyan"]    { --dept: var(--dept-cyan); }
[data-dept="emerald"] { --dept: var(--dept-emerald); }
[data-dept="amber"]   { --dept: var(--dept-amber); }
[data-dept="violet"]  { --dept: var(--dept-violet); }
[data-dept="sky"]     { --dept: var(--dept-sky); }
[data-dept="pink"]    { --dept: var(--dept-pink); }
[data-dept="lime"]    { --dept: var(--dept-lime); }
[data-dept="teal"]    { --dept: var(--dept-teal); }
[data-dept="orange"]  { --dept: var(--dept-orange); }
[data-dept="indigo"]  { --dept: var(--dept-indigo); }
[data-dept="fuchsia"] { --dept: var(--dept-fuchsia); }

/* Self-hosted font (public/webfonts) so screens look the same on Android TVs,
   tablets and phones without internet. Windows keeps Segoe UI. */
@font-face {
    font-family: "Inter";
    src: url("../../webfonts/Inter-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── Fluid type scale ───────────────────────────────────────────────────────
   Everything is sized in rem, so the root size scales the whole screen.
   Layouts:
     landscape  (TV / monitor / landscape tablet) — fixed-height split grid
     stacked    (portrait, narrow, or short)      — single column, page scrolls
   The stacked condition is repeated in the screen CSS files and in
   QueueScreens.js / HallDisplay.js (matchMedia); keep them identical:
     (orientation: portrait), (max-width: 900px), (max-height: 560px)
   ────────────────────────────────────────────────────────────────────────── */

/* Landscape: 18px at 1920x1080, 36px at 4K, never below 14px */
html { font-size: clamp(14px, min(0.94vw, 1.67vh), 44px); }

/* Landscape tablets (901–1024px wide) keep the split grid at a smaller base */
@media (min-width: 901px) and (max-width: 1024px) and (min-height: 561px) and (orientation: landscape) {
    html { font-size: clamp(12px, min(1.17vw, 1.67vh), 14px); }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Every screen is locked to the viewport: the page itself never scrolls.
   Where content can outgrow the screen (portrait / phone lists), only that
   panel scrolls inside the page (see the stacked layout rules below). */
html, body { height: 100%; overflow: hidden; }

body {
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "tnum" 1;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    user-select: none;
}

body.hide-cursor, body.hide-cursor * { cursor: none !important; }

/* Background layers from earlier themes are kept in the markup but unused */
.qd-bg { position: fixed; inset: 0; z-index: 0; background: var(--color-bg); }
.qd-orb, .qd-grid { display: none; }

/* ── Panels ("glass" kept as the class name for compatibility) ──────────── */

.glass {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.aurora-border::before { content: none; }

/* ── App shell ──────────────────────────────────────────────────────────── */

.qd-app {
    position: relative;
    z-index: 1;
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--gap);
    padding: var(--gap);
    animation: fadeIn 0.5s var(--ease) both;
}

/* ── Header bar: solid medical blue, white type ─────────────────────────── */

.qd-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.8rem 1.4rem;
    color: var(--color-on-brand);
    background: var(--color-brand);
    border-color: transparent;
}

.qd-brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }

.qd-brand__logo {
    height: 2.8rem;
    width: auto;
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    border-radius: 0.5rem;
    background: #ffffff;
}

/* Hospital mark (Avicenna): far left, right beside the title */
.qd-brand__logo--hospital {
    height: 3.6rem;
    padding: 0.2rem 0.3rem;
    border-radius: 0.6rem;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35);
}

.qd-brand__text { min-width: 0; }

.qd-brand__title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--color-on-brand);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qd-brand__sub {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.85);
    white-space: nowrap;
}

.qd-dot-sep { width: 0.3rem; height: 0.3rem; border-radius: 50%; background: rgb(255 255 255 / 0.7); }

.qd-header__right {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-left: auto;
    flex-shrink: 0;
}

.qd-conn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-brand);
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.25);
}

.qd-conn__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #fbbf24;
}

.qd-conn[data-state="live"] .qd-conn__dot    { background: #34d399; }
.qd-conn[data-state="offline"]               { background: rgb(220 38 38 / 0.85); border-color: transparent; }
.qd-conn[data-state="offline"] .qd-conn__dot { background: #ffffff; }

.qd-clock { text-align: right; line-height: 1; color: var(--color-on-brand); }

.qd-clock__time {
    font-size: 2.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.qd-clock__sec { margin-left: 0.2rem; font-size: 1.3rem; font-weight: 700; opacity: 0.8; font-variant-numeric: tabular-nums; }
.qd-clock__ampm { margin-left: 0.35rem; font-size: 1rem; font-weight: 700; opacity: 0.85; }

.qd-clock__date {
    margin-top: 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.88);
}

/* ── Page rotation control (header) ─────────────────────────────────────
   <label class="qd-rotate"><select data-rotate-select>…</select></label>
   Speed is kept per screen in localStorage (QueueTheme.rotation). */

.qd-rotate {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.3rem 0 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-on-brand);
    background: rgb(255 255 255 / 0.12);
    border: 1px solid rgb(255 255 255 / 0.25);
    cursor: pointer;
}

.qd-rotate:focus-within { outline: 2px solid #ffffff; outline-offset: 2px; }
.qd-rotate i { font-size: 0.85rem; opacity: 0.85; }

.qd-rotate__select {
    appearance: none;
    -webkit-appearance: none;
    min-height: 2rem;
    padding: 0 1.5rem 0 0.2rem;
    border: 0;
    font: inherit;
    letter-spacing: 0.02em;
    text-transform: none;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

@media (pointer: coarse) {
    .qd-rotate__select { min-height: max(40px, 2rem); }
}

.qd-rotate, .qd-rotate__select { touch-action: manipulation; }

.qd-rotate__select:focus { outline: none; }
.qd-rotate__select option { color: var(--color-ink); background: var(--color-surface); text-transform: none; }

/* Chevron */
.qd-rotate::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

/* ── Page turn: thin progress line + fade/slide of a paged list panel ──── */

.qd-page-progress {
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--color-surface-2);
}

.qd-page-progress[hidden] { display: none; }

.qd-page-progress::after {
    content: "";
    display: block;
    height: 100%;
    background: var(--color-brand-2);
    transform: scaleX(0);
    transform-origin: left;
}

.qd-page-progress.is-running::after { animation: tabProgress var(--rotate-ms, 15000ms) linear forwards; }

.qd-page-out { opacity: 0; transform: translateY(-0.6rem); transition: opacity 0.3s ease-in, transform 0.3s ease-in; }
.qd-page-in  { animation: pageIn 0.45s var(--ease) both; }

@keyframes pageIn { from { opacity: 0; transform: translateY(0.8rem); } }

/* ── Badges ─────────────────────────────────────────────────────────────── */

.qd-pill {
    --c: var(--color-brand-2);
    --soft: var(--color-brand-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c);
    background: var(--soft);
}

.qd-pill--serving { --c: var(--color-serving-strong); --soft: var(--color-serving-soft); }
.qd-pill--waiting { --c: var(--color-waiting-strong); --soft: var(--color-waiting-soft); }
.qd-pill--done    { --c: var(--color-done-strong);    --soft: var(--color-done-soft); }
.qd-pill--active  { --c: var(--color-brand-2);        --soft: var(--color-brand-soft); }

/* Steady, slow "live" indicator — one soft ring, no flashing */
.qd-live-dot {
    position: relative;
    width: 0.65rem;
    height: 0.65rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.qd-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: steadyPulse 2.4s ease-out infinite;
}

.qd-soft-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }

.qd-dept {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    max-width: 100%;
    padding: 0.15em 0.65em;
    border-radius: 0.4em;
    font-weight: 700;
    color: rgb(var(--dept));
    background: rgb(var(--dept) / 0.09);
    border: 1px solid rgb(var(--dept) / 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qd-dept:not([data-dept]) { --dept: var(--dept-sky); }

.qd-dept::before {
    content: "";
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: rgb(var(--dept));
}

/* Department badge sitting on the blue header */
.qd-header .qd-dept { color: #ffffff; background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.3); }
.qd-header .qd-dept::before { background: rgb(var(--dept)); box-shadow: 0 0 0 2px #ffffff; }

.qd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.qd-bump { animation: valueBump 0.8s var(--ease); }

/* ── Ticker ─────────────────────────────────────────────────────────────── */

.qd-ticker {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: var(--radius);
}

.qd-ticker__tag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    padding: 0.8rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-brand);
    background: var(--color-brand);
}

.qd-ticker__track {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.qd-ticker__move {
    display: inline-flex;
    white-space: nowrap;
    will-change: transform;
    animation: tickerScroll var(--ticker-duration, 50s) linear infinite;
}

.qd-ticker__item {
    display: inline-flex;
    align-items: center;
    padding-right: 3rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-ink);
}

.qd-ticker__item::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 1.2rem;
    border-radius: 50%;
    background: var(--color-brand-2);
}

/* ── "Now calling" banner: calm slide-down card ─────────────────────────── */

.qd-callout {
    position: fixed;
    z-index: 50;
    top: 1rem;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    width: min(92vw, 56rem);
    padding: 1.1rem 1.5rem 1.3rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 0.5rem solid var(--color-serving);
    box-shadow: 0 1rem 2.5rem rgb(15 23 42 / 0.2);
    transform: translate(-50%, -140%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s var(--ease), opacity 0.4s, visibility 0s 0.5s;
}

.qd-callout.is-show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s var(--ease), opacity 0.3s, visibility 0s;
}

.qd-callout__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--color-serving-strong);
    background: var(--color-serving-soft);
}

.qd-callout__body { flex: 1; min-width: 0; }

.qd-callout__eyebrow {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-serving-strong);
}

.qd-callout__main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-top: 0.1rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-ink);
}

.qd-callout__token { font-size: 3.4rem; font-weight: 900; line-height: 1; color: var(--color-ink); }
.qd-callout__arrow { font-size: 1.5rem; color: var(--color-ink-3); }

.qd-callout__sub {
    margin-top: 0.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qd-callout__timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--color-surface-2);
}

.qd-callout__timer span { display: block; height: 100%; background: var(--color-serving); transform-origin: left; }
.qd-callout.is-show .qd-callout__timer span { animation: tabProgress var(--callout-ms, 7000ms) linear forwards; }

/* Full-screen flash from the earlier theme is not used */
.qd-flash { display: none; }

/* ── Misc ───────────────────────────────────────────────────────────────── */

.qd-sound-hint {
    position: fixed;
    z-index: 30;
    right: calc(var(--gap) + 1rem);
    bottom: 5.2rem;
    max-width: calc(100vw - 2rem);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-waiting-strong);
    background: var(--color-waiting-soft);
    border: 1px solid var(--color-waiting);
    box-shadow: var(--shadow);
}

.qd-demo-badge {
    position: fixed;
    z-index: 30;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--color-ink-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.qd-demo-badge small { font-weight: 600; letter-spacing: 0.04em; }

/* ── Keyframes (deliberately subtle) ────────────────────────────────────── */

@keyframes fadeIn       { from { opacity: 0; } }
@keyframes fadeUp       { from { opacity: 0; transform: translateY(0.6rem); } }
@keyframes tabProgress  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes softBlink    { 50% { opacity: 0.55; } }

@keyframes steadyPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.4); opacity: 0; }
}

@keyframes tokenOut { to { opacity: 0; transform: translateY(-0.6rem); } }
@keyframes tokenIn  { from { opacity: 0; transform: translateY(0.8rem); } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(0.5rem); } }

/* Changed values get a short, soft highlight */
@keyframes valueBump {
    0%   { background-color: var(--color-brand-soft); }
    100% { background-color: transparent; }
}

@keyframes rowIn  { from { opacity: 0; transform: translateX(1rem); } }
@keyframes rowOut { to { opacity: 0; transform: translateX(-1rem); } }
@keyframes chipPop { from { opacity: 0; transform: scale(0.9); } }

/* A new call: background tint that fades out */
@keyframes callTint {
    0%, 30% { background-color: var(--color-serving-soft); }
    100%    { background-color: var(--color-surface); }
}

/* ── Shared responsive rules ────────────────────────────────────────────── */

@media (orientation: portrait), (max-width: 900px), (max-height: 560px) {
    /* Portrait: 13px on phones, ~17px on tablets, ~24px on a 1080x1920 TV */
    html { font-size: clamp(13px, 2.2vw, 44px); }
    :root { --gap: 0.75rem; }

    /* Still exactly one screen tall: header, then the main area takes the rest */
    .qd-app {
        padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom));
    }

    .qd-header { flex-wrap: wrap; gap: 0.6rem 1rem; padding: 0.7rem 1.1rem; }
}

/* Stacked layout: lists that outgrow the screen scroll inside their own panel
   (class qd-scroll-panel). Touch screens scroll by hand; screens without touch
   scroll slowly on their own (QueueTheme.autoScroll). On landscape TVs these
   panels never scroll; the screen scripts page through the rows instead. */
@media (orientation: portrait), (max-width: 900px), (max-height: 560px) {
    .qd-scroll-panel {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-strong) transparent;
    }
    .qd-scroll-panel::-webkit-scrollbar { width: 6px; }
    .qd-scroll-panel::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--color-border-strong); }
}

/* Phones held sideways / short landscape windows: stacked, but sized by height */
@media (orientation: landscape) and (max-width: 900px), (orientation: landscape) and (max-height: 560px) {
    html { font-size: clamp(12px, min(1.6vw, 3.4vh), 18px); }
}

/* Short landscape (phone sideways): height is scarce, so the header stays one slim row */
@media (orientation: landscape) and (max-height: 560px) {
    .qd-header { flex-wrap: nowrap; gap: 0.8rem; padding: 0.4rem 0.9rem; }
    .qd-brand { gap: 0.7rem; }
    .qd-brand__logo--hospital { height: 2.7rem; }
    .qd-brand__title { font-size: 1.25rem; }
    .qd-brand__sub { font-size: 0.85rem; }
    .qd-header__right { gap: 0.6rem; }
    .qd-clock__time { font-size: 1.6rem; }
    .qd-clock__date { display: none; }
    .qd-brand__text { overflow: hidden; }
    .qd-brand__sub { flex-wrap: nowrap; overflow: hidden; }
    .qd-rotate__label, .qd-conn__label { display: none; }
}

@media (max-width: 640px) {
    .qd-header { padding: 0.8rem 1rem; }
    .qd-brand__logo { height: 2.2rem; }
    .qd-brand__logo--hospital { height: 2.9rem; }
    .qd-brand__sub { flex-wrap: wrap; white-space: normal; row-gap: 0.1rem; }
    .qd-brand__title { font-size: 1.25rem; white-space: normal; overflow-wrap: anywhere; }
    .qd-clock__time { font-size: 1.6rem; }
    .qd-clock__date { margin-top: 0.2rem; font-size: 0.72rem; white-space: nowrap; }
    /* Clock row spans the header: Live pill on the left, time on the right */
    .qd-header__right { flex: 1 1 100%; justify-content: space-between; gap: 0.5rem; margin-left: 0; }
    .qd-rotate { padding-left: 0.55rem; }
    .qd-rotate__label { display: none; }
    .qd-header__right:has(.qd-rotate) .qd-conn__label { display: none; }
    .qd-ticker__tag span { display: none; }

    .qd-callout { gap: 0.9rem; padding: 1rem; }
    .qd-callout__icon { width: 3rem; height: 3rem; font-size: 1.2rem; }
    .qd-callout__main { font-size: 1.4rem; }
    .qd-callout__token { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .qd-ticker__move { animation: none !important; }
}

/* ── Centre brand (partials/screenBrand) ─────────────────────────────────────
   Header = three columns on TVs and desktops: hospital logo + screen title on
   the LEFT, the PKQueue logo with the "Qmatic" title exactly in the CENTRE,
   status + clock on the RIGHT. Side columns never shrink below their content,
   so nothing can slide under the centre. Below 1280px the header stays the
   wrapping flex row and the centre shows the logo only. */

@font-face {
    font-family: "Sora";
    src: url("../../webfonts/Sora-Variable.ttf") format("truetype");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

.qd-brandmark {
    /* Logo size follows the screen: --logo-h is the target height (it grows with
       the screen height, so a 4K TV keeps the proportions of 1080p) and
       --logo-max caps the width so it never runs into the side columns. */
    --logo-h: clamp(3.2rem, 8.2vh, 5.2rem);
    --logo-max: 36vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    background: transparent;
}

/* pkqueue-transparent.png (1600x223) is a real alpha cut-out, so no box is drawn
   behind it. Two hairline white shadows trace a crisp 1px edge that keeps the dark
   "matic" letters sharp on the navy bar; the soft dark shadow lifts the logo off it.
   7.17 = the image's width / height. */
.qd-brandmark__logo {
    display: block;
    width: min(calc(var(--logo-h) * 7.17), var(--logo-max));
    height: auto;
    max-width: 100%;
    background: transparent;
    filter:
        contrast(1.06) saturate(1.12)
        drop-shadow(0 0 0.6px rgb(255 255 255 / 0.95))
        drop-shadow(0 0 0.6px rgb(255 255 255 / 0.95))
        drop-shadow(0 0.25rem 0.5rem rgb(2 6 23 / 0.45));
}

.qd-brandmark__title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: "Sora", "Segoe UI", system-ui, sans-serif;
    line-height: 1;
    white-space: nowrap;
}

/* Hairlines either side of the title */
.qd-brandmark__title::before,
.qd-brandmark__title::after {
    content: "";
    width: 2rem;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, transparent, #7dd3fc);
}
.qd-brandmark__title::after { transform: scaleX(-1); }

.qd-brandmark__name {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.34em;
    margin-right: -0.34em;           /* letter-spacing trails the last glyph */
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #bae6fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgb(2 6 23 / 0.55));
}

.qd-brandmark__tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.82);
}

.qd-brandmark__sep {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: #7dd3fc;
}

/* Narrow / portrait / short screens: logo only, centred in the flex row */
@media (max-width: 1279px), (max-height: 560px) {
    .qd-brandmark { margin-inline: auto; }
    .qd-brandmark__title { display: none; }
    .qd-brandmark { --logo-h: 2.9rem; --logo-max: 46vw; }
    .qd-header > .qd-brandmark + .qd-header__right { margin-left: 0; }
}

@media (orientation: landscape) and (max-height: 560px) {
    .qd-brandmark { --logo-h: 2.1rem; --logo-max: 32vw; }
}

/* Phones: the logo gets its own centred row at the top of the header */
@media (max-width: 640px) {
    .qd-brandmark { order: -1; flex: 1 1 100%; }
    .qd-brandmark { --logo-h: 2.4rem; --logo-max: 86vw; }
}

@media (min-width: 1280px) and (min-height: 561px) {
    .qd-header {
        display: grid;
        grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
        column-gap: 1.5rem;
    }
    .qd-header > .qd-brand { justify-self: start; }
    .qd-header > .qd-brandmark { justify-self: center; }
    .qd-header > .qd-header__right { justify-self: end; margin-left: 0; gap: 1rem; }

    /* Compact right block: rotate shows its icon + choice */
    .qd-header .qd-rotate__label { display: none; }
    .qd-header .qd-clock__date { white-space: nowrap; }
}

/* Mid-size landscape screens: tighter centre and right so all three columns fit */
@media (min-width: 1280px) and (max-width: 1500px) and (min-height: 561px) {
    .qd-brandmark { --logo-h: clamp(2.9rem, 7vh, 3.7rem); --logo-max: 32vw; }
    .qd-brandmark__tag, .qd-brandmark__sep { display: none; }
    .qd-header > .qd-header__right { gap: 0.7rem; }
    .qd-header .qd-conn__label { display: none; }
    .qd-header .qd-clock__date { font-size: 0.75rem; }
}