/* SM Attendant Display — public /display styles (also used by the admin previews) */
:root {
  --ink: #1c2414;        /* near-black olive, matches logo lettering */
  --muted: #55604a;      /* address text */
  --accent: #5d6c3c;     /* olive from the logo bricks */
  --line: #d6d9c8;       /* subtle column dividers */
  --bg: #ffffff;
  --logo-ratio: 1.5785;  /* 925 x 586, never stretched */
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.screen img { display: block; height: auto; pointer-events: none; }

/* ---------- Logo-only ---------- */
.logo-only { justify-content: center; padding: 6vmin; }
.logo-only img {
  width: min(80vw, calc(74vh * var(--logo-ratio)));
}

/* ---------- Attendant notice ---------- */
.notice { padding: 4.5vh 2.5vw 5vh; }

.notice .logo {
  width: min(46vw, calc(24vh * var(--logo-ratio)));
  flex-shrink: 0;
}

.heading {
  margin: 3.2vh 0 0;
  font-size: clamp(24px, 6.2vmin, 78px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
  text-align: center;
}

.heading::after {
  content: "";
  display: block;
  width: 11vmin;
  height: 5px;
  margin: 2.4vh auto 0;
  background: var(--accent);
  opacity: .6;
  border-radius: 3px;
}

.people {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person {
  flex: 1 1 0;
  min-width: 0;
  padding: 2vh 1.8vw;
  text-align: center;
}

.person + .person { border-left: 2px solid var(--line); }

.name {
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.addr {
  margin-top: 1.6vh;
  color: var(--muted);
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Type scale by attendant count (landscape) */
[data-count="1"] .person { flex: 0 1 auto; max-width: 85vw; }
[data-count="1"] .name { font-size: clamp(36px, 12vmin, 150px); }
[data-count="1"] .addr { font-size: clamp(22px, 6vmin, 76px); }

[data-count="2"] .name { font-size: clamp(30px, 8.6vmin, 110px); }
[data-count="2"] .addr { font-size: clamp(18px, 4.8vmin, 60px); }

[data-count="3"] .name { font-size: clamp(26px, 6.8vmin, 88px); }
[data-count="3"] .addr { font-size: clamp(16px, 4vmin, 50px); }

/* ---------- Portrait / narrow: stack entries ---------- */
@media (orientation: portrait) {
  .notice { padding: 4vh 6vw 4vh; }
  .notice .logo { width: min(62vw, calc(17vh * var(--logo-ratio))); }
  .heading { font-size: clamp(24px, 7.4vw, 78px); }

  .people { flex-direction: column; justify-content: space-evenly; }
  .person { flex: 0 0 auto; width: 100%; padding: 2.4vh 0; }
  .person + .person { border-left: 0; border-top: 2px solid var(--line); }

  [data-count="1"] .name { font-size: clamp(36px, 12vw, 140px); }
  [data-count="1"] .addr { font-size: clamp(22px, 6.4vw, 72px); }
  [data-count="2"] .name { font-size: clamp(32px, 10vw, 120px); }
  [data-count="2"] .addr { font-size: clamp(20px, 5.6vw, 64px); }
  [data-count="3"] .name { font-size: clamp(28px, 8.6vw, 100px); }
  [data-count="3"] .addr { font-size: clamp(18px, 5vw, 56px); }
}

/* ---------- Offline indicator (status only, not interactive) ---------- */
.offline-dot {
  position: fixed;
  /* Kept clear of rounded screen corners, notches and browser/system bars. */
  right: calc(env(safe-area-inset-right, 0px) + max(18px, 2.2vmin));
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(18px, 2.2vmin));
  width: max(10px, 1.1vmin);
  height: max(10px, 1.1vmin);
  border-radius: 50%;
  background: #c08a2c;
  opacity: .55;
  pointer-events: none;
  /* Slow, gentle pulse: noticeable when looking for it, calm otherwise. */
  animation: offline-pulse 3.2s ease-in-out infinite;
}

@keyframes offline-pulse {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50%      { opacity: .8; transform: scale(1.15); }
}

.offline-dot[hidden] { display: none; }

/* ---------- Cross-fade between screens ---------- */
.screen {
  background: var(--bg);
  transition: opacity .6s ease;
}
.screen.entering { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .screen { transition: none; }
}