/* ==========================================================================
   pantry-app.css — PantryPal's Home and Recipe screens, running on the case
   study (pantry-app.js).

   This is the app's language, not the page's: Fugaz One for every label and
   Faustina only for recipe prose, ink outlines two points wide, butter under
   everything, and the shipped colours as the Swift package draws them
   (PantryPal/design-system/Sources/PantryPalDS/Tokens/DSColors.swift), which
   are not always the Figma file's: coral is #FF7E7D, sampled off the
   rendered app, where the token JSON still says #FF8D7E.

   Every number is in the app's own points. The screen is drawn at the
   393pt design width of an iPhone 16 Pro and --pt is one of its points,
   so the phone can be any size on the page and still lay out exactly as
   the app does. The measurements are read off the Swift source (DishCard,
   CookScreen, the DS tokens) and checked against the app's own captures
   (tools/ui-sweep/shots/final/16), not eyeballed.

   The header and each screen's title band are the app's own pixels, cropped
   from its App Store captures (chrome-*.webp): the wordmark, the chef and
   the scallops are drawn art, and a copy of them would only ever be a
   worse copy. Everything below the band is live.
   ========================================================================== */

@font-face {
  font-family: 'PP Fugaz One';
  src: url('fonts/FugazOne-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'PP Faustina';
  src: url('fonts/Faustina.ttf') format('truetype');
  font-weight: 300 800;
  font-display: swap;
}

/* One of the app's points, computed once per screen against the screen's own
   width, so a container query further in (the plate is one) cannot re-read
   it against a smaller box. */
@property --pt {
  syntax: '<length>';
  inherits: true;
  initial-value: 1px;
}

/* ---- the device: Tigo's iPhone 16 Pro render over a live screen ----
   The render is laid over the screen, so its glass highlight falls across
   it the way real glass does, and it lets every press through. The screen
   stands in the render's aperture, measured off the render's own alpha
   (appstore-lab/README.md: x 195–3431, y 187–7227 of 3627×7415), and is
   clipped to the aperture's corner radius, fitted to the same alpha. */
.pp-device {
  position: relative;
  aspect-ratio: 900 / 1840;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.pp-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pp-screen {
  --butter: #ffd67e;
  --coral: #ff7e7d;
  --sky: #b8edf8;
  --red: #ff4b4b;
  --green: #b4ff85;
  --steel: #cdcdcd;
  --offwhite: #f7f7f7;
  --lettuce: #beeba6;
  --ink: #000;
  --placeholder: #5a5a5a;
  /* Fugaz One's own line, as SwiftUI sets it: its hhea ascent and descent,
     1046 and 422 in a 1000 em (a title band's rules are overlays, so they
     add nothing to it) */
  --fugaz-lh: 1.468;
  position: absolute;
  left: 5.3764%;
  top: 2.5219%;
  width: 89.2197%;
  height: 94.9427%;
  overflow: hidden;
  border-radius: 15.848% / 7.286%;
  background: var(--butter);
  container-type: size;
  isolation: isolate;
  /* the screen is the app's, whatever the page sets */
  font-family: 'PP Fugaz One', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.pp-screen > * { --pt: calc(100cqw / 393); }
.pp-view {
  --pt: calc(100cqw / 393);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--butter);
  font-size: calc(16 * var(--pt));
  visibility: hidden;
}
.pp-view.is-on { visibility: visible; }
/* The phone brings its own reset rather than leaning on the page's, and
   every rule of it weighs nothing (:where), so a class further down always
   wins: the first cut's plain `.pp-screen button` outweighed `.pp-go` and
   took the red off Start cooking. */
:where(.pp-device) *, :where(.pp-device) *::before, :where(.pp-device) *::after { box-sizing: border-box; }
:where(.pp-screen) :is(p, h1, h2, h3, ol, ul, figure) { margin: 0; padding: 0; }
:where(.pp-screen) button {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:where(.pp-screen) button:focus-visible { outline: calc(2 * var(--pt)) solid #1e1e1e; outline-offset: calc(2 * var(--pt)); }
:where(.pp-screen) img { display: block; }
.pp-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pp-chrome {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  pointer-events: none;
}
/* the outline every white display word wears: eight copies of the word,
   two points out, behind the fill (DS OutlinedText, width 2) */
.pp-outlined {
  color: #fff;
  --o: calc(2 * var(--pt));
  --d: calc(1.4142 * var(--pt));
  text-shadow:
    var(--o) 0 0 var(--ink), var(--d) var(--d) 0 var(--ink),
    0 var(--o) 0 var(--ink), calc(-1 * var(--d)) var(--d) 0 var(--ink),
    calc(-1 * var(--o)) 0 0 var(--ink), calc(-1 * var(--d)) calc(-1 * var(--d)) 0 var(--ink),
    0 calc(-1 * var(--o)) 0 var(--ink), var(--d) calc(-1 * var(--d)) 0 var(--ink);
  white-space: nowrap;
}

/* ======================================================================
   Home: the chef's pick
   ====================================================================== */
/* the door's count, laid over the one the capture carries */
.pp-door-count {
  position: absolute;
  z-index: 3;
  left: calc(353 * var(--pt));
  top: calc(135 * var(--pt));
  display: grid;
  place-items: center;
  width: calc(25 * var(--pt));
  height: calc(25 * var(--pt));
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--ink);
  font-size: calc(14 * var(--pt));
  line-height: 1;
  pointer-events: none;
}
.pp-door-count.is-bumped { animation: pp-bump 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pp-bump { 40% { scale: 1.28; } }

/* the rank badge over the deck: "Chef's top pick", then "Pick 2 of 10" */
.pp-rank {
  position: absolute;
  top: calc(221.7 * var(--pt));
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  /* the chip's 13 in Fugaz One's own line, and 4 above and below */
  height: calc(27.1 * var(--pt));
  padding: 0 calc(12 * var(--pt));
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  font-size: calc(13 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
  line-height: 1;
  white-space: nowrap;
}
.pp-rank img { width: calc(20 * var(--pt)); height: calc(18 * var(--pt)); object-fit: contain; }

/* The deck: the card on top, and while it moves the one leaving it.
   (Measured off the 1.3 build on an iPhone 16: the card's outer edge from
   261 to 686.) */
.pp-deck {
  position: absolute;
  left: calc(20 * var(--pt));
  top: calc(261 * var(--pt));
  width: calc(353 * var(--pt));
  height: calc(425 * var(--pt));
  touch-action: pan-y;
}

/* ---- the dish card (Components/DishCard.swift) ---- */
.pp-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: calc(2 * var(--pt)) solid var(--ink);
  border-radius: calc(12 * var(--pt));
  background: #fff;
  cursor: pointer;
  text-align: center;
  will-change: translate, rotate;
}
.pp-card-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border-radius: inherit;
}
.pp-card-open:focus-visible { outline: calc(2 * var(--pt)) solid #1e1e1e; outline-offset: calc(3 * var(--pt)); }
/* the plate takes whatever the words below it leave */
.pp-hero {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: calc(12 * var(--pt)) 0;
  overflow: hidden;
}
/* 12 of padding and the pill's 30-point band, less the two points the
   capture shows the plate riding up into it */
.pp-card.is-stocked .pp-hero { padding-top: calc(40.5 * var(--pt)); }
.pp-stocked {
  position: absolute;
  z-index: 2;
  left: calc(12 * var(--pt));
  top: calc(12 * var(--pt));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  padding: calc(4 * var(--pt)) calc(9 * var(--pt));
  border-radius: 99px;
  background: var(--green);
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  font-size: calc(11 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
  line-height: var(--fugaz-lh);
  white-space: nowrap;
}
.pp-stocked svg { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); }

/* The plate (AppChrome.swift DishPlate): the art in a coral ellipse with an
   ink rim, on a white one 13 points wider, on a sunburst that follows the
   plate's own proportions and fades into the card. The plate is a size
   container, so all of it is drawn off its own height. */
.pp-plate {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  container-type: size;
}
.pp-plate > * {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.pp-rays {
  width: calc(100cqh * 1.3 * 1.24);
  height: calc(100cqh * 1.28);
  border-radius: 50%;
  /* twenty rays, every other one filled, from three o'clock */
  background: repeating-conic-gradient(from 90deg, var(--ray, var(--butter)) 0deg 18deg, transparent 18deg 36deg);
  -webkit-mask: radial-gradient(circle calc(210 * var(--pt)) at 50% 50%, #000 42%, rgb(0 0 0 / 0.85) 62%, transparent 100%);
  mask: radial-gradient(circle calc(210 * var(--pt)) at 50% 50%, #000 42%, rgb(0 0 0 / 0.85) 62%, transparent 100%);
}
.pp-rim {
  width: calc(100cqh * 1.3 + 13 * var(--pt));
  height: calc(100cqh + 13 * var(--pt));
  border-radius: 50%;
  background: #fff;
}
.pp-dish {
  width: calc(100cqh * 1.3);
  height: 100cqh;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--ink);
}
.pp-dish img {
  position: absolute;
  inset: calc(8 * var(--pt));
  width: calc(100% - 16 * var(--pt));
  height: calc(100% - 16 * var(--pt));
  object-fit: contain;
}

/* the title, one line, shrunk to fit rather than cut (min 55%) */
.pp-title {
  flex: none;
  display: grid;
  place-items: center;
  height: calc(57 * var(--pt));
  padding: 0 calc(8 * var(--pt));
  border-block: calc(2 * var(--pt)) solid var(--ink);
  background: var(--butter);
  overflow: hidden;
}
.pp-title .pp-outlined { font-size: calc(28 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-body {
  flex: none;
  display: grid;
  justify-items: center;
  gap: calc(10 * var(--pt));
  /* the 1.3 build measures 10 under the last piece, not the 12 the source asks */
  padding: calc(14 * var(--pt)) calc(12 * var(--pt)) calc(10 * var(--pt));
}
.pp-summary {
  /* Faustina's own line at 16 is 20.15, with the source's 2 between lines:
     a line every 22.15, and a point less above the first and below the
     last than a CSS line box of that height leaves (42.3 for two lines, as
     measured). The lines break as SwiftUI's do, as full as they will go
     (balanced, "lettuce," went down a line the app keeps it on). */
  margin: calc(-1 * var(--pt)) calc(-4 * var(--pt));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: 'PP Faustina', Georgia, serif;
  font-weight: 500;
  font-size: calc(16 * var(--pt));
  line-height: calc(22.15 * var(--pt));
}
.pp-macros { display: flex; gap: calc(6 * var(--pt)); }
.pp-macro {
  padding: calc(2.5 * var(--pt)) calc(8 * var(--pt));
  border-radius: 99px;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  font-size: calc(12 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
  line-height: calc(12 * var(--fugaz-lh) * var(--pt));
  white-space: nowrap;
}
/* On a card with the add-missing chip the card is a scroll-free screen's
   worth, and the app gives the pills its shrink before anything else: they
   come down to their floor, four fifths (19 points tall in the 1.3 build,
   not 22.6), and the summary and the chip keep their size. */
.pp-card.is-short .pp-macro {
  font-size: calc(9.6 * var(--pt));
  letter-spacing: calc(0.416 * var(--pt));
  line-height: calc(9.6 * var(--fugaz-lh) * var(--pt));
}
.pp-macro:nth-child(1) { background: var(--butter); }
.pp-macro:nth-child(2) { background: var(--lettuce); }
.pp-macro:nth-child(3) { background: var(--sky); }

/* What the shelf is short of, and the one button that adds all of it
   (DishCard coverageChip): the band's coral, on the dashed edge the design
   system keeps for what is provisional, 6 on and 4 off, drawn as the app
   strokes it, inside its own edge. It presses as the app's stickers do:
   down two points and a shade darker. */
.pp-missing {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: calc(5 * var(--pt));
  padding: calc(8 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: var(--coral);
  transition: translate 80ms ease-out, filter 80ms ease-out;
}
.pp-missing:active { translate: 0 calc(2 * var(--pt)); filter: brightness(0.94); }
.pp-missing:focus-visible { outline: calc(2 * var(--pt)) solid #1e1e1e; outline-offset: calc(2 * var(--pt)); }
.pp-dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pp-dash rect {
  x: calc(1 * var(--pt));
  y: calc(1 * var(--pt));
  width: calc(100% - 2 * var(--pt));
  height: calc(100% - 2 * var(--pt));
  rx: calc(11 * var(--pt));
  fill: none;
  stroke: var(--ink);
  stroke-width: calc(2 * var(--pt));
  stroke-dasharray: calc(6 * var(--pt)) calc(4 * var(--pt));
}
/* (a browser that cannot place a rect from CSS gets a dashed border) */
@supports not (x: 1px) {
  .pp-dash { display: none; }
  .pp-missing { border: calc(2 * var(--pt)) dashed var(--ink); }
}
.pp-missing-word { font-size: calc(12 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); line-height: calc(12 * var(--fugaz-lh) * var(--pt)); }
.pp-missing-row { display: flex; gap: calc(4 * var(--pt)); }
.pp-missing-row > span {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: calc(2 * var(--pt));
  width: calc(62 * var(--pt));
  height: calc(46 * var(--pt));
}
/* the overflow's column is the narrower 44 */
.pp-missing-row > .is-more { width: calc(44 * var(--pt)); }
/* a disc 32 across, which is what SwiftUI's Circle draws in the 34 × 32
   frame the drawing and its padding make (it was an ellipse that wide) */
.pp-missing-row i {
  display: grid;
  place-items: center;
  width: calc(32 * var(--pt));
  height: calc(32 * var(--pt));
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  font-style: normal;
  font-size: calc(13 * var(--pt));
}
.pp-missing-row img { width: calc(26 * var(--pt)); height: calc(24 * var(--pt)); object-fit: contain; }
.pp-missing-row b {
  max-width: 100%;
  overflow: hidden;
  font-weight: 400;
  font-size: calc(9.5 * var(--pt));
  white-space: nowrap;
  text-overflow: clip;
}
.pp-missing-row .is-more b { color: var(--placeholder); }
.pp-missing-row .is-more i { background: var(--offwhite); }

/* ---- the two actions (DS PPPrimaryButtonStyle, PPSecondaryStickerStyle):
   a press sinks two points and darkens a tenth, in 80ms ---- */
.pp-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: calc(10 * var(--pt));
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--ink);
  line-height: 1;
  white-space: nowrap;
  transition: translate 80ms ease-out;
}
.pp-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.1);
  opacity: 0;
  transition: opacity 80ms ease-out;
}
.pp-btn:active, .pp-btn.is-pressed { translate: 0 calc(2 * var(--pt)); }
.pp-btn:active::after, .pp-btn.is-pressed::after { opacity: 1; }
/* the glyphs (pantry-app.js GLYPH): each one's box is its ink, in points,
   and its strokes are its own, in the capture's pixels */
.pp-g {
  flex: none;
  width: calc(var(--gw) * var(--pt));
  height: calc(var(--gh) * var(--pt));
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pp-g .is-fill { fill: currentColor; stroke: none; }
/* 11.3 from a leading glyph's ink to the words' and 10.7 from the words'
   to a trailing arrow's, as measured: the HStack's 8 and the symbol's own
   side bearings, less the font's, which the page sets the same */
.pp-btn:has(> .pp-g:first-child) { gap: calc(10.6 * var(--pt)); }
.pp-next { gap: calc(9.9 * var(--pt)); }
/* the pan sits a point low, as SF Symbols' frying.pan does on its line */
.pp-g.is-pan { translate: 0 calc(1 * var(--pt)); }
.pp-go {
  position: absolute;
  left: calc(20 * var(--pt));
  top: calc(698 * var(--pt));
  width: calc(353 * var(--pt));
  background: var(--red);
  color: #fff;
  font-size: calc(20 * var(--pt));
}
.pp-row {
  position: absolute;
  left: calc(20 * var(--pt));
  top: calc(754 * var(--pt));
  width: calc(353 * var(--pt));
  display: flex;
  gap: calc(8 * var(--pt));
}
.pp-next { flex: 1; background: #fff; font-size: calc(16 * var(--pt)); }
/* the way back to the dish before, once there is one */
.pp-prev {
  flex: none;
  width: calc(62 * var(--pt));
  background: #fff;
  transition: translate 80ms ease-out, width 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), margin 0.32s cubic-bezier(0.3, 1.25, 0.5, 1), opacity 0.2s ease, scale 0.32s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.pp-prev[hidden] { display: flex; width: 0; margin-right: calc(-8 * var(--pt)); opacity: 0; scale: 0.6; pointer-events: none; }

/* The seat's verb, which it does not have yet (HomeScreen.primaryButton,
   the cooking case): the primary disabled, on the design system's steel
   with the placeholder's grey, saying what the chef is doing. */
.pp-go.is-thinking { background: var(--steel); color: var(--placeholder); cursor: default; }
.pp-go.is-thinking::after { display: none; }
.pp-go.is-thinking:active { translate: none; }

/* ---- the seat (Components/CookingDishCard.swift) ----
   DishCard's frame, part for part, so the dish that fills it changes the
   food and nothing else: the pill in the corner (butter, the app's waiting
   surface, under the rank badge's hat), the plate coral, the name band's
   treatment, and where a dish keeps its pills, the bar. */
.pp-card.is-seat { cursor: grab; }
.pp-card.is-seat .pp-hero { padding-top: calc(40.5 * var(--pt)); }
.pp-stocked.is-cooking { gap: calc(4 * var(--pt)); background: var(--butter); }
.pp-stocked.is-cooking img { width: calc(14 * var(--pt)); height: calc(12 * var(--pt)); object-fit: contain; }
/* the halo turns once in seven seconds, IllustrationView's clock */
.pp-plate.is-writing .pp-rays { animation: pp-turn 7s linear infinite; }
@keyframes pp-turn { to { rotate: 360deg; } }
/* the card, 68 per cent of the plate's width and tipped two degrees, the
   pencil free to stand up off its top edge */
.pp-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  height: auto;
  overflow: visible;
  translate: -50% -50%;
  rotate: -2deg;
}
.pp-ln { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
/* provisional while it writes, real when it is done: two borders that
   cross over, which is what the app does since SwiftUI cannot animate one
   border's style */
.pp-menu-dashed, .pp-menu-solid { transition: opacity 0.35s ease-out; }
.pp-menu-solid { opacity: 0; }
.pp-menu.is-done .pp-menu-dashed { opacity: 0; }
.pp-menu.is-done .pp-menu-solid { opacity: 1; }
/* under the name, 14 above the words, 12 to the bar, and the measured 10
   under it (as under a dish's pills) */
.pp-body.is-seat { gap: calc(12 * var(--pt)); padding-top: calc(14 * var(--pt)); }
.pp-wait {
  justify-self: stretch;
  display: grid;
  justify-items: center;
  gap: calc(4 * var(--pt));
  padding: 0 calc(12 * var(--pt));
}
.pp-wait p {
  font-family: 'PP Faustina', Georgia, serif;
  font-size: calc(15 * var(--pt));
  line-height: calc(18.9 * var(--pt));
  color: var(--placeholder);
  white-space: nowrap;
}
/* EstimatedProgressBar: a white capsule 10 tall, the brand red filling it
   from the left, the hairline over both */
.pp-track {
  position: relative;
  justify-self: stretch;
  height: calc(10 * var(--pt));
  border-radius: 99px;
  background: #fff;
}
.pp-track i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(10 * var(--pt)); border-radius: 99px; background: var(--red); }
.pp-track::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink); }

/* ---- the welcome (HomeScreen emptyShelfWelcome, SpillStage) ----
   An empty shelf trades the deck for the app's welcome, under its own
   title band ("Hey, chef!", no wardrobe): the pile of food tipped onto the
   counter, the question swung through it, and the two ways to fill a
   shelf. The pile is the app's 393 × 424 canvas, scaled as the app scales
   it to the room an iPhone 16 leaves (608.3 under the band, less the 188
   the buttons and their air take: 0.9913), from 16 under the band; the
   buttons stand at 662 and 718, as measured. (It was a still of the 1.2
   build, its scan button wearing the chef's hat the app has since traded
   for a camera, and its two buttons pressed nothing.) */
/* The welcome and the deck are two states of one screen, and the app swaps
   them with no animation of its own: the deck is simply what Home is once
   the welcome lets go, already there under a page sliding away. */
.pp-chrome.is-welcome, .pp-welcome { visibility: hidden; }
.pp-home.is-empty :is(.pp-chrome.is-welcome, .pp-welcome) { visibility: visible; }
.pp-home.is-empty :is(.pp-chrome.is-deck, .pp-door-count, .pp-rank, .pp-deck, .pp-go, .pp-row) { visibility: hidden; }
.pp-welcome { position: absolute; inset: 0; z-index: 1; }
.pp-spill {
  position: absolute;
  left: calc(1.7 * var(--pt));
  top: calc(225.7 * var(--pt));
  width: calc(393 * var(--pt));
  height: calc(424 * var(--pt));
  scale: 0.9913;
  transform-origin: 0 0;
}
.pp-piece {
  position: absolute;
  left: calc(var(--x) * var(--pt));
  top: calc(var(--y) * var(--pt));
  width: calc(var(--w) * var(--pt));
  height: calc(var(--w) / var(--a) * var(--pt));
  rotate: calc(var(--t) * 1deg);
  object-fit: contain;
}
/* opaque, so the pile tucks behind it and no letter sits on a drawing */
.pp-band {
  position: absolute;
  left: calc(-22 * var(--pt));
  top: calc(194 * var(--pt));
  width: calc(437 * var(--pt));
  height: calc(78 * var(--pt));
  rotate: -3.5deg;
  display: grid;
  place-items: center;
  padding: 0 calc(20 * var(--pt));
  overflow: hidden;
  border-block: calc(2 * var(--pt)) solid var(--ink);
  background: var(--coral);
}
.pp-band .pp-outlined { font-size: calc(28 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-scan, .pp-type {
  position: absolute;
  left: calc(20 * var(--pt));
  width: calc(353 * var(--pt));
  font-size: calc(20 * var(--pt));
}
.pp-scan { top: calc(662 * var(--pt)); background: var(--red); color: #fff; }
.pp-type { top: calc(718 * var(--pt)); background: #fff; }

/* ======================================================================
   Type it in! (Screens/ManualAddScreen.swift)
   As it reads once the groceries are typed and the keyboard is put away:
   the entry card, still dashed with nothing in its field; what is on the
   shelf now, as chips to undo; the staples still on offer; and the bottom
   slot's way forward. From 16 under the band, 24 in from each side, 12
   between the pieces, and 4 under each piece's label.
   ====================================================================== */
.pp-tscroll {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(206.7 * var(--pt));
  height: calc(539.3 * var(--pt));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pp-tscroll::-webkit-scrollbar { display: none; }
.pp-tin { display: grid; gap: calc(12 * var(--pt)); padding: calc(16 * var(--pt)) calc(24 * var(--pt)) calc(24 * var(--pt)); }
/* art, name and add as one object, on the dashed provisional edge */
.pp-entry {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: #fff;
}
.pp-entry.is-ready .pp-dash rect { stroke-dasharray: none; }
.pp-well {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(68 * var(--pt));
  height: calc(62 * var(--pt));
  color: var(--placeholder);
}
/* a Circle in the 68 × 62 the drawing and its padding make: 62 across */
.pp-well::before {
  content: '';
  position: absolute;
  left: calc(3 * var(--pt));
  top: 0;
  width: calc(62 * var(--pt));
  height: calc(62 * var(--pt));
  border-radius: 50%;
  background: var(--offwhite);
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
}
.pp-well .pp-g { position: relative; }
.pp-field {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: calc(19 * var(--pt));
  line-height: var(--fugaz-lh);
  color: var(--placeholder);
  white-space: nowrap;
}
.pp-plusbadge { flex: none; width: calc(44 * var(--pt)); height: calc(39.6 * var(--pt)); }
.pp-tlabel {
  margin-bottom: calc(4 * var(--pt));
  font-size: calc(12 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
  line-height: var(--fugaz-lh);
}
.pp-tlabel span, .pp-tlabel.is-quiet { color: var(--placeholder); }
/* the shelf so far two to a row (an adaptive 128 at least), the staples
   three; each chip as wide as it is, in the middle of its cell */
.pp-tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8 * var(--pt)); justify-items: center; }
.pp-tgrid.is-staples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-tchip {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--pt));
  max-width: 100%;
  height: calc(44 * var(--pt));
  padding: 0 calc(8 * var(--pt));
  border-radius: 99px;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  font-size: calc(13 * var(--pt));
  line-height: 1;
  white-space: nowrap;
  transition: translate 80ms ease-out, filter 80ms ease-out;
}
.pp-tchip:active { translate: 0 calc(2 * var(--pt)); filter: brightness(0.94); }
.pp-tchip img { flex: none; width: calc(26 * var(--pt)); height: calc(24 * var(--pt)); object-fit: contain; }
.pp-tchip span { min-width: 0; overflow: hidden; }
.pp-tchip .is-x { color: var(--placeholder); }
.pp-tchip.is-staple { padding: 0 calc(6 * var(--pt)); background: #fff; }
.pp-tchip.is-staple img { width: calc(24 * var(--pt)); height: calc(22 * var(--pt)); }
/* the bar pinned under the page, the rough rule over it */
.pp-donebar {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(746 * var(--pt));
  bottom: 0;
  background: var(--butter);
}
.pp-bar {
  position: absolute;
  left: calc(24 * var(--pt));
  top: calc(12 * var(--pt));
  width: calc(345 * var(--pt));
}
.pp-bar.is-primary { background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }
.pp-bar.is-secondary { background: #fff; font-size: calc(16 * var(--pt)); }
.pp-bar .is-chevron { width: calc(9 * var(--pt)); height: auto; }
.pp-typein.is-keyed .pp-donebar { top: calc(445 * var(--pt)); }
.pp-typein.is-keyed .pp-tscroll { height: calc(238.3 * var(--pt)); }

/* ======================================================================
   Recipe (Screens/CookScreen.swift)
   ====================================================================== */
.pp-back {
  position: absolute;
  z-index: 3;
  left: calc(8 * var(--pt));
  top: calc(146 * var(--pt));
  width: calc(96 * var(--pt));
  height: calc(56 * var(--pt));
  border-radius: calc(12 * var(--pt));
}
.pp-scroll {
  position: absolute;
  inset: calc(206.7 * var(--pt)) 0 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.pp-scroll::-webkit-scrollbar { display: none; }

/* the ingredient strip: six to a row at most, the rest balanced below */
.pp-strip { border-bottom: calc(1 * var(--pt)) solid var(--ink); background: var(--offwhite); }
.pp-strip-row { display: flex; }
.pp-strip-row + .pp-strip-row { border-top: calc(1 * var(--pt)) solid var(--ink); }
.pp-chip {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-rows: calc(70 * var(--pt)) calc(19 * var(--pt));
}
.pp-chip + .pp-chip { box-shadow: inset calc(1 * var(--pt)) 0 0 var(--ink); }
.pp-chip img { width: 100%; height: 100%; padding: calc(4 * var(--pt)); object-fit: contain; }
.pp-chip span {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0 calc(2 * var(--pt));
  font-size: calc(13 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
}
.pp-chip .pp-outlined { --o: calc(0.69 * var(--pt)); --d: calc(0.49 * var(--pt)); }

.pp-rhero {
  position: relative;
  display: grid;
  /* one column, the phone's width: sized by its content, the column grew to
     the unshrunk title and the title never had to shrink */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(12 * var(--pt));
  padding-bottom: calc(16 * var(--pt));
  background: var(--butter);
}
/* the title: 16 in from each side, 4 above and 16 below, one line shrunk
   as far as half its size before it is ever cut */
.pp-rtitle {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: calc(4 * var(--pt)) calc(16 * var(--pt)) calc(16 * var(--pt));
  text-align: center;
}
.pp-rtitle .pp-outlined { display: inline-block; font-size: calc(33 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-rhero .pp-plate { flex: none; width: 100%; height: calc(196 * var(--pt)); --ray: #fff; }
/* the rays reach past the plate, and the pills are drawn over them; here
   they keep Fugaz's whole line, where the card's are held to 15 */
.pp-rhero .pp-macros { position: relative; z-index: 1; }
.pp-rhero .pp-macro { line-height: calc(12 * var(--fugaz-lh) * var(--pt)); }
.pp-rule {
  position: absolute;
  left: 0;
  bottom: calc(-6.75 * var(--pt));
  z-index: 1;
  width: 100%;
  height: calc(13.5 * var(--pt));
  pointer-events: none;
}
.pp-rule.is-top { top: calc(-6.75 * var(--pt)); bottom: auto; }

.pp-steps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--pt));
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) calc(12 * var(--pt));
}
.pp-steps-head .pp-outlined { font-size: calc(28 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-count {
  padding: calc(3 * var(--pt)) calc(8 * var(--pt));
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  font-size: calc(12 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
  white-space: nowrap;
  transition: background-color 0.18s ease-out;
}
.pp-count.is-done { background: var(--green); }
.pp-steps { display: grid; gap: calc(12 * var(--pt)); padding: 0 calc(16 * var(--pt)) calc(20 * var(--pt)); }
.pp-step {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: calc(12 * var(--pt));
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) var(--ink);
  background: #fff;
  text-align: left;
  transition: opacity 0.25s ease;
}
.pp-step-head {
  display: flex;
  align-items: center;
  height: calc(54 * var(--pt));
  margin: calc(2 * var(--pt)) calc(2 * var(--pt)) 0;
  border-bottom: calc(2 * var(--pt)) solid var(--ink);
  background: var(--coral);
  transition: background-color 0.25s ease;
}
.pp-step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(52 * var(--pt));
  height: 100%;
  box-shadow: inset calc(-1 * var(--pt)) 0 0 var(--ink);
  background: var(--green);
  font-size: calc(24 * var(--pt));
  transition: background-color 0.25s ease;
}
.pp-step-title {
  flex: 1;
  min-width: 0;
  padding: 0 calc(12 * var(--pt));
  font-size: calc(20 * var(--pt));
  line-height: 1.1;
}
/* A step to do wears a dashed ring 28 across, a hairline dashed 6 on and
   4 off; a step done, the app's check badge, 30 across (CookScreen). (The
   ring was 30 and the badge the shelf's light green, where the app's is
   its darker check green.) */
.pp-step-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(28 * var(--pt));
  height: calc(28 * var(--pt));
  margin-right: calc(12 * var(--pt));
}
.pp-step-tick > * { grid-area: 1 / 1; }
.pp-ring { width: 100%; height: 100%; overflow: visible; }
.pp-ring circle { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 6 4; }
.pp-step-tick .pp-badge { display: none; }
/* CheckBadge: the ink check on the check green, in an ellipse a tenth
   shorter than it is wide, on a hairline */
.pp-badge {
  display: grid;
  place-items: center;
  width: calc(var(--bs) * var(--pt));
  height: calc(var(--bs) * 0.9 * var(--pt));
  border-radius: 50%;
  background: #349e31;
  box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--ink);
  color: var(--ink);
}
.pp-badge svg { width: calc(var(--bs) * 0.5 * var(--pt)); height: calc(var(--bs) * 0.5 * var(--pt)); }
.pp-step-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.3, 1.1, 0.5, 1);
}
.pp-step-body > span {
  overflow: hidden;
  font-family: 'PP Faustina', Georgia, serif;
  font-size: calc(19 * var(--pt));
  line-height: calc(28 * var(--pt));
}
.pp-step-body > span > span { display: block; padding: calc(12 * var(--pt)); }
.pp-step.is-done { opacity: 0.62; }
.pp-step.is-done .pp-step-head { border-bottom-color: transparent; background: var(--steel); }
.pp-step.is-done .pp-step-num { background: var(--steel); }
.pp-step.is-done .pp-step-tick { width: calc(30 * var(--pt)); }
.pp-step.is-done .pp-ring { display: none; }
.pp-step.is-done .pp-step-tick .pp-badge { display: grid; animation: pp-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pp-pop { from { scale: 0.6; opacity: 0; } }
.pp-step.is-done .pp-step-body { grid-template-rows: 0fr; }

.pp-finish {
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(8 * var(--pt));
  padding: calc(20 * var(--pt)) calc(24 * var(--pt)) calc(48 * var(--pt));
  text-align: center;
}
/* the chef, 84 tall (the rule over the block is an image too, and a rule
   for every image here stood it 84 tall, a black smear over the chef) */
.pp-finish .pp-finish-chef { height: calc(84 * var(--pt)); width: auto; }
.pp-finish .pp-outlined { font-size: calc(33 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-finish p { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); line-height: 1.3; color: var(--placeholder); }
.pp-finish .pp-btn { width: 100%; max-width: calc(260 * var(--pt)); }
.pp-save { margin-top: calc(8 * var(--pt)); background: #fff; font-size: calc(16 * var(--pt)); }
.pp-save-mark { flex: none; width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
/* kept: the badge where the bookmark was, on the accent green */
.pp-save .pp-badge { display: none; }
.pp-save.is-kept { background: var(--green); }
.pp-save.is-kept .pp-save-mark { display: none; }
.pp-save.is-kept .pp-badge { display: grid; }
.pp-done { background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }

/* ======================================================================
   The phone: its home screen, the window PantryPal opens in, the status
   bar over both, and the keyboard (pantry-app.js, pantry-keys.js). These
   are the system's, drawn here to look like iOS 26 on an iPhone 16 (an
   icon 63 across on a 91 by 98.7 grid, the dock 367 wide, the island 125
   by 37): none of Apple's glyphs or icons, and the phone's other apps a
   blur of colour, so the one icon with a name is the one to open.
   ====================================================================== */
.pp-board {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-origin: 77% 70%;
  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
}
.pp-wall {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(42% 26% at 24% 18%, rgb(150 160 178 / 0.55), transparent 70%),
    radial-gradient(50% 30% at 78% 34%, rgb(120 132 152 / 0.5), transparent 72%),
    radial-gradient(60% 34% at 40% 62%, rgb(96 106 124 / 0.55), transparent 74%),
    radial-gradient(70% 40% at 70% 92%, rgb(60 68 84 / 0.7), transparent 75%),
    linear-gradient(170deg, #4c5566, #2e3542 55%, #232832);
}
.pp-icon, .pp-appicon {
  position: absolute;
  width: calc(63 * var(--pt));
  height: calc(63 * var(--pt));
  border-radius: calc(14.2 * var(--pt));
}
.pp-icon {
  background:
    radial-gradient(70% 60% at 35% 30%, hsl(var(--h) 55% 72% / 0.5), transparent 70%),
    linear-gradient(150deg, hsl(var(--h) 34% 58% / 0.55), hsl(var(--h) 28% 34% / 0.5));
  box-shadow: inset 0 0 0 calc(0.6 * var(--pt)) rgb(255 255 255 / 0.2), 0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgb(0 0 0 / 0.18);
  filter: blur(calc(0.6 * var(--pt)));
}
.pp-appicon { padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-appicon img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgb(0 0 0 / 0.25);
  transition: filter 0.15s ease;
}
.pp-appicon:active img { filter: brightness(0.72); }
.pp-appicon:focus-visible { outline: calc(2 * var(--pt)) solid #fff; outline-offset: calc(3 * var(--pt)); }
.pp-appicon span {
  position: absolute;
  left: 50%;
  top: calc(68 * var(--pt));
  translate: -50% 0;
  font-weight: 500;
  font-size: calc(12 * var(--pt));
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 calc(3 * var(--pt)) rgb(0 0 0 / 0.35);
}
.pp-search {
  position: absolute;
  left: 50%;
  top: calc(682 * var(--pt));
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: calc(5 * var(--pt));
  height: calc(29 * var(--pt));
  padding: 0 calc(12 * var(--pt)) 0 calc(10 * var(--pt));
  border-radius: 99px;
  background: rgb(255 255 255 / 0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-weight: 500;
  font-size: calc(13.5 * var(--pt));
  color: rgb(255 255 255 / 0.88);
}
.pp-search svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }
.pp-dock {
  position: absolute;
  left: calc(12.8 * var(--pt));
  top: calc(730 * var(--pt));
  width: calc(367.4 * var(--pt));
  height: calc(107 * var(--pt));
  border-radius: calc(38 * var(--pt));
  background: rgb(255 255 255 / 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 calc(0.6 * var(--pt)) rgb(255 255 255 / 0.18);
}
.pp-dock .pp-icon { top: calc(23 * var(--pt)); }

/* the window: PantryPal's own screen, opened out of its icon */
.pp-app {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  visibility: hidden;
  transform-origin: 0 0;
  background: var(--sky);
}
.pp-app.is-open { visibility: visible; }
/* closed is closed: a screen on the stack wears visibility: visible, which a
   hidden parent does not override, so everything in a closed window is
   hidden by name (it stood over the home screen after Start over) */
.pp-app:not(.is-open) * { visibility: hidden !important; }
.pp-stack { position: absolute; inset: 0; }
.pp-layer { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.pp-layer > * { pointer-events: auto; }
.pp-launch-icon { position: absolute; inset: 0; z-index: 60; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* the bar the system draws over every screen, and the island */
.pp-status {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.pp-screen.is-board .pp-status.is-dark, .pp-screen:not(.is-board) .pp-status.is-light { opacity: 0; }
.pp-island {
  position: absolute;
  z-index: 51;
  left: calc(134 * var(--pt));
  top: calc(11.3 * var(--pt));
  width: calc(124.7 * var(--pt));
  height: calc(37 * var(--pt));
  border-radius: 99px;
  background: #000;
  pointer-events: none;
}

/* The keyboard: iOS 26's glass, which takes the colour of the screen under
   it (so it is beige on the app's butter, as in the capture), its keys
   pale, the suggestion bar's two rules, the blue return. Its top stands at
   517 on an iPhone 16. */
.pp-kbd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  height: calc(335 * var(--pt));
  border-radius: calc(30 * var(--pt)) calc(30 * var(--pt)) 0 0;
  background: rgb(204 216 235 / 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 calc(-0.5 * var(--pt)) 0 rgb(0 0 0 / 0.06);
  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
  color: #000;
  translate: 0 102%;
  transition: translate 0.36s cubic-bezier(0.2, 0.9, 0.25, 1);
  touch-action: manipulation;
}
.pp-kbd.is-up { translate: 0 0; }
.pp-kbd-bar { position: absolute; left: 0; right: 0; top: 0; height: calc(44 * var(--pt)); }
.pp-kbd-bar i { position: absolute; top: calc(12 * var(--pt)); bottom: calc(8 * var(--pt)); width: 1px; background: rgb(0 0 0 / 0.14); }
.pp-kbd-bar i:first-child { left: 33.3%; }
.pp-kbd-bar i:last-child { left: 66.6%; }
.pp-kbd-keys { position: absolute; left: calc(6.6 * var(--pt)); right: calc(6.6 * var(--pt)); top: calc(52 * var(--pt)); display: grid; row-gap: calc(12 * var(--pt)); }
.pp-krow { display: flex; justify-content: center; gap: calc(6 * var(--pt)); height: calc(42.7 * var(--pt)); }
.pp-krow.is-three, .pp-krow.is-four { justify-content: space-between; gap: 0; }
.pp-kmid { display: flex; gap: calc(6 * var(--pt)); }
.pp-key {
  flex: 0 0 calc(32.6 * var(--pt));
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(8.5 * var(--pt));
  background: rgb(255 255 246 / 0.84);
  box-shadow: 0 calc(1 * var(--pt)) 0 rgb(0 0 0 / 0.1);
  font: 400 calc(23 * var(--pt)) / 1 -apple-system, 'SF Pro Text', system-ui, sans-serif;
  color: #000;
  cursor: pointer;
}
.pp-key.is-down { background: rgb(255 255 255 / 0.5); }
.pp-key svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); stroke: #000; }
.pp-key.is-shift { flex-basis: calc(43.3 * var(--pt)); font-size: calc(15 * var(--pt)); }
.pp-key.is-shift svg { fill: none; }
.pp-key.is-shift.is-on svg { fill: #000; }
.pp-key.is-del { flex-basis: calc(43.9 * var(--pt)); }
.pp-key.is-del svg { width: calc(24 * var(--pt)); }
.pp-key.is-mode { flex-basis: calc(89.9 * var(--pt)); font-size: calc(17 * var(--pt)); }
.pp-key.is-space { flex: 0 0 calc(186.5 * var(--pt)); }
.pp-key.is-return { flex-basis: calc(89.9 * var(--pt)); background: #0a84ff; }
.pp-key.is-return svg { stroke: #fff; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.pp-kbd-foot { position: absolute; left: calc(28 * var(--pt)); right: calc(30 * var(--pt)); top: calc(278 * var(--pt)); display: flex; justify-content: space-between; }
.pp-kbd-foot svg { width: calc(27 * var(--pt)); height: calc(27 * var(--pt)); stroke: #000; fill: #000; }
.pp-kbd-foot span:last-child svg { width: calc(19 * var(--pt)); fill: none; }

/* the presses laid over a capture's pixels: the logo, the chef, the back
   arrow, the wardrobe, the shelf's plus */
.pp-hit { position: absolute; z-index: 3; padding: 0; border: 0; background: none; border-radius: calc(12 * var(--pt)); cursor: pointer; }
.pp-hit.is-logo { left: calc(10 * var(--pt)); top: calc(48 * var(--pt)); width: calc(118 * var(--pt)); height: calc(64 * var(--pt)); }
.pp-hit.is-gear { left: calc(318 * var(--pt)); top: calc(40 * var(--pt)); width: calc(68 * var(--pt)); height: calc(72 * var(--pt)); }
.pp-hit.is-back { left: calc(14 * var(--pt)); top: calc(140 * var(--pt)); width: calc(84 * var(--pt)); height: calc(58 * var(--pt)); }
.pp-hit.is-door { left: calc(314 * var(--pt)); top: calc(138 * var(--pt)); width: calc(66 * var(--pt)); height: calc(64 * var(--pt)); }
.pp-hit.is-add { left: calc(316 * var(--pt)); top: calc(140 * var(--pt)); width: calc(60 * var(--pt)); height: calc(60 * var(--pt)); border-radius: 50%; }
.pp-hit:focus-visible { outline: calc(2 * var(--pt)) solid #1e1e1e; outline-offset: calc(-2 * var(--pt)); }

/* ======================================================================
   The cold open (Components/LaunchCurtain.swift): the large header's
   lockup, built of the same pieces the app builds it of (the blob, the
   wordmark set in Fugaz One with its ink line, the tomato, the chef), at
   the large header's own numbers, so seated it is the pass's header.
   ====================================================================== */
.pp-curtain { position: absolute; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; }
.pp-csky { position: absolute; inset: 0; background: var(--sky); transform-origin: 50% 0; }
/* two thirds of a point left of the numbers, and the words a third right
   and down, as laid over the pass's capture: seated, it is the header */
.pp-lockup { position: absolute; left: calc(-0.67 * var(--pt)); top: 0; width: calc(393 * var(--pt)); height: calc(231.5 * var(--pt)); }
.pp-lockup > * { position: absolute; }
.pp-lsky { left: 0; top: 0; width: 100%; height: calc(213 * var(--pt)); background: var(--sky); }
.pp-cscallop { left: 0; top: calc(205 * var(--pt)); width: calc(393 * var(--pt)); height: calc(24.56 * var(--pt)); overflow: visible; }
.pp-cblob { left: calc(13 * var(--pt)); top: calc(68 * var(--pt)); width: calc(261 * var(--pt)); height: calc(132 * var(--pt)); transform-origin: 65.5% 50%; }
.pp-cword {
  left: calc(24.33 * var(--pt));
  font-size: calc(69 * var(--pt));
  line-height: calc(62 * var(--pt));
  color: var(--red);
  -webkit-text-stroke: calc(4 * var(--pt)) #000;
  paint-order: stroke fill;
  white-space: nowrap;
}
.pp-cword.is-one { top: calc(74.33 * var(--pt)); }
.pp-cword.is-two { top: calc(136.33 * var(--pt)); }
.pp-ctomato, .pp-cring { left: calc(138 * var(--pt)); top: calc(116 * var(--pt)); width: calc(92 * var(--pt)); height: calc(92 * var(--pt)); }
.pp-ctomato { transform-origin: 50% 84.9%; }
.pp-cring { border-radius: 50%; box-shadow: inset 0 0 0 calc(3 * var(--pt)) #000; opacity: 0; }
.pp-cchef { left: calc(263 * var(--pt)); top: calc(32 * var(--pt)); width: calc(150 * var(--pt)); height: calc(182 * var(--pt)); object-fit: contain; transform-origin: 0 100%; }

/* ======================================================================
   The Kitchen Pass (Screens/SignUpScreen.swift): the large header, the
   band and its fringe, the kitchen under them, and the pass over it all,
   313 wide, 32 under the fringe on an iPhone 16 (FrontDoorMetrics)
   ====================================================================== */
.pp-scene { position: absolute; inset: 0; transition: translate 0.25s ease-out; }
.pp-signup.is-typing .pp-scene { translate: 0 calc(-332.3 * var(--pt)); }
.pp-kitchen { position: absolute; left: 0; top: calc(297 * var(--pt)); width: calc(408 * var(--pt)); height: calc(609 * var(--pt)); max-width: none; }
.pp-scene .pp-chrome { z-index: 1; }
.pp-passroll { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.pp-pass {
  position: absolute;
  left: calc(40 * var(--pt));
  top: calc(360.3 * var(--pt));
  width: calc(313 * var(--pt));
  overflow: hidden;
  border-radius: calc(24 * var(--pt));
  background: #fff;
  transition: translate 0.25s ease-out;
}
.pp-pass::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; pointer-events: none; }
.pp-pass-band {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--pt));
  height: calc(48 * var(--pt));
  padding: 0 calc(14 * var(--pt)) 0 calc(12 * var(--pt));
  background: var(--coral);
  box-shadow: inset 0 calc(-2 * var(--pt)) 0 #000;
}
.pp-pass-dot { flex: none; width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-pass-band .pp-outlined { flex: 1; font-size: calc(21 * var(--pt)); letter-spacing: calc(0.8 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-pass-band img { flex: none; width: calc(40 * var(--pt)); height: calc(36 * var(--pt)); object-fit: contain; }
.pp-pass-body { display: grid; width: calc(258 * var(--pt)); margin: 0 auto; padding: calc(20 * var(--pt)) 0; }
/* PPTextField: off-white, the ink line dashed while it is being typed in */
.pp-field { position: relative; display: block; height: calc(44 * var(--pt)); border-radius: calc(10 * var(--pt)); background: var(--offwhite); cursor: text; }
.pp-field::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; pointer-events: none; }
.pp-field.is-focused::after { box-shadow: none; outline: calc(2 * var(--pt)) dashed #000; outline-offset: calc(-2 * var(--pt)); }
.pp-field.is-error::after { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #b01919; outline-color: #b01919; }
.pp-ph { position: absolute; left: calc(12 * var(--pt)); top: 0; bottom: 0; display: flex; align-items: center; font-size: calc(16 * var(--pt)); color: var(--placeholder); pointer-events: none; }
.pp-field:not(.is-empty) .pp-ph { display: none; }
.pp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0 calc(12 * var(--pt));
  border: 0;
  background: none;
  font: 400 calc(16 * var(--pt)) / 1 'PP Fugaz One', system-ui, sans-serif;
  color: #000;
  caret-color: var(--red);
  outline: none;
}
.pp-ferr { margin-top: calc(4 * var(--pt)); font-size: calc(14 * var(--pt)); line-height: 1.3; color: #b01919; }
.pp-join { margin-top: calc(16 * var(--pt)); background: var(--red); font-size: calc(20 * var(--pt)); }
.pp-outlined.is-thin { --o: calc(1.5 * var(--pt)); --d: calc(1.06 * var(--pt)); }
.pp-consent { margin-top: calc(12 * var(--pt)); font-family: 'PP Faustina', Georgia, serif; font-size: calc(12.5 * var(--pt)); line-height: 1.3; text-align: center; }
.pp-consent a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
.pp-pass-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(8 * var(--pt));
  padding: calc(8 * var(--pt)) calc(16 * var(--pt)) calc(12 * var(--pt));
  background: var(--butter);
  box-shadow: inset 0 calc(2 * var(--pt)) 0 #000;
  font-size: calc(11.5 * var(--pt));
  letter-spacing: calc(0.7 * var(--pt));
  line-height: 1.2;
}
.pp-pass-pick button { text-decoration: underline; padding: 0 calc(4 * var(--pt)); }

/* ======================================================================
   How it works! (Screens/OnboardingScreen.swift, TicketRailBoard.swift):
   the board 336 by 464, centred between the band and the footer
   ====================================================================== */
.pp-tourwrap { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: calc(98 * var(--pt)); display: grid; place-items: center; }
.pp-tour {
  position: relative;
  width: calc(336 * var(--pt));
  height: calc(464 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: linear-gradient(rgb(255 214 126 / 0.22), rgb(255 214 126 / 0.22)), #fff;
}
.pp-tour::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; pointer-events: none; }
.pp-tour-shadow { position: absolute; left: 50%; top: calc(50% + 232 * var(--pt) + 7 * var(--pt)); width: calc(240 * var(--pt)); height: calc(22 * var(--pt)); translate: -50% 0; border-radius: 50%; background: rgb(0 0 0 / 0.1); z-index: -1; }
.pp-tour-head { position: relative; display: grid; place-items: center; height: calc(56 * var(--pt)); overflow: hidden; border-radius: calc(10 * var(--pt)) calc(10 * var(--pt)) 0 0; box-shadow: inset 0 calc(-2 * var(--pt)) 0 #000; }
.pp-tour-wood { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-tour-head .pp-outlined { position: relative; font-size: calc(24 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-tickets { display: grid; gap: calc(22 * var(--pt)); padding: calc(18 * var(--pt)) calc(34 * var(--pt)) calc(52 * var(--pt)); }
.pp-ticket {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  height: calc(98 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: #fff;
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000;
  opacity: 0;
  transition: box-shadow 0.22s ease-out;
}
.pp-ticket.is-landed { opacity: 1; }
.pp-ticket.is-lit { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000, 0 0 calc(8 * var(--pt)) rgb(255 126 125 / 0.95), 0 0 calc(22 * var(--pt)) rgb(255 126 125 / 0.6); }
.pp-ticket.is-payoff.is-lit { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000, 0 0 calc(8 * var(--pt)) rgb(180 255 133 / 0.95), 0 0 calc(22 * var(--pt)) rgb(180 255 133 / 0.6); }
.pp-stub { flex: 0 0 calc(92 * var(--pt)); display: grid; place-items: center; height: 100%; filter: saturate(0); opacity: 0.62; transition: filter 0.22s ease-out, opacity 0.22s ease-out; }
.pp-ticket.is-lit .pp-stub { filter: none; opacity: 1; }
.pp-stub .is-food { width: calc(76 * var(--pt)); height: calc(68 * var(--pt)); object-fit: contain; }
.pp-stub .is-wardrobe { width: calc(62 * var(--pt)); height: calc(72 * var(--pt)); object-fit: contain; }
.pp-perf { flex: 0 0 calc(10 * var(--pt)); align-self: stretch; margin: calc(12 * var(--pt)) 0; background: linear-gradient(rgb(0 0 0 / 0.5) 0 calc(5 * var(--pt)), transparent 0) 50% calc(-2 * var(--pt)) / calc(2 * var(--pt)) calc(9 * var(--pt)) repeat-y; }
.pp-tword { flex: 1; min-width: 0; padding: 0 calc(8 * var(--pt)) 0 calc(12 * var(--pt)); font-size: calc(17 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); line-height: calc(25 * var(--pt)); color: rgb(0 0 0 / 0.55); transition: color 0.22s ease-out; }
.pp-ticket.is-payoff .pp-tword { white-space: nowrap; }
.pp-ticket.is-lit .pp-tword { color: #000; }
.pp-bulbs { position: absolute; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; }
.pp-bulbs.is-left, .pp-bulbs.is-right { top: calc(68 * var(--pt)); bottom: calc(14 * var(--pt)); flex-direction: column; }
.pp-bulbs.is-left { left: calc(12 * var(--pt)); }
.pp-bulbs.is-right { right: calc(12 * var(--pt)); }
.pp-bulbs.is-bottom { left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); bottom: calc(14 * var(--pt)); }
.pp-bulbs i { width: calc(10 * var(--pt)); height: calc(10 * var(--pt)); border-radius: 50%; background: var(--butter); box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; }
.pp-bulbs i.is-coral { background: var(--coral); }
.pp-stamp {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(30 * var(--pt));
  translate: calc(-50% - 26 * var(--pt)) 0;
  rotate: -7deg;
  padding: calc(10 * var(--pt)) calc(20 * var(--pt));
  border-radius: 99px;
  background: var(--green);
  box-shadow: inset 0 0 0 calc(4 * var(--pt)) #000;
  font-size: calc(21 * var(--pt));
  letter-spacing: calc(0.52 * var(--pt));
  line-height: var(--fugaz-lh);
  white-space: nowrap;
  opacity: 0;
}
.pp-stamp.is-stamped { opacity: 1; box-shadow: inset 0 0 0 calc(4 * var(--pt)) #000, 0 0 calc(14 * var(--pt)) rgb(180 255 133 / 0.9); }
.pp-foot { position: absolute; left: 0; right: 0; bottom: 0; height: calc(98 * var(--pt)); background: var(--butter); }
.pp-start { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); top: calc(12 * var(--pt)); background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }

/* ======================================================================
   The scanner (Screens/ScannerScreen.swift)
   ====================================================================== */
.pp-scanner :is(.pp-doors, .pp-review, .pp-found) { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: 0; display: none; }
.pp-scanner[data-stage='framing'] .pp-doors { display: block; }
.pp-scanner:is([data-stage='captured'], [data-stage='reading']) .pp-review { display: flex; }
.pp-scanner[data-stage='confirming'] .pp-found { display: flex; }
.pp-doorart { width: 100%; height: auto; }
.pp-doors .pp-hit { left: 0; width: 100%; border-radius: 0; }
.pp-hit.is-receipt { top: 0; height: calc(272.2 * var(--pt)); }
.pp-hit.is-food { top: calc(272.2 * var(--pt)); height: calc(273.3 * var(--pt)); }
/* the library's section under the doors, whose picture carries the rule
   between them, the food's sky running down to it */
.pp-library { position: absolute; left: 0; right: 0; top: calc(551 * var(--pt)); bottom: 0; background: var(--butter); }
.pp-libbtn { position: absolute; left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); top: calc(8.5 * var(--pt)); background: #fff; font-size: calc(16 * var(--pt)); }
.pp-libbtn .is-photo { width: calc(18 * var(--pt)); height: auto; }
.pp-review { flex-direction: column; }
.pp-shot { position: relative; flex: none; margin: calc(16 * var(--pt)) calc(24 * var(--pt)) 0; aspect-ratio: 0.75; }
.pp-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(24 * var(--pt)); background: #fff; }
.pp-shotline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pp-shotline rect { x: 0; y: 0; width: 100%; height: 100%; rx: calc(24 * var(--pt)); fill: none; stroke: #000; stroke-width: calc(3 * var(--pt)); stroke-dasharray: calc(10 * var(--pt)) calc(8 * var(--pt)); }
/* ScanBeam: the shot dimmed, a red band sweeping down it every 1.7 s */
.pp-beam { position: absolute; inset: 0; display: none; overflow: hidden; border-radius: calc(24 * var(--pt)); background: rgb(0 0 0 / 0.18); }
.pp-scanner[data-stage='reading'] .pp-beam { display: block; }
.pp-beam i {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(54 * var(--pt));
  background:
    linear-gradient(var(--red), var(--red)) 50% 50% / 100% calc(2.5 * var(--pt)) no-repeat,
    linear-gradient(rgb(255 75 75 / 0), rgb(255 75 75 / 0.55), rgb(255 75 75 / 0));
  animation: pp-beam 1.7s ease-in-out infinite;
}
@keyframes pp-beam { from { top: calc(-54 * var(--pt)); } to { top: 100%; } }
.pp-serr { flex: none; margin: calc(8 * var(--pt)) calc(24 * var(--pt)) 0; font-size: calc(16 * var(--pt)); line-height: 1.25; color: #b01919; text-align: center; }
.pp-serr:empty { display: none; }
.pp-decide { display: flex; gap: calc(12 * var(--pt)); margin: auto calc(24 * var(--pt)); }
.pp-scanner[data-stage='reading'] .pp-decide, .pp-scanner[data-stage='captured'] .pp-reading { display: none; }
.pp-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--pt));
  height: calc(58 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: #fff;
  box-shadow: inset 0 0 0 calc(2.5 * var(--pt)) #000;
  font-size: calc(20 * var(--pt));
  transition: translate 80ms ease-out, filter 80ms ease-out;
}
.pp-tab:active { translate: 0 calc(2 * var(--pt)); filter: brightness(0.92); }
.pp-tab.is-accept { background: #349e31; }
.pp-outlined.is-tab { --o: calc(1.8 * var(--pt)); --d: calc(1.27 * var(--pt)); }
.pp-inkmark { width: calc(var(--ms) * var(--pt)); height: calc(var(--ms) * var(--pt)); fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* the caption in a frame the height of a control, its gap and 12 more, in
   the middle of the room under the shot (readingCaption) */
.pp-reading { display: grid; justify-items: center; align-content: center; gap: calc(8 * var(--pt)); height: calc(80 * var(--pt)); margin: auto; }
.pp-reading > .pp-outlined { font-size: calc(28 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-wait.is-free { width: calc(260 * var(--pt)); padding: 0; }
.pp-found { flex-direction: column; }
.pp-found-head { display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(12 * var(--pt)) calc(24 * var(--pt)) calc(8 * var(--pt)); }
.pp-found-head p { flex: 1; font-size: calc(16 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-found-count { padding: calc(4 * var(--pt)) calc(12 * var(--pt)); border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; font-size: calc(13 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-found-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: calc(8 * var(--pt)); padding: 0 calc(24 * var(--pt)) calc(16 * var(--pt)); scrollbar-width: none; overscroll-behavior: contain; }
.pp-frow {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--pt));
  padding: calc(8 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: #fff;
  box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000;
  cursor: pointer;
}
.pp-frow.is-off { background: rgb(255 255 255 / 0.5); box-shadow: none; outline: calc(2 * var(--pt)) dashed #000; outline-offset: calc(-2 * var(--pt)); }
.pp-frow-art { flex: none; position: relative; width: calc(52 * var(--pt)); height: calc(46 * var(--pt)); transition: opacity 0.18s ease; }
.pp-frow-art > * { width: 100%; height: 100%; object-fit: contain; }
.pp-frow.is-off .pp-frow-art { opacity: 0.4; }
/* a drawing on its way (IllustrationView, showsLoading): the butter slot
   with a sunburst turning in it, until the art store answers */
.pp-frow-art:has(> [data-pending])::before {
  content: '';
  position: absolute;
  inset: calc(2 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background:
    radial-gradient(circle, transparent 30%, var(--butter) 75%),
    repeating-conic-gradient(from calc(90deg + var(--spin)), rgb(255 255 255 / 0.75) 0deg 18deg, transparent 18deg 36deg),
    var(--butter);
  animation: pp-rays 7s linear infinite;
}
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pp-rays { to { --spin: 360deg; } }
.pp-frow-name { flex: 1; min-width: 0; display: grid; gap: calc(1 * var(--pt)); }
.pp-frow-name b { font-weight: 400; font-size: calc(17 * var(--pt)); line-height: 1.2; }
.pp-frow-name small { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); line-height: 1.2; color: var(--placeholder); }
.pp-frow.is-off .pp-frow-name { text-decoration: line-through; text-decoration-color: var(--placeholder); }
.pp-frow-qty { flex: none; min-width: calc(44 * var(--pt)); height: calc(26 * var(--pt)); padding: 0 calc(9 * var(--pt)); border-radius: 99px; background: var(--butter); box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; font-size: calc(15 * var(--pt)); }
.pp-frow.is-off .pp-frow-qty { background: #fff; opacity: 0.5; }
.pp-frow-mark { flex: none; display: grid; place-items: center; width: calc(28 * var(--pt)); }
.pp-frow-mark > * { grid-area: 1 / 1; }
.pp-frow-mark .pp-ring { width: calc(28 * var(--pt)); height: calc(25 * var(--pt)); }
.pp-frow-mark .pp-ring ellipse { fill: none; stroke: #000; stroke-width: 1; stroke-dasharray: 6 4; }
.pp-frow:not(.is-off) .pp-ring, .pp-frow.is-off .pp-badge { display: none; }
.pp-found-foot { position: relative; flex: none; height: calc(98 * var(--pt)); background: var(--butter); }
.pp-keep { position: absolute; left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); top: calc(12 * var(--pt)); background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }
.pp-keep:disabled { background: var(--steel); color: var(--placeholder); }
.pp-flash { position: absolute; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; }

/* ======================================================================
   Type it in!, live (Screens/ManualAddScreen.swift)
   ====================================================================== */
.pp-onshelf { position: absolute; z-index: 2; left: calc(101.3 * var(--pt)); top: calc(144.6 * var(--pt)); width: calc(267.4 * var(--pt)); height: calc(49 * var(--pt)); display: grid; place-items: center; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; font-size: calc(33 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-typein:not(.is-batch) .pp-onshelf { display: none; }
.pp-well { cursor: pointer; }
.pp-wellart { position: absolute; left: calc(4 * var(--pt)); top: calc(4 * var(--pt)); width: calc(60 * var(--pt)); height: calc(54 * var(--pt)); object-fit: contain; }
.pp-wellart[hidden] { display: none; }
.pp-entry.is-named .pp-well .pp-g { display: none; }
.pp-tinput {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: 400 calc(19 * var(--pt)) / var(--fugaz-lh) 'PP Fugaz One', system-ui, sans-serif;
  color: #000;
  caret-color: var(--red);
  outline: none;
}
.pp-tinput::placeholder { color: var(--placeholder); opacity: 1; }
.pp-addbadge { display: grid; place-items: center; }
.pp-addbadge:disabled .pp-plusbadge { opacity: 0.35; }
.pp-entry-row { grid-column: 1 / -1; display: none; align-items: center; gap: calc(8 * var(--pt)); margin-top: calc(-4 * var(--pt)); }
.pp-entry.is-ready .pp-entry-row { display: flex; }
.pp-catchip { display: flex; align-items: center; gap: calc(4 * var(--pt)); padding: calc(4 * var(--pt)) calc(8 * var(--pt)); border-radius: 99px; box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; font-size: calc(12 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-catchip .is-chevron { width: calc(9 * var(--pt)); height: auto; transition: rotate 0.18s ease; }
.pp-catchip.is-open .is-chevron { rotate: 180deg; }
.pp-qty { display: flex; align-items: center; margin-left: auto; }
.pp-qn { min-width: calc(26 * var(--pt)); text-align: center; font-size: calc(17 * var(--pt)); }
.pp-stepbtn { position: relative; display: grid; place-items: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); }
.pp-stepbtn::before { content: ''; position: absolute; left: calc(5 * var(--pt)); top: calc(5 * var(--pt)); width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; background: var(--offwhite); box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; }
.pp-stepbtn:disabled { opacity: 0.35; cursor: default; }
.pp-stepper { position: relative; width: calc(var(--sp) * var(--pt)); height: calc(var(--sp) * var(--pt)); fill: currentColor; }
.pp-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--pt)); }
.pp-picker[hidden], .pp-suggest[hidden], .pp-added[hidden], .pp-staples[hidden] { display: none; }
.pp-shelfchip { display: grid; place-items: center; height: calc(44 * var(--pt)); }
.pp-shelfchip > span { display: grid; place-items: center; width: 100%; min-width: calc(65.5 * var(--pt)); height: calc(19 * var(--pt)); padding: 0 calc(2 * var(--pt)); font-size: calc(13 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); }
.pp-shelfchip.is-on > span { box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-shelfchip .pp-outlined { --o: calc(0.69 * var(--pt)); --d: calc(0.49 * var(--pt)); }
.pp-srow { display: flex; gap: calc(8 * var(--pt)); overflow-x: auto; scrollbar-width: none; }
.pp-srow .pp-tchip { flex: none; }
.pp-art.is-drawn { animation: pp-drawn 0.28s ease-out; }
@keyframes pp-drawn { from { opacity: 0; } }

/* IllustrationPlaceholder's missing tile: the shelf's pastel and the fork */
.pp-tile { display: grid; place-items: center; width: 100%; height: 100%; border-radius: calc(10 * var(--pt)); color: rgb(0 0 0 / 0.5); }
.pp-tile .pp-g { width: 32%; height: auto; }

/* ======================================================================
   My shelf (Screens/ShelfScreen.swift): a wood shelf to each food type,
   pinned while its foods scroll under it; three columns between the
   shelf's dashed rails, a row every 157
   ====================================================================== */
.pp-sscroll { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.pp-sscroll::-webkit-scrollbar { display: none; }
.pp-sscroll[hidden], .pp-sempty[hidden], .pp-drawer[hidden], .pp-modal[hidden] { display: none; }
.pp-wood {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: calc(46 * var(--pt));
  margin: 0;
  padding-left: calc(15 * var(--pt));
  background: url(tab-wood.webp) 50% 50% / cover;
  box-shadow: inset 0 calc(2 * var(--pt)) 0 #000, inset 0 calc(-2 * var(--pt)) 0 #000;
  font-weight: 400;
}
.pp-wood .pp-outlined { font-size: calc(28 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-sgrid {
  position: relative;
  display: grid;
  grid-template-columns: calc(124 * var(--pt)) calc(146 * var(--pt)) calc(123 * var(--pt));
  grid-auto-rows: calc(157 * var(--pt));
  /* the rails: a white dash between two ink ones, 15 on and 15 off */
  background:
    linear-gradient(#fff 50%, transparent 0) calc(122 * var(--pt)) 0 / calc(4 * var(--pt)) calc(30 * var(--pt)) repeat-y,
    linear-gradient(#000 50%, transparent 0) calc(120 * var(--pt)) 0 / calc(2 * var(--pt)) calc(30 * var(--pt)) repeat-y,
    linear-gradient(#000 50%, transparent 0) calc(126 * var(--pt)) 0 / calc(2 * var(--pt)) calc(30 * var(--pt)) repeat-y,
    linear-gradient(#fff 50%, transparent 0) calc(268 * var(--pt)) 0 / calc(4 * var(--pt)) calc(30 * var(--pt)) repeat-y,
    linear-gradient(#000 50%, transparent 0) calc(266 * var(--pt)) 0 / calc(2 * var(--pt)) calc(30 * var(--pt)) repeat-y,
    linear-gradient(#000 50%, transparent 0) calc(272 * var(--pt)) 0 / calc(2 * var(--pt)) calc(30 * var(--pt)) repeat-y;
}
/* between rows, the same rail lying down */
.pp-sgrid::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: calc(157 * var(--pt) - 4 * var(--pt));
  height: calc((var(--rows) - 1) * 157 * var(--pt));
  background:
    linear-gradient(90deg, #fff 50%, transparent 0) 0 calc(2 * var(--pt)) / calc(30 * var(--pt)) calc(4 * var(--pt)) repeat-x,
    linear-gradient(90deg, #000 50%, transparent 0) 0 0 / calc(30 * var(--pt)) calc(2 * var(--pt)) repeat-x,
    linear-gradient(90deg, #000 50%, transparent 0) 0 calc(6 * var(--pt)) / calc(30 * var(--pt)) calc(2 * var(--pt)) repeat-x;
  -webkit-mask: repeating-linear-gradient(#000 0 calc(8 * var(--pt)), transparent 0 calc(157 * var(--pt)));
  mask: repeating-linear-gradient(#000 0 calc(8 * var(--pt)), transparent 0 calc(157 * var(--pt)));
  pointer-events: none;
}
.pp-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(11 * var(--pt)); padding: calc(16 * var(--pt)) calc(12 * var(--pt)); -webkit-touch-callout: none; }
.pp-cell.is-picked::before { content: ''; position: absolute; inset: calc(4 * var(--pt)) calc(8 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-tagwrap { position: relative; display: grid; place-items: center; height: calc(38 * var(--pt)); max-width: 100%; }
.pp-tag {
  display: grid;
  place-items: center;
  min-width: calc(61 * var(--pt));
  min-height: calc(23 * var(--pt));
  max-width: 100%;
  padding: calc(2 * var(--pt)) calc(10 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: #fff;
  outline: calc(1 * var(--pt)) dashed #000;
  outline-offset: calc(-1 * var(--pt));
  font-size: calc(13 * var(--pt));
  line-height: 1.1;
  text-align: center;
}
.pp-cell.is-picked .pp-tag { outline-style: solid; }
.pp-cellart { position: relative; width: calc(83 * var(--pt)); height: calc(76 * var(--pt)); }
.pp-cellart > .pp-art, .pp-cellart > .pp-tile { width: 100%; height: 100%; object-fit: contain; }
.pp-badges { position: absolute; right: calc(-8 * var(--pt)); bottom: calc(-8 * var(--pt)); display: flex; align-items: flex-end; gap: calc(-1 * var(--pt)); }
.pp-badges .pp-badge { translate: 0 calc(2 * var(--pt)); }
.pp-qbadge { display: grid; place-items: center; width: calc(24.75 * var(--pt)); height: calc(22 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; font-size: calc(16 * var(--pt)); line-height: 1; }
.pp-addcell {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(4 * var(--pt));
  margin: calc(16 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(12 * var(--pt));
  background: rgb(255 255 255 / 0.45);
  outline: calc(2 * var(--pt)) dashed #000;
  outline-offset: calc(-2 * var(--pt));
  color: var(--placeholder);
  font-size: calc(13 * var(--pt));
}
.pp-clearwrap { padding: calc(24 * var(--pt)) calc(20 * var(--pt)) calc(20 * var(--pt)); }
.is-danger { background: #fff; color: #b01919; font-size: calc(20 * var(--pt)); }
.pp-clear { width: 100%; }
.pp-clear .is-trash { width: calc(15 * var(--pt)); height: auto; }
.pp-sempty { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: 0; display: grid; place-content: center; justify-items: center; gap: calc(16 * var(--pt)); padding: calc(24 * var(--pt)); text-align: center; }
.pp-sempty-chef { height: calc(110 * var(--pt)); width: auto; }
.pp-sempty-title, .pp-mempty-title { font-size: calc(33 * var(--pt)); line-height: 1.1; }
.pp-sempty-body { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); line-height: 1.3; color: var(--placeholder); }
.pp-sempty-add { width: calc(220 * var(--pt)); margin-top: calc(8 * var(--pt)); background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }
/* the picks, in a drawer over the shelf's foot */
.pp-drawer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: calc(8 * var(--pt)); padding: calc(12 * var(--pt)) 0 calc(42 * var(--pt)); background: var(--butter); box-shadow: inset 0 calc(3 * var(--pt)) 0 #000; }
.pp-drawer-label { padding: 0 calc(20 * var(--pt)); font-size: calc(12 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); }
.pp-drawer-label b { font-weight: 400; }
.pp-drawer-label span { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); letter-spacing: 0; color: var(--placeholder); }
.pp-picks { display: flex; gap: calc(8 * var(--pt)); height: calc(46 * var(--pt)); padding: 0 calc(20 * var(--pt)); overflow-x: auto; scrollbar-width: none; }
.pp-pick { position: relative; flex: none; display: grid; place-items: center; width: calc(46 * var(--pt)); height: calc(44 * var(--pt)); }
.pp-pick::before { content: ''; position: absolute; inset: 0 calc(1 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; }
.pp-pick > * { position: relative; width: calc(34 * var(--pt)); height: calc(32 * var(--pt)); object-fit: contain; }
.pp-find, .pp-removesel { margin: 0 calc(20 * var(--pt)); }
.pp-find { background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }
.pp-find .is-search { width: calc(17 * var(--pt)); height: auto; }
.pp-find:disabled, .pp-removesel:disabled { opacity: 0.6; }
.pp-drawer-note { padding: 0 calc(20 * var(--pt)); }
.pp-drawer-note:empty { display: none; }
.pp-drawer-note .pp-wait { width: 100%; }
.pp-drawer-err { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); line-height: 1.3; color: #b01919; text-align: center; }
.pp-spin { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); border-radius: 50%; border: calc(2.4 * var(--pt)) solid rgb(255 255 255 / 0.35); border-top-color: #fff; animation: pp-spin 0.8s linear infinite; }
@keyframes pp-spin { to { rotate: 360deg; } }
.pp-shelf.has-drawer .pp-clear { visibility: visible; }
/* the add chooser and the editor, over a scrim */
.pp-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; }
.pp-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.25); }
.pp-mcard { position: relative; width: calc(264 * var(--pt)); border-radius: calc(12 * var(--pt)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-mcard:has(.pp-medit-name) { display: grid; justify-items: center; gap: calc(12 * var(--pt)); width: calc(280 * var(--pt)); padding: calc(20 * var(--pt)); }
.pp-choose { display: grid; gap: calc(2 * var(--pt)); width: 100%; padding: calc(12 * var(--pt)) calc(16 * var(--pt)); text-align: left; }
.pp-choose b { font-weight: 400; font-size: calc(20 * var(--pt)); line-height: 1.2; }
.pp-choose span { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); color: var(--placeholder); }
.pp-mdash { display: block; margin: 0 calc(16 * var(--pt)); border-top: calc(1 * var(--pt)) dashed rgb(0 0 0 / 0.45); }
.pp-medit-art { width: calc(76 * var(--pt)); height: calc(68 * var(--pt)); }
.pp-medit-art > * { width: 100%; height: 100%; object-fit: contain; }
.pp-medit-name { max-width: 100%; overflow: hidden; font-size: calc(28 * var(--pt)); line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.pp-medit-qty { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.pp-medit-qty b { min-width: calc(44 * var(--pt)); font-weight: 400; font-size: calc(20 * var(--pt)); text-align: center; }
.pp-mstep { position: relative; display: grid; place-items: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); }
.pp-mstep::before { content: ''; position: absolute; inset: calc(4 * var(--pt)); border-radius: 50%; background: var(--offwhite); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-mstep:disabled { opacity: 0.4; }
.pp-mremove { width: 100%; height: calc(44 * var(--pt)); border-radius: calc(10 * var(--pt)); background: var(--offwhite); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #b01919; font-size: calc(16 * var(--pt)); color: #b01919; }
.pp-mdone { width: 100%; background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }

/* ======================================================================
   My recipes (Screens/RecipesScreen.swift)
   ====================================================================== */
.pp-mscroll { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: 0; display: grid; align-content: start; gap: calc(20 * var(--pt)); padding: calc(16 * var(--pt)) calc(20 * var(--pt)) calc(40 * var(--pt)); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.pp-mscroll[hidden], .pp-mempty[hidden] { display: none; }
.pp-lcard { display: grid; gap: calc(12 * var(--pt)); }
.pp-card.is-list { position: relative; inset: auto; }
.pp-card.is-list .pp-hero { flex: none; height: calc(196 * var(--pt)); }
.pp-card.is-list.is-stocked .pp-hero { height: calc(224.5 * var(--pt)); }
.pp-card.is-list .pp-summary { -webkit-line-clamp: 4; }
.pp-lgo { background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }
.pp-secline { margin-bottom: calc(-8 * var(--pt)); font-size: calc(12 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); }
.pp-secline b { font-weight: 400; }
.pp-secline span { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); letter-spacing: 0; color: var(--placeholder); }
.pp-mempty { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: 0; display: grid; place-items: center; padding: calc(24 * var(--pt)); }
.pp-mempty-card { display: grid; justify-items: center; gap: calc(8 * var(--pt)); padding: calc(20 * var(--pt)); border-radius: calc(12 * var(--pt)); background: var(--offwhite); outline: calc(2 * var(--pt)) dashed #000; outline-offset: calc(-2 * var(--pt)); text-align: center; }
.pp-mempty-card p:last-child { font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); line-height: 1.3; color: var(--placeholder); }
.pp-mempty-chef { height: calc(96 * var(--pt)); width: auto; }
.pp-mcluster { position: absolute; z-index: 3; right: calc(36 * var(--pt)); top: calc(148 * var(--pt)); display: grid; grid-template-columns: repeat(3, calc(21 * var(--pt))); gap: calc(2 * var(--pt)); pointer-events: none; }
.pp-mcluster > * { width: calc(21 * var(--pt)); height: calc(19 * var(--pt)); object-fit: contain; }

/* the dish's own foods on its plate while the art store draws it, and
   "plating…" under them (DishHeroArt, PlatingLoader) */
.pp-cluster { position: absolute; inset: 14% calc(34 * var(--pt)) 22%; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: calc(2 * var(--pt)); align-content: center; transition: opacity 0.28s ease-out; }
.pp-cluster > * { width: 100%; aspect-ratio: 1.1; object-fit: contain; }
.pp-plating { position: absolute; left: 50%; bottom: calc(8 * var(--pt)); translate: -50% 0; padding: calc(5 * var(--pt)) calc(12 * var(--pt)); border-radius: 99px; background: rgb(255 255 255 / 0.9); box-shadow: inset 0 0 0 calc(1 * var(--pt)) #000; font-size: calc(14 * var(--pt)); letter-spacing: calc(0.52 * var(--pt)); color: rgb(0 0 0 / 0.75); white-space: nowrap; transition: opacity 0.28s ease-out; }
.pp-dish.is-plated :is(.pp-cluster, .pp-plating), .pp-dish.is-tried .pp-plating { opacity: 0; }
.pp-dish .pp-art.is-hero[data-pending] { opacity: 0; }

/* ======================================================================
   Settings (Screens/SettingsScreen.swift)
   ====================================================================== */
.pp-setscroll { position: absolute; left: 0; right: 0; top: calc(206.5 * var(--pt)); bottom: 0; display: grid; align-content: start; gap: calc(12 * var(--pt)); padding: calc(16 * var(--pt)) calc(20 * var(--pt)) calc(48 * var(--pt)); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
/* the promo is a button, a plain one (it dims while pressed), that raises
   the Season Pass */
.pp-promo { position: relative; display: block; width: 100%; border-radius: calc(12 * var(--pt)); background: #fff; text-align: left; transition: opacity 80ms ease-out; }
.pp-promo:active { opacity: 0.7; }
.pp-promo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 calc(3 * var(--pt)) #000; pointer-events: none; }
.pp-promo-top { display: grid; place-items: center; min-height: calc(21 * var(--pt)); border-radius: calc(12 * var(--pt)) calc(12 * var(--pt)) 0 0; background: var(--red); font-size: calc(10.5 * var(--pt)); letter-spacing: calc(1.5 * var(--pt)); color: #fff; padding-top: calc(2 * var(--pt)); }
.pp-promo-body { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(12 * var(--pt)) calc(21 * var(--pt)) calc(12 * var(--pt)) calc(16 * var(--pt)); }
.pp-promo-hat { flex: none; display: grid; place-items: center; width: calc(42 * var(--pt)); height: calc(42 * var(--pt)); border-radius: 50%; background: var(--butter); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-promo-hat img { width: calc(30 * var(--pt)); height: calc(27 * var(--pt)); object-fit: contain; }
.pp-promo-words { flex: 1; display: grid; gap: calc(3 * var(--pt)); }
.pp-promo-words b { font-weight: 400; font-size: calc(18 * var(--pt)); letter-spacing: calc(0.8 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-outlined.is-butter { color: var(--butter); --o: calc(1.2 * var(--pt)); --d: calc(0.85 * var(--pt)); }
.pp-promo-words span { font-family: 'PP Faustina', Georgia, serif; font-size: calc(12.5 * var(--pt)); line-height: 1.25; }
.pp-promo-arrow { flex: none; width: calc(32 * var(--pt)); height: calc(20 * var(--pt)); }
.pp-promo i { position: absolute; top: 50%; width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); translate: 0 -50%; border-radius: 50%; background: var(--butter); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; z-index: 1; }
.pp-promo i.is-l { left: calc(-9 * var(--pt)); }
.pp-promo i.is-r { right: calc(-9 * var(--pt)); }
.pp-group { padding: calc(12 * var(--pt)) 0; border-radius: calc(12 * var(--pt)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-group h3 { padding: 0 calc(12 * var(--pt)) calc(4 * var(--pt)); font-weight: 400; font-size: calc(20 * var(--pt)); line-height: 1.25; margin: 0; }
.pp-group hr { margin: calc(4 * var(--pt)) calc(12 * var(--pt)); border: 0; border-top: calc(1 * var(--pt)) solid rgb(0 0 0 / 0.14); }
.pp-setrow { display: flex; align-items: center; gap: calc(12 * var(--pt)); padding: calc(8 * var(--pt)) calc(12 * var(--pt)); }
.pp-setrow > div { flex: 1; min-width: 0; }
.pp-setrow.is-link { cursor: pointer; }
.pp-setrow-title { font-size: calc(17 * var(--pt)); line-height: 1.25; }
.pp-setrow-title span { margin-left: calc(4 * var(--pt)); font-size: calc(14 * var(--pt)); color: var(--placeholder); }
.pp-setrow-note { margin-top: calc(2 * var(--pt)); font-family: 'PP Faustina', Georgia, serif; font-size: calc(15 * var(--pt)); line-height: 1.3; color: var(--placeholder); }
.pp-switch { position: relative; flex: none; width: calc(51 * var(--pt)); height: calc(31 * var(--pt)); border-radius: 99px; background: var(--steel); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; transition: background-color 0.2s ease; }
.pp-switch i { position: absolute; left: calc(3 * var(--pt)); top: calc(3 * var(--pt)); width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; transition: translate 0.22s cubic-bezier(0.3, 1.3, 0.5, 1); }
.pp-switch.is-on { background: #349e31; }
.pp-switch.is-on i { translate: calc(20 * var(--pt)) 0; }
.pp-clearbtn { flex: none; padding: calc(5 * var(--pt)) calc(12 * var(--pt)); border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) #b01919; font-size: calc(13 * var(--pt)); color: #b01919; }
.pp-disclose .is-chevron { width: calc(12 * var(--pt)); height: auto; rotate: -90deg; }
.pp-setbtn { margin: calc(12 * var(--pt)) calc(12 * var(--pt)) 0; background: #fff; font-size: calc(16 * var(--pt)); }
.pp-setdelete { display: block; width: 100%; min-height: calc(44 * var(--pt)); margin-top: calc(4 * var(--pt)); font-size: calc(14 * var(--pt)); color: #b01919; }

/* ======================================================================
   The Season Pass (Screens/PaywallSheet.swift), as a sheet
   iOS 26's large sheet, measured off the layout sweep's capture: its edge
   59 down, its corners 38, the screen behind it dimmed by a fifth and left
   where it is. In it, the title band (19 in, 7 over a 44-point close and 5
   under it, 56 in all), the card that scrolls under it and fades through
   its last 26, and the plans and the button pinned below. The home
   indicator's 34 is in the foot's bottom padding, as SwiftUI adds it.
   ====================================================================== */
.pp-pw { position: absolute; inset: 0; }
.pp-pw-dim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.2); }
.pp-pw-sheet { position: absolute; left: 0; right: 0; top: calc(59 * var(--pt)); bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(38 * var(--pt)) calc(38 * var(--pt)) 0 0; background: var(--butter); }
.pp-pw-band { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: calc(8 * var(--pt)); padding: calc(7 * var(--pt)) calc(19 * var(--pt)) calc(5 * var(--pt)); background: var(--butter); touch-action: none; cursor: grab; }
.pp-pw-close { flex: none; display: grid; place-items: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); }
.pp-pw-close > span { display: grid; place-items: center; width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-pw-title { font-size: calc(24 * var(--pt)); line-height: var(--fugaz-lh); white-space: nowrap; }
.pp-pw-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; padding: calc(16 * var(--pt)) calc(20 * var(--pt)) calc(8 * var(--pt)); -webkit-mask: linear-gradient(#000 calc(100% - 26 * var(--pt)), transparent); mask: linear-gradient(#000 calc(100% - 26 * var(--pt)), transparent); }
.pp-pw-scroll::-webkit-scrollbar { display: none; }
/* the ticket: its 3-point edge drawn under what is on it, so the punches
   cut it rather than cross it */
.pp-pw-card { position: relative; border-radius: calc(12 * var(--pt)); background: #fff; box-shadow: inset 0 0 0 calc(3 * var(--pt)) #000; }
.pp-pw-head { display: grid; justify-items: center; padding: calc(10 * var(--pt)) calc(16 * var(--pt)) calc(9 * var(--pt)); text-align: center; }
.pp-pw-shop { font-size: calc(10.5 * var(--pt)); letter-spacing: calc(2.2 * var(--pt)); line-height: var(--fugaz-lh); color: var(--placeholder); }
.pp-pw-ornament { justify-self: stretch; height: calc(5 * var(--pt)); margin: calc(5 * var(--pt)) calc(22 * var(--pt)) calc(6 * var(--pt)); border-top: calc(2 * var(--pt)) solid #000; border-bottom: calc(1 * var(--pt)) solid #000; }
.pp-pw-word { padding: calc(1.5 * var(--pt)); margin-top: calc(1 * var(--pt)); font-size: calc(27 * var(--pt)); letter-spacing: calc(1 * var(--pt)); line-height: var(--fugaz-lh); color: var(--butter); --o: calc(1.5 * var(--pt)); --d: calc(1.06 * var(--pt)); }
.pp-pw-serial { margin-top: calc(6 * var(--pt)); font-family: 'PP Faustina', Georgia, serif; font-size: calc(11 * var(--pt)); letter-spacing: calc(1.5 * var(--pt)); line-height: normal; font-variant-numeric: tabular-nums; color: var(--placeholder); }
/* the tear line: a butter dot every 11 from 4 in, and a punch at each edge */
.pp-pw-perf { position: relative; height: calc(9 * var(--pt)); background: radial-gradient(circle at calc(5.5 * var(--pt)) 50%, var(--butter) calc(2.7 * var(--pt)), transparent calc(2.8 * var(--pt))) calc(-1.5 * var(--pt)) 0 / calc(11 * var(--pt)) 100% repeat-x; }
.pp-pw :is(.pp-pw-perf, .pp-pw-stub) i { position: absolute; z-index: 1; top: 50%; width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); translate: 0 -50%; border-radius: 50%; background: var(--butter); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-pw :is(.pp-pw-perf, .pp-pw-stub) i.is-l { left: calc(-9.5 * var(--pt)); }
.pp-pw :is(.pp-pw-perf, .pp-pw-stub) i.is-r { right: calc(-9.5 * var(--pt)); }
.pp-pw-perks { display: grid; gap: calc(8 * var(--pt)); margin: 0; padding: calc(9 * var(--pt)) calc(12 * var(--pt)) calc(10 * var(--pt)); list-style: none; }
.pp-pw-perks li { display: flex; align-items: center; gap: calc(11 * var(--pt)); padding: calc(9 * var(--pt)) calc(14 * var(--pt)) calc(10 * var(--pt)) calc(11 * var(--pt)); border-radius: calc(10 * var(--pt)); background: var(--butter); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-pw-perk-art { flex: none; display: grid; place-items: center; width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; }
.pp-pw-perk-art img { width: calc(27 * var(--pt)); height: calc(27 * var(--pt)); object-fit: contain; }
.pp-pw-perk-words { display: grid; gap: calc(3 * var(--pt)); min-width: 0; }
.pp-pw-perk-words b { font-weight: 400; font-size: calc(15 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-pw-perk-words small { font-family: 'PP Faustina', Georgia, serif; font-size: calc(12.5 * var(--pt)); line-height: normal; color: #3b3b3b; }
/* the seal hangs off the corner, half on the paper */
.pp-pw-seal { position: absolute; top: calc(-12 * var(--pt)); right: calc(-13 * var(--pt)); width: calc(72 * var(--pt)); height: calc(72 * var(--pt)); rotate: -8deg; pointer-events: none; }
.pp-pw-seal svg { display: block; width: 100%; height: 100%; }
.pp-pw-seal b { position: absolute; inset: 0; display: grid; place-content: center; font-weight: 400; font-size: calc(13 * var(--pt)); letter-spacing: calc(0.6 * var(--pt)); line-height: calc(18.08 * var(--pt)); text-align: center; color: #fff; }
.pp-pw-plans { flex: none; padding: 0 calc(20 * var(--pt)) calc(8 * var(--pt)); background: var(--butter); }
.pp-pw-tear { padding: calc(11 * var(--pt)) 0 calc(5 * var(--pt)); font-size: calc(9.5 * var(--pt)); letter-spacing: calc(2 * var(--pt)); line-height: var(--fugaz-lh); text-align: center; color: var(--placeholder); }
.pp-pw-stubs { display: grid; gap: calc(9 * var(--pt)); }
/* the chosen plan lifts three points, on a quick spring */
.pp-pw-annual { transition: translate 0.24s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pp-pw:not(.is-monthly) .pp-pw-annual { translate: 0 calc(-3 * var(--pt)); }
.pp-pw-cap { display: grid; place-items: center; min-height: calc(22 * var(--pt)); border: calc(3 * var(--pt)) solid #000; border-bottom: 0; border-radius: calc(8 * var(--pt)) calc(8 * var(--pt)) 0 0; background: var(--red); font-size: calc(11 * var(--pt)); letter-spacing: calc(1.5 * var(--pt)); line-height: var(--fugaz-lh); color: #fff; }
.pp-pw.is-monthly .pp-pw-cap { border-width: calc(2 * var(--pt)) calc(2 * var(--pt)) 0; }
.pp-pw-stub { position: relative; display: block; width: 100%; text-align: left; }
/* an unchosen stub's wash stops at its punches */
.pp-pw-ticket { display: flex; align-items: center; gap: calc(11 * var(--pt)); padding: calc(9 * var(--pt)) calc(14 * var(--pt)); border-radius: calc(8 * var(--pt)); background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; filter: saturate(0.55); opacity: 0.78; }
.pp-pw-annual .pp-pw-ticket { border-radius: 0 0 calc(8 * var(--pt)) calc(8 * var(--pt)); }
.pp-pw-stub.is-on .pp-pw-ticket { background: #fff8e6; box-shadow: inset 0 0 0 calc(3 * var(--pt)) #000; filter: none; opacity: 1; }
.pp-pw-radio { position: relative; flex: none; width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); border-radius: 50%; background: var(--offwhite); box-shadow: inset 0 0 0 calc(2 * var(--pt)) #000; transition: background-color 0.16s ease-out; }
.pp-pw-radio::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(8 * var(--pt)); height: calc(8 * var(--pt)); translate: -50% -50%; border-radius: 50%; background: #fff; opacity: 0; transition: opacity 0.16s ease-out; }
.pp-pw-stub.is-on .pp-pw-radio { background: var(--red); box-shadow: inset 0 0 0 calc(3 * var(--pt)) #000; }
.pp-pw-stub.is-on .pp-pw-radio::after { opacity: 1; }
.pp-pw-plan { flex: 1; min-width: 0; display: grid; gap: calc(1 * var(--pt)); }
.pp-pw-plan b { font-weight: 400; font-size: calc(17 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-pw-plan small, .pp-pw-price small { font-family: 'PP Faustina', Georgia, serif; line-height: normal; color: var(--placeholder); }
.pp-pw-plan small { font-size: calc(12.5 * var(--pt)); }
.pp-pw-price { flex: none; display: grid; justify-items: end; }
.pp-pw-price b { font-weight: 400; font-size: calc(23 * var(--pt)); line-height: var(--fugaz-lh); }
.pp-pw-price small { font-size: calc(11.5 * var(--pt)); }
.pp-pw-foot { position: relative; flex: none; display: grid; padding: calc(15 * var(--pt)) calc(20 * var(--pt)) calc(46 * var(--pt)); background: var(--butter); }
.pp-pw-cta { width: 100%; background: var(--red); color: #fff; font-size: calc(20 * var(--pt)); }
.pp-pw-cta:disabled { background: var(--steel); }
.pp-pw-note { margin-top: calc(7 * var(--pt)); font-family: 'PP Faustina', Georgia, serif; font-size: calc(11.5 * var(--pt)); line-height: normal; text-align: center; color: var(--placeholder); }
.pp-pw-note.is-error { color: #b01919; }
.pp-pw-links { display: flex; justify-content: center; gap: calc(16 * var(--pt)); margin-top: calc(6 * var(--pt)); font-family: 'PP Faustina', Georgia, serif; font-size: calc(12 * var(--pt)); line-height: normal; color: var(--placeholder); }
.pp-pw-links :is(a, button) { color: inherit; font: inherit; text-decoration: underline; }

/* ======================================================================
   The system's alert, as iOS 26 draws one
   ====================================================================== */
.pp-alert { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / 0.22); font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; }
.pp-alert-box { width: calc(300 * var(--pt)); padding: calc(22 * var(--pt)) calc(16 * var(--pt)) calc(16 * var(--pt)); border-radius: calc(32 * var(--pt)); background: rgb(246 246 248 / 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 calc(12 * var(--pt)) calc(40 * var(--pt)) rgb(0 0 0 / 0.22); text-align: center; color: #000; }
.pp-alert-title { font-weight: 600; font-size: calc(17 * var(--pt)); line-height: 1.3; }
.pp-alert-msg { margin-top: calc(6 * var(--pt)); font-size: calc(14 * var(--pt)); line-height: 1.38; color: rgb(0 0 0 / 0.72); }
.pp-alert-btns { display: flex; gap: calc(10 * var(--pt)); margin-top: calc(18 * var(--pt)); }
.pp-alert-btns.is-stacked { flex-direction: column; }
.pp-alert-btn { flex: 1; height: calc(46 * var(--pt)); border-radius: 99px; background: rgb(120 120 128 / 0.16); font: 500 calc(17 * var(--pt)) / 1 -apple-system, 'SF Pro Text', system-ui, sans-serif; color: #000; }
.pp-alert-btn.is-destructive { color: #ff3b30; }
.pp-alert-btn.is-cancel { font-weight: 600; }
.pp-alert-btn:active { background: rgb(120 120 128 / 0.28); }

/* the app's own Animations switch, off: nothing moves */
.pp-device.is-still *, .pp-device.is-still *::before, .pp-device.is-still *::after { transition-duration: 0.01s !important; animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .pp-btn, .pp-prev, .pp-step, .pp-step-head, .pp-step-num, .pp-step-tick, .pp-step-body, .pp-count, .pp-missing, .pp-tchip, .pp-menu-dashed, .pp-menu-solid { transition-duration: 0.01s; }
  .pp-plate.is-writing .pp-rays { animation: none; }
  .pp-step.is-done .pp-step-tick .pp-badge { animation: none; }
  .pp-door-count.is-bumped { animation: none; }
  .pp-kbd, .pp-scene, .pp-pass, .pp-switch i, .pp-ticket, .pp-stub, .pp-tword { transition-duration: 0.01s; }
  .pp-beam i { animation: none; top: calc(50% - 27 * var(--pt)); }
}