/* ==========================================================================
   Tiffin Finder — styles.css
   Identity: leaf-green ground, saffron accent, warm-cream surfaces.
   Display: Fraunces · Body: Manrope. Mobile-first, tokens on :root,
   dark theme via prefers-color-scheme with a data-theme override.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  --bg: #fbf7ef;
  --bg-2: #f4ede0;
  --surface: #ffffff;
  --surface-2: #f7f1e6;
  --surface-3: #eee5d5;

  --ink: #17271d;
  --ink-2: #3a4a3f;
  --muted: #5c6b60;
  --line: #e4dccb;
  --line-strong: #cfc4ae;
  /* Borders that identify a form control: 3:1 against the surfaces they sit on. */
  --field-line: #8c8676;

  --brand: #1f5c3a;
  --brand-2: #22603c;
  --brand-3: #154129;
  --on-brand: #fbf7ef;
  --on-brand-muted: #cfe0d4;
  /* Saffron that is light enough to be small text on the green bands,
     including where the radial glows lighten them (>= 4.5:1 at the glow peak). */
  --on-brand-accent: #fad29a;
  --brand-line: rgb(251 247 239 / 0.16);
  --brand-field: rgb(251 247 239 / 0.08);
  --brand-field-line: rgb(251 247 239 / 0.55);

  --accent: #e8912d;
  --accent-strong: #d17719;
  --accent-ink: #8a4a0b;
  --accent-soft: #fce9d2;
  --on-accent: #17271d;

  --verified: #1d6b4f;
  --verified-soft: #ddf1e6;
  --pending: #8a4a0b;
  --pending-soft: #fce9d2;
  --danger: #a32d2d;
  --danger-soft: #fbe3e3;
  --focus: var(--ink);
  --inset-hi: transparent;

  --dabba-cream: #fbf7ef;
  --tile-s: 58%;
  --tile-l: 92%;
  --chip-on-bg: #1f5c3a;
  --chip-on-ink: #fbf7ef;
  --preview-bg: var(--accent-soft);
  --preview-rule: var(--line);

  --shadow-1: 0 1px 2px rgb(23 39 29 / 0.06), 0 8px 24px -14px rgb(23 39 29 / 0.22);
  --shadow-2: 0 2px 4px rgb(23 39 29 / 0.08), 0 22px 44px -20px rgb(23 39 29 / 0.32);
  --shadow-sheet: 0 -12px 40px -12px rgb(23 39 29 / 0.35);

  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 640ms;

  --wrap: 1120px;
  --gutter: 16px;
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #101a14;
    --bg-2: #14211a;
    --surface: #18261e;
    --surface-2: #1e2e25;
    --surface-3: #26382d;

    --ink: #eef2ec;
    --ink-2: #c7d2c9;
    --muted: #93a398;
    --line: #2a3b31;
    --line-strong: #3a4f42;
    --field-line: #667a6c;

    --brand: #133524;
    --brand-2: #1a4430;
    --brand-3: #0c2518;
    --on-brand: #f3f0e6;
    --on-brand-muted: #b9cdbf;
    --on-brand-accent: #f4b36a;
    --brand-line: rgb(243 240 230 / 0.16);
    --brand-field: rgb(243 240 230 / 0.08);
    --brand-field-line: rgb(243 240 230 / 0.5);

    --accent: #f0a04a;
    --accent-strong: #f5b266;
    --accent-ink: #f4b36a;
    --accent-soft: #3a2a17;
    --on-accent: #17120a;

    --verified: #7fcba2;
    --verified-soft: #1b3a2b;
    --pending: #f4b36a;
    --pending-soft: #3a2a17;
    --danger: #ff8a8a;
    --danger-soft: #4a1f1f;
    --focus: var(--accent-strong);
    --inset-hi: rgb(255 255 255 / 0.06);

    --dabba-cream: #f3f0e6;
    --tile-s: 30%;
    --tile-l: 21%;
    --chip-on-bg: #7fcba2;
    --chip-on-ink: #101a14;
    --preview-bg: var(--surface-2);
    --preview-rule: var(--accent);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.6);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 24px 48px -20px rgb(0 0 0 / 0.7);
    --shadow-sheet: 0 -12px 40px -12px rgb(0 0 0 / 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #101a14;
  --bg-2: #14211a;
  --surface: #18261e;
  --surface-2: #1e2e25;
  --surface-3: #26382d;

  --ink: #eef2ec;
  --ink-2: #c7d2c9;
  --muted: #93a398;
  --line: #2a3b31;
  --line-strong: #3a4f42;
  --field-line: #667a6c;

  --brand: #133524;
  --brand-2: #1a4430;
  --brand-3: #0c2518;
  --on-brand: #f3f0e6;
  --on-brand-muted: #b9cdbf;
  --on-brand-accent: #f4b36a;
  --brand-line: rgb(243 240 230 / 0.16);
  --brand-field: rgb(243 240 230 / 0.08);
  --brand-field-line: rgb(243 240 230 / 0.5);

  --accent: #f0a04a;
  --accent-strong: #f5b266;
  --accent-ink: #f4b36a;
  --accent-soft: #3a2a17;
  --on-accent: #17120a;

  --verified: #7fcba2;
  --verified-soft: #1b3a2b;
  --pending: #f4b36a;
  --pending-soft: #3a2a17;
  --danger: #ff8a8a;
  --danger-soft: #4a1f1f;
  --focus: var(--accent-strong);
  --inset-hi: rgb(255 255 255 / 0.06);

  --dabba-cream: #f3f0e6;
  --tile-s: 30%;
  --tile-l: 21%;
  --chip-on-bg: #7fcba2;
  --chip-on-ink: #101a14;
  --preview-bg: var(--surface-2);
  --preview-rule: var(--accent);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px -14px rgb(0 0 0 / 0.6);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 24px 48px -20px rgb(0 0 0 / 0.7);
  --shadow-sheet: 0 -12px 40px -12px rgb(0 0 0 / 0.7);
}

