/* Vorrat components. Each block styles one component from public/ui.js. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font: var(--weight-regular) var(--text-md) / var(--leading-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* App shell */
.masthead { font: var(--weight-regular) 1.125rem/1 var(--font-serif); letter-spacing: 0.02em; text-align: center; padding: calc(var(--space-4) + env(safe-area-inset-top)) 0 0; color: var(--text); }
.shell { max-width: 34rem; margin: 0 auto; padding: var(--space-5) max(var(--space-4), env(safe-area-inset-right)) calc(var(--tabbar-height) + var(--space-7) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left)); display: grid; gap: var(--space-6); }
/* The page itself never scrolls, so iOS cannot slide the tabs and sticky bars away from the screen edge */
.app-frame { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.app-frame .shell { padding-bottom: var(--space-7); }
.app-frame .dock { bottom: var(--space-3); }
.app-frame .tabs { position: static; flex: none; }
.stack { display: grid; gap: var(--space-3); min-width: 0; }
.stack-lg { display: grid; gap: var(--space-6); min-width: 0; }
.columns { display: grid; gap: var(--space-6); min-width: 0; }

/* Text */
.title { font: var(--weight-light) var(--text-2xl) / var(--leading-tight) var(--font-serif); letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
.heading { font: var(--weight-regular) var(--text-xl) / 1.15 var(--font-serif); letter-spacing: -0.01em; text-wrap: balance; }
.course { font: italic var(--weight-regular) 1.0625rem/1.3 var(--font-serif); color: var(--text-soft); }
.lead { font-size: var(--text-md); color: var(--text-soft); }
.soft { color: var(--text-soft); }
.small { font-size: var(--text-sm); }
.fine { color: var(--text-soft); font-size: var(--text-xs); }
.num { font-variant-numeric: tabular-nums; }
.center { text-align: center; justify-items: center; }

/* Icon: functional only */
.icon { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); padding: var(--space-2) var(--space-4);
  font: var(--weight-medium) var(--text-md) / 1.2 var(--font-ui);
  color: var(--action); background: transparent;
  border: var(--rule) solid var(--border-strong); border-radius: var(--radius-none);
  text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation;
  transition: opacity var(--fast);
}
.btn:active { opacity: 0.6; }
.btn-primary { background: var(--action); color: var(--on-action); min-height: 56px; width: 100%; }
.btn-quiet { border-color: var(--border); color: var(--text-soft); }
.btn-link { border: 0; min-height: 44px; padding: var(--space-2) 0; justify-content: flex-start; color: var(--text); text-decoration: underline; text-decoration-thickness: var(--rule); text-underline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn-row .btn { flex: 1 1 auto; }

/* Inputs */
.field { display: grid; gap: var(--space-1); font-weight: var(--weight-medium); font-size: var(--text-sm); min-width: 0; }
.input { font: var(--weight-regular) 1.0625rem/1.3 var(--font-ui); color: var(--text); background: transparent; border: 0; border-bottom: var(--rule) solid var(--border-strong); border-radius: var(--radius-none); padding: var(--space-2) 0; width: 100%; min-height: var(--tap-min); min-width: 0; -webkit-appearance: none; appearance: none; }
.input:focus { outline: none; border-bottom-width: 2px; }
.input::placeholder { color: var(--text-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.input-row { display: flex; gap: var(--space-2); align-items: flex-end; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.chips legend { font-weight: var(--weight-medium); font-size: var(--text-sm); padding: 0; margin-bottom: var(--space-2); }
.chip input { position: absolute; opacity: 0; }
.chip span { display: block; padding: var(--space-2) var(--space-4); border: var(--rule) solid var(--border); cursor: pointer; }
.chip input:checked + span { background: var(--action); border-color: var(--action); color: var(--on-action); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hero: the one thing to do, set like the top of a menu */
.hero { display: grid; gap: var(--space-3); text-align: center; justify-items: center; }
.hero .steps, .hero .amounts { text-align: left; justify-self: stretch; }
.hero .btn-primary { margin-top: var(--space-3); }

/* Section: hairline separation instead of boxes */
.card { border-top: var(--rule) solid var(--border-strong); padding-top: var(--space-4); display: grid; gap: var(--space-3); min-width: 0; }
.card-attention { border-color: var(--attention); }
.card-attention .heading { color: var(--attention); }
.card-caution { border-color: var(--caution); }
.card-caution .heading { color: var(--caution); }

/* Dish image */
.dish { margin: 0; display: grid; gap: var(--space-1); width: 100%; }
.dish img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-sunken); }
.dish figcaption { font-size: var(--text-xs); color: var(--text-soft); text-align: left; }

/* Issue tones: each class sets the field and the text for whatever sits inside */
.tone-olive { --tone: var(--tone-olive); --on-tone: var(--on-tone-olive); }
.tone-brick { --tone: var(--tone-brick); --on-tone: var(--on-tone-brick); }
.tone-ochre { --tone: var(--tone-ochre); --on-tone: var(--on-tone-ochre); }
.tone-charcoal { --tone: var(--tone-charcoal); --on-tone: var(--on-tone-charcoal); }

/* Issue cover: the one bold moment in the app, finished without a photo */
.cover { display: grid; gap: var(--space-5); padding: var(--space-5); background: var(--tone); color: var(--on-tone); min-width: 0; }
.cover-type { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); min-height: min(62dvh, 32rem); min-width: 0; }
.cover-date { font: italic var(--weight-regular) 1.0625rem/1.3 var(--font-serif); padding-bottom: var(--space-3); border-bottom: var(--rule) solid var(--on-tone); }
.cover-title { align-self: end; font: var(--weight-light) clamp(3.25rem, 15.5vw, 6.5rem) / 0.98 var(--font-serif); letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.cover-lede { font: var(--weight-regular) var(--text-lg) / 1.3 var(--font-serif); max-width: 32ch; text-wrap: pretty; }
.cover .dish figcaption { color: var(--on-tone); }
.cover-photo .cover-type { min-height: 0; }

/* Issue header: the cover's quiet form, once the issue is live */
.issue-head { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 3px solid var(--tone); }
.issue-head + .title { margin-top: calc(var(--space-2) * -1); }

.issue-line { font-size: var(--text-sm); }
.issue-line a { color: var(--text-soft); text-decoration-thickness: var(--rule); text-underline-offset: 3px; padding-block: 0.8em; }

/* Found dish */
.found-mark { font: italic var(--weight-regular) 1.0625rem/1.3 var(--font-serif); color: var(--accent); }
.source-credit { font-size: var(--text-sm); color: var(--text-soft); overflow-wrap: anywhere; }
.source-credit a { color: var(--text); text-decoration-thickness: var(--rule); text-underline-offset: 3px; padding-block: 0.8em; }

/* Facts line */
.meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--text-soft); font-size: var(--text-sm); }
.hero .meta { justify-content: center; }

/* Recipe */
.amounts li { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--rule) solid var(--border); }
.amounts span { color: var(--text-soft); white-space: nowrap; }
.steps { padding-left: 1.2rem; display: grid; gap: var(--space-2); }
details > summary { color: var(--text); min-height: 44px; display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; font-weight: var(--weight-medium); }
details > summary::-webkit-details-marker { display: none; }
details .icon { transition: transform var(--fast) var(--ease); }
details[open] .icon { transform: rotate(90deg); }
details > div { display: grid; gap: var(--space-3); padding-bottom: var(--space-2); }

/* Nutrition summary */
.nutrition { display: grid; gap: var(--space-2); }
.gauge-label { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-soft); }
.gauge-label b { font-weight: var(--weight-medium); color: var(--text); }
.gauge { height: 2px; background: var(--border); margin-top: var(--space-1); }
.gauge i { display: block; height: 100%; background: var(--text); transition: width var(--medium) var(--ease); }
.gauge-good i { background: var(--good); }

