/* Vorratskammer – "shelves" design.
   One loud element: the stock count, set like a shelf label; hollow when the jar is empty. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap;
  src: url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap;
  src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }

:root {
  --kachel: #E4EBE8;   /* page: pale larder tile */
  --row:    #FFFFFF;   /* item rows */
  --tinte:  #1B2A27;   /* text */
  --flasche:#2C5B4C;   /* bottle green: shelf edge, actions */
  --senf:   #E3A92B;   /* mustard: restock */
  --grau:   #677A75;   /* secondary text */
  --fuge:   #CBD6D2;   /* grout lines */
  --danger: #A8321F;
  --on-flasche: #FFFFFF;

  --sans: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --step: 2.75rem;     /* touch target */
}
@media (prefers-color-scheme: dark) {
  :root {
    --kachel: #13201D; --row: #1B2B27; --tinte: #E3ECE8; --flasche: #74B99D;
    --senf: #E8B23A; --grau: #93A6A0; --fuge: #2A3D38; --danger: #F08A76;
    --on-flasche: #0F1C19;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--kachel); color: var(--tinte);
  font: 400 1.0625rem/1.45 var(--sans);
}
main { max-width: 40rem; margin: 0 auto; padding: 0 1rem 4rem; }
a { color: var(--flasche); }
:focus-visible { outline: 3px solid var(--senf); outline-offset: 2px; border-radius: 4px; }
/* Touch: no double-tap zoom on quick repeated taps, no grey tap flash (we have :active styles) */
a, button, summary, input, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Top bar ------------------------------------------------------------ */
.top {
  max-width: 40rem; margin: 0 auto; padding: 1.1rem 1rem .9rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.brand {
  font: 800 1.9rem/1 var(--cond); letter-spacing: -.01em;
  color: var(--tinte); text-decoration: none;
}
.top-tools { display: flex; align-items: baseline; gap: 1.1rem; font-size: .95rem; color: var(--grau); }
.lang-switch { display: flex; gap: .15rem; }
.lang-switch > * { padding: .4rem .55rem; border-radius: 4px; font-weight: 600; text-decoration: none; }
.lang-switch a { color: var(--grau); }
.lang-switch [aria-current] { background: var(--tinte); color: var(--kachel); }
.who { display: flex; align-items: baseline; gap: .6rem; margin: 0; }

/* ---- Controls ----------------------------------------------------------- */
input, select, button { font: inherit; color: inherit; }
input, select {
  min-height: var(--step); padding: .4rem .7rem; min-width: 0;
  background: var(--row); border: 1.5px solid var(--fuge); border-radius: 6px;
}
input:focus, select:focus { border-color: var(--flasche); outline: none; }
.btn {
  min-height: var(--step); padding: .4rem 1rem; cursor: pointer; white-space: nowrap;
  background: transparent; border: 1.5px solid var(--flasche); border-radius: 6px;
  color: var(--flasche); font-weight: 600;
}
.btn.primary { background: var(--flasche); color: var(--on-flasche); }
.btn.danger { border-color: transparent; color: var(--danger); padding-inline: 0; }
button.link { background: none; border: 0; padding: .4rem 0; color: var(--flasche); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Messages float at the bottom, where the thumb just was, and fade after a while */
.flashes {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  max-width: 40rem; margin: 0 auto; padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
  display: grid; gap: .5rem; pointer-events: none;
}
.flash {
  pointer-events: auto; cursor: pointer;
  padding: .8rem 1rem; border-left: 5px solid var(--senf);
  background: var(--tinte); color: var(--kachel); border-radius: 0 6px 6px 0;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--tinte) 45%, transparent);
  animation: flash-out .4s ease-in 6s forwards;
}
@keyframes flash-out { to { opacity: 0; visibility: hidden; } }

/* ---- View switch & category jump --------------------------------------- */
/* Stays at the top while scrolling long shelves on a phone */
.bar {
  position: sticky; top: 0; z-index: 4;
  margin: 0 -1rem 1rem; padding: .5rem 1rem .1rem;
  background: var(--kachel);
}
.views {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0;
  background: var(--kachel);
  border: 1.5px solid var(--flasche); border-radius: 8px; overflow: hidden;
}
.views a {
  padding: .65rem .5rem; text-align: center; text-decoration: none; font-weight: 600;
  color: var(--flasche);
}
.views a[aria-current] { background: var(--flasche); color: var(--on-flasche); }
.badge {
  display: inline-block; min-width: 1.5em; padding: 0 .4em; margin-left: .25em;
  border-radius: 1em; background: var(--senf); color: #1B2A27;
  font: 800 .95rem/1.5 var(--cond); text-align: center;
}
.jump {
  display: flex; gap: 0 1.1rem; overflow-x: auto; margin: .2rem 0 0;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.jump::-webkit-scrollbar { display: none; }
.jump a { padding: .5rem 0; white-space: nowrap; color: var(--grau); font-weight: 500; text-decoration: none; }
.jump a:hover { color: var(--flasche); }

.all-there { font: 600 1.5rem/1.2 var(--cond); color: var(--grau); margin: 2.5rem 0; text-align: center; }

/* ---- Shelf -------------------------------------------------------------- */
.shelf { margin: 0 0 2.25rem; scroll-margin-top: 7rem; }
.shelf-head { display: flex; align-items: baseline; gap: .75rem; padding: 0 .1rem .4rem; }
.shelf-head h2 { margin: 0; font: 800 1.75rem/1.05 var(--cond); letter-spacing: -.005em; }
.meta { color: var(--grau); font-size: .9rem; margin: 0; }
.shelf-head .menu { margin-left: auto; }

.items {
  list-style: none; margin: 0; padding: 0;
  background: var(--row);
  border-radius: 6px 6px 0 0;
  border-bottom: 7px solid var(--flasche);          /* the shelf board */
  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--flasche) 18%, transparent); /* its shadow on the tiles */
}
.item {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
  padding: .45rem .35rem .45rem 1rem; scroll-margin-top: 8rem;
}
.item + .item { border-top: 1px solid var(--fuge); }
.item.none { color: var(--grau); padding-block: .9rem; }
.name { flex: 1 1 7rem; min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }

