@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("/assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #f4f7fa;
  --muted: #94a8b8;
  --panel: #0d1d2a;
  --panel-deep: #07131d;
  --line: #294052;
  --provida-blue: #3c75b8;
  --provida-blue-bright: #6ca6e3;
  --provida-coral: #ff5068;
  --available: #5ce680;
  --away: #ffb83f;
  --busy: #ff536d;
  --ringing: #4ad5ff;
  --dnd: #bd8cff;
  --out-of-office: #8d91ff;
  --annual-leave: #ffdb66;
  --custom: #67a8ff;
  --offline: #788892;
  font-family: "Mona Sans", Arial, sans-serif;
  background: #06111a;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 10px 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% -12%, rgba(60, 117, 184, 0.28), transparent 36rem),
    #06111a;
}

button { font: inherit; }

.console-shell {
  width: min(1840px, calc(100% - 20px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #2b4f6c;
  border-radius: 16px;
  background: #081622;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.04);
}

.masthead,
.brand-lockup,
.live-readout,
.team-toolbar,
.team-heading,
.instrument-row,
.identity-meta,
.state-line,
.legend {
  display: flex;
  align-items: center;
}

.masthead-actions { position: relative; display: flex; align-items: center; gap: 9px; }

.masthead {
  justify-content: space-between;
  gap: 28px;
  min-height: 94px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: #081521;
}

.brand-lockup { gap: 22px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 196px;
  height: 62px;
  flex: 0 0 auto;
}

.brand-mark img {
  display: block;
  width: 196px;
  height: auto;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, 0.22));
}

.title-lockup { min-width: 0; }

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  margin-bottom: 3px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.title-lockup p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.live-readout {
  gap: 13px;
  min-width: 220px;
  padding: 12px 15px;
  border: 1px solid #28485f;
  border-radius: 12px;
  background: #06111a;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55);
}

.connection-lamp,
.key-light,
.empty-lamp {
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
}

.connection-lamp {
  width: 18px;
  height: 18px;
  background: var(--away);
  box-shadow: 0 0 16px rgba(255, 184, 63, 0.65), inset 0 2px 3px rgba(255, 255, 255, 0.4);
}

.connection-lamp[data-state="live"] { background: var(--available); box-shadow: 0 0 18px rgba(92, 230, 128, 0.72), inset 0 2px 3px rgba(255, 255, 255, 0.45); }
.connection-lamp[data-state="error"] { background: var(--busy); box-shadow: 0 0 18px rgba(255, 83, 109, 0.62); }
.connection-lamp[data-state="reconnecting"],
.connection-lamp[data-state="warning"] { animation: connection-blink 1.3s steps(2, end) infinite; }

