/* The hidden attribute must win over any display rule below. */
[hidden] { display: none !important; }

/* =====================================================================
   AutoShopper — visual system
   ---------------------------------------------------------------------
   Ported from Wake Up Early (docs/STYLE_GUIDE.md there; STYLE_GUIDE.md
   here). Warm paper canvas, near-black ink, one gold accent, big serif
   headlines, pill buttons, flat surfaces separated by hairlines.

   Token values are space-separated RGB triplets so alpha can be applied
   with rgb(var(--x) / 0.5).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --page: 244 241 234;            /* paper  #F4F1EA */
  --card: 255 255 255;            /* card   #FFFFFF */
  --card-soft: 233 226 214;       /* sand   #E9E2D6 */
  /* Ink */
  --ink: 20 20 20;                /* #141414 */
  --ink-mid: 106 101 92;          /* #6A655C */
  --ink-soft: 155 148 138;        /* #9B948A */
  --cream: 244 241 234;           /* ink-on-dark */
  /* Borders */
  --border-subtle: 231 226 217;   /* #E7E2D9 */
  --border: 216 210 198;          /* #D8D2C6 */
  --border-strong: 168 162 150;   /* #A8A296 */
  /* Accent + semantic */
  --accent: 159 127 53;           /* gold #9F7F35 */
  --accent-strong: 122 97 40;
  --accent-soft: 233 226 214;
  --success: 26 157 94;           /* #1A9D5E */
  --success-soft: 239 250 245;
  --danger: 220 52 49;            /* #DC3431 */
  --danger-soft: 255 245 246;
  --warning: 205 152 38;          /* #CD9826 */
  --warning-soft: 251 247 240;
  /* Primary action: black pill */
  --action: 20 20 20;
  --action-hover: 55 55 55;
  --action-text: 255 255 255;
  /* Elevation */
  --shadow-float: 0 4px 16px rgba(20, 16, 8, 0.08);
  --shadow-modal: 0 16px 48px rgba(20, 16, 8, 0.16);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

}


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

html { background-color: rgb(var(--page)); -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background-color: rgb(var(--page));
  color: rgb(var(--ink));
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;              /* the solid, confident default */
  letter-spacing: 0.25px;
}

a { color: rgb(var(--ink)); text-decoration: underline; text-underline-offset: 2px; }
a:hover { opacity: 0.8; }
b, strong { font-weight: 600; }
button { font: inherit; letter-spacing: inherit; cursor: pointer; color: inherit; }
img { max-width: 100%; }

::selection { background-color: rgb(var(--card-soft)); color: rgb(var(--ink)); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(var(--ink) / 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--ink) / 0.22); }

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

/* ---------------------------------------------------------------------
   Shell: floating card sidebar on paper + centred content column
   --------------------------------------------------------------------- */
.shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 280px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  z-index: 30;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgb(var(--card));
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(var(--border-subtle)), var(--shadow-float);
  overflow: hidden;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 24px 22px;
  color: rgb(var(--ink));
  text-decoration: none;
}
.brand:hover { opacity: 1; }
.brand-mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgb(var(--ink));
  color: rgb(var(--cream));
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.1;
}

