/* Ledger: the design system. Near-monochrome and editorial: warm paper
   with ink, or near-black with soft white; hairline borders; one mint
   accent for highlights, the active page and positive deltas; red only for
   losses and tax. Tokens first, then the shell, then components. Layout
   and chart rules live in app.css and use these tokens. */

/* ---------- Tokens ---------- */
:root {
  /* paper and ink */
  --bg: #ffffff;
  --panel: #ffffff;              /* flat: panels are the page */
  --panel-2: #f4f4f2;          /* sunken fields, hover */
  --text: #111110;
  --text-2: #3d3c38;           /* secondary copy */
  --muted: #76746d;
  --line: rgba(17, 17, 16, .10);
  --line-2: rgba(17, 17, 16, .22);
  --ink: #111110;              /* filled pill, primary button */
  --on-ink: #f6f5f0;
  /* the one accent */
  --accent: #c6f55a;           /* mint/lime fill */
  --accent-ink: #0f1a02;       /* text on the accent fill */
  --accent-soft: rgba(166, 227, 50, .22);
  --pos: #3f7a0b;              /* positive deltas as text */
  --neg: #c0392b;              /* losses, tax, warnings */
  --neg-soft: rgba(192, 57, 43, .10);
  --chain: #2f6bb3;             /* on-chain, in the review type column */
  --chain-soft: rgba(47, 107, 179, .10);
  --ln: #8f5b00;                /* lightning */
  --ln-soft: rgba(214, 150, 20, .14);
  --pos-soft: rgba(63, 122, 11, .10);
  /* charts */
  --chart-line: #111110;
  --chart-line-2: #8d8b84;
  --chart-grid: rgba(17, 17, 16, .08);
  --chart-area: rgba(17, 17, 16, .05);
  --chart-bar: rgba(17, 17, 16, .16);
  --chart-up: #3f9a12;         /* buys: green */
  --chart-down: #e0217f;       /* sales: pink */
  --chart-hot: #c6f55a;
  --series-1: #111110;
  --series-2: #4a4945;
  --series-3: #7a7872;
  --series-4: #a5a39b;
  --series-5: #c7c5bd;
  --series-6: #dedcd4;
  --ribbon: rgba(17, 17, 16, .18);
  --sk-grey-1: #2a2927;        /* sankey greys, darkest first */
  --sk-grey-2: #6b6964;
  --sk-grey-3: #a3a19a;
  --sk-grey-4: #cfcdc5;
  /* type */
  --font: "Urbanist", -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Roboto, sans-serif;
  --font-display: "Urbanist", -apple-system, "Segoe UI Variable Display", "Segoe UI Light", "Segoe UI", system-ui, "Helvetica Neue", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 26px;
  --fs-hero: clamp(48px, 7vw, 92px);
  --track: .12em;
  /* shape and depth */
  --r-xs: 6px; --r-sm: 12px; --r: 22px; --r-lg: 26px; --pill: 999px;
  --shadow: 0 1px 2px rgba(17, 17, 16, .05), 0 8px 28px rgba(17, 17, 16, .06);
  --shadow-pop: 0 12px 36px rgba(17, 17, 16, .16);
  /* liquid glass */
  --glass-fill: rgba(255, 255, 255, .42);
  --glass-fill-2: rgba(255, 255, 255, .62);   /* header, tab bar, tips: a touch denser */
  --glass-border: rgba(255, 255, 255, .6);
  --glass-edge: rgba(17, 17, 16, .07);        /* fallback edge so the card still reads without blur */
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .7);
  --glass-shadow: 0 2px 6px rgba(17, 17, 16, .03), 0 24px 60px -20px rgba(17, 17, 16, .14);
  --glass-blur: blur(18px) saturate(1.3);
  --wash-1: rgba(166, 227, 50, .09);          /* the backdrop's mint wash */
  --wash-2: rgba(17, 17, 16, .035);
  --wash-3: rgba(255, 255, 255, .5);
  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --nav-h: 64px;
  --tabbar-h: 68px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0b0b0a;
  --panel: #0b0b0a;
  --panel-2: #1c1c1a;
  --text: #f1f0eb;
  --text-2: #c9c8c1;
  --muted: #8f8d85;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .22);
  --ink: #f1f0eb;
  --on-ink: #0b0b0a;
  --accent: #b9f04a;
  --accent-ink: #0b1400;
  --accent-soft: rgba(185, 240, 74, .18);
  --pos: #b9f04a;
  --neg: #ff7466;
  --neg-soft: rgba(255, 116, 102, .12);
  --chain: #86b4f0;
  --chain-soft: rgba(134, 180, 240, .13);
  --ln: #f2c14e;
  --ln-soft: rgba(242, 193, 78, .13);
  --pos-soft: rgba(185, 240, 74, .12);
  --chart-line: #f1f0eb;
  --chart-line-2: #8f8d85;
  --chart-grid: rgba(255, 255, 255, .08);
  --chart-area: rgba(255, 255, 255, .05);
  --chart-bar: rgba(255, 255, 255, .16);
  --chart-up: #b9f04a;         /* buys: lime */
  --chart-down: #ff4fa3;       /* sales: neon pink */
  --chart-hot: #b9f04a;
  --series-1: #f1f0eb;
  --series-2: #c2c1ba;
  --series-3: #948f87;
  --series-4: #6b6962;
  --series-5: #4a4843;
  --series-6: #33322e;
  --ribbon: rgba(255, 255, 255, .20);
  --sk-grey-1: #e4e3dc;
  --sk-grey-2: #9d9b93;
  --sk-grey-3: #666460;
  --sk-grey-4: #3b3a36;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
  --shadow-pop: 0 12px 36px rgba(0, 0, 0, .6);
  --glass-fill: rgba(255, 255, 255, .045);
  --glass-fill-2: rgba(20, 20, 19, .72);
  --glass-border: rgba(255, 255, 255, .10);
  --glass-edge: rgba(255, 255, 255, .06);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .08);
  --glass-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 24px 60px -20px rgba(0, 0, 0, .6);
  --wash-1: rgba(185, 240, 74, .07);
  --wash-2: rgba(255, 255, 255, .035);
  --wash-3: rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* Color-blind friendly (a Display setting): blue and orange from the
   Okabe-Ito palette instead of green and red, for gains and losses, buys
   and sales. Light first; dark, more specific, after. */