/* Day card: courses of the day */
.day { display: grid; }
.slot { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-bottom: var(--rule) solid var(--border); }
.slot > span { font: italic var(--weight-regular) 1rem/1.4 var(--font-serif); color: var(--text-soft); }
.tag { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--attention); margin-top: 2px; }

/* Week bars: one bar per cook, spanning the days it feeds */
.week { display: grid; gap: var(--space-1) 2px; }
.week-day { font-size: var(--text-xs); color: var(--text-soft); text-align: center; }
.pot { grid-row: 2; height: 32px; background: var(--series); color: var(--surface); display: flex; align-items: center; padding-left: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.series-0 { --series: var(--series-0); } .series-1 { --series: var(--series-1); } .series-2 { --series: var(--series-2); } .series-3 { --series: var(--series-3); }
.pot-cooked { opacity: 0.4; }

/* Shopping: plain, left-aligned, built for a moving hand */
.shop-head { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: calc(var(--space-2) + env(safe-area-inset-top)) 0 var(--space-2); display: grid; gap: var(--space-2); }
.shop-head .title { font-size: var(--text-xl); }
.shell > .shop-head + .shop-note { margin-top: calc(var(--space-5) * -1); }
.aisle { display: grid; }
.aisle-title { font: italic var(--weight-regular) 1.1875rem/1.3 var(--font-serif); color: var(--accent); padding-bottom: var(--space-1); border-bottom: var(--rule) solid var(--border-strong); }
.aisle-hint { padding-top: var(--space-2); }
.aisle-check .aisle-title { color: var(--caution); }
.item { display: flex; align-items: center; border-bottom: var(--rule) solid var(--border); min-width: 0; }
.item-tick { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); background: none; border: 0; color: inherit; font: inherit; text-align: left; padding: var(--space-3) 0; min-height: 66px; cursor: pointer; touch-action: manipulation; }
.item-box { flex: none; width: var(--tap-check); height: var(--tap-check); border: 1.5px solid var(--border-strong); border-radius: var(--radius-full); display: grid; place-items: center; color: var(--on-action); transition: background var(--fast); }
.item-box .icon { opacity: 0; width: 20px; height: 20px; stroke-width: 2.25; }
.item-text { min-width: 0; display: grid; }
.item-text b { font-size: 1.125rem; font-weight: var(--weight-medium); line-height: 1.25; }
.item-text small { color: var(--text-soft); font-size: var(--text-sm); overflow-wrap: anywhere; }
.item-qty { color: var(--text); font-weight: var(--weight-medium); }
.item-done .item-box { background: var(--action); border-color: var(--action); }
.item-done .item-box .icon { opacity: 1; }
.item-done .item-text { opacity: 0.45; text-decoration: line-through; }
.item-side { flex: none; font: var(--weight-regular) var(--text-sm) var(--font-ui); color: var(--text-soft); background: none; border: 0; padding: var(--space-3) 0 var(--space-3) var(--space-3); min-height: var(--tap-min); cursor: pointer; }
.dock { position: sticky; bottom: calc(var(--tabbar-height) + var(--space-3) + env(safe-area-inset-bottom)); z-index: 2; }