.sidebar nav { flex: 1; padding: 4px 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgb(var(--ink-mid));
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar nav a:hover { opacity: 1; color: rgb(var(--ink)); background: rgb(var(--ink) / 0.05); }
.sidebar nav a .ico {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  background: rgb(var(--ink) / 0.05);
  transition: background-color 0.15s ease;
}
.sidebar nav a .ico svg { width: 16px; height: 16px; }
.sidebar nav a:hover .ico { background: rgb(var(--ink) / 0.1); }
.sidebar nav a.active {
  background: rgb(var(--accent-soft));
  color: rgb(var(--accent-strong));
  box-shadow: 0 0 0 1px rgb(var(--accent) / 0.15);
}
.sidebar nav a.active .ico { background: rgb(var(--accent) / 0.15); }
.sidebar nav .nav-divider { height: 1px; margin: 8px 12px; background: rgb(var(--ink) / 0.1); }
/* Sub-menu under a section (shown while that section is active) */
.sidebar nav .subnav { display: none; flex-direction: column; gap: 2px; margin: -2px 0 4px 26px; padding-left: 12px; border-left: 1px solid rgb(var(--ink) / 0.1); }
.sidebar nav .subnav.open { display: flex; }
.sidebar nav .subnav a { padding: 7px 10px; font-size: 12.5px; border-radius: 10px; }
.sidebar nav .subnav a.active { background: transparent; box-shadow: none; color: rgb(var(--accent-strong)); font-weight: 600; }

.sidebar-foot {
  padding: 12px;
  border-top: 1px solid rgb(var(--ink) / 0.1);
}
.sidebar-foot .tag-line { padding: 0 10px; color: rgb(var(--ink-soft)); font-size: 12px; }

.page {
  margin-left: 304px;
  padding: 32px 32px 48px;
  min-width: 0;
}
.page-inner { max-width: 896px; margin: 0 auto; }

/* Mobile: sidebar becomes a top bar with a horizontal pill nav */
@media (max-width: 1023px) {
  .sidebar { position: sticky; top: 0; inset: auto; width: auto; padding: 12px 16px; }
  .sidebar-inner { flex-direction: row; align-items: center; height: auto; padding-right: 8px; }
  .brand { padding: 12px 16px; }
  .brand-name { font-size: 17px; }
  .sidebar nav { flex-direction: row; padding: 0; gap: 2px; overflow-x: auto; }
  .sidebar nav a { padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
  .sidebar nav a .ico { display: none; }
  .sidebar nav .subnav, .sidebar nav .subnav.open { display: none; }
  .sidebar nav .nav-divider { display: none; }
  .sidebar-foot { display: none; }
  .page { margin-left: 0; padding: 16px 16px 40px; }
}

/* ---------------------------------------------------------------------
   Typography helpers
   --------------------------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.page-head h1, h1.display {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.1;
  margin: 0;
  color: rgb(var(--ink));
}
.page-head h1 em { font-style: italic; color: rgb(var(--accent)); }

/* Micro-caps eyebrow: the standard section label */
.eyebrow,
.panel > h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(var(--ink-soft));
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.eyebrow.success { color: rgb(var(--success)); }
.eyebrow.danger  { color: rgb(var(--danger)); }
.eyebrow.warning { color: rgb(var(--warning)); }
.eyebrow.accent  { color: rgb(var(--accent)); }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.muted { color: rgb(var(--ink-mid)); }
.soft  { color: rgb(var(--ink-soft)); }
.small { font-size: 13px; }
.num   { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------- */
.panel {
  background: rgb(var(--card));
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(var(--border-subtle));
  padding: 24px;
}
.panel + .panel { margin-top: 20px; }
.panel h2 .note { text-transform: none; letter-spacing: 0.25px; font-weight: 500; color: rgb(var(--ink-soft)); }

.hero-panel {
  background: #141414;
  color: #F4F1EA;
  border-radius: 24px;
  padding: 32px;
}
.hero-panel .eyebrow { color: rgba(244, 241, 234, 0.65); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

.card {
  display: flex; flex-direction: column; gap: 8px;
  background: rgb(var(--card));
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(var(--border-subtle));
  padding: 20px 22px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { opacity: 1; box-shadow: 0 0 0 1px rgb(var(--border-strong)); }
.card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.15;
}
.card p { margin: 0; color: rgb(var(--ink-mid)); font-size: 13px; }
.card .meta {
  margin-top: auto; padding-top: 12px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgb(var(--ink-soft));
  font-variant-numeric: tabular-nums;
}

/* Empty state: serif statement on a flat card, generous space */
.empty {
  background: rgb(var(--card));
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(var(--border-subtle));
  padding: 64px 32px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: rgb(var(--ink));
  max-width: 560px;
  margin: 0 auto;
}
.empty b { font-weight: 600; }
.panel .empty { box-shadow: none; padding: 40px 16px; font-size: 18px; color: rgb(var(--ink-mid)); }
.panel .empty b { color: rgb(var(--ink)); }

.back {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 16px;
  color: rgb(var(--ink-mid));
  text-decoration: none;
  font-size: 13px;
}
.back:hover { color: rgb(var(--ink)); opacity: 1; }

/* Skeleton block */
.skeleton { background: rgb(var(--card-soft)); border-radius: 8px; animation: skeleton-pulse 1.2s ease-in-out infinite; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ---------------------------------------------------------------------
   Buttons: pills only
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: rgb(var(--card));
  color: rgb(var(--ink));
  border: 1px solid rgb(var(--border));
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover:not(:disabled) { opacity: 1; border-color: rgb(var(--border-strong)); background: rgb(var(--card-soft)); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn.primary { background: rgb(var(--action)); color: rgb(var(--action-text)); border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: rgb(var(--action-hover)); border-color: transparent; }

.btn.ai { border-color: rgb(var(--border)); }
.btn.ai .spark { color: rgb(var(--accent)); }

.btn.danger { background: transparent; color: rgb(var(--danger)); border-color: transparent; }
.btn.danger:hover:not(:disabled) { background: rgb(var(--danger-soft)); border-color: transparent; }
.btn.danger.confirm { background: rgb(var(--danger)); color: #fff; }
.btn.danger.confirm:hover:not(:disabled) { background: rgb(var(--danger)); opacity: 0.9; }

.btn.small { height: 32px; padding: 0 14px; font-size: 13px; }
.btn.large { height: 48px; padding: 0 28px; font-size: 16px; }
.btn.icon { width: 32px; height: 32px; padding: 0; }
.btn.icon.danger { color: rgb(var(--ink-soft)); }
.btn.icon.danger:hover:not(:disabled) { color: rgb(var(--danger)); }

/* Spinner that lives inside a primary pill */
.spinner-action {
  display: inline-block; width: 18px; height: 18px; flex: none;
  border-radius: 999px;
  border: 2px solid rgb(var(--action-text) / 0.3);
  border-top-color: rgb(var(--action-text));
  animation: spin 0.8s linear infinite;
}
.spinner {
  display: inline-block; width: 18px; height: 18px; flex: none;
  border-radius: 999px;
  border: 2px solid rgb(var(--border-strong));
  border-top-color: rgb(var(--ink));
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.spacer { flex: 1; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
input, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  color: rgb(var(--ink));
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  border-radius: 12px;
  padding: 0 14px;
  height: 44px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: rgb(var(--ink-soft)); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: rgb(var(--ink));
  box-shadow: inset 0 0 0 1px rgb(var(--ink));
}
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; padding: 0; margin: 0;
  accent-color: rgb(var(--ink));
  border-radius: 4px;
}
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236A655C'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
}

label.field { display: block; margin-bottom: 16px; }
label.field > span {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgb(var(--ink-soft));
}

/* ---------------------------------------------------------------------
   Badges, tags, status pills: text carries the meaning, tint is small
   --------------------------------------------------------------------- */
.pill, .badge, .tag, #list .st {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgb(var(--card-soft));
  color: rgb(var(--ink-mid));
  font-variant-numeric: tabular-nums;
}
.tag { height: 18px; padding: 0 6px; font-size: 10px; }
.tag.ai { background: rgb(var(--accent-soft)); color: rgb(var(--accent-strong)); }

.pill.running,  .badge.RUNNING, .badge.ADDING, #list .st.adding   { background: rgb(var(--accent-soft)); color: rgb(var(--accent-strong)); }
.pill.done,     .badge.DONE,    .badge.ADDED,  #list .st.added    { background: rgb(var(--success-soft)); color: rgb(var(--success)); }
.pill.error,    .badge.FAILED,  .badge.NOT_FOUND                   { background: rgb(var(--danger-soft));  color: rgb(var(--danger)); }
.pill.waiting_2fa, .pill.waiting_cart, .pill.waiting_window, .pill.waiting_confirm, .badge.SKIPPED, #list .st.skipped { background: rgb(var(--warning-soft)); color: rgb(var(--warning)); }
.badge.PLACED { background: rgb(var(--success)); color: #fff; }
.pill.idle { background: rgb(var(--card-soft)); color: rgb(var(--ink-mid)); }

/* ---------------------------------------------------------------------
   Ingredients editor table
   --------------------------------------------------------------------- */
.editor { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }

table.ingredients { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin-top: -6px; }
table.ingredients th {
  text-align: left; padding: 0 6px 4px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgb(var(--ink-soft));
}
table.ingredients td { padding: 0 3px; vertical-align: middle; }
table.ingredients td.qty { width: 84px; }
table.ingredients td.unit { width: 96px; }
table.ingredients td.src { width: 40px; text-align: center; }
table.ingredients td.rm { width: 36px; text-align: right; }
table.ingredients input, table.ingredients select { height: 40px; }

/* ---------------------------------------------------------------------
   Toast (floats, so it earns a shadow)
   --------------------------------------------------------------------- */
.toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 50;
  padding: 12px 18px 12px 16px;
  border-radius: 999px;
  background: rgb(var(--card));
  color: rgb(var(--ink));
  box-shadow: 0 0 0 1px rgb(var(--border-subtle)), var(--shadow-modal);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  pointer-events: none;
}
.toast::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--ink-soft)); flex: none; }
.toast.show { opacity: 1; transform: none; }
.toast.error::before { background: rgb(var(--danger)); }
.toast.ok::before { background: rgb(var(--success)); }

/* ---------------------------------------------------------------------
   Bot transcript (monospace) + 2FA card + result line
   --------------------------------------------------------------------- */
#log, #olog {
  display: flex; flex-direction: column; gap: 6px;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 400;
}
#log { height: 62vh; }
#olog { max-height: 34vh; margin-top: 12px; }

.entry {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(var(--page));
  border-left: 2px solid rgb(var(--border));
  color: rgb(var(--ink));
  white-space: pre-wrap; word-break: break-word;
  line-height: 1.45;
}
.entry .t { color: rgb(var(--ink-soft)); font-size: 11px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.entry.thought        { border-color: rgb(var(--ink)); }
.entry.tool_call      { border-color: rgb(var(--accent)); }
.entry.tool_result    { border-color: rgb(var(--border-strong)); color: rgb(var(--ink-mid)); }
.entry.system         { border-color: rgb(var(--border)); color: rgb(var(--ink-mid)); }
.entry.error          { border-color: rgb(var(--danger)); color: rgb(var(--danger)); }
.entry.done           { border-color: rgb(var(--success)); }
.entry.twofa_required { border-color: rgb(var(--warning)); }

details.log summary {
  cursor: pointer; list-style: none;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgb(var(--ink-soft));
  display: flex; align-items: center; gap: 8px;
}
details.log summary::-webkit-details-marker { display: none; }
details.log summary::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  border: 1.5px solid currentColor; box-sizing: border-box;
}
details.log[open] summary::before { background: currentColor; }

#twofa {
  display: none;
  margin-top: 20px; padding: 20px;
  border-radius: 16px;
  background: rgb(var(--card));
  box-shadow: 0 0 0 1px rgb(var(--border));
}
#twofa .eyebrow { margin-bottom: 6px; }
#twofa .prompt { font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.25px; margin: 0 0 14px; }
#twofa .row { display: flex; gap: 10px; align-items: center; }
#twofa input { width: 180px; height: 48px; font-size: 22px; font-weight: 600; letter-spacing: 6px; font-variant-numeric: tabular-nums; text-align: center; }