:root[data-colors="cb"] {
  --pos: #0072b2;
  --pos-soft: rgba(0, 114, 178, .10);
  --neg: #b85400;
  --neg-soft: rgba(213, 94, 0, .10);
  --chart-up: #0072b2;         /* buys: blue */
  --chart-down: #d55e00;       /* sales: orange */
}
:root[data-theme="dark"][data-colors="cb"] {
  --pos: #56b4e9;
  --pos-soft: rgba(86, 180, 233, .14);
  --neg: #f0a030;
  --neg-soft: rgba(230, 159, 0, .14);
  --chart-up: #56b4e9;
  --chart-down: #e69f00;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; } /* same width whether or not a page scrolls */
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs)/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
/* Glass, only on the fixed bars and the floating tips: the page itself is
   flat, everything else sits directly on it. */
.glass, #tabs, .chart-tip, div.vis-tooltip {
  background: var(--glass-fill-2); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), var(--glass-shadow);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, #tabs, .chart-tip, div.vis-tooltip { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-border); }
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; margin: 0; }
h2 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); }
h3 { font-size: var(--fs-md); margin: var(--s-3) 0 0; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
code { font-family: var(--mono); font-size: var(--fs-xs); background: var(--panel-2); padding: 2px 6px; border-radius: var(--r-xs); overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: .92em; }
.small { font-size: var(--fs-sm); }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--neg); } .ok { color: var(--pos); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Small uppercase section labels, the editorial signature of this theme */
.eyebrow, .section-label, .ov-head b, th, .tile .k, .txf .col, #flow .band-label, #summary .sk-col, .sk-col, #graph-detail dt, #lookup dt, dl.facts dt {
  font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted);
}

