/* Base rules the claude.ai page used to supply */
[hidden] { display: none !important; }
img { max-width: 100%; }

/* Layout: one narrow phone-first column — add bar, the list grouped by status, then a receipt strip. */
:root {
  --bg: #f4f6f2; --surface: #ffffff; --ink: #18211b; --muted: #5d6a60; --line: #dce2d8;
  --accent: #2b6a3a; --accent-ink: #ffffff; --accent-soft: #e3efe4;
  --amber: #8f5300; --amber-bg: #fff1d6; --done: #8b958d; --paper: #fbfbf8; --shade: rgba(10,16,12,.72);
  --f-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111612; --surface: #1a201b; --ink: #e6ebe5; --muted: #9ba79d; --line: #2d362f;
  --accent: #74c184; --accent-ink: #0c1a10; --accent-soft: #1f3324;
  --amber: #f2b955; --amber-bg: #3a2b10; --done: #6e7a70; --paper: #1e241f; --shade: rgba(0,0,0,.8);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #111612; --surface: #1a201b; --ink: #e6ebe5; --muted: #9ba79d; --line: #2d362f;
  --accent: #74c184; --accent-ink: #0c1a10; --accent-soft: #1f3324;
  --amber: #f2b955; --amber-bg: #3a2b10; --done: #6e7a70; --paper: #1e241f; --shade: rgba(0,0,0,.8);
  color-scheme: dark; }

body { background: var(--bg); color: var(--ink); font: 16px/1.45 var(--f-body); }
.wrap { max-width: 560px; margin: 0 auto; padding-inline: 16px; padding-block: 20px 56px; display: grid; gap: 22px; }
button, input, textarea { font: inherit; color: inherit; }
/* Phones zoom in on any text box smaller than 16px; keep them above that. No double-tap zoom either. */
input, textarea { font-size: var(--input-font, 18px) !important; }
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Saved items: regulars that aren't on this trip */
.saved { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; }
.saved summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 14px;
  font: 500 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.saved summary::-webkit-details-marker { display: none; }
