:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --s1: #2a78d6;
  --s2: #eb6834;
  --good: #0ca30c;
  --critical: #d03b3b;
  --accent-wash: rgba(42, 120, 214, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --s1: #3987e5;
    --s2: #d95926;
    --accent-wash: rgba(57, 135, 229, 0.16);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --ink: #f0efec; --ink-2: #c3c2b7;
  --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10);
  --s1: #3987e5; --s2: #d95926; --accent-wash: rgba(57, 135, 229, 0.16);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--s1); }
.muted { color: var(--muted); }

.top {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.top nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.brand { margin-right: 12px; }
.top nav a { color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-radius: 6px; }
.top nav a:hover { background: var(--accent-wash); }
.top nav a[aria-current="page"] { color: var(--ink); background: var(--accent-wash); font-weight: 600; }
.refresh { display: flex; gap: 12px; align-items: center; font-size: 12px; }

button, select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
button:hover { background: var(--accent-wash); }
button[disabled] { opacity: 0.6; cursor: wait; }

main { max-width: 1280px; margin: 0 auto; padding: 20px 24px 48px; display: grid; gap: 20px; }
h2 { font-size: 15px; margin: 0 0 12px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tile, .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.card { min-width: 0; }
.label { color: var(--ink-2); font-size: 12px; }
.hero { font-size: 26px; font-weight: 600; margin: 4px 0; }
.tile .value { font-size: 20px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.card .tiles { margin-bottom: 16px; }
.card .tile { padding: 12px; }
.split { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; align-items: baseline; }
.split dt { color: var(--ink-2); font-size: 12px; }
.split dd { margin: 0; font-size: 18px; font-weight: 600; text-align: right; }
.sub { color: var(--muted); font-size: 12px; }
.delta { font-size: 0.7em; margin-right: 4px; vertical-align: 0.15em; }
.delta.up { color: var(--good); }
.delta.down { color: var(--critical); }

.card-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.ranges { display: flex; gap: 4px; }
.ranges button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--s1); font-weight: 600; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-2); font-size: 12px; margin-bottom: 4px; }
.key { display: inline-block; width: 14px; margin-right: 6px; vertical-align: middle; }
.key.line { height: 2px; border-radius: 1px; }
.key.s1 { background: var(--s1); }
.key.s2 { background: var(--s2); }

