/* KĀRYA SARAP — one stylesheet, no build step, no external assets.
   Monochrome restraint, hairline rules, one accent. Mobile-first.
   No inline styles anywhere: the CSP forbids them. Dynamic values arrive
   as custom properties set from JS (--p on the progress bar). */

/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light dark;

  --paper: #f7f1e4;
  --paper-2: #fffbf2;
  --sunk: #ede3d0;
  --ink: #241f1b;
  --ink-2: #453e39;
  /* --ink-3 carries every piece of small muted copy: kickers, field labels,
     hints, card meta, the unselected nav. At the previous #7c746c it measured
     4.33:1 on --paper and 3.94:1 on --sunk — under WCAG AA for normal text,
     and this text is all below 1rem. Darkened until the worst pairing
     (--sunk) clears 4.5:1; it now measures 5.33 / 4.84 / 5.65 against
     --paper / --sunk / --paper-2. The dark theme's #8e867d already passed. */
  --ink-3: #6d665f;
  --rule: #ddd2bd;
  --rule-2: #8f887e;
  --accent: #a4342a;
  --accent-ink: #ffffff;
  --accent-soft: #f2e2d8;

  /* Kitchen accents. Copper is metal and focus, basil is success, saffron
     is heat and progress. Named for what they are, not where used. */
  --copper: #a9682c;
  --herb: #5c7f42;
  --saffron: #c8871a;

  --shell: 68rem;
  --measure: 34rem;
  --radius: 12px;
  --tap: 2.75rem;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step: 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1512;
    --paper-2: #221b17;
    --sunk: #14100e;
    --ink: #f2e8d8;
    --ink-2: #cac3ba;
    --ink-3: #8e867d;
    --rule: #332b25;
    --rule-2: #6b635c;
    --accent: #e07a68;
    --accent-ink: #17120f;
    --accent-soft: #2e1d18;
    --copper: #d69a5c;
    --herb: #93b473;
    --saffron: #efc069;
  }
}

/* ------------------------------------------------------------------- reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

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

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The blanket rule above only shortens the indeterminate bar's animation;
     where it lands then depends on fill-mode, which is not a guarantee worth
     relying on. Cancel it outright and pin the bar to a static third.
     JS-driven smooth scrolling is handled in app.js — a media query cannot
     reach scrollIntoView({ behavior: 'smooth' }). */
  .progress--indeterminate .progress__fill {
    animation: none !important;
    transform: scaleX(0.3);
  }
}

/* ------------------------------------------------------------------ layout */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
  .shell {
    padding-inline: 2.5rem;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  text-decoration: none;
}

.skip:focus {
  left: 0;
}

/* --------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}

.wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  margin-right: auto;
}

.wordmark__studio {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.wordmark__product {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  gap: 1.1rem;
  order: 3;
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 0.65rem;
  overflow-x: auto;
}

.nav a {
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-block: 0.35rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

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

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

.lang {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2px;
}

.lang button {
  background: none;
  border: 0;
  border-radius: 1px;
  /* Full tap target: this is the one control every pilot user hunts for. */
  min-height: var(--tap);
  padding: 0.35rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
}

.lang button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

@media (min-width: 48rem) {
  .nav {
    order: 0;
    width: auto;
    border-top: 0;
    padding-top: 0;
  }
}

/* ----------------------------------------------------------------- banner */

.banner {
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
}

.banner[hidden] {
  display: none;
}

.banner__inner {
  padding-block: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.banner__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  align-self: center;
  flex: none;
}

.banner__title {
  font-weight: 600;
  font-size: 0.9rem;
}

.banner__body {
  font-size: 0.9rem;
  color: var(--ink-2);
  flex: 1 1 18rem;
}

/* ------------------------------------------------------------- key gate */

/* Sits directly under the status banner, above the page content. It is a
   panel rather than a full-screen block because the How-It-Works page has to
   stay readable to someone who has not been given a key yet. */

