/* queue.css — theming via --q- prefixed custom properties with fallbacks. */

.q-root {
    font-family: var(--q-font, system-ui, -apple-system, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif);
    color: var(--q-text, #1a1a1a);
    box-sizing: border-box;
}

.q-root *,
.q-root *::before,
.q-root *::after {
    box-sizing: inherit;
}

/* ---------------------------------------------------------------------- */
/* Banner (warm warning, not alarming red)                                 */
/* ---------------------------------------------------------------------- */

.q-banner {
    width: 100%;
    background: var(--q-banner-bg, #fff4e0);
    color: var(--q-banner-text, #7a5200);
    border: 1px solid var(--q-banner-border, #f0d090);
    border-radius: var(--q-radius, 8px);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 1.5;
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Closed / non-clinic-hours panel                                         */
/* ---------------------------------------------------------------------- */

.q-panel {
    width: 100%;
    background: var(--q-panel-bg, #f7f7f5);
    border: 1px solid var(--q-panel-border, #e2e2df);
    border-radius: var(--q-radius, 8px);
    padding: 32px 20px;
    text-align: center;
}

.q-panel-heading {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--q-primary, #1470a6);
}

.q-panel-next {
    font-size: 17px;
    margin: 0 0 8px;
}

/* ---------------------------------------------------------------------- */
/* Grid of cards                                                           */
/* ---------------------------------------------------------------------- */

.q-grid {
    display: flex;
    flex-direction: column;
    gap: var(--q-gap, 16px);
    width: 100%;
}

@media (min-width: 768px) {
    .q-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */

.q-card {
    width: 100%;
    background: var(--q-card-bg, #fefefe);
    border: 1px solid var(--q-card-border, #e2e2df);
    border-radius: var(--q-radius, 12px);
    box-shadow: var(--q-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
}

/* Plain card: doctors without illustrated art. */

.q-card--plain {
    --q-accent: var(--q-primary, #1470a6);
    border-top: 4px solid var(--q-accent);
    padding: 20px;
}

.q-card--plain .q-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.q-avatar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--q-avatar-bg, #eef1ef);
    color: var(--q-accent);
    font-size: 20px;
    font-weight: 700;
}

.q-card--plain .q-card-doctor-info {
    min-width: 0;
}

.q-card--plain .q-card-doctor-name {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-card--plain .q-card-room-name {
    font-size: 17px;
    color: var(--q-muted-text, #666);
}

.q-card--plain .q-card-number {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--q-accent);
    text-align: center;
    margin: 8px 0;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .q-card--plain .q-card-number {
        font-size: 72px;
    }
}

.q-card--plain .q-card-waiting {
    font-size: 17px;
    text-align: center;
    color: var(--q-muted-text, #444);
}

/* Illustrated card: the number is drawn into the art's speech bubble and the
   waiting count under its ·當前候診· caption. Percentages are measured from
   the 972x720 template crop; text scales with the card via cqw. */

.q-card--art {
    padding: 12px 12px 4px;
}

.q-card--art .q-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
    color: var(--q-ink, #2c5060);
}

.q-card--art .q-card-room-name {
    flex: none;
    font-size: 20px;
    font-weight: 700;
}

.q-card--art .q-card-doctor-name {
    min-width: 0;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.q-card-art {
    position: relative;
    container-type: inline-size;
}

.q-card-art-img {
    display: block;
    width: 100%;
    height: auto;
}

.q-card--art .q-card-number,
.q-card--art .q-card-waiting {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: var(--q-ink, #2c5060);
    font-family: var(--q-number-font, ui-rounded, "Arial Rounded MT Bold", "Varela Round", system-ui, sans-serif);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Defaults fit 楊's drawing; other layouts set --q-num-* per doctor from the
   `number` box in doctors.json. */
.q-card--art .q-card-number {
    left: var(--q-num-left, 14.8%);
    top: var(--q-num-top, 22%);
    width: var(--q-num-width, 35.2%);
    height: var(--q-num-height, 21.5%);
    font-size: 40px;
}

.q-card--art .q-card-number[data-digits="3"] {
    font-size: 32px;
}

.q-card--art .q-card-number[data-digits="4"] {
    font-size: 26px;
}

/* Top edge clears the caption in every drawing (it ends at y 626 of 720 in
   the 許/黃 template, 613 in 楊's). */
.q-card--art .q-card-waiting {
    left: 14.4%;
    width: 40%;
    top: 88.5%;
    height: 11%;
    font-size: 17px;
    font-weight: 700;
}

/* The px sizes above are fallbacks sized for a ~320px-wide phone card, for
   browsers without container query units. Where they exist, text scales
   with the card instead. */
@supports (width: 1cqw) {
    .q-card--art .q-card-number {
        font-size: calc(var(--q-num-size, 17) * 1cqw);
    }

    .q-card--art .q-card-number[data-digits="3"] {
        font-size: calc(var(--q-num-size, 17) * 0.82cqw);
    }

    .q-card--art .q-card-number[data-digits="4"] {
        font-size: calc(var(--q-num-size, 17) * 0.65cqw);
    }

    .q-card--art .q-card-waiting {
        font-size: max(17px, 6.5cqw);
    }
}

.q-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Pulse animation on number change                                        */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .q-pulse {
        animation: q-pulse-kf 600ms ease-out;
    }
}

@keyframes q-pulse-kf {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.04);
        opacity: 0.85;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}