/* Ingredient Tracker — one stylesheet, mobile-first (a phone camera is the
   primary input, so the phone layout is the one that matters). */

:root {
  --ink: #14181c;
  --ink-soft: #55606b;
  --ink-faint: #8b95a1;
  --paper: #fbfaf7;
  --card: #ffffff;
  --line: #e5e2db;
  --line-strong: #d3cfc6;
  --accent: #1f7a52;
  --accent-deep: #145638;
  --accent-wash: #eef6f1;
  --warn: #b45309;
  --warn-wash: #fdf3e3;
  --danger: #b42318;
  --danger-wash: #fdeceb;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(20, 24, 28, 0.06), 0 8px 24px rgba(20, 24, 28, 0.05);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-deep); text-underline-offset: 2px; }
a:hover { color: var(--accent); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.85em; }

/* --------------------------------- shell -------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { width: 26px; height: 26px; flex: none; }
.brand span.sub { color: var(--ink-faint); font-weight: 500; font-size: 0.82rem; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topnav a, .topnav button {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
}
.topnav a:hover, .topnav button:hover { background: var(--accent-wash); color: var(--accent-deep); }
.topnav a.active { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }

/* Icons exist for the phone layout only; on desktop the labels carry it. */
.topnav a svg { display: none; }

.session { margin-left: 8px; display: inline-flex; align-items: center; }
.session a, .session button {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--ink-faint);
  text-decoration: none;
  cursor: pointer;
}
.session a:hover, .session button:hover { background: var(--accent-wash); color: var(--accent-deep); }
.session a.active { background: var(--accent-wash); color: var(--accent-deep); font-weight: 600; }

.shell { max-width: 960px; margin: 0 auto; padding: 22px 16px 72px; }
.shell.narrow { max-width: 560px; }

