/* Watch Pricing — mockup design system (watch-pricing-ui-mockup).
   Tokens transcribed from the mockup: Brinker's green on black/white,
   Avenir Next stack, 14px radius, phone-first. Tenant brand colours come
   from the server via --primary / --accent / --header-bg / --surface /
   --text-on-primary, set inline by applyTheme(); the :root values below
   are the defaults. */
:root {
  --primary:#7aae2e; --accent:#111111; --header-bg:#111111; --surface:#f2f5f4; --text-on-primary:#17230a;
  --green:#7aae2e; --green-dark:#5d8a1f; --green-soft:#e6f0d4;
  --ink:#111111; --bg:#f2f5f4; --panel:#ffffff; --panel-2:#eef3f0;
  --text:#1a1f1c; --muted:#5f6b64; --line:#dde5df;
  --amber:#b97d10; --amber-bg:#fdf3dd; --red:#a83a2e; --red-bg:#fbeae7;
  --good:#1e7a4c; --good-soft:#e2f1e8; --warn:#a35c12; --warn-soft:#f8ecdc;
  --radius:14px;
  --shadow:0 1px 2px rgba(17,17,17,.06),0 18px 50px rgba(17,17,17,.10);
}
/* Dark mode: driven by html[data-theme="dark"], set by the inline
   script in index.html before first paint (saved choice wins, else
   the system setting) and by the header toggle in app.js. All dark
   surfaces come from these tokens — tenant brand colours (--primary
   etc.) are NOT redefined here, so a tenant's green still reads.
   Text colours are lightened for dark backgrounds: the light
   --green-dark / --red / --amber / --warn are too dim on dark, so
   each has a lighter dark value (contrast-checked in
   tests/test_dark_mode.py). */
html[data-theme="dark"] {
  --bg:#141816; --panel:#1e2421; --panel-2:#262d29; --text:#eef3f0;
  --muted:#a7b3ac; --line:#333d37;
  --green-soft:#2c3a1e; --green-dark:#b9d97e;
  --amber:#e0b45c; --amber-bg:#3a2f14;
  --red:#e08a7a; --red-bg:#3a201c;
  --good:#7fc79b; --good-soft:#1e2e26;
  --warn:#e0a55c; --warn-soft:#33270f;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 18px 50px rgba(0,0,0,.45);
}
/* Dark-only surface fixes (not tokens): the banner was hard-coded
   light yellow, the already-dark math panel needs a border so it
   does not blend into the dark background, and the near-black active
   chips are invisible on dark — they flip to light in dark mode. */