#result { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 12px; font-weight: 500; }
#result.ok   { background: rgb(var(--success-soft)); color: rgb(var(--success)); }
#result.fail { background: rgb(var(--danger-soft));  color: rgb(var(--danger)); }

#shot { display: none; width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px rgb(var(--border-subtle)); margin-top: 12px; }
#shotLabel { color: rgb(var(--ink-soft)); font-size: 12px; margin-top: 8px; }

/* ---------------------------------------------------------------------
   Orders page
   --------------------------------------------------------------------- */
.orders { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .orders { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack .panel + .panel { margin-top: 0; }

/* Recipe picker: selectable chips, monochrome selection */
.picker { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow: auto; }
.picker label {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--border));
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.picker label:hover { box-shadow: inset 0 0 0 1px rgb(var(--border-strong)); }
.picker label.on { box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.picker input { width: 16px; margin-top: 2px; flex: none; }
.picker b { font-weight: 600; }
.picker .d { color: rgb(var(--ink-mid)); font-size: 12.5px; margin-top: 2px; }

/* Shopping list rows */
.items { display: flex; flex-direction: column; gap: 8px; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgb(var(--card));
  box-shadow: inset 0 0 0 1px rgb(var(--border-subtle));
}
.item .n { font-weight: 600; }
.item .q { color: rgb(var(--ink-mid)); font-variant-numeric: tabular-nums; }
.item .for  { grid-column: 1 / -1; color: rgb(var(--ink-soft)); font-size: 12px; }
.item .prod { grid-column: 1 / -1; color: rgb(var(--ink-mid)); font-size: 12.5px; }
.item .err  { grid-column: 1 / -1; color: rgb(var(--danger)); font-size: 12.5px; }
.item.ADDING { box-shadow: inset 0 0 0 1px rgb(var(--border-strong)); }

/* Cart table: facts-list rhythm */
table.cart { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.cart td { padding: 10px 4px; border-bottom: 1px solid rgb(var(--border-subtle)); vertical-align: top; }
table.cart td.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.cart tr:last-child td { border-bottom: 0; }
table.cart tr.total td { border: 0; padding-top: 14px; font-weight: 600; }
table.cart tr.total td:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); }
table.cart tr.total td.r { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.25px; }

/* Recent orders: hairline-divided rows */
.history { display: flex; flex-direction: column; gap: 6px; }
.history a {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--border-subtle));
  color: inherit; text-decoration: none; font-size: 13px;
  transition: box-shadow 0.15s ease;
}
.history a:hover { opacity: 1; box-shadow: inset 0 0 0 1px rgb(var(--border-strong)); }
.history a.on { box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.history .t { grid-column: 1 / -1; grid-row: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.history .when { grid-row: 1; justify-self: end; color: rgb(var(--ink-soft)); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------- */
@keyframes step-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page > .page-inner { animation: step-fade-in 0.25s ease-out both; }

/* ---------------------------------------------------------------------
   Shopping list editor
   --------------------------------------------------------------------- */
.badge.NEW, .pill.NEW { background: rgb(var(--card-soft)); color: rgb(var(--ink)); }
.editor.list-editor { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.saved-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(var(--ink-soft)); }
.saved-note .dot { width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--success)); }
.saved-note.dirty .dot, .saved-note.saving .dot { background: rgb(var(--warning)); }
.saved-note.error .dot { background: rgb(var(--danger)); }
.ingredients.readonly td { padding-top: 8px; padding-bottom: 8px; }
.ingredients.readonly td.qty { text-align: right; white-space: nowrap; color: rgb(var(--ink-mid)); }

.page-head .head-side { display: inline-flex; align-items: center; gap: 14px; }
.order-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.25px; margin: 0 0 4px; }

/* ---------------------------------------------------------------------
   Order view: process steps, ingredient table, transcript
   --------------------------------------------------------------------- */
