/*
 * ლურჯი სუფრა (the blue tablecloth): the beta front page, components/supra.
 *
 * A plain file in public/, linked only when the beta renders (see
 * SupraHome.tsx), so the pages everybody else gets never download it. Every
 * class is prefixed sp- and every rule sits under .supra: nothing here can
 * reach the rest of the app, and nothing in globals.css shares a name with it.
 * Being unlayered, these rules also win over Tailwind's layers inside .supra,
 * which is what lets the page ignore the app's own component classes.
 *
 * Three things move, and each means something:
 *   1. Plates are set down: they slide in, turn and settle; khinkali drop.
 *   2. Figures roll like a counter. They never fade.
 *   3. Type gains weight with calories: the font's weight axis is the data.
 *
 * What it costs is part of the design. Everything that moves while the page
 * scrolls is a transform or an opacity, which the compositor runs without the
 * main thread, and the scroll-linked parts write a transform per frame and
 * read nothing that needs a layout.
 * No custom property is written on an ancestor per frame: that restyles the
 * whole subtree, and doing it on .supra once cost every scroll frame a full
 * recalculation of the page. Font-weight is animated only on the dish names,
 * in a few steps as each scrolls in, because it is layout, not compositing;
 * the headline is drawn at its weight, since growing it on load read as text
 * resizing.
 *
 * The design reference, with the same motion in one static file, is
 * design/lurji-supra/index.html.
 */

/* Noto Sans Georgian, variable (wght 100 to 900, wdth 62.5 to 100), SIL OFL,
   subset to Mkhedruli, Mtavruli and basic Latin. The app's own copy of the
   face is four static weights, and this page animates between them. */
@font-face {
  font-family: "Supra Noto";
  src: url("/beta/supra-sans.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: block;
}

/* The ground under the page, so an overscroll does not flash the old one. */
body:has(.supra) { background: var(--background, #1f3a93); }

.supra {
  --lurji: #1f3a93;                 /* the cloth */
  --lurji-deep: #172b73;            /* the cloth in shadow: wells, the footer */
  --lurji-lift: #2c4bb0;            /* a control resting on the cloth */
  --bamba: #fbfaf6;                 /* cotton white: the print, the paper */
  --bamba-2: rgba(251, 250, 246, 0.8);
  --bamba-3: rgba(251, 250, 246, 0.66);
  --rule: rgba(251, 250, 246, 0.24);
  --guli: #ffc233;                  /* yolk: the figure and the one action */
  --ajika: #ff6a4d;                 /* over the norm */
  --ajika-text: #ffa08c;
  --ink: #14204f;                   /* type on paper */
  /* What is printed on the cloth (type, rules, outlines) and the ground it
     is printed on. Cotton white on blue here; the light scheme at the end of
     this file turns the ground to paper and the print to ink, and leaves
     --bamba alone, because that is also the paper the receipt is cut from. */
  --ground: var(--lurji);
  --print: var(--bamba);
  --print-2: var(--bamba-2);
  --print-3: var(--bamba-3);
  --ink-2: #4a5480;
  --sp-shadow: rgba(13, 24, 74, 0.5);
  /* A nutrient keeps one colour everywhere on this page. Carbs are dough. */
  --sp-protein: #ff7a5c;
  --sp-fat: #ffc233;
  --sp-carbs: #f3e3c0;
  --sp-sans: "Supra Noto", var(--font-georgian), system-ui, sans-serif;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: max(1.25rem, calc((100vw - 80rem) / 2));
  /* The cloth's field: small printed diamonds, barely there. */
  --field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%23fbfaf6' fill-opacity='.075'%3E%3Cpath d='M18 14.5l3 3.5-3 3.5-3-3.5z'/%3E%3Cpath d='M54 50.5l3 3.5-3 3.5-3-3.5z'/%3E%3C/g%3E%3C/svg%3E");
  --teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 8L7 0l7 8z' fill='%23fbfaf6'/%3E%3C/svg%3E");

  position: relative;
  flex: 1;
  width: 100%;
  overflow-x: clip;
  font-family: var(--sp-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--print);
  background: var(--ground) var(--field);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.supra :focus-visible { outline: 2px solid var(--guli); outline-offset: 3px; border-radius: 0.25rem; }
.supra .sp-wrap { width: min(100% - 2.5rem, 80rem); margin-inline: auto; }
.supra .sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Display type: Mtavruli, heavy and narrow. */
.supra .sp-h2 { font-weight: 850; font-stretch: 66%; font-size: clamp(2.1rem, 6.2vw, 4.25rem); line-height: 1.04; text-wrap: balance; }
.supra .sp-body { color: var(--print-2); max-width: 34rem; text-wrap: pretty; }

/* Controls are pills; plates are round; paper is square. Nothing else has a radius. */
.supra .sp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.45rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform 0.15s var(--soft), background-color 0.15s, box-shadow 0.15s; }
.supra .sp-btn:active { transform: scale(0.97); }
.supra .sp-btn-yolk { background: var(--guli); color: var(--ink); }
.supra .sp-btn-yolk:hover { background: #ffd15e; }
.supra .sp-btn-line { color: var(--print); box-shadow: inset 0 0 0 1.5px var(--print-3); }
.supra .sp-btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--print); }
.supra .sp-btn-s { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.95rem; }

/* ---------- the header ---------- */
.supra .sp-nav { position: absolute; inset: 0 0 auto; z-index: 20; animation: sp-fade 0.6s ease both; }
.supra .sp-nav .sp-wrap { display: flex; align-items: center; gap: 1.5rem; height: 4.75rem; }
.supra .sp-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.3rem; text-decoration: none; }
.supra .sp-brand svg { width: 2.1rem; height: 2.1rem; flex: none; }
.supra .sp-nav-links { display: none; margin-left: auto; gap: 1.5rem; font-size: 0.95rem; font-weight: 500; }
.supra .sp-nav-links a { color: var(--print-2); text-decoration: none; transition: color 0.15s; }
.supra .sp-nav-links a:hover { color: var(--print); }
.supra .sp-nav-links .sp-admin { color: var(--guli); }
.supra .sp-nav-end { display: none; align-items: center; gap: 1.1rem; font-size: 0.95rem; font-weight: 500; }
.supra .sp-nav-quiet { color: var(--print-2); text-decoration: none; cursor: pointer; transition: color 0.15s; }
.supra .sp-nav-quiet:hover { color: var(--print); }
.supra .sp-nav-more { margin-left: auto; }
.supra .sp-nav-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.1rem; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; box-shadow: inset 0 0 0 1.5px var(--print-3); }
.supra .sp-nav-more summary::-webkit-details-marker { display: none; }
.supra .sp-nav-more[open] summary { background: var(--bamba); color: var(--ink); box-shadow: none; }
.supra .sp-sheet { position: absolute; inset: 4.75rem 0 auto; background: var(--lurji-deep); padding: 0.5rem 1.25rem 1.5rem; display: grid; }
.supra .sp-sheet a, .supra .sp-sheet button { display: block; text-align: left; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-weight: 800; font-stretch: 66%; font-size: 1.7rem; line-height: 1.1; }
.supra .sp-sheet .sp-sheet-plain { border: 0; margin-top: 0.6rem; padding: 0.5rem 0; font-size: 1rem; font-stretch: 100%; font-weight: 600; }
@media (min-width: 64rem) {
  .supra .sp-nav-links, .supra .sp-nav-end { display: flex; }
  .supra .sp-nav-more { display: none; }
}

