/* Shared by every page. Page-specific rules stay in the page. */
:root { --bg:#f6f7f9; --fg:#111827; --muted:#6b7280; --line:#e5e7eb; --card:#fff; --accent:#2563eb; --ok:#15803d; --bad:#b91c1c; --warn:#b45309; }
@media (prefers-color-scheme: dark) { :root { --bg:#111827; --fg:#f3f4f6; --muted:#9ca3af; --line:#374151; --card:#1f2937; --accent:#60a5fa; --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; } }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0 auto; max-width:820px; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,sans-serif; padding:0 16px 40px; }

/* nav + header */
nav.tabs { display:flex; flex-wrap:wrap; gap:4px; padding:10px 0 6px; align-items:baseline; }
nav.tabs a { flex:none; padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--muted); font-weight:600; font-size:15px; }
nav.tabs a[aria-current=page] { background:var(--card); border:1px solid var(--line); color:var(--fg); }
nav.tabs a.soon { opacity:.45; pointer-events:none; }
nav.tabs .grow { flex:1; }
nav.tabs a[href="/settings"] { font-size:18px; padding:6px 10px; order:9; }
nav.tabs a.who { order:8; max-width:9em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
/* On a phone the tab row is the whole width: drop the item count, keep the tabs. */
@media (max-width: 460px) { nav.tabs .status { display:none; } nav.tabs a { padding:8px 10px; font-size:14px; } }
nav.tabs .status { color:var(--muted); font-size:12px; font-weight:normal; }
header.sticky { position:sticky; top:0; background:var(--bg); padding-bottom:8px; z-index:2; }

/* common controls */
input[type=search], input[type=text], input[type=password], select { width:100%; font-size:17px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); }
select { width:auto; font-size:15px; padding:8px 10px; }
.muted { color:var(--muted); font-size:14px; }
.warn { color:var(--warn); }

/* item rows */
.rows { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.row { display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; text-decoration:none; color:inherit; }
.thumb { width:56px; height:56px; border-radius:8px; background:var(--line); object-fit:cover; flex:none; }
.row .main { flex:1; min-width:0; }
.row .name { font-weight:600; }
.row .where { color:var(--muted); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qty { font-variant-numeric:tabular-nums; color:var(--muted); }
.add { flex:none; width:44px; height:44px; border-radius:22px; border:1px solid var(--line); background:var(--card); color:var(--accent); font-size:24px; line-height:1; cursor:pointer; }
.tag { display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:1px 8px; font-size:12px; color:var(--muted); }

/* buttons shared by the item page and the sheets */
.btn { display:inline-block; font:inherit; font-size:15px; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--fg); text-decoration:none; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.danger { color:var(--bad); border-color:var(--bad); }
.btn:disabled { opacity:.5; cursor:progress; }
.btnrow { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* the log, on an item, a place and a person */
.log { list-style:none; padding:0; margin:6px 0 0; font-size:14px; color:var(--muted); }
.log li { padding:5px 0; border-top:1px solid var(--line); }
.log li:first-child { border-top:0; }
.log b { color:var(--fg); font-weight:600; }
.log a { color:var(--accent); text-decoration:none; }
.log .when { font-variant-numeric:tabular-nums; font-size:12px; margin-right:6px; white-space:nowrap; }
.log .more { font:inherit; border:0; background:none; padding:0; color:var(--accent); cursor:pointer; }