/*
 * Dolce Paradiso TV display: the canvas, the menu boards (TV 2, 3, 4), shared pages,
 * banners, the closed and waiting screens, the holder and the "not set up" page.
 * Load after fonts/fonts.css and tokens.css. Layouts may add layout-*.css.
 *
 * Every screen is authored on a 1920x1080 canvas, scaled by display.js. Readability
 * floor on the canvas (55" TV at 15 ft): item name 44 px, price 44 px, description 28 px,
 * section heading 40 px, footnote 26 px. Menu sizes and row heights come from the fit
 * engine (payload.fit, set as custom properties by layout-menu.js); the values below are
 * the same numbers as src/fit.php, used until a payload arrives.
 */

:root {
  --cream-75: rgba(255, 248, 231, 0.75);
  --cream-60: rgba(255, 248, 231, 0.6);
  --gold-40: rgba(255, 199, 44, 0.4);
  --fade: 800ms;
}

/* ---------------------------------------------------------------- page and canvas */

html, body.display, body.holder {
  margin: 0;
  height: 100%;
  background: var(--black);
  overflow: hidden;
}

body.display, body.holder {
  cursor: none;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
  transform-origin: 0 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage {
  position: absolute;
  inset: 0;
}

.canvas.is-closed .stage,
.canvas.is-closed .banners {
  display: none;
}

/* Logo files are single-color paths: used as masks over gold, never as plain images. */
.logo-mark,
.logo {
  display: inline-block;
  background-color: var(--gold);
  -webkit-mask: url(../img/logo-mark.svg) center / contain no-repeat;
  mask: url(../img/logo-mark.svg) center / contain no-repeat;
  aspect-ratio: 589 / 522;
}

.logo {
  -webkit-mask-image: url(../img/logo.svg);
  mask-image: url(../img/logo.svg);
  aspect-ratio: 1383 / 1324;
}

/* ---------------------------------------------------------------- closed and waiting */

.closed {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  background: var(--black);
  filter: brightness(0.4);
}

.closed-logo {
  width: 460px;
}

.closed-text {
  margin: 0;
  max-width: 1400px;
  font: 600 64px/1.2 var(--font-display);
  color: var(--cream);
  text-align: center;
}

.waiting {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: var(--warm-black) url(../img/pattern.svg) repeat;
  background-size: 360px;
}

.waiting-mark {
  width: 220px;
}

.waiting-text {
  margin: 0;
  font: 600 56px/1.2 var(--font-display);
  color: var(--cream);
}

.closed[hidden],
.waiting[hidden],
.waiting-text[hidden],
.banners[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- banners */

/* Default place: a strip across the top of the canvas (layouts may offer their own slot). */
.banners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 20px 48px;
  background: rgba(0, 0, 0, 0.88);
  border-bottom: 4px solid var(--gold);
}

.banner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 26px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-weight: 500;
}

.banner-message {
  background: var(--gold);
  color: var(--black);
}

.banner-oven {
  border: 3px solid var(--gold);
  color: var(--cream);
  background: var(--warm-black);
}

.banner-icon {
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--gold);
}

.banner-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-width: 0;
  font-size: 36px;
  line-height: 1.2;
  max-height: 2.4em;
}

.two-banners .banner-text {
  -webkit-line-clamp: 1;
  max-height: 1.2em;
}

/* ---------------------------------------------------------------- menu board */

.menu-board {
  --header-h: 130px;
  --margin: 48px;
  --gutter: 48px;
  --panel-w: 480px;
  --row-name: 60px;
  --row-desc: 38px;
  --row-heading: 72px;
  --row-sizes: 34px;
  --row-footnote: 36px;
  --section-gap: 28px;
  --font-name: 44px;
  --font-price: 44px;
  --font-desc: 28px;
  --font-heading: 40px;
  --font-footnote: 26px;
  --price-zone-one: 170px;
  --price-zone-two: 300px;
  --col-w: 576px;
  --col-h: 902px;
  --price-gap: 16px;
  --price-col: calc((var(--price-zone-two) - var(--price-gap)) / 2);
  --panel-total: calc(var(--panel-w) + var(--margin));

  position: absolute;
  inset: 0;
  background: var(--black);
  color: var(--cream);
}