.card .card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; flex-wrap: wrap; }
.step { flex: 1 1 140px; display: flex; align-items: flex-start; gap: 10px; position: relative; padding-right: 16px; min-width: 0; }
.step:not(:last-child)::after {
  content: ''; position: absolute; top: 11px; left: 34px; right: 8px; height: 1px;
  background: rgb(var(--border)); z-index: 0;
}
.step.done:not(:last-child)::after { background: rgb(var(--ink)); }
.step-dot {
  position: relative; z-index: 1; flex: none;
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  background: rgb(var(--card));
  box-shadow: inset 0 0 0 1px rgb(var(--border));
  color: rgb(var(--ink-soft));
}
.step-label { position: relative; z-index: 1; background: rgb(var(--card)); padding: 4px 8px 0 0; font-size: 12px; font-weight: 600; color: rgb(var(--ink-soft)); line-height: 1.3; }
.step-label small { display: block; font-weight: 500; font-size: 11px; color: rgb(var(--ink-soft)); margin-top: 2px; }
.step.done .step-dot { background: rgb(var(--ink)); color: rgb(var(--cream)); box-shadow: none; }
.step.done .step-label { color: rgb(var(--ink)); }
.step.active .step-dot { box-shadow: inset 0 0 0 2px rgb(var(--ink)); color: rgb(var(--ink)); }
.step.active .step-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--ink)); animation: step-pulse 1.2s ease-in-out infinite; }
.step.active .step-label { color: rgb(var(--ink)); }
.step.failed .step-dot { background: rgb(var(--danger)); color: #fff; box-shadow: none; }
.step.failed .step-label { color: rgb(var(--danger)); }
.step.skipped .step-dot { box-shadow: inset 0 0 0 1px rgb(var(--border-subtle)); }
.step.skipped .step-label { color: rgb(var(--ink-soft)); text-decoration: line-through; text-decoration-color: rgb(var(--border-strong)); }
.step.skipped .step-label small { text-decoration: none; }
@keyframes step-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.result { display: none; margin-top: 16px; padding: 12px 16px; border-radius: 12px; font-weight: 500; }
.result.ok   { background: rgb(var(--success-soft)); color: rgb(var(--success)); }
.result.fail { background: rgb(var(--danger-soft));  color: rgb(var(--danger)); }

table.order-items { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.order-items th {
  text-align: left; padding: 0 10px 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
  color: rgb(var(--ink-soft));
  border-bottom: 1px solid rgb(var(--border-subtle));
}
table.order-items td { padding: 12px 10px; border-bottom: 1px solid rgb(var(--border-subtle)); vertical-align: top; }
table.order-items tr:last-child td { border-bottom: 0; }
table.order-items th.r, table.order-items td.r { text-align: right; }
table.order-items td.n { font-weight: 600; }
table.order-items td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.order-items .live { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--ink-mid)); }
table.order-items .live .spinner { width: 14px; height: 14px; }
table.order-items .danger { color: rgb(var(--danger)); font-weight: 600; }
table.order-items tr.ADDED td.n::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--success)); margin-right: 8px; vertical-align: 1px; }
table.order-items tr.NOT_FOUND td.n::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--danger)); margin-right: 8px; vertical-align: 1px; }
table.order-items tr.SEARCHING td.n::before, table.order-items tr.ADDING td.n::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: rgb(var(--accent)); margin-right: 8px; vertical-align: 1px; animation: step-pulse 1.2s ease-in-out infinite; }

.order-live { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
@media (max-width: 1000px) { .order-live { grid-template-columns: 1fr; } }
.transcript {
  height: 56vh; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; font-weight: 400;
}
.pill.busy, #list .st.searching { background: rgb(var(--accent-soft)); color: rgb(var(--accent-strong)); }

/* ---------------------------------------------------------------------
   Ingredients page: item types on the left, ranked products on the right
   --------------------------------------------------------------------- */
.ingredients-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .ingredients-layout { grid-template-columns: 1fr; } }
.ingredients-layout .panel + .panel { margin-top: 0; }

.types-panel > input { height: 40px; margin-bottom: 12px; }
.types { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow: auto; }
.type-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--border-subtle));
  color: inherit; text-decoration: none; font-size: 13px;
  transition: box-shadow 0.15s ease;
  position: relative;
}
.type-row:hover { opacity: 1; box-shadow: inset 0 0 0 1px rgb(var(--border-strong)); }
.type-row.on { box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.type-row .t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-row .m { grid-column: 1; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); font-variant-numeric: tabular-nums; }
.type-row .m.set { color: rgb(var(--success)); }
.type-row .rm { grid-column: 2; grid-row: 1 / span 2; opacity: 0; }
.type-row:hover .rm, .type-row .rm.confirm { opacity: 1; }
.type-row .rm.confirm { color: rgb(var(--danger)); background: rgb(var(--danger-soft)); border-color: transparent; }
.add-type { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(var(--border-subtle)); }
.add-type input { height: 40px; }
.add-type .btn { flex: none; height: 40px; }

.detail-panel .order-title { margin-bottom: 6px; }
.detail-hint { margin: 0 0 16px; max-width: 520px; line-height: 1.4; }

.slots { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.slot {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 6px 8px 6px 10px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--border-subtle));
  font-size: 13.5px;
}
.slot.on { box-shadow: inset 0 0 0 1px rgb(var(--border)); }
.slot-empty { color: rgb(var(--ink-soft)); }
.slot-name { flex: 1; min-width: 0; font-weight: 600; }
.slot-name a { text-decoration: none; }
.slot-name a:hover { text-decoration: underline; }
.rank-badge {
  flex: none; width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; line-height: 1;
  color: rgb(var(--ink-soft));
  box-shadow: inset 0 0 0 1px rgb(var(--border));
}
.rank-badge.on { background: rgb(var(--ink)); color: rgb(var(--cream)); box-shadow: none; }

.catalogue-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.catalogue-head h2 { margin: 0; }
.catalogue-head input { width: 260px; max-width: 100%; height: 40px; }

