/*
 * Dinejot marketing site styles (single file, no JavaScript).
 * Warm Kitchen brand: cream background, ink text, paprika primary, butter accent.
 *
 * Fonts are self hosted below. Fraunces and Inter are both licensed under the
 * SIL Open Font License 1.1 (OFL). The full license for each ships alongside
 * the font files at /fonts/Fraunces-OFL.txt and /fonts/Inter-OFL.txt.
 *   Fraunces: Copyright 2018 The Fraunces Project Authors.
 *   Inter:    Copyright 2020 The Inter Project Authors.
 */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Fraunces_400Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Fraunces_600SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter_400Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter_600SemiBold.ttf") format("truetype");
}

:root {
  --cream: #faf3e7;
  --cream-2: #f3e7d2;
  --paper: #fffaf0;
  --ink: #2b1d16;
  --ink-soft: #6b5647;
  --paprika: #d9482b;
  --paprika-dark: #c13a1c;
  --butter: #f0c948;
  --line: #e6d8c1;
  --radius: 18px;
  --wrap: 1080px;
  --body-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display-font: "Fraunces", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Defensive only. Every row below is built to fit; this keeps a future
     overlong word from dragging the whole document wide on a phone. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--display-font);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.4em;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--paprika-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--paprika);
}

sup a {
  text-decoration: none;
  font-size: 0.7em;
  padding-left: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 12px 0;
  z-index: 20;
}
.skip-link:focus {
  left: 0;
}

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

/* Header */
.site-header {
  border-bottom: 1px solid var(--line);
  /* Nearly opaque: at 88% the hero headline ghosted through the sticky bar as
     the page scrolled under it. */
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(1.2) blur(6px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 12px;
}
.site-header__inner > * {
  min-width: 0;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark__dot {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-block;
  background: url("/brand-icon.svg") center / cover no-repeat;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.98rem;
  font-weight: 600;
  flex-shrink: 0;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover {
  color: var(--paprika);
}

/* Small screens: the section links would push the header wider than the
   viewport, so they collapse and Sign in carries the header on its own.
   Features and Pricing are a scroll away on the page itself, and Support
   is still linked from the footer. */
@media (max-width: 599px) {
  .site-nav__link {
    display: none;
  }
  .wordmark {
    font-size: 1.15rem;
  }
}

/* Hero */
.hero {
  background: var(--cream);
  padding: clamp(40px, 8vw, 96px) 0 clamp(32px, 5vw, 56px);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
/* The art follows the copy at every width. On a phone a full height phone
   frame ahead of the headline pushed "Continue with Google" past the fold, so
   the words and the one live action come first and the product sits just under
   them; on desktop the same order puts the frame in the right hand column. */
.hero__art {
  order: 1;
  display: flex;
  justify-content: center;
}

/* Phone frame: a bezel drawn in CSS around a plain PNG screenshot, so the
   product art costs one image and no JavaScript. The image carries its own
   width/height attributes, so the box is reserved before it loads. */
.phone {
  width: clamp(210px, 58vw, 300px);
  padding: 9px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 34px;
  box-shadow: 0 22px 50px rgba(43, 29, 22, 0.26);
}
.phone--small {
  width: clamp(180px, 50vw, 232px);
  padding: 7px;
  border-radius: 28px;
}
.phone__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  background: var(--cream);
}
.phone--small .phone__screen {
  border-radius: 21px;
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  margin-bottom: 0.2em;
}
.hero__lede {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--ink-soft);
  max-width: 40ch;
}
.hero__note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 14px;
}

/* The live action. button_to wraps the button in a form, so the form is the
   flow item and the button fills it on a phone. */
.hero__actions {
  margin-top: 28px;
}
.hero__actions form {
  margin: 0;
}
.hero__actions-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 42ch;
  margin: 12px 0 0;
}