.chart { position: relative; height: 320px; }
.chart.short { height: 240px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .s1 { stroke: var(--s1); fill: var(--s1); }
.chart .s2 { stroke: var(--s2); fill: var(--s2); }
.chart .line.s1, .chart .line.s2 { fill: none; }
.chart .end-label { fill: var(--ink-2); font-weight: 600; }
.chart .crosshair { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .bar { fill: var(--s1); }
.chart .bar.selected { fill: var(--s1); stroke: var(--ink); stroke-width: 1.5; }
.chart .bar-hit { fill: transparent; cursor: pointer; }
.chart .bar-hit:hover + .bar, .chart .bar-hit:focus + .bar { opacity: 0.8; }
.chart .value-label { fill: var(--ink-2); }

.tooltip {
  position: fixed; z-index: 10; pointer-events: none; min-width: 160px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font-size: 12px;
}
.tooltip .t-date { color: var(--ink-2); margin-bottom: 4px; }
.tooltip .t-row { display: flex; align-items: center; gap: 8px; }
.tooltip .t-row strong { margin-left: auto; font-variant-numeric: tabular-nums; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--grid); white-space: nowrap; }
th { color: var(--ink-2); font-weight: 500; font-size: 12px; }
.num { text-align: right; }
tfoot td { font-weight: 600; border-top: 1px solid var(--axis); border-bottom: none; }
tr.selected td { background: var(--accent-wash); }
.strong { font-weight: 600; }
.note { color: var(--muted); font-size: 12px; margin: 10px 0 0; max-width: 90ch; }
.notice { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #fab219; border-radius: 8px; padding: 10px 14px; }
.notice summary { cursor: pointer; }
.two-col { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 20px; align-items: start; }

@media (max-width: 720px) {
  .top, main { padding-left: 16px; padding-right: 16px; }
  .two-col { grid-template-columns: 1fr; }
  .hero { font-size: 22px; }
}

/* Forms */
.nav-sep { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }
.top nav a.add { color: var(--s1); font-weight: 600; }
.button { display: inline-block; text-decoration: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 12px; }
.primary, button.primary, a.button.primary { background: var(--s1); color: #fff; border-color: var(--s1); font-weight: 600; }
button.primary:hover, a.button.primary:hover { background: var(--s1); filter: brightness(1.1); }
button.link { border: none; background: none; color: var(--critical); padding: 0; font-size: 12px; }
button.link:hover { background: none; text-decoration: underline; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--accent-wash); color: var(--ink-2); }
.row-actions { font-size: 12px; }
.row-actions a { margin-left: 6px; }
.message { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--accent-wash); border: 1px solid var(--border); }
.form-card { max-width: 720px; }
.login-card { max-width: 380px; margin: 48px auto; }
.trade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.trade-form label, .trade-form fieldset { display: grid; gap: 4px; align-content: start; font-size: 12px; color: var(--ink-2); }
.trade-form fieldset { grid-column: 1 / -1; border: none; padding: 0; margin: 0; display: flex; gap: 16px; align-items: center; }
.trade-form fieldset legend { float: left; margin-right: 8px; }
.trade-form fieldset label { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ink); }
.trade-form input:not([type="radio"]):not([type="checkbox"]) {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--page);
  border: 1px solid var(--axis); border-radius: 6px; padding: 7px 9px; width: 100%;
}
.trade-form input:focus { outline: 2px solid var(--s1); outline-offset: 1px; }
.trade-form input[aria-invalid="true"] { border-color: var(--critical); }
.hint { color: var(--muted); font-size: 12px; }
.error { color: var(--critical); font-size: 12px; }
.error-summary { color: var(--critical); margin: 0 0 12px; }
.actions { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; }
.actions button { padding: 8px 18px; }
.upload { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 720px) { .trade-form { grid-template-columns: 1fr; } }

/* Corporate actions */
.attention { border-left: 3px solid var(--critical); }
.wrap { white-space: normal; min-width: 200px; max-width: 420px; }
.note-row td { border-bottom: 1px solid var(--grid); padding-top: 0; font-size: 12px; }
.actions-table tr:has(+ .note-row) td { border-bottom: none; }
.status { font-size: 12px; font-weight: 600; margin-right: 6px; }
.status.ok { color: var(--good); }
.status.warn { color: #b07a00; }
button.link.subtle { color: var(--muted); }
form.inline { display: inline; }
.trade-form select, .trade-form textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--page);
  border: 1px solid var(--axis); border-radius: 6px; padding: 7px 9px; width: 100%;
}
.trade-form .full { grid-column: 1 / -1; }
.trade-form .ratio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); }
.trade-form .ratio input { width: 90px !important; }
.trade-form label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--ink); }
.trade-form label.check input { margin-top: 3px; }
[hidden] { display: none !important; }
.quick-add { display: flex; gap: 4px; }
.quick-add input { width: 80px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; }
.quick-add button { padding: 4px 10px; }
.bar { position: relative; width: 120px; height: 8px; border-radius: 4px; background: var(--accent-wash); }
.bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--s1); }
.bar span.over { background: var(--critical); }
.bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink-2); }
td.neg, span.neg { color: var(--critical); }
td.pos, span.pos { color: var(--ink-2); }
/* Keep the budget's category column in view when the table scrolls sideways. */
.budget-table th:first-child, .budget-table td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.budget-table tr.selected td:first-child { background: var(--accent-wash); }
.backup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 8px; }
.backup-grid h3, #backup h3 { font-size: 13px; margin: 0 0 6px; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
button.danger { background: var(--critical); border-color: var(--critical); }