.mb-header {
  position: absolute;
  top: 0;
  left: var(--margin);
  right: var(--margin);
  height: var(--header-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 8px;
}

.with-panel .mb-header {
  right: calc(var(--panel-total) + var(--gutter));
}

.mb-mark {
  flex: none;
  width: 92px;
}

.mb-titles {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mb-title {
  margin: 0;
  font: 700 72px/1 var(--font-display);
  color: var(--cream);
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.mb-subtitle {
  margin: 0;
  font: 500 28px/1.2 var(--font-body);
  color: var(--gold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mb-banners {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--header-h) - 28px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.mb-banners .banner {
  padding: 8px 22px;
}

.mb-columns {
  position: absolute;
  top: var(--header-h);
  left: var(--margin);
  display: flex;
  gap: var(--gutter);
}

.mb-col {
  position: relative;
  width: var(--col-w);
  height: var(--col-h);
}

.mb-col-inner {
  width: 100%;
}

/* A section part. Its height is exactly what src/fit.php predicts. */
.mb-block {
  margin: 0;
}

.mb-block:not(.is-first) {
  margin-top: var(--section-gap);
}

.mb-heading {
  height: var(--row-heading);
  box-sizing: border-box;
  margin: 0;
  padding-bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-heading);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
}

.mb-rule {
  flex: 1 1 auto;
  height: 2px;
  margin-bottom: 9px;
  background: linear-gradient(90deg, var(--gold-40), rgba(255, 199, 44, 0));
}

.mb-sizes {
  height: var(--row-sizes);
  display: flex;
  justify-content: flex-end;
  gap: var(--price-gap);
  font: 500 var(--font-footnote) / var(--row-sizes) var(--font-body);
  color: var(--cream-60);
  white-space: nowrap;
}

.mb-size {
  width: var(--price-col);
  text-align: right;
}

.mb-row {
  height: var(--row-name);
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.mb-name {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-name);
  line-height: var(--row-name);
  color: var(--cream);
}

.mb-prices {
  flex: none;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  gap: var(--price-gap);
}

.mb-price {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-price);
  line-height: var(--row-name);
  color: var(--gold);
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Two price columns under the size labels. A wide price ("$10.00") may take a few px
   more than its column, from the name's side, never past the column edge. */
.mb-prices.is-two .mb-price {
  min-width: var(--price-col);
  white-space: nowrap;
}

.mb-sub {
  height: var(--row-desc);
  margin-top: -4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.mb-desc {
  flex: 0 1 auto;
  min-width: 0;
  font: 400 var(--font-desc) / var(--row-desc) var(--font-body);
  color: var(--cream-75);
}

.mb-tags {
  flex: none;
  display: flex;
  gap: 8px;
}

.mb-sub .mb-tags {
  margin-left: auto;
}

.mb-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  border: 2px solid var(--gold-40);
  border-radius: 999px;
  font: 600 26px/1 var(--font-body);
  color: var(--gold);
}

.mb-tag .icon {
  width: 26px;
  height: 26px;
  stroke-width: 4;
}

.mb-foot {
  margin: 0;
  font: 400 var(--font-footnote) / var(--row-footnote) var(--font-body);
  color: var(--cream-60);
}

/* Sold out today: the item stays on the board, dimmed, with a gold pill instead of its price. */
.is-sold .mb-name,
.is-sold .mb-sub {
  opacity: 0.35;
}

.is-sold .mb-row > .mb-tags {
  opacity: 0.35;
}

.sold-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--black);
  font: 600 26px/1 var(--font-body);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- menu side panel */

.mb-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-total);
  box-sizing: border-box;
  border-left: 4px solid var(--gold);
  background: var(--warm-black);
  overflow: hidden;
}

.mb-slides {
  position: absolute;
  inset: 0;
}

.mb-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade) ease;
}