.gate {
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
}

.gate__inner {
  padding-block: 1.75rem 2rem;
  max-width: var(--shell);
}

.gate__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
}

.gate__body {
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: var(--measure);
}

.gate__form {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.75rem;
  max-width: var(--measure);
}

@media (min-width: 40rem) {
  .gate__form {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  /* The label spans both columns so the field and its button sit on one row. */
  .gate__form label {
    grid-column: 1 / -1;
    margin-bottom: -0.35rem;
  }
}

.gate__privacy {
  margin-top: 0.9rem;
  max-width: var(--measure);
}

/* ------------------------------------------------------------------- type */

.kicker {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 8.5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.lede {
  margin-top: 1.25rem;
  font-size: 1.06rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--ink-3);
}

.small {
  font-size: 0.85rem;
}

.hero {
  padding-block: 3.5rem 2.5rem;
}

.section {
  padding-block: 3rem;
  border-top: 1px solid var(--rule);
}

@media (min-width: 48rem) {
  .hero {
    padding-block: 6rem 4rem;
  }
  .section {
    padding-block: 4.5rem;
  }
}

/* ------------------------------------------------------------- numbered  */

.steps {
  display: grid;
  gap: 2.75rem;
}

@media (min-width: 60rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.step__no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  border-top: 1px solid var(--rule-2);
  padding-top: 0.65rem;
  display: block;
}

.step__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  margin-top: 0.5rem;
}

.step__body {
  margin-top: 0.65rem;
  color: var(--ink-2);
  max-width: var(--measure);
}

.step {
  display: flex;
  flex-direction: column;
}

/* Bottom-align the diagrams so the three columns read as one grid even when
   the body copy runs to different lengths. */
.figure {
  margin-top: auto;
  padding-top: 1.5rem;
}

.figure__frame {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 1.25rem;
  color: var(--ink-3);
}

.figure svg {
  width: 100%;
  height: auto;
  color: var(--ink);
}

.figure svg .accent {
  fill: var(--accent);
  stroke: var(--accent);
}

.figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.steps-note {
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ tabs */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.tab {
  background: none;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  min-height: var(--tap);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-2);
}

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

.tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.panel {
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
  display: grid;
  gap: 1.75rem;
}

.panel[hidden] {
  display: none;
}

@media (min-width: 52rem) {
  .panel {
    grid-template-columns: 1.35fr 1fr;
    gap: 3rem;
  }
}

.panel__blurb {
  font-size: 1.06rem;
  color: var(--ink-2);
}

.panel__note {
  margin-top: 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: 0.94rem;
}

.gets__label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}

.gets li {
  border-top: 1px solid var(--rule);
  padding-block: 0.65rem;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------- faq */

.faq {
  display: grid;
  gap: 0;
  margin-top: 1.75rem;
  max-width: 48rem;
}

.faq__item {
  border-top: 1px solid var(--rule);
  padding-block: 1.1rem;
}

.faq__q {
  font-weight: 600;
  font-size: 0.98rem;
}

.faq__a {
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

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

.btn--ghost {
  background: none;
  color: var(--ink);
  border-color: var(--rule-2);
}

.btn--ghost:hover {
  background: var(--sunk);
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn--wide {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn--small {
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  align-items: center;
}

/* ----------------------------------------------------------------- forms */

fieldset.field {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

legend.field__label {
  display: block;
  padding: 0;
}

.field {
  display: block;
  margin-bottom: 2.25rem;
}

.field__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.75rem;
}

.field__hint {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-3);
  max-width: var(--measure);
}

.input,
.select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.65rem 0.85rem;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  color: var(--ink);
}

.input::placeholder {
  color: var(--ink-3);
}

.select {
  appearance: none;
}

.row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .row--2 {
    grid-template-columns: 1fr 14rem;
    align-items: end;
  }
}

/* chips ------------------------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-2);
  cursor: pointer;
}

.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

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

/* option list (dishes, presets) ------------------------------------------ */

.options {
  border-top: 1px solid var(--rule);
}

.options--scroll {
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--rule);
  -webkit-overflow-scrolling: touch;
}