/* Store badges: inert placeholders until the apps ship, so they are drawn as
   dashed outlines in soft ink. Nothing here looks like the solid button that
   actually does something. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.store-badges--center {
  justify-content: center;
}
.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 9px 18px;
  min-width: 168px;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);
  line-height: 1.2;
  cursor: default;
  user-select: none;
}
/* The live badge. Solid and tappable so the difference from the dashed
   "coming soon" placeholder beside it is obvious at a glance. It stays ink
   rather than paprika: "Continue with Google" is the one primary action in the
   hero, and two solid paprika targets would compete. */
a.store-badge--live {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  user-select: auto;
  transition: background 0.15s ease, transform 0.15s ease;
}
a.store-badge--live:hover {
  background: color-mix(in srgb, var(--ink) 86%, #fff);
}
a.store-badge--live:active {
  transform: translateY(1px);
}
/* The global focus ring rounds to 4px; match the badge so the ring hugs it. */
a.store-badge--live:focus-visible {
  border-radius: 12px;
}
@media (prefers-reduced-motion: reduce) {
  a.store-badge--live {
    transition: none;
  }
  a.store-badge--live:active {
    transform: none;
  }
}

.store-badge__kicker {
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}
.store-badge__name {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.15rem;
}

/* Sections */
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  text-align: center;
  margin-bottom: clamp(24px, 5vw, 48px);
}

/* Alternating bands, each opened by a hairline, so the page reads as
   distinct rooms rather than one continuous scroll. */
.features,
.pricing,
.cta {
  border-top: 1px solid var(--line);
}

.features {
  background: var(--cream-2);
  padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 9vw, 96px);
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  box-shadow: 0 1px 0 rgba(43, 29, 22, 0.03);
}
.feature__title {
  font-size: 1.4rem;
  color: var(--paprika-dark);
}
.feature p {
  color: var(--ink);
  font-size: 16.5px;
  margin-bottom: 0;
}

/* Pricing */
.pricing {
  background: var(--cream);
  padding: clamp(48px, 9vw, 96px) 0;
}
.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
/* Both cards open with a real trial badge of the same height, so the names and
   the prices sit on one line across the pair with no reserved spacer needed. */
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Top aligned, not centred: the two cards stretch to a shared height and the
     descriptions wrap to different depths, so centring slid the shorter card's
     name and price a few pixels down the page. */
  justify-content: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
