/* Oloolua Hardware — premium trade counter
   Fraunces (display) + Manrope (UI). Cream canvas, maroon primary, gold accents —
   the same palette as olooluahardware.com (cream #F4EEE1 body, ivory cards,
   maroon #800000, gold #D4AF37, light header). Chrome is light, not dark: the
   site's nav lives in a cream header, so ours does too.
   NOTE: plain gold is too low-contrast for TEXT on cream — use --gold-dark
   for any lettering, and keep --gold for fills, rules and borders. */

:root {
  --maroon: #800000;
  --maroon-light: #a52a2a;
  --maroon-dark: #4b0000;
  --gold: #d4af37;
  --gold-bright: #f4c430;
  --gold-dark: #aa8c2c;        /* readable gold on cream */
  --gold-soft: rgba(212, 175, 55, .14);
  --bg: #f4eee1;               /* cream canvas */
  --card: #fbf7ef;             /* warm ivory */
  --chrome: #f9f4ea;           /* top bar / nav surface */
  --text: #2b2924;
  --muted: #6a6456;
  --line: rgba(0, 0, 0, .10);
  --line-soft: rgba(0, 0, 0, .06);
  --red: #b3261e;
  --green: #1e7d3a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(60, 40, 10, .06);
  --shadow-md: 0 6px 18px -6px rgba(60, 40, 10, .16);
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background-color: var(--bg);
  /* the same warm tints the website washes over its cream canvas */
  background-image:
    radial-gradient(circle at 15% 50%, rgba(128, 0, 0, .05) 0%, transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(212, 175, 55, .07) 0%, transparent 30%);
  background-attachment: fixed;
  color: var(--text);
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: var(--text); }

/* ============ AUTH ============ */
.auth {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 20px;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 15% 50%, rgba(128, 0, 0, .06) 0%, transparent 32%),
    radial-gradient(circle at 85% 25%, rgba(212, 175, 55, .10) 0%, transparent 32%);
}
.auth-logo {
  width: 148px; max-width: 52%; height: auto; display: block;
  margin-bottom: 22px; border-radius: 20px;
  box-shadow: 0 18px 40px -14px rgba(60, 40, 10, .35), 0 0 0 1px rgba(170, 140, 44, .3);
  animation: rise .5s cubic-bezier(.22, .61, .36, 1) both;
}
.auth-card {
  background: var(--card); border-radius: 18px;
  padding: 30px 26px 26px; width: 100%; max-width: 390px;
  box-shadow: 0 20px 50px -20px rgba(60, 40, 10, .32);
  border: 1px solid var(--line);
  border-top: 3px solid var(--maroon);
  animation: rise .5s cubic-bezier(.22, .61, .36, 1) .08s both;
}
.auth-sub {
  font-family: var(--font-display); font-size: 1.16rem; color: var(--maroon);
  margin-bottom: 18px; line-height: 1.35;
}
.auth-error { color: var(--red); font-size: .85rem; margin-top: 10px; min-height: 1.2em; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ============ FIELDS ============ */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 74px; }
.field input:focus, .field select:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
/* A flex item will NOT shrink below its content: a date input's intrinsic width is
   large, so a FROM/TO row stayed 344px wide inside a 288px column and pushed the
   whole page into a sideways scroll at 320. `min-width:0` lets them shrink, and the
   140px basis decides when to stack - so no media query has to know which fields are
   in the row. Measured at 320 on the reports' shared range picker, 2026-08-07. */
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.field-row .field { flex: 1 1 140px; min-width: 0; }

/* ============ BUTTONS ============ */
.btn {
  padding: 12px 18px; font-size: .95rem; font-weight: 700;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--text); cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
/* cost + margin under a cart line, while the price is being haggled */
.cart-cost { margin-top: 6px; font-size: .84rem; color: var(--muted); }
.cart-cost b { color: var(--text); }
.cart-cost.none { color: var(--red); }

/* confirmation for a sale that produces no paper */
.trade-saved {
  margin: 10px 0 0; padding: 11px 13px; line-height: 1.45;
  border: 1.5px solid var(--green); border-radius: var(--radius-sm);
  background: rgba(30, 125, 58, .07); color: var(--text); font-size: .93rem;
}

/* search over the More menu. Sticks to the top so the box stays put while the
   list under it shrinks - on a phone the results otherwise scroll away from it. */
.more-search { position: sticky; top: 0; z-index: 5; padding: 6px 0 10px; background: var(--bg); }
.more-search input {
  width: 100%; padding: 12px 14px; font-size: 1rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
}
.more-search input:focus { outline: none; border-color: var(--gold-dark); }

/* a disclosure, not an action: it must not read as loud as the buttons it hides */
.btn.subtle { border-style: dashed; border-color: var(--line); color: var(--muted); font-weight: 600; }
.btn:hover { border-color: rgba(0, 0, 0, .22); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--maroon-light), var(--maroon));
  border-color: var(--maroon-dark); color: #fff;
  box-shadow: 0 4px 14px -4px rgba(128, 0, 0, .45);
}
.btn.primary:hover { box-shadow: 0 6px 18px -4px rgba(128, 0, 0, .55); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; pointer-events: none; }

