/* Room tablet — landscape 16:10, glanceable across a hallway. */

body.display { display: flex; flex-direction: column; }

.hero {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(2px, .8vmin, 8px);
  text-align: center;
  padding: 0 clamp(24px, 5vmin, 56px);
}

.ico {
  width: clamp(30px, 5.4vmin, 54px); height: clamp(30px, 5.4vmin, 54px);
  transition: color .7s ease;
}

.word {
  font-size: clamp(64px, 19vmin, 210px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: .95;
  transition: color .7s ease;
}

[data-state="busy"] :is(.word, .ico) { color: var(--busy-word); }
[data-state="free"] :is(.word, .ico) { color: var(--free-word); }
[data-state="soon"] :is(.word, .ico) { color: var(--amber-word); }

.sub {
  font-size: clamp(16px, 3vmin, 30px);
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* state swap animation — word/sub rise softly on change */
.hero.swap .word, .hero.swap .sub { animation: rise .45s cubic-bezier(.16,1,.3,1); }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- agenda rail (bottom) ---- */
.agenda {
  padding: 0 clamp(24px, 4.5vmin, 48px) clamp(18px, 3.4vmin, 36px);
  display: flex; flex-direction: column; gap: clamp(6px, 1.2vmin, 12px);
  max-width: 720px;
}
.agenda .row {
  display: flex; align-items: center; gap: clamp(8px, 1.6vmin, 16px);
  font-size: clamp(13px, 2vmin, 20px);
  font-variant-numeric: tabular-nums;
}
.agenda .row .dot { animation: none; }
.agenda .row.now .dot { animation: breathe 3.2s ease-in-out infinite; }
.agenda .row b   { font-weight: 700; min-width: 3.4em; }
.agenda .row .who { color: var(--ink-2); font-weight: 400; }
.agenda .row.past { opacity: .38; }
.agenda .row.now  { font-weight: 700; }
.agenda .row.gap  { color: var(--free-label); }