.plan--feature {
  border-color: var(--paprika);
  box-shadow: 0 12px 30px rgba(217, 72, 43, 0.12);
}
.plan__badge {
  display: inline-block;
  align-self: center;
  margin: 0 0 12px;
  padding: 5px 14px;
  /* Fixed line box, so the reserved row below is exactly this tall. */
  line-height: 20px;
  height: 30px;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.plan__name {
  font-size: 1.7rem;
  color: var(--paprika-dark);
}
.plan__price {
  margin: 0 0 2px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.plan__amount {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.plan__period {
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.plan__alt {
  margin: 0 0 2px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
/* The page leads with the yearly number, so it has to say plainly that yearly
   is the cheaper way to buy. The figures are the two prices on this card:
   $4.99 every week is $259.48 a year against $39.99, and $7.99 every week is
   $415.48 against $59.99. */
.plan__save {
  margin: 0 0 14px;
  color: var(--paprika-dark);
  font-size: 0.9rem;
  font-weight: 600;
}
.plan__desc {
  color: var(--ink-soft);
  margin-bottom: 0;
}
.pricing__terms {
  max-width: 60ch;
  margin: 28px auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* CTA */
.cta {
  background: var(--cream-2);
  padding: clamp(48px, 9vw, 96px) 0;
  text-align: center;
}
.cta p {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-inline: auto;
}
.cta__art {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 5vw, 44px);
}
/* The closing shot is a crop of the day's card list rather than a whole
   screen, so it is mounted as a card. A device bezel around a landscape crop
   would read as a second phone lying on its side. */
.shot-card {
  width: min(100%, 420px);
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(43, 29, 22, 0.16);
}
.shot-card__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Legal + support pages */
.legal {
  padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 8vw, 96px);
}
.legal__inner {
  max-width: 760px;
}
.legal__title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
}
.legal__meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: -0.4em;
}
.legal h2 {
  font-size: 1.5rem;
  margin-top: 1.8em;
  color: var(--paprika-dark);
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.6em;
}
.legal__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.faq__item {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.faq__item:last-of-type {
  border-bottom: 1px solid var(--line);
}
.faq__q {
  font-size: 1.2rem;
  margin-bottom: 0.4em;
}
.faq__item p {
  color: var(--ink);
  margin-bottom: 0;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: #f4ece0;
  padding: 44px 0;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  color: #fff;
}
/* The app icon, at signature size. It used to headline the hero; a product
   screenshot does that now. */
.footer-mark {
  display: inline-flex;
  flex-shrink: 0;
}
.footer-mark .brand-mark {
  display: block;
  width: 34px;
  height: 34px;
}
.site-footer__nav {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  font-weight: 600;
  margin: -6px 0;
}
/* Comfortable thumb targets: 44px tall, gaps kept wide enough that the
   boxes never touch. */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--butter);
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: #fff;
}
.site-footer__note,
.site-footer__copy {
  margin: 0;
  color: rgba(244, 236, 224, 0.72);
  font-size: 0.9rem;
}

/* Responsive */
@media (min-width: 720px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Two lines of title on every card, wrapped or not, so the paragraphs below
     start on one level instead of stepping down card by card. */
  .feature__title {
    min-height: 2.24em;
  }
  /* Six cards in two columns leaves the lead and the tail card wide, which
     keeps every row full instead of stranding one card on its own. */
  .feature:first-child,
  .feature:last-child {
    grid-column: 1 / -1;
  }
  /* Those two span the full width and share a row with nobody, so they have no
     neighbour to line up with and keep their natural title height. */
  .feature:first-child .feature__title,
  .feature:last-child .feature__title {
    min-height: 0;
  }
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Six cards land as two clean rows of three, so nothing needs to span. */
  .feature:first-child,
  .feature:last-child {
    grid-column: auto;
  }
  /* Back in a shared row, so back to the reserved two line title. */
  .feature:first-child .feature__title,
  .feature:last-child .feature__title {
    min-height: 2.24em;
  }
}

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

/* Sign-in header link: quiet by default, a small pill on wider screens. */
.site-nav__signin {
  color: var(--paprika-dark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 720px) {
  .site-nav__signin {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
  }
  .site-nav__signin:hover {
    border-color: var(--paprika);
    color: var(--paprika);
  }
}

/* Account + sign-in page */
.account {
  padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 8vw, 96px);
}
.account__inner {
  max-width: 620px;
}
.account__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.6em;
}
.account__lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.account__fineprint {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0;
}
.account__back {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 24px;
}

.account-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin-bottom: 20px;
  box-shadow: 0 1px 0 rgba(43, 29, 22, 0.03);
}
.account-card--signin {
  text-align: center;
  padding: 34px 28px;
}
.account-card--quiet {
  background: var(--cream);
}
.account-card--empty {
  background: var(--cream-2);
}
.account-card__kicker {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.35em;
}
.account-card__name {
  font-size: 1.7rem;
  margin: 0 0 0.3em;
  color: var(--paprika-dark);
}
.account-card__plan {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.account-card__status {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.account-card__note {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 14px 0 0;
}

.account-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--cream);
}
.account-tag--plan {
  color: var(--paprika-dark);
  border-color: var(--paprika);
  background: color-mix(in srgb, var(--paprika) 8%, var(--paper));
}
.account-tag--claimed {
  color: #3f6b2f;
  border-color: #cfe0bf;
  background: #eef5e6;
}

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.member:first-child {
  border-top: none;
}
.member__name {
  font-weight: 600;
}

.account-actions {
  margin-top: 8px;
}

