/* Counterslip · Glass look.
   Loaded after the inline stylesheet in index.html and wins on specificity order.
   The same surface treatment as the HMG Tools apps and site (hmg-glass.css):
   a solid dark wall with a soft wash of the store's colour top-right, the header a
   translucent band of that colour, and every card a translucent pane with a lit top
   edge. What changes from the HMG apps: the key colour is the tenant's, not the
   app's, so wash, band and the Accept button all follow --band, which paintBrand()
   sets from the store's logo colour (lib/theme.js keeps --on-band readable on it).
   Cash green and credit rust are the dark-theme pair from brand.md and never move.
   Figures sit on dark glass, so this layer forces the dark tokens in both schemes;
   payout text is 9.4:1 (cash) and 8.3:1 (credit) on the wall. Colour is never the
   only signal: every payout keeps its word and tick, the mix bar keeps its key. */

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --paper:#15110E; --card:#1F1915; --sunk:#2A2219; --ink:#F3EDE2; --muted:#B8AD9C;
  --line:#3A3027;
  --cash:#5FD4B0;   --cash-soft:#0E2E25;
  --credit:#F39A52; --credit-soft:#33200E;
  --warn:#E0A468; --warn-soft:#332309; --ok:#5FD4B0; color-scheme:dark;

  --wall:#17120C;
  --g-wash: color-mix(in srgb, var(--band) 34%, transparent);
  --g-bar-a: color-mix(in srgb, var(--band) 44%, transparent);
  --g-bar-b: color-mix(in srgb, var(--band) 18%, transparent);
  --g-pane: linear-gradient(180deg, rgba(255,246,232,.10), rgba(255,246,232,.045));
  --g-pane-2: rgba(255,255,255,.04);
  --g-line: rgba(255,240,222,.14);
  --g-line-2: rgba(255,240,222,.22);
  --g-edge: rgba(255,255,255,.18);
  --g-well:#0A0806;
  --g-key: var(--band);
  --g-glow: color-mix(in srgb, var(--band) 40%, transparent);
}

/* ------------------------------------------------------------------ wall */
html { background: var(--wall); }
body {
  color: var(--ink);
  /* --bg (the store's backdrop pattern on paper) is a light-theme surface; the
     wall replaces it. The pattern picker in Settings still saves, for the paper
     look and for printed slips. */
  background: radial-gradient(1100px 620px at 82% -8%, var(--g-wash), transparent 70%), var(--wall);
  background-attachment: fixed;
}
@media (max-width:899px) { body { background: radial-gradient(560px 440px at 90% -6%, var(--g-wash), transparent 70%), var(--wall); } }

