/*
 * Cupcake Concept menu board — chalkboard display.
 * Approved design: "Option A, revision 4" (handoff package, 5 Sep 2026).
 * See Design Decisions.md.
 *
 * Units: the approved mockups are 1920 × 1080. One design pixel is --u, which
 * is 1/1080 of the viewport height OR 1/1920 of its width, whichever is
 * smaller — so the board is always a 16:9 stage, letterboxed on any other
 * shape, and every measurement below is the mockup's pixel value × var(--u).
 * At true 4K, --u is 2px and the whole layout doubles.
 */

:root {
    --u: min(0.0925926vh, 0.0520833vw);

    --board: #242827;
    --chalk: #f4efdf;
    --chalk-dim: #d4d1c5;
    --accent: #7ea9ec;
    --butter: #efd78f;
    --leader: #818b86;
    --separator: #59635e;
    --header-rule: #59655f;
    --frame-outer: #b6b8ae;
    --frame-inner: #68706b;

    --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
    --font-items: 'Balsamiq Sans', 'Trebuchet MS', 'Segoe UI', sans-serif;
    --font-logo: 'Jost', 'Futura', 'Century Gothic', sans-serif;
}

/* Fonts are served from this site (assets/fonts), so a TV with slow or no
   reach to the outside world still starts with the right faces. */
@font-face {
    font-family: 'Balsamiq Sans'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('fonts/BalsamiqSans-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Caveat'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('fonts/Caveat-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('fonts/Jost-Regular.ttf') format('truetype');
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--board);
    color: var(--chalk);
    font-family: var(--font-items);
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- the 16:9 stage ---------- */

#display-root {
    position: relative;
    width: calc(1920 * var(--u));
    height: calc(1080 * var(--u));
    overflow: hidden;
    background-color: var(--board);
    transition: opacity 380ms ease;
}

#display-root.is-fading { opacity: 0; }

/* barely-there board grain */
#display-root::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.09 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* double chalk-line frame: outer 30px in, 2.5px, r18; inner 43px in, 1px, r11 */
.frame-outer, .frame-inner {
    position: absolute;
    pointer-events: none;
    z-index: 3;
}
.frame-outer {
    inset: calc(30 * var(--u));
    border: calc(2.5 * var(--u)) solid var(--frame-outer);
    border-radius: calc(18 * var(--u));
}
.frame-inner {
    inset: calc(43 * var(--u));
    border: calc(1 * var(--u)) solid var(--frame-inner);
    border-radius: calc(11 * var(--u));
}

#display-root.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(30 * var(--u));
    color: var(--chalk-dim);
}

/* ---------- header: rule — logo — rule ---------- */

.board-header {
    position: absolute;
    left: calc(100 * var(--u));
    right: calc(100 * var(--u));
    top: calc(66 * var(--u));
    height: calc(122 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(116 * var(--u));
}

.header-rule {
    flex: 1;
    height: calc(1 * var(--u));
    min-height: 1px;
    background: var(--header-rule);
    margin-top: calc(16 * var(--u));   /* rules sit at y135, a touch below the logo's centre */
}

.logo-img {
    flex: none;
    width: calc(308 * var(--u));
    height: calc(122 * var(--u));
    object-fit: contain;
}

/* text fallback, only if the logo image is missing */
.logo-text {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-logo);
    font-weight: 400;
    font-size: calc(58 * var(--u));
    line-height: 0.95;
    letter-spacing: 0.08em;
    color: var(--chalk);
}

/* ---------- menu screen ---------- */

.menu-screen { position: absolute; inset: 0; }