.option {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--rule);
}

.options--scroll .option:last-child {
  border-bottom: 0;
}

.option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.option__body {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem 0.85rem 2rem;
  cursor: pointer;
  min-height: var(--tap);
}

.option__body::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 1.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
}

.option input:checked + .option__body {
  background: var(--sunk);
}

.option input:checked + .option__body::before {
  background: var(--accent);
  border-color: var(--accent);
}

.option input:focus-visible + .option__body {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.option__name {
  font-size: 1rem;
}

.option__meta {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

.option__desc {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-3);
  margin-top: 0.15rem;
}

.empty {
  padding: 1.25rem 0.9rem;
  color: var(--ink-3);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--rule);
}

/* notice ----------------------------------------------------------------- */

.notice {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--paper-2);
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
}

.notice__title {
  font-weight: 600;
  font-size: 0.95rem;
}

.notice__body {
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-size: 0.92rem;
}

.notice[hidden],
[hidden] {
  display: none !important;
}

.error {
  color: var(--accent);
  font-size: 0.92rem;
  margin-top: 0.85rem;
}

/* ---------------------------------------------------------------- progress */

.job {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 2.5rem;
}

.job__state {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.job__elapsed {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.progress {
  margin-top: 0.85rem;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: var(--accent);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform var(--step);
}

.progress--indeterminate .progress__fill {
  transform: scaleX(0.3);
  animation: slide 1.6s ease-in-out infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-100%) scaleX(0.3);
  }
  100% {
    transform: translateX(333%) scaleX(0.3);
  }
}

/* ---------------------------------------------------------------- gallery */

.grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 44rem) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

@media (min-width: 68rem) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  border-top: 1px solid var(--rule-2);
  padding-top: 1rem;
}

.card__thumb {
  background: var(--sunk);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.card__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.2;
}

.card__date {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.card__meta {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 0.25rem;
}

.downloads {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.4rem;
}

.downloads a {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  min-height: var(--tap);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.downloads a:hover {
  border-color: var(--ink-3);
  color: var(--ink);
}

.downloads a span:last-child {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.card__actions {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding-block: 2.5rem 3.5rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.8rem;
  color: var(--ink-3);
}

.footer__tagline {
  font-family: var(--serif);
  font-style: italic;
}

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

.noscript {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  background: var(--sunk);
  font-size: 0.9rem;
}

/* ==========================================================================
   WARM BISTRO — the playful layer
   ==========================================================================

   Added on top of the layout above rather than woven through it, so the
   structural CSS stays reviewable and this can be deleted in one block if the
   brand goes back to austere.

   The brief was "interactive and playful, themes from Ratatouille". This takes
   the GENRE and none of the film: a working kitchen's warmth — copper, steam,
   a chalk-ruled menu board, herbs on a finished plate. No character, no logo,
   no quoted line, nothing from Disney or Pixar. Anything that read as official
   merchandise would be a legal problem, not a compliment.

   Every animation below is genuinely switched off under prefers-reduced-motion
   at the end of this file — animation:none with an explicit resting state, not
   a 0.01ms duration that leaves position at the mercy of fill-mode.
   ========================================================================== */

/* Faint warm wash, like light off a wall. Two gradients, no image, no request. */
body {
  background-image:
    radial-gradient(58rem 38rem at 12% -12%, var(--accent-soft), transparent 62%),
    radial-gradient(46rem 32rem at 102% -4%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 58%);
  background-attachment: fixed;
}

/* Focus in copper — warmer than the accent and never mistaken for selection. */
:focus-visible { outline-color: var(--copper); }

/* Cards sit on a counter and get nudged when touched. Alternating tilt keeps
   a row from looking mechanically identical. */
.step, .panel, .figure, .faq__item {
  transition: transform var(--step), box-shadow var(--step);
}
@media (hover: hover) {
  .step:hover, .panel:hover, .figure:hover { transform: translateY(-3px) rotate(-0.35deg); }
  .step:nth-child(even):hover, .panel:nth-child(even):hover { transform: translateY(-3px) rotate(0.35deg); }
}

/* The dish list as a chalk-ruled menu board. */
.options {
  background-color: var(--sunk);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 var(--tap), var(--rule) var(--tap),
    var(--rule) calc(var(--tap) + 1px));
}

/* Heat moving under the generate button while a job runs. */
.btn.is-simmering {
  background-image: linear-gradient(100deg,
    var(--accent) 0%, var(--saffron) 44%, var(--accent) 88%);
  background-size: 260% 100%;
  animation: sarap-simmer 2.6s ease-in-out infinite;
}
@keyframes sarap-simmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Two wisps of steam off something working. */
.is-steaming { position: relative; }
.is-steaming::before, .is-steaming::after {
  content: ""; position: absolute; top: -8px;
  width: 6px; height: 22px; border-radius: 50%;
  background: linear-gradient(to top, transparent,
    color-mix(in srgb, var(--ink) 20%, transparent));
  filter: blur(3px); pointer-events: none;
}
.is-steaming::before { right: 26px; animation: sarap-wisp 2.8s ease-in-out infinite; }
.is-steaming::after  { right: 42px; animation: sarap-wisp 2.8s ease-in-out 0.9s infinite; }
@keyframes sarap-wisp {
  0%   { opacity: 0; transform: translateY(6px) scaleX(1); }
  35%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-26px) scaleX(1.9); }
}