.products { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.product-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(var(--border-subtle));
  transition: box-shadow 0.15s ease;
}
.product-row:hover { box-shadow: inset 0 0 0 1px rgb(var(--border-strong)); }
.product-row.on { box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: contain; background: rgb(var(--card)); box-shadow: inset 0 0 0 1px rgb(var(--border-subtle)); }
.thumb.none { display: inline-block; background: rgb(var(--card-soft)); box-shadow: none; }
.pinfo { min-width: 0; }
.pname { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pname a { text-decoration: none; }
.pname a:hover { text-decoration: underline; }
.pmeta { color: rgb(var(--ink-mid)); font-size: 12px; margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pmeta .badge { height: 18px; padding: 0 6px; font-size: 10px; }

.rank { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgb(var(--ink) / 0.05); }
.rank-btn {
  width: 28px; height: 28px; border-radius: 999px; border: 0; padding: 0;
  background: transparent; color: rgb(var(--ink-mid));
  font-size: 12px; font-weight: 700; line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rank-btn:hover { background: rgb(var(--card)); color: rgb(var(--ink)); box-shadow: 0 0 0 1px rgb(var(--border)); }
.rank-btn:active { transform: scale(0.95); }
.rank-btn.on { background: rgb(var(--ink)); color: rgb(var(--cream)); box-shadow: none; }

/* ---------------------------------------------------------------------
   Pantry page + "Pantry Items" card in the list editor
   --------------------------------------------------------------------- */
.pantry-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
@media (max-width: 1000px) { .pantry-layout { grid-template-columns: 1fr; } }
.pantry-search { position: relative; }
.pantry-search > input { height: 40px; }
.pantry-search .matches {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: rgb(var(--card)); border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(var(--border)), 0 12px 32px rgba(0, 0, 0, 0.08);
  max-height: 320px; overflow: auto;
}
.pantry-search .match {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; text-align: left; cursor: pointer; color: rgb(var(--ink));
}
.pantry-search .match:hover:not(:disabled) { background: rgb(var(--card-soft)); }
.pantry-search .match:disabled { opacity: 0.45; cursor: default; }
.pantry-search .match .m { color: rgb(var(--ink-soft)); font-size: 12px; white-space: nowrap; }
.pantry-search .no-match { padding: 8px 10px; }
.pantry-chosen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 0.8fr) auto auto; gap: 8px; align-items: center; margin-top: 12px; }
@media (max-width: 640px) { .pantry-chosen { grid-template-columns: 1fr 1fr; } }
.pantry-chosen .chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 10px; background: rgb(var(--card-soft)); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.unit-label { color: rgb(var(--ink-mid)); font-variant-numeric: tabular-nums; min-width: 24px; }
.pantry-add-category { display: flex; gap: 8px; align-items: center; }
.pantry-add-category input { flex: 1; height: 40px; }
.pantry-section { margin-top: 16px; }
.pantry-section .section-head { display: flex; align-items: center; gap: 10px; }
.pantry-section .section-head h2 { margin: 0; }
.pantry-section .section-head .note { color: rgb(var(--ink-soft)); font-weight: 400; margin-left: 6px; }
.pantry-section .rename-input { height: 32px; font-size: inherit; font-weight: inherit; }
.pantry-section table { margin-top: 12px; }
.pantry-table td.name-cell { padding-left: 10px; }
.pantry-table td.reorder-cell, .pantry-table td.unit { width: 1%; white-space: nowrap; padding-right: 10px; }
.pantry-table td.cat select { min-width: 140px; }
.reorder-btn { color: rgb(var(--ink-mid)); }
.reorder-btn.on { background: rgb(var(--ink)); color: rgb(var(--card)); border-color: transparent; }
.reorder-btn.on:hover:not(:disabled) { background: rgb(var(--ink)); color: rgb(var(--card)); opacity: 0.9; }
tr.reorder td .name { font-weight: 600; }

/* Pantry: the chosen Woolworths product on a row, and the inline picker */
.product-pick {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 4px 8px 4px 4px;
  border: 0; border-radius: 10px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
  max-width: 100%;
}
.product-pick:hover { background: rgb(var(--card-soft)); }
.product-pick .thumb { width: 32px; height: 32px; }
.product-pick .pp-text { display: flex; flex-direction: column; min-width: 0; }
.product-pick .pp-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-pick .pp-name.muted { text-decoration: underline; text-decoration-color: rgb(var(--border-strong)); text-underline-offset: 3px; }
.product-pick .pp-meta { font-size: 11.5px; color: rgb(var(--ink-soft)); }
.picker-row > td { padding: 0 3px 8px !important; }
.product-picker { padding: 14px 16px 16px; border-radius: 12px; background: rgb(var(--card-soft)); box-shadow: inset 0 0 0 1px rgb(var(--border-subtle)); }
.product-picker .picker-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.product-picker .picker-head h3 { margin: 0; font-size: 15px; white-space: nowrap; }
.product-picker .picker-search { flex: 1; height: 36px; }
.product-picker .products { max-height: 420px; }
.product-picker .product-row { background: rgb(var(--card)); }
.product-picker .product-row .use { flex: none; }

/* Ingredients page: catalogue hits under the filter, grouped into candidate ingredients */
.catalogue { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.catalogue-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink-soft)); font-weight: 600; }
.cat-group { padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(var(--border-subtle)); }
.cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cat-name { font-weight: 600; }
.cat-meta { color: rgb(var(--ink-soft)); font-size: 12px; flex: 1; }
.cat-products { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.cat-product {
  display: flex; flex-direction: column; gap: 4px; width: 104px; padding: 6px; border: 0; border-radius: 10px;
  background: rgb(var(--card-soft)); font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.cat-product:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgb(var(--border-strong)); }
.cat-product:disabled { cursor: default; opacity: 0.7; }
.cat-product .thumb { width: 44px; height: 44px; }
.cat-product .cp-name { font-size: 11.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-product .cp-meta { font-size: 10.5px; color: rgb(var(--ink-soft)); }
/* Pantry search: catalogue suggestions below the ingredient matches */
.pantry-search .catalogue-hits { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.pantry-search .catalogue-hits.no-match { display: block; }
.pantry-search .ch-title { padding: 6px 10px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--ink-soft)); font-weight: 600; }
.pantry-search .catalogue-match { justify-content: flex-start; }
.pantry-search .catalogue-match .thumb { width: 32px; height: 32px; }
.pantry-search .catalogue-match .cm-text { display: flex; flex-direction: column; min-width: 0; }
.pantry-search .catalogue-match .cm-text .m { white-space: normal; }
.pantry-table td.reorder-cell { white-space: nowrap; }
.pantry-table td.reorder-cell input.quantity { width: 64px; text-align: center; display: inline-block; vertical-align: middle; margin-right: 8px; }
.pantry-table td.reorder-cell .reorder-btn { vertical-align: middle; }

/* ---------------------------------------------------------------------
   Recipe catalogue (search, filters, image cards)
   --------------------------------------------------------------------- */
.head-actions { display: flex; gap: 10px; align-items: center; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filters .search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
.filters .search svg { position: absolute; left: 14px; width: 18px; height: 18px; color: rgb(var(--ink-soft)); pointer-events: none; }
.filters .search input { padding-left: 42px; width: 100%; }
.filters select { width: auto; min-width: 200px; max-width: 320px; }
.btn.toggle svg { width: 16px; height: 16px; margin-right: 6px; }
.btn.toggle.on { box-shadow: inset 0 0 0 2px rgb(var(--ink)); border-color: transparent; }
.result-count { margin: 0 2px 12px; min-height: 18px; }

.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.recipe-card {
  display: flex; flex-direction: column;
  background: rgb(var(--card));
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(var(--border-subtle));
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.recipe-card:hover { opacity: 1; box-shadow: 0 0 0 1px rgb(var(--border-strong)); }
.recipe-card .thumb { width: 100%; height: auto; border-radius: 0; box-shadow: none; position: relative; aspect-ratio: 4 / 3; background: rgb(var(--card-soft)); overflow: hidden; }
.recipe-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.recipe-card:hover .thumb img { transform: scale(1.03); }
.recipe-card .thumb .initial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 56px; font-weight: 600; color: rgb(var(--ink-soft));
}
.recipe-card .fav-mark {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 999px;
  background: rgb(var(--card)); color: rgb(var(--danger)); display: grid; place-items: center;
  box-shadow: var(--shadow-float);
}
.recipe-card .fav-mark svg { width: 14px; height: 14px; }
.recipe-card .body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.recipe-card h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.15; }
.recipe-card p { margin: 0; color: rgb(var(--ink-mid)); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-card .card-tags { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-card .card-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.25px; font-variant-numeric: tabular-nums;
  background: rgb(var(--card-soft)); color: rgb(var(--ink-mid));
}
.recipe-card .card-tag.protein { background: rgb(var(--accent-soft)); color: rgb(var(--accent-strong)); }
.recipe-card .card-tag.macro { background: transparent; color: rgb(var(--ink-soft)); padding: 0 4px; }
.recipe-card .card-tag.type { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--border)); color: rgb(var(--ink-mid)); }