/* ---------- 2. Reset & base ---------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

body.sheet-open {
  overflow: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 1.3rem + 3vw, 3.1rem);
}

h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

main {
  flex: 1 0 auto;
}

/* ---------- 3. Skip link & preview bar ----------------------------------- */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-pill);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-1) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

/* The 404 page makes <main> focusable so its skip link works under <base>;
   it is a landing point, not a control, so it needs no ring. */
main[tabindex="-1"]:focus {
  outline: none;
}

.preview-bar {
  background: var(--preview-bg);
  color: var(--ink);
  border-bottom: 1px solid var(--preview-rule);
  /* Saffron edge rule; an inset shadow so the bar's height is unchanged. */
  box-shadow: inset 4px 0 0 var(--accent);
}

.preview-bar-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding-block: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.preview-bar-inner p {
  margin: 0;
  flex: 1 1 auto;
}

.preview-bar strong {
  font-weight: 800;
}

.preview-bar .icon-btn {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}

.preview-bar .icon-btn:hover {
  background: rgb(0 0 0 / 0.06);
  color: var(--ink);
}

/* ---------- 4. Header ---------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  min-height: var(--header-h);
  padding-block: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
}

.header-inner .brand {
  grid-column: 1;
  grid-row: 1;
}

.header-inner .header-actions {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.header-inner .site-nav {
  grid-row: 2;
}

.logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
  transition: transform var(--dur-2) var(--ease-spring);
}

.brand:hover .logo {
  transform: rotate(-6deg) scale(1.04);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-nav {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px 18px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.site-nav a,
.footer-nav a,
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
}

.site-nav a::after,
.footer-nav a::after,
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-2) var(--ease-out);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after,
.footer-nav a:hover::after,
.link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.icon-btn:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
}

/* Below 720px the header is one 64px row: both nav links live in the footer
   and as CTAs on the kitchen page, so the second nav row is not worth 45px
   of a phone's first screen. */
@media (max-width: 719px) {
  .header-inner .site-nav {
    display: none;
  }
}

