/* Palette: sampled from the artwork rather than chosen beside it, so the landing image and
   the interface around it are the same picture. The four that carry meaning are the deep
   green of the mark's ground, the cream of the jar, the terracotta of the wheat ear and the
   amber of the oil bottle; the red is a darker relative of the terracotta, far enough from
   it to still read as a warning.

   Written for a phone held in one hand in front of a shelf -- every control that changes a
   number is at least 44px, and a wider screen only ever gets more columns, never a
   different layout. */
:root {
  --st-ink: #26332c;
  --st-forest: #1e4c33;
  --st-forest-dark: #163a27;
  --st-terracotta: #c66135;
  --st-amber: #d38c22;
  --st-muted: #74806f;
  --st-paper: #fbf3e1;
  --st-card: #ffffff;
  --st-line: #e7dcc4;
  --st-red: #a8402c;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--st-ink);
  background: var(--st-paper);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1em 0.8em 3em;
}

h1, h2 { color: var(--st-forest-dark); }
h1 { font-size: 1.3em; margin: 0 0 0.6em; }
h2 { font-size: 1.05em; margin: 0 0 0.5em; }

a { color: var(--st-forest-dark); }

p { line-height: 1.45; }

.hint { color: var(--st-muted); font-size: 0.85em; margin-top: -0.2em; }
.hint a { color: var(--st-muted); }
.error { color: var(--st-red); font-weight: 600; }

/* ---- buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 0.4em;
  background: var(--st-forest);
  color: #fff;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.btn-secondary { background: transparent; color: var(--st-forest-dark); border: 1px solid var(--st-line); }
.btn-danger { background: var(--st-red); color: #fff; border: none; }
.btn-small { min-height: 36px; padding: 0.35em 0.7em; font-size: 0.9em; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6em; margin: 1em 0; }

.page-link { margin: 1.4em 0 0; }
.back-link { margin: 1.8em 0 0; font-size: 0.9em; }

/* ---- cards ---- */

.card {
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: 10px;
  padding: 0.9em 1em;
  margin: 0 0 1em;
}

.card h1, .card h2 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

/* A list card holds its own dividers, so it has no padding of its own. */
.card-list { padding: 0; overflow: hidden; }
.card-danger { border-color: #e3c6bd; }
.card-cta { text-align: center; }
.card-privacy { background: #fdfaf3; }
.card-total { text-align: center; }

.total-count { font-size: 1.4em; font-weight: 700; margin: 0.2em 0; }
.total-amount { color: var(--st-muted); margin: 0 0 0.2em; }

/* ---- what wants attention, at the top of the home screen ---- */

.card-attention { background: #fdf9ef; border-color: #e8dcbe; }
.card-attention h2 { margin-bottom: 0.4em; }

.attention-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8em;
  min-height: 40px;
  padding: 0.3em 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #eee4cd;
}

.attention-row:last-child { border-bottom: none; }
.attention-name { font-weight: 600; }
.attention-note { color: var(--st-muted); font-size: 0.85em; text-align: right; }

/* Coming up in amber, past its date in red -- but never the color alone: the past-date row
   says "Past its date" in words, and the amber one is showing a date the reader can judge
   for themselves. */
.is-soon { color: var(--st-amber); }
.is-past { color: var(--st-red); }

/* ---- landing ---- */

.hero { text-align: center; margin: 0.5em 0 1.4em; }
.hero img { max-width: 520px; width: 100%; height: auto; border-radius: 12px; }
.hero h1 { font-size: 1.7em; margin: 0.3em 0 0.2em; }
.hero-tagline { color: var(--st-muted); margin: 0; }
.steps { margin: 0; padding-left: 1.2em; line-height: 1.5; }
.steps li { margin-bottom: 0.5em; }

/* ---- the storage grid on the home screen ---- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8em;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4em;
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: 10px;
  padding: 0.9em 0.6em;
  text-decoration: none;
  color: inherit;
}

.tile-name { font-weight: 600; }
.tile-sub { color: var(--st-muted); font-size: 0.85em; }

.tile-add { border-style: dashed; justify-content: center; color: var(--st-muted); }
.tile-plus { font-size: 2.4em; line-height: 1; color: var(--st-forest); }

/* ---- pictures ---- */

/* The stored picture keeps its own proportions; the square is the frame, so a portrait
   photograph of a label sits in a tidy grid without having been cropped on the way in. */
.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--st-paper);
}

.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.thumb-empty {
  color: var(--st-forest);
  font-weight: 700;
  font-size: 1.1em;
  border: 1px solid var(--st-line);
}

