/* ── Hộ chiếu bếp — screen styles, from the "Recipe App - Passport" mockup.
   The mockup styles everything inline; this is that same design lifted into
   classes. Anything that depends on the chosen cuisine (accent, tint, deep,
   band, gradients) stays inline in the templates, because it is data.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --font-heading: "Baloo 2", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif;
  --line: rgba(32, 30, 29, .14);
  --pad: 20px;
}

body {
  margin: 0;
  background: #e7e2d8;
  display: flex;
  justify-content: center;
  padding: 28px 0;
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; }

/* The phone. Cuisine colours arrive as --accent/--tint/--deep/--band. */
.ph {
  width: 390px;
  height: min(844px, calc(100vh - 56px));
  border-radius: 44px;
  overflow: hidden;
  background: var(--color-bg);
  box-shadow: 0 20px 50px rgba(46, 43, 37, .24);
  position: relative;
  flex: none;
}

.sc { height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.sc::-webkit-scrollbar { display: none; }

@keyframes slideIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scr { animation: slideIn .26s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .scr { animation: none; } }

.screen-tint { background: var(--tint); }
/* Room for the floating tab bar / docked action bar to sit over the scroll. */
.has-tabbar { padding-bottom: 104px; }
.has-dock { padding-bottom: 110px; }

/* Cuisine-pattern stand-in shown wherever a photo has not been generated yet.
   The pattern fills the whole slot at low opacity so an image-less card still
   reads as a deliberate surface rather than an empty box. */
.img-fallback { width: 100%; height: 100%; overflow: hidden; }
.img-fallback > span { display: block; width: 100%; height: 100%; opacity: .16; }

.eyebrow {
  font: 700 11.5px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow-light { color: rgba(255, 255, 255, .85); }

.step-eyebrow {
  font: 700 11.5px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
  margin: 0;
}

.page-head { padding: 26px var(--pad) 0; }
.page-title { margin: 6px 0 2px; font-size: 29px; line-height: 1.08; }
.page-lede { font: 400 14px/1.5 var(--font-body); opacity: .6; margin: 0; }

.block { padding: 18px var(--pad) 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.block-head h2 { margin: 0; font-size: 18px; }
.block-title { margin: 0 0 12px; font-size: 18px; }
.block-meta { font: 600 11px var(--font-body); opacity: .5; white-space: nowrap; }
.block-link { border: 0; background: none; font: 700 12px var(--font-body); text-decoration: none; white-space: nowrap; }

/* ── Welcome ───────────────────────────────────────────────────────────── */

.screen-welcome { height: 100%; position: relative; }
.welcome-image { position: absolute; left: 0; right: 0; top: 0; bottom: 56%; }
.welcome-veil { position: absolute; left: 0; right: 0; top: 26%; bottom: 0; pointer-events: none; }
.welcome-copy { position: absolute; left: 24px; right: 24px; bottom: 34px; }
.welcome-title { margin: 8px 0 0; color: #fff; font-size: 40px; line-height: 1.02; }
.welcome-lede { color: rgba(255, 255, 255, .82); font: 400 15px/1.5 var(--font-body); margin: 12px 0 20px; }

.btn-start {
  display: block;
  border-radius: 999px;
  padding: 17px;
  font: 600 17px var(--font-heading);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn-quiet {
  display: block;
  margin-top: 10px;
  padding: 8px;
  font: 700 12.5px var(--font-body);
  color: rgba(255, 255, 255, .7);
  text-align: center;
  text-decoration: none;
}
.btn-quiet:hover { color: #fff; }

/* ── Cuisine picker ────────────────────────────────────────────────────── */

.country-grid {
  padding: 18px var(--pad) 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.country-card {
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The cuisine's own photo, kept faint on purpose: it should say which kitchen
   this is at a glance without competing with the name sitting on top of it. */
.country-card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  opacity: .16;
  /* White wash under the photo so the text keeps its contrast on light images. */
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .35);
}
.country-card > *:not(.country-card-bg) { position: relative; }
.country-code {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  /* Sized for a flag emoji; the two-letter code is only the fallback. */
  font: 700 22px var(--font-body);
  letter-spacing: .04em;
  color: #fff;
}
.country-name { display: block; font: 700 15px var(--font-body); }
.country-sub { display: block; font: 600 11.5px var(--font-body); opacity: .5; }

/* ── Chips (pantry, preferences) ───────────────────────────────────────── */

.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--pad); }
.block .chip-wrap, .pref-card .chip-wrap { padding: 0; }
.page-head + .chip-wrap { padding-top: 14px; }
.chip-wrap form { margin: 0; display: contents; }

.chip {
  cursor: pointer;
  white-space: nowrap;
  font: 700 12.5px var(--font-body);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  background: #fff;
  color: var(--color-text);
  display: flex; align-items: center; gap: 8px;
}
.chip-dot { padding: 7px 14px 7px 8px; }
.chip-bullet { width: 14px; height: 14px; border-radius: 999px; background: var(--accent); }
.chip.is-on { background: var(--accent); color: #fff; border-color: transparent; }
.chip.is-on .chip-bullet { background: rgba(255, 255, 255, .55); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero-home { height: 326px; }
.hero-detail { height: 300px; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none; }

.hero-bar {
  position: absolute; top: 18px; left: var(--pad); right: var(--pad);
  display: flex; justify-content: space-between; align-items: center;
}
.hero-bar form { margin: 0; }
.hero-brand {
  font: 700 12px var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  opacity: .9;
  pointer-events: none;
}
.hero-round {
  border: 0;
  background: rgba(255, 255, 255, .18);
  width: 36px; height: 36px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.hero-caption { position: absolute; left: var(--pad); right: var(--pad); bottom: 18px; pointer-events: none; }
.hero-title {
  margin: 5px 0 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(32, 30, 29, .5);
}
.hero-title-sm { font-size: 30px; line-height: 1.05; text-shadow: 0 2px 16px rgba(32, 30, 29, .5); }
.pattern-strip { height: 10px; }
/* The recipe and cuisine heroes fade into the page colour at their foot, so the
   caption sits on cream rather than on the photo. White text there is
   unreadable whatever the photo underneath, and the halo that propped it up
   only smeared it; ink is what the rest of the page uses on this ground. */
.hero-caption-ink .hero-title { color: var(--color-text); text-shadow: none; }
.hero-caption-ink .eyebrow { color: rgba(32, 30, 29, .6); }


/* ── Home shortcuts ────────────────────────────────────────────────────── */

.shortcut-row { padding: 14px var(--pad) 0; display: flex; gap: 8px; }
.shortcut {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 11px 14px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
.shortcut-label {
  display: block;
  font: 600 10.5px var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
}
.shortcut-value {
  display: block;
  font: 700 14px var(--font-body);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Dish rows ─────────────────────────────────────────────────────────── */

.dish-list { display: flex; flex-direction: column; gap: 12px; }
.dish-row {
  display: flex;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
}
.dish-row form { margin: 0; display: flex; align-items: center; }
.dish-thumb { width: 96px; height: 96px; flex: none; border-radius: 12px; overflow: hidden; display: block; }
.dish-thumb-sm { width: 86px; height: 86px; }
.dish-thumb-xs { width: 82px; height: 82px; }
.dish-row-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  color: inherit; text-decoration: none;
}
.dish-row-title { font: 700 15px/1.2 var(--font-body); }
.dish-row-sub { font: 600 11.5px var(--font-body); opacity: .5; }
.dish-row-hit { font: 700 11.5px var(--font-body); }
.dish-row-chevron { align-self: center; padding-right: 4px; opacity: .35; }
.dish-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.dish-tag { font: 600 11px var(--font-body); padding: 4px 9px; border-radius: 999px; }
/* Waiting time is a caveat, not a property of the cooking — outlined rather
   than filled so it reads as secondary to the time and difficulty chips. */
.dish-tag-wait { background: transparent; box-shadow: inset 0 0 0 1px rgba(32,30,29,.18); opacity: .72; }

/* ── Browse as a photo grid ────────────────────────────────────────────── */

/* The list carries name, alt name, time and difficulty; this layout drops all
   of it but the name so the photograph is what sells the dish. Two columns is
   what makes the picture big enough on a phone to be worth looking at. */
.view-switch { margin: 0; margin-left: auto; display: flex; }
.view-toggle {
  border: 0; background: none; cursor: pointer; padding: 4px;
  color: inherit; opacity: .45; display: flex;
}
.view-toggle[aria-pressed="true"] { opacity: .9; }

.dish-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dish-tile {
  display: flex; flex-direction: column; gap: 7px;
  color: inherit; text-decoration: none;
}
.dish-tile-img {
  position: relative; display: block;
  aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Smaller than .dish-tag: at two columns the card is about half the width the
   list row had, and a full-size chip covered the food. */
.dish-tile-time {
  position: absolute; left: 6px; bottom: 6px;
  font: 600 10px var(--font-body); padding: 3px 7px; border-radius: 999px;
  background: rgba(32,30,29,.62); color: #fff;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.dish-tile-title {
  font: 700 13px/1.25 var(--font-body);
  /* Two lines then ellipsis: a third line pushes the next row of photos out of
     step and the grid stops reading as a grid. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.row-remove { align-self: center; border: 0; background: none; cursor: pointer; padding: 8px; opacity: .4; color: inherit; }
.row-remove:hover { opacity: .9; }

/* ── Detail ────────────────────────────────────────────────────────────── */

.stat-row { padding: 16px var(--pad) 0; display: flex; gap: 8px; }
.stat {
  flex: 1;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-value { display: block; font: 700 15px var(--font-body); }
.stat-label { display: block; font: 600 10.5px var(--font-body); opacity: .5; }
/* Hangs off the cooking-time stat: the three boxes are equal thirds and a
   conditional fourth would squeeze them on a phone. */
.stat-note { display: block; margin-top: 2px; font: 600 10px var(--font-body); opacity: .6; }

.serv-bar {
  margin: 18px var(--pad) 0;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 999px;
  padding: 7px 8px 7px 16px;
}
.serv-title { display: block; font: 700 13px var(--font-body); white-space: nowrap; }
.serv-sub { display: block; font: 600 11px var(--font-body); opacity: .55; }
.serv-btns { display: flex; align-items: center; gap: 10px; }
.serv-count { font: 700 16px var(--font-body); min-width: 16px; text-align: center; }

.step-btn {
  width: 34px; height: 34px;
  border-radius: 999px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.step-btn-minus { border: 1px solid rgba(32, 30, 29, .15); background: #fff; }
.step-btn-plus { border: 0; background: var(--accent); }

.ing-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px;
}
.ing { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ing-img {
  width: 100%; aspect-ratio: 1;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.ing-name { font: 700 12.5px/1.2 var(--font-body); }
.ing-amount { font: 700 11.5px var(--font-body); }

.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step-item {
  display: flex; gap: 12px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  width: 26px; height: 26px; flex: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-body);
  color: #fff;
}
.step-text { font: 400 14px/1.45 var(--font-body); }

/* Appliance shortcuts: same card as a step, but flagged with a left border in
   the cuisine colour so it reads as an aside to the recipe, not a step of it. */
.dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dev-item {
  background: #fff;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--line);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.dev-head { margin: 0 0 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dev-name { font: 600 13.5px var(--font-heading); }
.dev-time { font: 700 11.5px var(--font-body); opacity: .55; }
.dev-body { margin: 0; font: 400 13.5px/1.45 var(--font-body); }

/* Docked action bar on the recipe screen. */
.dock { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 10px; }
.dock form { margin: 0; display: flex; }
.dock-save {
  width: 52px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dock-cook {
  flex: 1;
  border-radius: 999px;
  padding: 16px;
  font: 600 16px var(--font-heading);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

/* ── Menu ──────────────────────────────────────────────────────────────── */

.pref-card { background: #fff; border-radius: var(--radius-lg); padding: 14px 16px 16px; box-shadow: var(--shadow-sm); }
.pref-title { font: 700 13px var(--font-body); margin: 0; }
.pref-sub { font: 600 11px var(--font-body); opacity: .5; margin: 0 0 10px; }
/* Heading above each filter axis inside the preferences card: five unlabelled
   chip rows read as one long undifferentiated list on a phone. */
.pref-group { font: 700 11px var(--font-body); opacity: .55; margin: 14px 0 8px; text-transform: uppercase; letter-spacing: .04em; }

.btn-primary {
  display: block;
  border: 0;
  width: 100%;
  cursor: pointer;
  border-radius: 999px;
  padding: 16px;
  font: 600 16px var(--font-heading);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.btn-outline {
  display: block;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px;
  font: 700 12.5px var(--font-body);
  text-align: center;
  color: inherit;
  text-decoration: none;
  opacity: .65;
}
.btn-outline:hover { opacity: 1; }

.empty-card { background: #fff; border-radius: var(--radius-lg); padding: 24px 20px; box-shadow: var(--shadow-sm); }
.empty-card-center { text-align: center; padding: 28px 20px; }
.empty-title { font: 700 14px var(--font-body); margin: 0; }
.empty-body { font: 400 13px/1.5 var(--font-body); opacity: .55; margin: 4px 0 0; }

/* ── Shopping list ─────────────────────────────────────────────────────── */

.bought-bar {
  display: flex; justify-content: space-between; align-items: center;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0;
}
.bought-count { font: 700 13px var(--font-body); }
.bought-clear { border: 0; background: none; cursor: pointer; font: 700 12px var(--font-body); padding: 0; }

.shop-group { margin-bottom: 18px; }
.group-heading {
  font: 700 11.5px var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
  margin: 0 0 8px;
}
.shop-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.shop-row { margin: 0; }
.shop-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid rgba(32, 30, 29, .06);
  background: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.shop-tick {
  width: 22px; height: 22px; flex: none;
  border-radius: 999px;
  border: 2px solid rgba(32, 30, 29, .22);
  display: flex; align-items: center; justify-content: center;
}
.shop-initial {
  width: 34px; height: 34px; flex: none;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--font-body);
}
.shop-text { flex: 1; min-width: 0; }
.shop-name { display: block; font: 700 13.5px var(--font-body); }
.shop-from {
  display: block; font: 600 11px var(--font-body); opacity: .45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-amount { font: 700 13px var(--font-body); white-space: nowrap; }

.shop-row.is-on .shop-name { text-decoration: line-through; }
.shop-row.is-on .shop-name,
.shop-row.is-on .shop-initial,
.shop-row.is-on .shop-amount { opacity: .4; }

/* ── Cook mode ─────────────────────────────────────────────────────────── */

.screen-cook { height: 100%; display: flex; flex-direction: column; }
.cook-head { padding: 20px var(--pad) 0; display: flex; justify-content: space-between; align-items: center; }
.cook-close {
  background: rgba(255, 255, 255, .16);
  width: 34px; height: 34px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

.cook-progress { padding: 14px var(--pad) 0; display: flex; gap: 8px; }
.cook-step-pill {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  height: 38px;
  font: 700 14px var(--font-body);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.cook-step-pill.is-done { background: rgba(255, 255, 255, .28); }
.cook-step-pill.is-now { background: #fff; border-color: #fff; }

.cook-body { flex: 1; min-height: 0; height: auto; }
.cook-photo {
  margin: 18px var(--pad) 0;
  height: min(212px, 26vh);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cook-pad { padding: 16px 22px 22px; }

.timer {
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .12);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.timer.is-done { background: var(--accent); }
.timer-main { flex: 1; min-width: 0; }
.timer-label {
  font: 600 10.5px var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}
.timer-time { font: 700 30px/1.1 var(--font-heading); color: #fff; margin: 2px 0 0; }
.timer-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .2); margin-top: 7px; }
.timer-fill { height: 4px; border-radius: 999px; background: #fff; transition: width .9s linear; }
.timer-btn {
  flex: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 13px 18px;
  background: #fff;
  font: 700 13px var(--font-body);
}
.timer-note { color: rgba(255, 255, 255, .7); font: 400 12px var(--font-body); margin-top: 8px; }

.cook-stepno {
  color: rgba(255, 255, 255, .65);
  font: 700 12px var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
}
.cook-steptext { color: #fff; font: 400 21px/1.45 var(--font-body); margin: 10px 0 0; }
.cook-ings { list-style: none; margin: 16px 0 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.cook-ings li {
  font: 700 12px var(--font-body);
  color: #fff;
  background: rgba(255, 255, 255, .14);
  padding: 7px 13px;
  border-radius: 999px;
}

.cook-actions { padding: 12px var(--pad) 22px; display: flex; gap: 10px; flex: none; }
.cook-prev {
  flex: none; width: 64px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
}
.cook-prev.is-disabled { opacity: .35; pointer-events: none; }
.cook-next {
  flex: 1;
  border-radius: 999px;
  padding: 17px;
  font: 600 16px var(--font-heading);
  background: #fff;
  text-align: center;
  text-decoration: none;
}

/* ── Login ─────────────────────────────────────────────────────────────── */

.screen-login {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 26px;
}
.login-back {
  position: absolute; top: 20px; left: 20px;
  background: rgba(255, 255, 255, .16);
  width: 34px; height: 34px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.login-title { margin: 8px 0 6px; color: #fff; font-size: 28px; }
.login-lede { color: rgba(255, 255, 255, .65); font: 400 13.5px/1.5 var(--font-body); margin: 0 0 18px; }
.login-input {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 15px 20px;
  font: 600 15px var(--font-body);
  background: rgba(255, 255, 255, .94);
  color: #201e1d;
}
.login-error { color: #ffd7c9; font: 600 12.5px var(--font-body); margin: 10px 0 0; }
.login-submit {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 16px;
  font: 600 16px var(--font-heading);
  background: #fff;
  text-align: center;
  text-decoration: none;
}

/* ── Admin ─────────────────────────────────────────────────────────────── */

.admin-head { padding: 24px var(--pad) 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.admin-head .page-title { font-size: 26px; margin: 6px 0 0; }
.admin-exit {
  border: 0;
  background: #fff;
  border-radius: 999px;
  padding: 9px 14px;
  font: 700 12px var(--font-body);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.country-row {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px var(--pad) 0;
  margin: 0;
}
.country-row::-webkit-scrollbar { display: none; }
.country-chip {
  flex: none;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  font: 700 12px var(--font-body);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  margin: 0;
}
.admin-card.is-hidden { opacity: .55; }
.admin-row-top { display: flex; gap: 10px; align-items: center; }
.admin-name {
  flex: 1; min-width: 0;
  border: 0;
  border-bottom: 1px solid rgba(32, 30, 29, .12);
  padding: 4px 0;
  font: 700 14.5px var(--font-body);
  background: none;
  color: inherit;
}
.admin-badge {
  flex: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 7px 12px;
  font: 700 11.5px var(--font-body);
  white-space: nowrap;
  background: rgba(32, 30, 29, .1);
  color: rgba(32, 30, 29, .6);
}
.admin-row-bottom { display: flex; gap: 10px; }
.admin-field {
  flex: 1; min-width: 0;
  border: 1px solid rgba(32, 30, 29, .12);
  border-radius: 999px;
  padding: 7px 12px;
  font: 600 12.5px var(--font-body);
  background: none;
  color: inherit;
}
.admin-row-actions { display: flex; gap: 8px; }
.admin-save, .admin-delete, .admin-reset {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font: 700 12px var(--font-body);
  color: inherit;
}
.admin-save { border-color: transparent; }
.admin-delete { color: #9a3412; }
.admin-actions { display: flex; gap: 10px; align-items: stretch; padding-bottom: 30px; }
.admin-actions form { margin: 0; }
.admin-actions form:first-child { flex: 1; }
.admin-reset { flex: none; padding: 15px 18px; }

/* ── Floating tab bar ──────────────────────────────────────────────────── */

.tabbar {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: space-around;
  padding: 10px 6px;
  border-radius: 999px;
  background: rgba(32, 30, 29, .94);
  box-shadow: var(--shadow-lg);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 56px;
  padding: 2px 0;
  color: rgba(255, 255, 255, .5);
  text-decoration: none;
  font: 700 10px var(--font-body);
}
.tab.is-on { color: #fff; }

/* ── Drop the frame and fill the screen ────────────────────────────────────
   Three ways in: the server marks a real handheld with .fill whatever its width
   (a tablet should not show a 390px phone floating in the middle), app.js adds
   the same class on a touch screen whose User-Agent hid that from the server,
   and any window narrow enough has no room for the frame anyway. */

body.fill { padding: 0; display: block; }
body.fill .ph {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}
body.fill .tabbar,
body.fill .dock { bottom: max(16px, env(safe-area-inset-bottom)); }

@media (max-width: 440px) {
  body { padding: 0; display: block; }
  .ph {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .tabbar { bottom: max(16px, env(safe-area-inset-bottom)); }
  .dock { bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ── Recipe editor ─────────────────────────────────────────────────────── */

/* The desktop shell pads its content column; the phone screen does not, so the
   editor carries its own gutters here. */
.editor { padding: 14px var(--pad) 34px; }
.editor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
/* ── Dish search ───────────────────────────────────────────────────────── */

/* One row: icon, field, and a clear button that only exists while there is
   something to clear. type=search draws its own cancel button in WebKit, which
   sits at a different place from ours and does not survive a reload — hidden so
   only one clear affordance is on screen. */
.search-form {
  position: relative; display: flex; align-items: center;
  margin: 0 0 12px;
}
.search-icon {
  position: absolute; left: 13px; display: flex; opacity: .4; pointer-events: none;
}
.search-input {
  width: 100%;
  border: 1px solid rgba(32, 30, 29, .14);
  border-radius: 999px;
  padding: 9px 38px 9px 36px;
  font: 400 14px var(--font-body);
  background: #fff; color: inherit;
}
.search-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; right: 12px; display: flex;
  color: inherit; opacity: .4; text-decoration: none;
}
.search-clear:hover { opacity: .85; }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font: 600 11px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 6px;
}
/* Text-like controls only: the checkboxes in .field-flags and the ingredient
   picker live inside .field too, and must keep their intrinsic size. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  border: 1px solid rgba(32, 30, 29, .14);
  border-radius: 14px;
  padding: 10px 14px;
  font: 400 14px var(--font-body);
  background: #fff;
  color: inherit;
}
.field textarea { border-radius: 16px; line-height: 1.6; resize: vertical; }
.field-wide { grid-column: 1 / -1; }
.field-hint { font: 400 12px var(--font-body); opacity: .5; margin: -8px 0 16px; }
.field-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.field-flags > span { width: 100%; margin-bottom: 2px; }
.flag { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--font-body); cursor: pointer; }

.ing-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.ing-pick {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(32, 30, 29, .12);
  font: 600 12.5px var(--font-body);
  cursor: pointer;
}
.ing-pick.is-on { background: var(--band); border-color: transparent; }
.ing-pick-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-pick-amount { font: 400 11px var(--font-body); opacity: .5; white-space: nowrap; }

.editor-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding-bottom: 30px; }
.admin-edit {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font: 600 12px var(--font-body);
  color: inherit;
  text-decoration: none;
}

@media (max-width: 520px) {
  .editor-grid { grid-template-columns: 1fr; }
  .ing-picker { grid-template-columns: 1fr; max-height: 260px; }
}

/* Cook-mode chips carry a small photo of the ingredient when one exists. */
.cook-ing { display: inline-flex; align-items: center; gap: 8px; }
.cook-ing-img { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; flex: none; }
.cook-ings li:has(.cook-ing-img) { padding-left: 6px; }

/* Extra pantry ingredients, folded away so the ten staples stay the fast path. */
.pantry-more { padding: 0 var(--pad) 6px; }
.pantry-more > summary {
  cursor: pointer;
  font: 700 13px var(--font-body);
  opacity: .62;
  padding: 6px 2px 10px;
}
.pantry-more-group {
  font: 700 11.5px var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .45;
  margin: 8px 2px 2px;
}
.pantry-more .chip-wrap { padding-left: 0; padding-right: 0; }

/* Language and measuring-system switch. See desktop.css for why it is drawn
   from `currentColor` rather than given one palette per surface. */
.locale-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.locale-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(128, 128, 128, .38);
  border-radius: 999px;
}

.locale-chip {
  padding: 5px 11px;
  border-radius: 999px;
  font: 700 11.5px var(--font-body);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: .72;
}

.locale-chip.is-on { background: var(--accent); color: #fff; opacity: 1; }

/* The page header and the welcome copy already carry the side padding, so the
   switch only needs its own breathing room above and below. */
.page-head .locale-switch,
.welcome-copy .locale-switch,
.pref-card .locale-switch { margin: 12px 0 0; }

/* Nutrition collections. See desktop.css for why each card is named twice. */
.coll-list { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--pad); }

.coll-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.coll-row-text { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }

.coll-row-chip {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font: 700 10.5px var(--font-body);
}

.coll-row-name { font: 700 14.5px var(--font-heading); }
.coll-row-lede { font: 400 12px/1.5 var(--font-body); color: rgba(32, 30, 29, .6); }

.block-note { margin: 0 0 10px; padding: 0 var(--pad); font: 400 12px/1.5 var(--font-body); color: rgba(32, 30, 29, .6); }

.coll-siblings { margin: 0 0 14px; }
.coll-siblings .chip { text-decoration: none; }

.coll-back { color: inherit; }

.coll-warn-detail {
  margin: 0 var(--pad) 14px;
  padding: 11px 13px;
  border-left: 3px solid;
  border-radius: 0 10px 10px 0;
  background: rgba(32, 30, 29, .05);
  font: 400 12px/1.6 var(--font-body);
}

.dish-card-warns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

.warn-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(32, 30, 29, .18);
  font: 600 10px var(--font-body);
  color: rgba(32, 30, 29, .66);
}

.coll-disclaimer {
  margin: 16px var(--pad) 0;
  font: 400 11px/1.6 var(--font-body);
  color: rgba(32, 30, 29, .5);
}