/* On the shopping list: mustard notch on the left edge */
.item.on-list::before {
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem;
  width: 5px; border-radius: 0 3px 3px 0; background: var(--senf);
}
.item.is-empty .name { color: var(--grau); }
.item .name .meta { display: block; font-size: .85rem; }
.item > form { margin: 0; }
.bought, .step { -webkit-user-select: none; user-select: none; }
.bought {
  width: var(--step); height: var(--step); margin-left: .25rem; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: var(--flasche); color: var(--on-flasche);
  font: 600 1.25rem/1 var(--sans);
}

/* ---- The count: the one loud element ------------------------------------ */
.qty { display: flex; align-items: center; gap: .1rem; }
.qty form { margin: 0; }
.count {
  width: 3rem; min-height: var(--step); padding: 0; border: 0; background: transparent;
  text-align: center; font: 800 2.1rem/1 var(--cond); font-variant-numeric: tabular-nums;
  color: var(--tinte); caret-color: var(--flasche);
  -moz-appearance: textfield; appearance: textfield;
}
.count::-webkit-inner-spin-button, .count::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.count:focus { background: var(--kachel); border-radius: 6px; }
/* Empty jar: hollow numeral (solid again while typing) */
.is-empty .count:not(:focus) { color: transparent; -webkit-text-stroke: 1.5px var(--senf); }

.step {
  width: var(--step); height: var(--step); padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: transparent; color: var(--flasche);
  font: 600 1.7rem/1 var(--cond);
}
.step:hover:not(:disabled) { background: var(--kachel); }
.step:active:not(:disabled) { background: var(--flasche); color: var(--on-flasche); }
.step:disabled { color: var(--fuge); cursor: default; }

/* Feedback: the row you just changed glows once */
.item:target, .item.changed { animation: changed 1.4s ease-out; }
@keyframes changed { from { background: color-mix(in srgb, var(--senf) 35%, var(--row)); } to { background: var(--row); } }
@media (prefers-reduced-motion: reduce) { .item:target, .item.changed { animation: none; } }

/* ---- Einkaufsliste: compact rows, small category labels ----------------- */
.shopping { --step: 2.25rem; }
.shopping .group-head {
  margin: 1rem 0 .2rem; padding: 0 .1rem;
  font: 600 .95rem/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase;
  color: var(--grau); scroll-margin-top: 7rem;
}
.shopping .group-head:first-child { margin-top: 0; }
.shopping .items { border-bottom-width: 4px; box-shadow: none; }
.shopping .item { flex-wrap: nowrap; padding: .1rem .3rem .1rem .85rem; gap: .35rem; }
.shopping .name { flex: 1 1 auto; line-height: 1.25; }
.shopping .item .name .meta { display: inline; font-size: .8rem; margin-left: .3rem; white-space: nowrap; }
.shopping .count { width: 2.4rem; font-size: 1.6rem; }
.shopping .step { font-size: 1.45rem; }
.shopping .bought { font-size: 1.05rem; margin-left: .15rem; }
.shopping .add { margin-top: 1rem; }

/* ---- Overflow menus ----------------------------------------------------- */
.menu > summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 2.5rem; height: var(--step); border-radius: 6px;
  color: var(--grau); font-size: .55rem; letter-spacing: .12em;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--kachel); color: var(--tinte); }
.menu { position: relative; }
.menu-body {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
  width: min(22rem, calc(100vw - 2rem));
  display: grid; gap: .6rem; padding: .9rem;
  background: var(--row); border: 1.5px solid var(--fuge); border-radius: 8px;
  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--tinte) 12%, transparent);
}
.menu-body form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.menu-body input, .menu-body select { flex: 1 1 9rem; }

/* ---- Add forms ---------------------------------------------------------- */
.add { display: flex; gap: .5rem; margin: 1.1rem 0 0; }
.add input { flex: 1; background: transparent; border-style: dashed; }
.add input:focus { background: var(--row); border-style: solid; }

.new-category { margin-top: 3rem; padding-top: 1.5rem; border-top: 1.5px solid var(--fuge); }
.new-category h2 { margin: 0; font: 600 1.35rem/1.1 var(--cond); }

/* ---- Login -------------------------------------------------------------- */
.login { max-width: 20rem; margin: 3rem auto; display: grid; gap: 1rem; }
.login h1 { margin: 0 0 .25rem; font: 800 2.4rem/1 var(--cond); }
.login label { display: grid; gap: .3rem; font-weight: 500; }
.login .btn { margin-top: .5rem; }

/* Phones: tighter gutters so name, stepper and ✓ stay on one line */
@media (max-width: 26rem) {
  main, .top { padding-inline: .75rem; }
  .bar { margin-inline: -.75rem; padding-inline: .75rem; }
  .flashes { padding-inline: .75rem; }
  .item { padding-left: .85rem; gap: .25rem .35rem; }
  .name { flex-basis: 5rem; }
  .shelf-head h2 { font-size: 1.55rem; }
}
@media (max-width: 22rem) {
  .count { width: 2.5rem; }
  .bought { margin-left: 0; }
}
.menu-body input[name="name"] { flex-basis: 100%; }