/* ---------- the hero ---------- */
.supra .sp-hero { position: relative; padding: 5.75rem 0 0; }
.supra .sp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
/* On a phone the copy's parts are laid out around the plate: the line, the
   search, the plate, and only then the paragraph and the buttons. */
.supra .sp-hero-copy { display: contents; }
.supra .sp-h1 { order: 1; font-weight: 900; font-stretch: 62.5%; font-size: clamp(3.3rem, 15.4vw, 5.6rem); line-height: 0.98; }
.supra .sp-search { order: 2; }
.supra .sp-demo { order: 3; }
.supra .sp-lede { order: 4; margin-top: 2.25rem; }
.supra .sp-hero-actions { order: 5; }
.supra .sp-h1 .sp-line { display: block; overflow: hidden; overflow: visible clip; padding: 0.05em 0; margin: -0.05em 0; }
.supra .sp-h1 { contain: layout style; }
.supra .sp-h1 .sp-w { display: inline-block; font-weight: 900; animation: sp-rise 1s var(--out) both; animation-delay: calc(var(--i) * 120ms + 80ms); }
/* The headline used to grow from hairline to black once the page was live; the
   words changing width as the page loaded read as text resizing, so they are
   drawn at their weight and only rise. */
.supra .sp-hero-copy > :not(.sp-h1) { animation: sp-settle 0.7s var(--soft) both; animation-delay: calc(var(--i) * 90ms + 480ms); }
.supra .sp-search { position: relative; max-width: 33rem; margin-top: 1.6rem; z-index: 5; }
.supra .sp-search-field { display: flex; align-items: center; gap: 0.6rem; height: 3.5rem; padding: 0 0.4rem 0 1.15rem; border-radius: 999px; background: var(--bamba); color: var(--ink); }
.supra .sp-search-field > svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--ink-2); }
.supra .sp-search input { flex: 1; min-width: 0; height: 100%; outline: 0; font-size: 1rem; color: var(--ink); }
.supra .sp-search input::placeholder { color: #636c93; }
.supra .sp-search-field:focus-within { outline: 2px solid var(--guli); outline-offset: 3px; }
.supra .sp-search-go { flex: none; height: 2.7rem; padding: 0 1.25rem; border-radius: 999px; background: var(--lurji); color: var(--print); font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.supra .sp-results { position: absolute; inset: 4.1rem 0 auto; background: var(--bamba); color: var(--ink); padding: 0.35rem 1.15rem; box-shadow: 5px 7px 0 var(--sp-shadow); }
.supra .sp-results a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: baseline; padding: 0.7rem 0; text-decoration: none;
  animation: sp-print 0.3s var(--soft) both; animation-delay: calc(var(--i) * 50ms); }
.supra .sp-results li + li { border-top: 1px solid rgba(20, 32, 79, 0.14); }
.supra .sp-results :focus-visible { outline-color: var(--lurji); }
.supra .sp-r-name { font-size: 1.1rem; line-height: 1.25; }
.supra .sp-r-serv { grid-column: 1; font-size: 0.85rem; color: var(--ink-2); }
.supra .sp-r-kcal { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 850; font-size: 1.7rem; line-height: 1; }
.supra .sp-r-kcal small { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.supra .sp-r-none { padding: 0.8rem 0; font-weight: 600; }
.supra .sp-try { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.7rem; font-size: 0.875rem; color: var(--print-3); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.supra .sp-try::-webkit-scrollbar { display: none; }
.supra .sp-try button { flex: none; padding: 0.3rem 0; cursor: pointer; color: var(--print); text-decoration: underline; text-decoration-color: var(--print-3); text-underline-offset: 0.25em; }
.supra .sp-try button:hover { text-decoration-color: var(--guli); }
.supra .sp-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* The plate, and what is on it. */
.supra .sp-demo { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 0.9rem; min-width: 0; margin-top: 2rem; text-align: center; }
.supra .sp-demo > :not(.sp-plate-stage) { animation: sp-settle 0.7s var(--soft) 1.05s both; }
.supra .sp-plate-stage { position: relative; width: min(100%, 31rem); margin-inline: auto; animation: sp-set-plate 1.15s var(--out) 0.3s both; }
.supra .sp-plate { position: relative; aspect-ratio: 1; }
.supra .sp-plate > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.supra .sp-arc { transition: stroke-dashoffset 0.75s var(--soft), stroke 0.3s, opacity 0.3s; }
.supra .sp-piece { position: absolute; left: 50%; top: 50%; width: 20.19%; margin: -10.095% 0 0 -10.095%; transition: transform 0.75s var(--out); }
.supra .sp-piece img { display: block; width: 100%; height: auto; aspect-ratio: 1; user-select: none; }
.supra .sp-drop { animation: sp-drop 0.62s var(--soft) both; }
.supra .sp-piece.sp-out .sp-drop { animation: sp-lift 0.3s ease-in both; }
.supra .sp-figure { order: 2; display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.5rem; color: var(--guli); line-height: 1; min-width: 0; transition: color 0.3s; }
/* Calorie figures are set heavy and at the face's full width everywhere on
   the page: narrow or light, a number reads as a small one. The hero's still
   gains a little weight with each piece, at once: the digits rolling over
   carry the change, and a transition on the weight was a relayout per frame. */
.supra .sp-figure .sp-odo { font-size: clamp(4rem, 17vw, 6rem); font-weight: var(--w, 780); }
.supra .sp-figure .sp-unit { font-size: 1.2rem; font-weight: 600; }
.supra .sp-demo.sp-over .sp-figure { color: var(--ajika); }
.supra .sp-note { order: 3; min-height: 3.1em; font-size: 0.95rem; color: var(--print-2); max-width: 22rem; }
.supra .sp-note b { font-weight: 600; color: var(--print); }
.supra .sp-demo.sp-over .sp-note b { color: var(--ajika-text); }
.supra .sp-stepper { order: 1; display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.3rem; border-radius: 999px; background: var(--lurji-deep); }
.supra .sp-stepper button { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--lurji-lift); color: var(--print); transition: transform 0.12s, background-color 0.15s; }
.supra .sp-stepper button:active { transform: scale(0.9); }
.supra .sp-stepper button:disabled { opacity: 0.4; cursor: default; }
.supra .sp-stepper .sp-plus { background: var(--guli); color: var(--ink); }
/* An invitation to press plus, until somebody does. */
.supra .sp-stepper .sp-plus.sp-hint::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--guli); animation: sp-ping 2.4s var(--soft) 2.6s 3 both; }
.supra .sp-stepper svg { width: 1.1rem; height: 1.1rem; }
.supra .sp-stepper output { min-width: 5.6rem; padding: 0 0.3rem; text-align: center; font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

@media (min-width: 64rem) {
  .supra .sp-hero { padding-top: clamp(5.75rem, 12vh, 7.5rem); }
  .supra .sp-hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); align-items: center; gap: 2rem; }
  .supra .sp-hero-copy { display: block; }
  .supra .sp-h1 { font-size: clamp(4.5rem, min(8.3vw, 14.2vh), 7.6rem); }
  .supra .sp-lede { font-size: 1.15rem; margin-top: 1.4rem; }
  .supra .sp-demo { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: end; gap: 0.5rem 1rem; margin-top: 0; text-align: left; }
  .supra .sp-plate-stage { grid-column: 1 / -1; width: min(108%, 35rem, 60vh); margin: 0 -6% 0.9rem auto; }
  .supra .sp-figure { order: 0; margin: 0 0 0 6%; }
  .supra .sp-stepper { order: 0; margin-bottom: 0.35rem; }
  .supra .sp-note { order: 0; grid-column: 1 / -1; margin-left: 6%; max-width: none; }
  .supra .sp-figure .sp-odo { font-size: 6rem; }
}

