/* ==========================================================================
   Larder — application stylesheet
   Ported from the approved prototype. Design tokens first, components after.

   Theme model: three states.
     :root                                   -> complete light palette
     @media (prefers-color-scheme: dark)     -> dark, guarded so an explicit
       :root:not([data-theme="light"])          light choice still wins
     :root[data-theme="dark"]                -> explicit dark choice

   Never declare a colour only inside a media/[data-theme] block. Always add
   it to the bare :root first, then override the token.
   ========================================================================== */

:root {
  --ground:      #F1F4F0;
  --surface:     #FFFFFF;
  --surface-2:   #E8EDE7;
  --surface-3:   #DDE4DC;
  --ink:         #1A211C;
  --ink-2:       #5C6761;
  --ink-3:       #8B958F;
  --line:        #D9E0D7;
  --line-2:      #C6CFC4;

  --accent:      #35508C;
  --accent-ink:  #FFFFFF;
  --accent-soft: #E2E8F4;

  --ready:       #2C7A4D;
  --ready-soft:  #DDEEE2;
  --soon:        #9A6412;
  --soon-soft:   #F6E9D2;
  --gone:        #A93A2C;
  --gone-soft:   #F6DFDB;

  --shadow-sm: 0 1px 2px rgba(20, 30, 24, .07), 0 1px 1px rgba(20, 30, 24, .04);
  --shadow-md: 0 10px 30px rgba(20, 30, 24, .10), 0 2px 6px rgba(20, 30, 24, .05);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  --font-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  /* iOS safe areas — set once, used by the fixed header and tab bar */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Measured, not guessed: the rendered tab bar is 68px. It was 62px here,
     so the last few pixels of every screen sat underneath it. */
  --tabbar-h: 68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #10140F;
    --surface:     #1A201B;
    --surface-2:   #222A23;
    --surface-3:   #2B342C;
    --ink:         #E8EDE6;
    --ink-2:       #A2AEA5;
    --ink-3:       #737F76;
    --line:        #2C352E;
    --line-2:      #3A453C;

    --accent:      #93ACE9;
    --accent-ink:  #101528;
    --accent-soft: #1E2740;

    --ready:       #63C088;
    --ready-soft:  #16301F;
    --soon:        #DFA646;
    --soon-soft:   #33260F;
    --gone:        #E58272;
    --gone-soft:   #35190F;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  }
}