/* Recipe view */
.recipe-hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; margin-bottom: 20px; }
.recipe-hero.no-image { grid-template-columns: 1fr; }
.recipe-hero .hero-img { border-radius: 24px; overflow: hidden; background: rgb(var(--card-soft)); box-shadow: 0 0 0 1px rgb(var(--border-subtle)); aspect-ratio: 4 / 5; }
.recipe-hero .hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-hero .hero-text { padding-top: 8px; }
.recipe-hero .eyebrow a { color: inherit; text-decoration: none; }
.recipe-hero .eyebrow a:hover { color: rgb(var(--accent)); opacity: 1; }
.recipe-hero .eyebrow .sep { margin: 0 6px; color: rgb(var(--border-strong)); }
.recipe-hero h1 { font-family: var(--font-display); font-size: 36px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.08; margin: 8px 0 12px; }
.recipe-hero .lede { color: rgb(var(--ink-mid)); font-size: 15px; line-height: 1.55; margin: 0 0 18px; }
.facts { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0 0 8px; padding: 14px 0; border-top: 1px solid rgb(var(--border-subtle)); border-bottom: 1px solid rgb(var(--border-subtle)); }
.facts div { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); }
.facts dd { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.recipe-hero .actions { margin-top: 16px; }

.recipe-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.recipe-body h4.group { margin: 18px 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--accent)); }
.recipe-body h4.group:first-of-type { margin-top: 4px; }
.ingredients-panel .ing {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start;
  padding: 10px 6px; border-bottom: 1px solid rgb(var(--border-subtle)); cursor: pointer; font-size: 14px; line-height: 1.4;
}
.ingredients-panel .ing:last-of-type { border-bottom: none; }
.ingredients-panel .ing input { margin-top: 3px; }
.ingredients-panel .ing b { font-weight: 600; }
.ingredients-panel .ing .shop { font-size: 11px; font-weight: 600; letter-spacing: 0.25px; color: rgb(var(--ink-soft)); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: rgb(var(--page)); font-variant-numeric: tabular-nums; }
.ingredients-panel .ing:has(input:not(:checked)) .txt { opacity: 0.45; text-decoration: line-through; }
.panel.method ol { margin: 0; padding-left: 0; list-style: none; counter-reset: step; }
.panel.method li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-bottom: 1px solid rgb(var(--border-subtle)); font-size: 14.5px; line-height: 1.6; }
.panel.method li:last-child { border-bottom: none; }
.panel.method li::before {
  content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; background: rgb(var(--page)); color: rgb(var(--ink)); font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.panel.notes p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: rgb(var(--ink-mid)); }