.mb-slide.is-on {
  opacity: 1;
}

.mb-panel .special {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mb-panel .special-media {
  flex: none;
  height: 560px;
}

.mb-panel .special-text {
  flex: 1 1 auto;
  padding: 40px 48px 80px 44px;
}

.mb-dots {
  position: absolute;
  left: 44px;
  bottom: 40px;
  display: flex;
  gap: 12px;
}

.mb-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 248, 231, 0.25);
  transition: background var(--fade) ease;
}

.mb-dot.is-on {
  background: var(--gold);
}

/* No specials today: the brand, and the order-online code. */
.mb-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.mb-brand-backdrop {
  position: absolute;
  inset: 0;
}

.mb-brand-backdrop .pattern-mark {
  display: none;
}

.mb-brand-logo,
.mb-brand .qr {
  position: relative;
}

.mb-brand-logo {
  width: 320px;
}

/* ---------------------------------------------------------------- shared pieces */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--warm-black);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pattern {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-black) url(../img/pattern.svg) repeat;
  background-size: 360px;
}

.pattern-mark {
  width: 34%;
  max-width: 260px;
}

.special-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-sizing: border-box;
}

.special-label {
  margin: 0;
  font: 500 28px/1.2 var(--font-body);
  color: var(--gold);
}

.special-title {
  margin: 0;
  font: 700 56px/1.05 var(--font-display);
  color: var(--cream);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.special-desc {
  margin: 0;
  font: 400 28px/1.35 var(--font-body);
  color: var(--cream-75);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.special-starts {
  margin: 0;
  font: 500 28px/1.2 var(--font-body);
  color: var(--gold);
}

.special-price {
  margin: 6px 0 0;
  font: 600 48px/1 var(--font-body);
  color: var(--gold);
  font-variant-numeric: lining-nums;
}

.qr {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.qr-box {
  padding: 14px;
  border-radius: 12px;
  background: var(--cream);
  line-height: 0;
}

.qr-code {
  width: 180px;
  height: 180px;
}

.qr-code path {
  fill: var(--black);
}

.qr-caption {
  font: 500 26px/1.2 var(--font-body);
  color: var(--cream);
}

.icon {
  display: block;
}

/* ---------------------------------------------------------------- pages (Pages.render)
 * A page fills whatever holds it (full screen, or a panel). It is a size container, so
 * its type scales with its own size; the floor stays at the menu's 26 to 28 px. */

.page {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  background: var(--warm-black);
  color: var(--cream);
}

.page-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 3cqmin;
  box-sizing: border-box;
  padding: 6cqmin;
}

.page-title {
  margin: 0;
  font: 700 clamp(44px, 7cqmin, 104px)/1.05 var(--font-display);
  color: var(--cream);
}

.page-kicker,
.page-sub {
  margin: 0;
  font: 500 clamp(26px, 3cqmin, 40px)/1.25 var(--font-body);
  color: var(--gold);
}

.page-body {
  margin: 0;
  max-width: 34em;
  font: 400 clamp(28px, 3.2cqmin, 42px)/1.4 var(--font-body);
  color: var(--cream-75);
}

/* Photo beside text (welcome, custom, dog, catering). */
.page-split .page-in {
  flex-direction: row;
  gap: 0;
  padding: 0;
}

.page-split .page-media {
  flex: 0 0 56%;
}

.page-split .page-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3cqmin;
  padding: 6cqmin;
  border-left: 4px solid var(--gold);
}

.page-text .qr {
  align-self: flex-start;
}

@container (aspect-ratio < 1.2) {
  .page-split .page-in {
    flex-direction: column;
  }

  .page-split .page-media {
    flex-basis: 48%;
  }

  .page-split .page-text {
    justify-content: flex-start;
    border-left: 0;
    border-top: 4px solid var(--gold);
  }
}

/* Brand pages with no photo (welcome, promo): pattern, logo, words, centered. */
.page-brand .page-in {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-backdrop {
  position: absolute;
  inset: 0;
}

.page-backdrop .pattern-mark {
  display: none;
}

.page-brand .page-logo,
.page-brand .page-title,
.page-brand .page-body {
  position: relative;
}

.page-logo {
  width: clamp(200px, 34cqmin, 420px);
}

.page-brand .page-title {
  color: var(--gold);
}

.page-full .page-in {
  padding: 0;
}

.page-full-photo {
  position: absolute;
  inset: 0;
}

/* Promotions. With a photo (not a finished poster): the photo fills the page and an offer
   plate, warm black with a gold top edge, sits low on the left with the words, the price
   and the QR code. A finished poster keeps only its QR code, in a plate in the corner. */
.promo-offer .page-in {
  justify-content: flex-end;
  align-items: flex-start;
}

.promo-plate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.4cqmin;
  box-sizing: border-box;
  max-width: 62%;
  padding: 4cqmin 4.5cqmin;
  background: rgba(20, 18, 16, 0.94);
  border-top: 4px solid var(--gold);
}

.promo-plate .page-title,
.promo-plate .page-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* No photo: the same words centered on the pattern, no plate. */
.page-brand .promo-plate {
  align-items: center;
  max-width: none;
  padding: 0;
  background: none;
  border-top: 0;
}

/* Wraps in a narrow box (the menu side panel, about 415 px inside the plate): the QR code
   goes under the price instead of being clipped. */
.promo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4cqmin;
  margin-top: 1cqmin;
}