/* ---------- Shell: header with pill navigation ---------- */
#top {
  position: sticky; top: 0; z-index: 20; height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-5);
  background: var(--bg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* The nav sits outside the header (a blurred header would trap a fixed
   child); on wide screens it floats centred over the header's row. */
#tabs { position: fixed; top: 0; left: 50%; transform: translateX(-50%); height: var(--nav-h); z-index: 21; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em; white-space: nowrap; margin-right: var(--s-3); }
.brand svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand .mark { fill: var(--accent); stroke: none; }
.brand svg path { stroke: var(--accent-ink); } /* the B: dark on the green in both themes */
#tabs { display: flex; align-items: center; gap: 5px; }
#search { margin-left: auto; }
/* Keep the right cluster clear of the centred nav on narrower desktops */
@media (max-width: 1280px) { #fulcrum-line { display: none; } }
@media (min-width: 761px) and (max-width: 1100px) { .fulcrum-status .lbl { display: none; } .fulcrum-status { width: 40px; padding: 0; justify-content: center; } #search input { width: 170px; } }
#tabs button {
  position: relative; width: 42px; height: 42px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--bg); box-shadow: none;
  color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
#tabs button:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-1px); }
#tabs button.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
#tabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* the label is a tooltip */
#tabs .lbl {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
  background: var(--ink); color: var(--on-ink); font-size: var(--fs-sm); line-height: 1; padding: 7px 10px; border-radius: var(--r-sm);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease, transform .12s ease; box-shadow: var(--shadow);
}
#tabs button:hover .lbl, #tabs button:focus-visible .lbl { opacity: 1; transform: translateX(-50%) translateY(0); }
#tabs .pill { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--bg); }
#search { display: flex; align-items: center; }
#search input {
  width: min(260px, 19vw); height: 40px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--panel);
  padding: 0 16px 0 40px; font-size: var(--fs-sm);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2376746d' stroke-width='1.8' stroke-linecap='round'><circle cx='9' cy='9' r='5.5'/><path d='M13.5 13.5 17 17'/></svg>");
  background-repeat: no-repeat; background-position: 14px center; background-size: 16px;
}
#search input:focus { border-color: var(--line-2); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--panel); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.icon-btn:hover { border-color: var(--line-2); }
.icon-btn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } /* the Settings link while on Settings */
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#theme-toggle .moon { display: none; }
:root[data-theme="dark"] #theme-toggle .sun { display: none; }
:root[data-theme="dark"] #theme-toggle .moon { display: block; }
/* Fulcrum status: a dot in a hairline pill */
.fulcrum-status { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--pill); border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.fulcrum-status:hover { border-color: var(--line-2); color: var(--text); }
.fulcrum-status b { font-weight: 600; color: var(--text); }
.fulcrum-status .lbl { overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent); }
.status-dot.up { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .status-dot.down { background: var(--neg); box-shadow: 0 0 0 3px var(--neg-soft); }

/* Page title under the header, editorial */
#page-head { max-width: 1180px; margin: 0 auto; padding: var(--s-6) var(--s-5) 0; }
#tab-title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-xl); letter-spacing: -.015em; line-height: 1.1; }
body[data-tab="overview"] #page-head { display: none; }
main { max-width: 1180px; margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-8); }
.tab { display: none; } .tab.on { display: block; }

/* ---------- Components ---------- */
/* Flat sections: no fill, border, shadow or radius. Air and the small
   uppercase labels separate them, with one hairline between major blocks. */
.card, .ov-card, .scroll, .tile { background: none; border: 0; box-shadow: none; border-radius: 0; }
.card { padding: 0; margin: var(--s-4) 0; }
.ov-card { padding: 0; margin: var(--s-8) 0 0; }
.ov-card + .ov-card { border-top: 1px solid var(--line); padding-top: var(--s-6); margin-top: var(--s-7); }
.hint { border-left: 2px solid var(--accent); padding: 4px 0 4px var(--s-4); }
.scroll { overflow-x: auto; }
.tab > h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); font-family: var(--font); }
.tab > h2:not(:first-child) { border-top: 1px solid var(--line); padding-top: var(--s-5); }
.tab > h2 + p.small { margin-top: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.wide { grid-column: 1 / -1; }
.row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* Section header: the label, the controls, and a grip that shows on hover */
.ov-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: var(--s-4); min-height: 34px; }
.ov-head > .small.muted { color: var(--muted); }