.lede { color: var(--ink-soft); font-size: 0.95rem; }
.muted { color: var(--ink-faint); font-size: 0.85rem; }
.tiny { font-size: 0.78rem; color: var(--ink-faint); }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.mt { margin-top: 18px; }
.mb { margin-bottom: 18px; }
.hidden { display: none !important; }

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

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 1rem; }
.card-body { padding: 16px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat .n { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; line-height: 1.1; }
.stat .k { font-size: 0.78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }

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

label.field { display: block; margin-bottom: 12px; }
label.field > .label { display: block; font-size: 0.85rem; font-weight: 560; margin-bottom: 5px; }
label.field > .hint { display: block; font-size: 0.78rem; color: var(--ink-faint); margin-top: 4px; }

input, select, textarea, button { font: inherit; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { min-height: 110px; resize: vertical; font-size: 0.92rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 580;
  font-size: 0.93rem;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--accent-deep); }
.btn.ghost:hover { background: var(--accent-wash); }
.btn.quiet {
  background: none;
  border-color: var(--line-strong);
  color: var(--ink-soft);
}
.btn.quiet:hover { background: #f2f0eb; color: var(--ink); }
.btn.danger { background: #fff; border-color: var(--line-strong); color: var(--danger); }
.btn.danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.btn.wide { width: 100%; }
.btn.small { padding: 5px 10px; font-size: 0.84rem; }

.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.segmented button {
  padding: 7px 12px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.88rem;
}
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button:hover { background: var(--accent-wash); }
.segmented button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------------------------------- list -------------------------------- */

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain > li { border-top: 1px solid var(--line); padding: 12px 16px; }
ul.plain > li:first-child { border-top: 0; }

.item-row { display: flex; gap: 12px; align-items: baseline; }
.item-row .name { flex: 1 1 auto; min-width: 0; font-weight: 560; }
.item-row .name a { text-decoration: none; }
.item-row .name a:hover { text-decoration: underline; }
.item-row .count {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 640;
  color: var(--accent-deep);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 0.84rem;
}
.item-sub { margin-top: 3px; font-size: 0.85rem; color: var(--ink-soft); }
.item-sub.pending { color: var(--warn); }

.pill {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: #fff;
  text-transform: uppercase;
}
.pill.none { border-color: #bcd8c8; color: #14563a; background: #eef7f2; }
.pill.low { border-color: #cfe0b8; color: #3f6212; background: #f4f8ec; }
.pill.moderate { border-color: #efd6a8; color: #92500a; background: var(--warn-wash); }
.pill.high { border-color: #f0beb9; color: #99180f; background: var(--danger-wash); }
.pill.tag { border-color: var(--line-strong); color: var(--ink-soft); background: #f4f2ee; text-transform: none; font-weight: 500; }
.pill.pending { border-color: #efd6a8; color: var(--warn); background: var(--warn-wash); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-wash);
  border: 1px solid #cfe3d7;
  color: #12452e;
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.87rem;
}
.chip .q { color: var(--ink-faint); font-size: 0.76rem; }
.chip button {
  border: 0;
  background: none;
  color: #3c6b55;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
}
.chip button:hover { background: #d9ebe1; color: var(--danger); }
.chip.add { background: #fff; border-style: dashed; border-color: var(--line-strong); padding: 4px 10px; color: var(--ink-soft); }

/* -------------------------------- notices ------------------------------- */

.notice { border-radius: var(--radius-sm); padding: 10px 13px; font-size: 0.9rem; margin-bottom: 12px; }
.notice.error { background: var(--danger-wash); border: 1px solid #f0beb9; color: #7d1610; }
.notice.ok { background: var(--accent-wash); border: 1px solid #cfe3d7; color: #12452e; }
.notice.warn { background: var(--warn-wash); border: 1px solid #efd6a8; color: #7a4408; }
.notice.info { background: #f4f2ee; border: 1px solid var(--line-strong); color: var(--ink-soft); }

/* Operator-facing reminder that the terms page is a template. Sits above the shell so
   it cannot be mistaken for part of the terms themselves. */
.terms-banner {
  background: var(--warn-wash);
  border-bottom: 1px solid #efd6a8;
  color: #7a4408;
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.terms-banner strong { display: block; margin-bottom: 2px; }

/* Consent checkbox on the sign-up form. */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fcfbf9;
  font-size: 0.9rem;
  cursor: pointer;
}
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.check a { font-weight: 560; }

ul.terms { margin: 0 0 0.85em; padding-left: 20px; }
ul.terms li { margin-bottom: 6px; }

.progress { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.25s ease; }

/* ------------------------------- dropzone ------------------------------- */

.dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone .big { font-weight: 620; margin-bottom: 4px; }
.dropzone svg { width: 40px; height: 40px; color: var(--accent); margin-bottom: 8px; }
.preview { max-width: 100%; max-height: 300px; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; margin: 0 auto; }

details.raw { margin-top: 12px; }
details.raw summary { cursor: pointer; font-size: 0.85rem; color: var(--ink-soft); }
details.raw pre {
  margin: 8px 0 0;
  padding: 11px;
  background: #f6f4f0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 0.79rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}

/* -------------------------------- tables -------------------------------- */

.kv { display: grid; grid-template-columns: 1fr; gap: 0; }
.kv > div { padding: 11px 0; border-top: 1px solid var(--line); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 3px; }
.kv dd { margin: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: 90vw;
  text-align: center;
}

.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  h1 { font-size: 1.85rem; }
  .shell { padding-top: 30px; }
  .kv { grid-template-columns: 150px 1fr; }
  .kv > div { display: contents; }
  .kv dt { padding: 11px 0; border-top: 1px solid var(--line); }
  .kv dd { padding: 11px 0; border-top: 1px solid var(--line); }
  .kv dt:first-of-type, .kv dd:first-of-type { border-top: 0; padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   Phone navigation: a fixed bottom tab bar.

   The top bar was the wrong place for it. Five links plus the wordmark do not fit
   across 390px, so flex-wrap turned the nav into two ragged rows and pushed the
   brand onto its own line — the header grew taller the narrower the screen got,
   which is exactly backwards. `Sign out` left the tab bar for the same reason it
   should: it is a destructive action, and a bottom bar is where a thumb rests.

   A bottom bar also puts the tabs under the thumb, which matters here more than
   usual — the primary action is pointing a camera at a label one-handed.
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* `backdrop-filter` on .topbar makes it a CONTAINING BLOCK for fixed-position
     descendants (per spec, as do filter/transform/will-change). The tab bar is
     `position: fixed` and lives inside .topbar, so with the blur in place it resolves
     against the 53px header instead of the viewport and renders just under the top bar
     rather than at the bottom of the screen. Measured: the bar's bottom edge sat at
     y=52 of an 844px viewport. Dropping the blur here (and going opaque, which reads
     the same for a sticky strip) is what puts it back at the bottom.
     Do not re-add a filter/transform to .topbar without moving #nav out of it. */
  .topbar { background: var(--paper); backdrop-filter: none; }
  .topbar-inner { padding: 8px 12px; }
  .brand { font-size: 0.95rem; margin-right: auto; }

  .topnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 250, 247, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(20, 24, 28, 0.05);
    z-index: 40;
  }
  .topnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 550;
    line-height: 1.1;
    color: var(--ink-faint);
  }
  .topnav a svg { display: block; width: 21px; height: 21px; }
  .topnav a span { white-space: nowrap; }
  .topnav a.active { color: var(--accent-deep); background: var(--accent-wash); }
  .topnav a.active svg { stroke-width: 2.1; }

  .session { margin-left: 12px; }
  .session a, .session button { color: var(--ink-soft); padding: 6px 8px; }

  /* Keep the tail of the page, and the toast, clear of the fixed bar. */
  .shell { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}