/* Pricemend. Colors are taken from Quentin Matsys, "The Moneylender and His Wife" (1514):
   walnut shelving, the vellum of her book, gilt coins, the green table felt, her madder gown. */
/* Fonts are hosted with the app (SIL Open Font License), so the iPhone app works offline. */
@font-face { font-family: "IM Fell English"; src: url("fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spline Sans"; src: url("fonts/spline-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spline Sans"; src: url("fonts/spline-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Spline Sans"; src: url("fonts/spline-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --walnut: #2a1b12;
  --walnut-2: #3a281b;
  --vellum: #efe4cc;
  --vellum-2: #e4d6b8;
  --rule: #cdbb95;
  --ink: #1f1711;
  --ink-soft: #5c4a39;
  --gilt: #c39a45;
  --gilt-deep: #8f6b26;
  --felt: #36553f;
  --madder: #8c2f27;
  --on-dark: #f3ead8;
  --on-dark-soft: #cdbfa6;
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --text: "Spline Sans", -apple-system, "Helvetica Neue", sans-serif;
  --tab-h: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--walnut); color: var(--on-dark);
  font: 400 16px/1.5 var(--text);
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 2px; }
a { color: inherit; }

/* The painting. Fixed behind everything, focused on the coins and the scales. */
/* The faces and shelf stay clear at the top; the counting table darkens into the walnut
   where the title and buttons sit. */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: url("img/moneylender.jpg") 48% 12% / cover no-repeat;
}
.backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,27,18,0) 0%, rgba(42,27,18,0) 34%, rgba(42,27,18,.72) 56%,
    rgba(42,27,18,.94) 72%, var(--walnut) 88%);
}
@media (min-width: 700px) { .backdrop { background-position: 50% 30%; } }
/* Inner pages: the painting turns down to the coins on the table, and dims so headings read cleanly. */
body:not([data-page="home"]) .backdrop { background-position: 30% 92%; }
body:not([data-page="home"]) .backdrop::after {
  background: linear-gradient(180deg, rgba(42,27,18,.62) 0%, rgba(42,27,18,.7) 30%, rgba(42,27,18,.92) 60%, var(--walnut) 85%);
}

main { max-width: 560px; margin: 0 auto; padding: 0 16px; outline: none; }
main:focus, main:focus-visible { outline: none; }

/* Home */
.hero { min-height: calc(100vh - var(--tab-h) - env(safe-area-inset-bottom) - 12px); display: flex;
  flex-direction: column; justify-content: flex-end; padding-top: calc(env(safe-area-inset-top) + 24px); }
.brand { font: 400 56px/0.95 var(--display); margin: 0; color: var(--on-dark); letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(20,12,7,.55); }
.lede { font-size: 18px; line-height: 1.4; margin: 12px 0 22px; max-width: 30ch; color: var(--on-dark);
  text-shadow: 0 1px 10px rgba(20,12,7,.7); }
.actions { display: grid; gap: 10px; }
.btn { appearance: none; border: 0; border-radius: 14px; padding: 15px 18px; font-weight: 600; font-size: 17px;
  cursor: pointer; text-align: center; text-decoration: none; display: block; width: 100%; }
.btn-gilt { background: var(--gilt); color: var(--ink); box-shadow: inset 0 -2px 0 var(--gilt-deep); }
.btn-gilt:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--gilt-deep); }
.btn-quiet { background: rgba(239,228,204,.12); color: var(--on-dark); border: 1px solid rgba(239,228,204,.35); }
.btn-ink { background: var(--ink); color: var(--vellum); }
.btn-plain { background: none; color: var(--ink-soft); text-decoration: underline; padding: 10px; font-weight: 500; }
.btn[disabled] { opacity: .6; }
.credit { font: italic 13px/1.3 var(--display); color: var(--on-dark-soft); margin: 14px 2px 22px; }
.credit a { color: inherit; }

/* Vellum sheet: the account-book page every result is written on */
.sheet { background: var(--vellum); color: var(--ink); border-radius: 18px; padding: 22px 18px 18px;
  margin: 0 0 16px; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 18px 40px -24px rgba(0,0,0,.8); }
