/* Project Food website — Midnight Presence surface language.
   Tokens identical to the kiosk (src/foodapp/static/style.css). */
:root {
  --bg-hi: #0c1430; --bg-lo: #05070f;
  --text: #dbe4fb; --heading: #8fa0c9; --value: #c7d2ee;
  --muted: #7c8bb0; --faint: #39415a; --haze: #8290b4;
  --teal: #3ec6c0; --cyan: #9be8ff; --purple: #9d78f8;
  --danger: #c4593b; --danger-text: #ff9c8a;
  --surface: rgba(255,255,255,.05); --surface-hi: rgba(255,255,255,.08);
  --border: rgba(160,180,255,.14); --border-soft: rgba(160,180,255,.08);
  --r-sm: 8px; --r-card: 14px; --r-pill: 24px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 0%, var(--bg-hi) 0%, var(--bg-lo) 70%) fixed;
  color: var(--text);
  font-family: system-ui, 'Segoe UI', sans-serif;
  font-size: 16px; font-weight: 300;
}
button, input { font-family: inherit; }
a { color: var(--cyan); text-decoration: none; }
.muted { color: var(--muted); }
.mono, .brand, .section-title, label {
  font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 400;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); }
.brand { color: var(--faint); letter-spacing: .3em; }
nav { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
nav a { background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; min-height: 44px; }
nav a.active { color: var(--teal); border-color: rgba(62,198,192,.5);
  background: rgba(62,198,192,.08); }
.logout-form button { background: none; border: none; color: var(--muted);
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; cursor: pointer;
  min-height: 44px; padding: 0 8px; }

main { width: min(1140px, 100% - 24px); margin: 20px auto 60px; }
.section-title { color: var(--heading); margin: 26px 0 10px; }
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 18px 20px; margin-top: 16px;
  backdrop-filter: blur(6px); }
h1 { font-size: 26px; font-weight: 300; margin: 10px 0 18px; }
h2 { font-size: 20px; font-weight: 300; }
.error { color: var(--danger-text); margin-bottom: 12px; }

input[type=text], input[type=password], input[type=search], select {
  width: 100%; padding: 12px 16px; margin: 6px 0 14px; color: var(--value);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); outline: none; font-size: 16px; }
input:focus { border-color: rgba(62,198,192,.4); }
button.primary { background: rgba(62,198,192,.12); color: var(--teal);
  border: 1px solid rgba(62,198,192,.5); border-radius: var(--r-pill);
  padding: 12px 26px; font-size: 15px; cursor: pointer;
  min-height: 44px; }
.ghost { background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 9px 18px; font-size: 13px; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center; }

.login-card { max-width: 380px; margin: 12vh auto 0; text-align: left; }
.login-card h1 { margin-top: 14px; }

.banner { background: #3d1f24; color: var(--danger-text); text-align: center;
  padding: 9px; font-family: ui-monospace, monospace; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; }

.badge { display: inline-block; font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; padding: 3px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--muted); }
.badge.good { color: var(--teal); border-color: rgba(62,198,192,.4); }
.badge.warn { color: var(--danger-text); border-color: rgba(196,89,59,.5); }
.badge.vega { color: var(--purple); border-color: rgba(157,120,248,.35); }

/* inventory: row-cards with a first-class expiry signal */
.inv-searchform { margin-bottom: 4px; }
/* no wrap: the name flexes (its text may wrap to 2 lines), amount + expiry
   stay a fixed right cluster so the expiry chip aligns across every row */
.inv-row { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.inv-row:last-child { border-bottom: none; }
.inv-name { flex: 1; min-width: 0; color: var(--text); }
.inv-amount { flex-shrink: 0; color: var(--value); font-size: 14px; white-space: nowrap; }
.inv-loc { flex-shrink: 0; font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; }
.expiry { flex-shrink: 0; font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--border-soft);
  color: var(--muted); }
.expiry-ok { color: var(--muted); }
.expiry-none { color: var(--muted); border-color: transparent; padding-left: 0; }
.expiry-soon { color: var(--danger-text); border-color: rgba(196,89,59,.5); }
.expiry-expired { color: var(--bg-lo); background: var(--danger-text);
  border-color: transparent; }
.section-title.warn-title { color: var(--danger-text); }
.eat-first { border-color: rgba(196,89,59,.35); }

.recipe-grid { display: grid; gap: 14px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.recipe-card img { width: 100%; height: 130px; object-fit: cover;
  border-radius: var(--r-sm); margin-bottom: 12px; }
.recipe-card { display: flex; flex-direction: column; color: var(--text);
  transition: border-color .2s ease, transform .2s ease; }
@media (hover: hover) {
  .recipe-card:hover { border-color: rgba(62,198,192,.4); transform: translateY(-2px); }
}
.recipe-card h2 { line-height: 1.25; }
.recipe-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
/* the decision, on the card face */
.recipe-status { display: flex; flex-direction: column; align-items: flex-start;
  gap: 8px; margin-top: 14px; }
.tobuy { display: flex; flex-direction: column; gap: 3px; margin: 0;
  --closeness: var(--muted); }
.tobuy-n { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 400;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--closeness); }
/* proximity signal: a pip + the count warm toward teal the closer to cookable */
.tobuy-n::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 8px; vertical-align: baseline;
  background: var(--closeness); }
