/* ============================================================
   Hospital Queue Management page
   Extends appointment-system.css; only page-specific pieces here.
   ============================================================ */

/* ---------- hero: live Kanban board ---------- */
.qm-vis{position:relative;width:100%}
.qm-board{background:var(--bg-surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 34px 70px -22px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.09)}
.qm-board__bar{display:flex;align-items:center;gap:9px;background:var(--color-midnight-800);padding:11px 15px;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.qm-board__dots{display:flex;gap:5px}
.qm-board__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.24)}
.qm-board__live{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.qm-board__live i{width:7px;height:7px;border-radius:50%;background:var(--color-success-500);animation:qmPulse var(--dur-pulse) var(--ease-in-out) infinite}
@keyframes qmPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.qm-board__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:var(--bg-canvas)}
.qm-col{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:8px;min-height:180px}
.qm-col__h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)}
.qm-col__h span{font-family:var(--font-display);font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-secondary);white-space:nowrap}
.qm-col__n{font-family:var(--font-display);font-size:12px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--fg-primary)}
.qm-col__body{display:grid;gap:6px;align-content:start}

/* tinted column heads, one per stage */
.qm-col[data-col="0"]{border-color:var(--color-info-100)}
.qm-col[data-col="0"] .qm-col__n{color:var(--color-info-700)}
.qm-col[data-col="1"]{border-color:var(--color-warning-100)}
.qm-col[data-col="1"] .qm-col__n{color:var(--color-warning-700)}
.qm-col[data-col="2"]{border-color:var(--color-crimson-100)}
.qm-col[data-col="2"] .qm-col__n{color:var(--color-crimson-600)}
.qm-col[data-col="3"]{border-color:var(--color-success-100)}
.qm-col[data-col="3"] .qm-col__n{color:var(--color-success-700)}

/* queue cards */
.qm-t{background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-xs);padding:6px 8px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;transition:background var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out)}
.qm-t--enter{animation:qmIn var(--dur-medium) var(--ease-out)}
/* transform only — a stalled or throttled animation must never hide a tile */
@keyframes qmIn{from{transform:translateY(7px)}to{transform:none}}
.qm-t__tok{font-family:var(--font-display);font-size:10px;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--fg-primary);background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-xs);padding:2px 5px;flex-shrink:0}
.qm-t__nm{width:100%;font-size:10px;color:var(--fg-secondary);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qm-t--live{background:var(--color-crimson-50);border-color:var(--color-crimson-300)}
.qm-t--live .qm-t__tok{background:var(--color-crimson-500);border-color:var(--color-crimson-500);color:#fff}
/* completed tiles read as done via a muted ground and token chip, not via
   opacity — a tile-level opacity would composite with the name colour and
   drop it below AA. */
.qm-t--done{background:var(--bg-surface);border-color:var(--border-subtle)}
.qm-t--done .qm-t__tok{background:var(--color-success-50);border-color:var(--color-success-100);color:var(--color-success-700)}

/* footer strip: wait estimate + announcement */
.qm-board__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--border-subtle);background:var(--bg-surface)}
.qm-eta,.qm-ann{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-size:11px;font-weight:var(--fw-medium);color:var(--fg-secondary)}
.qm-eta svg{width:14px;height:14px;color:var(--color-warning-700);flex-shrink:0}
.qm-eta b,.qm-ann b{color:var(--fg-primary);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.qm-ann__bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.qm-ann__bars i{width:2.5px;background:var(--color-crimson-500);border-radius:1px;animation:qmBar 1s var(--ease-in-out) infinite}
.qm-ann__bars i:nth-child(1){height:5px;animation-delay:0s}
.qm-ann__bars i:nth-child(2){height:11px;animation-delay:.14s}
.qm-ann__bars i:nth-child(3){height:7px;animation-delay:.28s}
.qm-ann__bars i:nth-child(4){height:13px;animation-delay:.42s}
@keyframes qmBar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .qm-ann__bars i,.qm-board__live i{animation:none}
  .qm-t{transition:none}
  .qm-t--enter{animation:none}
}