/* Stat tile */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4) var(--s-6); margin-top: var(--s-4); }
.tile { padding: 0; }
.tile .k { margin-bottom: 6px; }
.tile .v { font-family: var(--font-display); font-size: 26px; font-weight: 300; letter-spacing: -.01em; line-height: 1.15; }
.tile .sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.tile.tax .v { color: var(--neg); }

/* Hero number: very large, thin, label beneath, lots of air */
#hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s-6) 0 var(--s-5); gap: 6px; }
#hero .worth { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
#hero .label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin-top: 4px; }
#hero .held { color: var(--text-2); font-size: var(--fs); margin-top: var(--s-3); }
#hero .gain { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); padding: 4px 12px; border-radius: var(--pill); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--line); }
#hero .gain.pos { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
#hero .gain.neg { color: var(--neg); background: var(--neg-soft); border-color: transparent; }

/* Buttons: ink pill primary, hairline ghost secondary */
button, .btn { font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--text); background: transparent; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 8px 16px; min-height: 36px; cursor: pointer; line-height: 1.2; transition: background .12s ease, border-color .12s ease, color .12s ease; }
button:hover { border-color: var(--text); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
button.primary:hover { opacity: .9; }
button.danger { background: transparent; color: var(--neg); border-color: var(--neg); }
button.danger:hover { background: var(--neg); color: #fff; }
button.link { border: 0; background: none; padding: 0; min-height: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; font-weight: 500; border-radius: 0; }
button.link:hover { text-decoration-color: currentColor; }
button.sort { border: 0; background: none; padding: 0; min-height: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-radius: 0; }
button.sort::after { content: ""; margin-left: 4px; }
button.sort.asc::after { content: "▲"; font-size: 8px; } button.sort.desc::after { content: "▼"; font-size: 8px; }

/* Inputs and selects: sunken field, soft corners */
input, select, textarea { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid transparent; border-radius: var(--r-sm); padding: 9px 12px; min-width: 0; min-height: 38px; }
input:focus, select:focus { outline: none; border-color: var(--line-2); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--muted); }
input[type="file"] { padding: 7px 10px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; accent-color: var(--text); width: 16px; height: 16px; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2376746d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
label > input, label > select, label > span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }
label.inline { flex-direction: row; align-items: center; gap: 8px; }
label.check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text); }
label.check input { margin: 0; }
td input, td select { padding: 5px 10px; min-height: 32px; font-size: var(--fs-sm); }
td select { padding-right: 28px; }
progress { accent-color: var(--text); height: 6px; }