.menu-columns {
    position: absolute;
    top: calc(206 * var(--u));
    left: calc(100 * var(--u));
    right: calc(100 * var(--u));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* three sections: the approved widths 490 / 490 / 522 and gutters 98 / 120 */
.menu-columns[data-cols="3"] { justify-content: flex-start; }
.menu-columns[data-cols="3"] .category { width: calc(490 * var(--u)); }
.menu-columns[data-cols="3"] .category:nth-child(2) { margin-left: calc(98 * var(--u)); }
.menu-columns[data-cols="3"] .category:nth-child(3) { width: calc(522 * var(--u)); margin-left: calc(120 * var(--u)); }

/* two sections: an ~80vw grid with a ~6vw gap */
.menu-columns[data-cols="2"] {
    left: calc(192 * var(--u));
    right: calc(192 * var(--u));
}
.menu-columns[data-cols="2"] .category { width: calc(710 * var(--u)); }

/* one section: a ~44vw text block, centred */
.menu-columns[data-cols="1"] { justify-content: center; }
.menu-columns[data-cols="1"] .category { width: calc(845 * var(--u)); }

.category {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* a thin vertical separator where a primary column meets a secondary one */
.category.has-separator::before {
    content: '';
    position: absolute;
    top: calc(38 * var(--u));
    bottom: calc(-60 * var(--u));
    left: calc(-55 * var(--u));
    width: calc(1.2 * var(--u));
    min-width: 1px;
    background: var(--separator);
}
.menu-columns[data-cols="3"] .category:nth-child(3).has-separator::before { left: calc(-55 * var(--u)); }
.menu-columns[data-cols="3"] .category:nth-child(2).has-separator::before { left: calc(-49 * var(--u)); }
.menu-columns[data-cols="2"] .category.has-separator::before { left: calc(-58 * var(--u)); }

/* headings: Caveat 700, primary 100px / supporting 68px, baseline y294 */
.category h2 {
    margin: 0;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: calc(68 * var(--u));
    line-height: 1;
    color: var(--accent);
    padding-top: calc(28 * var(--u));   /* keeps all headings' baselines level; see .is-primary */
    overflow-wrap: anywhere;
}
.category.is-primary h2 {
    font-size: calc(100 * var(--u));
    padding-top: 0;
}
.category h2 .continued {
    font-size: 0.45em;
    color: var(--chalk-dim);
    white-space: nowrap;
}

/* each section owns its underline: 3px blue, the full column width, at y322 */
.category-underline {
    height: calc(3 * var(--u));
    min-height: 2px;
    background: var(--accent);
    margin-top: calc(14 * var(--u));
    flex: none;
}

.category-subtitle {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: calc(40 * var(--u));
    line-height: 1.1;
    color: var(--chalk);
    margin-top: calc(10 * var(--u));
}

.item-list {
    list-style: none;
    margin: calc(14 * var(--u)) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: calc(26 * var(--u));           /* core rows land 74px apart */
}
.category.is-primary .item-list { gap: calc(28 * var(--u)); }

.item { display: flex; flex-direction: column; }
/* on the three-column screen a supporting section keeps the approved uniform
   row pitch (103px at 1080p) with or without a second price line; sparser
   screens use the tighter primary rhythm so the artwork keeps its room */
.menu-columns[data-cols="3"] .category.is-secondary .item { min-height: calc(79 * var(--u)); }
.menu-columns[data-cols="3"] .category.is-secondary .item-list { gap: calc(24 * var(--u)); }

/* the row: name group — leader — principal price */
.item-row {
    display: flex;
    align-items: baseline;
    font-family: var(--font-items);
    font-weight: 400;
    font-size: calc(38 * var(--u));
    line-height: 1.15;
    color: var(--chalk);
}
.category.is-primary .item-row { font-size: calc(40 * var(--u)); }

/* name + optional inline note; wraps as text, never behind the leader */
.item-name-group {
    min-width: 0;
    flex: 0 1 auto;
}
.item-name { overflow-wrap: anywhere; }
.item-icon { margin-left: 0.3em; }

/* a short note sits inline after the name (cake sizes: "(serves 10-14)") */
.item-note-inline {
    font-size: calc(30 * var(--u));
    color: var(--chalk-dim);
    margin-left: 0.55em;
    white-space: nowrap;
}
/* when the name itself wrapped, the note drops to its own line beneath */
.item.note-below .item-note-inline {
    display: block;
    margin-left: 0;
    margin-top: calc(6 * var(--u));
    font-size: calc(29 * var(--u));
    line-height: 1.22;
    white-space: normal;
}

.item-leader {
    flex: 1 1 auto;
    min-width: calc(20 * var(--u));
    height: calc(4 * var(--u));
    margin: 0 calc(15 * var(--u)) calc(8 * var(--u));
    align-self: baseline;
    background-image: radial-gradient(circle, var(--leader) calc(1.5 * var(--u)), transparent calc(1.9 * var(--u)));
    background-size: calc(9 * var(--u)) calc(4 * var(--u));
    background-repeat: repeat-x;
    background-position: left bottom;
}

.item-price {
    white-space: nowrap;
    flex: none;
}

/* further labelled prices: 29px, dim, right-aligned, 36px below the principal baseline */
.item-sub {
    font-family: var(--font-items);
    font-size: calc(29 * var(--u));
    line-height: 1.22;
    color: var(--chalk-dim);
    text-align: right;
    margin-top: calc(-4 * var(--u));
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 0;
}
.price-unit { white-space: nowrap; }
.price-unit + .price-unit::before { content: '\00b7'; padding: 0 0.45em; opacity: 0.8; }

.item-description {
    font-size: calc(29 * var(--u));
    line-height: 1.25;
    color: var(--chalk-dim);
    padding-left: 1.1em;
    margin-top: calc(4 * var(--u));
}
.item-description div::before { content: '\2022\00a0'; opacity: 0.7; }

/* a section's closing line: Caveat 700 35px, butter, left, no rule */
.category-note {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: calc(35 * var(--u));
    line-height: 1.15;
    color: var(--butter);
    margin-top: calc(32 * var(--u));
}

/* ---------- product anchor (the four-product chalk illustration) ---------- */

.product-anchor {
    position: absolute;
    left: calc(100 * var(--u));
    top: calc(701 * var(--u));
    width: calc(1090 * var(--u));
    height: calc(315 * var(--u));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.product-anchor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}
.product-anchor.is-hidden { display: none; }

/* The illustration keeps the same bottom-left anchor position on every menu
   screen that shows it (the first and third), left-aligned like the approved
   first screen rather than centred. */
.product-anchor img { object-position: left bottom; }

/* ---------- photo slide (taped photo, centred, caption underneath) ---------- */

.art-slide { position: absolute; inset: 0; }

/* the area below the header holds the taped photo and, under it, the caption */
.art-stage {
    position: absolute;
    left: calc(120 * var(--u));
    right: calc(120 * var(--u));
    top: calc(212 * var(--u));
    bottom: calc(70 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(40 * var(--u));
}

/* the white photo mat, tilted a touch, with a soft drop shadow */
.art-frame {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    padding: calc(14 * var(--u));
    background: var(--chalk);
    box-shadow: 0 calc(22 * var(--u)) calc(46 * var(--u)) rgba(0, 0, 0, 0.55);
    transform: rotate(-1.6deg);
    line-height: 0;
}
.art-photo-wrap {
    display: block;
    opacity: 0;
    transition: opacity 300ms ease;
    line-height: 0;
}
.art-photo-wrap.is-loaded { opacity: 1; }
.art-frame img {
    display: block;
    max-width: calc(1120 * var(--u));
    max-height: calc(560 * var(--u));
    width: auto;
    height: auto;
    object-fit: contain;
}

/* two pieces of translucent tape at the top corners */
.art-tape {
    position: absolute;
    top: calc(-20 * var(--u));
    width: calc(150 * var(--u));
    height: calc(46 * var(--u));
    background: rgba(243, 241, 234, 0.42);
    box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.25);
}
.art-tape.left  { left: calc(-30 * var(--u)); transform: rotate(-40deg); }
.art-tape.right { right: calc(-30 * var(--u)); transform: rotate(40deg); }

/* caption underneath, centred */
.art-caption {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: var(--font-hand);
    font-weight: 700;
    line-height: 1.02;
    color: var(--butter);
}
.art-caption .caption-line { font-size: calc(72 * var(--u)); overflow-wrap: anywhere; }
.art-caption.two-tone .caption-line:first-child { font-size: calc(64 * var(--u)); color: var(--accent); }
.art-caption.two-tone .caption-line + .caption-line { font-size: calc(84 * var(--u)); }

/* ---------- rotation indicator (review aid; hidden in TV mode) ---------- */

.rotation-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(52 * var(--u));
    display: flex;
    justify-content: center;
    gap: calc(14 * var(--u));
    z-index: 4;
}
.rotation-dots span {
    position: relative;
    width: calc(11 * var(--u));
    height: calc(11 * var(--u));
    border-radius: 50%;
    border: calc(2 * var(--u)) solid var(--chalk-dim);
    opacity: 0.45;
    cursor: pointer;
}
.rotation-dots span::after { content: ''; position: absolute; inset: calc(-12 * var(--u)); }
.rotation-dots span:hover { opacity: 0.9; }
.rotation-dots span.is-art { border-radius: calc(2 * var(--u)); }
.rotation-dots span.is-current { background: var(--chalk-dim); opacity: 0.85; }
.rotation-dots span.is-art.is-current { background: var(--accent); border-color: var(--accent); }
body.tv-mode .rotation-dots { display: none; }

/* ---------- empty state ---------- */

.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: calc(44 * var(--u));
    color: var(--chalk-dim);
    text-align: center;
    padding: 0 calc(160 * var(--u));
}