/* Rows and household indicator */
.row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: var(--rule) solid var(--border); padding: var(--space-2) 0; min-height: 56px; min-width: 0; }
.row > div { min-width: 0; display: grid; gap: 2px; }
.row b { font-weight: var(--weight-medium); }
.row small { color: var(--text-soft); font-size: var(--text-sm); }
.row .btn { min-height: 40px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.meter { display: flex; gap: 2px; width: 64px; }
.meter i { flex: 1; height: 2px; background: var(--border); }
.meter-good i.on { background: var(--good); }
.meter-caution i.on { background: var(--caution); }
.meter-low i.on { background: var(--attention); }

/* Tab bar */
.tabs { position: fixed; inset: auto 0 0 0; z-index: 5; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: var(--rule) solid var(--border-strong); padding-bottom: env(safe-area-inset-bottom); }
.tabs:empty { display: none; }
.wordmark { display: none; }
.tab { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: var(--tabbar-height); color: var(--text-soft); font-size: var(--text-sm); text-decoration: none; }
.tab-on { color: var(--text); font-weight: var(--weight-bold); }
.badge { font-size: var(--text-xs); color: var(--attention); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* Sheet: the one dialog pattern */
.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 34rem; max-height: 88dvh; color: var(--text); background: var(--surface); border-top: var(--rule) solid var(--border-strong); }
.sheet::backdrop { background: var(--scrim); }
.sheet-body { padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom)); display: grid; gap: var(--space-4); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }

/* States */
.state { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) 0; }
.banner { display: flex; gap: var(--space-2); align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-top: var(--rule) solid var(--attention); border-bottom: var(--rule) solid var(--attention); color: var(--attention); }
.banner-offline { color: var(--caution); border-color: var(--caution); }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; background: var(--action); color: var(--on-action); padding: var(--space-2) var(--space-4); width: max-content; max-width: calc(100vw - 2rem); }
.skeleton { display: grid; gap: var(--space-3); justify-items: center; padding-top: var(--space-6); }
.skeleton i { display: block; height: 14px; width: 60%; background: var(--surface-sunken); }
.skeleton i:first-child { height: 36px; width: 80%; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton i { animation: pulse 1.2s var(--ease) infinite alternate; }
  .sheet[open] { animation: rise var(--medium) var(--ease); }
  .toast { animation: fade var(--medium) var(--ease); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@keyframes pulse { to { opacity: 0.45; } }
@keyframes rise { from { translate: 0 16px; opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* Desktop: tab bar becomes a side rail, screens get a second column */
@media (min-width: 960px) {
  body { padding-left: 200px; }
  .app-frame .tabs { position: fixed; }
  .masthead { display: none; }
  .shell { max-width: 60rem; padding: var(--space-7) var(--space-6); }
  .tabs { inset: 0 auto 0 0; width: 200px; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6) var(--space-5); border-top: 0; border-right: var(--rule) solid var(--border); }
  .wordmark { display: block; font: var(--weight-regular) 1.625rem/1 var(--font-serif); padding-bottom: var(--space-5); }
  .tab { justify-content: space-between; min-height: 40px; }
  .columns { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-7); align-items: start; }
  .shop-head { padding-top: 0; }
  .dock { bottom: var(--space-4); }
  .toast { bottom: var(--space-5); }
  .sheet { margin: auto; max-width: 28rem; border: var(--rule) solid var(--border-strong); }
  .cover { padding: var(--space-6); }
  .cover-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-6); }
  .cover-photo .cover-title { font-size: 4.5rem; }
  .aisles { columns: 2; column-gap: var(--space-7); }
  .aisles .aisle { break-inside: avoid; margin-bottom: var(--space-5); }
}

/* A title and its lead read as one unit */
.shell > .title + .lead { margin-top: calc(var(--space-5) * -1); }
.aisles { display: grid; gap: var(--space-5); min-width: 0; }
@media (min-width: 960px) { .aisles { display: block; } }
.slot-actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.slot-actions .btn-link { min-height: 36px; padding: var(--space-1) 0; font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-soft); }
.book-entry { border-top: var(--rule) solid var(--border); padding-top: var(--space-3); }
.sheet-tall { height: 88dvh; }
.sheet-tall .sheet-head { position: sticky; top: 0; z-index: 1; background: var(--surface); padding-block: var(--space-2); }