.panel.notes p:last-child { margin-bottom: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.gallery a { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgb(var(--card-soft)); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1000px) { .recipe-hero, .recipe-body { grid-template-columns: 1fr; } .recipe-hero .hero-img { aspect-ratio: 4 / 3; } }

/* Importer */
.divider { height: 1px; background: rgb(var(--border-subtle)); margin: 20px 0; }
.inline-field { display: flex; gap: 10px; align-items: center; }
.import-results { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.import-results li { padding: 8px 10px; border-radius: 12px; background: rgb(var(--page)); font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; border-left: 2px solid rgb(var(--border)); }
.import-results li.ok { border-left-color: rgb(var(--success)); }
.import-results li.err { border-left-color: rgb(var(--danger)); }
.import-results li.skip { opacity: 0.7; }
.mono { font-family: var(--font-mono); font-size: 12px; }
.recipe-body h4.group.pantry-head { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgb(var(--border-subtle)); color: rgb(var(--ink-soft)); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.recipe-body h4.group.pantry-head .note { text-transform: none; letter-spacing: 0.25px; font-weight: 500; }
.ingredients-panel .ing.pantry .txt { color: rgb(var(--ink-mid)); }
.ingredients-panel .ing.pantry:has(input:not(:checked)) .txt { opacity: 1; text-decoration: none; }
.ingredients-panel .ing.pantry:has(input:not(:checked)) .shop { opacity: 0.5; }
.ingredients-panel .ing.pantry:has(input:checked) .txt { color: rgb(var(--ink)); }

/* Shopping list sources: key chips, legend, by-recipe view */
.key {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: rgb(var(--card-soft)); color: rgb(var(--ink)); font-size: 11px; font-weight: 600; letter-spacing: 0.25px;
  font-variant-numeric: tabular-nums; vertical-align: middle; cursor: default;
}
.key.pantry { background: rgb(var(--accent-soft)); color: rgb(var(--accent-strong)); }
.key.list { background: rgb(var(--page)); box-shadow: inset 0 0 0 1px rgb(var(--border)); }
.key.hand { background: transparent; color: rgb(var(--ink-soft)); box-shadow: inset 0 0 0 1px rgb(var(--border-subtle)); }
.key + .key { margin-left: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 0 14px; margin-bottom: 6px; border-bottom: 1px solid rgb(var(--border-subtle)); font-size: 13px; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-item a { color: inherit; text-decoration: none; font-weight: 600; }
.legend-item a:hover { color: rgb(var(--accent)); opacity: 1; }
.legend-item .muted { font-size: 12px; }
.legend-item .remove-source, .source-group h4.group .remove-source { width: 24px; height: 24px; font-size: 15px; line-height: 1; margin-left: -2px; }
.remove-source.confirm { width: auto; padding: 0 10px; font-size: 12px; font-weight: 600; }
table.ingredients td.src { white-space: nowrap; width: 1%; padding-right: 10px; }
table.ingredients th.src-head { text-align: left; }
.list-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.seg { display: inline-flex; gap: 6px; }
.source-group { margin-top: 6px; }
.source-group h4.group { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; font-size: 13px; font-weight: 600; color: rgb(var(--ink)); }
.source-group h4.group a { color: inherit; text-decoration: none; }
.source-group h4.group a:hover { color: rgb(var(--accent)); opacity: 1; }
.source-group h4.group .note { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); }
.source-group + .source-group h4.group { margin-top: 22px; }
.source-group .also { margin-left: 8px; font-size: 11px; color: rgb(var(--ink-soft)); }
.source-group .also .key { margin-left: 4px; height: 18px; min-width: 18px; font-size: 10px; }
h3.sub { margin: 24px 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); }
.pantry-section .move { display: inline-flex; gap: 4px; margin-right: 4px; }
.pantry-section .move .btn.icon { font-size: 14px; color: rgb(var(--ink-mid)); }

/* Sub-recipes nested in the ingredient list */
.ingredients-panel .ing.sub-recipe { cursor: default; grid-template-columns: 18px 1fr; border-bottom: none; padding-bottom: 4px; }
.ingredients-panel .sub-icon { width: 18px; height: 18px; margin-top: 2px; color: rgb(var(--accent)); }
.ingredients-panel .sub-icon svg { width: 18px; height: 18px; }
.ingredients-panel .sub-meta { display: block; margin-top: 2px; font-size: 12px; color: rgb(var(--ink-mid)); }
.ingredients-panel .sub-meta a { font-weight: 600; color: rgb(var(--ink)); text-decoration: none; }
.ingredients-panel .sub-meta a:hover { color: rgb(var(--accent)); opacity: 1; }
.ingredients-panel .nested-list { margin: 0 0 6px 16px; padding-left: 14px; border-left: 2px solid rgb(var(--border-subtle)); }
.ingredients-panel .nested-list .ing { padding: 8px 6px; }
.ingredients-panel .ing .tag { vertical-align: middle; margin-left: 4px; }
.recipe-hero .used-in { margin-top: 10px; }
.recipe-hero .used-in a { color: rgb(var(--ink)); font-weight: 600; text-decoration: none; }
.ingredients-panel .nested-list .ing .tag { display: none; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: rgb(var(--ink)); font-weight: 600; text-decoration: underline; cursor: pointer; }
.load-more { display: flex; justify-content: center; padding: 24px 0 8px; }

/* Quick Add page */
.quick-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .quick-layout { grid-template-columns: 1fr; } }
.quick-layout > .panel > input { height: 44px; font-size: 15px; margin-bottom: 8px; }
.quick-results { max-height: 70vh; margin-top: 12px; }
.quick-results .product-row .add { flex: none; }
.line-product { color: rgb(var(--ink-soft)); font-size: 12px; margin: 2px 0 0 12px; }
/* Catalogue crawl: aisle picker */
.aisles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; margin-top: 4px; }
.aisles label.check { font-size: 13px; }
.nutrition { margin: 4px 0 8px; }
.nutrition .eyebrow .note { text-transform: none; letter-spacing: 0.25px; font-weight: 500; color: rgb(var(--ink-soft)); }
.facts.macros { border-top: none; padding-top: 6px; }
.facts.macros dd .unit { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: rgb(var(--ink-soft)); }
.more-nutrition summary { cursor: pointer; font-size: 12px; font-weight: 600; color: rgb(var(--ink-mid)); padding: 4px 0; }
.nutri-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 16px; margin: 8px 0 0; font-size: 13px; }
.nutri-list div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgb(var(--border-subtle)); padding: 3px 0; }
.nutri-list dt { color: rgb(var(--ink-mid)); }
.nutri-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.filters select#site { min-width: 150px; }
.filters select#type, .filters select#protein, .filters select#time { min-width: 140px; }

/* Pantry Staples (Tools) */
table.staples td.num, table.staples th.num { text-align: right; width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.staples td.cat { width: 260px; }
table.staples td.cat select { width: 100%; }
table.staples td.act { width: 1%; white-space: nowrap; text-align: right; }
table.staples tr.done td { color: rgb(var(--ink-soft)); }
table.staples tr.done td b { font-weight: 500; }

/* AI Recipe Cleanup (Tools) */
.cleanup-count { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.cleanup-count .big { font-family: var(--font-display, inherit); font-size: 40px; font-weight: 600; letter-spacing: -0.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.cleanup-count .of { font-size: 15px; color: rgb(var(--ink-mid)); }
.cleanup-bar { height: 8px; border-radius: 999px; background: rgb(var(--card-soft)); overflow: hidden; margin: 6px 0 14px; }
.cleanup-bar > span { display: block; height: 100%; background: rgb(var(--accent)); transition: width 0.4s ease; }
.cleanup-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 18px; margin: 6px 0 14px; }
.cleanup-stats .stat b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.cleanup-stats .stat span { font-size: 12px; color: rgb(var(--ink-soft)); text-transform: uppercase; letter-spacing: 0.5px; }
.cleanup-recent { list-style: none; margin: 0; padding: 0; }
.cleanup-recent li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid rgb(var(--border-subtle)); font-size: 13px; }
.cleanup-recent li:first-child { border-top: 0; }
.cleanup-recent li a { flex: 1; color: inherit; text-decoration: none; font-weight: 600; }
.cleanup-recent li a:hover { color: rgb(var(--accent)); }
.cleanup-recent li .fact { color: rgb(var(--ink-mid)); white-space: nowrap; }
.cleanup-recent li.err .fact { color: rgb(var(--danger)); white-space: normal; }
.cleanup-recent li .raw { color: rgb(var(--ink-soft)); text-decoration: line-through; text-decoration-color: rgb(var(--ink) / 0.3); }
.cleanup-recent li .arrow { color: rgb(var(--ink-soft)); }
.cleanup-recent li b { flex: 1; }
.cleanup-recent li .kept { font-size: 11px; color: rgb(var(--ink-soft)); background: rgb(var(--card-soft)); padding: 1px 7px; border-radius: 999px; }
.cleanup-live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(var(--ink-mid)); min-height: 24px; }
.rating { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: rgb(var(--accent-strong)); font-variant-numeric: tabular-nums; }
.rating svg { width: 14px; height: 14px; color: rgb(var(--accent)); }
.rating .muted { font-weight: 500; }
.rating.large { font-size: 14px; margin: -4px 0 12px; }
.rating.large svg { width: 16px; height: 16px; }
.filters select#sort { min-width: 140px; }