@media(max-width:1180px){
  .qm-col{min-height:160px}
}
@media(max-width:820px){
  .qm-board__cols{grid-template-columns:1fr 1fr}
  .qm-col{min-height:0}
}
@media(max-width:560px){
  .qm-board__foot{justify-content:flex-start}
}

/* definition frame carries a 1:1 photo on this page — match the aspect so it
   fills with no crop, instead of the 1484/1060 tablet ratio inherited from
   the appointment page. */
.as-dph--img{aspect-ratio:1/1}
@media(max-width:640px){.as-dph--img{aspect-ratio:1/1}}

/* ---------- doctor availability strip ---------- */
.qm-board__docs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 0;background:var(--bg-canvas)}
.qm-doc{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10.5px;font-weight:var(--fw-semibold);color:var(--fg-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:4px 9px;white-space:nowrap}
.qm-doc i{width:6px;height:6px;border-radius:50%;background:var(--color-success-500);flex-shrink:0}
.qm-doc em{font-style:normal;font-weight:var(--fw-medium);color:var(--fg-secondary);font-size:9.5px}
.qm-doc.is-on{border-color:var(--color-crimson-200);background:var(--color-crimson-50)}
.qm-doc--break i{background:var(--color-warning-500)}
.qm-doc--break em{color:var(--color-warning-700)}

/* ---------- column sub-labels ---------- */
.qm-col__sub{display:block;font-size:9px;color:var(--fg-secondary);line-height:1.3;margin:-4px 0 8px}

/* ---------- richer queue tiles ---------- */
.qm-t{align-items:flex-start}
.qm-t__tok{margin-top:1px}
.qm-t__col{display:flex;flex-direction:column;gap:1px;min-width:0}
.qm-t__mt{font-size:9px;color:var(--fg-secondary);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qm-t--live .qm-t__mt{color:var(--color-crimson-700)}
.qm-t--done .qm-t__mt{color:var(--color-success-700)}

/* ---------- narration bar ---------- */
.qm-board__say{display:flex;align-items:center;gap:9px;padding:9px 14px;background:var(--color-info-50);border-top:1px solid var(--color-info-100)}
.qm-say__ic{width:20px;height:20px;border-radius:var(--radius-xs);background:var(--bg-surface);color:var(--color-info-700);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qm-say__ic svg{width:12px;height:12px}
.qm-say__tx{font-size:11px;color:var(--color-info-700);line-height:1.4}
.qm-say__tx b{font-weight:var(--fw-bold);color:var(--fg-primary)}
.qm-board__say.is-flash{animation:qmFlash .5s var(--ease-out)}
@keyframes qmFlash{0%{background:var(--color-crimson-50);border-top-color:var(--color-crimson-100)}100%{background:var(--color-info-50);border-top-color:var(--color-info-100)}}
@media (prefers-reduced-motion:reduce){.qm-board__say.is-flash{animation:none}}

@media(max-width:560px){
  .qm-board__docs{padding:9px 10px 0}
  .qm-doc em{display:none}
  .qm-say__tx{font-size:10.5px}
}

/* ---------- definition visual: smaller frame on this page ---------- */
.as-def__grid{grid-template-columns:1fr 0.82fr}
.as-dvis{padding:0 34px}
@media(max-width:1180px){.as-dvis{padding:0 26px}}
@media(max-width:900px){.as-def__grid{grid-template-columns:1fr}.as-dvis{padding:0 12%}}
@media(max-width:640px){.as-dvis{padding:0}}

/* ---------- tracked patient tile ---------- */
.qm-t--trk{background:var(--color-crimson-50);border-color:var(--color-crimson-500);box-shadow:0 0 0 3px rgba(220,16,46,.14)}
.qm-t--trk .qm-t__nm{color:var(--fg-primary);font-weight:var(--fw-semibold)}
.qm-t--trk .qm-t__mt{color:var(--color-crimson-700)}
.qm-t--trk.qm-t--done{background:var(--color-success-50);border-color:var(--color-success-500);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.qm-t--trk.qm-t--done .qm-t__flag{background:var(--color-success-500)}
.qm-t--trk.qm-t--done .qm-t__mt{color:var(--color-success-700)}

/* ---------- tracking trail ---------- */
.qm-board__trail{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 14px;background:var(--bg-surface);border-top:1px solid var(--border-subtle)}
.qm-trail__who{font-family:var(--font-display);font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-secondary);white-space:nowrap}
.qm-trail__who b{color:var(--color-crimson-600);text-transform:none;letter-spacing:0;font-size:11px}
.qm-trail__steps{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.qm-trail__s{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-size:9.5px;font-weight:var(--fw-semibold);color:var(--fg-secondary);background:var(--bg-canvas);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:3px 8px;white-space:nowrap;transition:color var(--dur-medium) var(--ease-out),background var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out)}
.qm-trail__s i{width:5px;height:5px;border-radius:50%;background:var(--border-default);flex-shrink:0;transition:background var(--dur-medium) var(--ease-out)}
.qm-trail__s.is-on{color:var(--fg-secondary);border-color:var(--color-crimson-200);background:var(--bg-surface)}
.qm-trail__s.is-on i{background:var(--color-crimson-400)}
.qm-trail__s.is-now{color:#fff;background:var(--color-crimson-500);border-color:var(--color-crimson-500)}
.qm-trail__s.is-now i{background:#fff;animation:qmPulse var(--dur-pulse) var(--ease-in-out) infinite}
@media (prefers-reduced-motion:reduce){.qm-trail__s.is-now i{animation:none}}
@media(max-width:560px){
  .qm-board__trail{padding:8px 10px}
  .qm-trail__who{font-size:9px}
  .qm-trail__s{font-size:9px;padding:3px 6px}
}

/* ---------- fixed board geometry ----------
   The tracked card moves between columns, so each column's tile count changes
   by ±1. Pinning the body height means the board never grows or shrinks —
   4 tiles is the ceiling (3 resident waiting + the tracked card). */
.qm-col{min-height:0}

/* deterministic tile box: 40px each, so 4 tiles + 3×6px gaps = 178px */

/* ---------- tile: stacked, so name and meta each get the full 72px ----------
   The 4-up column grid leaves a 72px content box. A token chip and a text
   flag on the same row as the name crushed it to 0, so the tile stacks:
   token row, then name, then meta — each on its own full-width line. */
.qm-t{display:flex;flex-direction:column;align-items:stretch;gap:1px;height:58px;box-sizing:border-box;padding:6px 8px}
.qm-t__top{display:flex;align-items:center;gap:5px;min-width:0}
.qm-t__tok{flex-shrink:0}
.qm-t__flag{width:7px;height:7px;border-radius:50%;background:var(--color-crimson-500);box-shadow:0 0 0 3px rgba(220,16,46,.2);flex-shrink:0;margin-left:auto}
.qm-t--trk.qm-t--done .qm-t__flag{background:var(--color-success-500);box-shadow:0 0 0 3px rgba(22,163,74,.2)}
.qm-t__nm,.qm-t__mt{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qm-t__nm{font-size:10px;line-height:1.3}
/* 3 tiles + 2×6px gaps = 186px — the tallest column is 2 residents + the tracked card */

/* Single source of truth for column height: 3 × 58px tile + 2 × 6px gap = 186px.
   Pinned at all widths — releasing it to auto let the board jump 64px on the
   beat where the tracked card sits in consult. */
.qm-col__body{height:186px;overflow:hidden;align-content:start}

/* The token chip inherited body line-height (1.65 → 16.5px on a 10px font),
   rendering 22.1px tall and overrunning the tile's 44px content box, which
   flex-shrink then took out of the name and meta descenders. Cap the chip's
   line box and forbid the text spans from shrinking below their own. */
.qm-t__tok{line-height:1.2}
.qm-t__nm,.qm-t__mt{flex-shrink:0}