.saved summary .chev { font-family: var(--f-mono); letter-spacing: 0; }
.saved[open] summary .chev::after { content: " ▴"; }
.saved:not([open]) summary .chev::after { content: " ▾"; }
.saved .hint { margin: 0; padding: 0 14px 10px; font-size: .85rem; color: var(--muted); }
.saved ul { list-style: none; margin: 0; padding: 0; }
.srow { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; border-top: 1px solid var(--line); }
.srow .sname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.srow .plus { flex: none; border: 1.5px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: .85rem; }
.srow .plus:hover { background: var(--accent-soft); }
.srow .rm { flex: none; border: 0; background: transparent; color: var(--muted); font-size: .8rem; text-decoration: underline; padding: 6px 2px; }
.srow .rm.armed { color: var(--amber); }
.saved .addall { padding: 10px 12px 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header { display: grid; gap: 4px; }
h1 { font: 700 1.9rem/1.1 var(--f-display); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.tally { color: var(--muted); font-size: .95rem; font-variant-numeric: tabular-nums; margin: 0; }
.tally b { color: var(--ink); }

.dock { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); padding-block: 8px; display: grid; gap: 10px; }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.stores button { border: 0; background: transparent; border-radius: 9px; padding: 10px 8px; font: 700 1rem var(--f-display); color: var(--muted);
  display: flex; justify-content: center; align-items: center; gap: 8px; }
.stores button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.stores .n { font: 500 .78rem/1 var(--f-mono); padding: 3px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.stores button[aria-selected="true"] .n { background: var(--accent-ink); color: var(--accent); }
.add { display: flex; gap: 8px; }
.add input { min-width: 0; border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 12px 12px; }
.add #new-name { flex: 1; }
.add #new-qty { width: 4.5rem; text-align: center; }
.add input:focus { border-color: var(--accent); outline: none; }
.btn { border: 0; border-radius: 10px; padding: 12px 16px; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--muted); border: 1.5px solid var(--line); font-weight: 400; padding: 8px 12px; }
.btn.small { padding: 8px 12px; font-size: .9rem; }

.group { display: grid; gap: 8px; }
.group h2 { font: 500 .78rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0;
  display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.group h2 .count { font-family: var(--f-mono); letter-spacing: 0; }
ul.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.item { border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 12px 12px 10px; }
.check { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: transparent;
  display: grid; place-items: center; padding: 0; transition: background .15s, border-color .15s; }
.check svg { width: 18px; height: 18px; opacity: 0; }
.check:hover { border-color: var(--accent); }
.item[data-status="got"] .check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.item[data-status="got"] .check svg { opacity: 1; }
.item[data-status="missing"] .check { border-color: var(--amber); border-style: dashed; }
.body { flex: 1; min-width: 0; padding-top: 4px; cursor: pointer; }
.name { font-weight: 700; overflow-wrap: anywhere; }
.qty { font-family: var(--f-mono); font-weight: 400; font-size: .85rem; color: var(--muted); margin-left: 6px; }
.item[data-status="got"] .name { color: var(--done); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.note { margin-top: 6px; font-size: .92rem; background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; white-space: pre-wrap; }
.item[data-status="missing"] .note, .flag { background: var(--amber-bg); color: var(--amber); }
.flag { display: inline-block; font: 500 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; padding: 4px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; }
.skipbtn { flex: none; align-self: center; border: 1.5px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px;
  padding: 5px 10px; font-size: .8rem; font-weight: 700; }
.skipbtn:hover { border-color: var(--amber); color: var(--amber); }
.toggle { flex: none; border: 0; background: transparent; color: var(--muted); font-size: .85rem; padding: 8px 4px; }
.panel { padding: 0 12px 14px 56px; display: grid; gap: 8px; }
.panel .fields { display: flex; gap: 8px; }
.panel .fields input { min-width: 0; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); }
.panel .fields input:first-child { flex: 1; }
.panel .fields input:last-child { width: 4.5rem; text-align: center; }
.panel .fields input:focus { border-color: var(--accent); outline: none; }
.panel label.lbl { font-size: .78rem; color: var(--muted); margin-bottom: -4px; }
.panel textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); }
.panel textarea:focus { border-color: var(--accent); outline: none; }
.panel .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.warn { background: var(--amber-bg); color: var(--amber); border: 0; }
.btn.danger-armed { border-color: var(--amber); color: var(--amber); }

.empty { text-align: center; color: var(--muted); padding: 28px 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; }
.empty strong { display: block; color: var(--ink); font: 700 1.1rem var(--f-display); margin-bottom: 4px; }