.sheet h2 { font: 400 28px/1.1 var(--display); margin: 0 0 4px; }
.sheet h3 { font: 600 15px/1.3 var(--text); margin: 22px 0 6px; color: var(--ink-soft); }
.sheet p { margin: 6px 0; }
.muted { color: var(--ink-soft); font-size: 14px; }
.sum { font: 400 64px/1 var(--display); margin: 2px 0 6px; font-variant-numeric: oldstyle-nums; }
.sum small { font: 500 15px var(--text); color: var(--ink-soft); margin-left: 6px; }
.facts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--ink-soft); margin: 8px 0 14px; }
.facts b { color: var(--ink); font-weight: 600; }
.policy { font-size: 13px; color: var(--ink-soft); border-left: 3px solid var(--rule); padding-left: 10px; margin: 12px 0 16px; }

/* Ledger rows */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ledger .what { font-weight: 600; line-height: 1.3; }
.ledger .amt { font: 400 24px/1 var(--display); text-align: right; font-variant-numeric: oldstyle-nums; align-self: start; }
.ledger .detail { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-soft); }
.ledger .detail b { color: var(--ink); font-weight: 500; }
.ledger .note { grid-column: 1 / -1; font-size: 13px; color: var(--madder); }
.ledger a { color: var(--felt); font-size: 13px; word-break: break-all; }
.mark { font: italic 15px var(--display); }
.mark.likely { color: var(--felt); }
.mark.maybe { color: var(--madder); }
.mark.none { color: var(--ink-soft); }
details.more summary { cursor: pointer; color: var(--ink-soft); font-weight: 500; padding: 14px 0 4px; }

/* Receipt history */
.history { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.history li button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid;
  grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.history .store { font-weight: 600; }
.history .when { grid-column: 1; font-size: 13.5px; color: var(--ink-soft); }
.history .amt { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 400 26px var(--display); }

/* Forms */
.field { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; }
.field input, .field select { display: block; width: 100%; margin-top: 6px; padding: 13px 12px; font-weight: 400;
  font-size: 16px; border-radius: 12px; border: 1px solid var(--rule); background: #fbf6ea; color: var(--ink); }
.row { display: flex; gap: 8px; }
.row input { flex: 1; }
.scan { flex: none; width: 52px; margin-top: 6px; border-radius: 12px; border: 1px solid var(--rule); background: #fbf6ea;
  display: grid; place-items: center; cursor: pointer; }
.scan svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.7; }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.switch input { width: 22px; height: 22px; accent-color: var(--felt); }
.plans { display: grid; gap: 10px; margin: 12px 0; }
.plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--rule);
  border-radius: 14px; background: #fbf6ea; cursor: pointer; text-align: left; color: var(--ink); width: 100%; }
.plan b { display: block; }
.plan span { font-size: 14px; color: var(--ink-soft); }
.plan .price { font: 400 22px var(--display); color: var(--ink); white-space: nowrap; }

.banner { border-radius: 12px; padding: 12px 14px; margin: 12px 0; font-size: 14.5px; background: var(--vellum-2); color: var(--ink); }
.banner.error { background: #f3d9d3; color: #5e1d17; }
.spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--rule);
  border-top-color: var(--ink); animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Barcode scanner: live camera with a frame to aim at. */