/* A counter: each digit is a strip that rolls. */
.supra .sp-odo { display: inline-flex; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.supra .sp-odo-col { display: inline-block; height: 1em; overflow: hidden; }
.supra .sp-odo-col.sp-off { display: none; }
.supra .sp-odo-strip { display: block; white-space: pre; line-height: 1; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 0.8s var(--out); transition-delay: calc(var(--k, 0) * 45ms); }
.supra .sp-odo-gap { display: inline-block; width: 0.16em; }
.supra .sp-odo-gap.sp-off { display: none; }

/* The cloth's border: fish and rosettes, block-printed one by one. */
/* One 100 x 64 tile (app/beta/art), repeated: the border used to be 70 SVG
   elements a band. The print is wider than the band by the most it drifts. */
.supra .sp-band { position: relative; height: 4rem; overflow: hidden; }
.supra .sp-band::before { content: ""; position: absolute; top: 0; left: -7rem; width: calc(100% + 7rem + 640px); height: 100%; background: var(--sp-band) repeat-x 0 0 / 100px 64px; }
.supra .sp-band.sp-flip { transform: scaleY(-1); }
/* The hero's border is printed left to right as the page opens: a sheet of
   cloth slides off it, rather than seventy motifs each scaled on the main thread. */
.supra .sp-hero .sp-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 8rem); background: linear-gradient(to right, transparent, var(--lurji) 8rem); animation: sp-sweep 1.5s cubic-bezier(0.45, 0, 0.2, 1) 0.45s both; }
.supra .sp-hero .sp-band { margin-top: 3.25rem; }

