/* Household Inventory -- palette taken from Mockup/PWA Mockup.html.
   Light and dark both defined; dark is what a phone in a stockroom shows. */
:root {
  --bg:#F4F8F6; --card:#FFFFFF; --line:#D2DBD7;
  --text:#12201C; --muted:#5C7169;
  --accent:#0B6E5A; --accent-ink:#FFFFFF; --accent-sub:#DCEBE6;
  --bad:#B3402A; --bad-bg:#FBE9E4; --warn:#8A6A16; --warn-bg:#FBF1DA;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --tap: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0E1917; --card:#14211E; --line:#263833;
    --text:#E8EFEC; --muted:#7E948D;
    --accent:#3FBFA0; --accent-ink:#06211B; --accent-sub:#10312A;
    --bad:#F08163; --bad-bg:#3A1810; --warn:#E0AE4A; --warn-bg:#33260C;
  }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  margin:0; background:var(--bg); color:var(--text); font-family:var(--ui);
  font-size:16px; line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
  overscroll-behavior-y:contain;
}
.hidden { display:none !important; }

/* ---------- sign in ---------- */
#signin { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.gate { width:100%; max-width:380px; }
.gate h1 { font-size:22px; margin:0 0 4px; letter-spacing:-0.01em; }
.gate p.sub { color:var(--muted); font-size:14px; margin:0 0 24px; }

/* ---------- shell ---------- */
header {
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  display:flex; align-items:center; gap:12px;
}
header .who { flex:1; min-width:0; }
header .name { font-weight:650; font-size:15px; }
header .house {
  font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px;
}
.pill {
  background:var(--accent-sub); color:var(--accent); border:0;
  font:inherit; font-size:12px; font-weight:650; padding:3px 9px; border-radius:99px;
}
button.pill { cursor:pointer; }
#unsent {
  font-size:12px; font-weight:650; padding:5px 10px; border-radius:99px;
  background:var(--warn-bg); color:var(--warn); white-space:nowrap;
}
main { padding:16px 16px 96px; max-width:640px; margin:0 auto; }
h2.screen { font-size:13px; text-transform:uppercase; letter-spacing:.08em;
            color:var(--muted); margin:0 0 12px; font-weight:650; }

/* ---------- tabs ---------- */
nav {
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
nav button {
  flex:1; border:0; background:none; color:var(--muted); font:inherit;
  font-size:11px; font-weight:600; padding:9px 4px 7px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:var(--tap);
}
nav button svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
nav button[aria-selected="true"] { color:var(--accent); }

/* ---------- form bits ---------- */
label { display:block; font-size:13px; color:var(--muted); margin:14px 0 6px; font-weight:600; }
input, select {
  width:100%; min-height:var(--tap); padding:11px 13px; font:inherit; font-size:16px;
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:11px;
}
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent; }
input[inputmode="numeric"], #barcode, #ibarcode { font-family:var(--mono); letter-spacing:.02em; }
button.primary {
  width:100%; min-height:52px; margin-top:20px; border:0; border-radius:12px;
  background:var(--accent); color:var(--accent-ink);
  font:inherit; font-size:16px; font-weight:700; cursor:pointer;
}
button.primary:disabled { opacity:.45; cursor:default; }
button.ghost {
  width:100%; min-height:var(--tap); margin-top:10px; border:1px solid var(--line);
  border-radius:11px; background:transparent; color:var(--text);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.qty-row { display:flex; gap:10px; align-items:stretch; }
.qty-row input { flex:1; text-align:center; font-size:20px; font-weight:700; }
.qty-row button {
  width:56px; border:1px solid var(--line); border-radius:11px; background:var(--card);
  color:var(--text); font-size:24px; font-weight:600; cursor:pointer;
}

/* ---------- scanner ---------- */
.scanbox {
  position:relative; border-radius:14px; overflow:hidden; background:#000;
  aspect-ratio:4/3; border:1px solid var(--line);
}
.scanbox video { width:100%; height:100%; object-fit:cover; display:block; }
.reticle {
  position:absolute; inset:18% 10%; border:2px solid rgba(255,255,255,.85);
  border-radius:10px; box-shadow:0 0 0 100vmax rgba(0,0,0,.28);
}
.note {
  font-size:13px; color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-radius:11px; padding:12px 13px; margin-top:12px;
}
.note.warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }

/* ---------- feedback ---------- */
.echo { margin-top:14px; padding:13px; border-radius:11px; font-weight:650; font-size:15px; }
.echo.ok   { background:var(--accent-sub); color:var(--accent); }
.echo.bad  { background:var(--bad-bg);     color:var(--bad); }
.echo.warn { background:var(--warn-bg);    color:var(--warn); }
.echo small { display:block; font-weight:500; opacity:.85; margin-top:3px; font-size:13px; }

/* ---------- lists ---------- */
.row {
  display:flex; align-items:center; gap:12px; padding:13px;
  background:var(--card); border:1px solid var(--line); border-radius:11px; margin-bottom:8px;
}
.row .grow { flex:1; min-width:0; }
.row .t { font-weight:600; font-size:15px; }
.row .s { font-size:12.5px; color:var(--muted); font-family:var(--mono); }
.row .n { font-size:19px; font-weight:750; font-variant-numeric:tabular-nums; }
.row.low { background:var(--bad-bg); border-color:transparent; }
.row.low .n, .row.low .t { color:var(--bad); }
.row.low .s { color:var(--bad); opacity:.8; }
.empty { color:var(--muted); text-align:center; padding:40px 20px; font-size:14px; }