@media (min-width: 720px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    column-gap: 28px;
  }

  .header-inner .site-nav {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    padding-bottom: 0;
  }

  .header-inner .header-actions {
    grid-column: 3;
  }
}

/* Phone menu: a button in the header opens the site links in a bottom sheet
   (the .sheet component in section 13). From 720px the header nav shows, so
   both are removed. .sheet sets display later in the file, hence the doubled
   class on the sheet here. */
@media (min-width: 720px) {
  .menu-btn,
  .sheet.nav-sheet {
    display: none;
  }
}

.nav-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

/* .sheet-panel h2 (section 13) sets a bottom margin; this row centres its title. */
.sheet-panel .nav-sheet-head h2 {
  font-size: 1.4rem;
  margin: 0;
}

.nav-sheet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.nav-sheet-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out);
}

.nav-sheet-list a:hover {
  background: var(--surface-2);
}

.nav-sheet-list a[aria-current="page"] {
  background: var(--accent-soft);
}

.nav-chev {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.nav-sheet-list a[aria-current="page"] .nav-chev {
  color: var(--accent-ink);
}

/* Header fit on small phones: with Install showing, the row holds three
   44px buttons. Install becomes icon-only; its text stays the accessible name. */
@media (max-width: 519px) {
  #install-btn {
    position: relative;
    width: 44px;
    padding: 0;
    gap: 0;
  }

  #install-btn .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 399px) {
  .header-actions {
    gap: 4px;
  }

  .header-inner .wordmark {
    font-size: 1.125rem;
  }
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.97rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -12px rgb(209 119 25 / 0.7);
}

.btn-primary:hover {
  background: var(--accent-strong);
  box-shadow: 0 12px 26px -12px rgb(209 119 25 / 0.8);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--ink-2);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn-small {
  min-height: 44px;
  padding: 6px 14px;
  font-size: 0.9rem;
}

.btn-block {
  width: 100%;
}

.btn-follow {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  min-height: 44px;
  padding: 8px 16px;
}

.btn-follow:hover {
  border-color: var(--accent-strong);
  color: var(--accent-ink);
}

.btn-follow.is-following {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn-follow .icon-check {
  display: none;
}

.btn-follow.is-following .icon-check {
  display: block;
}

.btn-follow.is-following .icon-plus {
  display: none;
}

/* The main conversion button follows the rule "saffron carries action,
   green carries identity": saffron fill with dark ink (never white on saffron). */
.btn-whatsapp {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 24px -14px rgb(209 119 25 / 0.8);
}

.btn-whatsapp:hover {
  background: var(--accent-strong);
}

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  --focus: var(--on-brand-accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-brand);
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(60 140 90 / 0.22), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgb(250 210 154 / 0.06), transparent 60%),
    linear-gradient(160deg, var(--brand-2), var(--brand) 55%, var(--brand-3));
}

.hero-inner {
  position: relative;
  display: grid;
  gap: 18px;
  padding-block: clamp(32px, 6vw, 84px) clamp(36px, 5vw, 72px);
}

.hero .eyebrow {
  color: var(--on-brand-accent);
}

.hero h1 {
  color: var(--on-brand);
  max-width: 20ch;
  font-size: clamp(2rem, 1.2rem + 4.2vw, 3.8rem);
  font-variation-settings: "opsz" 144;
  margin: 0;
}

.hero .lede {
  max-width: 54ch;
  color: var(--on-brand-muted);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  margin: 0;
}

.hero-count {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 0;
  padding: 10px 18px 10px 14px;
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.22);
  border: 1px solid var(--brand-line);
  color: var(--on-brand);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  width: fit-content;
  max-width: 100%;
}

.hero-count .num {
  flex: none;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  min-width: 1.2ch;
  text-align: center;
}

.hero-count-text {
  flex: 1 1 auto;
  min-width: 0;
}

.hero-count .sep {
  color: var(--on-brand-muted);
}

.hero-art {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: clamp(180px, 28vw, 340px);
  opacity: 0.16;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-8deg);
}

@media (max-width: 559px) {
  .hero-art {
    width: 180px;
    opacity: 0.12;
  }

  .hero-count .long {
    display: none;
  }
}

.eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* ---------- 7. Filters --------------------------------------------------- */
.filters-section {
  margin-top: -26px;
  position: relative;
  z-index: 2;
}

.filters {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 var(--inset-hi), var(--shadow-2);
}

.search-field {
  position: relative;
}

.search-field .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px 12px 46px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--field-line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.search-field input::placeholder {
  color: var(--muted);
}

.search-field input:hover {
  border-color: var(--ink-2);
}

/* Fields get the same solid 2px focus outline as buttons and chips (--ink in
   light, saffron in dark); the saffron border + soft ring stay as decoration. */
.search-field input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent-strong);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.search-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.chip-group {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The legend stays for assistive tech; the chips are self-evident visually. */
.chip-group legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* On phones the quadrant chips are one edge-to-edge scrolling row instead of
   two wrapped rows. The mask fades the clipped chips at either edge. */
@media (max-width: 899px) {
  .chip-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block: 2px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  }

  .chip-group::-webkit-scrollbar {
    display: none;
  }

  .chip-group label {
    flex: none;
    scroll-snap-align: start;
  }
}

.chip-group input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.chip-group label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}

.chip-group label:hover {
  border-color: var(--ink-2);
  transform: translateY(-1px);
}

.chip-group label:active {
  transform: scale(0.97);
}

.chip-group input:checked + label {
  background: var(--chip-on-bg);
  border-color: var(--chip-on-bg);
  color: var(--chip-on-ink);
}

.chip-group input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.select-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > label,
.field-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.select {
  position: relative;
  display: block;
}

.select select {
  width: 100%;
  min-height: 48px;
  padding: 10px 44px 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-line);
  background: var(--surface-2);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

@media (max-width: 559px) {
  .select select {
    padding: 10px 34px 10px 12px;
    font-size: 0.95rem;
  }

  .select::after {
    right: 14px;
  }
}

.select select:hover {
  border-color: var(--ink-2);
}

.select select:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.switch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--field-line);
  transition: background var(--dur-2) var(--ease-out);
  flex: none;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: transform var(--dur-2) var(--ease-spring);
}

.switch input:checked + .switch-track {
  background: var(--accent-strong);
}

.switch input:checked + .switch-track::after {
  transform: translateX(16px);
}

