/*
 * The Common Purse — UI stylesheet (Phase 0 starting point).
 *
 * Theme-aware design tokens plus the component classes the app screens need.
 * Dark mode is defined explicitly under both a prefers-color-scheme media query
 * and a [data-theme] scope, so an in-app toggle wins in both directions rather
 * than being overridden by the OS setting.
 *
 * No external font or asset references — this file gets inlined into a single
 * HTML document that must render with the network disabled.
 */
/* ============================================================
   The Common Purse — single-file statement analyzer
   Everything runs locally. No network calls anywhere in this file.
   ============================================================ */

:root {
  color-scheme: light;
  --bg:            #f7f6f3;
  --surface:       #ffffff;
  --surface-2:     #faf9f6;
  --surface-3:     #f0eee8;
  --ink:           #14130f;
  --ink-2:         #55534c;
  --ink-3:         #8a8780;
  --line:          #e3e0d8;
  --line-2:        #cbc7bc;
  --gold:          #9a7215;
  --gold-bright:   #c69320;
  --gold-wash:     #fdf6e3;
  --good:          #0d7a34;
  --good-wash:     #e8f5ec;
  --warn:          #a35a06;
  --warn-wash:     #fdf1e3;
  --crit:          #b3322f;
  --crit-wash:     #fbecec;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  --grid:          #e9e6de;
  --shadow:        0 1px 2px rgba(20,19,15,.05), 0 4px 16px rgba(20,19,15,.05);
  --shadow-lg:     0 2px 8px rgba(20,19,15,.07), 0 18px 44px rgba(20,19,15,.11);
  --radius:        12px;
  --font:          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #0e0e0d;
    --surface:     #1a1a18;
    --surface-2:   #212120;
    --surface-3:   #2a2a27;
    --ink:         #f7f6f3;
    --ink-2:       #b9b6ad;
    --ink-3:       #8a8780;
    --line:        #2e2e2b;
    --line-2:      #3d3d39;
    --gold:        #e0ac36;
    --gold-bright: #f0c04e;
    --gold-wash:   #2a2318;
    --good:        #35b45c;
    --good-wash:   #16271b;
    --warn:        #d98b28;
    --warn-wash:   #2a1f12;
    --crit:        #e06a67;
    --crit-wash:   #2b1717;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
    --grid:        #292926;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --shadow-lg:   0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0e0d; --surface: #1a1a18; --surface-2: #212120; --surface-3: #2a2a27;
  --ink: #f7f6f3; --ink-2: #b9b6ad; --ink-3: #8a8780;
  --line: #2e2e2b; --line-2: #3d3d39;
  --gold: #e0ac36; --gold-bright: #f0c04e; --gold-wash: #2a2318;
  --good: #35b45c; --good-wash: #16271b;
  --warn: #d98b28; --warn-wash: #2a1f12;
  --crit: #e06a67; --crit-wash: #2b1717;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  --grid: #292926;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 96px; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  max-width: 1120px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 6px;
}

/* Pushed over by a margin, not by a flex-grow spacer: a spacer competes with
   the tab strip for space and wins, which is how the last tab ended up clipped
   at every width. */
.topbar-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 640; letter-spacing: -0.02em; font-size: 16px; white-space: nowrap; flex: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(140deg, var(--gold-bright), var(--gold));
  display: grid; place-items: center;
  color: #1a1508; font-weight: 800; font-size: 14px;
}
.brand small {
  font-weight: 500; font-size: 11px; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px;
  letter-spacing: .02em;
}

/* Account chip: the address is the first thing to go when space runs out. */
#acct span {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) { #acct span { display: none; } }
#syncchip { flex: none; }

.iconbtn {
  background: transparent; border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--ink-2);
  white-space: nowrap; flex: none;
}
.iconbtn:hover { background: var(--surface-3); color: var(--ink); }

/* ---------- tabs ---------- */
/* The tab strip is the one thing allowed to shrink and scroll: everything else
   in the bar is a fixed-size control, and letting the bar wrap looks broken. */