.thumb-tile { width: 84px; height: 84px; border-radius: 10px; font-size: 2em; }
.thumb-head { width: 96px; height: 96px; border-radius: 10px; font-size: 2.2em; }

.place-head, .item-head { display: flex; gap: 0.9em; align-items: flex-start; margin-bottom: 1em; }
.place-head-text, .item-head-text { min-width: 0; }
.place-head h1, .item-head h1 { margin-bottom: 0.3em; word-break: break-word; }
.place-head p, .item-head p { margin: 0.2em 0; }

.current-image { display: flex; align-items: center; gap: 0.8em; margin: 0.6em 0 1em; }

/* ---- rows of things ---- */

.family-head {
  margin: 1.4em 0 0.5em;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--st-muted);
}

/* Tight horizontally on purpose: the stepper takes a fixed ~100px whatever the screen, so
   every millimeter saved here is a millimeter the item's name gets before it has to wrap. */
.stock-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.6em;
  border-bottom: 1px solid var(--st-line);
}

.stock-row:last-child { border-bottom: none; }

.stock-main {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}

.stock-text { display: flex; flex-direction: column; min-width: 0; }
.stock-name { font-weight: 600; overflow-wrap: break-word; }
.stock-sub { color: var(--st-muted); font-size: 0.82em; }

.on-hand {
  flex: 0 0 auto;
  min-width: 2.2em;
  text-align: center;
  font-weight: 700;
  color: var(--st-forest);
}

.on-hand-zero { color: var(--st-line); }

/* ---- the one-more / one-fewer control ---- */

.stepper { display: flex; align-items: center; gap: 0.1em; flex: 0 0 auto; margin: 0; }

.step {
  width: 44px;
  height: 44px;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  border-radius: 8px;
  font-size: 1.3em;
  line-height: 1;
  color: var(--st-forest-dark);
  cursor: pointer;
}

.step:active { background: var(--st-paper); }

.step-count { min-width: 1.5em; text-align: center; font-weight: 700; }

.step-wide { width: auto; min-width: 56px; padding: 0 0.7em; font-size: 1.1em; }
.step-just-added { background: var(--st-terracotta); border-color: var(--st-terracotta); color: #fff; font-size: 0.9em; }

/* The date under a place on the item page: a continuation of the row above it, not a row
   in its own right, so it is quieter and carries no divider of its own. */
.stock-row-sub {
  gap: 0.5em;
  padding-top: 0;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--st-line);
  margin: -0.4em 0 0;
  flex-wrap: wrap;
}

.stock-row-sub:last-child { border-bottom: none; }
.date-label { color: var(--st-muted); font-size: 0.82em; }
.stock-row-sub input[type=date] { flex: 1 1 8em; min-width: 8em; }

/* ---- forms ---- */

.field { display: block; margin: 0 0 0.9em; }
.field > span { display: block; font-size: 0.85em; color: var(--st-muted); margin-bottom: 0.25em; }

input[type=text], input[type=search], input[type=number], input[type=date], select {
  width: 100%;
  min-height: 44px;
  padding: 0.5em 0.6em;
  border: 1px solid var(--st-line);
  border-radius: 8px;
  font-size: 1em;
  font-family: inherit;
  color: inherit;
  background: var(--st-card);
}

input[type=file] { width: 100%; font-size: 0.95em; }

.field-row { display: flex; gap: 0.7em; }
.field-narrow { flex: 1 1 0; }

.inline-form { display: flex; flex-wrap: wrap; gap: 0.7em; align-items: flex-end; }
.inline-form .field { flex: 1 1 10em; margin: 0; }
.inline-form .btn { flex: 0 0 auto; }

.filter { margin: 0; }

label.inline { display: inline-flex; align-items: center; gap: 0.35em; margin-right: 0.9em; line-height: 2.2; }

.family-row {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.8em;
  border-bottom: 1px solid var(--st-line);
  flex-wrap: wrap;
}

.family-row:last-child { border-bottom: none; }
.family-name { flex: 1 1 8em; }
.family-count { color: var(--st-muted); font-size: 0.82em; }

/* ---- family filter chips ---- */

.chips { display: flex; gap: 0.4em; overflow-x: auto; padding-bottom: 0.5em; margin-bottom: 0.5em; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 0.45em 0.9em;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-card);
  color: var(--st-forest-dark);
  text-decoration: none;
  font-size: 0.9em;
}

.chip-on { background: var(--st-forest); border-color: var(--st-forest); color: #fff; }

/* ---- wider than a phone: more columns, same everything else ---- */

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  main { padding: 1.2em 1em 3em; }
}