/* ═══════════════════════════════════════════════════════════════
   Sadie May Scones — home = checkout, shared ground
   Three architectures (A counter · B card · C menu board) sit on this.
   Palette is the LOCKED Navy & Umber package; only the two navy grounds
   are offered here because Nathan ruled navy as the base (2026-09-02).
   Non-scrollable on desktop (100dvh, no scroll); one gentle scroll on mobile.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --serif: "Petrona", Georgia, serif;
  --script: "Pacifico", cursive;
  --radius: 18px;
  --ease: cubic-bezier(.32,.72,0,1);
  --dur: 280ms;
  /* rhythm — parent owns it, 8px steps */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px;
}

/* ══ THE TWO NAVY GROUNDS ═══════════════════════════════════════
   navy = brand ink as ground · deep = the darker, calmer navy      */
html[data-theme="navy"] {
  --ground:#293984; --surface:#FBF6EC; --card-ink:#16204A;
  --ink:#F4EEE2; --bright:#FFFFFF;
  --accent:#E0BA91; --muted:#A7A9BE;
  --hair: color-mix(in srgb, var(--ink) 22%, transparent);
}
html[data-theme="deep"] {
  --ground:#16204A; --surface:#FBF6EC; --card-ink:#16204A;
  --ink:#F4EEE2; --bright:#FFFFFF;
  --accent:#E0BA91; --muted:#9B9CA5;
  --hair: color-mix(in srgb, var(--ink) 22%, transparent);
}