/* receipts: thermal-paper strip */
.receipts { display: grid; gap: 10px; }
.receipts h2 { font: 700 1.2rem var(--f-display); margin: 0; }
.rhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.receipt { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 8px 8px 10px; display: grid; gap: 8px;
  font: .72rem/1.3 var(--f-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0/12px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0/12px 100% repeat-x; padding-bottom: 14px; }
.receipt .thumb { display: block; width: 100%; aspect-ratio: 3/4; max-width: 100%; object-fit: cover; object-position: top; border-radius: 2px; background: var(--line); border: 0; padding: 0; }
.receipt .pdf { display: grid; place-items: center; aspect-ratio: 3/4; background: var(--surface); border: 1px dashed var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; }
.receipt .rmeta { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.receipt .rm { border: 0; background: transparent; color: var(--muted); font: inherit; padding: 2px 0; text-decoration: underline; }
.receipt .rm.armed { color: var(--amber); }
.confirm { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent); }
.confirm.partial { background: var(--amber-bg); border-color: var(--amber); }
.confirm .ic { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; }
.confirm.partial .ic { background: var(--amber); color: var(--amber-bg); }
.confirm strong { display: block; font: 700 1.05rem var(--f-display); }
.confirm span.d { font-size: .9rem; color: var(--muted); }
.status { min-height: 1.3em; font-size: .9rem; color: var(--muted); margin: 0; }
.status.err { color: var(--amber); }

.lightbox { position: fixed; inset: 0; background: var(--shade); display: grid; place-items: center; padding: 16px; z-index: 20; }
.lightbox img { max-height: 88vh; max-width: 100%; border-radius: 4px; background: #fff; }
.lightbox button { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }

.body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.item.selected { background: var(--accent-soft); }
.item.selected .name::before { content: "✓ "; color: var(--accent); }
.grip { flex: none; width: 30px; height: 40px; display: grid; place-items: center; color: var(--muted); cursor: grab;
  touch-action: none; border-radius: 8px; margin: -3px -4px 0 -6px; }
.grip:hover { color: var(--ink); background: var(--bg); }
.grip svg { width: 14px; height: 20px; }
.item.dragging { position: relative; z-index: 10; background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.18); border-radius: 10px; cursor: grabbing; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
.tip { font-size: .8rem; color: var(--muted); margin: 0; }
.selbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(0,0,0,.08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
.selbar .in { max-width: 560px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.selbar .count { font-weight: 700; margin-right: auto; font-variant-numeric: tabular-nums; }
.wrap.has-sel { padding-bottom: 150px; }
.resetbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; font-size: .85rem; color: var(--muted); text-align: right; }
.undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 18;
  width: min(520px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: var(--ink); color: var(--bg); border-radius: 12px; padding: 10px 10px 10px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.undo span { min-width: 0; overflow-wrap: anywhere; }
.undo .btn { background: var(--bg); color: var(--ink); flex: none; }
.notice { background: var(--amber-bg); color: var(--amber); padding: 12px 14px; border-radius: 10px; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Full-screen app additions ---- */
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; }
* { box-sizing: border-box; }
/* The status bar area at the top of the phone: keep it the page color while scrolling. */
.sbar { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 30; }
.wrap { padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.gate { max-width: 440px; margin: 0 auto; padding: calc(48px + env(safe-area-inset-top, 0px)) 16px 40px; display: grid; gap: 16px; text-align: center; justify-items: center; }
.gate img { width: 96px; height: 96px; border-radius: 22px; }
.gate h1 { font-size: 1.6rem; }
.gate p { margin: 0; color: var(--muted); }
.gate form { width: 100%; display: grid; gap: 8px; }
.gate input { width: 100%; border: 1.5px solid var(--line); background: var(--surface); border-radius: 10px; padding: 12px; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; }

/* ---- Sign in ---- */
.authtabs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.authtabs button { border: 0; background: transparent; border-radius: 9px; padding: 10px 8px; font: 700 1rem var(--f-display); color: var(--muted); }
.authtabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.gate form .btn { width: 100%; }

/* ---- People (owner) ---- */
.people { display: grid; gap: 10px; }
.people h2 { font: 700 1.2rem var(--f-display); margin: 0; }
.phint { margin: 0; color: var(--muted); font-size: .9rem; }
.plist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.plist li { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.plist li:first-child { border-top: 0; }
.plist .pemail { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.plist .ptag { font: 500 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); display: block; margin-top: 4px; }
.plist .ptag.wait { color: var(--amber); }
.linkbtn { border: 0; background: transparent; color: var(--muted); font-size: .85rem; text-decoration: underline; padding: 6px 2px; }
.linkbtn.armed { color: var(--amber); }
.acct { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.card .plist { background: var(--bg); }
.acctline { margin: 0; color: var(--muted); overflow-wrap: anywhere; }

/* ---- Menu rail: same design as the Premium Finance app ----
   A slim green rail fixed down the left edge. The arrow tab halfway down its edge slides it away and back
   (remembered on this device). The page's own background paints the rail's green down the left edge so it
   always reaches the bottom of the screen on iPhone. */
:root {
  --rail: 64px; --strip: 0px;
  --side: #2e5b4e; --side-ink: #f4f1e6; --side-ink-2: rgba(244, 241, 230, 0.72); --side-rule: rgba(244, 241, 230, 0.14);
  --side-hover: rgba(244, 241, 230, 0.08); --side-active: rgba(218, 194, 129, 0.16); --gold-text: #dac281;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --side: #22463c; --side-rule: rgba(244, 241, 230, 0.1); } }
:root[data-theme="dark"] { --side: #22463c; --side-rule: rgba(244, 241, 230, 0.1); }
html.has-rail { --strip: var(--rail); }
html.has-rail.nav-hidden { --strip: 0px; }
html { background: linear-gradient(90deg, var(--side) 0 var(--strip), var(--bg) var(--strip) 100%); background-color: var(--bg); }
body { background: transparent; }
.sbar { left: var(--strip); }

.shell { padding-left: var(--rail); transition: padding-left .2s ease; }
.shell.nav-hidden { padding-left: 0; }
.shell.nav-hidden > .wrap { padding-left: max(30px, env(safe-area-inset-left, 0px)); }
.sidebar { position: fixed; top: 0; height: 100vh; height: 100dvh; left: 0; width: var(--rail); z-index: 20; transition: transform .2s ease;
  overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: calc(22px + 2 * env(safe-area-inset-top, 0px)) 4px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--side); color: var(--side-ink); }
.shell.nav-hidden .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }
.wordmark { display: block; background: none; border: 0; padding: 2px; cursor: pointer; }
.wordmark-mark { width: 38px; height: 38px; display: block; border-radius: 9px; }
.tabs { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; border: 0; background: none;
  padding: 8px 0; border-radius: 8px; font: 500 0.64rem/1.15 var(--f-body); color: var(--side-ink-2); cursor: pointer; text-align: center; position: relative; }
.tab svg { flex: none; width: 32px; height: 32px; }
.tab:hover { color: var(--side-ink); background: var(--side-hover); }
.tab[aria-current="page"] { color: var(--gold-text); background: var(--side-active); }
.sidebar :focus-visible { outline-color: var(--gold-text); }
.side-foot { margin-top: auto; width: 100%; padding-top: 12px; border-top: 1px solid var(--side-rule); }
.nav-toggle { position: fixed; z-index: 25; top: max(50%, var(--toggle-min, 200px)); left: calc(var(--rail) - 11px); width: 22px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; padding: 0; border: 1px solid var(--side-rule); border-radius: 99px; background: var(--side); color: var(--gold-text);
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: left .2s ease, border-radius .2s ease; }
.nav-toggle::before { content: ''; position: absolute; inset: -10px -12px; } /* a bigger area to tap */
.nav-toggle svg { transition: transform .2s ease; }
.shell.nav-hidden .nav-toggle { left: -1px; border-radius: 0 12px 12px 0; }
.shell.nav-hidden .nav-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .shell, .sidebar, .nav-toggle, .nav-toggle svg { transition: none !important; } }
/* Bars that stick to the bottom start at the rail's edge. */
.selbar { left: var(--strip); }
.undo { left: calc(50% + var(--strip) / 2); width: min(520px, calc(100% - var(--strip) - 32px)); }
/* Let every section shrink to the space beside the rail instead of pushing the page wider. */
.wrap { grid-template-columns: minmax(0, 1fr); }
.dock { grid-template-columns: minmax(0, 1fr); }
.stores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stores button { min-width: 0; padding-inline: 6px; gap: 6px; }
.sbar { left: var(--strip); right: auto; width: calc(100% - var(--strip)); }
/* Phones: rows are narrower beside the rail, so tighten the spacing around each item. */
.name { overflow-wrap: break-word; }
@media (max-width: 480px) {
  .row { gap: 6px; padding: 10px 6px 10px 8px; }
  .check { width: 30px; height: 30px; }
  .body { padding-top: 3px; }
  .skipbtn { padding: 4px 8px; font-size: .74rem; }
  .toggle { padding: 6px 2px; font-size: .8rem; }
  .grip { width: 22px; margin: -3px -2px 0 -2px; }
  .panel { padding: 0 8px 12px 44px; }
  .qty { margin-left: 4px; }
  .group h2 { letter-spacing: .06em; }
}
/* Behind the clock: iOS draws its own fade there in the page's background color (html and body), so both carry the
   page color and the fade blends into the page. Newer iOS also blurs the strip just below the clock, so the page
   starts one more status-bar height down (as in Premium Finance) and no text sits in that zone. */
html, body { background: linear-gradient(90deg, var(--side) 0 var(--strip), var(--bg) var(--strip) 100%) var(--bg); background-color: var(--bg); }
.wrap { padding-top: calc(20px + 2 * env(safe-area-inset-top, 0px)); }
.gate { padding-top: calc(48px + 2 * env(safe-area-inset-top, 0px)); }