/* ------------------------------------------------------------------ header */
.topbar {
  background: linear-gradient(180deg, var(--g-bar-a), var(--g-bar-b)), var(--wall);
  color: #fff;
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--g-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.plate { box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.4); }
.brand-div { background: #fff; opacity: .28; }
.storename, .storesub, .monogram { color: #fff; }
.storesub { opacity: .75; letter-spacing: .09em; text-transform: uppercase; font-size: 11px; }
.monogram { border-color: transparent; background: #fff; color: var(--g-key); box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.storelogo { box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.chip { color: #E8E6E3; border-color: transparent; background: rgba(0,0,0,.38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; padding: 4px 10px 4px 8px; }
.chip i { background: #fff; }
.chip.on i { background: #3DDC84; opacity: 1; }
.tabs { gap: 4px; padding: 3px; border-radius: 12px; background: rgba(0,0,0,.28); }
.tabs button { border: 0; border-radius: 9px; color: #E4E2DF; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; min-height: 34px; }
.tabs button:hover { color: #fff; }
.tabs button[aria-selected="true"] { background: rgba(0,0,0,.42); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.tabs button.alert::after { background: var(--credit); }
.col-side { top: calc(env(safe-area-inset-top,0px) + 76px); }

/* ------------------------------------------------------------------ panes */
.panel, .plan, .raised, .hint, .qrow, .line, .custbar, .empty, .results, .rate-dialog, .ghostfile, .propresult {
  background: var(--g-pane); border: 1px solid var(--g-line); box-shadow: inset 0 1px 0 var(--g-edge);
}
.panel, .plan, .raised, .rate-dialog { border-radius: 14px; }
.line { border-radius: 12px; }
.line.out { opacity: .45; border-color: var(--g-line); box-shadow: none; }
.hint, .qrow, .custbar { box-shadow: inset 0 1px 0 var(--g-edge); }
.empty { border-style: dashed; border-color: var(--g-line-2); color: var(--muted); box-shadow: none; }
.results { background: #1C1B1F; box-shadow: 0 12px 32px rgba(0,0,0,.55), inset 0 1px 0 var(--g-edge); }
.result { border-bottom-color: rgba(255,255,255,.07); }
.result:hover { background: rgba(255,255,255,.06); }
.rate-dialog { background: linear-gradient(180deg, rgba(255,246,232,.10), rgba(255,246,232,.045)), #16161A; box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 var(--g-edge); }
.rate-dialog::backdrop { background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.plan-side, .propresult, .tierrow { background: var(--g-well); border-color: rgba(0,0,0,.6); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.plan-side { border-top: 1px solid var(--g-line); }
.tierrow { border-radius: 8px; box-shadow: none; background: rgba(0,0,0,.3); }
.eyebrow { color: var(--muted); }

/* ------------------------------------------------------------------ controls */
button {
  border: 1px solid var(--g-line-2); border-radius: 10px; color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.4);
}
button:hover { background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border-color: rgba(255,240,222,.35); }
button.ghost { background: none; box-shadow: none; border-color: var(--g-line); color: #D6D4D1; }
button.ghost:hover { border-color: var(--g-line-2); background: rgba(255,255,255,.05); color: #fff; }
/* the one action a clerk reaches for first: the cream key, with the store's glow */
.cols .actions > button:not(.ghost), #btnAddConfirm, #btnImportConfirm {
  background: linear-gradient(180deg, #FFFFFF, #E6DCC9); color: #1C1610; border-color: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px var(--g-glow);
}
.cols .actions > button:not(.ghost):hover, #btnAddConfirm:hover, #btnImportConfirm:hover { filter: brightness(1.03); }
/* Accept trade: the store's colour, readable text from lib/theme.js */
button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-key) 100%, #fff 10%), var(--g-key)); color: var(--on-band);
  border-color: rgba(255,255,255,.45); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px var(--g-glow);
}
button.primary:hover { filter: brightness(1.04); }
button.primary:disabled { box-shadow: none; filter: none; }
button.small { border-radius: 8px; }
.kill { background: none; border: 0; box-shadow: none; color: var(--muted); }
.kill:hover { color: var(--credit); background: var(--credit-soft); }
button.preset { background: rgba(255,255,255,.05); box-shadow: none; }
button.preset.on { background: var(--credit-soft); border-color: var(--credit); color: var(--credit); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--credit); outline-offset: 2px; }

input, select, .qty {
  background: rgba(0,0,0,.35); color: var(--ink); border: 1px solid var(--g-line-2); border-radius: 9px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
input::placeholder { color: #807E7B; }
select { color-scheme: dark; }
label { color: var(--muted); }
.ghostfile { border-radius: 10px; color: var(--ink); }

/* ------------------------------------------------------------------ line rows */
.lines { gap: 8px; }
.inc { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: transparent; }
.inc.on { background: #fff; border-color: #fff; color: #1C1610; }
.pill { background: rgba(255,255,255,.08); color: #E4E2DF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pill.bulk { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.pill.src { border-color: var(--g-line); }
.pill.cat { background: rgba(255,255,255,.08); color: var(--ink); }
.pay { border: 1px solid rgba(255,255,255,.1); background: var(--g-pane-2); color: var(--muted); border-radius: 10px; }
.pay.cash b { color: var(--cash); } .pay.credit b { color: var(--credit); }
.pay.cash.on { background: color-mix(in srgb, var(--cash) 16%, transparent); border-color: color-mix(in srgb, var(--cash) 60%, transparent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.pay.credit.on { background: color-mix(in srgb, var(--credit) 16%, transparent); border-color: color-mix(in srgb, var(--credit) 60%, transparent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.sthumb { border-color: var(--g-line); background: rgba(0,0,0,.3); }
.flag { background: rgba(243,154,82,.1); color: #F3DDB8; border: 1px solid rgba(243,154,82,.35); border-radius: 12px; }

/* ------------------------------------------------------------------ the offer */
.plan-v { color: #fff; font-family: Antonio, Impact, sans-serif; font-weight: 700; font-size: clamp(40px, 9vw, 64px); letter-spacing: 0; line-height: .95; }
.plan-split { color: #D6D4D1; }
.mix { height: 8px; background: rgba(0,0,0,.4); box-shadow: inset 0 1px 2px rgba(0,0,0,.6); border-radius: 4px; margin: 0 16px; overflow: hidden; }
.mixkey { letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.whole button { border: 1px solid rgba(255,255,255,.12); background: var(--g-pane-2); color: var(--muted); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.whole button.cash { border-color: color-mix(in srgb, var(--cash) 45%, transparent); background: color-mix(in srgb, var(--cash) 10%, transparent); color: var(--cash); }
.whole button.credit { border-color: color-mix(in srgb, var(--credit) 45%, transparent); background: color-mix(in srgb, var(--credit) 10%, transparent); color: var(--credit); }
.whole button small { color: var(--muted); }
.side .v { color: #fff; }
.plan-accept { border-top-color: var(--g-line) !important; }

/* ------------------------------------------------------------------ history, status, misc */
.status { background: rgba(255,255,255,.08); color: var(--muted); }
.status.offered { background: var(--cash-soft); color: var(--cash); }
.note code { background: rgba(0,0,0,.35); color: var(--ink); }
.custbar { background: color-mix(in srgb, var(--cash) 14%, transparent); border-color: color-mix(in srgb, var(--cash) 50%, transparent); color: var(--ink); border-radius: 12px; }
.qrbox { border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 10px 26px rgba(0,0,0,.45); }
.catrow, .gamerow, .propitem { border-bottom-color: rgba(255,255,255,.07); }
.gamerow.unmatched select { border-color: var(--credit); }
.empty-thumb { color: var(--muted); }
#settingsMount h2, .proposal h3 { color: #fff; }
.hint-text b { color: #fff; }
.glyph { color: var(--ink); }
.steps { color: var(--ink); }
a { color: #D6D4D1; }
a:hover { color: #fff; }

/* phone: the offer is a glass bar pinned to the bottom */
@media (max-width:899px) {
  .plan { background: linear-gradient(180deg, rgba(255,246,232,.12), rgba(255,246,232,.06)), rgba(18,18,22,.86);
    -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--g-edge), 0 -12px 30px rgba(0,0,0,.45); border-radius: 14px 14px 0 0; }
  .plan-main .plan-v { font-size: 40px; }
}
@media print {
  html, body { background: #fff !important; color: #1C1610 !important; }
  .topbar, .plan, .line, .panel { background: #fff !important; color: #1C1610 !important; border-color: #1C1610 !important; box-shadow: none !important; }
}

/* ------------------------------------------------------------------ settings controls */
/* Native controls default to Chrome blue and a grey file button; bring them onto the glass. */
#settingsMount input[type=checkbox], #settingsMount input[type=radio], #settingsMount input[type=range] { accent-color: var(--g-key); }
#settingsMount input[type=checkbox] { width: 22px; height: 22px; min-height: 22px; }
#settingsMount input[type=file]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--g-pane-2); border: 1px solid var(--g-line-2); border-radius: 8px;
  padding: 8px 12px; margin-right: 10px;
}
#settingsMount input[type=file]::file-selector-button:hover { background: rgba(255,255,255,.09); }
.saved-note { align-self: center; font-size: 12.5px; font-weight: 600; color: var(--ok); margin-left: 4px; }
.saved-note::before { content: "\2713  "; }