/* Honigglas tokens; see design/screens.html. */

/* The design's fonts, self-hosted (Latin subset, SIL Open Font License, see
   app/assets/fonts) and precached by the service worker, so the offline shell keeps
   them. Bricolage Grotesque only in its heaviest cut for titles; Figtree for the rest. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/bricolage-grotesque-800-latin-629d6834.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/figtree-latin-f7c28c58.woff2") format("woff2");
}

:root {
  --f-display: "Bricolage Grotesque", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #fff8ec;
  --surface: #ffffff;
  --ink: #3a2a18;
  --muted: #8a7457;
  --line: #f0e2c8;
  --honey: #e1931a;
  --deep: #b8741a;
  --on-honey: #2b1a05;
  --glass: #ffffff;
  --alert: #bf3f2a;
  --alert-bg: #f8dfd9;
  --ok-bg: #eaf2dc;
  --ok: #5f8f35;
  --raise: #fdf1dc;
  --honey-soft: #fbe6c2;
  --toast: #3a2a18;
  --on-toast: #fff8ec;
  --scrim: rgba(58, 42, 24, 0.38);
  --fresh: #fdf0c8;
  --radius: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e160e;
    --surface: #2a1f14;
    --ink: #f6e9d4;
    --muted: #b79e7e;
    --line: #3a2c1e;
    --honey: #f2b13a;
    --deep: #c98a24;
    --glass: #2a1f14;
    --alert: #f0806a;
    --alert-bg: #3d211b;
    --ok-bg: #2b3320;
    --ok: #9cc46c;
    --raise: #33261a;
    --honey-soft: #4a3517;
    --toast: #f6e9d4;
    --on-toast: #1e160e;
    --scrim: rgba(0, 0, 0, 0.55);
    --fresh: #4a3a17;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.4;
}

a { color: var(--deep); font-weight: 600; }
h1 { margin: 0; font-family: var(--f-display); font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }

/* The Glas mark */
.glas .deep { fill: var(--deep); }
.glas .jar { fill: var(--glass); }
.glas .honey { fill: var(--honey); }
.glas .line { stroke: var(--ink); }
.glas .dot { fill: var(--ink); }

/* Centered single-purpose screens: first run, invite, sign-in */
.center {
  min-height: 100dvh;
  max-width: 420px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.line { margin: 0 0 8px; color: var(--muted); }
.small { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.stack { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.stack .small { text-align: center; }
.label { font-weight: 600; font-size: 14px; }

.field {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.field:focus { outline: none; border: 2px solid var(--honey); padding: 11px 13px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; }

.btn {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 700;
  padding: 13px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--honey);
  background: var(--honey);
  color: var(--on-honey);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn:disabled { opacity: 0.6; cursor: progress; }
form.button_to { margin: 0; }

.flash { width: 100%; margin: 0; padding: 10px 12px; border-radius: var(--radius); font-size: 14px; text-align: left; }
.flash-notice { background: var(--ok-bg); }
.flash-alert { background: var(--alert-bg); color: var(--alert); }

.codes {
  width: 100%;
  margin: 4px 0;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 17px;
  line-height: 1.8;
  columns: 2;
  text-align: center;
}

/* Settings-style pages (D4) */
.page {
  max-width: 560px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-head { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; }
.back { font-size: 14px; color: var(--muted); text-decoration: none; }
.page section { display: flex; flex-direction: column; gap: 10px; }
.sect {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
  border-bottom: 1px solid var(--line);
}
.row-label { display: flex; flex-direction: column; font-weight: 600; }
.row-label i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); }
.row-value { color: var(--muted); font-size: 14px; text-align: right; }
.invite { display: flex; flex-direction: column; gap: 8px; }
.quiet {
  margin-top: 18px;
  padding: 8px 0;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
}

/* Initial of the signed-in person, links to the settings */
.avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--honey);
  color: var(--on-honey);
  text-decoration: none;
}

/* Papierkorb: one deleted row with its Wiederherstellen */
.trash-restore { flex: none; }
.trash-restore .btn { width: auto; padding: 8px 12px; font-size: 14px; }

/* Rezeptseiten: a site switched off reads dimmed */
.row.off .row-label { opacity: 0.55; }

/* Mitteilungen (web push) in Einstellungen: a switch per row */
.push, .push > div, .push > form { display: flex; flex-direction: column; gap: 10px; }
.push .row { cursor: pointer; }
.push-hint { margin: 0; }
.switch {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 14px;
  background: var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform 0.15s;
}
.switch:checked { background: var(--honey); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; cursor: default; }
.switch:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch, .switch::after { transition: none; } }

/* Läden und Gruppen (D5) */
.row-link { color: inherit; text-decoration: none; font-weight: inherit; }
.sortable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sortable .row { padding: 0; gap: 4px; background: var(--bg); }
.sortable .row.dragging {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(58, 42, 24, 0.18);
}
.row-main {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.grip {
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 0;
  padding: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    linear-gradient(var(--muted) 0 2px, transparent 2px 4px, var(--muted) 4px 6px, transparent 6px 8px, var(--muted) 8px 10px)
    center / 16px 10px no-repeat;
  opacity: 0.65;
}
.grip:focus-visible { outline: 2px solid var(--honey); outline-offset: -6px; border-radius: 10px; opacity: 1; }
.dragging .grip { cursor: grabbing; opacity: 1; }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.add-row .field { flex: 1 1 12em; }
.row-select { width: auto; flex: none; padding-block: 8px; }
.row-selects { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.add-row .btn { width: auto; flex: none; }
.add-row .flash { flex-basis: 100%; }
.danger { color: var(--alert); }

/* Bücher (D6): the abbreviation as a small chip, like the source chips of the recipes */
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.book-row { flex-direction: row; align-items: baseline; gap: 8px; }
.book-abbr {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--honey-soft);
  color: var(--ink);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.add-row .book-abbr-field { flex: 0 1 8em; }
.checks { border: 0; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.checks legend { padding: 0 0 6px; }
.check { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--honey); flex: none; }

/* Neuer Haushalt (L5) */
.center.top { justify-content: flex-start; padding-top: max(48px, env(safe-area-inset-top)); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--honey); border-color: var(--honey); color: var(--on-honey); }
.chip:has(input:focus-visible) { outline: 2px solid var(--honey); outline-offset: 2px; }
.chip.own { border-style: dashed; border-color: var(--muted); }
.own-field { display: flex; gap: 8px; }
.own-field .btn { width: auto; flex: none; }
.center .stack .btn[type=submit] { margin-top: 8px; }

/* Offline note on server-rendered pages */
.offline-note {
  margin: 0;
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

/* Keyboard focus is always visible in the app (the specific rules below may move it). */
:where(.einkauf) :where(button, a, [tabindex]):focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }

/* App shell (Einkauf and Sync-Test) */
.shell-loading { margin: 0; padding: 40vh 16px 0; text-align: center; color: var(--muted); }
.shell-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sync-line { margin: 0; font-size: 14px; color: var(--muted); }
.sync-error, .sync-signed_out { color: var(--alert); }
.rejection { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; }
.rejection .quiet { margin: 0; padding: 0 4px; color: inherit; font-weight: 700; }
.facts { margin: 0; display: flex; flex-direction: column; }
.fact { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fact dt { color: var(--muted); }
.fact dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.test-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: 8px; }
.test-buttons .btn { font-size: 14px; padding: 10px 12px; }
.outbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.outbox code { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* Einkauf (E1 to E10) */
html:has(.einkauf) { overflow-anchor: none; } /* the screen anchors itself, same on every browser */
.einkauf {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.e-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
  background: var(--bg);
}
.e-title { display: flex; align-items: center; gap: 8px; }
.e-title h1 { flex: 1; font-size: 26px; font-weight: 800; }
.e-avatars { display: flex; text-decoration: none; }
.e-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--honey);
  color: var(--on-honey);
  border: 2px solid var(--bg);
}
.e-av + .e-av { margin-left: -8px; background: var(--ink); color: var(--bg); }
/* "Was nervt?" (step 8): quiet, next to the initials */
.e-note-link {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid var(--line);
}
.e-note-link svg { width: 16px; height: 16px; }
.e-note-link:hover { color: var(--ink); }