.tobuy.near-1 { --closeness: var(--teal); }
.tobuy.near-2 { --closeness: color-mix(in oklch, var(--teal) 74%, var(--muted)); }
.tobuy.near-3 { --closeness: color-mix(in oklch, var(--teal) 50%, var(--muted)); }
.tobuy.near-4 { --closeness: var(--muted); }
/* near-1/2 are rare and worth catching the eye: a slightly larger pip */
.tobuy.near-1 .tobuy-n::before,
.tobuy.near-2 .tobuy-n::before { width: 9px; height: 9px; }
.tobuy-items { color: var(--value); font-size: 14px; line-height: 1.4; }
.tobuy-more { color: var(--muted); }
.recipe-card .badge.good { text-transform: none; letter-spacing: .04em; }
.recipe-card .badge.warn { text-transform: none; letter-spacing: .04em; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.filters select { width: auto; margin: 0; }
.recipe-search { width: auto; flex: 1 1 180px; margin: 0; min-height: 44px; }
input::placeholder { color: var(--haze); }
.clear-chip { text-decoration: none; }

/* Vega card: peek by default (a 2-line preview), expand on demand */
.vega-card { padding: 0; }
.vega-card > summary { list-style: none; cursor: pointer; display: flex;
  flex-direction: column; gap: 8px; padding: 15px 20px; }
.vega-card > summary::-webkit-details-marker { display: none; }
.vega-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vega-teaser { color: var(--value); font-size: 14px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vega-toggle { flex-shrink: 0; font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--teal); }
.vega-toggle::after { content: " +"; }
.vega-card[open] .vega-teaser { display: none; }
.vega-card[open] .vega-toggle::after { content: " –"; }
.vega-full { padding: 4px 20px 18px; margin: 0; }

.truth-line { font-size: 16px; font-weight: 300; color: var(--heading);
  margin-top: 22px; }
.truth-line.ready { color: var(--teal); }
.result-count { font-family: ui-monospace, 'JetBrains Mono', monospace; font-weight: 400;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); margin-top: 6px; }
.show-all { text-align: center; margin-top: 22px; }
.show-all a { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--teal);
  border: 1px solid rgba(62,198,192,.4); border-radius: var(--r-pill);
  padding: 12px 22px; display: inline-flex; min-height: 44px; align-items: center; }

.empty-state { text-align: center; color: var(--muted); }
.empty-state p { margin: 6px 0; }
.text-link { color: var(--teal); border-bottom: 1px solid rgba(62,198,192,.4); }

img.hero { width: 100%; max-height: 280px; object-fit: cover;
  border-radius: var(--r-card); margin: 12px 0; }
.ing-list, .steps-list { list-style-position: inside; }
.ing-list li { padding: 7px 0; border-bottom: 1px solid var(--border-soft);
  list-style: none; }
.ing-list li:last-child { border-bottom: none; }
.steps-list li { padding: 7px 0; }
form { margin-top: 14px; }

.add-row { display: flex; gap: 8px; align-items: center; }
.add-row input { margin: 0; }
.add-row .recipe-search { flex: 1 1 auto; }

/* shopping: whole-row native toggle + reversible Bought section */
.shop-section { margin-top: 4px; }
.shop-section.is-empty { display: none; }
.bought-title { color: var(--muted); }
.card.bought { opacity: .82; }
.clear-bought-form { margin-top: 12px; }
.row-toggle, .row-remove { margin: 0; }

.shop-list li { display: flex; align-items: stretch; gap: 6px; list-style: none;
  border-bottom: 1px solid var(--border-soft); }
.shop-list li:last-child { border-bottom: none; }
.shop-toggle { flex: 1; display: flex; align-items: center; gap: 12px;
  background: none; border: none; color: var(--text); text-align: left;
  padding: 11px 2px; min-height: 48px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 300; }
.shop-toggle .tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: transparent;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  transition: color .15s ease, border-color .15s ease; }
.shop-toggle .text { flex: 1; min-width: 0; }
.shop-toggle .qty { flex-shrink: 0; color: var(--muted); font-size: 14px; }
.shop-toggle .badge { flex-shrink: 0; }
li.checked .shop-toggle .tick { color: var(--teal); border-color: rgba(62,198,192,.5); }
li.checked .shop-toggle .text { color: var(--muted); text-decoration: line-through; }
.shop-remove { flex-shrink: 0; width: 44px; min-height: 44px; align-self: center;
  background: none; border: none; color: var(--faint); font-size: 20px; cursor: pointer; }
.shop-remove:hover { color: var(--danger-text); }

/* staples: its own row class (never inherit .shop-list's toggle skeleton) */
.staple-list li { display: flex; align-items: center; gap: 12px; list-style: none;
  min-height: 48px; padding: 4px 2px; border-bottom: 1px solid var(--border-soft); }
.staple-list li:last-child { border-bottom: none; }
.staple-list .text { flex: 1; min-width: 0; color: var(--text); }
.staple-list .row-remove { margin: 0; }
.staple-list .staple-empty { color: var(--muted); border-bottom: none; }

@media (max-width: 640px) {
  /* compact header: brand yields; all four nav items stay visible (wrap,
     never scroll off) so Staples is always discoverable */
  header { flex-wrap: wrap; padding: 8px 12px; gap: 8px 10px; }
  .brand { display: none; }
  nav { flex-wrap: wrap; justify-content: center; gap: 6px; }
  nav a { padding: 8px 12px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}