/* ---------- the figures ---------- */
.supra .sp-figures { padding: 3rem 0 4.5rem; }
.supra .sp-figures dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
.supra .sp-figures dd { font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.25rem); line-height: 1; }
.supra .sp-figures dt { margin-top: 0.55rem; color: var(--print-2); font-size: 0.95rem; }
@media (min-width: 48rem) { .supra .sp-figures dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the supra: one long table ---------- */
.supra .sp-table-track { position: relative; }
.supra .sp-table-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 35rem; overflow: hidden; display: flex; flex-direction: column; }
.supra .sp-table-stage .sp-band { flex: none; }
.supra .sp-strip { flex: 1; min-height: 0; display: flex; align-items: stretch; width: max-content; padding-inline: var(--gutter); will-change: transform; }
.supra .sp-panel { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; }
.supra .sp-panel-title { width: min(78vw, 33rem); margin-right: clamp(1.5rem, 5vw, 5rem); }
.supra .sp-key { font-size: 0.9rem; color: var(--print-3); max-width: 30rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.supra .sp-panel-end { width: min(86vw, 26rem); align-items: flex-start; }
.supra .sp-big { display: block; font-weight: 900; font-size: clamp(5rem, 13vw, 9rem); line-height: 0.9; color: var(--guli); font-variant-numeric: tabular-nums; }
.supra .sp-big-label { display: block; margin-top: 0.6rem; font-size: 1.25rem; font-weight: 600; }
/* Contained, so a name putting on weight lays out its own card and no more. */
.supra .sp-dish { flex: none; width: clamp(16.5rem, 72vw, 25rem); margin-right: clamp(2rem, 5vw, 5.5rem); display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; contain: layout style; }
.supra .sp-dish:nth-child(odd) { flex-direction: column-reverse; }
.supra .sp-dish-art { position: relative; width: min(100%, 43svh); aspect-ratio: 1; align-self: center; will-change: transform; }
.supra .sp-dish-art img { display: block; width: 100%; height: 100%; user-select: none; }
/* The yolk and the drawn-out slice: separate images over the dish, so moving
   them is a transform on their own layer rather than a repaint of the drawing. */
.supra .sp-part { position: absolute; inset: 0; }
.supra .sp-part-yolk { transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 0.45s; }
.supra .sp-dish:not(.sp-in) .sp-part-yolk { transform: scale(0); }
.supra .sp-part-slice { transition: transform 1s var(--out) 0.35s; }
/* 17 of the drawing's 208 units. */
.supra .sp-dish.sp-in .sp-part-slice { transform: translateX(8.17%); }
/* A name inks up to its weight in five presses, like a block print going
   darker, rather than smoothly: each change of weight is a layout of the card,
   and five of them cost what one frame of a smooth transition did. */
.supra .sp-dish-name { font-size: clamp(1.5rem, 5vw, 1.9rem); line-height: 1.15; font-weight: var(--w, 400); transition: font-weight 0.9s steps(5, jump-end) 0.1s; }
.supra .sp-dish-name a { text-decoration: none; }
.supra .sp-dish-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.supra .sp-dish:not(.sp-in) .sp-dish-name { font-weight: 100; }
.supra .sp-dish-serv { font-size: 0.9rem; color: var(--print-2); }
.supra .sp-dish-kcal { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.5rem; color: var(--guli); line-height: 1; }
.supra .sp-dish-kcal .sp-odo { font-size: clamp(2.7rem, 9.5vw, 3.6rem); font-weight: 900; }
.supra .sp-dish-kcal > span:last-child { font-weight: 600; font-size: 1rem; }
.supra .sp-split { height: 0.5rem; margin-top: 0.8rem; border-radius: 999px; overflow: hidden; background: rgba(251, 250, 246, 0.16); }
.supra .sp-split-fill { display: flex; height: 100%; transform-origin: left; transition: transform 1s var(--soft) 0.15s; }
.supra .sp-dish:not(.sp-in) .sp-split-fill { transform: scaleX(0); }
.supra .sp-split i { display: block; height: 100%; }
.supra .sp-macros { display: flex; gap: 1.4rem; margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.supra .sp-macros b { display: block; font-size: 0.8rem; font-weight: 600; }
.supra .sp-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 5.4rem; height: 2px; background: var(--rule); }
.supra .sp-progress i { display: block; height: 100%; background: var(--guli); transform-origin: left; transform: scaleX(0); }

/* ---------- the day: a receipt that prints as you scroll ---------- */
.supra .sp-day-track { position: relative; }
.supra .sp-day-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 35rem; overflow: hidden; }
.supra .sp-day-grid { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.25rem; padding-top: 1.5rem; }
.supra .sp-day-copy .sp-h2 { font-size: clamp(1.9rem, 6.2vw, 4.25rem); }
.supra .sp-day-copy .sp-body { display: none; margin-top: 1rem; }
.supra .sp-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; margin-top: 1.1rem; }
.supra .sp-day-plate { position: relative; width: 7.75rem; aspect-ratio: 1; }
.supra .sp-day-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.supra .sp-in-plate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--ink); line-height: 1; }
.supra .sp-day-plate .sp-odo { font-weight: 900; font-size: 1.55rem; }
.supra .sp-day-plate small { margin-top: 0.2rem; font-size: 0.72rem; font-weight: 600; color: var(--ink-2); }
.supra .sp-day-plate .sp-wide { display: none; }
.supra .sp-bars { display: grid; gap: 0.6rem; }
.supra .sp-bars li { font-size: 0.9rem; }
.supra .sp-bars .sp-row { display: flex; justify-content: space-between; gap: 0.75rem; font-variant-numeric: tabular-nums; }
.supra .sp-bars .sp-row span:first-child { font-weight: 600; }
.supra .sp-bars .sp-row span:last-child { color: var(--print-2); white-space: nowrap; }
.supra .sp-bars .sp-row b { font-weight: 700; color: var(--print); }
.supra .sp-bars .sp-over b { color: var(--ajika-text); }
.supra .sp-bar { height: 0.4rem; margin-top: 0.3rem; border-radius: 999px; background: rgba(251, 250, 246, 0.16); overflow: hidden; }
.supra .sp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 0.6s var(--soft); }
/* On a phone the paper rises under the summary, so it fades out there rather
   than being cut by a straight edge. */