/* Segmented control: a hairline pill, the chosen part filled with ink */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); }
.seg label, .seg button { flex-direction: row; align-items: center; gap: 6px; border: 0; border-radius: var(--pill); padding: 6px 14px; min-height: 30px; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; text-transform: none; letter-spacing: 0; background: transparent; }
.seg label:hover, .seg button:hover { color: var(--text); }
.seg label:has(input:checked), .seg button.on { background: var(--ink); color: var(--on-ink); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.seg label > span { color: inherit; }

/* Tables: hairline dividers, no zebra, numbers right-aligned */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: top; }
th { padding-top: 12px; padding-bottom: 10px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
td.num, th.num { font-variant-numeric: tabular-nums; }
td.row { display: table-cell; } td.row > * { vertical-align: middle; margin-right: 6px; }
.scroll table thead th:first-child, .scroll table td:first-child { padding-left: 0; }
.scroll table thead th:last-child, .scroll table td:last-child { padding-right: 0; }
tbody tr:hover td { background: none; }
th { border-bottom-color: var(--line-2); }

/* Badges and pills */
.pill { background: var(--accent); color: var(--accent-ink); border-radius: var(--pill); padding: 0 7px; font-size: 11px; font-weight: 700; }
.badge { display: inline-block; padding: 2px 10px; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; border: 1px solid var(--line-2); }
.badge.prot { border-color: var(--text); }
.kind { display: inline-block; padding: 2px 10px; border-radius: var(--pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text); border: 1px solid var(--line-2); background: transparent; }
.kind.buy, .kind.income, .kind.purchase, .kind.gift-in { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.kind.sell, .kind.spend, .kind.sold { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.kind.unmatched { color: var(--neg); border-color: var(--neg); }

/* Toast and tooltip */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--on-ink); padding: 10px 18px; border-radius: var(--pill); z-index: 50; max-width: calc(100% - 32px); font-size: var(--fs-sm); box-shadow: var(--shadow-pop); }
.chart-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--glass-fill-2); border-radius: 16px; padding: 10px 14px; font-size: var(--fs-sm); white-space: nowrap; line-height: 1.4; }
.chart-tip b { font-weight: 600; font-size: 15px; }
.chart-tip .tip-row { display: flex; align-items: center; gap: 10px; }
.chart-tip .tip-pill { display: inline-block; padding: 2px 8px; border-radius: var(--pill); font-size: 11px; font-weight: 700; line-height: 1.3; }
.chart-tip .tip-pill.pos { background: var(--accent); color: var(--accent-ink); }
.chart-tip .tip-pill.neg { background: var(--neg); color: #fff; }
.chart-tip .tip-line { color: var(--text-2); margin-top: 3px; }
.chart-tip .tip-cap { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
div.vis-tooltip { position: absolute; visibility: hidden; padding: 8px 12px; white-space: pre; font-size: var(--fs-sm); color: var(--text); font-family: var(--font);
  background: var(--glass-fill-2); border-radius: 14px; pointer-events: none; z-index: 6; }

/* Legend */
.tg-legend, #legend { gap: 6px 16px; font-size: var(--fs-sm); color: var(--muted); }
.tg-key { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Drop zone */
.drop { border: 1px dashed var(--line-2); text-align: center; padding: var(--s-7) var(--s-4); cursor: pointer; border-radius: var(--r); }
.drop b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); margin-bottom: 4px; }
.drop:hover, .drop:focus, .drop.over { border-color: var(--text); background: var(--accent-soft); outline: none; }

details summary { cursor: pointer; color: var(--text-2); }
.net { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.net svg { width: 16px; height: 16px; flex: none; }
.net.unknown { color: var(--muted); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: var(--pill); font-size: var(--fs-sm); white-space: nowrap; color: var(--text-2); background: var(--panel-2); }
.tag svg { width: 14px; height: 14px; flex: none; }
.tag.onchain { color: var(--chain); background: var(--chain-soft); }
.tag.lightning { color: var(--ln); background: var(--ln-soft); }
.tag.in { color: var(--pos); background: var(--pos-soft); }
.tag.out { color: var(--neg); background: var(--neg-soft); }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.net .lbl { color: var(--text); font-size: var(--fs-sm); }
.mine { font-weight: 600; background: var(--accent-soft); padding: 0 4px; border-radius: 4px; }

/* ---------- Phone: bottom pill tab bar ---------- */
@media (max-width: 760px) {
  :root { --nav-h: 56px; --fs-hero: clamp(40px, 13vw, 56px); }
  #top { padding: 0 var(--s-3); gap: var(--s-2); }
  .brand span { display: none; }
  .brand { margin-right: 0; }
  #search { flex: 1; margin-left: 0; }
  #search input { width: 100%; height: 38px; }
  .fulcrum-status { padding: 0; width: 38px; height: 38px; justify-content: center; }
  .fulcrum-status .lbl { display: none; }
  .icon-btn { width: 38px; height: 38px; }
  #tabs {
    position: fixed; top: auto; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; margin: 0; height: auto;
    padding: 6px; gap: 2px; border-radius: var(--pill); background: var(--glass-fill-2); border: 1px solid var(--glass-border);
    box-shadow: var(--glass-hi), var(--shadow-pop); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
  }
  #tabs::-webkit-scrollbar { display: none; }
  #tabs button { width: 44px; height: 44px; border: 0; background: transparent; box-shadow: none; flex: none; }
  #tabs button.on { background: var(--ink); color: var(--on-ink); }
  #tabs .lbl { display: none; }
  #tabs .pill { top: 2px; right: 2px; border-color: var(--panel); }
  #page-head { padding: var(--s-4) var(--s-3) 0; }
  main { padding: var(--s-2) var(--s-3) calc(var(--tabbar-h) + 28px); }
  .ov-card { margin-top: var(--s-6); }
  .ov-card + .ov-card { padding-top: var(--s-5); margin-top: var(--s-5); }
  .tab > h2 { margin-top: var(--s-6); }
  .grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  th, td { padding: 10px 10px; font-size: var(--fs-sm); }
  .scroll table thead th:first-child, .scroll table td:first-child { padding-left: 0; }
  .scroll table thead th:last-child, .scroll table td:last-child { padding-right: 0; }
  button { min-height: 40px; }
  .seg label, .seg button { min-height: 34px; }
  input, select { min-height: 40px; }
  td input, td select { min-height: 36px; }
  #toast { bottom: calc(var(--tabbar-h) + 20px); }
}
@media (max-width: 420px) { .grid { grid-template-columns: 1fr; } }

/* Hero: swap dollars and bitcoin */
#hero .worth-row { position: relative; display: flex; align-items: center; justify-content: center; max-width: 100%; }
#hero .worth-row .hero-swap { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: var(--s-3); }
/* On a phone the button keeps one place at the row's right edge, and the
   amount stays on one line between equal margins (fitHero shrinks it if it
   must), so swapping moves nothing. */
@media (max-width: 760px) {
  #hero .worth-row { width: 100%; padding: 0 48px; box-sizing: border-box; min-height: var(--fs-hero); }
  #hero .worth-row .hero-swap { left: auto; right: 0; margin: 0; }
}
#hero .worth { white-space: nowrap; }
#hero .worth .unit { font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: .2em; color: var(--text-2); }
.hero-swap { flex: none; width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--text-2); cursor: pointer; }
.hero-swap:hover { color: var(--text); border-color: var(--text-2); }
.hero-swap svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Login page */
.login-page { background: var(--bg); }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-bottom: var(--s-4); }
.login-brand svg { width: 30px; height: 30px; fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-brand svg .mark { fill: var(--accent); stroke: none; }
.login-box form { border: 1px solid var(--line); border-radius: var(--r-lg, 20px); background: var(--bg); padding: var(--s-5, 24px); }
.login-box h2 { font-family: var(--font-display); font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--text); }
.login-box button.primary { border-radius: var(--pill); }
.login-error { color: var(--neg); }
.login-box { padding: 0; margin: 0; }