/* Card flag buttons: favourite and want-to-make, toggled without opening the recipe */
.recipe-card .card-flags { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.recipe-card .flag {
  width: 30px; height: 30px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgb(var(--card) / 0.92); color: rgb(var(--ink-soft)); display: grid; place-items: center;
  box-shadow: var(--shadow-float); transition: transform 0.12s ease, color 0.12s ease;
}
.recipe-card .flag svg { width: 15px; height: 15px; }
.recipe-card .flag:hover { transform: scale(1.08); color: rgb(var(--ink)); }
.recipe-card .flag:disabled { opacity: 0.6; cursor: wait; }
.recipe-card .flag.fav.on { color: rgb(var(--danger)); }
.recipe-card .flag.want.on { color: rgb(var(--accent-strong)); }
.recipe-card .card-source { margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: rgb(var(--ink-soft)); opacity: 0.85; }
.recipe-card .card-tags + .card-source { margin-top: 6px; }

/* ---------------------------------------------------------------------
   Order View: delivery window picker and checkout review
   --------------------------------------------------------------------- */
.kv { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.kv .k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); }
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; }
.days .day {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 12px; border-radius: 12px; border: 1px solid rgb(var(--border)); background: rgb(var(--card));
  font: inherit; font-size: 13px; color: rgb(var(--ink)); cursor: pointer;
}
.days .day small { font-size: 11px; color: rgb(var(--ink-soft)); }
.days .day:hover:not(:disabled) { border-color: rgb(var(--border-strong)); }
.days .day.on { box-shadow: inset 0 0 0 2px rgb(var(--ink)); border-color: transparent; }
.days .day:disabled { opacity: 0.5; cursor: default; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(var(--border)); background: rgb(var(--card));
  font: inherit; color: rgb(var(--ink)); cursor: pointer;
}
.slot:hover:not(:disabled) { border-color: rgb(var(--border-strong)); background: rgb(var(--card-soft)); }
.slot:disabled { opacity: 0.45; cursor: not-allowed; }
.slot.held { border-color: rgb(var(--success)); background: rgb(var(--success-soft)); }
.slot.busy { opacity: 1; box-shadow: inset 0 0 0 2px rgb(var(--ink)); }
.slot-time { font-weight: 600; font-size: 14px; }
.slot-meta { font-size: 11.5px; color: rgb(var(--ink-mid)); }
.slot .live { font-size: 12px; margin-top: 2px; }
table.cart.review td:first-child { color: rgb(var(--ink-mid)); }
.btn.primary.armed { background: rgb(var(--danger)); }

/* Recipe from URL: the review screen reuses the recipe view's hero and panels, with an editable title and ingredient table */
.recipe-hero.from-url .title-field { margin: 6px 0 12px; }
.recipe-hero.from-url input.title { width: 100%; font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.15; height: auto; padding: 8px 12px; }
.recipe-hero.from-url .hero-img.broken { display: none; }
.recipe-hero.from-url .how { margin-top: 12px; }
.recipe-hero.from-url .notice { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--card-soft)); font-size: 13px; line-height: 1.5; }
.recipe-hero.from-url .notice.warn { background: rgb(var(--warning-soft)); color: rgb(var(--warning)); }
.recipe-hero.from-url .notice a { color: inherit; font-weight: 600; }
table.ingredients.from-url td.raw { font-size: 12px; line-height: 1.35; color: rgb(var(--ink-mid)); padding-right: 10px; }
table.ingredients.from-url td.raw .grp { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: rgb(var(--ink-soft)); }
/* Stacked: the ingredient table needs the full width for its name, "as written", qty and unit columns; method, notes and photos follow underneath */
.recipe-body.from-url { grid-template-columns: minmax(0, 1fr); }
.recipe-body.from-url > div > .panel:first-child { margin-top: 20px; }
table.ingredients.from-url td.qty { width: 96px; }
table.ingredients.from-url td.unit { width: 110px; }
table.ingredients.from-url td:first-child { width: 34%; }
table.ingredients.from-url input.name { min-width: 180px; }
.review-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }

/* Pantry: category tabs with counts */
.pantry-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.pantry-tabs .btn.toggle .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 999px; font-size: 11px; font-variant-numeric: tabular-nums; background: rgb(var(--card-soft)); color: rgb(var(--ink-mid)); }
.pantry-tabs .btn.toggle.on .count { background: rgb(var(--ink)); color: rgb(var(--cream)); }

/* ---------------------------------------------------------------------
   Login (shared passphrase)
   --------------------------------------------------------------------- */
.login { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(var(--page)); }
.login-card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border-radius: 16px; background: rgb(var(--card)); box-shadow: 0 0 0 1px rgb(var(--border-subtle)), 0 20px 40px -20px rgb(var(--ink) / 0.25); }
.login-card .brand-mark { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgb(var(--ink)); color: rgb(var(--cream)); }
.login-card .brand-mark svg { width: 22px; height: 22px; }
.login-card h1 { font-family: var(--font-display); font-size: 26px; margin: 4px 0 0; }
.login-card p { margin: 0 0 8px; }
.login-card input { height: 48px; font-size: 16px; }
.login-error { color: rgb(var(--danger)); font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------------
   Phone (installed as a PWA): safe areas, tighter padding, scrolling tables
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sidebar { padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .sidebar-inner { padding: 4px 4px 4px 0; border-radius: 12px; }
  .brand { padding: 8px 10px; }
  .brand-name { display: none; }
  .sidebar nav a { padding: 8px 10px; font-size: 13px; }
  .page { padding: 14px 12px calc(32px + env(safe-area-inset-bottom)); }
  .panel { padding: 16px 14px; border-radius: 14px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
  .page-head h1, h1.display { font-size: 26px; }
  .actions { gap: 8px; }
  .btn.large { height: 44px; padding: 0 18px; font-size: 15px; }
  table.order-items, table.ingredients { font-size: 13px; }
  .steps { gap: 6px 0; }
  .step { flex: 1 1 100px; padding-right: 10px; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  input, select, textarea { font-size: 16px; } /* stops iOS zooming into fields */
}
@media (max-width: 640px) {
  /* Shopping list editor: give the item name the room, shrink the number and unit fields */
  table.ingredients td.qty { width: 62px; }
  table.ingredients td.unit { width: 72px; }
  table.ingredients td.qty input { padding: 0 8px; }
  table.ingredients td.unit select { padding-left: 8px; padding-right: 22px; background-position: right 6px center; }
  table.ingredients input.name { min-width: 0; }
  table.ingredients th.src-head, table.ingredients td.src { display: none; }
}