.scanner { position: relative; margin: 12px 0; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scanner[hidden] { display: none; }
.scanner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner .frame { position: absolute; left: 10%; right: 10%; top: 32%; bottom: 32%; border: 2px solid var(--gilt);
  border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.scanner .scanmsg { position: absolute; left: 0; right: 0; top: 10px; margin: 0; text-align: center; color: #fff; font-size: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.scanner .scanstop { position: absolute; right: 10px; bottom: 10px; padding: 8px 14px; font-size: 15px; }
.scan.on { background: var(--gilt); }
.page-head { padding: calc(env(safe-area-inset-top) + 28px) 2px 14px; }
.page-head h1 { font: 400 38px/1 var(--display); margin: 0; text-shadow: 0 2px 14px rgba(20,12,7,.6); }
.page-head p { margin: 8px 0 0; color: var(--on-dark-soft); text-shadow: 0 1px 8px rgba(20,12,7,.8); }

/* Bottom tabs */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--walnut); border-top: 1px solid rgba(195,154,69,.45);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 5; }
.tabbar button { all: unset; cursor: pointer; display: grid; justify-items: center; gap: 3px; font-size: 11.5px;
  color: var(--on-dark-soft); padding: 4px 0; position: relative; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tabbar [aria-current="page"] { color: var(--gilt); }
.tabbar button:focus-visible { outline: 2px solid var(--gilt); border-radius: 8px; }
.dot { position: absolute; top: 2px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--madder);
  box-shadow: 0 0 0 2px var(--walnut); }

/* The one orchestrated moment: a result sheet settles onto the table. */
.settle { animation: settle .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes settle { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .settle, .spin { animation: none; } }

/* A small note card inside a sheet: save this receipt, turn on notifications. */
.callout { display: grid; gap: 8px; margin: 14px 0; padding: 14px; border-radius: 14px; background: #f7efdc;
  border: 1px solid var(--rule); font-size: 14.5px; }
.callout b { font: 400 21px/1.1 var(--display); }
.callout .btn { width: 100%; }

/* Sign in with Apple, styled to Apple's guidelines (black, white logo and text). */
.btn-apple { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #000; color: #fff; }
.btn-apple svg { width: 16px; height: 19px; fill: currentColor; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13px; margin: 14px 0 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Show the cashier: plain paper, large type, no painting, no tabs. Readable across a counter. */
body[data-page="cashier"] .tabbar { display: none; }
body[data-page="cashier"] .backdrop { background: #fbf7ee; }
body[data-page="cashier"] .backdrop::after { display: none; }
body[data-page="cashier"] { background: #fbf7ee; }
.cashier { color: #14100c; padding: calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 28px); }
.ctop { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ctop .btn-plain { padding: 8px 0; font-size: 17px; color: #14100c; }
.seg { display: flex; background: #ece3cf; border-radius: 10px; padding: 3px; }
.seg button { all: unset; cursor: pointer; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #5a4a3a; }
.seg button[aria-selected="true"] { background: #fff; color: #14100c; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ckicker { margin: 22px 0 2px; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; font-weight: 700; color: var(--madder); }
.cstore { font: 400 44px/1 var(--display); margin: 0; }
.cmeta { margin: 8px 0 14px; font-size: 16px; color: #4a3c2f; }
.citems { list-style: none; margin: 0; padding: 0; border-top: 2px solid #14100c; }
.citems li { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid #d8cbb0; }
.cname { font-size: 19px; font-weight: 600; line-height: 1.25; }
.ccode { font: 600 24px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em; }
.cnums { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; align-items: baseline; }
.cdiff { margin-left: auto; font-size: 24px; font-weight: 700; color: var(--felt); }
.citems a { font-size: 15px; color: #14100c; }
.ctotal { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 2px solid #14100c; font-size: 18px; font-weight: 600; }
.ctotal b { font-size: 36px; color: var(--felt); }
.cpolicy { font-size: 15px; line-height: 1.45; margin: 16px 0 8px; color: #2c241c; }
.cfoot { font-size: 13.5px; color: #5a4a3a; }
.cscript { white-space: pre-wrap; font: 17px/1.5 var(--text); background: #fff; border: 1px solid #d8cbb0; border-radius: 12px; padding: 14px; margin: 0 0 14px; user-select: text; -webkit-user-select: text; }

/* Live lookup progress: each step appears as it happens; done steps get a gilt tick. */
.progress { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f7efdc; border: 1px solid var(--rule); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.35; }
.steps li::before { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.steps li.done::before { background: var(--felt); border: 0;
  -webkit-mask: none; box-shadow: inset 0 0 0 4px var(--felt); }
.steps li.done::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps li.now::before { border: 2px solid var(--rule); border-top-color: var(--ink); animation: spin .8s linear infinite; }
.steps li.fail::before { background: var(--madder); }
.steps li.now .t { font-weight: 600; }
.steps .d { display: block; font-size: 13px; color: var(--ink-soft); min-height: 0; }
.steps .d:empty { display: none; }
.elapsed { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.elapsed .spin { width: 12px; height: 12px; margin: 0; }