.supra .sp-printer { position: relative; min-height: 0; overflow: hidden; margin-inline: 0.4rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem); mask-image: linear-gradient(to bottom, transparent, #000 2.5rem); }
.supra .sp-slot { position: absolute; left: 0; right: 0; bottom: 0; height: 0.95rem; border-radius: 0.5rem; background: var(--lurji-deep); box-shadow: 0 -1px 0 rgba(251, 250, 246, 0.28); z-index: 2; }
.supra .sp-receipt { position: absolute; left: 0.7rem; right: 0.7rem; top: 100%; background: var(--bamba); color: var(--ink); padding: 1.4rem 1.25rem 2.4rem; will-change: transform;
  font-size: 0.95rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.supra .sp-receipt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; background: var(--teeth) repeat-x; }
.supra .sp-r-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.8rem; border-bottom: 2px solid var(--ink); }
.supra .sp-r-head b { font-weight: 900; font-stretch: 62.5%; font-size: 2rem; line-height: 1; }
.supra .sp-r-head span { font-size: 0.85rem; color: var(--ink-2); }
.supra .sp-r-meal { display: flex; justify-content: space-between; margin-top: 1rem; padding-bottom: 0.25rem; font-size: 0.85rem; font-weight: 700; color: var(--ink-2); border-bottom: 1px dashed rgba(20, 32, 79, 0.3); }
.supra .sp-r-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2rem; gap: 0.75rem; align-items: baseline; padding-top: 0.45rem; }
.supra .sp-r-row i { font-style: normal; font-size: 0.85rem; color: var(--ink-2); }
.supra .sp-r-row b { text-align: right; font-weight: 700; }
.supra .sp-r-total { margin-top: 1.1rem; padding-top: 0.7rem; border-top: 2px solid var(--ink); }
.supra .sp-r-total p { display: flex; justify-content: space-between; align-items: baseline; }
.supra .sp-r-total p:first-child b { font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.supra .sp-r-total p + p { color: var(--ink-2); font-size: 0.9rem; margin-top: 0.2rem; }
.supra .sp-r-stamp-row { display: flex; justify-content: flex-end; padding-right: 0.4rem; }
.supra .sp-r-stamp { display: inline-grid; margin-top: 1.2rem; padding: 0.5rem 0.9rem 0.6rem; border: 2.5px solid var(--lurji); outline: 1.5px solid var(--lurji); outline-offset: 2.5px; border-radius: 0.4rem; color: var(--lurji);
  transform: rotate(-5deg); line-height: 1.1; opacity: 0; }
.supra .sp-r-stamp span { font-size: 0.8rem; font-weight: 700; }
.supra .sp-r-stamp b { font-weight: 900; font-size: 1.75rem; }
.supra .sp-r-stamp.sp-hit { animation: sp-press 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.supra .sp-r-note { margin-top: 1.3rem; font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); }
.supra .sp-r-note a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.supra .sp-receipt :focus-visible { outline-color: var(--lurji); }
@media (min-width: 64rem) {
  .supra .sp-day-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); grid-template-rows: minmax(0, 1fr); gap: 5rem; padding-top: 0; }
  .supra .sp-day-copy { align-self: center; }
  .supra .sp-day-copy .sp-body { display: block; }
  .supra .sp-summary { grid-template-columns: max-content minmax(0, 19rem); justify-content: start; gap: 2.75rem; margin-top: 2.5rem; }
  .supra .sp-day-plate { width: 15rem; }
  .supra .sp-day-plate .sp-odo { font-size: 3.1rem; }
  .supra .sp-day-plate small { font-size: 0.9rem; margin-top: 0.35rem; }
  .supra .sp-day-plate .sp-wide { display: inline; }
  .supra .sp-bars { gap: 1rem; }
  .supra .sp-bars li { font-size: 1rem; }
  .supra .sp-bar { height: 0.5rem; margin-top: 0.4rem; }
  .supra .sp-printer { margin: 0 0 2.5rem; -webkit-mask-image: none; mask-image: none; }
}

