/* ==========================================================================
   Kiosk mode - activated with ?mode=kiosk (or the staff settings panel).
   Target: a wall-mounted TV at 1920x1080, 2560x1440 or 3840x2160, viewed
   from across the retail floor. No scrolling, no visible chrome.
   ========================================================================== */

body.kiosk {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

body.kiosk .skip-link,
body.kiosk #settings-btn,
body.kiosk .schedule,
body.kiosk .disclaimer { display: none; }

body.kiosk #fullscreen-btn { opacity: .12; }
body.kiosk #fullscreen-btn:hover,
body.kiosk #fullscreen-btn:focus-visible { opacity: 1; }

body.kiosk .dash {
  height: calc(100vh - var(--topbar-h) - var(--ticker-h));
  height: calc(100dvh - var(--topbar-h) - var(--ticker-h));
  padding-bottom: var(--gap);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "hero hero"
    "map cards";
  overflow: hidden;
}

body.kiosk .cards-panel,
body.kiosk .map-panel,
body.kiosk .reminder-slide { min-height: 0; overflow: hidden; }

body.kiosk .cards { align-content: start; }
body.kiosk .map-stage svg { max-height: none; height: 100%; }

/* Bigger type for across-the-room legibility */
body.kiosk {
  --pad: clamp(1rem, 1.5vw, 2.1rem);
}
body.kiosk .cd-box__num { font-size: clamp(3rem, 7.2vh, 8rem); }
body.kiosk .cd-box__label { font-size: clamp(.6rem, 1.1vh, 1rem); }
body.kiosk .hero__carrier { font-size: clamp(1.8rem, 4.4vh, 4rem); }
body.kiosk .hero__service { font-size: clamp(1rem, 2.1vh, 1.9rem); }
body.kiosk .hero__shipby { font-size: clamp(.95rem, 1.9vh, 1.6rem); }
body.kiosk .panel__title { font-size: clamp(1rem, 1.7vh, 1.6rem); }
body.kiosk .dcard__carrier { font-size: clamp(.95rem, 1.7vh, 1.5rem); }
body.kiosk .dcard__service { font-size: clamp(.85rem, 1.5vh, 1.3rem); }
body.kiosk .dcard__days { font-size: clamp(1.8rem, 3.6vh, 3.4rem); }
body.kiosk .dcard__date { font-size: clamp(.78rem, 1.3vh, 1.1rem); }
body.kiosk .ticker__track { font-size: clamp(.85rem, 1.5vh, 1.3rem); }
body.kiosk .reminder-list li { font-size: clamp(1rem, 2vh, 1.75rem); }

/* Trim cards that would overflow the fixed kiosk column */
body.kiosk .dcard__note { display: none; }

/* ---------- Rotation slides ---------- */
body.kiosk .rotating { animation: slide-in .5s ease both; }
@keyframes slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.slide-dots {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--ticker-h) + .5rem); z-index: 9;
  display: none; gap: .45rem;
}
body.kiosk.is-rotating .slide-dots { display: flex; }
.slide-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.26); border: 0; padding: 0;
  transition: background .25s ease, width .25s ease;
}
.slide-dot[aria-current="true"] { background: var(--red); width: 26px; border-radius: 999px; }

/* ---------- 4K: scale the whole thing up ---------- */
@media (min-width: 3000px) {
  body.kiosk { --topbar-h: 150px; --ticker-h: 86px; --gap: 1.6rem; --pad: 2.4rem; --r-lg: 30px; --r-md: 20px; }
  body.kiosk .brand-logo { height: 86px; }
  body.kiosk .topbar__h1 { font-size: 3.6rem; }
  body.kiosk .topbar__sub { font-size: 1.1rem; }
  body.kiosk .clock__time { font-size: 2.6rem; }
  body.kiosk .clock__date { font-size: 1.15rem; }
  body.kiosk .xmas-chip__num { font-size: 3.2rem; }
  body.kiosk .xmas-chip__label { font-size: .95rem; }
  body.kiosk .map-legend { font-size: 1rem; }
}

/* Kiosk on a portrait screen (some stores mount TVs vertically) */
@media (orientation: portrait) {
  body.kiosk .dash {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "hero"
      "cards"
      "map";
  }
}