/* ---------- Assistant ---------- */
.ai-ask { display: none; margin-top: 4px; }
body.ai-ready .ai-ask { display: block; }
.ai-fab { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 56px; height: 56px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--ink); color: var(--on-ink); cursor: pointer;
  box-shadow: var(--shadow-pop); transition: transform .15s ease; }
.ai-fab:hover { transform: translateY(-2px); }
.ai-fab svg, .ai-icon svg, .ai-send svg, .ai-empty-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-fab svg path:first-child { fill: var(--accent); stroke: var(--accent); }
/* Dark mode: a green button with black sparkles (green on near-white was hard to see). */
:root[data-theme="dark"] .ai-fab { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
:root[data-theme="dark"] .ai-fab svg path:first-child { fill: var(--accent-ink); stroke: var(--accent-ink); }
.ai-panel { position: fixed; right: 24px; bottom: 24px; z-index: 41; width: min(440px, calc(100vw - 48px)); height: min(720px, calc(100vh - var(--nav-h) - 48px));
  display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-pop); overflow: hidden; }
.ai-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 8px; border-bottom: 1px solid var(--line); }
.ai-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; padding: 0 4px; }
.ai-icon { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; flex: none; }
.ai-icon:hover { background: var(--panel-2); color: var(--text); }
.ai-icon svg { width: 20px; height: 20px; }
.ai-list { position: absolute; inset: 61px 0 0; z-index: 2; background: var(--bg); overflow-y: auto; padding: 8px; }
.ai-list ul { list-style: none; margin: 0; padding: 0; }
.ai-list li { display: flex; align-items: center; gap: 2px; border-radius: var(--r-sm); }
.ai-list li.on, .ai-list li:hover { background: var(--panel-2); }
.ai-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ai-open span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-open small { color: var(--muted); font-size: var(--fs-xs); }
.ai-list-foot { padding: 12px; text-align: center; }
.ai-list-none { padding: 24px; text-align: center; }
.ai-warn { margin: 10px 12px 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--neg-soft); color: var(--neg); font-size: var(--fs-sm); }
.ai-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; overscroll-behavior: contain; }
.ai-msg.user { align-self: flex-end; max-width: 85%; }
.ai-bubble { background: var(--panel-2); padding: 10px 14px; border-radius: 18px 18px 4px 18px; overflow-wrap: anywhere; }
.ai-msg.bot { max-width: 100%; }
.ai-text { line-height: 1.55; overflow-wrap: anywhere; }
.ai-text p, .ai-text ul, .ai-text ol { margin: 0 0 8px; }
.ai-text ul, .ai-text ol { padding-left: 20px; }
.ai-text li { margin: 2px 0; }
.ai-text h4 { margin: 10px 0 4px; font-size: var(--fs-md); }
.ai-text code { font-family: var(--mono); font-size: .9em; background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }
.ai-text pre { background: var(--panel-2); padding: 10px; border-radius: var(--r-sm); overflow-x: auto; }
.ai-text pre code { background: none; padding: 0; }
.ai-table { overflow-x: auto; margin: 0 0 8px; }
.ai-table table { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; }
.ai-table th, .ai-table td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; white-space: nowrap; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-chips:empty { display: none; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); padding: 3px 10px; border-radius: var(--pill); border: 1px solid var(--line); color: var(--text-2); text-decoration: none; background: var(--bg); }
.ai-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
a.ai-chip:hover { border-color: var(--line-2); color: var(--text); }
.ai-chip.bad::before { background: var(--neg); }
.ai-err { color: var(--neg); font-size: var(--fs-sm); margin-top: 4px; }
.ai-note { color: var(--muted); font-size: var(--fs-sm); }
.ai-dots { display: inline-flex; gap: 4px; padding: 6px 0; }
.ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-dot 1.2s infinite ease-in-out; }
.ai-dots i:nth-child(2) { animation-delay: .15s; } .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-dots i { animation: none; opacity: .6; } .ai-fab { transition: none; } }
.ai-empty { margin: auto 0; text-align: center; color: var(--text-2); padding: 8px; }
.ai-empty-icon { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.ai-empty p { margin: 0 0 14px; font-size: var(--fs); }
.ai-suggest { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ai-suggest button { border: 1px solid var(--line); background: var(--bg); color: var(--text); border-radius: var(--r-sm); padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; font-size: var(--fs); }
.ai-suggest button:hover { border-color: var(--line-2); background: var(--panel-2); }
.ai-form { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-ctx { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-ctx-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); padding: 2px 10px; border-radius: var(--pill); background: var(--panel-2); }
.ai-ctx-chip.focus { background: var(--accent-soft); color: var(--text); }
.ai-ctx-chip button { border: 0; background: none; padding: 0 2px; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; }
.ai-input { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--line-2); border-radius: 22px; padding: 4px 4px 4px 14px; background: var(--bg); }
.ai-input:focus-within { border-color: var(--text-2); }
.ai-input textarea { flex: 1; border: 0; background: none; resize: none; padding: 8px 0; min-height: 22px; max-height: 160px; font: inherit; color: var(--text); outline: none; line-height: 1.4; }
.ai-send { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); cursor: pointer; flex: none; }
.ai-send svg { width: 18px; height: 18px; }
.ai-foot { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
@media (max-width: 760px) {
  .ai-fab { right: 16px; bottom: calc(var(--tabbar-h) + 28px); width: 52px; height: 52px; }
  .ai-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; z-index: 60; padding-bottom: env(safe-area-inset-bottom); }
  .ai-list { inset: 61px 0 0; }
  .ai-input textarea { font-size: 16px; } /* stops iOS zooming in on focus */
}
.ai-think { margin-bottom: 8px; font-size: var(--fs-sm); color: var(--muted); }
.ai-think summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; list-style: none; padding: 2px 0; }
.ai-think summary::-webkit-details-marker { display: none; }
.ai-think summary::before { content: "›"; display: inline-block; transition: transform .15s ease; font-size: 14px; }
.ai-think[open] summary::before { transform: rotate(90deg); }
.ai-think.live summary { color: var(--text-2); }
.ai-think.live summary::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ai-dot 1.2s infinite ease-in-out; }
.ai-think-body { margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--line-2); max-height: 220px; overflow-y: auto; line-height: 1.5; overflow-wrap: anywhere; }
#ai-settings select:disabled { opacity: .5; cursor: not-allowed; }
#ai-think-note { margin-top: 4px; }