/* Small phones: a smaller plate gives the bars their room, and the receipt's
   type steps down so a dish's name keeps to one line. */
@media (max-width: 26rem) {
  .supra .sp-day-plate { width: 6.5rem; }
  .supra .sp-day-plate .sp-odo { font-size: 1.3rem; }
  .supra .sp-bars li { font-size: 0.8rem; }
  .supra .sp-receipt { padding: 1.2rem 1rem 2rem; font-size: 0.875rem; }
  .supra .sp-r-row { grid-template-columns: minmax(0, 1fr) auto 2.6rem; gap: 0.5rem; }
}

/* ---------- the tools: a menu card ---------- */
.supra .sp-tools { position: relative; background: var(--bamba); color: var(--ink); padding: 4.5rem 0 5rem; margin: 5rem 0 9px; }
.supra .sp-tools::before, .supra .sp-tools::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: var(--teeth) repeat-x; }
.supra .sp-tools::before { bottom: calc(100% - 1px); }
.supra .sp-tools::after { top: calc(100% - 1px); transform: scaleY(-1); }
.supra .sp-tools :focus-visible { outline-color: var(--lurji); }
.supra .sp-tools .sp-h2 { max-width: 26ch; }
.supra .sp-menu { margin-top: 2.75rem; border-top: 2px solid var(--ink); }
.supra .sp-menu a { display: grid; gap: 0.3rem 2.5rem; padding: 1.15rem 0 1.2rem; border-bottom: 1px solid rgba(20, 32, 79, 0.2); text-decoration: none; }
.supra .sp-menu b { font-stretch: 66%; font-weight: 520; font-size: clamp(1.55rem, 3.6vw, 2.15rem); line-height: 1.1; transition: font-weight 0.4s var(--soft); }
.supra .sp-menu a:hover b, .supra .sp-menu a:focus-visible b { font-weight: 900; }
.supra .sp-menu span { color: var(--ink-2); max-width: 54ch; text-wrap: pretty; }
@media (min-width: 52rem) { .supra .sp-menu a { grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); align-items: baseline; } }