/* A plate landing. Under a second, in basil, then gone. */
.just-plated { animation: sarap-plated 0.85s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes sarap-plated {
  0%   { transform: scale(0.975); box-shadow: 0 0 0 0 var(--herb); }
  45%  { transform: scale(1.012);
         box-shadow: 0 0 0 7px color-mix(in srgb, var(--herb) 26%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* Transient message. */
.sarap-toast {
  position: fixed; top: 1rem; left: 50%; z-index: 60;
  transform: translateX(-50%);
  padding: 0.7rem 1.1rem; max-width: min(28rem, calc(100% - 2rem));
  background: var(--ink); color: var(--paper);
  border-radius: 999px; font-size: 0.9rem;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  animation: sarap-toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes sarap-toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Progress reads as a pan coming up to heat, not as a loading bar. */
.progress__fill {
  background-image: linear-gradient(90deg, var(--saffron), var(--accent));
}

/* Empty gallery: a warm plate drawn in CSS. Never a sad icon. */
.figure__frame:empty::after {
  content: ""; width: 52%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--rule-2);
  background:
    radial-gradient(circle at 50% 50%, var(--accent-soft) 0 38%, transparent 39%),
    var(--paper-2);
}

/* Softer corners throughout now that --radius is 12px: pills stay pills. */
.btn, .chip, .tab { border-radius: 999px; }

/* -------------------------------------------------------------------------
   Reduced motion — genuinely off, with explicit resting states.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .step:hover, .step:nth-child(even):hover,
  .panel:hover, .panel:nth-child(even):hover,
  .figure:hover { transform: none; }

  .btn.is-simmering {
    animation: none;
    background-image: none;
    background-color: var(--accent);
  }
  .is-steaming::before, .is-steaming::after { display: none; }
  .just-plated {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--herb) 35%, transparent);
  }
  .sarap-toast { animation: none; transform: translateX(-50%); }
}

/* Hairlines are near-invisible for some users; thicken rather than recolour. */
@media (prefers-contrast: more) {
  :root { --rule: #b9ad97; --rule-2: #57514a; }
}