:root { --bg:#faf8f5; --card:#fff; --ink:#2b2b2b; --muted:#7a7570; --line:#e8e3dc; --accent:#c8553d; --accent2:#2f7d5b;
  --tabbar:60px; --safe-bottom:env(safe-area-inset-bottom, 0px); }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%; }
header { background:var(--card); border-bottom:1px solid var(--line); }
.bar { max-width:960px; margin:0 auto; padding:12px 16px; display:flex; gap:20px; align-items:center; }
.brand { font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap; }
.tabs { display:flex; gap:20px; align-items:center; margin-right:auto; }
.tabs[hidden], .account[hidden] { display:none; }
.tabs a { color:var(--ink); text-decoration:none; white-space:nowrap; }
.tabs a:hover, .tabs a.active { color:var(--accent); }
.tabs .ico { display:none; }
.account { display:flex; gap:12px; align-items:center; }
#nav-user { font-size:13px; }
.badge { background:var(--accent); color:#fff; border-radius:10px; padding:0 7px; font-size:12px; margin-left:4px; }
main { max-width:960px; margin:0 auto; padding:24px 16px 60px; }
h1 { margin:0 0 16px; font-size:26px; }
h2 { font-size:19px; margin:24px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:12px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cols-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:12px; }
.muted { color:var(--muted); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.spread { justify-content:space-between; }
a { color:var(--accent); }
.btn { display:inline-block; border:1px solid var(--accent); background:var(--accent); color:#fff; padding:7px 14px; border-radius:7px; cursor:pointer; text-decoration:none; font:inherit; }
.btn.secondary { background:transparent; color:var(--accent); }
.btn.green { background:var(--accent2); border-color:var(--accent2); }
.btn.small { padding:3px 9px; font-size:13px; }
.btn.link { background:none; border:none; color:var(--muted); padding:0 4px; }
.btn:disabled { opacity:.6; cursor:default; }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); }
textarea { width:100%; }
label { display:block; font-weight:600; margin:12px 0 4px; }
table { width:100%; border-collapse:collapse; }
td, th { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); }
.num { text-align:right; white-space:nowrap; }
.error { background:#fde8e4; border:1px solid var(--accent); padding:8px 12px; border-radius:6px; }
.checked { text-decoration:line-through; color:var(--muted); }
ol.steps li { margin-bottom:8px; }
h3.cat { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:18px 0 2px; }
/* category picker: hidden until the row is hovered/focused */
.cat-pick { font-size:12px; padding:0 2px; border-color:transparent; color:var(--muted); background:transparent; opacity:0; width:22px; }
tr:hover .cat-pick, .cat-pick:focus { opacity:1; width:auto; border-color:var(--line); }
.shop-row { cursor:pointer; }
.toggle { width:18px; height:18px; vertical-align:middle; }
.login { max-width:440px; margin:40px auto; }
.invite { border-color:var(--accent2); }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:8px 16px; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.2); max-width:calc(100% - 32px); }
#toast.err { background:var(--accent); }

/* ---------- touch screens: no hover, so the category picker is a small always-visible arrow ---------- */
@media (hover:none) {
  .cat-pick, tr:hover .cat-pick { opacity:.8; width:30px; height:30px; border-color:transparent; color:transparent;
    -webkit-appearance:none; appearance:none; cursor:pointer;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a7570' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .cat-pick option { color:var(--ink); }
}

/* ---------- phones ---------- */
@media (max-width:700px) {
  .cols-2, .cols-1-2 { grid-template-columns:1fr; }
  .bar { padding:10px 16px; gap:12px; }
  .account { margin-left:auto; }
  #nav-user { display:none; }  /* shown on the family screen instead */

  /* bottom tab bar */
  .tabs { position:fixed; left:0; right:0; bottom:0; z-index:10; margin:0; gap:0;
    height:calc(var(--tabbar) + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
    background:var(--card); border-top:1px solid var(--line); box-shadow:0 -2px 10px rgba(0,0,0,.04); }
  .tabs a { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; font-size:11px; color:var(--muted); height:100%; }
  .tabs a.active { color:var(--accent); }
  .tabs .ico { display:block; font-size:21px; line-height:1; filter:grayscale(1); opacity:.75; }
  .tabs a.active .ico { filter:none; opacity:1; }
  .tabs .badge { position:absolute; top:5px; left:calc(50% + 6px); margin:0; padding:0 5px; font-size:10px; line-height:16px; }

  main { padding:16px 16px calc(var(--tabbar) + var(--safe-bottom) + 32px); }
  body:has(.tabs[hidden]) main { padding-bottom:40px; }  /* signed out: no tab bar */
  h1 { font-size:22px; margin-bottom:12px; }
  h2 { font-size:17px; }
  .card { padding:14px; }
  #toast { bottom:calc(var(--tabbar) + var(--safe-bottom) + 12px); }

  /* 16px inputs: iOS zooms the page into smaller ones on focus */
  input, select, textarea { font-size:16px; padding:8px 10px; }
  .btn { padding:9px 16px; }
  .btn.small { padding:6px 12px; font-size:14px; }
  .btn.link { padding:6px 8px; }
  .cat-pick { font-size:16px; padding:0; }
  .toggle { width:22px; height:22px; }

  /* forms: controls fill the row */
  .row > select, .row > input:not([type=checkbox]) { flex:1 1 140px; min-width:0; }
  #search { width:100%; }
  #search input { flex:1; }

  /* ingredient editor: name on its own line, amount + unit + remove below */
  #ingredients thead { display:none; }
  #ingredients tr { display:grid; grid-template-columns:1fr 1fr 40px; gap:6px; padding:8px 0; border-bottom:1px solid var(--line); }
  #ingredients td { padding:0; border:0; }
  #ingredients td:first-child { grid-column:1 / -1; }
  #ingredients td input, #ingredients td select { width:100%; }
  #ingredients input[name=ing_name]::placeholder { color:var(--muted); }
}