.live-readout div { display: grid; gap: 2px; }
.connection-label { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.last-update { color: var(--muted); font-size: 11px; }

.settings-menu { position: relative; }
.settings-menu > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #315169;
  border-radius: 10px;
  color: #c6d3dc;
  background: #091722;
  cursor: pointer;
  list-style: none;
}
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-menu > summary svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.settings-menu > summary:hover { border-color: #6386a0; }
.settings-menu[open] > summary { color: #fff; border-color: var(--provida-blue-bright); background: #10283a; }
.settings-menu > summary:focus-visible { outline: 3px solid var(--ringing); outline-offset: 3px; }
.settings-popover {
  position: absolute;
  z-index: 10;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  gap: 14px;
  width: min(360px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid #3a5a70;
  border-radius: 12px;
  background: #081722;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.settings-popover strong, .settings-popover span { display: block; }
.settings-popover strong { font-size: 12px; }
.settings-popover span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; }
.settings-cache { padding-top: 13px; border-top: 1px solid #294557; }
.visibility-settings { padding-top: 13px; border-top: 1px solid #294557; }
.visibility-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.visibility-settings > summary::-webkit-details-marker { display: none; }
.visibility-settings > summary span { min-width: 0; margin: 0; }
.visibility-settings > summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.visibility-settings > summary svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 160ms ease;
}
.visibility-settings[open] > summary svg { transform: rotate(180deg); }
.visibility-settings > summary:focus-visible { outline: 3px solid var(--ringing); outline-offset: 3px; }
.visibility-panel { padding-top: 10px; }
#visibility-list {
  display: grid;
  gap: 12px;
  max-height: min(310px, calc(100vh - 360px));
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-color: #54758c #0a1823;
}
.visibility-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.visibility-group legend {
  margin-bottom: 5px;
  color: #8fa5b4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.visibility-option {
  display: grid;
  grid-template-columns: 18px 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 3px;
  color: #dce6ec;
  cursor: pointer;
  font-size: 12px;
}
.visibility-option + .visibility-option { border-top: 1px solid #1e3545; }
.visibility-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--provida-blue-bright); }
.visibility-option b { color: var(--provida-blue-bright); font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 13px; letter-spacing: 0.06em; }
.visibility-option em { overflow: hidden; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.settings-popover button, .auth-card button {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #5784a8;
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  background: #245f9a;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.settings-popover button:hover, .auth-card button:hover { background: #3276b7; }
.settings-popover button:disabled, .auth-card button:disabled { cursor: wait; opacity: 0.55; }
.settings-popover .quiet-button { border-color: #334d60; background: transparent; }

.auth-page { display: grid; place-items: center; padding: 24px; }
.auth-card {
  display: grid;
  gap: 28px;
  width: min(480px, 100%);
  padding: clamp(28px, 6vw, 48px);
  border: 1px solid #31526b;
  border-radius: 18px;
  background: #091824;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}
.auth-card img { width: 196px; height: auto; }
.auth-card .eyebrow { margin: 0 0 9px; color: var(--provida-blue-bright); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.auth-card h1 { margin-bottom: 12px; font-size: clamp(36px, 10vw, 58px); }
.auth-card p { margin-bottom: 0; color: var(--muted); }
.auth-card button { margin: 0; min-height: 46px; }
.auth-card small { color: #768b9a; font-size: 9px; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }

.queue-panel,
.team-panel { padding: 16px 22px 18px; }

.queue-panel {
  border-bottom: 1px solid var(--line);
  background: #07131e;
}

.queue-panel[hidden] { display: none; }

.panel-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 3px 13px;
}

.panel-titlebar h2,
.team-heading h2 {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-titlebar p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.panel-titlebar > span,
.team-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}

.queue-card,
.person-card {
  --signal: var(--offline);
  position: relative;
  overflow: hidden;
  border: 1px solid #304b60;
  border-radius: 14px;
  background: #0c1b28;
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.27), inset 0 1px rgba(255, 255, 255, 0.035);
}

.queue-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 164px;
}

.queue-state-ready { --signal: var(--available); }
.queue-state-active { --signal: var(--ringing); }
.queue-state-ringing { --signal: var(--ringing); }
.queue-state-waiting { --signal: var(--away); }
.queue-state-pressure { --signal: var(--provida-coral); }
.queue-state-unstaffed { --signal: var(--dnd); }
.queue-state-closed { --signal: var(--offline); }

.queue-light-assembly,
.light-assembly {
  display: grid;
  place-items: center;
  border-right: 1px solid #2b4559;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 11%, transparent), transparent 66%);
}

.queue-lamp-bezel,
.lamp-bezel {
  display: grid;
  place-items: center;
  border: 2px solid #52616c;
  border-radius: 50%;
  background: linear-gradient(145deg, #071018, #34414a 48%, #060c11 52%, #202c35);
  box-shadow: 0 9px 13px rgba(0, 0, 0, 0.58), inset 0 0 0 5px #071018, inset 0 0 0 6px #667581;
}

.queue-lamp-bezel { width: 88px; height: 88px; }
.lamp-bezel { width: 66px; height: 66px; }

.queue-signal-lamp,
.signal-lamp {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--signal) 65%, #071018);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.22) 9%, transparent 18%),
    radial-gradient(circle at 50% 58%, var(--signal) 0 38%, color-mix(in srgb, var(--signal) 58%, #05080a) 72%, #05090c 100%);
  box-shadow: 0 0 13px color-mix(in srgb, var(--signal) 88%, transparent), 0 0 36px color-mix(in srgb, var(--signal) 38%, transparent), inset 0 -9px 14px rgba(0, 0, 0, 0.46);
}

.queue-signal-lamp { width: 62px; height: 62px; }
.signal-lamp { width: 45px; height: 45px; }

.queue-state-closed .queue-signal-lamp,
.state-offline .signal-lamp { filter: saturate(0.2) brightness(0.62); box-shadow: inset 0 -8px 13px rgba(0, 0, 0, 0.55); }

.queue-state-ringing .queue-signal-lamp,
.state-ringing .signal-lamp { animation: ring-pulse 0.82s ease-in-out infinite alternate; }

.queue-detail {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 16px 19px 15px;
}

.queue-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.queue-title h3 {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: 1.08;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.queue-number {
  flex: 0 0 auto;
  color: var(--provida-blue-bright);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.queue-status {
  margin: 6px 0 15px;
  color: var(--signal);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.queue-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid #2d4659;
}

.queue-metrics div + div { padding-left: 14px; border-left: 1px solid #233b4e; }
.queue-metrics dt { color: #afbfca; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.queue-metrics dd { margin: 3px 0 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 30px; line-height: 1; }
.queue-metrics .waiting dd { color: var(--away); }
.queue-metrics .active dd { color: var(--ringing); }
.queue-metrics .ready dd { color: var(--available); }
.queue-metrics .unavailable dd { color: var(--away); }

.empty-state {
  place-items: center;
  min-height: 190px;
  color: var(--muted);
}

.empty-state:not([hidden]) { display: grid; }
.empty-state p { margin: 0; }
.empty-lamp { width: 34px; height: 34px; background: #334552; box-shadow: inset 0 -6px 9px #071018; }

.team-panel { background: #0a1824; }

.team-toolbar {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 11px;
}

.team-heading { align-items: baseline; gap: 12px; margin-right: auto; }

.instrument-row { gap: 7px; }

.counter {
  display: grid;
  min-width: 78px;
  padding: 7px 11px;
  border-left: 2px solid #35546b;
  background: #07131d;
}

.counter span {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.counter small { margin-top: 3px; color: #acbdc8; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.counter-available span { color: var(--available); }
.counter-busy span { color: var(--busy); }
.counter-away span { color: var(--away); }
.counter-leave span { color: var(--annual-leave); }

.away-board {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  margin: 2px -22px 14px;
  padding: 12px 22px;
  border-top: 1px solid #345066;
  border-bottom: 1px solid #263f52;
  background: #07141e;
}

.away-board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-right: 18px;
  border-right: 1px solid #2c4659;
}

.away-board-heading h3 {
  margin: 0;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.away-board-heading p {
  margin: 3px 0 0;
  color: #9eb2c2;
  font-size: 11px;
  line-height: 1.35;
}

.away-board-heading > strong {
  color: var(--away);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 35px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.away-board[data-calendar-state="warning"] .away-board-heading p,
.away-board[data-calendar-state="error"] .away-board-heading p { color: var(--away); }

.away-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.away-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid #344e61;
  border-radius: 10px;
  background: #0d1d29;
}

.away-item-lamp {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--away);
  box-shadow: 0 4px 12px rgba(255, 184, 63, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

.away-list .is-leave .away-item-lamp { background: var(--annual-leave); box-shadow: 0 4px 12px rgba(255, 219, 102, 0.34), inset 0 2px 3px rgba(255, 255, 255, 0.48); }
.away-list .is-dnd .away-item-lamp,
.away-list .is-out-of-office .away-item-lamp { background: var(--dnd); }
.away-list li div { min-width: 0; }
.away-list li strong,
.away-list li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.away-list li strong { font-size: 14px; }
.away-list li div span { margin-top: 2px; color: #b8c7d1; font-size: 11px; }

.away-clear {
  align-self: center;
  margin: 0;
  color: #b6c7d2;
  font-size: 13px;
}

.filter-bank { display: flex; flex-wrap: wrap; gap: 6px; }

.filter-button {
  border: 1px solid #3a566b;
  border-radius: 7px;
  padding: 8px 12px;
  color: #a9bac7;
  background: #0d1d2a;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.filter-button:hover { color: #fff; border-color: #5a7890; }
.filter-button:focus-visible { outline: 3px solid var(--ringing); outline-offset: 3px; }
.filter-button.is-active { color: #fff; border-color: var(--provida-blue-bright); background: var(--provida-blue); }

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.person-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  min-height: 132px;
}

.state-available { --signal: var(--available); }
.state-away { --signal: var(--away); }
.state-busy { --signal: var(--busy); }
.state-ringing { --signal: var(--ringing); }
.state-dnd { --signal: var(--dnd); }
.state-out-of-office { --signal: var(--out-of-office); }
.state-annual-leave { --signal: var(--annual-leave); }
.state-custom { --signal: var(--custom); }
.state-offline { --signal: var(--offline); }

.identity {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 13px 15px 12px;
}
.identity-meta { justify-content: space-between; gap: 10px; }

.extension {
  color: var(--provida-blue-bright);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.initials { color: #8da1af; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }

.identity h3 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.3em;
  margin: 6px 0;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.06;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.state-line { align-items: baseline; gap: 8px; }
.state-line strong { color: var(--signal); font-size: 13px; letter-spacing: 0.045em; text-transform: uppercase; }
.state-line span { overflow: hidden; color: #a9bbc7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.detail-lines { display: grid; gap: 4px; margin-top: 8px; }
.detail-lines:empty { display: none; }
.detail-lines p { display: flex; min-width: 0; gap: 6px; margin: 0; font-size: 11px; line-height: 1.3; }
.detail-lines strong { flex: 0 0 auto; color: #d7e3ea; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.detail-lines span { overflow: hidden; color: #b5c5cf; text-overflow: ellipsis; white-space: nowrap; }
.detail-lines .leave-detail strong { color: var(--annual-leave); }
.detail-lines .call-detail strong { color: var(--ringing); }
.person-card.has-leave { box-shadow: 0 9px 24px rgba(0, 0, 0, 0.27), inset 0 3px var(--annual-leave); }

.legend {
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 11px 22px;
  border-top: 1px solid var(--line);
  background: #06111a;
}

.legend span { display: flex; align-items: center; gap: 7px; color: #becbd4; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.legend small { margin-left: auto; color: #8ca0ae; font-size: 10px; letter-spacing: 0.05em; }
.key-light { width: 9px; height: 9px; background: var(--offline); box-shadow: 0 0 7px currentColor; }
.key-light.available { background: var(--available); }
.key-light.away { background: var(--away); }
.key-light.busy { background: var(--busy); }
.key-light.ringing { background: var(--ringing); }
.key-light.dnd { background: var(--dnd); }
.key-light.annual-leave { background: var(--annual-leave); }

@keyframes ring-pulse { to { filter: brightness(1.45); transform: scale(1.035); box-shadow: 0 0 18px var(--ringing), 0 0 45px rgba(74, 213, 255, 0.62), inset 0 -8px 13px rgba(0, 0, 0, 0.3); } }
@keyframes connection-blink { 50% { opacity: 0.3; } }

@media (max-width: 980px) {
  .team-heading { width: 100%; }
  .instrument-row { margin-right: auto; }
  .away-board { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { padding: 0; }
  .console-shell { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .masthead { display: grid; align-items: flex-start; padding: 18px; }
  .brand-mark { width: 154px; height: 52px; }
  .brand-mark img { width: 154px; }
  .title-lockup p { display: none; }
  .masthead-actions { width: 100%; }
  .live-readout { width: 100%; min-width: 0; }
  .queue-panel, .team-panel { padding: 18px 14px 22px; }
  .away-board { grid-template-columns: 1fr; gap: 12px; margin-right: -14px; margin-left: -14px; padding: 15px 14px; }
  .away-board-heading { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #2c4659; }
  .queue-grid { grid-template-columns: 1fr; }
  .filter-bank { width: 100%; }
  .filter-button { flex: 1 1 auto; }
  .legend small { width: 100%; margin: 4px 0 0; }
}

@media (max-width: 540px) {
  .brand-lockup { align-items: flex-start; gap: 13px; }
  .queue-card { grid-template-columns: 108px minmax(0, 1fr); min-height: 175px; }
  .queue-lamp-bezel { width: 84px; height: 84px; }
  .queue-signal-lamp { width: 59px; height: 59px; }
  .queue-detail { padding: 17px 15px; }
  .queue-title { display: block; }
  .queue-title h3 { white-space: normal; }
  .queue-number { display: block; margin-top: 3px; }
  .queue-metrics div + div { padding-left: 8px; }
  .people-grid { grid-template-columns: 1fr; }
  .person-card { grid-template-columns: 88px minmax(0, 1fr); min-height: 122px; }
  .lamp-bezel { width: 64px; height: 64px; }
  .signal-lamp { width: 43px; height: 43px; }
  .instrument-row { display: grid; width: 100%; grid-template-columns: repeat(5, 1fr); }
  .counter { min-width: 0; padding: 7px 8px; }
  .counter small { font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}