/* 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);
}

/* The second level of grouping. Sentence case against the parent's small caps, so the two
   read as heading and sub-heading at a glance rather than as two headings the same size. */
.family-sub-head {
  margin: 0.9em 0 0.35em;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--st-forest-dark);
}

/* Where you are, above the name of the place you are in. */
.crumb { margin: 0 0 0.2em; font-size: 0.85em; }
.crumb a { color: var(--st-muted); }

.row-arrow { flex: 0 0 auto; color: var(--st-muted); font-size: 1.3em; padding: 0 0.3em; }

/* 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-parent { flex: 1 1 8em; }
.family-count { color: var(--st-muted); font-size: 0.82em; }

/* A child family is indented and marked, so the list reads as a tree without needing a
   second level of markup that a narrow screen would only have to unwrap again. */
.family-row-child { padding-left: 1.6em; border-left: 3px solid var(--st-line); }

/* ---- 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; }

/* The children of whichever family is in play. Quieter than the row above it, and indented,
   so it reads as belonging to the chip that opened it. */
.chips-sub { margin-left: 1.2em; margin-top: -0.2em; }
.chips-sub .chip { font-size: 0.85em; padding: 0.35em 0.75em; }
.chips-sub .chip-on { background: var(--st-forest-dark); border-color: var(--st-forest-dark); }

/* ---- 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; }
}