.charge-btn {
  width: 100%; padding: 16px; font-size: 1.06rem; font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #229463, var(--green));
  color: #fff; border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(30, 125, 84, .6);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.charge-btn:hover { filter: brightness(1.05); }
/* Same shape, house colour. Green is the Sell screen's money-in button; a maroon
   theme screen performing a non-money action wears the theme. */
.charge-btn.maroon {
  background: linear-gradient(180deg, var(--maroon-light), var(--maroon));
  box-shadow: 0 8px 22px -8px rgba(128, 0, 0, .55);
}
.charge-btn:active { transform: translateY(1px); }
.charge-btn:disabled { opacity: .55; pointer-events: none; }

.linklike {
  background: none; border: none; color: var(--maroon); font-weight: 700;
  font-size: .87rem; cursor: pointer; padding: 4px 0;
  border-bottom: 1.5px solid var(--gold); border-radius: 0;
}
.linklike:hover { color: var(--maroon-dark); }
/* a destructive text link (e.g. Delete this product) — red, no gold underline */
.linklike.danger { color: var(--red); border-bottom-color: var(--red); }
.linklike.danger:hover { color: #8f1e18; }
/* a destructive button (the confirm step of a delete) */
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { background: #8f1e18; }

/* ============ APP SHELL ============ */
.test-banner {
  display: block; width: 100%; border: none; cursor: pointer;
  background: repeating-linear-gradient(45deg, #b3261e, #b3261e 12px, #8f1e18 12px, #8f1e18 24px);
  color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .04em;
  padding: 8px 12px; text-align: center;
}

/* offline / sync status strip under the header. Green-ish "catching up" when
   online with a queue; amber when the till has no connection at all. */
.net-pill {
  width: 100%; text-align: center; padding: 6px 12px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  background: var(--gold-soft); color: var(--gold-dark);
  border-bottom: 1px solid var(--gold);
}
.net-pill.net-off { background: #fff3cd; color: #7a5b00; border-bottom-color: #e0b400; }
.net-pill.hidden { display: none; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(249, 244, 234, .94);
  backdrop-filter: blur(8px);
  color: var(--text);
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(60, 40, 10, .08);
}
.topbar-logo { height: 56px; width: auto; display: block; border-radius: 10px; }
.page-title {
  font-family: var(--font-display); font-size: 1.18rem; font-weight: 600;
  letter-spacing: .01em; color: var(--maroon);
}
.topbar-user {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; color: var(--maroon);
  background: rgba(212, 175, 55, .16);
  border: 1px solid rgba(170, 140, 44, .45);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.topbar-user:hover { background: rgba(212, 175, 55, .28); border-color: var(--gold-dark); }
.topbar-user:active { transform: scale(.97); }
.topbar-user svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-user #whoami { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main {
  padding: 18px 16px 96px;
  max-width: 760px; margin: 0 auto;
}

/* bottom tab bar (mobile) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: var(--chrome);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(60, 40, 10, .08);
  padding-bottom: env(safe-area-inset-bottom);
}
.side-brand { display: none; }
/* sidebar-only shortcuts: hidden on the mobile bottom bar (no room), shown only
   in the desktop left sidebar where there's vertical space to spare.
   Scoped under .tabbar so it outranks the base .tab { display:flex } that
   follows it in source order. */
.tabbar .side-only,
.tabbar .side-heading { display: none; }
.tab {
  flex: 1; padding: 9px 4px 10px; font-size: .68rem; font-weight: 700;
  letter-spacing: .02em;
  border: none; background: none; color: var(--muted); cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: color .15s;
}
.tab svg { width: 21px; height: 21px; }
.tab.active { color: var(--maroon); }
.tab.active::after {
  content: ""; position: absolute; top: 0; left: 28%; right: 28%;
  height: 3px; background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 0 0 3px 3px;
}
.badge {
  position: absolute; top: 4px; right: 22%;
  background: var(--red); color: #fff; font-size: .64rem; font-weight: 800;
  min-width: 17px; height: 17px; line-height: 17px;
  border-radius: 9px; padding: 0 4px;
  box-shadow: 0 0 0 2px var(--chrome);
}

/* ============ LISTS & CARDS ============ */
.searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.searchbar input, .searchbar select {
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: .97rem; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.searchbar input { flex: 1; }
.searchbar select { max-width: 40%; }
.searchbar input:focus, .searchbar select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}

.item-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 9px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: transform .13s, box-shadow .15s, border-color .15s;
  animation: rise .3s cubic-bezier(.22, .61, .36, 1) both;
}
.item-card:nth-child(2) { animation-delay: .03s; }
.item-card:nth-child(3) { animation-delay: .06s; }
.item-card:nth-child(4) { animation-delay: .09s; }
.item-card:nth-child(5) { animation-delay: .12s; }
.item-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: #dcd5c4;
}
/* A row that OPENS something has to say so. Every card lifts on hover, which on a
   static row is a promise it does not keep - and the rows that really do open a
   receipt showed no pointer at all, so the only true signal was missing. Listed in
   ONE place rather than at the sixteen call sites that wire these handlers.
   Adding a new tappable row? Put its data-attribute here, or give the card the
   `tap` class, which is the escape hatch that never needs this list edited. */
.item-card[data-receipt],
.item-card[data-hcrcpt],
.item-card[data-hw],
.item-card[data-id],
.item-card[data-cust],
.item-card[data-supplier],
.item-card[data-note],
.item-card[role="button"],
.item-card.tap {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(139, 30, 26, .08);
}
/* the counter is on phones and tablets, where a cursor means nothing - so the
   press itself has to answer back */
.item-card[data-receipt]:active,
.item-card[data-hcrcpt]:active,
.item-card[data-hw]:active,
.item-card[data-id]:active,
.item-card[data-cust]:active,
.item-card[data-supplier]:active,
.item-card[data-note]:active,
.item-card[role="button"]:active,
.item-card.tap:active {
  transform: translateY(0) scale(.995);
  box-shadow: var(--shadow-sm);
}
.item-main { min-width: 0; }
.item-name { font-weight: 700; font-size: .97rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-sub { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.item-qty { text-align: right; flex-shrink: 0; }
.item-qty .n {
  font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.item-qty .u { font-size: .73rem; color: var(--muted); font-weight: 600; }
.item-qty.low .n { color: var(--red); }
.price-tag { color: var(--green); font-weight: 700; }

.empty { text-align: center; color: var(--muted); padding: 42px 12px; font-size: .95rem; }

.fab {
  position: fixed; right: 18px; bottom: 84px; z-index: 11;
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--maroon-dark);
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  border: none; cursor: pointer;
  box-shadow: 0 10px 26px -6px rgba(180, 140, 30, .65);
  transition: transform .15s, box-shadow .15s;
}
.fab:hover { transform: scale(1.06); }
.fab:active { transform: scale(.97); }

/* ============ SECTION HEADINGS ============ */
.section-title {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600; color: var(--maroon);
  margin: 22px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.section-title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ============ REPORT CARDS ============ */
.report-cards { display: flex; gap: 10px; margin-bottom: 12px; }
.report-card {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 12px 12px; text-align: center;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.report-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
}
.report-card .rc-label {
  font-size: .68rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.report-card .rc-value {
  font-size: 1.08rem; font-weight: 800; margin-top: 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ============ MENU (More tab) ============ */
.menu-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 15px 17px; margin-bottom: 9px; width: 100%;
  text-align: left; font-size: 1rem; font-weight: 700; color: var(--text); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .13s, box-shadow .15s, border-color .15s;
  position: relative;
}
.menu-item::after {
  /* gold is near-invisible on cream (1.8:1) — the chevron has to be readable */
  content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 1.3rem; font-weight: 400;
}
.menu-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: #dcd5c4; }
.menu-item small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; margin-top: 3px; padding-right: 20px; }

/* ============ MODALS ============ */
.modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(7, 16, 32, .6);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-card {
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 22px 20px 28px; width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto;
  animation: rise .28s cubic-bezier(.22, .61, .36, 1) both;
}
.modal-card h2 {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--maroon); margin-bottom: 16px;
}
/* wrap into rows instead of overflowing sideways — the receipt can carry up to
   eight action buttons. auto-fit keeps ~2 per row on a phone, more where wide. */
.modal-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-top: 8px; }
.modal-actions .btn { width: 100%; }

@media (min-width: 600px) {
  .modal { align-items: center; }
  .modal-card { border-radius: 18px; }
}

/* ============ SELL / QUOTE ============ */
.sell-results { margin-bottom: 12px; }
.sell-result {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; margin-bottom: 6px; width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .95rem; text-align: left; cursor: pointer;
  transition: border-color .13s, background .13s;
}
.sell-result:hover { border-color: var(--gold); background: #fffdf5; }
.sell-result .r-name { font-weight: 700; }
.sell-result .r-meta { font-size: .76rem; color: var(--muted); }
.sell-result .r-price { color: var(--green); font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.sell-result:disabled { opacity: .45; pointer-events: none; }
/* duplicated products: the newest is the one to pick — gold star + a gold hairline,
   its older twins are dimmed and labelled so nobody grabs a stale price. */
.sell-result.is-pick { border-color: var(--gold); background: #fffaf0; }
.sell-result .pick-star { color: var(--gold-dark); margin-right: 4px; }
.sell-result .pick-tag {
  font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green); background: rgba(0,128,0,.1); border-radius: 999px; padding: 1px 7px; margin-left: 5px;
}
.sell-result.is-old { opacity: .62; }
.sell-result .old-tag {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 5px;
}

.cart-line {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-sm);
}
.cart-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cart-name { font-weight: 700; font-size: .95rem; }
.cart-remove {
  border: none; background: none; color: var(--red); font-size: 1.35rem;
  line-height: 1; cursor: pointer; padding: 2px 6px; flex-shrink: 0;
  border-radius: 6px; transition: background .13s;
}
.cart-remove:hover { background: #fbeff0; }
.cart-controls { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.cart-controls .field { flex: 1; margin-bottom: 0; }
.cart-controls input { padding: 9px 10px; font-size: .95rem; }
.cart-linetotal {
  font-weight: 800; font-size: .95rem; flex-shrink: 0; padding-bottom: 10px;
  min-width: 88px; text-align: right; font-variant-numeric: tabular-nums;
}
/* blank at qty 1: the element stays for the keystroke handler, but must not
   reserve its 88px and leave a hole beside the price box */
.cart-linetotal:empty { display: none; }
.cart-source { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.src-toggle { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); cursor: pointer; }
.src-toggle input { width: 17px; height: 17px; accent-color: var(--maroon); }
.cart-source .field { margin: 8px 0 0; }
.trade-toggle {
  display: flex; align-items: center; gap: 9px; margin: 2px 0 12px;
  font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.trade-toggle input { width: 18px; height: 18px; accent-color: var(--maroon); flex-shrink: 0; }
.segbar { display: flex; gap: 6px; background: var(--line-soft); padding: 4px; border-radius: 999px; }
.seg {
  flex: 1; padding: 8px 4px; font-size: .85rem; font-weight: 700; border: none;
  border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
  transition: background .13s, color .13s, box-shadow .13s;
}
.seg.on { background: #fff; color: var(--maroon); box-shadow: var(--shadow-sm); }
.wa-link { display: inline-block; margin-top: 2px; color: #1a8f4c; font-weight: 700; font-size: .82rem; text-decoration: none; }
.wa-link:hover { text-decoration: underline; }

/* Help topics: native <details> so it works with no JS and reads well on a phone */
.help-topic {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 8px; box-shadow: var(--shadow-sm); overflow: hidden;
}
.help-topic > summary {
  cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.help-topic > summary::-webkit-details-marker { display: none; }
.help-topic > summary::after {
  content: "+"; margin-left: auto; font-size: 1.3rem; font-weight: 400;
  color: var(--muted); line-height: 1; transition: transform .15s;
}
.help-topic[open] > summary::after { content: "\2013"; }
.help-topic > summary:hover { background: var(--line-soft); }
.help-who {
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--maroon); background: var(--line-soft); border-radius: 999px; padding: 3px 8px;
}
.help-body { padding: 0 16px 14px; font-size: .92rem; line-height: 1.6; color: var(--text); }
.help-body p { margin: 0 0 10px; }
.help-body ul, .help-body ol { margin: 0 0 10px; padding-left: 20px; }
.help-body li { margin-bottom: 6px; }
.help-body b { font-weight: 700; }

/* 2x2 on phones so the four modes never overflow sideways; one row where wide */
.pay-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 12px; }
/* customer-type picker: three across, labels wrap if narrow */
.type-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-row .pay-btn { padding: 9px 4px; font-size: .8rem; }

/* Void modal: the warning the person must read, and one-tap common reasons so a
   busy counter types less (they can still write their own). */
.void-warn {
  margin: -4px 0 14px; font-size: .86rem; line-height: 1.45;
  color: var(--maroon); background: rgba(128, 0, 0, .06);
  border-left: 3px solid var(--maroon); border-radius: 0 6px 6px 0;
  padding: 9px 11px;
}
.quick-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.quick-reasons button {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  font-family: inherit; font-size: .78rem; font-weight: 600;
  border-radius: 999px; padding: 6px 11px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.quick-reasons button:hover { border-color: var(--gold); background: var(--gold-soft); }
.quick-reasons button.selected {
  border-color: var(--maroon); background: var(--maroon); color: #fff;
}

/* Supplier reconciliation: a disagreement is RED and impossible to miss — the same
   thing Ezekiel does by hand with a red fill on his spreadsheet. */
.disc-banner {
  border: 1.5px solid var(--red); border-left: 5px solid var(--red);
  background: rgba(179, 38, 30, .06); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 14px;
}
.disc-banner-top {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--red);
}
.disc-banner-sum {
  font-family: "Fraunces", serif; font-size: 1.6rem; font-weight: 600;
  color: var(--red); line-height: 1.2; margin: 2px 0 4px;
}
.disc-banner-sub { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.disc-banner.ok {
  border-color: var(--green); border-left-color: var(--green);
  background: rgba(0, 128, 0, .06);
}
.disc-banner.ok .disc-banner-top { color: var(--green); }

/* a single disputed line */
.item-card.disc-card {
  border-left: 4px solid var(--red);
  background: rgba(179, 38, 30, .05);
}
/* Sales-by-product rows flagged for a check: red = sold at a loss, gold = a margin
   so high the buying price is probably missing/wrong. */
.item-card.row-loss { border-left: 4px solid var(--red); background: rgba(179, 38, 30, .06); }
.item-card.row-bigmargin { border-left: 4px solid var(--gold); background: var(--gold-soft); }
.row-flag {
  font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap;
}
.row-flag.loss { color: #fff; background: var(--red); }
.row-flag.big { color: var(--gold-dark); background: rgba(212, 175, 55, .22); border: 1px solid var(--gold); }

/* invoice scanner: a line priced per bag, converted to the product's per-kg price */
.pack-note {
  font-size: .82rem; line-height: 1.5; color: var(--text);
  background: var(--gold-soft); border-radius: 6px; padding: 7px 10px; margin: 2px 0 8px;
}
.pack-note .pack-input {
  width: 58px; padding: 2px 6px; display: inline-block; margin: 0 2px;
  border: 1.5px solid var(--gold); border-radius: 5px; font-size: .85rem;
}

.disc-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); margin-right: 7px; vertical-align: middle;
}

/* per-report "Export CSV" button: floats top-right so it sits beside the back link */
/* Export CSV + Print sit together above every report. They were a float when
   there was one of them; two floats stack in reverse reading order, so the row
   is a flex now. */
.report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; flex-wrap: wrap; }
.report-export-btn {
  margin: 0;
  border: 1px solid var(--line); background: var(--card); color: var(--maroon);
  font-weight: 700; font-size: .8rem; border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.report-export-btn:hover { background: rgba(128, 0, 0, .06); }
@media (min-width: 920px) { .pay-row { grid-template-columns: repeat(4, 1fr); } }
.pay-btn {
  flex: 1; padding: 11px 4px; font-size: .88rem; font-weight: 800;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--muted); cursor: pointer;
  transition: border-color .13s, color .13s, background .13s, box-shadow .13s;
}
.pay-btn:hover { border-color: rgba(0, 0, 0, .22); }
.pay-btn.selected {
  border-color: var(--maroon); color: var(--maroon);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--maroon);
}

.collect-check {
  display: flex; align-items: center; gap: 9px;
  font-size: .88rem; font-weight: 600; color: var(--text);
  margin: 4px 0 14px; cursor: pointer;
}
.collect-check input { width: 17px; height: 17px; accent-color: var(--gold); flex-shrink: 0; }

.credit-box {
  background: #fdf8ec; border: 1px solid #ecd9a8; border-radius: 12px;
  padding: 13px; margin-bottom: 12px;
}
.credit-box .field { margin-bottom: 8px; }

.cash-box {
  background: #eef6f0; border: 1px solid #c9e3d0; border-radius: 12px;
  padding: 13px; margin-bottom: 12px;
}
.cash-box .field { margin-bottom: 0; }
.change-line { font-size: 1.05rem; margin-top: 10px; text-align: center; }
.change-line b { color: var(--green); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.change-line.short { color: var(--red); font-weight: 700; }

/* ============ LIST SCANNER ============ */
.scan-box {
  background: linear-gradient(180deg, #fbf9f2, #f4f0e4);
  border: 1.5px dashed #cdbf95; border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px;
}
.scan-box textarea {
  width: 100%; padding: 11px 13px; font-size: .95rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.scan-box textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }

/* ============ RECEIPT ============ */
.receipt {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .82rem; color: #000; background: #fff;
  padding: 10px 6px; max-width: 300px; margin: 0 auto;
}
.receipt .r-center { text-align: center; }
.receipt .r-feed { height: 0; }
.receipt .r-shop { font-size: 1rem; font-weight: 700; }
.receipt hr { border: none; border-top: 1px dashed #000; margin: 8px 0; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { padding: 2px 0; vertical-align: top; }
/* the gap is load-bearing: without it a long item line can touch the amount */
.receipt td.amt { text-align: right; white-space: nowrap; padding-left: 12px; }
.receipt .r-total td { font-weight: 700; font-size: .95rem; padding-top: 6px; }
.receipt .r-void {
  font-weight: 700; letter-spacing: .08em; margin-top: 6px;
  border: 2px solid #000; padding: 4px;
}
.receipt .r-dup {
  font-weight: 700; letter-spacing: .06em; margin-top: 6px;
  border: 2px dashed #000; padding: 4px;
}
.receipt .r-dup-no { text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; margin: 6px 0; }

/* ============ FULL A4 INVOICE ============
   The printed invoice handed to business customers — replaces the handwritten
   green-book one. Deliberately NOT thermal-narrow: the whole point is that the
   POS receipt was too small to read. */
.invoice {
  background: #fff; color: #000; padding: 16px;
  font-family: Georgia, "Times New Roman", serif; font-size: .85rem; line-height: 1.4;
}
.invoice .inv-head { text-align: center; border-bottom: 2px solid #000; padding-bottom: 8px; }
.invoice .inv-shop { font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; }
.invoice .inv-tag { font-style: italic; font-size: .8rem; margin-top: 2px; }
.invoice .inv-addr { font-size: .72rem; margin-top: 5px; line-height: 1.45; }
.invoice .inv-title {
  text-align: center; font-size: 1.05rem; font-weight: 700; letter-spacing: .22em;
  margin: 10px 0 8px;
}
.invoice .inv-meta {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: .78rem; margin-bottom: 10px;
}
.invoice .inv-meta-r { text-align: right; white-space: nowrap; }
.invoice .inv-meta span { color: #444; }
.invoice .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.invoice .inv-table th, .invoice .inv-table td {
  border: 1px solid #000; padding: 5px 7px; font-size: .78rem; vertical-align: top;
}
.invoice .inv-table th { background: #f0f0f0; font-weight: 700; text-align: left; }
/* narrow, right-aligned: the line number is a pointer, not data, so it must not
   take width from Particulars - the only column that ever needs to wrap */
.invoice .c-no { width: 4%; text-align: right; color: #444; white-space: nowrap; }
.invoice .c-qty { width: 15%; white-space: nowrap; }
.invoice .c-rate, .invoice .c-amt { width: 17%; text-align: right; white-space: nowrap; }
.invoice .c-total-l { text-align: right; font-weight: 700; }
.invoice .c-total { font-weight: 700; font-size: .88rem; }
.invoice .inv-status {
  text-align: center; font-weight: 700; letter-spacing: .06em;
  padding: 6px; border: 1px solid #000; margin-bottom: 10px; font-size: .8rem;
}
.invoice .inv-paid { background: #eaf7ea; }
.invoice .inv-due { background: #fdf0e6; }
.invoice .inv-void { background: #fbe4e2; border-width: 2px; }
.invoice .inv-foot { text-align: center; font-size: .72rem; line-height: 1.6; }
.invoice .inv-thanks { margin-top: 4px; font-weight: 700; }
.modal-wide { max-width: 720px; width: 100%; }

@media print {
  /* The paper sits inside .modal, which is position:fixed AND carries a
     backdrop-filter. A backdrop-filter makes that element a containing block for
     absolutely positioned descendants, so the paper's top:0/left:0 resolved
     against the modal CARD - which align-items:flex-end parks at the bottom of
     the screen - instead of against the page. That is why a receipt printed two
     thirds of the way down an A4 sheet. And visibility:hidden still reserves
     layout space, so the hidden app pushed it down further.
     Fix: drop every other top-level block outright and flatten the modal chrome,
     rather than trying to position out of a containing block we cannot escape. */
  body.printing-receipt > *:not(#receiptModal),
  body.printing-invoice > *:not(#invoiceModal) { display: none !important; }

  body.printing-receipt #receiptModal,
  body.printing-invoice #invoiceModal {
    position: static; display: block; inset: auto;
    background: none; backdrop-filter: none;
  }
  body.printing-receipt .modal-card,
  body.printing-invoice .modal-card {
    max-width: none; max-height: none; overflow: visible;
    margin: 0; padding: 0; border-radius: 0; box-shadow: none;
    animation: none; background: #fff;
  }
  /* the on-screen buttons are not part of the document */
  body.printing-receipt .modal-actions,
  body.printing-invoice .modal-actions { display: none !important; }

  /* the delivery state is for the counter, not the customer - it must never reach
     the roll, whatever it says */
  body.printing-receipt .deliv-strip,
  body.printing-invoice .deliv-strip { display: none !important; }

  /* thermal receipt / quote: narrow roll. 2mm of side padding keeps text off the
     cut edges, so the roll gets 68mm of usable width out of the 72mm head. */
  body.printing-receipt #receiptPaper {
    width: 72mm; max-width: none; margin: 0; padding: 0 2mm;
  }
  /* A thermal head has no grey - it burns a dot or it doesn't - so a grey like
     --muted (#6a6456) comes out as scattered dots and reads as faint print on
     the roll. Force every line to pure black and stop the browser lightening it.
     The small print gets a little more weight for the same reason: at 72mm the
     sub-lines are tiny, and thin grey type is the first thing to disappear on a
     cheap roll. */
  body.printing-receipt #receiptPaper,
  body.printing-receipt #receiptPaper * {
    color: #000 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* A thermal cutter sits 1-2cm PAST the print head, so the last line printed is
     still under the head when the cut fires and gets pushed onto the next slip -
     which is how "Thank you, karibu tena!" ended up at the top of the next
     receipt. Feed real blank space so the last real line clears the blade before
     it cuts. It has to be CONTENT: the print service supplies the paper size
     (RawBT's "80mm Roll", the Windows driver's form), so an @page lead-out is
     ignored on the paths that matter. */
  body.printing-receipt #receiptPaper .r-feed { height: 22mm; }
  body.printing-receipt #receiptPaper .muted,
  body.printing-receipt #receiptPaper .item-sub,
  body.printing-receipt #receiptPaper small { font-weight: 600; }

  /* full invoice: whatever paper the printer is loaded with (A4/A5) */
  body.printing-invoice #invoicePaper {
    width: 100%; max-width: none; margin: 0; padding: 0; font-size: 11pt;
  }
  body.printing-invoice .inv-table th { background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============ DESKTOP: sidebar layout ============ */
@media (min-width: 920px) {
  body { font-size: 15px; }

  .tabbar {
    top: 0; bottom: 0; right: auto; width: 228px;
    flex-direction: column; justify-content: flex-start;
    background: var(--chrome);
    border-top: none; border-right: 1px solid var(--line);
    box-shadow: 2px 0 14px rgba(60, 40, 10, .06);
    padding: 0 12px 18px;
  }
  .side-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 8px 22px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .side-brand img { width: 60px; height: 60px; border-radius: 12px; }
  .side-brand span {
    font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
    color: var(--maroon); line-height: 1.25; letter-spacing: .02em;
  }
  .tab {
    flex: none; flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 12px 14px; margin-bottom: 3px;
    font-size: .92rem; font-weight: 700;
    border-radius: 10px; text-align: left;
  }
  .tab svg { width: 20px; height: 20px; flex-shrink: 0; }
  .tab:hover { color: var(--text); background: rgba(0, 0, 0, .04); }
  .tab.active { color: var(--maroon); background: rgba(128, 0, 0, .08); }
  .tab.active::after {
    top: 10px; bottom: 10px; left: 0; right: auto; width: 3px; height: auto;
    border-radius: 0 3px 3px 0;
    background: var(--maroon);
  }
  .badge { position: static; margin-left: auto; box-shadow: none; }

  /* promoted shortcuts appear here in the sidebar (unless role-hidden) */
  .tabbar .side-only:not(.hidden) { display: flex; }
  .tabbar .side-heading {
    display: block;
    padding: 14px 14px 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .tab[data-tab="more"] { margin-top: 8px; }

  .topbar { padding: 13px 28px; }
  .topbar-logo { display: none; }
  .page-title { font-size: 1.35rem; }
  body:has(#app:not(.hidden)) { padding-left: 228px; }

  main { padding: 26px 30px 60px; max-width: 860px; margin: 0; }

  .fab { bottom: 32px; right: 32px; }
  .report-card .rc-value { font-size: 1.25rem; }
}

/* "Update ready" bar. A till tab stays open for days and never reloads, so the
   running page checks for a new build itself (see checkForUpdate in app.js) and
   drops this in when it finds one. Bottom-centre so it never covers the top bar
   or the nav, and it is a direct child of <body>, so the print rule above
   (body.printing-receipt > *:not(#receiptModal)) already keeps it off paper. */
#updateBar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 900; max-width: min(92vw, 460px);
  padding: 11px 18px; border: 1px solid var(--gold);
  border-radius: 999px; background: var(--maroon); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); cursor: pointer;
}
#updateBar:hover { background: var(--maroon-light); }

/* Vendor credit at the foot of the slip.
   Zed puts theirs at the TOP because Zed IS the fiscal device - that mark is a
   compliance claim doing a job. Ours is not, so at the top it only pushed the
   shop's name down and made the customer's first read a company they have never
   bought from. The receipt is Oloolua's document; we are a credit, and credits
   go at the foot.
   Plain text, not the logo: the brand asset is light lettering on a near-black
   panel, so a thermal head would have to burn an inverted raster for it - slower,
   ~2KB on every slip, and it smudges on cheap paper. A line of text always
   prints cleanly. (git has the raster version if it is ever wanted back.) */
.receipt .r-by { font-size: .72rem; color: #444; margin-top: 6px; }
.receipt .r-by + .r-by { margin-top: 0; }   /* the number sits tight under the name */

/* Past customer/PIN suggestions under the invoice fields on Sell. A company that
   buys twice should only be typed once; picking a row fills the name AND the PIN. */
.inv-suggest { display: flex; flex-direction: column; gap: 3px; margin-top: -4px; }
.inv-suggest-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .9rem; color: var(--text);
}
.inv-suggest-row:hover { border-color: var(--gold); background: var(--gold-soft); }
.inv-suggest-name { font-weight: 700; flex: 1; min-width: 0; }
.inv-suggest-pin { font-size: .8rem; color: var(--muted); white-space: nowrap; }
.inv-suggest-pin.muted { font-style: italic; opacity: .7; }
.inv-saved { font-size: .82rem; color: var(--green); font-weight: 700; margin-top: 4px; }
.inv-save-form { border: 1.5px dashed var(--gold); border-radius: var(--radius-sm); padding: 11px 12px 12px; margin-top: 6px; background: rgba(212,175,55,.05); }
.inv-save-title { font-weight: 800; font-size: .9rem; margin-bottom: 9px; color: var(--maroon); }
.inv-save-form .field { margin-bottom: 9px; }
.inv-save-note { font-size: .76rem; color: var(--muted); margin-top: 8px; }
.field-hint { display: block; font-size: .74rem; color: var(--muted); margin-top: 5px; line-height: 1.35; }

/* The printed report's masthead: hidden on screen, only ever there for paper.
   A report in a drawer with no shop, no name and no date is a column of numbers
   nobody can place. */
.report-print-head { display: none; }

@media print {
  /* A report prints the VIEW, not a modal - so the chrome is what gets dropped,
     and #view is left in normal flow rather than positioned out of anything. */
  body.printing-report .topbar,
  body.printing-report .tabbar,
  body.printing-report .test-banner,
  body.printing-report .net-pill,
  body.printing-report #updateBar,
  body.printing-report .fab,
  body.printing-report .report-actions,
  body.printing-report .modal,
  body.printing-report .linklike,
  body.printing-report .searchbar { display: none !important; }

  body.printing-report #app { display: block !important; }
  body.printing-report #view { padding: 0; margin: 0; }

  body.printing-report .report-print-head {
    display: block; text-align: center; margin: 0 0 14px;
    border-bottom: 2px solid #000; padding-bottom: 10px;
  }
  .report-print-head .rp-shop { font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; }
  .report-print-head .rp-title { font-size: 1.05rem; font-weight: 700; margin-top: 2px; }
  .report-print-head .rp-when { font-size: .8rem; margin-top: 4px; }

  /* A thermal head and most office lasers have no grey. Force ink, and keep the
     cards from being sliced across a page break. */
  body.printing-report, body.printing-report * {
    color: #000 !important; background: #fff !important;
    box-shadow: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  body.printing-report .item-card,
  body.printing-report .report-card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #999; }
  body.printing-report .report-cards { display: flex; gap: 10px; flex-wrap: wrap; }
  body.printing-report .section-title { font-weight: 800; margin-top: 12px; }
  body.printing-report input, body.printing-report select { border: none !important; padding: 0 !important; }
}
/* count beside a menu row that is waiting on the person reading it */
.menu-count {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: .74rem; font-weight: 800; vertical-align: middle;
}
/* "replace the stock count" - only offered while the shop is still in test mode,
   because after go-live a delivery must ADD or every delivery wipes the shelf count. */
.reset-stock {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  padding: 11px 12px; border: 1.5px dashed var(--gold); border-radius: var(--radius-sm);
  background: rgba(212, 175, 55, .06); cursor: pointer;
}
.reset-stock input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; }
.reset-stock small { display: block; font-size: .78rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
/* A discount was always applied, but nothing on screen said so - which reads as
   "the DISC column was ignored". Shown so it can be checked against the paper. */
.disc-note { color: var(--green); font-weight: 600; }

/* ---- delivery state ------------------------------------------------------
   A strip above the receipt paper saying whether this sale has left the yard,
   and a red tint on any queued delivery that has been sitting too long. The
   whole point is that a skipped order should be the loudest thing on screen. */
.deliv-strip {
  margin: 0 0 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: .84rem; line-height: 1.35; border: 1px solid var(--line);
}
.deliv-strip b { font-weight: 800; }
.deliv-strip-out  { background: rgba(30, 125, 58, .10); border-color: rgba(30, 125, 58, .30); color: #14562a; }
.deliv-strip-wait { background: var(--gold-soft); border-color: rgba(212, 175, 55, .38); color: #6b5410; }
.deliv-strip-late { background: rgba(179, 38, 30, .10); border-color: rgba(179, 38, 30, .35); color: var(--red); }

/* a queued delivery that has waited too long: left bar plus a warm tint, so it
   reads as urgent in a list without shouting over the receipt numbers */
.item-card.deliv-late { border-left: 4px solid var(--red); background: rgba(179, 38, 30, .045); }
.deliv-late-text { color: var(--red) !important; font-weight: 800; letter-spacing: .01em; }

/* line numbers on the on-screen receipt. Muted so they guide the eye down the
   list without competing with the product names, and a fixed inline-block width
   so the names still start on one vertical line at 10+ items. */
/* The line number is its OWN COLUMN, not a hanging indent.
   It was a span with a negative text-indent, which pulled the number out of the
   table cell - and on a phone, where the paper has only 6px of padding, it landed
   OUTSIDE the white slip altogether, floating in the margin. A real column cannot
   escape the paper, sizes itself to the widest number so "11)" still lines up, and
   makes a wrapped item name indent under the NAME for free, which is what the
   hanging indent was for in the first place. */
.receipt .r-items td.r-no {
  width: 1%; white-space: nowrap; padding-right: 7px;
  color: var(--muted); vertical-align: top; text-align: right;
}

/* "this costs money" notice above any button that calls the AI. Gold, not red:
   it is a heads-up before spending, not an error - red here would read as
   something having gone wrong and get dismissed rather than read. */
.ai-cost-note {
  margin: 0 0 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, .4);
  color: #6b5410; font-size: .82rem; line-height: 1.4;
}
.ai-cost-note b { font-weight: 800; }

/* ---- native pickers: date, checkbox, radio, range -------------------------
   The calendar that opens from an <input type="date"> is drawn by the browser,
   not by us, so most of it cannot be styled at all. What it DOES honour is
   `accent-color` (the selected day and the today ring) and `color-scheme`.
   Setting them here is the whole of what is possible without shipping a custom
   calendar - which would mean re-implementing month navigation, keyboard entry
   and every locale's date order, to own a control the browser already gets right.

   `color-scheme: light` matters as much as the colour: without it, a phone set to
   dark mode renders the picker dark grey over our cream page, which looks far more
   broken than blue does. */
:root { color-scheme: light; accent-color: var(--maroon); }

/* the little calendar glyph inside the field. Replaced outright with a maroon SVG
   rather than tinted with a filter() chain: a filter that turns black into exactly
   #800000 is arrived at by trial and error, cannot be read back to check, and
   drifts the moment the browser changes its default glyph. This is literally the
   brand colour, and it is a bigger tap target on a phone. */
input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23800000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-size: 17px 17px; background-repeat: no-repeat; background-position: center;
  opacity: 1; cursor: pointer; padding: 4px; margin-right: -2px;
}
input[type="date"] { font-family: inherit; }

/* text selection matches the brand rather than the browser default blue */
::selection { background: rgba(128, 0, 0, .18); }