/* ---------- the ask ---------- */
.supra .sp-ask { position: relative; padding: 5.5rem 0 0; overflow: clip; }
.supra .sp-ask .sp-wrap { position: relative; display: grid; gap: 2.5rem; }
.supra .sp-ask .sp-h2 { font-stretch: 62.5%; font-size: clamp(2.9rem, 9vw, 6.5rem); line-height: 1; max-width: 13ch; font-weight: 900; transition: opacity 0.9s var(--soft), transform 1.1s var(--out); }
.supra .sp-ask:not(.sp-in) .sp-h2 { opacity: 0; transform: translateY(0.35em); }
.supra .sp-ask .sp-body { margin-top: 1.3rem; font-size: 1.1rem; }
.supra .sp-ask-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }
.supra .sp-ask-plate { width: min(78vw, 24rem); aspect-ratio: 1; margin: 0 -4.5rem 0 auto; transition: transform 1.3s var(--out); }
.supra .sp-ask:not(.sp-in) .sp-ask-plate { transform: translateX(45%) rotate(80deg); }
.supra .sp-ask-plate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.supra .sp-ask .sp-band { margin-top: 4rem; }
@media (min-width: 64rem) {
  .supra .sp-ask { padding-top: 7.5rem; }
  .supra .sp-ask .sp-wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .supra .sp-ask-plate { width: 29rem; margin-right: -7rem; }
}

/* ---------- the footer ---------- */
.supra .sp-foot { background: var(--lurji-deep); color: var(--print); padding: 3.25rem 0 1.75rem; font-size: 0.95rem; }
.supra .sp-foot-grid { display: grid; gap: 2.25rem; }
.supra .sp-foot p { color: var(--print-2); max-width: 26ch; margin-top: 0.9rem; }
.supra .sp-foot h2 { font-size: 0.85rem; font-weight: 600; color: var(--print-3); margin-bottom: 0.7rem; }
.supra .sp-foot li + li { margin-top: 0.45rem; }
.supra .sp-foot li a, .supra .sp-foot li button { text-decoration: none; color: var(--print-2); }
.supra .sp-foot li a:hover, .supra .sp-foot li button:hover { color: var(--print); }
.supra .sp-foot small { display: block; margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--print-3); }
@media (min-width: 40rem) { .supra .sp-foot-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); } }

