/*
 * TV menu templates.
 *
 * Every size on a TV screen is in `em` off .tv-page, whose font-size is
 * --tv-u: 1% of the screen's width (capped so a tall screen can't push the
 * layout off the bottom). At 1920x1080, 1em = 19.2px. That lets exactly the
 * same markup render full-screen on a TV, inside a dashboard <iframe>, or
 * inside a homepage mockup (where .tv-frame sets --tv-u to 1% of the frame).
 *
 * Content is paginated server-side (displays/pagination.py) to fit these
 * sizes; tv-display.js only nudges type down slightly if a page still
 * overflows, and never below 84%.
 */

body.tv-screen { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #111; }
html:has(body.tv-screen) { height: 100%; }

.tv-page, .tv-page * { box-sizing: border-box; }

.tv-page {
  --tv-u: min(1vw, 1.7778vh);
  --tv-fit: 1;
  --tv-muted: #5f646a;
  font-size: var(--tv-u);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scaled-down renders (homepage mockups, template thumbnails). */
.tv-frame { container-type: inline-size; position: relative; overflow: hidden; }
.tv-frame .tv-page { --tv-u: 1cqw; height: auto; aspect-ratio: 16 / 9; }

/* ---------- Shared structure ---------- */

.tv-header { display: flex; align-items: center; gap: 1.2em; padding: 2.2em 3.4em 1.4em; flex-shrink: 0; }
.tv-logo { height: 4.2em; width: 4.2em; object-fit: contain; border-radius: 0.7em; }
.tv-titles { min-width: 0; }
.tv-business-name { font-size: 2.8em; font-weight: 750; margin: 0; line-height: 1.05; letter-spacing: -0.01em; }
.tv-menu-name { font-size: 1.25em; margin: 0.35em 0 0; font-weight: 500; }

.tv-body { flex: 1; min-height: 0; padding: 0 3.4em 0.6em; overflow: hidden; }
.tv-content { font-size: calc(1em * var(--tv-fit)); height: 100%; transition: opacity 0.25s ease; }
.tv-content.is-updating { opacity: 0; }

.tv-columns {
  display: grid;
  grid-template-columns: repeat(var(--tv-cols, 2), minmax(0, 1fr));
  gap: 0 3.6em;
  align-items: start;
}
/* A single short column shouldn't stretch prices across the whole screen. */
.tv-columns.is-single { max-width: 60em; margin: 0 auto; }

.tv-category { break-inside: avoid; }
.tv-category + .tv-category { margin-top: 1.7em; }
.tv-category-name { font-size: 2em; font-weight: 750; margin: 0 0 0.35em; line-height: 1.1; }

.tv-item-list { list-style: none; margin: 0; padding: 0; }
.tv-item { display: flex; gap: 0.9em; align-items: flex-start; padding: 0.5em 0; }
.tv-item-photo { display: none; }
.tv-item-main { flex: 1; min-width: 0; }
.tv-item-row { display: flex; align-items: baseline; gap: 0.5em; font-size: 1.65em; }
.tv-item-name { font-weight: 650; min-width: 0; }
.tv-leader { flex: 1 1 1em; min-width: 1em; align-self: stretch; border-bottom: 0.1em dotted currentColor; opacity: 0.35; margin-bottom: 0.3em; }
.tv-item-price { font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-item-desc { font-size: 1.15em; margin: 0.2em 0 0; line-height: 1.3; }
.tv-variants { display: flex; flex-wrap: wrap; gap: 0.3em 1.3em; margin-top: 0.3em; font-size: 1.3em; }
.tv-variant { white-space: nowrap; }
.tv-variant-label { font-weight: 500; }
.tv-variant-price { font-weight: 750; font-variant-numeric: tabular-nums; }

/* Sold out: dim the item, but keep the label itself solid and readable. */
.tv-sold-out {
  align-self: center;
  flex-shrink: 0;
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25em 0.6em;
  border-radius: 0.35em;
  background: #c73e1d;
  color: #fff;
  white-space: nowrap;
}
/* Explicit muted colors (not opacity) keep sold-out text above 4.5:1. */
.tv-item.is-sold-out .tv-item-name,
.tv-item.is-sold-out .tv-item-desc,
.tv-item.is-sold-out .tv-variants,
.tv-item.is-sold-out .tv-variant-label,
.tv-item.is-sold-out .tv-variant-price { color: var(--tv-muted); }
.tv-item.is-sold-out .tv-item-price { color: var(--tv-muted); text-decoration: line-through; text-decoration-thickness: 0.08em; }
.tv-item.is-sold-out .tv-item-photo { opacity: 0.5; filter: grayscale(70%); }

.tv-empty { font-size: 1.6em; opacity: 0.7; text-align: center; padding-top: 4em; }

.tv-pagedots { display: flex; justify-content: center; gap: 0.6em; padding: 0.4em 0 1.4em; flex-shrink: 0; min-height: 2.2em; }
.tv-pagedots .dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: currentColor; opacity: 0.25; transition: opacity 0.3s, width 0.3s; }
.tv-pagedots .dot.active { opacity: 0.9; width: 1.6em; border-radius: 0.3em; }

.tv-fullscreen-btn {
  position: fixed; top: 18px; right: 20px; z-index: 50;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; padding: 9px 14px;
  font: 600 14px/1 "Inter", system-ui, sans-serif; cursor: pointer;
  background: rgba(20, 20, 20, 0.55); color: #fff; opacity: 0.45; transition: opacity 0.15s;
}
.tv-fullscreen-btn:hover, .tv-fullscreen-btn:focus-visible { opacity: 1; }
html:fullscreen .tv-fullscreen-btn { opacity: 0; }
html:fullscreen .tv-fullscreen-btn:hover, html:fullscreen .tv-fullscreen-btn:focus-visible { opacity: 1; }

.tv-unavailable {
  display: flex; align-items: center; justify-content: center; height: 100vh; flex-direction: column; gap: 0.4em;
  font-family: "Fraunces", Georgia, serif; text-align: center; padding: 0 40px;
  background: #0c3b3d; color: #fbf5ea; font-size: min(1.4vw, 2.5vh);
}
.tv-unavailable h1 { margin: 0; font-size: 2.4em; }
.tv-unavailable p { margin: 0; font-family: "Inter", system-ui, sans-serif; opacity: 0.8; }

/* ---------- Elegant: dark and warm, serif headings, dotted leaders ---------- */

.tv-elegant {
  --accent: color-mix(in srgb, var(--brand-primary) 55%, #fff4e0);
  background:
    radial-gradient(ellipse 80% 60% at 85% 0%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--brand-secondary) 45%, #120e0b);
  color: #fff6e8;
  --tv-muted: #b3a899;
}
.tv-elegant .tv-business-name,
.tv-elegant .tv-category-name { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; }
.tv-elegant .tv-business-name { font-size: 3em; }
.tv-elegant .tv-menu-name { color: var(--accent); font-style: italic; font-family: "Fraunces", Georgia, serif; font-size: 1.4em; }
.tv-elegant .tv-header { border-bottom: 0.08em solid color-mix(in srgb, var(--accent) 35%, transparent); margin: 0 3.4em 1.6em; padding-left: 0; padding-right: 0; }
.tv-elegant .tv-category-name { color: var(--accent); font-size: 2.2em; }
.tv-elegant .tv-item-desc { color: #d9cfc2; }
.tv-elegant .tv-variant-label { color: #d9cfc2; }
.tv-elegant .tv-leader { opacity: 0.45; border-bottom-width: 0.12em; }
.tv-elegant .tv-pagedots { color: var(--accent); }

/* ---------- Cards: bright background, bold category cards with photos ---------- */

.tv-grid {
  --accent: color-mix(in srgb, var(--brand-primary) 82%, #000);
  background: #f6efe3;
  color: #1e2327;
}
.tv-grid .tv-header { padding-bottom: 1.3em; }
.tv-grid .tv-business-name { font-size: 2.6em; font-weight: 800; letter-spacing: -0.02em; }
.tv-grid .tv-menu-name { color: #4b535c; }
.tv-grid .tv-logo { background: #fff; padding: 0.3em; }
.tv-grid .tv-columns { gap: 1.4em; }
.tv-grid .tv-column { display: flex; flex-direction: column; gap: 1.4em; }
.tv-grid .tv-category {
  background: #fff;
  border-radius: 1.1em;
  box-shadow: 0 0.1em 0.5em rgba(60, 40, 20, 0.08);
  overflow: hidden;
}
.tv-grid .tv-category + .tv-category { margin-top: 0; }
.tv-grid .tv-category-name {
  background: var(--accent);
  color: #fff;
  font-size: 1.7em;
  font-weight: 800;
  padding: 0.5em 0.8em;
  margin: 0;
  letter-spacing: -0.01em;
}
.tv-grid .tv-item-list { padding: 0.5em 1.4em 0.7em; }
.tv-grid .tv-item { border-bottom: 0.06em solid #ece3d4; padding: 0.55em 0; align-items: center; }
.tv-grid .tv-item:last-child { border-bottom: none; }
.tv-grid .tv-item-row { font-size: 1.5em; }
.tv-grid .tv-item-name { font-weight: 700; }
.tv-grid .tv-item-price { color: var(--accent); font-weight: 800; }
.tv-grid .tv-leader { opacity: 0; }
.tv-grid .tv-item-desc { color: #4b535c; font-size: 1.05em; }
.tv-grid .tv-variants { font-size: 1.2em; }
.tv-grid .tv-variant-price { color: var(--accent); }
.tv-grid .tv-item-photo { display: block; width: 4.4em; height: 4.4em; border-radius: 0.7em; object-fit: cover; flex-shrink: 0; }
.tv-grid .tv-pagedots { color: #1e2327; }

/* ---------- Clean list: white, high-contrast sans, two columns ---------- */

.tv-minimal {
  --accent: color-mix(in srgb, var(--brand-primary) 85%, #000);
  background: #fff;
  color: #111318;
}
.tv-minimal .tv-business-name { font-size: 2.6em; font-weight: 800; letter-spacing: -0.03em; }
.tv-minimal .tv-menu-name { color: #4b535c; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1em; font-weight: 650; }
.tv-minimal .tv-header { border-left: 0.35em solid var(--accent); margin: 2.2em 3.4em 1.6em; padding: 0.2em 0 0.2em 1.1em; }
.tv-minimal .tv-category-name {
  font-size: 1.35em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  border-bottom: 0.18em solid #111318;
  padding-bottom: 0.45em;
  margin-bottom: 0.4em;
}
.tv-minimal .tv-item { border-bottom: 0.06em solid #e6e6e6; }
.tv-minimal .tv-item:last-child { border-bottom: none; }
.tv-minimal .tv-item-row { font-size: 1.7em; }
.tv-minimal .tv-item-name { font-weight: 600; }
.tv-minimal .tv-item-price { font-weight: 800; }
.tv-minimal .tv-leader { opacity: 0; }
.tv-minimal .tv-item-desc { color: #4b535c; }
.tv-minimal .tv-variant-label { color: #4b535c; }
.tv-minimal .tv-pagedots { color: #111318; }

/* Owners pick any brand colors; clamp lightness so accents used as text (or
   behind white text) stay readable on each template's background. */
@supports (color: oklch(from red l c h)) {
  .tv-elegant {
    --accent: oklch(from var(--brand-primary) max(l, 0.8) min(c, 0.12) h);
    background:
      radial-gradient(ellipse 80% 60% at 85% 0%, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 70%),
      oklch(from var(--brand-secondary) min(l, 0.24) min(c, 0.05) h);
  }
  .tv-grid, .tv-minimal { --accent: oklch(from var(--brand-primary) min(l, 0.5) c h); }
}

/* ---------- Draft / sample preview pages ---------- */

body.tv-preview-page { margin: 0; background: #1b1f22; font-family: "Inter", system-ui, sans-serif; color: #fbf5ea; }
.tv-preview-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
  padding: 10px 20px; background: #0c3b3d; font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tv-preview-bar strong { font-weight: 700; }
.tv-preview-bar .tag { background: #f9a68e; color: #1e2327; font-weight: 700; font-size: 12px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; }
.tv-preview-bar nav { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.tv-preview-bar a { color: #fbf5ea; text-decoration: none; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(251, 245, 234, 0.25); }
.tv-preview-bar a:hover, .tv-preview-bar a:focus-visible { background: rgba(251, 245, 234, 0.12); }
.tv-preview-bar a[aria-current="true"] { background: #fbf5ea; color: #0c3b3d; font-weight: 650; }
.tv-preview-pages { display: flex; flex-direction: column; gap: 28px; padding: 24px; }
.tv-preview-pages .tv-page-label { font-size: 13px; opacity: 0.75; margin: 0 0 8px; }
.tv-preview-pages .tv-frame { border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); max-width: calc((100vh - 120px) * 16 / 9); }
/* Embedded (dashboard iframe): exactly one screen, no chrome. */
body.tv-embed { margin: 0; overflow: hidden; background: #111; }
body.tv-embed .tv-preview-pages { padding: 0; gap: 0; }
body.tv-embed .tv-preview-pages .tv-frame { border-radius: 0; box-shadow: none; max-width: none; }
body.tv-embed .tv-page-label { display: none; }