/* The one look for every screen (register on 8793, inventory + import on 8794), so Tali sees ONE app whatever
   port is behind it (Ernest, Oct 19 2026). Palette read off templeemunah.org that night: deep blue #0060AA
   (their footer and buttons), header blue #3C86C3, light blue #68A5D2, gold #FFB700, text #333. Treatment "A":
   their deep blue bar with the white menorah mark (pos/mark.png, the mark cropped out of
   templeemunah.org/wp-content/themes/templeemunah/images/logo.png; the tiny wordmark under it is unreadable at
   header size, so our own text carries the words). Below the bar the pages keep their cream cards.
   Why this file and not three copied :root lines: "Tali doesn't like this blue" must be a one-line change.
   Fonts stay system: their Zilla Slab / Mulish are Google-hosted and the register runs with no network.
   The gold is reserved for LOOK HERE — one thing on a screen, never decoration (Ernest, Oct 19 2026). */
:root {
  --bg:#f6f4ef; --card:#fff; --ink:#1d1d1f; --muted:#6b6b70; --line:#d9d6cf;
  --accent:#0060aa; --accent-ink:#fff; --accent-soft:#e8f0f8;
  --bar:#0060aa; --bar-ink:#fff; --bar-muted:rgba(255,255,255,.78);
  --gold:#ffb700; --gold-ink:#3a2a00;
  --warn:#b4541a; --ok:#1f7a3a; --bad:#b00020;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); }

/* the bar: mark, "Gift Shop" over "Temple Emunah Sisterhood", then whatever the page puts beside it */
header.bar { display:flex; gap:14px; align-items:center; padding:8px 16px; background:var(--bar); color:var(--bar-ink); position:sticky; top:0; z-index:3; border-bottom:1px solid rgba(0,0,0,.15); }
header.bar .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; white-space:nowrap; }
header.bar .brand img { height:34px; width:auto; display:block; }
header.bar .brand h1 { font-size:19px; margin:0; font-weight:700; letter-spacing:.02em; line-height:1.1; }
header.bar .brand h1 small { display:block; font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--bar-muted); margin-top:2px; }
header.bar nav a { margin-right:14px; color:var(--bar-muted); text-decoration:none; font-weight:600; padding-bottom:2px; }
header.bar nav a.here { color:var(--bar-ink); border-bottom:2px solid var(--bar-ink); }
header.bar input { border:2px solid transparent; border-radius:10px; background:#fff; color:var(--ink); }
header.bar input:focus { outline:none; border-color:var(--gold); }
header.bar .small { color:var(--bar-muted); }

/* pills: their button shape. .go is the one that does the thing, .choice toggles (Paid by, categories) */
.pill { font:inherit; font-size:14px; font-weight:700; padding:7px 16px; border-radius:999px; border:2px solid var(--accent); background:#fff; color:var(--accent); cursor:pointer; }
.pill.on, .pill.go { background:var(--accent); color:var(--accent-ink); }
.pill:disabled { opacity:.45; cursor:default; }