.switch input:checked ~ .switch-label {
  color: var(--ink);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* The reset row only appears once a filter is on (app.js toggles .has-active). */
.filters-foot {
  display: none;
  justify-content: flex-end;
}

.filters.has-active .filters-foot {
  display: flex;
}

@media (min-width: 900px) {
  .filters {
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "search chips"
      "selects switches"
      "foot foot";
    align-items: center;
    padding: 18px 20px;
  }

  .filters:not(.has-active) {
    grid-template-areas:
      "search chips"
      "selects switches";
  }

  .search-field {
    grid-area: search;
  }

  .chip-group {
    grid-area: chips;
    justify-content: flex-end;
  }

  .select-row {
    grid-area: selects;
  }

  .switch-row {
    grid-area: switches;
    justify-content: flex-end;
    align-self: end;
  }

  .filters-foot {
    grid-area: foot;
  }
}

/* ---------- 8. View tabs & results status -------------------------------- */
.view-tabs {
  display: flex;
  gap: 6px;
  margin-top: 28px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}

.tab:hover {
  color: var(--ink);
}

.tab:active {
  transform: scale(0.98);
}

.tab[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.tab .count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.results-status {
  margin: 18px 0 14px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: opacity var(--dur-1) var(--ease-out);
}

.results-status.is-swapping {
  opacity: 0;
  transition: none;
}

.results-status:focus {
  outline: none;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 28px;
}

.section-head h2 {
  margin: 0;
}

.section-head .lede {
  margin: 0;
  color: var(--muted);
}

/* ---------- 9. Grid & cards ---------------------------------------------- */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  padding-bottom: 8px;
}

.card {
  --i: 0;
  --hue: 30;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  /* `backwards` (not `both`) so the finished keyframe releases `transform`
     and the hover lift below can run. */
  animation: rise var(--dur-3) var(--ease-out) backwards;
  animation-delay: calc(min(var(--i), 8) * 55ms);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

/* Filter changes re-render the grid; only the first paint should stage in. */
.card.no-rise {
  animation: fade var(--dur-1) var(--ease-out) backwards;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}

.card:active {
  transform: translateY(-1px) scale(0.995);
}

.card-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.card-head .card-title {
  min-width: 0;
}

.card-head .tag {
  font-size: 0.68rem;
  padding: 2px 7px;
  letter-spacing: 0.05em;
}

.dabba-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: hsl(var(--hue) var(--tile-s) var(--tile-l));
  flex: none;
  transition: transform var(--dur-2) var(--ease-spring);
}

.card:hover .dabba-tile {
  transform: rotate(-4deg) scale(1.04);
}

.dabba {
  width: 32px;
  height: 32px;
}

.dabba-tile.large {
  width: 92px;
  height: 92px;
  border-radius: 26px;
}

.dabba-tile.large .dabba {
  width: 64px;
  height: 64px;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Dashed = placeholder, the same language as .empty. The accent stays
   reserved for the primary button, checked chips and the count numeral. */
.tag-sample {
  background: transparent;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
}

.card-title {
  margin: 0;
  font-size: 1.25rem;
  font-variation-settings: "opsz" 36;
  transition: color var(--dur-1) var(--ease-out);
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.card:has(.card-link:hover) .card-title {
  color: var(--accent-ink);
}

.card-meta {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 700;
}

.card-peek {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-peek strong {
  color: var(--ink);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
}

.badge svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.badge-verified {
  background: var(--verified-soft);
  color: var(--verified);
}

.badge-pending {
  background: var(--pending-soft);
  color: var(--pending);
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.price .amount {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.price .amount small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.posted {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.card .btn-follow {
  position: relative;
  z-index: 1;
}

.empty {
  padding: 36px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-2);
}

.empty p {
  margin-bottom: 12px;
}

.empty .dabba {
  margin: 0 auto 12px;
  width: 56px;
  height: 56px;
}

/* Loading skeletons while kitchens.json is fetched. They fade in after a
   short delay so a fast load never flashes them. */
.card.skeleton {
  pointer-events: none;
  animation: fade var(--dur-2) var(--ease-out) 180ms backwards;
}

.card.skeleton:hover {
  transform: none;
  box-shadow: var(--shadow-1);
}

.skel {
  display: block;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

.skel-tile {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.skel-title {
  height: 22px;
  width: 72%;
}

.skel-line {
  height: 14px;
  width: 88%;
}

.skel-line.short {
  width: 58%;
}

.skel-pill {
  height: 28px;
  width: 168px;
  border-radius: var(--radius-pill);
}

.skel-price {
  height: 22px;
  width: 84px;
}

.skel-btn {
  height: 44px;
  width: 100px;
  border-radius: var(--radius-pill);
}

/* ---------- 10. Kitchen detail ------------------------------------------- */
.kitchen {
  display: grid;
  gap: 18px;
  padding-block: 20px 28px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  width: fit-content;
  transition: color var(--dur-1) var(--ease-out);
}

.back-link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-2) var(--ease-spring);
}

.back-link:hover {
  color: var(--ink);
}

.back-link:hover svg {
  transform: translateX(-3px);
}

.k-head {
  --hue: 30;
  display: grid;
  gap: 12px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  animation: rise var(--dur-3) var(--ease-out) backwards;
}

/* Tile and title share one row; the Sample tag and meta line sit with the title. */
.k-head-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.k-head-title {
  display: grid;
  gap: 6px;
  justify-items: start;
  min-width: 0;
}

.k-head-title .card-tags {
  justify-content: flex-start;
}

.k-head-title .card-meta {
  font-size: 0.95rem;
}

.k-head h1 {
  margin: 0;
  font-size: clamp(1.55rem, 1rem + 2.4vw, 2.6rem);
  font-variation-settings: "opsz" 72;
}

@media (max-width: 899px) {
  .dabba-tile.large {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .dabba-tile.large .dabba {
    width: 44px;
    height: 44px;
  }
}

.k-head .desc {
  margin: 0;
  color: var(--ink-2);
  max-width: 62ch;
}

.k-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.k-section {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  animation: rise var(--dur-3) var(--ease-out) backwards;
}

.k-side .k-section {
  animation-delay: 120ms;
}

.k-section:nth-of-type(2) {
  animation-delay: 60ms;
}

.k-section:nth-of-type(3) {
  animation-delay: 120ms;
}

.k-section:nth-of-type(4) {
  animation-delay: 180ms;
}

.k-section:nth-of-type(5) {
  animation-delay: 240ms;
}

.k-section h2 {
  font-size: 1.3rem;
  margin: 0 0 4px;
}

.k-section .sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.menu-list li {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.menu-list li:first-child {
  border-top: 0;
}

.menu-list .day {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.menu-list .dish {
  color: var(--ink);
  font-weight: 600;
}

.menu-list .dish-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .menu-list li {
    grid-template-columns: 2.6rem 1fr auto;
    gap: 8px;
    padding: 10px 0;
  }

  .menu-list .dish {
    font-size: 0.95rem;
  }
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
}

.price-grid > div {
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: center;
}

.price-grid dt {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.price-grid dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.fine {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.fine + .fine {
  margin-top: 6px;
}

.order-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.order-bar h2 {
  font-size: 1.05rem;
  margin: 0;
}

.order-actions {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
}

.order-actions .btn {
  padding-inline: 12px;
}

.order-bar .fine {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (max-width: 559px) {
  .call-number {
    display: none;
  }

  .order-actions {
    grid-template-columns: 1.6fr 1fr;
  }

  .order-actions .btn {
    font-size: 0.93rem;
  }
}

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--pending-soft);
  color: var(--ink);
  font-size: 0.93rem;
}

.notice svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--pending);
}

.notice p {
  margin: 0;
}

.notice-ok {
  background: var(--verified-soft);
}

.notice-ok svg {
  color: var(--verified);
}

.notice-info {
  background: var(--surface-2);
}

.notice-info svg {
  color: var(--ink-2);
}

@media (min-width: 560px) {
  .order-bar {
    gap: 10px;
    padding: 14px;
  }

  .order-actions {
    gap: 10px;
  }

  .order-actions .btn {
    padding-inline: 18px;
  }
}

/* Phones and tablets: .k-side dissolves so the order bar is a direct grid
   item of .kitchen (its sticky containing block), delivery flows before the
   permit, and the verified order bar becomes a slim edge-to-edge bottom bar
   (~66px). A pending kitchen has nothing to press, so its bar stays in flow. */
@media (max-width: 899px) {
  .k-side {
    display: contents;
  }

  .kitchen .k-permit {
    order: 1;
  }

  .kitchen .order-bar {
    order: 2;
  }

  .order-bar {
    margin-inline: calc(-1 * var(--gutter));
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius) var(--radius) 0 0;
    border-inline: 0;
    border-bottom: 0;
  }

  .order-bar:not(.is-pending) h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .order-bar.is-pending {
    position: static;
    margin-inline: 0;
    padding: 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
  }
}

/* Desktop: the whole right column belongs to the sticky side rail (order bar
   + delivery), so it has nothing to slide over. */
@media (min-width: 900px) {
  .kitchen {
    grid-template-columns: 1.3fr 0.9fr;
    grid-template-areas:
      "back back"
      "head side"
      "menu side"
      "prices side"
      "permit side";
    align-items: start;
  }

  .kitchen .back-link {
    grid-area: back;
  }

  .kitchen .k-head {
    grid-area: head;
  }

  .kitchen .k-menu {
    grid-area: menu;
  }

  .kitchen .k-prices {
    grid-area: prices;
  }

  .kitchen .k-permit {
    grid-area: permit;
  }

  .kitchen .k-side {
    grid-area: side;
    position: sticky;
    top: calc(var(--header-h) + 16px);
    display: grid;
    gap: 18px;
  }

  .kitchen .order-bar {
    position: static;
  }
}

/* ---------- 11. Alerts panel --------------------------------------------- */
.alerts {
  --focus: var(--on-brand-accent);
  margin-top: 40px;
  color: var(--on-brand);
  background:
    radial-gradient(70% 80% at 0% 0%, rgb(60 140 90 / 0.22), transparent 60%),
    linear-gradient(140deg, var(--brand), var(--brand-3));
}

.alerts-inner {
  display: grid;
  gap: 24px;
  padding-block: clamp(36px, 5vw, 64px);
}

.alerts h2 {
  color: var(--on-brand);
  margin-bottom: 10px;
}

.alerts .eyebrow {
  color: var(--on-brand-accent);
  margin-bottom: 8px;
}

.alerts p {
  color: var(--on-brand-muted);
}

.alerts-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius);
  background: rgb(0 0 0 / 0.18);
  border: 1px solid var(--brand-line);
}

.alerts-form .field > label {
  color: var(--on-brand-muted);
}

.alerts-form input[type="email"] {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-field-line);
  background: var(--brand-field);
  color: var(--on-brand);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.alerts-form .fine {
  margin: -4px 0 0;
  font-size: 0.86rem;
}

.alerts-form input[type="email"]::placeholder {
  color: var(--on-brand-muted);
}

.alerts-form input[type="email"]:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--on-brand-accent);
  box-shadow: 0 0 0 4px rgb(250 210 154 / 0.28);
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 44px;
  cursor: pointer;
  color: var(--on-brand-muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.check input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.check input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.alerts .check p,
.check span {
  color: inherit;
  margin: 0;
}

.form-status,
.alerts .form-status {
  margin: 0;
  font-weight: 600;
  color: var(--on-brand);
  min-height: 1.4em;
}

.form-status.is-error {
  color: #ffc4c4;
}

.form-status.is-ok {
  color: #a6e6c0;
}

.alerts-saved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.alerts .btn-ghost {
  color: var(--on-brand);
  border-color: var(--brand-line);
}

.alerts .btn-ghost:hover {
  background: var(--brand-field);
}

@media (min-width: 820px) {
  .alerts-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
  }
}

/* ---------- 12. Footer --------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 0.93rem;
}

.footer-inner {
  display: grid;
  gap: 20px;
  padding-block: 36px 28px;
}

.footer-brand {
  display: grid;
  gap: 8px;
}

.footer-brand .brand {
  min-height: 44px;
}

.footer-brand p {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
}

.footer-note,
.footer-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (min-width: 720px) {
  .footer-inner {
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
      "brand nav"
      "note note"
      "copy copy";
  }

  .footer-brand {
    grid-area: brand;
  }

  .footer-nav {
    grid-area: nav;
    justify-self: end;
  }

  .footer-note {
    grid-area: note;
  }

  .footer-copy {
    grid-area: copy;
  }
}

/* ---------- 13. Bottom sheet (iOS install walkthrough) ------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: end;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgb(10 22 15 / 0.55);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  cursor: default;
}

.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  color: var(--ink);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-out);
  max-height: 90dvh;
  overflow: auto;
}

.sheet.is-open .sheet-backdrop {
  opacity: 1;
}

.sheet.is-open .sheet-panel {
  transform: none;
}

.sheet-handle {
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 3px;
  background: var(--line-strong);
}

.sheet-panel h2 {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.sheet-panel > p {
  color: var(--muted);
}

.steps {
  margin: 8px 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 10px;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}

.steps .share-glyph {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-inline: 2px;
}

/* ---------- 14. Static pages (prose) ------------------------------------- */
.page-hero {
  --focus: var(--on-brand-accent);
  color: var(--on-brand);
  background:
    radial-gradient(80% 80% at 100% 0%, rgb(60 140 90 / 0.22), transparent 60%),
    linear-gradient(160deg, var(--brand-2), var(--brand) 60%, var(--brand-3));
}

/* Standalone pages read as one centred column: the hero copy and the prose
   share the same 70ch measure (the hero adds the gutters because .wrap pads). */
.page-hero-inner {
  display: grid;
  gap: 12px;
  padding-block: clamp(36px, 5vw, 64px);
  max-width: calc(70ch + 2 * var(--gutter));
}

.page-hero h1 {
  color: var(--on-brand);
  margin: 0;
  max-width: 22ch;
  font-variation-settings: "opsz" 144;
}

.page-hero .lede {
  margin: 0;
  color: var(--on-brand-muted);
  max-width: 60ch;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
}

.page-hero .eyebrow {
  color: var(--on-brand-accent);
}

.prose {
  max-width: 70ch;
  margin-inline: auto;
  padding-block: 32px 48px;
}

.prose h2 {
  margin-top: 1.6em;
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: 1.4em;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

.prose li {
  margin-bottom: 0.4em;
}

.prose a:not(.btn) {
  color: var(--accent-ink);
  font-weight: 700;
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}

.prose a:not(.btn):hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

.prose strong {
  color: var(--ink);
}

.callout {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  margin: 18px 0;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* A margin note, not a banner: the amber preview bar already sits above. */
.callout-draft {
  background: transparent;
  border-left: 3px solid var(--pending);
  border-radius: 0;
  padding: 6px 14px;
  font-weight: 500;
  font-size: 0.93rem;
  color: var(--ink-2);
}

.callout-draft p {
  color: inherit;
}

.fact-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 12px;
}

.fact-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  margin: 0;
}

.fact-list .num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.fact-list h3 {
  margin: 4px 0 4px;
  font-size: 1.1rem;
}

.fact-list p {
  margin: 0;
}

.contact-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.contact-card .num-big {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.pitch-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: 22px 0;
}

.pitch-card {
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}

.pitch-card h3 {
  margin: 10px 0 6px;
  font-size: 1.15rem;
}

.pitch-card p {
  margin: 0;
}

.pitch-card .glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.pitch-card .glyph svg {
  width: 22px;
  height: 22px;
}

.contact-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  margin: 18px 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--field-line);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.contact-form .form-status {
  color: var(--ink);
}

.contact-form .form-status.is-ok {
  color: var(--verified);
}

.contact-form .form-status.is-error {
  color: var(--danger);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 8px;
  list-style: none;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.toc a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.notfound {
  text-align: center;
  padding-block: 64px 80px;
}

.notfound .dabba-tile {
  /* The tile's colour reads --hue, which cards and kitchen headers set; the
     404 tile has neither parent, so give it the saffron default here. */
  --hue: 30;
  margin: 0 auto 20px;
}

.notfound .page-actions {
  justify-content: center;
}

/* ---------- 15. Status toast --------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  max-width: min(92vw, 360px);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow-2);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}

.toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ---------- 16. Motion --------------------------------------------------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* Every entrance uses `backwards`: identical on screen, but the finished
   keyframe releases `transform` so hover and tap states can run afterwards. */
.hero-inner > * {
  animation: rise var(--dur-3) var(--ease-out) backwards;
}

.hero-inner > :nth-child(2) {
  animation-delay: 70ms;
}

.hero-inner > :nth-child(3) {
  animation-delay: 140ms;
}

.hero-inner > :nth-child(4) {
  animation-delay: 210ms;
}

.filters {
  animation: rise var(--dur-3) var(--ease-out) backwards;
  animation-delay: 200ms;
}

.page-hero-inner > * {
  animation: rise var(--dur-3) var(--ease-out) backwards;
}

.page-hero-inner > :nth-child(2) {
  animation-delay: 70ms;
}

.page-hero-inner > :nth-child(3) {
  animation-delay: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .card:active,
  .card:hover .dabba-tile,
  .btn:hover,
  .btn:active,
  .icon-btn:hover,
  .icon-btn:active,
  .chip-group label:hover,
  .chip-group label:active,
  .tab:active,
  .brand:hover .logo {
    transform: none;
  }

  .skel {
    animation: none;
    background: var(--surface-2);
  }
}