.promo-price {
  margin: 0;
  font: 600 clamp(48px, 9cqmin, 120px)/1 var(--font-body);
  font-variant-numeric: lining-nums;
  color: var(--gold);
}

.promo-qr {
  flex-direction: row;
  gap: 20px;
}

.page-promo .qr-code {
  width: 200px;
  height: 200px;
}

.promo-qr .qr-caption {
  max-width: 6em;
  font-size: 28px;
  text-align: left;
  color: var(--gold);
}

.page-full .promo-qr {
  position: absolute;
  right: 4cqmin;
  bottom: 4cqmin;
  padding: 20px 24px;
  background: var(--black);
  border-top: 4px solid var(--gold);
}

/* A narrow box (the TV 5 panel): the plate runs the full width. */
@container (max-width: 1000px) {
  .promo-plate {
    max-width: none;
  }
}

.page-fallback .page-in {
  padding: 0;
}

.page-fallback .page-media {
  position: absolute;
  inset: 0;
}

.page-fallback-text {
  position: relative;
  margin: auto;
  font: 600 clamp(28px, 5cqmin, 56px)/1.2 var(--font-display);
  color: var(--cream);
}

/* Specials and coming soon: up to three cards in a row (stacked in a tall box). */
.page-cards {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3cqmin;
}

.page-cards .special {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--black);
  border-top: 4px solid var(--gold);
}

.page-cards .special-media {
  flex: 1 1 55%;
  min-height: 0;
}

.page-cards .special-text {
  flex: 0 0 auto;
  padding: 3cqmin;
}

@container (aspect-ratio < 1.2) {
  .page-cards {
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
  }

  .page-cards .special {
    flex-direction: row;
  }

  .page-cards .special-media {
    flex: 0 0 40%;
  }
}

/* Weather: today large, the next days as cream cards. */
.weather-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 4cqmin;
  align-items: center;
}

.weather-now {
  display: flex;
  flex-direction: column;
  gap: 1.5cqmin;
}

.weather-now-icon {
  width: clamp(96px, 18cqmin, 220px);
  height: clamp(96px, 18cqmin, 220px);
  color: var(--gold);
}

.weather-temp,
.weather-text,
.weather-extra,
.weather-day-name,
.weather-day-temps {
  margin: 0;
}

.weather-temp {
  font: 500 clamp(88px, 16cqmin, 200px)/1 var(--font-body);
  font-variant-numeric: lining-nums;
  color: var(--cream);
}

.weather-text {
  font: 500 clamp(28px, 3.6cqmin, 48px)/1.2 var(--font-body);
  color: var(--gold);
}