/* The tabs always take a row of their own, below the brand and the account
   controls. Sharing one row meant competing with an email address of
   unpredictable length, so whether the last tab was visible depended on who was
   signed in. Household is the paid-for half of the product; it must never be the
   one that vanishes. */
.tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  order: 10; flex-basis: 100%; min-width: 0; padding-bottom: 2px;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: transparent; border: 0; padding: 7px 13px; border-radius: 8px;
  font-size: 13.5px; font-weight: 520; color: var(--ink-3); white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.tab:hover { color: var(--ink); background: var(--surface-3); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
.tab .lock { font-size: 10px; opacity: .8; }
.tab-badge {
  font-size: 10.5px; font-weight: 700; background: var(--gold); color: #1a1508;
  border-radius: 4px; padding: 0 4px; line-height: 15px;
}

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-h {
  padding: 15px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.card-h h3 { font-size: 14.5px; }
.card-h .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------- stat tiles ---------- */
.stat { padding: 16px 18px; }
.stat .label { font-size: 12px; color: var(--ink-3); font-weight: 520; letter-spacing: .01em; }
.stat .val { font-size: 27px; font-weight: 650; letter-spacing: -0.028em; margin-top: 5px; line-height: 1.15; }
.stat .val.gold { color: var(--gold); }
.stat .foot { font-size: 12px; color: var(--ink-3); margin-top: 5px; }

/* ---------- hero / dropzone ---------- */
.hero { padding: 56px 0 34px; text-align: center; }
.hero h1 { font-size: 40px; letter-spacing: -0.033em; line-height: 1.1; }
.hero .tag { font-size: 17px; color: var(--ink-2); margin-top: 13px; max-width: 560px; margin-inline: auto; }
@media (max-width: 620px) { .hero h1 { font-size: 30px; } .hero .tag { font-size: 15.5px; } }

.privacy-strip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  background: var(--good-wash); color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 24%, transparent);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 560;
}

