@font-face {
  src: url("arimo-webfont.woff") format("woff");
  font-family: "arimoregular";
  font-weight: normal;
  font-style: normal;
}

:root {
  --ink: #101413;
  --muted: #5d6b67;
  --calm-bg: #eef1f0;
  --calm-accent: #6cbfae;
  --alert-bg: #ffd400;
  --alert-accent: #8a6a00;
  --brand: #00b5d7;
}

.scene,
.scene * {
  box-sizing: border-box;
}

.scene p {
  margin: 0;
}

.scene {
  font-family: "arimoregular", Cambria;
  color: var(--ink);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 3vh 2.5vw;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 3vh;
}

.title {
  font-size: 3.6vw;
  font-weight: 700;
}

.title::after {
  content: "";
  display: inline-block;
  width: 1vw;
  height: 1vw;
  margin-left: 1vw;
  border-radius: 50%;
  background-color: var(--brand);
}

#qviewPageNumber {
  font-size: 1.8vw;
  color: var(--muted);
}

/* The list takes whatever the header and footer leave, so the board always
   fills the screen. */
.main {
  flex: 1;
  min-height: 0;
  /* A guard, not the mechanism: rows are sized to fit, but if a future change
     ever overflows the list it must clip here rather than draw over the clock. */
  overflow: hidden;
}

/* Tiles are sized to their content and reflow by clinician count, so a board
   only pages when a practice genuinely exceeds one screen. */
#qviewDoctorList {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 2vh 1.5vw;
  height: 100%;
}

/* The renderer emits one column per check-in after the name. This board shows
   clinicians and their status only. */
#qviewDoctorList .column:not(:first-child) {
  display: none;
}

/* Tiles grow to fill the board, but only so far: the last page of a paged board
   can hold a single clinician, and an uncapped tile would blow that one name up
   to the full screen. */
#qviewDoctorList .row {
  flex: 1 1 26vw;
  max-height: 34vh;
  /* Flex items default to min-height:auto, which refuses to shrink below the
     name and status text, so a full board overflows and the last tiles are
     silently clipped rather than shown. */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2vh 2vw;
  background-color: var(--calm-bg);
  border-left: 0.7vw solid var(--calm-accent);
}

#qviewDoctorList .column:first-child {
  font-size: 3.4vw;
  font-weight: 700;
  line-height: 1.1;
}

/* Status is the answer the board exists to give, so it is stated in words on
   every tile rather than left to colour alone. */
#qviewDoctorList .column:first-child::after {
  content: "On time";
  display: block;
  margin-top: 1vh;
  font-size: 2.2vw;
  font-weight: 600;
  letter-spacing: 0.05vw;
  color: var(--muted);
}

/* Only a delayed clinic carries colour: a board where every tile shouts hides
   the one tile that matters. */
#qviewDoctorList .row[data-status="delayed"] {
  background-color: var(--alert-bg);
  border-left-color: var(--alert-accent);
}

#qviewDoctorList .row[data-status="delayed"] .column:first-child::after {
  content: "Delayed";
  color: var(--ink);
}

#qviewDoctorList .column[data-error="true"] {
  display: none;
}

/* An empty board must say so: a blank screen is indistinguishable from a
   broken one. The wording states only what no rows actually means, since a
   clinic that is not running and a clinic with nobody waiting look identical
   here.

   The message is held back for 10s. The player empties #player and re-injects
   the scene on every playlist cycle, so the list is legitimately empty for as
   long as the two check-in requests take; announcing "nobody is checked in"
   during that gap is wrong on a board that is about to show a full queue. The
   list element is recreated by each injection, so the delay restarts with it. */
@keyframes qview-empty-reveal {
  to {
    opacity: 1;
  }
}

#qviewDoctorList:empty::after {
  content: "No patients are currently checked in";
  opacity: 0;
  animation: qview-empty-reveal 0.5s linear 10s forwards;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6vw;
  font-weight: 600;
  color: var(--muted);
}

.footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 3vh;
}

.date-time {
  display: flex;
  align-items: center;
  gap: 1vw;
}

#time {
  font-size: 3.4vw;
  font-weight: 700;
  line-height: 1;
}

.date {
  font-size: 1.4vw;
  color: var(--muted);
  line-height: 1.3;
}