.weather-extra {
  font: 400 clamp(26px, 2.8cqmin, 34px)/1.3 var(--font-body);
  color: var(--cream-75);
}

.weather-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2cqmin;
}

.weather-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqmin;
  padding: 3cqmin 1cqmin;
  border-radius: 18px;
  background: var(--cream);
  color: var(--black);
}

.weather-day-name {
  font: 600 clamp(26px, 3cqmin, 38px)/1.2 var(--font-body);
}

.weather-day-icon {
  width: clamp(56px, 9cqmin, 110px);
  height: clamp(56px, 9cqmin, 110px);
  color: var(--black);
}

.weather-day-temps {
  display: flex;
  gap: 0.6em;
  font: 600 clamp(26px, 3.4cqmin, 44px)/1 var(--font-body);
}

.weather-low {
  opacity: 0.55;
}

@container (aspect-ratio < 1.2) {
  .weather-grid {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .weather-days {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Events. */
.event-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.6cqmin;
}

.event {
  display: flex;
  gap: 3cqmin;
  align-items: baseline;
}

.event-date {
  flex: 0 0 auto;
  min-width: 6.5em;
  margin: 0;
  font: 600 clamp(26px, 3cqmin, 38px)/1.2 var(--font-body);
  color: var(--gold);
}

.event-text {
  min-width: 0;
}

.event-title {
  margin: 0;
  font: 700 clamp(30px, 4cqmin, 52px)/1.1 var(--font-display);
  color: var(--cream);
}

.event-meta {
  margin: 0.2em 0 0;
  font: 400 clamp(26px, 2.8cqmin, 34px)/1.3 var(--font-body);
  color: var(--cream-75);
}

/* Photo gallery: one to three photos side by side. */
.page-gallery .page-in {
  flex-direction: row;
  gap: 1cqmin;
  padding: 0;
}

.gallery-item {
  position: relative;
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}

.gallery-photo {
  position: absolute;
  inset: 0;
}

.gallery-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3cqmin 3cqmin 2.4cqmin;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
  font: 500 clamp(26px, 3cqmin, 38px)/1.25 var(--font-body);
  color: var(--cream);
}

/* Hours and location. */
.hours-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 5cqmin;
  align-items: start;
}

.hours-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6cqmin;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  padding-bottom: 1.4cqmin;
  border-bottom: 1px solid rgba(255, 199, 44, 0.25);
  font: 500 clamp(28px, 3.6cqmin, 46px)/1.2 var(--font-body);
}

.hours-days,
.hours-time {
  margin: 0;
}

.hours-time {
  color: var(--gold);
}

.hours-row.is-closed .hours-time {
  color: var(--cream-60);
}

.hours-side {
  display: flex;
  flex-direction: column;
  gap: 2cqmin;
  align-items: flex-start;
}

.hours-address,
.hours-phone,
.hours-social,
.hours-note {
  margin: 0;
  font: 400 clamp(28px, 3.2cqmin, 40px)/1.35 var(--font-body);
  color: var(--cream);
}

.hours-social,
.hours-note {
  color: var(--cream-75);
}

@container (aspect-ratio < 1.2) {
  .hours-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- holder (index.php) */

.screen-frame {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.fs-hint {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(20, 18, 16, 0.9);
  color: var(--cream);
  font: 400 18px/1.3 var(--font-body);
}

.fs-hint[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- not set up (no device) */

body.setup-page {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  background: var(--black);
  color: var(--cream);
  font-family: var(--font-body);
}

.setup {
  max-width: 48rem;
  text-align: center;
}

.setup-mark {
  width: 112px;
  margin-bottom: 24px;
}

.setup h1 {
  margin: 0 0 20px;
  font: 700 clamp(36px, 6vw, 64px)/1.1 var(--font-display);
  color: var(--cream);
}

.setup p {
  margin: 0 0 12px;
  font: 400 clamp(18px, 2.2vw, 24px)/1.5 var(--font-body);
  color: var(--cream-75);
}

@media (prefers-reduced-motion: reduce) {
  .mb-slide,
  .mb-dot {
    transition: none;
  }
}