.drop {
  margin-top: 26px; border: 2px dashed var(--line-2); border-radius: 16px;
  background: var(--surface); padding: 40px 24px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop.over { border-color: var(--gold); background: var(--gold-wash); }
.drop h3 { font-size: 17px; }
.drop p { color: var(--ink-3); font-size: 13.5px; margin-top: 6px; }

.btn {
  border: 1px solid transparent; border-radius: 9px; padding: 9px 17px;
  font-size: 14px; font-weight: 570; background: var(--ink); color: var(--bg);
}
.btn:hover { opacity: .88; }
.btn.ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn.ghost:hover { background: var(--surface-3); opacity: 1; }
.btn.gold { background: linear-gradient(140deg, var(--gold-bright), var(--gold)); color: #1a1508; }
.btn.sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .045em;
  padding: 9px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.r, th.r { text-align: right; }
.tbl-scroll { overflow-x: auto; }

.merchant { font-weight: 560; }
.merchant .raw { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; border: 1px solid transparent;
}
.pill.neutral { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); }
.pill.good { background: var(--good-wash); color: var(--good); border-color: color-mix(in srgb, var(--good) 22%, transparent); }
.pill.warn { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.pill.crit { background: var(--crit-wash); color: var(--crit); border-color: color-mix(in srgb, var(--crit) 22%, transparent); }
.pill.gold { background: var(--gold-wash); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 26%, transparent); }

/* ---------- charts ---------- */
.chart { width: 100%; display: block; overflow: visible; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axis { fill: var(--ink-3); font-size: 11px; }
.chart .baseline { stroke: var(--line-2); stroke-width: 1; }
.bar-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.bar-row .nm { width: 150px; font-size: 13px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { flex: 1; height: 9px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 5px; }
.bar-row .amt { width: 92px; text-align: right; font-size: 13px; font-weight: 560; flex: none; }
@media (max-width: 620px) { .bar-row .nm { width: 96px; } .bar-row .amt { width: 76px; } }

/* ---------- savings plan ---------- */
.action {
  display: flex; gap: 13px; padding: 15px 18px; border-bottom: 1px solid var(--line);
  align-items: flex-start;
}
.action:last-child { border-bottom: 0; }
.action input[type=checkbox] { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.action .body { flex: 1; min-width: 0; }
.action .ttl { font-weight: 580; font-size: 14px; }
.action .why { font-size: 12.8px; color: var(--ink-2); margin-top: 3px; }
.action .save { text-align: right; flex: none; }
.action .save .big { font-weight: 650; font-size: 15px; color: var(--good); }
.action .save .per { font-size: 11.5px; color: var(--ink-3); }
.action.done { opacity: .5; }
.action.done .ttl { text-decoration: line-through; }

.runtotal {
  position: sticky; bottom: 0; background: var(--surface);
  border-top: 2px solid var(--gold); padding: 15px 18px;
  display: flex; align-items: center; gap: 14px; border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------- household ---------- */
.split-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.split-seg button {
  background: var(--surface); border: 0; padding: 5px 10px; font-size: 12px; font-weight: 550;
  color: var(--ink-2); border-right: 1px solid var(--line);
}
.split-seg button:last-child { border-right: 0; }
.split-seg button:hover { background: var(--surface-3); }
.split-seg button.on { background: var(--gold); color: #1a1508; }
.who-input { width: 120px; padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.pct-input { width: 58px; padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; text-align: right; }

.settle {
  background: linear-gradient(150deg, var(--gold-wash), var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius); padding: 26px; text-align: center;
}
.settle .who { font-size: 13.5px; color: var(--ink-2); }
.settle .amt { font-size: 42px; font-weight: 680; letter-spacing: -0.032em; color: var(--gold); margin: 5px 0; line-height: 1.1; }

.newbadge { background: var(--gold); color: #1a1508; font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 5px; }

/* ---------- paywall ---------- */
.locked { position: relative; }
.lockcard {
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  background: linear-gradient(155deg, var(--gold-wash), var(--surface) 62%);
  border-radius: var(--radius); padding: 34px; text-align: center; box-shadow: var(--shadow-lg);
}
.lockcard h2 { font-size: 23px; letter-spacing: -0.024em; }
.lockcard .price { font-size: 46px; font-weight: 700; letter-spacing: -0.035em; color: var(--gold); margin: 14px 0 2px; }
.lockcard .once { font-size: 12.5px; color: var(--ink-3); }
.lockcard ul { text-align: left; max-width: 400px; margin: 22px auto; padding: 0; list-style: none; }
.lockcard li { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; }
.lockcard li::before { content: "✓"; color: var(--good); font-weight: 700; flex: none; }
.key-input {
  width: 100%; max-width: 320px; padding: 10px 13px; border: 1px solid var(--line-2);
  border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit;
  text-align: center; letter-spacing: .06em;
}

/* ---------- transactions ---------- */
.cat-select {
  font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: 7px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  max-width: 150px;
}
.cat-select:hover { border-color: var(--gold); }

/* ---------- misc ---------- */
.empty { text-align: center; padding: 60px 24px; color: var(--ink-3); }
.hide { display: none !important; }
.note { font-size: 12.5px; color: var(--ink-3); }
.filebadge {
  display: inline-flex; align-items: center; gap: 7px; background: var(--surface-3);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; font-size: 12.5px;
}
.filebadge b { font-weight: 580; }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 11px 19px; border-radius: 10px;
  font-size: 13.5px; font-weight: 520; box-shadow: var(--shadow-lg); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.tooltip {
  position: fixed; pointer-events: none; z-index: 95; background: var(--ink); color: var(--bg);
  padding: 7px 11px; border-radius: 8px; font-size: 12.5px; box-shadow: var(--shadow-lg);
  opacity: 0; transition: opacity .12s; white-space: nowrap;
}
.tooltip.on { opacity: 1; }
.tooltip .t-amt { font-weight: 650; }
details.help { margin-top: 14px; }
details.help summary { cursor: pointer; font-size: 13px; color: var(--ink-3); }
details.help div { font-size: 13px; color: var(--ink-2); margin-top: 9px; line-height: 1.6; }
.sec-title { font-size: 12px; font-weight: 620; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin: 30px 0 12px; }