:root[data-theme="dark"] {
  --ground:      #10140F;
  --surface:     #1A201B;
  --surface-2:   #222A23;
  --surface-3:   #2B342C;
  --ink:         #E8EDE6;
  --ink-2:       #A2AEA5;
  --ink-3:       #737F76;
  --line:        #2C352E;
  --line-2:      #3A453C;

  --accent:      #93ACE9;
  --accent-ink:  #101528;
  --accent-soft: #1E2740;

  --ready:       #63C088;
  --ready-soft:  #16301F;
  --soon:        #DFA646;
  --soon-soft:   #33260F;
  --gone:        #E58272;
  --gone-soft:   #35190F;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/*
 * The browser's own [hidden] { display: none } is a user-agent rule, so ANY
 * author style that sets display — .field { display: flex }, for instance —
 * silently outranks it and the element stays stubbornly visible.
 *
 * Everything in this app that shows and hides uses the hidden attribute, so
 * state it once here rather than having to remember it at each call site.
 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Room for the fixed tab bar, the iPhone home indicator, and a clear gap
     so the last element on a screen never looks jammed against the nav. */
  padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Stop iOS zooming the page when a field is focused: inputs must be >=16px */
input, select, textarea { font-family: var(--font-ui); font-size: 16px; }

.tabular { font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.app { max-width: 560px; margin: 0 auto; padding-top: var(--safe-top); }

.screenhead { padding: 14px 20px 14px; display: flex; flex-direction: column; gap: 3px; }
.screenhead h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500; font-size: 30px; line-height: 1.1;
  letter-spacing: -.015em;
}
.screenhead p { margin: 0; font-size: 13px; color: var(--ink-3); }

.backbar { padding: 10px 20px 0; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }

.sectionlabel {
  padding: 20px 20px 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}

/* ==========================================================================
   Chips
   ========================================================================== */

.chiprow { display: flex; gap: 7px; padding: 0 20px 14px; overflow-x: auto; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { height: 0; }

.chip {
  flex: none;
  font-size: 13px; font-weight: 500;
  padding: 6px 13px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   Inventory rows
   ========================================================================== */

.list { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }

.row {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, border-color .14s ease;
}
.row:active { transform: scale(.985); }

.row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.row[data-state="soon"]::before  { background: var(--soon); }
.row[data-state="gone"]::before  { background: var(--gone); }
.row[data-state="ready"]::before { background: var(--ready); }

.row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row__name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.005em;
}
.row__meta { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.row__qty { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.qty-num { font-size: 22px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.qty-unit { font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .02em; }

/* ==========================================================================
   Pills
   ========================================================================== */

.pill {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.pill--soon  { background: var(--soon-soft);   color: var(--soon); }
.pill--gone  { background: var(--gone-soft);   color: var(--gone); }
.pill--ready { background: var(--ready-soft);  color: var(--ready); }
.pill--est   { background: var(--accent-soft); color: var(--accent); }

/* ==========================================================================
   Staple level control
   ========================================================================== */

.staple-level {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  font-size: 12px; font-weight: 600;
}
.gauge { display: flex; gap: 2px; }
.gauge i { display: block; width: 4px; height: 12px; border-radius: 1px; background: var(--line-2); }
.gauge i.on { background: currentColor; }

.staple-level[data-level="FULL"] { color: var(--ready); }
.staple-level[data-level="HALF"] { color: var(--ink-2); }
.staple-level[data-level="LOW"]  { color: var(--soon); }
.staple-level[data-level="OUT"]  { color: var(--gone); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 9px; }
.field__label { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

.textinput {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: 16px; font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.textinput::placeholder { color: var(--ink-3); font-weight: 400; }

.stepper {
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stepper button {
  flex: none; width: 62px; height: 62px;
  font-size: 26px; color: var(--accent);
  display: grid; place-items: center;
  transition: background .12s ease;
}
.stepper button:hover { background: var(--surface-2); }
.stepper button:disabled { color: var(--ink-3); cursor: not-allowed; }
.stepper__value {
  flex: 1 1 auto; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 8px 4px;
}
.stepper__num { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stepper__unit { font-size: 12px; color: var(--ink-3); font-weight: 500; }

.computed { text-align: center; font-size: 13px; color: var(--ink-2); }
.computed b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.ministep { display: flex; align-items: center; gap: 4px; }
.ministep button { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); color: var(--accent); font-size: 18px; display: grid; place-items: center; }
.ministep span { min-width: 28px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.primary {
  width: 100%;
  padding: 16px; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-ink);
  font-size: 15.5px; font-weight: 600;
  box-shadow: var(--shadow-md);
  transition: transform .12s ease;
}
.primary:active { transform: scale(.98); }
.primary:disabled { opacity: .5; box-shadow: none; }

.secondary {
  width: 100%;
  padding: 14px; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2);
  font-size: 14.5px; font-weight: 600;
  transition: background .12s ease;
}
.secondary:hover { background: var(--surface-2); }

.savebar { padding: 6px 20px 18px; }
.actions { display: flex; flex-direction: column; gap: 9px; padding: 16px 20px 18px; }
.hint { padding: 12px 20px 18px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ==========================================================================
   Tab bar — fixed, safe-area aware
   ========================================================================== */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 8px 6px calc(8px + var(--safe-bottom));
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 5px 2px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600;
  color: var(--ink-3);
  transition: color .14s ease;
}
.tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-on { color: var(--accent); }

/* ==========================================================================
   Sheet + scrim
   ========================================================================== */

.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 16, 12, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  max-width: 560px; margin: 0 auto;
  background: var(--surface);
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  border-top: 1px solid var(--line);
  /* Generous bottom padding: a sheet ending flush with the screen edge looks
     cut off, and on iPhone the home indicator sits right there. */
  padding: 14px 0 calc(28px + var(--safe-bottom));
  transform: translateY(102%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 -12px 40px rgba(10, 16, 12, .16);
  max-height: 88vh; overflow-y: auto;
}
.sheet.is-open { transform: translateY(0); }

/* A tall sheet scrolls, so give it a scrollbar that belongs to the design
   rather than the operating system's default slab. */
.sheet {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.sheet::-webkit-scrollbar { width: 10px; }
.sheet::-webkit-scrollbar-track { background: transparent; }
.sheet::-webkit-scrollbar-thumb {
  background-color: var(--line-2);
  border-radius: 999px;
  /* Transparent border + background-clip keeps the visible thumb slim
     while leaving a comfortable grab target. */
  border: 3px solid transparent;
  background-clip: content-box;
}
.sheet::-webkit-scrollbar-thumb:hover { background-color: var(--ink-3); background-clip: content-box; }

.sheet__grip { width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 12px; }
.sheet__head { padding: 0 20px 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheet__name { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.sheet__qty { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.sheet__act {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 13px 20px;
  font-size: 15px; font-weight: 500;
  border-top: 1px solid var(--line);
  transition: background .12s ease;
}
.sheet__act:hover { background: var(--surface-2); }
.sheet__act .k { flex: none; width: 26px; text-align: center; font-size: 15px; color: var(--ink-3); }
.sheet__act.danger, .sheet__act.danger .k { color: var(--gone); }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  z-index: 70;
  max-width: 528px; margin: 0 auto;
  background: var(--ink); color: var(--ground);
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-size: 13.5px; font-weight: 500;
  box-shadow: var(--shadow-md);
  transform: translateY(14px); opacity: 0;
  pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.toast.is-on { transform: translateY(0); opacity: 1; }

/* ==========================================================================
   Empty + error states
   ========================================================================== */

.empty {
  margin: 16px; padding: 28px 20px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
  text-align: center; color: var(--ink-3);
}
.empty h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--ink); }
.empty p { margin: 0 0 16px; font-size: 14px; }

.alert {
  margin: 0 20px 16px; padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500;
}
.alert--error { background: var(--gone-soft); color: var(--gone); }
.alert--ok    { background: var(--ready-soft); color: var(--ready); }

/* ==========================================================================
   Motion
   ========================================================================== */

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