/* ==========================================================================
   Kiosk with the map hidden - the across-the-store reading layout.
   Two rows: a full-width countdown, then deadline cards in two columns.
   Everything is sized in vh so it scales with the TV, not the window width.
   ========================================================================== */

body.kiosk.no-map .dash {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "hero"
    "cards";
}

body.kiosk.no-map .cards-panel,
body.kiosk.no-map .reminder-slide { display: flex; flex-direction: column; }

body.kiosk.no-map .cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 1.1vh, 1.1rem);
  /* Fill the column. Rows are auto-sized, so they only ever grow into spare
     space - they never squash content, which keeps the card fitter honest. */
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}

/* There is room for the destination line again. */
body.kiosk.no-map .dcard__note { display: block; }

/* ---------- Type scale: tuned for a 55" screen across a shop floor ---------- */
body.kiosk.no-map .cd-box__num     { font-size: clamp(4rem, 13vh, 14rem); }
body.kiosk.no-map .cd-box__label   { font-size: clamp(.75rem, 1.6vh, 1.5rem); letter-spacing: .24em; }
body.kiosk.no-map .cd-box__text    { font-size: clamp(1.1rem, 2.4vh, 2.2rem); }
body.kiosk.no-map .cd-box__sub     { font-size: clamp(.85rem, 1.7vh, 1.5rem); }

body.kiosk.no-map .hero__eyebrow   { font-size: clamp(.8rem, 1.6vh, 1.4rem); }
body.kiosk.no-map .hero__carrier   { font-size: clamp(2.4rem, 6.4vh, 6.5rem); }
body.kiosk.no-map .hero__service   { font-size: clamp(1.3rem, 3.1vh, 3rem); }
body.kiosk.no-map .hero__shipby    { font-size: clamp(1.15rem, 2.7vh, 2.5rem); }
body.kiosk.no-map .hero__also      { font-size: clamp(.9rem, 1.8vh, 1.6rem); }
body.kiosk.no-map .hero__cutoffnote{ font-size: clamp(.85rem, 1.6vh, 1.4rem); }

body.kiosk.no-map .panel__title    { font-size: clamp(1.2rem, 2.3vh, 2.1rem); }
body.kiosk.no-map .chip            { font-size: clamp(.8rem, 1.6vh, 1.4rem); padding: .5rem 1.15rem; }

body.kiosk.no-map .dcard           { padding: clamp(.7rem, 1.5vh, 1.5rem) clamp(.9rem, 1.8vh, 1.8rem); }
body.kiosk.no-map .dcard__carrier  { font-size: clamp(1.15rem, 2.6vh, 2.4rem); }
body.kiosk.no-map .dcard__service  { font-size: clamp(1.05rem, 2.3vh, 2.1rem); }
body.kiosk.no-map .dcard__date     { font-size: clamp(1rem, 2.2vh, 1.9rem); }
body.kiosk.no-map .dcard__note     { font-size: clamp(.8rem, 1.6vh, 1.4rem); }
body.kiosk.no-map .dcard__days     { font-size: clamp(2.4rem, 5.6vh, 5.4rem); }
body.kiosk.no-map .dcard__dayslabel{ font-size: clamp(.7rem, 1.4vh, 1.2rem); }
body.kiosk.no-map .dcard__flag     { font-size: clamp(1rem, 2vh, 1.8rem); }
body.kiosk.no-map .status-pill     { font-size: clamp(.7rem, 1.35vh, 1.15rem); }
body.kiosk.no-map .confirm-tag     { font-size: clamp(.62rem, 1.2vh, 1rem); }

body.kiosk.no-map .reminder-list li     { font-size: clamp(1.15rem, 2.5vh, 2.3rem); }
body.kiosk.no-map .reminder-contact     { font-size: clamp(.9rem, 1.8vh, 1.6rem); }
body.kiosk.no-map .ticker__track        { font-size: clamp(.9rem, 1.8vh, 1.6rem); }

/* A narrow or portrait TV cannot hold two card columns. */
@media (max-width: 1100px), (orientation: portrait) {
  body.kiosk.no-map .cards { grid-template-columns: minmax(0, 1fr); }
}

/* The root element is clamped too, so nothing can scroll behind the panels. */
html.kiosk-root { overflow: hidden; height: 100%; }

/* Cards the fitter could not fit on screen are removed outright, never clipped. */
.dcard[data-overflow] { display: none; }