html[data-theme="dark"] .banner { background:#3a2f14; border-color:#8a6d1f; color:#f0dcb0; }
html[data-theme="dark"] .math-panel { border:1px solid var(--line); }
html[data-theme="dark"] .chips button.active,
html[data-theme="dark"] #refurb-chips button.active { background:#eef3f0; color:#111111; border-color:#eef3f0; }
html[data-theme="dark"] .tab[aria-selected="true"] { color:#b9d97e; }
html[data-theme="dark"] .band-marker { background:#fff; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html, body { margin:0; padding:0; }
body {
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
button { font-family:inherit; cursor:pointer; }
select, input { font-family:inherit; }
:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

.wrap { max-width:1180px; margin:0 auto; padding:22px 20px 48px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.error { color:var(--red); }
.sub { margin:0 0 16px; color:var(--muted); font-size:13.5px; }

/* ---------- splash / loading screen ---------- */
#splash {
  position:fixed; inset:0; z-index:60; background:#111111; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px; cursor:pointer;
  transition:opacity .45s ease;
}
#splash.gone { opacity:0; pointer-events:none; }
.splash-rule { width:44px; height:3px; background:var(--green); border-radius:2px; margin-bottom:18px; }
.splash-eyebrow { margin:0 0 10px; font-size:13px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#dfe8e1; }
.splash-name { margin:0; font-size:40px; font-weight:700; line-height:1.08; letter-spacing:-.01em; }
.splash-name span { color:var(--green); }
.splash-tag { margin:12px 0 22px; font-size:14.5px; color:#9fb3a6; }
.spinner {
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18); border-top-color:var(--green);
  animation:spin .9s linear infinite;
}
.spinner.small { width:26px; height:26px; border-width:2.5px; }
@keyframes spin { to { transform:rotate(360deg); } }
.splash-status { margin:16px 0 4px; font-size:15px; font-weight:600; color:#dfe8e1; }
.splash-sub { margin:0 0 16px; font-size:12.5px; color:#8b9a90; }
.splash-progress { width:190px; height:4px; background:rgba(255,255,255,.14); border-radius:2px; overflow:hidden; margin-bottom:20px; }
.splash-progress span { display:block; width:38%; height:100%; background:var(--green); animation:slide 1.6s ease-in-out infinite alternate; }
@keyframes slide { from { margin-left:0; } to { margin-left:62%; } }
.splash-enter {
  width:auto; min-height:44px; padding:13px 30px; margin-top:0;
  background:var(--green); color:#17230a; border:0; border-radius:999px;
  font-size:15px; font-weight:700;
}
.splash-hint { margin:14px 0 0; font-size:12px; color:#77857c; }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration:2.4s; }
  .splash-progress span { animation:none; margin-left:31%; }
  #splash { transition:none; }
}

/* ---------- login screen (stays neutral, no tenant branding) ---------- */
#login-screen {
  max-width:440px; margin:48px auto; padding:28px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow);
}
#login-screen h1 { margin:0 0 4px; font-size:22px; font-weight:700; }
#login-screen .muted { font-size:14px; }

/* ---------- context strip / header ---------- */
#app-header {
  background:var(--header-bg); color:#fff;
  padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}
#header-brand { font-weight:700; font-size:15px; flex:1; min-width:0; display:flex; align-items:center; gap:10px; white-space:nowrap; overflow:hidden; }
#header-logo-img { height:32px; width:32px; border-radius:6px; flex:none; }
#header-logo-img[hidden], #header-brand-name[hidden] { display:none; }
#header-brand-name { overflow:hidden; text-overflow:ellipsis; min-width:0; }
#header-brand-app { flex:none; }
#app-header button { width:auto; min-height:44px; margin-top:0; padding:8px 14px; flex:none; }
#app-header button.secondary {
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
}
/* Dark-mode toggle: a square icon button in the header, next to Sign
   out. Fixed 44px so the header stays one line at 390px. */
#app-header #theme-toggle { width:44px; padding:8px; }
#app-header #theme-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block; margin:0 auto; }

/* ---------- tab bar ---------- */
.tabbar {
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:0 20px; display:flex; gap:4px;
  position:sticky; top:0; z-index:20; overflow-x:auto;
}
.tab {
  appearance:none; background:none; border:none;
  padding:13px 16px 11px; width:auto !important; min-height:48px; margin-top:0;
  font-size:14.5px; font-weight:500; color:var(--muted);
  border-bottom:3px solid transparent; border-radius:0;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.tab svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tab:hover { color:var(--text); }
.tab[aria-selected="true"] { color:var(--green-dark); border-bottom-color:var(--green); font-weight:600; }
.tab .count {
  font-size:11.5px; font-weight:600; background:var(--green-soft); color:var(--green-dark);
  border-radius:999px; padding:1px 8px;
}
.tab .count:empty { display:none; }

/* ---------- views ---------- */
.view { display:none; }
.view.active { display:block; }
.view > * + * { margin-top:20px; }

/* ---------- cards & sections ---------- */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad { padding:20px; }
.card h2, section h2 { margin:0 0 4px; font-size:16.5px; font-weight:600; }
.card h3, section h3 { margin:0 0 8px; font-size:15px; font-weight:600; }
.price-col > section + section { margin-top:20px; }
.price-grid { display:grid; grid-template-columns:380px 1fr; gap:20px; align-items:start; }
@media (max-width:900px) { .price-grid { grid-template-columns:1fr; } }

/* ---------- fields ---------- */
label {
  display:block; margin:10px 0; font-weight:600;
  font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--muted);
}
label .muted { text-transform:none; letter-spacing:0; font-weight:400; }
input, select {
  width:100%; font-size:15.5px; font-weight:600; padding:12px; margin-top:4px;
  color:var(--text); background:var(--panel);
  border:1.5px solid var(--line); border-radius:10px;
}
input[type="number"] { font-variant-numeric:tabular-nums; }
input:focus, select:focus { outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
input[type="color"] { height:44px; padding:4px; }

/* ---------- buttons ---------- */
button {
  min-height:50px; width:100%; font-size:16px; font-weight:700;
  background:var(--primary); color:var(--text-on-primary);
  border:0; border-radius:8px; cursor:pointer; margin-top:8px;
}
button:hover { opacity:.92; }
button.secondary {
  background:var(--panel); color:var(--text); border:1px solid var(--line);
}
button.secondary:hover { border-color:var(--muted); opacity:1; }

/* ---------- chips (model / margin / refurb level buttons) ---------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.chips button {
  width:auto; min-height:44px; padding:8px 14px; margin-top:0;
  background:var(--panel); color:var(--muted);
  border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; font-weight:500;
}
.chips button:hover { opacity:1; border-color:var(--muted); }
.chips button.active { background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
#refurb-chips { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#refurb-chips button {
  border-radius:8px; text-align:left; padding:10px 12px;
  font-size:13.5px; font-weight:600; color:var(--text);
}
#refurb-chips button.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- refurb line items ---------- */
#refurb-items { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:12px; }
#refurb-items label {
  margin:0; text-transform:none; letter-spacing:0;
  font-size:12px; font-weight:500; color:var(--muted);
}
#refurb-items input { padding:8px 10px; font-size:14.5px; }
p:has(> #refurb-total) {
  margin-top:12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:13px; font-weight:500; color:var(--muted);
}
#refurb-total { font-size:16px; font-weight:700; color:var(--text); }

/* ---------- pricing result: verdict first ---------- */
#variant-title { font-size:19px; }
.verdict { margin-top:14px; }
.verdict-label {
  display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.verdict-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px; }
#p-med { font-size:56px; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.conf-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; font-size:13px; font-weight:700;
  background:var(--green-soft); color:var(--green-dark); white-space:nowrap;
}
.conf-pill::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.conf-pill[data-kind="thin"] { background:var(--red-bg); color:var(--red); }
.conf-note { margin:8px 0 0; font-size:12.5px; color:var(--muted); }
.band { margin-top:18px; }
.band-ends {
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.band-ends strong { font-size:17px; font-weight:800; color:var(--text); }
.band-track {
  position:relative; height:10px; margin-top:6px;
  background:var(--panel-2); border-radius:6px;
}
.band-fill {
  position:absolute; top:0; bottom:0; border-radius:6px;
  background:linear-gradient(to right, #c3d9a0, var(--green));
}
.band-marker {
  position:absolute; top:-5px; width:3px; height:20px;
  background:var(--ink); border-radius:2px; transform:translateX(-50%);
}
.band-scale {
  display:flex; justify-content:space-between; gap:8px; margin-top:8px;
  font-size:11.5px; color:var(--muted);
}
.band-scale strong { font-size:12px; color:var(--text); }
.band-scale span:nth-child(2) { text-align:center; }
.band-scale span:nth-child(3) { text-align:right; }
.band-note {
  margin:10px 0 0; background:var(--panel-2); border-radius:9px;
  padding:9px 11px; font-size:12.5px; color:var(--text);
}
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.stat-grid .card {
  background:var(--panel-2); box-shadow:none; padding:11px 13px;
}
.stat-grid .card span {
  display:block; font-size:11.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.stat-grid .card strong { font-size:20px; font-weight:600; }
#p-count, #p-delta { margin:12px 0 0; font-size:13.5px; }
.evidence {
  margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
}
.history { margin-top:18px; }
.history-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.history-head h3 { margin:0; font-size:13.5px; font-weight:700; }
.trend { font-size:12.5px; font-weight:700; color:var(--green-dark); }
.trend.down { color:var(--red); }
#history-chart { width:100%; height:auto; display:block; margin-top:8px; }
#history-chart polyline { stroke:var(--green); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
#history-chart circle { fill:var(--green); }
#history-chart .axis text { fill:var(--muted); font-size:10px; }
.loading-state {
  display:flex; gap:12px; align-items:center; margin-top:16px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
}
.loading-state p { margin:0; font-size:14px; }
.warning {
  background:var(--warn-soft); border:1px solid var(--warn); color:var(--warn);
  padding:12px; border-radius:8px; margin-top:12px; font-size:13.5px;
}
/* A failed lookup is a full-card, unmissable error naming the reference
   — never a small note under the previous watch's numbers. */
#pricing-error {
  background:var(--red-bg); border:2px solid var(--red); color:var(--red);
  padding:16px; border-radius:10px; margin-top:12px;
  font-size:16px; font-weight:700; line-height:1.45;
}
button:disabled { opacity:.45; cursor:not-allowed; }
#dial-only-btn { width:auto; margin-top:12px; }

/* ---------- offer ---------- */
.math-panel {
  background:var(--ink); color:#fff; border-radius:12px; padding:16px; margin-top:14px;
}
.math-row { display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:14px; }
.math-row span { color:#cfd8d1; }
.math-row strong { font-weight:600; }
.math-divider { height:1px; background:rgba(255,255,255,.2); margin:10px 0; }
.math-offer { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.math-offer span { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#b9d97e; }
#suggested-offer { font-size:36px; font-weight:800; color:#fff; }
#allin-cost { font-size:17px; }

/* ---------- internal quote (preset vs this quote) ---------- */
#internal-quote { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
#internal-quote-list { list-style:none; margin:10px 0 0; padding:0; }
#internal-quote-list li {
  padding:7px 0; border-bottom:1px dashed var(--line); font-size:13.5px;
}
#internal-quote-list li:last-child { border-bottom:none; }
#internal-quote-list strong { color:var(--warn); }

/* ---------- sold listings ---------- */
#listings-list, #brinkers-list, #ebay-active-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
#listings-list li, #brinkers-list li, #ebay-active-list li {
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); padding:13px 14px; font-size:14px;
}
#listings-list li strong, #brinkers-list li strong, #ebay-active-list li strong { font-size:16.5px; font-weight:800; }
#listings-list li a, #brinkers-list li a, #ebay-active-list li a { color:var(--green-dark); font-weight:600; }

/* ---------- 3-comp preview under the median ---------- */
#comp-preview { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
#comp-preview h3 { margin:0 0 8px; }
#comp-preview-list { list-style:none; margin:0 0 10px; padding:0; }
#comp-preview-list li { padding:5px 0; border-bottom:1px dashed var(--line); font-size:14px; }
#comp-preview-list li:last-child { border-bottom:none; }

/* ---------- active listings ---------- */
#brinkers-section, #ebay-active-section { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
#brinkers-section h3, #ebay-active-section h3 { margin:0 0 6px; }
/* Asking prices are labelled in words on every render, not just by
   a heading: "currently listed at", never "sold for". */
.asking-label {
  background:var(--amber-bg); border:1px solid var(--amber); color:var(--amber);
  padding:10px 12px; border-radius:8px; margin:10px 0; font-size:13.5px; font-weight:700;
}
#ebay-active-btn { width:auto; margin-top:6px; }

/* ---------- plan & usage ---------- */
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:900px) { .plan-grid { grid-template-columns:1fr; } }
.price-big { font-size:38px; font-weight:700; line-height:1; }
.price-big span { font-size:15px; font-weight:500; color:var(--muted); }
.incl { list-style:none; margin:14px 0 0; padding:0; }
.incl li {
  padding:7px 0; border-bottom:1px solid var(--line);
  font-size:14.5px; display:flex; justify-content:space-between; gap:12px;
}
.incl li:last-child { border-bottom:none; }
.incl .amt { font-weight:600; white-space:nowrap; }
#usage-line, #seats-line, #usage-msg { font-size:14.5px; }
.meter { margin-top:12px; }
.meter-track { height:9px; background:var(--panel-2); border-radius:5px; overflow:hidden; }
.meter-fill { height:100%; background:var(--green); border-radius:5px; }
.meter p { margin:6px 0 0; }
#topup-box {
  margin-top:14px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; padding:14px;
}
#topup-box label { margin-top:0; }

/* ---------- presets ---------- */
.manager-note {
  background:var(--amber-bg); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; font-size:13.5px; color:var(--text); margin-bottom:16px;
}
#preset-levels { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
#preset-levels h3 { grid-column:1 / -1; margin:10px 0 0; }
#preset-levels label {
  margin:0; text-transform:none; letter-spacing:0;
  font-size:12px; font-weight:500; color:var(--muted);
}
#preset-levels input { padding:8px 10px; font-size:14.5px; }
#view-presets > section + section { margin-top:20px; }

/* ---------- saved quotes ---------- */
#quote-list { list-style:none; margin:12px 0 0; padding:0; }
#quote-list li {
  margin:10px 0; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  font-size:14px;
}
#quote-list button { width:auto; min-height:44px; margin:8px 8px 0 0; padding:8px 13px; font-size:13.5px; }

/* ---------- banner ---------- */
.banner {
  background:#fff3cd; border:1px solid #e6c200; color:#5c4a00;
  padding:12px 16px; border-radius:8px; margin:0 0 20px; font-size:13.5px;
}

@media (max-width:640px) {
  .stat-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .stat-grid .card strong { font-size:16px; }
  .tabbar { padding:0 6px; }
  .tab { padding:13px 8px 11px; font-size:13px; }
  .tab svg { width:18px; height:18px; }
  #p-med { font-size:48px; }
  #suggested-offer { font-size:30px; }
  .wrap { padding:16px 12px 40px; }
  #login-screen { margin:24px auto; padding:22px; }
  .band-scale { font-size:10.5px; }
}