/* Buttons */
.btn-signin,
.btn-signout,
.btn-google {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 13px 22px;
}
.btn-signin {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  margin: 8px 0 22px;
  font-size: 1.05rem;
  background: var(--paprika);
  border-color: var(--paprika);
  color: #fff;
}
.btn-signin:hover {
  background: var(--paprika-dark);
}
.btn-signout {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.btn-signout:hover {
  border-color: var(--paprika);
  color: var(--paprika);
}
/* The landing page's primary call to action: the only solid, tappable thing in
   the hero, against dashed placeholder badges. */
.btn-google {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  min-height: 50px;
  font-size: 1.05rem;
  background: var(--paprika);
  border-color: var(--paprika);
  color: #fff;
  box-shadow: 0 10px 24px rgba(193, 58, 28, 0.22);
}
.btn-google:hover {
  background: var(--paprika-dark);
}
/* button_to wraps its button in a form; keep that form inline with no gap. */
.account form,
.account-card--signin form {
  margin: 0;
}

/* ==========================================================================
   Admin dish catalog: the reusable dish card + grid, and the per-dish edit
   form. Built on the Warm Kitchen tokens (:root above). The card carries no
   admin-only styling so the future public catalog can reuse it verbatim.
   ========================================================================== */

/* One-line note under the index header: edits are live DB changes a reseed can
   overwrite. */
.admin-note {
  margin: 0 0 20px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--butter) 16%, var(--paper));
  border: 1px solid var(--line);
  border-left: 4px solid var(--butter);
  border-radius: 10px;
}

/* Responsive card grid: a clean 3-4 columns on desktop, collapsing on phones. */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin: 8px 0 24px;
}

/* The reusable dish card. As an <a> it lifts on hover; as a <div> it is static. */
.dish-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.dish-card:hover {
  transform: translateY(-2px);
  border-color: var(--paprika);
  box-shadow: 0 12px 28px rgba(43, 29, 22, 0.12);
}
a.dish-card:focus-visible {
  outline: 3px solid var(--paprika);
  outline-offset: 2px;
}

.dish-card__photo {
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Butter gradient fallback behind the cuisine emoji, mirroring the mobile app. */
  background: linear-gradient(135deg, var(--butter), color-mix(in srgb, var(--butter) 35%, var(--paper)));
}
.dish-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dish-card__emoji {
  font-size: 3rem;
  line-height: 1;
}

.dish-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}
.dish-card__name {
  font-family: var(--display-font);
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0;
}
.dish-card__cuisine {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.dish-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dish-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--ink);
  white-space: nowrap;
}

.dish-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dish-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.dish-tag--diet { background: color-mix(in srgb, var(--butter) 24%, var(--paper)); }
.dish-tag--allergen { background: color-mix(in srgb, var(--paprika) 12%, var(--paper)); color: var(--paprika-dark); }
.dish-tag--health { background: var(--cream-2); }

.dish-card__season {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--paprika-dark);
  font-weight: 600;
}

/* Disabled pager buttons (first/last page). */
.pager .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* --- Per-dish edit form --------------------------------------------------- */

.dish-form {
  max-width: 760px;
}
.form-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 18px 20px 22px;
  margin: 0 0 22px;
}
.form-group > legend {
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0 8px;
  color: var(--ink);
}

.field {
  display: block;
  margin: 0 0 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.field input[type="text"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-weight: 400;
  font-size: 0.95rem;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
.field textarea {
  resize: vertical;
  line-height: 1.5;
}
.field--check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: var(--ink);
}
.field--check input { margin: 0; }

/* Checkbox vocab groups: an inline, wrapping set of "check + label" pairs. */
.vocab-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.vocab-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--ink);
  font-size: 0.9rem;
}
.vocab-check label { margin: 0; cursor: pointer; }

/* The SAFETY panel: visually distinct, red-accented, flagged safety-critical. */
.safety-panel {
  border: 2px solid var(--paprika);
  background: color-mix(in srgb, var(--paprika) 6%, var(--paper));
}
.safety-panel > legend {
  color: var(--paprika-dark);
}
.safety-panel__note {
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--paprika-dark);
}

.form-errors {
  border: 1px solid var(--paprika);
  background: color-mix(in srgb, var(--paprika) 10%, var(--paper));
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 22px;
  color: var(--paprika-dark);
}
.form-errors__title { margin: 0 0 8px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 20px; }

.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.admin-back {
  color: var(--paprika);
  font-weight: 600;
  text-decoration: none;
}
.admin-back:hover { text-decoration: underline; }