/* ---------- Activity ---------- */
.act-filter { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; margin: 4px 0 var(--s-4); }
.act-filter button { border: 0; background: none; color: var(--text-2); padding: 6px 14px; border-radius: var(--pill); cursor: pointer; font: inherit; font-size: var(--fs-sm); }
.act-filter button.on { background: var(--ink); color: var(--on-ink); }
.act-day { font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); margin: var(--s-5) 0 var(--s-2); font-weight: 600; }
.act { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.act-who { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); }
.act.by-ai .act-who { background: var(--accent); color: var(--accent-ink); }
.act-who svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.act.by-ai .act-who svg path { fill: currentColor; }
.act-body { flex: 1; min-width: 0; }
.act-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.act-top b { font-weight: 600; }
.act-status { font-size: var(--fs-xs); padding: 1px 8px; border-radius: var(--pill); background: var(--panel-2); color: var(--muted); }
.act.pending .act-status { background: var(--accent-soft); color: var(--text); }
.act.undone .act-top b, .act.dismissed .act-top b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); }
.act-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.act-lines { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--text-2); }
.act-lines li { margin: 2px 0; overflow-wrap: anywhere; }
.act-lines.clip li:nth-child(n+4) { display: none; }
.act-more { font-size: var(--fs-sm); margin-top: 2px; }
.act-buttons { display: flex; gap: 8px; margin-top: 8px; }
.act-buttons button { padding: 6px 14px; border-radius: var(--pill); font-size: var(--fs-sm); }
.act-empty { padding: var(--s-5) 0; }
/* the same thing as a card in the chat */
.ai-acts:empty { display: none; }
.act.compact { border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 8px; background: var(--bg); }
.act.compact.pending { border-color: var(--text-2); }
.act.compact.loading { display: none; }
.ai-chart { margin: 8px 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; }
.ai-chart svg { width: 100%; height: auto; display: block; }
.ai-bar { fill: var(--chart-line); opacity: .85; }
.ai-bar.neg { fill: var(--neg); }
.ai-bar:hover { opacity: 1; fill: var(--accent); }
.ai-chart-title { font-size: 12px; font-weight: 600; fill: var(--text-2); }
.ai-chart-label { font-size: 10px; fill: var(--muted); }
.ai-chip.download::before { background: var(--text-2); }
.ai-files:empty, .ai-live-charts:empty { display: none; }
.ai-file { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--text); text-decoration: none; background: var(--bg); }
.ai-file:hover { border-color: var(--text-2); background: var(--panel-2); }
.ai-file-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.ai-file-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ai-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ai-file-meta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-file-meta small { color: var(--muted); font-size: var(--fs-xs); }
.ai-file-dl { flex: none; font-size: var(--fs-sm); font-weight: 600; padding: 6px 12px; border-radius: var(--pill); background: var(--ink); color: var(--on-ink); }
.ai-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.ai-bulk select { padding: 6px 10px; border-radius: var(--pill); }
.ai-bulk button { padding: 6px 14px; border-radius: var(--pill); }