/* Budget on phones: one summary line and bar per row, details on the line's own page. */
.m-only { display: none; }
a.line-name { color: inherit; text-decoration: none; }
a.line-name:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .budget-table .hide-m { display: none; }
  .budget-table .m-only { display: block; }
  .budget-table .m-sub { font-size: 12px; color: var(--ink-2); margin: 2px 0 4px; }
  .budget-table .bar { width: 100%; min-width: 0; }
  .budget-table td, .budget-table th { padding: 8px 6px; }
  .budget-table td:first-child { width: 100%; white-space: normal; }
  .budget-table a.line-name { font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); }
  .quick-add input { width: 58px; }
  .quick-add button { padding: 4px 10px; font-weight: 600; }
  .quick-add .m-only, .budget-tiles .m-only { display: inline; }
  .budget-tiles .hide-m, .quick-add .hide-m { display: none; }
  .budget-table th:last-child, .budget-table td:last-child { padding-right: 0; }
  .budget-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .card { padding: 12px; }
  .budget-tiles .tile { padding: 10px; }
  .budget-tiles .value { font-size: 16px; }
  .budget-tiles .value .muted { display: block; font-size: 12px; font-weight: 500; }
  .budget-tiles .label { font-size: 11px; }
}

/* Foldable budget sections: the header row folds and unfolds its card. */
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; }
details.fold > summary h2::before { content: "▾"; color: var(--ink-2); font-size: 12px; transition: transform .15s; }
details.fold:not([open]) > summary h2::before { transform: rotate(-90deg); }
details.fold:not([open]) > summary { margin-bottom: 0; }
.fold-sum { font-size: 12px; font-weight: 400; }
details.fold[open] .fold-sum { display: none; }
.sort-control { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
.sort-control select { font: inherit; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* Add-an-amount pop-up, used on phones. */
.add-btn { width: 40px; height: 36px; font-size: 20px; line-height: 1; padding: 0; font-weight: 600; }
.entry-dialog { border: 1px solid var(--border); border-radius: 12px; padding: 20px; width: min(420px, calc(100vw - 32px));
  background: var(--surface); color: var(--ink); }
.entry-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
.entry-dialog h2 { grid-column: 1 / -1; margin: 0; }
@media (max-width: 720px) {
  .entry-dialog { margin: auto auto 16px; }
  .budget-table .quick-add.hide-m { display: none; }
  details.fold:not([open]) > summary .button { display: none; }
}

/* Sortable headings and filter bars. */
th button.sort { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
th button.sort:hover, th button.sort:focus-visible { color: var(--ink); text-decoration: underline; }
th button.sort::after { content: "↕"; font-size: 10px; opacity: .35; }
th[aria-sort="ascending"] button.sort::after { content: "▲"; opacity: .8; }
th[aria-sort="descending"] button.sort::after { content: "▼"; opacity: .8; }
th.num button.sort { flex-direction: row-reverse; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.filters input, .filters select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--ink); }
.filters input[type="search"] { width: 180px; }
.filter-totals { font-size: 12px; margin-left: auto; }
@media (max-width: 720px) { .filters input[type="search"] { width: 100%; } .filter-totals { margin-left: 0; } }

/* Brand: the "nnX" in nnXfinance. Cyan reads poorly on a light background, so it's used in dark mode. */
:root { --brand: #3B82F6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #00F0FF; } }
:root[data-theme="dark"] { --brand: #00F0FF; }
.brand-mark { color: var(--brand); }

table.cashflow { max-width: 480px; }
table.cashflow tr.subtotal td { font-weight: 600; border-top: 1px solid var(--axis); }
@media (max-width: 720px) {
  table.cashflow td { padding: 6px 4px; }
  table.cashflow td:first-child { white-space: normal; }
}