@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-rise { from { transform: translateY(112%); } to { transform: none; } }
@keyframes sp-settle { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
@keyframes sp-set-plate { 0% { opacity: 0; transform: translate(42%, -8%) rotate(75deg); } 18% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes sp-print { from { opacity: 0; transform: translateX(-0.6rem); } to { opacity: 1; transform: none; } }
@keyframes sp-drop { 0% { opacity: 0; transform: translateY(-60%) scale(1.5); } 55% { opacity: 1; transform: translateY(0) scale(0.92); } 78% { transform: scale(1.035); } 100% { opacity: 1; transform: none; } }
@keyframes sp-lift { to { opacity: 0; transform: translateY(-50%) scale(1.35); } }
@keyframes sp-ping { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sp-sweep { from { transform: translateX(-8rem); } to { transform: translateX(100%); } }
@keyframes sp-press { from { opacity: 0; transform: rotate(-14deg) scale(2.3); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-5deg) scale(1); } }

/* The borders drift with the scroll, run by the browser on the compositor
   where it can (elsewhere they simply stay put). The table and the receipt
   are moved from script (motion.ts says why not this way too). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .supra .sp-band::before { animation: sp-drift linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes sp-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-600px, 0, 0); } }

/* Without motion nothing pins and nothing rolls: the table scrolls sideways
   by hand and the receipt is already printed. */
@media (prefers-reduced-motion: reduce) {
  .supra *, .supra *::before, .supra *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .supra .sp-table-stage, .supra .sp-day-stage { position: static; height: auto; min-height: 0; }
  .supra .sp-strip { width: auto; overflow-x: auto; padding-block: 2rem; transform: none !important; }
  .supra .sp-progress, .supra .sp-slot { display: none; }
  .supra .sp-progress i { transform: none; }
  .supra .sp-dish-art { transform: none !important; }
  .supra .sp-day-grid { height: auto; padding-block: 3rem; }
  .supra .sp-printer { overflow: visible; }
  .supra .sp-receipt { position: relative; top: auto; left: auto; right: auto; transform: none !important; }
  .supra .sp-r-stamp { opacity: 1; }
}

/* ---------- the light scheme ---------- */
/* The cloth turned over: paper is the ground, the print is ink, plates and
   the receipt stay paper and keep their shadows. The controls that are
   pieces of cloth themselves (the menu, the stepper, the search button, the
   footer) keep the white print. High specificity so it outranks the colour
   themes in supra-app.css. */
:root:root:root[data-design="supra"][data-scheme="light"] .supra {
  --ground: #f1efe7;
  --print: #14204f;
  --print-2: rgba(20, 32, 79, 0.78);
  --print-3: rgba(20, 32, 79, 0.6);
  --rule: rgba(20, 32, 79, 0.18);
  --sp-shadow: rgba(13, 24, 74, 0.22);
  --ajika-text: #b3392c;
  --sp-protein: #c4452c;
  --sp-fat: #c68b00;
  --sp-carbs: #a8865a;
  --field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='%2314204f' fill-opacity='.05'%3E%3Cpath d='M18 14.5l3 3.5-3 3.5-3-3.5z'/%3E%3Cpath d='M54 50.5l3 3.5-3 3.5-3-3.5z'/%3E%3C/g%3E%3C/svg%3E");
}
:root:root:root[data-design="supra"][data-scheme="light"] .supra :is(.sp-sheet, .sp-stepper, .sp-search-go, .sp-foot) {
  --print: #fbfaf6;
  --print-2: rgba(251, 250, 246, 0.8);
  --print-3: rgba(251, 250, 246, 0.66);
  --rule: rgba(251, 250, 246, 0.24);
}
:root[data-design="supra"][data-scheme="light"] .supra :is(.sp-split, .sp-bar) {
  background: rgba(20, 32, 79, 0.1);
}
/* The fish border is printed white, so on paper it keeps a strip of cloth
   under it: a woven border across the page rather than a white ghost. */
:root[data-design="supra"][data-scheme="light"] .supra .sp-band {
  background: var(--lurji);
}
/* Yolk is a fill on paper, not a print: the figures that are yolk on the
   cloth take a deeper amber that reads on paper. Yolk buttons stay yolk. */
:root[data-design="supra"][data-scheme="light"] .supra :is(.sp-figure, .sp-big, .sp-dish-kcal, .sp-nav-links .sp-admin) {
  color: #a86b00;
}
/* The footer on a phone: the links two abreast, the documents wrapping on
   one line, the headings for screen readers only, less padding. It was
   nearly a screen tall. */
@media (max-width: 39.99rem) {
  .supra .sp-foot { padding: 2rem 0 1rem; }
  .supra .sp-foot-grid { gap: 1.25rem; }
  .supra .sp-foot p { margin-top: 0.5rem; max-width: 34ch; }
  .supra .sp-foot h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .supra .sp-foot-grid nav:first-of-type ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }
  .supra .sp-foot-grid nav:last-of-type ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.85rem; }
  .supra .sp-foot li + li { margin-top: 0; }
  .supra .sp-foot small { margin-top: 1.25rem; padding-top: 0.9rem; }
}