html[data-radius="crisp"]   { --radius: 4px;  --radius-sm: 3px; }
html[data-radius="soft"]    { --radius: 18px; --radius-sm: 12px; }
html[data-radius="pillowy"] { --radius: 30px; --radius-sm: 20px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* ══ GROUND TREATMENT — brand-tinted radial washes ═══════════════ */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
html[data-ground="flat"] body::before { display: none; }
html[data-ground="washes"] body::before,
html[data-ground="grain"]  body::before {
  background:
    radial-gradient(70ch 60ch at 10% -10%, color-mix(in srgb, #6B7BD4 42%, transparent), transparent 62%),
    radial-gradient(58ch 48ch at 97%  4%,  color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(84ch 70ch at 80% 96%,  color-mix(in srgb, #6B7BD4 26%, transparent), transparent 66%),
    radial-gradient(50ch 40ch at 0%  82%,  color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
}
html[data-ground="grain"] body::after {
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ THE FOLD ═══════════════════════════════════════════════════
   Desktop: one locked screen, nothing scrolls.
   Mobile: one gentle scroll, because a keyboard will fight a hard lock. */
.screen {
  position: relative; z-index: 1;
  height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
@media (max-width: 860px) {
  .screen { height: auto; min-height: 100dvh; overflow: visible; }
  body { overflow-y: auto; }
}

/* fold marker — scaffolding aid, not a design element */
html[data-fold="on"] .screen::after {
  content: "the fold — 100dvh";
  position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; text-align: right; padding: 0 10px 4px;
  pointer-events: none; z-index: 40;
}

/* ══ NAVBAR ═════════════════════════════════════════════════════ */
.nav {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) clamp(20px, 4vw, 48px);
}
.nav .brand {
  font-family: var(--script);
  font-size: clamp(20px, 2vw, 26px);
  color: var(--bright);
  letter-spacing: .01em;
}
.nav .links { display: flex; align-items: center; gap: var(--s3); }
.nav .links a {
  color: var(--ink); text-decoration: none;
  font-size: 14px; opacity: .88;
  transition: opacity var(--dur) var(--ease);
}
.nav .links a:hover { opacity: 1; }
@media (max-width: 560px) { .nav .links a.hide-sm { display: none; } }

/* ══ SHARED TYPE ════════════════════════════════════════════════ */
.display {
  font-family: var(--serif);
  font-weight: 500; line-height: 1.06; letter-spacing: -.01em;
  color: var(--bright); margin: 0;
}
.lede { color: var(--ink); opacity: .84; line-height: 1.5; margin: 0; }
.bakeday {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .02em; color: var(--accent);
}
.bakeday .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ══ THE ORDER SURFACE (cream card on navy — the band inverts) ══ */
.card {
  background: var(--surface);
  color: var(--card-ink);
  border-radius: var(--radius);
  box-shadow:
    0 1px 2px rgba(0,0,0,.28),
    0 8px 20px rgba(0,0,0,.22),
    0 28px 60px rgba(0,0,0,.20);
}

/* ══ FIELD — a labelled row inside the order surface ════════════ */
.field { display: flex; flex-direction: column; gap: 10px; }
.field > .label {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: color-mix(in srgb, var(--card-ink) 58%, transparent);
  font-weight: 600;
}

/* ══ SEGMENTED CONTROL — track and thumb, air on all sides ══════
   His standing taste: a thumb floating in a groove, never flush buttons
   meeting at a hard seam. Nothing resizes when the state flips.       */
.seg {
  position: relative;
  display: grid; gap: 0;
  background: color-mix(in srgb, var(--card-ink) 8%, transparent);
  border-radius: calc(var(--radius-sm, 12px) + 5px);
  padding: 5px;
  isolation: isolate;
}
.seg .thumb {
  position: absolute; top: 5px; bottom: 5px; left: 0;
  border-radius: var(--radius-sm, 12px);
  background: var(--bright);
  box-shadow: 0 1px 2px rgba(22,32,74,.18), 0 4px 12px rgba(22,32,74,.14);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
  z-index: -1;
}
.seg button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  color: color-mix(in srgb, var(--card-ink) 62%, transparent);
  padding: 11px 10px; border-radius: var(--radius-sm, 12px);
  transition: color var(--dur) var(--ease);
  text-align: center; line-height: 1.25;
}
.seg button[aria-pressed="true"] { color: var(--card-ink); font-weight: 600; }
.seg button .sub {
  display: block; font-size: 11px; font-weight: 500; opacity: .62; margin-top: 2px;
}

/* ══ PAY — the commit. Loudest element on the surface. ══════════ */
.pay-stack { display: flex; flex-direction: column; gap: var(--s1); }
.btn-wallet {
  appearance: none; border: 0; cursor: pointer;
  width: 100%; padding: 15px 20px;
  border-radius: var(--radius-sm, 12px);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-wallet:hover { transform: translateY(-1px); }
.btn-wallet:active { transform: translateY(0); }
.btn-wallet.apple  { background:#000; color:#fff; }
.btn-wallet.google { background:#fff; color:#3c4043; box-shadow: inset 0 0 0 1px rgba(60,64,67,.22); }
.btn-wallet.card {
  background: var(--card-ink); color: var(--surface);
  box-shadow: 0 2px 6px rgba(22,32,74,.24), 0 10px 24px rgba(22,32,74,.18);
}
.paydiv {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: color-mix(in srgb, var(--card-ink) 50%, transparent);
}
.paydiv::before, .paydiv::after {
  content: ""; height: 1px; flex: 1;
  background: color-mix(in srgb, var(--card-ink) 14%, transparent);
}
.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2);
}
.total .amt {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--card-ink); line-height: 1;
}
.total .note { font-size: 12px; color: color-mix(in srgb, var(--card-ink) 55%, transparent); }

/* express-first vs card-first ordering */
html[data-payorder="card"] .pay-stack { flex-direction: column-reverse; }
html[data-payorder="card"] .pay-stack .paydiv { order: 0; }

/* ══ PRODUCT MEDIA ══════════════════════════════════════════════ */
.media {
  display: grid; place-items: center;
  border-radius: var(--radius);
  overflow: hidden;
}
.media img { display: block; width: 100%; height: auto; }
.media.photo {
  background: color-mix(in srgb, var(--bright) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--hair);
  aspect-ratio: 4/3; position: relative;
}
.media.photo::after {
  content: "product photo";
  position: absolute; right: 12px; bottom: 10px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ══ THE PANEL ══════════════════════════════════════════════════ */
/* sits BELOW the navbar on purpose — the nav is part of what he is judging */
#pt-panel {
  position: fixed; right: 14px; top: 88px; z-index: 100;
  width: 232px; max-height: calc(100dvh - 102px); overflow: auto;
  background: #FBF6EC; color: #16204A;
  border-radius: 12px; padding: 12px 14px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 18px 46px rgba(0,0,0,.34);
  font: 12px/1.45 var(--sans);
}
#pt-panel h4 {
  margin: 0 0 4px; font-size: 12px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
}
#pt-panel .grp { margin-top: 12px; }
#pt-panel .grp > b {
  display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #6F6A61; margin-bottom: 5px; font-weight: 700;
}
#pt-panel label { display: flex; gap: 7px; align-items: flex-start; padding: 2px 0; cursor: pointer; }
#pt-panel input { margin: 2px 0 0; flex: 0 0 auto; }
#pt-panel .foot {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(22,32,74,.14);
  font-size: 11px; color: #6F6A61;
}
#pt-panel .foot a { color: #7A4E2E; display: block; margin-top: 5px; }
#pt-panel .tog { cursor: pointer; background: none; border: 0; font: inherit; font-size: 14px; }
#pt-panel.min .grp, #pt-panel.min .foot { display: none; }
@media (max-width: 860px) { #pt-panel { right: 8px; top: 76px; width: 206px; } }