.e-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 2px 16px;
  scrollbar-width: none;
  scroll-padding: 0 16px;
}
.e-tabs::-webkit-scrollbar { display: none; }
.e-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.e-tab i { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.e-tab.on { background: var(--honey); border-color: var(--honey); color: var(--on-honey); }
.e-tab.dim:not(.on) { opacity: 0.55; }
.e-tab.grp { border-style: dashed; border-color: var(--muted); }
.e-tab.grp.on { border-style: solid; border-color: var(--honey); }
.e-tab:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
/* The shop being shopped at: a small marker, the tab itself stays where it is. */
.e-here {
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--honey-soft);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}
.e-tab.on .e-here { background: var(--on-honey); color: var(--honey); }
.e-shop-h .e-here { margin-inline: 6px auto; align-self: center; }

/* E8: the calm status line. A small ring, muted text, never the alert colour. */
.e-status { margin: -2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.e-status:empty { display: none; }
.e-status span { display: inline-flex; align-items: center; gap: 7px; }
.e-status span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--muted); }
.e-status-signed_out span::before { border-color: var(--honey); }
.e-status a { color: var(--deep); }
.einkauf .flash-alert { background: var(--honey-soft); color: var(--ink); }

/* Add field (E4) */
.e-add-wrap { position: relative; display: flex; flex-direction: column; }
.e-add {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.e-add:focus-within { border: 2px solid var(--honey); padding: 0 11px; }
.e-plus {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--honey);
  color: var(--on-honey);
  font-weight: 700;
  line-height: 1;
}
.e-add-input {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming in */
}
.e-add-input::placeholder, .e-detail-input::placeholder { color: var(--muted); }
.e-suggest {
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: var(--surface);
  overflow: hidden;
}
.e-sug {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.e-sug.on { background: var(--raise); }
.e-sug mark { background: none; color: var(--deep); font-weight: 800; }
.e-shop {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--raise);
  color: var(--muted);
}
.e-sug.on .e-shop { background: var(--surface); }
.e-detail {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.e-detail.collapsed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.e-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.e-detail-field { display: flex; align-items: center; gap: 8px; }
.e-detail-input {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  outline: 0;
  background: var(--honey-soft);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}
.e-detail-input:focus-visible { box-shadow: 0 0 0 2px var(--honey); }
.e-clear, .e-close, .e-cancel {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.e-detail-foot { display: flex; justify-content: space-between; align-items: center; }
.e-from { font-size: 12px; color: var(--muted); }
.e-addbtn {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--honey);
  color: var(--on-honey);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Lists */
.e-body { padding: 0 16px; display: flex; flex-direction: column; }
.e-list { list-style: none; margin: 0; padding: 0; }
.e-shop-h {
  margin: 0;
  padding: 16px 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 17px;
  font-weight: 700;
}
.e-shop-h i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); }
.e-sect {
  margin: 0;
  padding: 18px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.e-quiet { margin: 0; padding: 14px 0; font-size: 13px; color: var(--muted); }
/* Im Wagen keeps its count in view on every tab (feedback round 1). */
.e-cart-h { margin-top: 10px; border-top: 2px solid var(--ok); justify-content: flex-start; gap: 8px; }
.e-cart-h i {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ok);
  color: var(--bg);
  font-size: 13px;
  text-align: center;
}
.e-swipe { position: relative; margin: 0 -16px; overflow: hidden; }
/* E5: what shows behind the row depends on the swipe direction (data-side). */
.e-acts { position: absolute; inset: 0; display: flex; justify-content: space-between; visibility: hidden; }
.e-swipe[data-side="move"] .e-acts { visibility: visible; background: var(--honey); }
.e-swipe[data-side="strike"] .e-acts { visibility: visible; background: var(--alert); }
.e-swipe[data-side="move"] .e-act.rm, .e-swipe[data-side="strike"] .e-act.mv { visibility: hidden; }
.e-act {
  width: 88px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.e-act.mv { color: var(--on-honey); }
.e-act.rm { color: var(--bg); }
/* Past the commit line a long swipe acts on release; the label says so by growing. */
.e-swipe.armed .e-act { font-size: 14px; }
.e-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 16px;
  background: var(--row-bg, var(--bg));
  border-bottom: 1px solid var(--line);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* Only the box checks off (feedback round 1); its target is the full row height and 44 px wide. */
.e-check {
  flex: none;
  width: 44px;
  min-height: 48px;
  margin: 0 -2px 0 -10px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.e-check:focus-visible { outline: 2px solid var(--honey); outline-offset: -4px; border-radius: 10px; }
.e-tap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 11px 0;
}
.e-box {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 2px solid var(--muted);
}
.done .e-box { background: var(--ok); border-color: var(--ok); }
.done .e-box::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px);
}
.e-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.e-name { font-weight: 600; }
.e-desc, .e-note {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.e-note { font-style: italic; }
.done .e-name { text-decoration: line-through; color: var(--muted); font-weight: 500; }
/* A checked row waits in place for a moment (CHECK_DELAY_MS), fading a little before it moves. */
.e-swipe.pending .e-txt { animation: e-pending 2s ease-in both; }
@keyframes e-pending {
  0%, 60% { opacity: 1; }
  100% { opacity: 0.55; }
}
.e-who {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
}
.e-who-hamster .glas { display: block; }
/* The row menu: quiet on touch (swipe and long press do the same), plain for mouse and keyboard. */
.e-more {
  flex: none;
  width: 32px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  letter-spacing: -1px;
  cursor: pointer;
  opacity: 0.45;
}
.e-more:focus-visible { outline: 2px solid var(--honey); opacity: 1; }
@media (hover: hover) { .e-row:hover .e-more { opacity: 1; } }
.e-finish { margin-top: 12px; }

/* E8: a change from the other phone glows warm for a moment, then fades. */
.e-swipe.fresh .e-row { animation: e-fresh 4s ease-out both; }
@keyframes e-fresh {
  0% { background: var(--row-bg, var(--bg)); }
  8%, 55% { background: var(--fresh); }
  100% { background: var(--row-bg, var(--bg)); }
}
@media (prefers-reduced-motion: reduce) {
  .e-swipe.fresh .e-row { animation: none; background: var(--fresh); }
  .e-row { transition: none !important; }
  .e-swipe.pending .e-txt { animation: none; }
}

/* Three-moves question (E7) */
.e-banner {
  margin: 8px 0 4px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  background: var(--honey-soft);
}
.e-banner p { margin: 0 0 8px; font-size: 14px; }
.e-btns { display: flex; gap: 8px; }
.e-btns .btn { padding: 8px 12px; font-size: 14px; }

/* "Meintest du …?" before a new item: under the field, one tap either way. */
.e-meant { margin: 6px 0 4px; padding: 12px; border-radius: 14px; background: var(--honey-soft); }
.e-meant p { margin: 0 0 8px; font-size: 15px; }
.e-meant i { font-style: normal; color: var(--muted); font-size: 13px; }
.e-meant .e-btns { flex-wrap: wrap; }
.e-meant .e-btns .btn { width: auto; }

/* Empty states (E10, L2) */
.e-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12vh 20px 30px;
  text-align: center;
}
.e-empty b { font-family: var(--f-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.e-empty p { margin: 0 0 8px; color: var(--muted); }
.e-empty .btn { width: auto; }

/* E11: wide layout for tablet and computer (the breakpoint is WIDE_QUERY in einkauf.jsx).
   A sidebar, and the shops side by side as columns that scroll on their own. */
.einkauf.wide {
  max-width: none;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: clamp(170px, 18vw, 220px) minmax(0, 1fr);
}
.e-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.e-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--f-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.e-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.e-side-link svg { width: 18px; height: 18px; flex: none; }
.e-side-link:hover { color: var(--ink); }
.e-side-link.on { background: var(--honey-soft); color: var(--ink); }
.e-side-link:focus-visible, .e-avatars:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.e-side-foot { margin-top: auto; padding: 0 6px; }
.e-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* Step F: the signed-in server pages get the same sidebar and grid on the wide layout
   (same breakpoint as WIDE_QUERY); on the phone they stay as they are. */
.with-side > .e-side { display: none; }
@media (min-width: 768px) and (min-height: 560px) {
  .with-side {
    display: grid;
    grid-template-columns: clamp(170px, 18vw, 220px) minmax(0, 1fr);
    min-height: 100dvh;
  }
  .with-side > .e-side { display: flex; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
  .side-main > .page {
    max-width: 460px;
    margin: 0;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 20px;
  }
  /* Wide pass (2026-10-19): the content sits on cards like Einkauf's shops. A page with
     several sections (.cards) lays them side by side; the others are one card. */
  .side-main > .page.cards {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    align-items: start;
    gap: 12px;
  }
  .side-main > .page.cards > :not(section) { grid-column: 1 / -1; }
  .side-main > .page.cards > .quiet { justify-self: start; margin-top: 6px; }
  .side-main > .page.cards > section, .side-main .page-card, .side-main > .center {
    --row-bg: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 12px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }
  .side-main .page-card { padding-top: 12px; }
  .side-main .page-card section { padding-top: 4px; }
  .side-main .page-card .quiet { margin-top: 4px; padding-bottom: 0; }
  .side-main > .page.cards .row-value { white-space: nowrap; }
  .side-main > .page.cards > section > .sect, .side-main .page-card .sect {
    margin: 0;
    padding: 14px 0 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink);
  }
  .side-main > .page.cards .field, .side-main .page-card .field, .side-main > .center .codes { background: var(--bg); }
  .side-main > .page.cards .sortable .row, .side-main .page-card .sortable .row { background: var(--surface); }
  .side-main > .center {
    max-width: 420px;
    min-height: 0;
    margin: max(16px, env(safe-area-inset-top)) 20px 24px;
    padding: 24px 20px;
  }
}
/* On the phone the card wrapper is no box at all, so the page stays as it was. */
.page-card { display: contents; }
.wide .e-head { position: static; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px 20px; }
.wide .e-title { gap: 16px; align-items: flex-start; }
.wide .e-title h1 { flex: none; padding-top: 6px; }
.e-head-add { flex: 1; max-width: 440px; margin-left: auto; }
/* The header field's suggestions and short line float over the columns instead of pushing them. */
.e-head-add .e-suggest, .e-head-add .e-detail:not(.collapsed) {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 10px 24px var(--scrim);
}
.e-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  align-items: start;
  gap: 12px;
  padding: 0 max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) 20px;
  overflow-x: auto;
}
.e-col {
  --row-bg: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  padding: 2px 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.e-col > .e-shop-h, .e-col > .e-add-wrap, .e-col-body > :not(.e-list) { margin-inline: 12px; }
.e-col > .e-add-wrap { margin-bottom: 4px; }
.e-col .e-add { background: var(--bg); }
.e-col-empty .e-shop-h { color: var(--muted); }
.e-col-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.e-col .e-swipe { margin: 0; }
.e-col .e-row { padding-left: 12px; }
.e-col .e-quiet { padding: 8px 0 0; }
.e-col .e-finish { width: calc(100% - 24px); }
.wide .e-more { opacity: 0.7; }
.e-empty.compact { padding: 0 20px 16px; gap: 4px; }
.e-empty.compact b { font-size: 19px; }
.e-empty.compact p { margin: 0; }
.wide .e-sheet {
  top: 50%;
  bottom: auto;
  max-width: 440px;
  transform: translateY(-50%);
  border-radius: 22px;
  padding-bottom: 18px;
}
.wide .e-grab { display: none; }

/* Toast, card and sheets */
.e-toast, .e-done {
  position: fixed;
  z-index: 20;
  left: 12px;
  right: 12px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 536px;
  margin: 0 auto;
}
.e-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--toast);
  color: var(--on-toast);
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.e-toast span { flex: 1; }
/* Als Vorrat führen? after Fertig in Zutaten durchgehen (E4): one quiet line of chips. */
.e-toast.has-offer { flex-wrap: wrap; }
.e-toast.over-sheet { z-index: 40; }
.e-toast-offer { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; opacity: 0.9; }
.e-toast .e-toast-chip {
  padding: 3px 10px;
  border: 1px solid var(--honey);
  border-radius: 999px;
  color: var(--on-toast);
  font-size: 13px;
  font-weight: 600;
}
.e-toast .e-toast-chip[aria-pressed="true"] { background: var(--honey); color: var(--on-honey); }
.e-toast button {
  flex: none;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--honey);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.e-done {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 -8px 24px var(--scrim);
}
.e-done > div { flex: 1; }
.e-done .e-sheet-title { font-family: var(--f-display); font-weight: 800; }
.e-done .e-hint { margin: 2px 0 6px; }
.e-undo { padding: 0; border: 0; background: none; color: var(--deep); font: inherit; font-weight: 700; cursor: pointer; }
.e-close { align-self: flex-start; font-size: 20px; line-height: 1; padding: 2px 4px; }
.e-layer { position: fixed; inset: 0; z-index: 30; }
.e-scrim { position: absolute; inset: 0; background: var(--scrim); }
.e-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  max-height: 85dvh;
  margin: 0 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--surface);
  outline: 0;
}
.e-grab { align-self: center; width: 38px; height: 4px; border-radius: 2px; background: var(--line); }
.e-sheet-title { margin: 4px 0 0; font-size: 19px; font-weight: 700; }
.e-hint { margin: -4px 0 2px; font-size: 13px; color: var(--muted); }
.e-chk { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 4px 0; }
.e-chk input { width: 22px; height: 22px; margin: 0; accent-color: var(--honey); }
.e-opts { display: flex; flex-direction: column; gap: 8px; }
.e-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.e-opt i { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); }
.e-opt.cur { opacity: 0.55; cursor: default; }
.e-opt.danger { color: var(--alert); }
/* The list sheet from "···" (feedback round 2): Artikel bearbeiten on top, set apart from the shops. */
.btn.ghost.e-edit { display: flex; align-items: center; justify-content: center; gap: 8px; border-color: var(--honey); color: var(--deep); }
.e-edit svg { width: 18px; height: 18px; }
.e-edit + .e-opts { margin-top: 12px; }
.e-menge { margin-top: 12px; }
.e-menge + .e-opts { margin-top: 12px; }
.e-sheet-sect { padding: 8px 0 0; }
.e-cancel { padding: 8px 0 0; }
.p-missing { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--honey-soft); color: var(--ink); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.e-rest { margin: 4px 0 12px; }
.e-trip-rest { margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.e-rest-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.e-rest-row .btn { width: auto; flex: none; padding: 8px 14px; font-size: 14px; }
.e-rest-done { margin-top: 4px; }

/* Was nervt? (step 8): the text field and the household's latest notes */
.note-field { resize: vertical; min-height: 7.5em; line-height: 1.4; }
.notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.note { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.note-meta { font-size: 13px; color: var(--muted); }
.note-text { margin: 2px 0 0; overflow-wrap: anywhere; }
.note-add { align-self: flex-start; }
.note-status { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--ok-bg); color: var(--ok); }
.note-status.again { background: var(--alert-bg); color: var(--alert); }
.note-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.note-done p { margin: 0; overflow-wrap: anywhere; }
.note-done .note-status { margin-left: 0; }
.note-again { width: auto; min-height: 36px; padding: 4px 14px; font-size: 14px; }
.note-thumbs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.note-thumb { position: relative; width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--raise); }
.note-thumb a { display: block; width: 100%; height: 100%; }
.note-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lightbox { border: 0; padding: 0; margin: auto; max-width: 100vw; max-height: 100dvh; background: transparent; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.85); }
.lightbox img { display: block; max-width: 100vw; max-height: 100dvh; object-fit: contain; }
.note-thumb-x { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; border: 0; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }

/* The item sheet (D1, minimal): fields, facts, Zusammenführen and Artikel löschen */
.e-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.e-fld { display: flex; flex-direction: column; gap: 5px; }
.e-fld .e-lbl i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.e-note-field { resize: vertical; min-height: 3.2em; line-height: 1.4; font-style: italic; }
.e-taken { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.e-facts { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.e-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.e-facts dt { font-weight: 600; flex: none; }
.e-facts dd { margin: 0; color: var(--muted); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.e-sect-tight { padding: 4px 0 0; }
.e-cand .e-txt { flex: 1; min-width: 0; }
.e-cand .e-desc { font-weight: 500; }

/* The pantry part of the item sheet (phase 2/3 step A): Ort, Als Vorrat führen, Stand or
   Anzahl, the amount now, Erinnern ab and Packung. The level colours pair with the label. */
.e-pantry { display: flex; flex-direction: column; gap: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--raise); }
.e-seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.e-seg button { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 6px 16px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.e-seg button[aria-pressed="true"] { background: var(--honey); color: var(--on-honey); }
.e-levels button.lv-full[aria-pressed="true"] { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.e-levels button.lv-low[aria-pressed="true"] { background: var(--honey-soft); border-color: var(--honey); color: var(--ink); }
.e-levels button.lv-out[aria-pressed="true"] { background: var(--alert-bg); border-color: var(--alert); color: var(--alert); }
.e-stock { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.e-stock-place { font-weight: 600; }
.e-step { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.e-step button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--raise); color: var(--ink); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.e-step button:disabled { opacity: 0.4; cursor: default; }
.e-step-n { min-width: 2.5em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.e-ask { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.e-ask .field { width: 6em; }
.e-chk-sub span { display: flex; flex-direction: column; }
.e-chk-sub i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); }
.e-left { align-self: flex-start; }
.e-unit { max-width: 12em; }

button.e-side-link { border: 0; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }

/* E13: where the bought things went */
.e-land { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.e-land b { font-weight: 700; }

/* Vorrat (V1 to V9) */
.v-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-by { display: flex; align-items: center; gap: 6px; }
.v-by-l { font-size: 13px; color: var(--muted); }
.v-by .e-tab { padding: 5px 11px; }
.pull {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--honey-soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.pull:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.v-item { border-bottom: 1px solid var(--line); }
.v-row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
/* Auf die Liste (feedback round 1): a swipe right shows the honey button behind the row. */
.v-swipe { position: relative; overflow: hidden; overflow: clip; }
.v-swipe > .v-row {
  position: relative;
  z-index: 1;
  gap: 6px;
  background: var(--row-bg, var(--bg));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.v-swipe[data-side="move"] .e-acts { visibility: visible; background: var(--honey); }
.v-swipe.armed .e-act { font-size: 14px; }
.e-desc.v-onlist { color: var(--deep); font-weight: 600; }
.v-name {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.v-name:focus-visible { outline: 2px solid var(--honey); outline-offset: -2px; border-radius: 8px; }
.v-fold { border: 0; background: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: var(--deep); font-weight: 700; }
/* Level segments: tap the one that is true now. The colour pairs with the word. */
.v-lvl { flex: none; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.v-s {
  min-width: 44px;
  min-height: 36px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.v-s.full.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.v-s.low.on { background: var(--honey-soft); border-color: var(--honey); color: var(--ink); }
.v-s.out.on { background: var(--alert-bg); border-color: var(--alert); color: var(--alert); }
.v-cnt { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.v-cnt button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--raise); color: var(--ink); font: inherit; font-size: 19px; font-weight: 700; cursor: pointer; }
.v-cnt button:disabled { opacity: 0.4; cursor: default; }
.v-cnt b { min-width: 2.2em; text-align: center; font-variant-numeric: tabular-nums; }
.v-cnt.low b { color: var(--deep); }
.v-s:focus-visible, .v-cnt button:focus-visible { outline: 2px solid var(--honey); outline-offset: 1px; }
/* V3: the list offer, right under the row */
.v-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--honey-soft);
  font-size: 14px;
}
.v-offer span { flex: 1 1 12em; }

/* Verbraucht box (V4, V5, L4) */
.v-used-input { margin-top: 2px; }
.v-qrow { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 1px solid var(--line); }
.v-pick {
  flex: none;
  min-width: 56px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.v-pick.low { border-color: var(--honey); }
.v-pick.out { border-color: var(--alert); color: var(--alert); }
.v-pick.track { font-size: 13px; font-weight: 600; }
.v-missing { padding-top: 8px; }
.v-missing .e-btns { flex-wrap: wrap; justify-content: center; }
.v-track { display: flex; flex-direction: column; gap: 12px; }
.v-tri { display: flex; gap: 6px; flex-wrap: wrap; }
.v-tri button {
  flex: 1 1 0;
  min-width: 64px;
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.v-tri button:disabled { opacity: 0.4; cursor: default; }
.v-tri button.on.ok, .v-tri button.lv-full.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.v-tri button.lv-low.on { background: var(--honey-soft); border-color: var(--honey); }
.v-tri button.lv-out.on { background: var(--alert-bg); border-color: var(--alert); color: var(--alert); }
.v-num { flex: 1 1 0; display: grid; place-items: center; font-size: 22px; font-variant-numeric: tabular-nums; }

/* Inventur (step B2, V6 merged in) */
.v-back { align-self: flex-start; color: var(--deep); font-weight: 700; text-decoration: none; }
.v-check-head .e-title h1 { font-size: 26px; font-weight: 800; }
.v-prog { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.v-prog i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--honey) var(--p), var(--line) var(--p)); }
.v-chk.done .e-name::after { content: " ✓"; color: var(--ok); }
/* Counted is not bought: the name stays as it is, the tick says it. */
.v-chk.done .e-name { text-decoration: none; color: var(--ink); font-weight: 600; }
.v-check-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.v-check-foot .btn { flex: 1; }

/* V8: Vorrat wide, the groups side by side, the Verbraucht box behind the header field */
.vorrat.wide .e-title { align-items: center; }
.vorrat.wide .e-title h1 { padding-top: 0; }
.v-used-field { flex: 1; max-width: 440px; margin-left: auto; min-height: 44px; color: var(--muted); font: inherit; cursor: pointer; text-align: left; }
.vorrat.wide .e-cols { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); overflow-x: hidden; overflow-y: auto; }
.vorrat.wide .e-col { max-height: none; }
.vorrat.wide .e-col-body { padding: 0 12px; }
.v-checkview { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.v-inv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-inv-tabs { margin-top: 2px; }
.e-tab.done:not(.on) { border-color: var(--ok); color: var(--ok); }
.e-tab.done::after { content: "✓"; font-size: 12px; }
.v-inv-acts { display: flex; justify-content: flex-end; gap: 4px 14px; margin-top: -6px; padding-bottom: 6px; }
.v-act { min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--deep); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.v-act.on { color: var(--ok); }
.v-act.gone { color: var(--muted); }
.v-act:disabled { opacity: 0.4; cursor: default; }
.v-act:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; border-radius: 6px; }
.v-qa { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.v-qa-pick { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.v-qa-pick .e-undo { align-self: flex-start; }
.v-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-chips button {
  flex: 1 0 40px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.v-chips button:focus-visible, .v-tri button:focus-visible { outline: 2px solid var(--honey); outline-offset: 1px; }
/* Inventur wide: the Orte in a left pane, the Ort being counted on the right. */
.v-checkview.wide { padding-bottom: 0; }
.v-inv-panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 20px;
  padding: 0 max(20px, env(safe-area-inset-right)) 0 20px;
}
.v-inv-side { min-height: 0; overflow-y: auto; padding-bottom: 20px; }
.v-inv-places { display: flex; flex-direction: column; gap: 6px; }
.v-inv-places .e-tab { width: 100%; justify-content: space-between; padding: 10px 12px; }
.v-inv-main { min-height: 0; max-width: 680px; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px; }
.v-inv-main .v-prog { margin-bottom: 4px; }
.wide .v-check-foot { position: sticky; max-width: none; margin: 16px 0 0; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); }

/* Rezepte (P5, P6, P7 to P11, L3; step C) */
button.pull { border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.r-search { gap: 8px; }
.r-search-icon { flex: none; color: var(--muted); }
.r-list li { border-bottom: 1px solid var(--line); }
.r-row { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 0; color: inherit; text-decoration: none; }
.r-row .e-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.r-count { flex: none; font-size: 13px; color: var(--muted); }
.r-src {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--honey-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.r-src-url { font-weight: 600; letter-spacing: 0; }
.r-src-text { font-weight: 600; font-style: italic; letter-spacing: 0; }
.r-head { gap: 4px; }
.r-back { align-self: flex-start; padding: 4px 0; }
.r-name { margin: 4px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.r-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--muted); }
.r-src-link { display: inline-flex; align-items: center; gap: 6px; color: var(--deep); font-weight: 600; }
.r-ing { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; }
.r-stock { flex: none; padding: 2px 8px; border-radius: 8px; background: var(--ok-bg); color: var(--ink); font-size: 12px; font-weight: 600; }
.r-stock.low { background: var(--honey-soft); }
.r-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; }
.r-actions .btn, .r-tools .btn, .r-bulk .btn { width: auto; padding: 9px 14px; font-size: 15px; }
.r-notes-text { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.r-steps { margin: 0; padding-left: 1.4em; line-height: 1.5; }
.r-steps li + li { margin-top: 8px; }
.r-body { max-width: 640px; }
.r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r-page { max-width: 9em; }
.r-newbook { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--raise); }
.r-newbook .field { flex: 1 1 10em; }
.r-newbook .r-abbr { flex: 0 1 6em; }
.r-newbook .btn { width: auto; padding: 10px 14px; }
.r-newbook .e-hint { flex-basis: 100%; margin: 0; }
.r-tag-add { display: flex; gap: 8px; }
.r-tag-add .btn { width: auto; flex: none; padding: 10px 16px; }
.r-notes { resize: vertical; line-height: 1.45; }
.r-delete { align-self: flex-start; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.danger-btn { background: var(--alert); border-color: var(--alert); color: #fff; }
.r-editor { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }
.r-sub { margin: -6px 0 0; }
.r-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.r-draft {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Review (feedback round 1): the simple result big, the line as read small below. */
.r-draft-item { border-bottom: 1px solid var(--line); }
.r-draft-item .r-draft { border-bottom: 0; }
.r-orig { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.r-own { display: block; min-height: 32px; margin: -6px 0 6px; font-size: 13px; text-align: left; }
.r-flag { flex: none; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.r-flag-new { background: var(--fresh); color: var(--ink); }
.r-flag-check { background: var(--honey-soft); color: var(--deep); border: 1px dashed var(--deep); }
.r-bulk {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px -16px 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.r-paste { min-height: 10em; line-height: 1.45; font-size: 15px; }
.r-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.r-pair .btn { padding: 10px 12px; font-size: 14px; }
.r-cands { margin: 0; border-top: 1px solid var(--line); border-radius: 14px; }
.wide .r-head { padding-top: 18px; }
.r-bar { display: flex; align-items: center; gap: 8px; }
.r-bar .r-search { flex: 1; min-width: 0; }
.r-add { padding: 9px 14px; }
.btn.ghost.danger { color: var(--alert); }
.wide .r-bar { max-width: 640px; }

/* Plan (P1 to P4, P12, E12; step D) */
.p-has-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.wide.p-has-foot { padding-bottom: 0; }
.p-bar { justify-content: flex-end; }
.p-line { margin: 4px 0 0; }
.p-dish { display: flex; align-items: center; gap: 8px; min-height: 60px; padding-left: 16px; border-bottom: 1px solid var(--line); }
.p-tick { margin: 0 -2px 0 -10px; }
.p-tick .e-box { border-radius: 50%; }
.p-dish.cooked .e-box { background: var(--ok); border-color: var(--ok); }
.p-dish.cooked .e-box::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: rotate(-45deg) translate(1px, -1px);
}
.p-dish.cooked .p-dish-txt { opacity: 0.6; }
.p-dish.waiting .e-desc { color: var(--deep); font-weight: 600; }
.p-dish-txt { flex: 1; min-width: 0; display: flex; padding: 10px 0; color: inherit; text-decoration: none; }
.p-dish-txt .e-desc { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; white-space: normal; }
.p-dish .e-more { opacity: 1; }
/* An open dish swipes: left for gekocht (green), right for verworfen (red). */
.p-dish-swipe > .p-dish {
  position: relative;
  z-index: 1;
  background: var(--row-bg, var(--bg));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.p-dish-swipe[data-side="move"] .e-acts { background: var(--alert); }
.p-dish-swipe[data-side="strike"] .e-acts { visibility: visible; background: var(--ok); }
.p-dish-swipe[data-side="move"] .e-act.ok, .p-dish-swipe[data-side="strike"] .e-act.rm { visibility: hidden; }
.p-sort {
  width: 100%;
  margin: 10px 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--honey);
  border-radius: 14px;
  background: var(--honey-soft);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.p-sort > span { display: flex; flex-direction: column; min-width: 0; }
.p-sort:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
.p-foot .btn { text-align: center; text-decoration: none; }
.p-prog { margin: 6px 0 4px; }
.p-prog .r-src { margin-right: 4px; }
.p-choice { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.p-choice .e-desc { white-space: normal; }
.p-tri button { font-size: 15px; min-height: 42px; }
.p-tri button.on { background: var(--honey-soft); border-color: var(--honey); }
.p-tri button.on.ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
/* Zutaten durchgehen (feedback round 2): swipe right for auf die Liste (honey), left clears it. */
.p-swipe[data-side="strike"] .e-acts { visibility: visible; background: var(--muted); }
.p-swipe[data-side="move"] .e-act.off, .p-swipe[data-side="strike"] .e-act.mv { visibility: hidden; }
.e-act.ok, .e-act.off { color: var(--bg); }
.p-answer-btn { flex-direction: row; align-items: center; gap: 10px; }
.p-answer-btn .e-desc { white-space: normal; }
.p-answer {
  flex: none;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.p-answer.list { max-width: 55%; overflow: hidden; text-overflow: ellipsis; background: var(--honey-soft); border-color: var(--honey); color: var(--ink); }
/* In den Plan (owner, 2026-10-21): an empty outlined "Liste" on a row not chosen, so it
   reads as tappable; the kicker over the recipe's name and the hint over the rows. */
.p-answer.off { border-color: var(--line); color: var(--muted); }
.p-kicker { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.p-kicker + .r-name { margin-top: 0; }
.p-source { margin: 4px 0 0; }
.p-check-hint { margin: 10px 0 4px; font-size: 14px; color: var(--muted); }
.p-check-hint b { color: var(--ink); white-space: nowrap; }
/* Feedback round 2: an item on a list already, and its amount field once it goes auf die Liste. */
.p-answer.on-list { max-width: 45%; overflow: hidden; text-overflow: ellipsis; border-color: var(--line); color: var(--muted); }
.p-amount { padding: 0 0 10px; }
/* Wohin damit? (feedback round 2): shop chips that wrap, for all at once and per item. */
.p-where-all, .p-where .v-by { flex-wrap: wrap; }
.p-where-all { margin: 8px 0 4px; }
.p-where { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.p-amount .field { width: 9em; flex: none; padding: 6px 10px; }
.p-amount .field:focus { padding: 5px 9px; }
.p-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--muted); }
.p-rest { max-height: 56vh; overflow-y: auto; margin-bottom: 8px; }
.p-first { margin: 8px 0 0; }
.p-without { padding: 0; border: 0; background: none; color: var(--deep); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.p-pick { max-height: 50vh; overflow-y: auto; }
/* Passt zum Vorrat in + Gericht (owner, 2026-10-20). */
.p-suggest { margin-bottom: 4px; }
.p-suggest-list { margin-bottom: 10px; }
.p-suggest-group { font-size: 13px; font-weight: 600; color: var(--muted); }
.p-suggestion { text-align: left; }
.p-suggestion .e-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-suggestion .e-name i { margin-left: 6px; font-size: 12px; color: var(--deep); }
.p-suggestion .e-desc { font-weight: 500; }
.p-without { display: block; margin-bottom: 10px; }
/* Hat's geschmeckt?: the line under Lieber nicht */
.p-taste .e-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.p-taste .e-desc { font-weight: 500; color: var(--muted); }

.p-prep { display: flex; align-items: center; gap: 8px; min-height: 56px; padding-left: 16px; border-bottom: 1px solid var(--line); }
.p-prep .e-check { margin: 0 -2px 0 -10px; }
.p-prep.done .e-name { text-decoration: none; color: var(--ink); font-weight: 600; }
.p-prep.done .e-desc { color: var(--ok); font-weight: 600; }
.p-asked { flex-direction: row; }
.p-asked > div { flex: 1; min-width: 0; }
.p-asked-list { list-style: none; margin: 0; padding: 0; }
.p-asked-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.p-asked-list .e-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-asked-list .e-btns { flex: none; }
.e-wide-banner { max-width: 560px; }
.r-li { display: flex; align-items: center; gap: 10px; }
.r-li .r-row { flex: 1; min-width: 0; }
.r-plan { text-decoration: none; }
.r-inplan { margin-right: 6px; color: var(--ok); font-weight: 700; }
.r-klassiker { margin-right: 6px; color: var(--deep); font-weight: 700; }
.r-new { margin-right: 6px; color: var(--ok); font-weight: 700; }
.r-klassiker-switch { margin-block: 4px 8px; }
.r-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A recipe swipes: left for löschen (red), right for in den Plan (honey, like + Plan). */
.r-swipe > .r-li {
  position: relative;
  z-index: 1;
  background: var(--row-bg, var(--bg));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.r-swipe[data-side="strike"] .e-acts { visibility: visible; background: var(--alert); }
.r-swipe[data-side="move"] .e-act.rm, .r-swipe[data-side="strike"] .e-act.mv { visibility: hidden; }
@media (hover: hover) { .r-li:hover .e-more { opacity: 1; } }
.r-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.r-title-row .r-name { flex: 1; min-width: 0; }
.r-title-row .pull { text-decoration: none; }
.p-asked-list .btn { white-space: nowrap; padding: 6px 10px; }

/* Wide pass (2026-10-19): recipes and dishes as cards in a grid, the columns as wide as
   Einkauf's shops; the recipe page puts Zutaten next to Kurzfassung and Notizen. On the
   phone the recipe page's two parts are no box at all. */
.r-part { display: contents; }
.rezepte.wide .r-body, .plan.wide .r-body, .wide .r-body:has(> .r-page-body) { max-width: none; padding-inline: 20px; }
.rezepte.wide .e-tabs { flex-wrap: wrap; }
.rezepte.wide .i-notice, .plan.wide .i-notice, .plan.wide .p-sort, .plan.wide .p-foot { max-width: 640px; }
.rezepte.wide .r-list, .plan.wide .e-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  padding-bottom: 20px;
}
.rezepte.wide .r-list li, .plan.wide .p-dish-item, .wide .r-part {
  --row-bg: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.rezepte.wide .r-swipe, .rezepte.wide .r-li, .plan.wide .p-dish-swipe, .plan.wide .p-dish { height: 100%; }
/* The name gets the card's full width; + Plan and "···" sit on the count's line. */
.rezepte.wide .r-li { display: block; position: relative; }
.rezepte.wide .r-row { height: 100%; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 12px 12px 10px; }
.rezepte.wide .r-row .e-name { font-size: 17px; font-weight: 700; }
.rezepte.wide .r-li > .r-plan { position: absolute; right: 44px; bottom: 3px; }
.rezepte.wide .r-li > .e-more { position: absolute; right: 6px; bottom: 3px; height: 32px; }
.plan.wide .p-dish { border-bottom: 0; }
.plan.wide .p-foot { position: static; margin: 0 0 12px; padding: 0; border: 0; background: none; }
.plan.wide section .e-shop-h { justify-content: flex-start; gap: 8px; padding-top: 8px; }
.wide .r-page-body {
  max-width: 932px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
  gap: 12px;
  padding-bottom: 20px;
}
.wide .r-page-body > :not(.r-part) { grid-column: 1 / -1; }
.wide .r-part { display: flex; flex-direction: column; padding: 0 12px 8px; }
.wide .r-part .e-sect { padding: 14px 0 6px; font-size: 17px; letter-spacing: normal; text-transform: none; color: var(--ink); }
.wide .r-part .e-sect + .e-sect, .wide .r-part :is(.r-steps, .r-notes-text) + .e-sect { padding-top: 18px; }

/* Haltbar (2026-10-19): small chips in the creation dialogs and the item sheet. */
.v-shelf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-shelf-chips .e-tab { padding: 6px 10px; font-size: 13px; }
.v-shelf.small .v-shelf-chips .e-tab { padding: 4px 9px; }
.v-shelf-own { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.v-shelf-own .field { width: 5em; padding: 5px 8px; }
.v-stocked { margin: -4px 0 0; }
/* Haltbar: Bald verbrauchen on top of Vorrat, the badge on Vorrat, the plan's hint. */
.v-due { margin-bottom: 8px; }
.v-due .e-shop-h { color: var(--deep); }
.v-due-row.over .v-name > .e-desc:nth-child(2) { color: var(--alert); font-weight: 600; }
.v-due-row.soon .v-name > .e-desc:nth-child(2) { color: var(--deep); font-weight: 600; }
.e-cols + .v-due, .e-main > .v-due { margin-inline: 16px; }
.e-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--alert);
  color: #fff;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: 2px;
  font-variant-numeric: tabular-nums;
}
.e-side-link .e-badge, .e-side-link .e-dot { margin-left: auto; vertical-align: 0; }
.e-side-gap { margin-top: 12px; }

/* Step F: the bottom bar on the phone (Einkauf, Vorrat, Verbraucht, Plan, Rezepte). It
   steps aside while the keyboard is up; toasts, the E13 card and the Plan's button sit
   above it while it shows (html.with-bar). */
:root { --bar-h: 59px; }
.e-tabbar {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  max-width: 560px;
  margin: 0 auto;
  padding: 6px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  background: var(--surface);
  border-top: 1px solid var(--line);
  transition: transform 160ms ease, visibility 0s linear 0s;
}
.e-tabbar.away { transform: translateY(110%); visibility: hidden; transition: transform 160ms ease, visibility 0s linear 160ms; }
.e-bar-item {
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.e-bar-item.on { color: var(--deep); }
.e-bar-item:hover { color: var(--ink); }
.e-bar-item:focus-visible { outline: 2px solid var(--honey); outline-offset: -2px; border-radius: 10px; }
.e-bar-icon { position: relative; display: grid; place-items: center; }
.e-bar-icon svg { width: 22px; height: 22px; }
.e-bar-icon .e-badge { position: absolute; top: -6px; left: 14px; margin: 0; vertical-align: 0; box-shadow: 0 0 0 2px var(--surface); }
.e-bar-icon .e-dot { position: absolute; top: -2px; left: 17px; border: 2px solid var(--surface); }
.e-bar-used { color: var(--ink); }
.e-bar-round {
  width: 54px;
  height: 54px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--honey);
  border: 4px solid var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.e-bar-round svg { width: 32px; height: 32px; }
.e-bar-used:active .e-bar-round { transform: scale(0.94); }
.e-bar-used:focus-visible { outline: 0; }
.e-bar-used:focus-visible .e-bar-round { outline: 2px solid var(--ink); outline-offset: 2px; }
.e-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--deep); box-sizing: content-box; }
.e-side-link .e-dot { border: 0; }
.with-bar .e-toast, .with-bar .e-done { bottom: calc(var(--bar-h) + 26px + env(safe-area-inset-bottom)); }
.with-bar .p-foot { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: 12px; }
.with-bar .p-has-foot { padding-bottom: calc(var(--bar-h) + 96px + env(safe-area-inset-bottom)); }
.with-bar .r-bulk { bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
@media (prefers-reduced-motion: reduce) {
  .e-tabbar, .e-tabbar.away { transition: none; }
  .e-bar-used:active .e-bar-round { transform: none; }
}
.v-due-hint { color: var(--deep); font-weight: 600; }
.v-due-row .v-name > .e-desc { white-space: normal; overflow: visible; }

/* Step E: import from photos (the sheet, the drafts, the review, product photos) */
.r-adds { display: inline-flex; gap: 6px; flex: none; }
.i-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.i-pick .btn { width: auto; flex: 1; }
.i-pick .btn[aria-pressed="true"] { background: var(--honey); border-color: var(--honey); color: var(--on-honey); }
.i-link-row { display: flex; gap: 8px; }
.i-link-row .btn { width: auto; flex: none; padding: 10px 16px; }
.i-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.i-thumb { position: relative; display: flex; flex-direction: column; gap: 4px; }
.i-thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--honey-soft); }
.i-thumb.joined img { border: 2px solid var(--honey); }
.i-remove { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.i-join { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); }
.i-join input { margin: 1px 0 0; accent-color: var(--honey); }
.i-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.i-switch span { display: flex; flex-direction: column; }
.i-switch i { font-style: normal; font-size: 13px; color: var(--muted); }
.i-switch .switch { flex: none; }
.i-cost { margin: 0; }
.i-notice { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-align: left; font: inherit; cursor: pointer; }
.i-notice.ready { background: var(--honey-soft); border-color: var(--honey); }
.i-notice > span { display: flex; flex-direction: column; }
.i-drafts { margin: 0; }
.i-draft-open { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.i-draft-open { cursor: pointer; }
.i-draft-open .e-txt { flex: 1; }
.i-badge { margin: 0; font-size: 13px; font-weight: 700; color: var(--deep); }
.i-problem { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--honey-soft); font-weight: 600; }
.i-fields { margin: 8px 0 12px; }
.i-products { margin: 4px 0 6px; align-items: center; }
.i-german { margin: 4px 0 0; }
.v-qa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Einstellungen (owner, 2026-10-20): the parts of Für mich and the small group labels */
.sect.sub { margin-top: 8px; font-size: 11px; }
.settings-group { margin: 6px 0 -4px; font-weight: 600; }

/* Hamster fragen as a sheet (owner, 2026-10-21; Kummerkasten 14): everything stacked in
   one column, the cards full width (title, site and why, then the buttons). Classes of
   its own (ask-), so no older rule lays it out; spec/javascript/stylesheet.test.js
   checks that. One recommended recipe shows larger. */
.ask-entry { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.ask-entry-btns { display: flex; gap: 8px; }
.ask-entry-btns .btn { flex: 1 1 auto; width: auto; padding-inline: 12px; white-space: nowrap; }
.ask-entry .e-hint { margin: 0; }
.ask-dot { margin-left: 6px; vertical-align: 1px; }
.ask-sheet { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.ask-sheet .e-hint { margin: 0; }
.ask-wishes { display: flex; flex-direction: column; gap: 8px; }
.ask-for { font-weight: 600; color: var(--ink); }
.ask-searching { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 8px; text-align: center; }
.ask-searching b { font-size: 17px; }
.ask-searching p { margin: 0; font-size: 14px; color: var(--muted); }
.ask-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ask-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.ask-title { color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none; overflow-wrap: break-word; }
.ask-why { font-size: 14px; color: var(--muted); overflow-wrap: break-word; }
.ask-site { color: var(--deep); font-weight: 600; }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ask-acts .btn { width: auto; flex: 1 1 auto; padding: 10px 14px; }
.ask-list.one .ask-card { padding: 16px; }
.ask-list.one .ask-title { font-size: 20px; }