/* ============================================================
   Tokens — warm paper page, white cards. Primary surfaces are
   cards: hairline border, 12px radius, a whisper of shadow
   (--shadow-card). Never nest a card inside a card. Overlays use
   --shadow-pop, kept deliberately light. Chart series colors are
   validated (see dataviz palette method) and stay semantic:
   green = money in, orange = money out. The JS reads --card for
   chart tooltip backgrounds.
   ============================================================ */
:root {
  color-scheme: light dark;

  --page: #f4f3f0;
  --card: #ffffff;
  --ink: #1b1a17;
  --ink-2: #504e48;
  --muted: #85837c;
  --hairline: #e8e6e0;
  --baseline: #cbc9c1;
  --hover: rgba(27, 26, 23, 0.045);

  --accent: #262520;
  --accent-hover: #34332d;
  --accent-ink: #f6f5f2;
  --accent-soft: #e7e5de;

  --series-in: #1baf7a;
  --series-out: #eb6834;
  --series-net: #0f7a5a;
  --track-out: #f9e2d6;

  /* Categorical slots for agent dashboards — fixed order, validated on
     this surface (dataviz method); never cycle past slot 8, fold to Other. */
  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --cat-6: #008300;
  --cat-7: #4a3aa7;
  --cat-8: #e34948;

  --delta-good: #006300;
  --delta-bad: #b8322d;
  --danger: #b8322d;

  --ctl-h: 34px;
  --radius: 12px;
  --radius-sm: 8px;

  --shadow-card: 0 1px 2px rgba(27, 26, 23, 0.05);
  --shadow-pop: 0 4px 16px rgba(27, 26, 23, 0.07), 0 1px 3px rgba(27, 26, 23, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0f0f0e;
    --card: #1a1a19;
    --ink: #ecebe8;
    --ink-2: #b1afa9;
    --muted: #8a8881;
    --hairline: #2a2927;
    --baseline: #3d3c39;
    --hover: rgba(236, 235, 232, 0.05);

    --accent: #dcdad4;
    --accent-hover: #cbc9c3;
    --accent-ink: #1b1a17;
    --accent-soft: #2b2a26;

    --series-in: #199e70;
    --series-out: #d95926;
    --series-net: #26a077;
    --track-out: #392b23;

    --cat-1: #3987e5;
    --cat-2: #d95926;
    --cat-3: #199e70;
    --cat-4: #c98500;
    --cat-5: #d55181;
    --cat-6: #008300;
    --cat-7: #9085e9;
    --cat-8: #e66767;

    --delta-good: #2eb856;
    --delta-bad: #e66767;
    --danger: #e66767;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
  }
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* No rubber-band bounce at the end of a scroll. The page pins the vertical
   axis only, so a trackpad swipe can still navigate back; scroll regions
   pin both axes, which also stops them chaining into the page underneath. */
html, body { overscroll-behavior-y: none; }
:is(#subs-frame, .widget-table-frame, .chat-messages, .chat-history) {
  overscroll-behavior: none;
}

/* Scroll regions inside cards (tables, a chart's table view) keep their
   scrollbar hidden until the pointer or focus is on them: a page of tables
   otherwise wears a gutter on every card. Touch scrolling is unaffected. */
:is(#subs-frame, #tx-frame, .widget-table-frame, .chat-table-frame) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
:is(#subs-frame, #tx-frame, .widget-table-frame, .chat-table-frame):is(:hover, :focus-within) {
  scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent;
}
/* Browsers without scrollbar-color. */
:is(#subs-frame, #tx-frame, .widget-table-frame, .chat-table-frame)::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
:is(#subs-frame, #tx-frame, .widget-table-frame, .chat-table-frame)::-webkit-scrollbar-thumb { border-radius: 4px; background: transparent; }
:is(#subs-frame, #tx-frame, .widget-table-frame, .chat-table-frame):hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}

.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

:is(button, input, select, a):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 1px;
}

/* ============================================================
   Controls — every control in the filter row and forms is
   exactly var(--ctl-h) tall.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--ctl-h);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  border-radius: var(--radius-sm);
  padding: 0 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.13s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-sm { height: 28px; padding: 0 11px; font-size: 12.5px; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--baseline); }
.btn-ghost:hover:not(:disabled) { background: var(--hover); }

.range-pills {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--ctl-h);
  padding: 3px;
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
}
.pill {
  height: 100%;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  padding: 0 11px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}
.pill:hover { background: var(--hover); color: var(--ink); }
.pill.active { background: var(--accent); color: var(--accent-ink); }

.scope-group { display: flex; align-items: center; gap: 8px; }
.scope-menu { position: relative; }
.scope-btn { font-weight: 500; min-width: 160px; justify-content: space-between; }
#scope-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scope-btn .chev { color: var(--muted); flex: none; }

.menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 240px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 4px;
  box-shadow: var(--shadow-pop);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.menu-item { text-decoration: none; }
.menu-item:hover { background: var(--hover); }
.menu-item.selected { background: var(--accent-soft); }
.menu-item svg { color: var(--muted); flex: none; }
.group-display-icon {
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  font-size: 14px;
}
.group-display-icon img {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}
.menu-mask { margin-left: auto; padding-left: 14px; color: var(--muted); font-size: 12px; }

.accounts-menu { position: relative; }
.accounts-panel {
  left: auto;
  right: 0;
  width: min(380px, calc(100vw - 40px));
  padding: 10px 0 8px;
}
.accounts-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 8px;
}
.accounts-panel-head .panel-count { margin-left: 0; }
.accounts-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.accounts-panel .empty { padding: 24px 14px; }
.accounts-panel .bill-consent { margin: 10px 14px 6px; }

.custom-range { display: flex; align-items: center; gap: 8px; }
.custom-range input[type="date"] {
  height: var(--ctl-h);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  padding: 0 10px;
}

/* ============================================================
   Layout — one surface; sections divided by hairlines.
   ============================================================ */
/* The extra bottom padding lives on .page, not body: inside the shell it
   gives content breathing room (and clears the floating chat drawer)
   without extending the document past the sidebar into dead scroll. */
.page {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 44px) 72px;
  display: flex;
  flex-direction: column;
}

.section { margin-top: 32px; }

/* Dashboard: sections stack until there's room for a nine-column grid.
   The chart and transactions take the left six columns under income,
   spending and net saved; net worth's card is the right three, with the
   pace card, upcoming charges and subscriptions under it. One grid keeps every card edge on
   the same lines. */
.dash { container: dashboard / inline-size; }
.dash-grid > .section { min-width: 0; }
@container dashboard (min-width: 1080px) {
  .dash-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 32px 16px;
    margin-top: 32px;
  }
  .dash-grid > .section { margin-top: 0; }
  .dash-grid > .stat-strip { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: normal; }
  .stat-strip > .stat { grid-column: span 2; }
  .stat-strip > .stat-hero { grid-column: span 3; order: 1; }
  .pace-section, .upcoming-section, .subs-section { grid-column: 7 / -1; }
  .chart-section, .tx-section { grid-column: 1 / 7; }
  /* Upcoming and subscriptions stack beside the transactions; the last row
     takes whatever height the transactions need beyond the upcoming card. */
  .dash-grid { grid-template-rows: auto auto auto 1fr; }
  .upcoming-section { grid-row: 3; }
  .subs-section { grid-row: 4; }
  .tx-section { grid-row: 3 / span 2; }
  .dash-grid:has(> .upcoming-section.hidden) > .subs-section { grid-row: 3 / span 2; }
  .dash-grid:has(> .pace-section.hidden) > .chart-section { grid-column: 1 / -1; }
  /* The pace card stretches to the chart card's height; its line takes the slack. */
  .pace-section { display: flex; }
  .pace-section > .pace-card { flex: 1; }
  .pace-section .pace-chart { flex: 1; height: auto; }
  /* Subscriptions fill the column beside the transactions instead of
     setting its height: contain keeps the list from growing the row. */
  .subs-section { display: flex; flex-direction: column; }
  /* Heads and footers match the transactions' (buttons, pager) so the two
     frames start and end level. */
  .upcoming-section .card-head, .subs-section .card-head { min-height: 40px; }
  .subs-section .subs-total { min-height: 40px; padding-top: 12px; }
  .subs-section #subs-frame { flex: 1 1 240px; min-height: 240px; max-height: none; contain: size; }
}

/* ============================================================
   Filter row
   ============================================================ */
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.range-sep { color: var(--muted); }
.range-caption { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.row-actions { display: flex; gap: 8px; }

/* ============================================================
   Section headings
   ============================================================ */
.card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 0 12px;
}
.card-head h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 0;
}

.panel-count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Tiny icon buttons that appear on row hover (rename, approve, reject). */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.active { background: var(--accent); color: var(--accent-ink); }
.row-tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity 0.12s ease; }
tr:hover .row-tools,
li:hover .row-tools,
.row-tools:focus-within { opacity: 1; }

/* In-place rename: no layout shift, just a thin underline while editing. */
.editing {
  outline: none;
  box-shadow: 0 1px 0 var(--ink);
  cursor: text;
}

/* Rules dropdown */
.menu-note { margin: 4px 6px 8px; font-size: 12px; color: var(--muted); }

/* Rules page */
.rule-page-list { list-style: none; margin: 0; padding: 0; }
.rule-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.rule-row:hover { background: var(--hover); }
.rule-row + .rule-row { border-top: 1px solid var(--hairline); }
.rule-row-kind { flex: 0 0 auto; }
.rule-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rule-row-match {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-row-effect { font-size: 12.5px; color: var(--ink-2); }
.rule-row-count { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* New-rule modal: live backfill preview */
.modal.rule-modal { width: min(520px, calc(100vw - 40px)); }
.rule-modal .modal-field-label { margin-top: 12px; }
.rule-modal-grid { display: grid; grid-template-columns: 1fr 160px; gap: 10px; }
.rule-inline-field { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rule-inline-field .field-label { margin: 0; flex: none; }
.rule-dropdown { position: relative; flex: 1; min-width: 0; }
.rule-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: var(--ctl-h);
  padding: 0 11px;
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.rule-dropdown-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rule-dropdown-btn .chev { color: var(--muted); flex: none; }
.rule-dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-dropdown-menu {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
}
.rule-dropdown-menu .menu-item { min-width: 0; }
.rule-dropdown-menu .rule-scope-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-cat-wrap { position: relative; flex: 1; min-width: 0; }
.rule-cat-wrap .modal-input { width: 100%; }
.rule-cat-menu {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}
.rule-cat-menu .menu-item {
  display: block;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rule-existing { margin-bottom: 14px; }
.rule-existing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rule-existing-list li + li { border-top: 1px solid var(--hairline); }
.rule-existing-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.rule-existing-item:hover { background: var(--hover); }
.rule-existing-item.selected { background: var(--accent-soft); }
.rule-existing-item .tag { flex: none; }
.rule-existing-effect {
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-delete-btn { margin-right: auto; color: var(--danger); }
/* Quiet recurring-charge hint on dashboard transaction rows. */
.tx-sub-mark {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--muted);
  opacity: 0.75;
}
.rule-action-list { display: flex; flex-direction: column; gap: 8px; }
.rule-action-row { display: flex; align-items: center; gap: 8px; }
.rule-action-row .rule-select { flex: 0 0 auto; height: var(--ctl-h); }
.rule-action-row .modal-input { flex: 1; min-width: 0; width: auto; }
.rule-action-remove { flex: none; }
.rule-add-action { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; }
.rule-modal-accounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.rule-modal-accounts .rule-select { width: 100%; height: var(--ctl-h); }
.rule-preview-head {
  display: flex;
  align-items: baseline;
  margin-top: 16px;
}
.rule-preview-head .field-label { margin-bottom: 6px; }
.rule-preview-frame {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  max-height: 170px;
  overflow: auto;
}
.rule-preview-list { list-style: none; margin: 0; padding: 0; }
.rule-preview-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px;
  font-size: 12.5px;
}
.rule-preview-list li + li { border-top: 1px solid var(--hairline); }
.rule-preview-date { color: var(--muted); white-space: nowrap; }
.rule-preview-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-preview-account {
  color: var(--muted);
  max-width: 32%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rule-preview-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rule-preview-more { color: var(--muted); }
.rule-preview-note { margin: 0; padding: 14px 12px; font-size: 12.5px; color: var(--muted); }
.rule-select {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  height: 28px;
  padding: 0 24px 0 9px;
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  color: var(--ink);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237e8288' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--baseline);
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip::after { content: "✕"; font-size: 10px; color: var(--muted); }

.empty { padding: 40px 0; text-align: center; color: var(--muted); }
.empty .btn { margin: 10px auto 0; }

/* ============================================================
   Stat strip — one white card per number
   ============================================================ */
.stat-strip {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1020px) { .stat-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Two phone-width columns can't hold a hero figure and its delta. */
@media (max-width: 480px) { .stat-strip { grid-template-columns: minmax(0, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* Income and Spending open the transactions behind them. */
.stat-drill { cursor: pointer; transition: border-color 0.13s ease; }
.stat-drill:hover { border-color: var(--baseline); }
.stat-drill.active { border-color: var(--accent); }
.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.kpi-value { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.kpi-value.hero { font-size: 34px; letter-spacing: -0.03em; }
.kpi-caption { font-size: 12px; line-height: 1.4; color: var(--muted); }
.kpi-delta { font-size: 12.5px; font-weight: 550; color: var(--muted); min-height: 1.2em; }
.kpi-delta .up { color: var(--delta-good); }
.kpi-delta .down { color: var(--delta-bad); }

/* ============================================================
   Charts — one white card holds the tabs and the active panel
   ============================================================ */
/* On a phone the tabs scroll sideways as one row instead of wrapping. */
.tab-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-row::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  white-space: nowrap;
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 8px 1px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.13s ease;
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }

.chart-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 10px 16px 14px;
}
.chart-card .tab-row { padding: 0 4px; }
.tab-panel { margin-top: 6px; }

.chart { width: 100%; height: 320px; padding-top: 8px; }
#chart-sankey { height: 360px; }

.loading .chart, .loading .kpi-value, .loading .buckets, .loading .tx-table { opacity: 0.55; transition: opacity 0.15s; }

/* ============================================================
   Buckets
   ============================================================ */
.buckets {
  list-style: none;
  margin: 0;
  padding: 12px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bucket-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease;
}
.bucket-row:hover { background: var(--hover); }
.bucket-row.active { background: var(--accent-soft); }
.bucket-name {
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bucket-track { height: 8px; border-radius: 999px; background: var(--track-out); overflow: hidden; }
.bucket-fill { height: 100%; background: var(--series-out); }
.bucket-amount { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================================
   Transactions
   ============================================================ */
.table-frame {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
#tx-frame {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.tx-table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.tx-table th:nth-child(1) { width: 110px; }
.tx-table th:nth-child(3) { width: 160px; }
.tx-table th:nth-child(4) { width: 130px; }
.tx-table td { padding: 9px 14px; }
.tx-table tr + tr td { border-top: 1px solid var(--hairline); }
.tx-table tbody tr { transition: background 0.12s ease; }
.tx-table tbody tr:hover { background: var(--hover); }

.tx-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
}
.pager-info { font-size: 12.5px; color: var(--muted); }
.pager-btns { display: flex; gap: 6px; }

.tx-date { color: var(--muted); font-size: 12px; white-space: nowrap; width: 1%; }
.tx-name { font-weight: 550; font-size: 13.5px; }
.manual-override::after {
  content: "•";
  margin-left: 5px;
  color: var(--accent);
}
.tx-account { color: var(--muted); font-size: 12px; }
.tx-identity-cell {
  overflow: hidden;
}
.tx-row-details {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.tx-vendor {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 34ch;
}
.tx-vendor .tx-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-logo.tx-table-logo {
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 6px;
}
.tx-category { text-align: right; white-space: nowrap; }
.tx-amount {
  position: sticky;
  right: 0;
  z-index: 2;
  text-align: right;
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  width: 1%;
  padding-left: 16px;
  font-variant-numeric: tabular-nums;
  background: var(--card);
}
.tx-table th:last-child {
  right: 0;
  z-index: 4;
  text-align: right;
  background: var(--card);
}
#tx-frame.is-overflowing .tx-amount,
#tx-frame.is-overflowing .tx-table th:last-child {
  box-shadow: -12px 0 16px -16px color-mix(in srgb, var(--ink) 35%, transparent);
}
.tx-table tbody tr:hover .tx-amount { background: var(--hover); }
.amount-in { color: var(--delta-good); }

.tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1.5px 8px;
  border-radius: 4px;
  border: 1px solid var(--baseline);
  color: var(--ink-2);
  background: transparent;
}
.tag-business { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tag-pending { color: var(--muted); border-color: var(--hairline); }
.tag-overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.bill-line { margin-top: 2px; }
.bill-consent { margin-top: 12px; }

@media (max-width: 700px) {
  .tx-table th:nth-child(1) { width: 92px; }
  .tx-table th:nth-child(4) { width: 100px; }
}

.standalone-filters { gap: 10px; }
.transaction-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 340px;
  min-width: min(340px, 100%);
  height: var(--ctl-h);
  color: var(--muted);
}
.transaction-search svg {
  position: absolute;
  left: 11px;
  pointer-events: none;
}
.transaction-search input[type="search"] {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0 11px 0 34px;
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.transaction-search input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.transaction-search:focus-within { color: var(--ink-2); }
.transaction-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; opacity: 0.55; }
.standalone-filters .rule-select {
  height: var(--ctl-h);
  padding-inline: 11px 30px;
  background-position: right 11px center;
  font-size: 13px;
}
.interactive-table { table-layout: fixed; }
.interactive-table th:nth-child(1) { width: 120px; }
.interactive-table th:nth-child(2) { width: 36%; }
.interactive-table th:nth-child(4) { width: 130px; }
.interactive-table th:nth-child(5) { width: 130px; }
.interactive-table td { height: 54px; padding-block: 8px; overflow: hidden; }
.interactive-table[data-density="compact"] td { height: 40px; padding-block: 3px; }
.interactive-table[data-density="spacious"] td { height: 68px; padding-block: 15px; }
.truncate-cell, .transaction-primary, .transaction-secondary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transaction-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.transaction-logo {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hover);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.transaction-logo img { width: 100%; height: 100%; object-fit: cover; }
.transaction-text { display: flex; flex-direction: column; min-width: 0; }
.transaction-primary { font-weight: 550; }
.transaction-secondary { color: var(--muted); font-size: 11.5px; }
.transaction-secondary-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.category-source {
  flex: none;
  font-size: 10.5px;
  font-weight: 550;
  color: var(--muted);
  padding: 0 5px;
  border-radius: 4px;
  background: var(--hover);
}
.category-source.source-you { color: var(--ink-2); background: var(--accent-soft); }
.editable-tag, .editable-category, .transaction-primary { cursor: text; }
.tag.manual-override { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Transfers — like accounts and subscriptions, each section is one white
   frame; rows divide with hairlines instead of stacking separate cards. */
.transfer-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 16px 12px;
}
.transfer-row + .transfer-row { border-top: 1px solid var(--hairline); }
.transfer-row-top { display: flex; align-items: center; gap: 14px; }
.transfer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.transfer-name {
  font-weight: 550;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transfer-route {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.transfer-arrow { color: var(--muted); }
.transfer-amount { font-weight: 600; font-size: 13.5px; white-space: nowrap; text-align: right; }
.transfer-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.transfer-note { font-size: 12.5px; color: var(--muted); }
.transfer-purpose {
  flex: 0 1 300px;
  min-width: 0;
  height: 28px;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  padding: 0 9px;
}
.transfer-purpose::placeholder { color: var(--muted); opacity: 1; }
.transfer-purpose:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
@media (max-width: 700px) {
  .transaction-search { flex-basis: 100%; }
  .standalone-filters .rule-select { flex: 1 1 0; min-width: 0; }
  .standalone-filters .range-caption { flex-basis: 100%; margin-left: 0; }
  .interactive-table th:nth-child(3), .interactive-table td:nth-child(3),
  .interactive-table th:nth-child(4), .interactive-table td:nth-child(4) { display: none; }
}

/* ============================================================
   Subscriptions
   ============================================================ */
#subs-frame { max-height: 400px; overflow-y: auto; }
.subs-list { list-style: none; margin: 0; padding: 0 14px; }
.subs-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.subs-row + .subs-row { border-top: 1px solid var(--hairline); }
.subscription-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 8px;
  background: var(--hover);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.subscription-icon:hover,
.subscription-icon:focus-visible { box-shadow: 0 0 0 1px var(--baseline); }
.subscription-icon::after {
  content: "✎";
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: none;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--baseline);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-2);
  font-size: 9px;
  line-height: 1;
}
.subscription-icon:hover::after,
.subscription-icon:focus-visible::after { display: grid; }
.subscription-icon-value {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.subscription-icon-value img { width: 100%; height: 100%; object-fit: cover; }
.subs-info { flex: 1; min-width: 0; }
.subs-name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 550;
  font-size: 13.5px;
  min-width: 0;
}
.subs-title {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subs-name .tag { flex: none; }
.subs-meta { display: block; font-size: 12px; color: var(--muted); }
.subs-amount { text-align: right; }
.subs-amount .num { display: block; font-weight: 600; font-size: 14px; }
.subs-amount .subs-meta { white-space: nowrap; }
.subs-total { padding: 8px 2px 0; font-size: 12px; color: var(--muted); text-align: right; }

/* ============================================================
   Accounts
   ============================================================ */
.account-list { list-style: none; margin: 0; padding: 0 14px; }
.account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.account-row + .account-row { border-top: 1px solid var(--hairline); }

.account-icon { flex: none; display: grid; place-items: center; width: 20px; color: var(--ink-2); }

.account-info { flex: 1; min-width: 0; }
.account-name { display: block; font-weight: 550; font-size: 13.5px; }
.account-meta {
  display: block;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-meta-row { display: flex; align-items: center; gap: 4px; }
.account-meta-provider { overflow: hidden; text-overflow: ellipsis; }
.account-group-icon {
  display: grid;
  place-items: center;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  font-size: 11px;
}
.account-group-icon img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
}
.account-reconnect { margin-top: 6px; }
.account-edit-btn,
.group-edit-btn {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--baseline);
}
.account-edit-btn { margin-left: 2px; }
.account-balance { text-align: right; }
.account-balance .num { display: block; font-weight: 600; font-size: 14px; }
.amount-owed { color: var(--ink-2); }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 16, 14, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  width: min(440px, calc(100vw - 40px));
  padding: 26px;
  box-shadow: var(--shadow-pop);
}
.modal h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.modal-sub { margin: 0 0 18px; color: var(--ink-2); font-size: 13.5px; }
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 8px;
}

.segmented {
  display: flex;
  gap: 2px;
  height: var(--ctl-h);
  padding: 3px;
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
}
.seg-option {
  flex: 1;
  height: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  border: none;
  cursor: pointer;
}
.seg-option.active { background: var(--accent); color: var(--accent-ink); }

.modal-error {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  color: var(--danger);
  font-size: 13px;
  word-break: break-word;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal-input {
  display: block;
  width: 100%;
  height: var(--ctl-h);
  padding: 0 11px;
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.modal-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.modal-field-label { margin-top: 16px; }
.field-optional { font-weight: 450; }

/* Dashboard icon picker */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin: 4px 0 14px;
}
.emoji-option {
  height: 36px;
  font-size: 17px;
  line-height: 1;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.emoji-option:hover { background: var(--hover); }
.emoji-option.active { background: var(--accent-soft); }
.icon-modal-row { display: flex; gap: 8px; }
.icon-modal-row input[type="text"] {
  flex: 1;
  min-width: 0;
  height: var(--ctl-h);
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  padding: 0 11px;
}
.group-icon-editor {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.group-icon-preview-column {
  display: flex;
  flex: 0 0 64px;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.group-icon-preview {
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--baseline);
  border-radius: 12px;
  background: var(--hover);
  font-size: 12px;
  color: var(--muted);
}
.group-icon-preview-value {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 26px;
}
.group-icon-preview-value img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-icon-fields { flex: 1; min-width: 0; }
.group-emoji-grid {
  grid-template-columns: repeat(8, 1fr);
  margin-top: 0;
  margin-bottom: 8px;
}
.group-emoji-grid .emoji-option { height: 28px; font-size: 15px; }
.group-icon-reset {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.group-icon-reset:hover { color: var(--ink); }
.group-icon-reset:disabled { color: var(--muted); opacity: 0.7; cursor: default; }
/* Crypto wallets */
.add-kind-picker { margin: 12px 0 14px; }
/* Manual accounts */
.modal-field-row { display: grid; grid-template-columns: 1fr 128px; gap: 10px; }
.modal-field-row .field-label { white-space: nowrap; }
.account-manual-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.account-manual-note a { color: var(--ink-2); }
.import-field-hint { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.import-field-hint:hover { color: var(--ink); }
.rule-select.needs-attention { outline: 2px solid var(--accent); outline-offset: 1px; }
.wallet-source {
  height: auto;
  min-height: 74px;
  padding: 9px 11px;
  resize: vertical;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}
.wallet-error { color: var(--danger); white-space: normal; }
.wallet-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; }
.wallet-modal #wallet-group { width: 100%; }
.wallet-holdings-head { display: flex; align-items: baseline; justify-content: space-between; }
.wallet-holdings-head .field-label { margin-bottom: 6px; }
.wallet-holdings-total { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wallet-holdings {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
}
#wallet-uncounted { margin-top: 6px; }
.wallet-holding { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.wallet-holding + .wallet-holding { border-top: 1px solid var(--hairline); }
.wallet-holding-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hover);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  overflow: hidden;
}
.wallet-holding-tile img { width: 100%; height: 100%; object-fit: cover; }
.wallet-holding-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wallet-holding-title { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.wallet-holding-title strong { font-weight: 600; }
.wallet-holding-title span { color: var(--muted); font-size: 12px; }
.wallet-holding-detail {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.wallet-holding-value { font-size: 13px; font-weight: 550; white-space: nowrap; }
.wallet-holding-action,
.wallet-uncounted-toggle {
  height: 24px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: var(--baseline);
  text-underline-offset: 3px;
}
.wallet-holding-action { flex: none; }
.wallet-holding-action:hover,
.wallet-uncounted-toggle:hover { color: var(--ink); }
.wallet-holdings-empty { padding: 12px 10px; font-size: 12.5px; color: var(--muted); }
.wallet-uncounted-toggle { margin-top: 6px; padding-left: 0; }
.wallet-modal .modal-actions { flex-wrap: wrap; }
.wallet-modal #wallet-remove { margin-right: auto; }

.account-modal-group-row { display: flex; align-items: center; gap: 8px; }
.account-modal-group-row .rule-select { flex: 1; min-width: 0; }

/* ============================================================
   Assistant — one panel on every page. Replies read as plain
   text in a reading column (no bubbles); only the user's own
   words sit in a soft bubble. Three sizes: a pill, a drawer,
   and a centered full-screen reading view.
   ============================================================ */
.chat-drawer {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 40;
  width: min(440px, calc(100vw - 36px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.chat-drawer.collapsed {
  width: auto !important;
  border-radius: 999px;
}
/* Expanded is a full-screen takeover inside the page margins. */
.chat-drawer.expanded { top: 18px; left: 18px; width: auto !important; }
/* min-height: 0 lets the messages area stay bounded so it can scroll. */
.chat-drawer.expanded .chat-body { height: auto !important; flex: 1; min-height: 0; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 46px;
  padding-right: 8px;
}
.chat-drawer:not(.collapsed) .chat-head { border-bottom: 1px solid var(--hairline); }
.chat-drawer.collapsed :is(.chat-expand, .chat-history-btn, .chat-new-btn, .chat-grip, .chat-model, .chat-collapse) { display: none; }
/* Model picker sits between the title and the action icons; stays compact. */
.chat-model { height: 26px; font-size: 12px; padding-left: 8px; margin: 0 4px 0 auto; max-width: 170px; }
.chat-model.hidden { display: none; }
.chat-head .icon-btn { width: 28px; height: 28px; }
.chat-expand .chat-expand-close,
.chat-expand[aria-pressed="true"] .chat-expand-open { display: none; }
.chat-expand[aria-pressed="true"] .chat-expand-close { display: block; }

/* Corner dots: grab the top-left edge to resize the open drawer. */
.chat-grip {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  background-image:
    radial-gradient(circle at 7px 7px, var(--baseline) 1px, transparent 1.5px),
    radial-gradient(circle at 13px 7px, var(--baseline) 1px, transparent 1.5px),
    radial-gradient(circle at 7px 13px, var(--baseline) 1px, transparent 1.5px);
  background-repeat: no-repeat;
  z-index: 2;
}
.chat-grip:hover {
  background-image:
    radial-gradient(circle at 7px 7px, var(--muted) 1px, transparent 1.5px),
    radial-gradient(circle at 13px 7px, var(--muted) 1px, transparent 1.5px),
    radial-gradient(circle at 7px 13px, var(--muted) 1px, transparent 1.5px);
}
.chat-drawer.expanded .chat-grip { display: none; }

.chat-toggle {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 6px 12px 16px;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.chat-drawer.collapsed .chat-toggle { padding: 10px 18px 10px 16px; }
.chat-spark { color: var(--accent); font-size: 13px; }
.chat-thread-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-weight: 450;
}
.chat-thread-title:not(:empty)::before { content: "·"; margin-right: 8px; color: var(--baseline); }
.chat-drawer.collapsed .chat-thread-title { display: none; }
/* A reply that finished while the panel was minimized. */
.chat-unread {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat-1);
}
.chat-drawer.collapsed.has-unread .chat-unread { display: inline-block; }
.chat-drawer.collapsed.is-streaming .chat-unread {
  display: inline-block;
  background: var(--muted);
  animation: chat-pulse 1.2s ease-in-out infinite;
}

.chat-body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(580px, 70vh);
}
.chat-drawer.collapsed .chat-body { display: none; }

.chat-history {
  position: absolute;
  inset: 0;
  background: var(--card);
  overflow-y: auto;
  z-index: 3;
  padding: 10px;
}
.chat-drawer.expanded .chat-history { padding: 18px max(18px, calc((100% - 760px) / 2)); }
.chat-history-heading { padding: 4px 10px 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.chat-history-row { position: relative; display: flex; align-items: center; gap: 2px; }
.chat-history-item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.chat-history-item:hover { background: var(--hover); }
.chat-history-kebab {
  flex: none;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.chat-history-row:hover .chat-history-kebab,
.chat-history-kebab:focus-visible,
.chat-history-kebab[aria-expanded="true"] { opacity: 1; }
.chat-history-kebab:hover { background: var(--hover); color: var(--ink); }
.chat-history-menu { top: 30px; right: 4px; left: auto; min-width: 150px; }
.menu-item.danger { color: var(--danger); }
.chat-history-rename {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--baseline);
  border-radius: 4px;
  padding: 1px 6px;
  width: 100%;
  min-width: 0;
}
.chat-history-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-date { color: var(--muted); font-size: 12px; flex: none; }
.chat-history-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 0; }

/* ---------- Messages ---------- */
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
/* One reading column: the drawer's full width, or a centered measure when
   expanded so lines never stretch across a wide screen. */
.chat-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
  padding: 18px 18px 22px;
}
.chat-drawer.expanded .chat-column,
.chat-drawer.expanded .chat-composer-box {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}
.chat-drawer.expanded .chat-column { padding: 32px 24px 36px; gap: 18px; }

.chat-empty {
  margin: auto 0;
  padding: 8px 4px;
  text-align: center;
}
.chat-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.chat-empty-sub { margin: 0 auto 16px; max-width: 34ch; color: var(--muted); font-size: 13px; line-height: 1.45; }
.chat-drawer.expanded .chat-empty-title { font-size: 21px; }
.chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chat-suggestion {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  padding: 6px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.chat-suggestion:hover { background: var(--hover); border-color: var(--baseline); color: var(--ink); }

.chat-msg {
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.chat-msg-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 13px;
  border-radius: 14px;
  border-bottom-right-radius: 5px;
  background: var(--accent-soft);
  color: var(--ink);
  white-space: pre-wrap;
}
.chat-turn { display: flex; flex-direction: column; gap: 10px; align-self: stretch; min-width: 0; }
.chat-turn-extras { display: flex; flex-direction: column; gap: 10px; }
.chat-turn-extras:empty { display: none; }
.chat-msg-assistant { color: var(--ink); }
.chat-msg-error {
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  color: var(--danger);
  font-size: 13px;
}

/* Markdown inside assistant replies */
.chat-msg-assistant :is(p, ul, ol, pre, blockquote, .chat-table-frame) { margin: 0 0 10px; }
.chat-msg-assistant > :last-child { margin-bottom: 0; }
.chat-msg-assistant :is(ul, ol) { padding-left: 20px; }
.chat-msg-assistant li { margin: 3px 0; }
.chat-msg-assistant li::marker { color: var(--muted); }
.chat-msg-assistant :is(h1, h2, h3, h4) { font-size: 14px; font-weight: 650; margin: 14px 0 6px; }
.chat-msg-assistant strong { font-weight: 620; }
.chat-msg-assistant code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--hover);
  border-radius: 4px;
  padding: 1px 5px;
}
.chat-msg-assistant pre {
  background: var(--hover);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px;
  overflow-x: auto;
}
.chat-msg-assistant pre code { background: none; padding: 0; }
.chat-msg-assistant a { color: inherit; }
.chat-msg-assistant blockquote {
  border-left: 2px solid var(--baseline);
  padding-left: 10px;
  color: var(--ink-2);
}
/* Tables get their own scroll frame: hairline rows, quiet headers, and
   right-aligned numbers — the same table language as the rest of the app. */
.chat-table-frame {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.chat-msg-assistant table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chat-msg-assistant th,
.chat-msg-assistant td {
  padding: 7px 12px;
  text-align: left;
  white-space: nowrap;
}
.chat-msg-assistant th {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--hover) 60%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.chat-msg-assistant tr + tr td { border-top: 1px solid var(--hairline); }
.chat-msg-assistant :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }

.chat-turn-actions { display: flex; gap: 2px; margin-top: -4px; }
.chat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.chat-turn:hover .chat-action,
.chat-action:focus-visible,
.chat-action.done { opacity: 1; }
.chat-action:hover { background: var(--hover); color: var(--ink); }
.chat-action.done { color: var(--delta-good); }

/* ---------- Work log ("Worked for 12s") ---------- */
@keyframes chat-spin { to { transform: rotate(360deg); } }
@keyframes chat-pulse { 50% { opacity: 0.35; } }
.chat-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
  border: 1.6px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-top-color: var(--ink-2);
  animation: chat-spin 0.8s linear infinite;
}
.chat-steps { align-self: flex-start; max-width: 100%; }
.chat-steps-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 8px 3px 2px;
  margin-left: -2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.chat-steps-head:hover { color: var(--ink-2); background: var(--hover); }
.chat-steps-label { flex: none; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-steps.running .chat-steps-label { color: var(--ink-2); }
.chat-steps-time { flex: none; font-variant-numeric: tabular-nums; }
.chat-steps-time:empty { display: none; }
.chat-steps-chevron { display: inline-flex; flex: none; transition: transform 0.15s; }
.chat-steps.open .chat-steps-chevron { transform: rotate(90deg); }
.chat-steps-list {
  list-style: none;
  margin: 6px 0 2px 5px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.chat-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.chat-step-icon { display: inline-flex; width: 12px; justify-content: center; flex: none; }
.chat-step.done .chat-step-icon { color: var(--delta-good); }
.chat-step.failed .chat-step-icon { color: var(--danger); }
.chat-step.running { color: var(--ink-2); }
.chat-step-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Confirmation cards ---------- */
.chat-proposal {
  container-type: inline-size;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: opacity 0.15s;
}
.chat-proposal.busy { opacity: 0.6; }
.chat-proposal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px 0;
}
.chat-proposal-title { font-size: 13.5px; font-weight: 620; }
.chat-proposal-badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 550;
  color: var(--ink-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
}
.chat-proposal-details {
  margin: 8px 14px 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 13px;
}
.chat-proposal-detail { display: contents; }
.chat-proposal-details dt { color: var(--muted); }
.chat-proposal-details dd { margin: 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.chat-proposal-details dd svg { color: var(--muted); }
.chat-proposal-from { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.chat-proposal-rows { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.chat-proposal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  font-size: 13px;
}
.chat-proposal-row + .chat-proposal-row { border-top: 1px solid var(--hairline); }
.chat-proposal-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-proposal-row-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-proposal-row-meta { color: var(--muted); font-size: 12px; }
.chat-proposal-change {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 55%;
  font-size: 12.5px;
}
.chat-proposal-change svg { color: var(--muted); flex: none; }
.chat-proposal-change .chat-proposal-from { text-decoration: none; }
.chat-proposal-to { font-weight: 550; }
/* In the narrow drawer the category change drops under the name. */
@container (max-width: 520px) {
  .chat-proposal-row { flex-wrap: wrap; row-gap: 4px; }
  .chat-proposal-row-main { flex-basis: calc(100% - 110px); }
  .chat-proposal-change { order: 3; flex-basis: 100%; max-width: none; justify-content: flex-start; }
}
.chat-proposal-amount { flex: none; font-weight: 550; }
.chat-proposal-more { margin: 0; padding: 0 14px 8px; color: var(--muted); font-size: 12.5px; }
.chat-proposal-foot { margin: 8px 14px 0; color: var(--muted); font-size: 12.5px; }
.chat-proposal-actions,
.chat-proposal-status,
.chat-proposal-editor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px 10px 14px;
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--hover) 50%, transparent);
}
.chat-proposal-spacer { flex: 1; }
.chat-proposal-edit-btn { border-color: transparent; background: transparent; color: var(--ink-2); padding-left: 6px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 88%, #000); }
.chat-proposal-editor input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
}
.chat-proposal-editor input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.chat-proposal-editor-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}
.chat-proposal-status { font-size: 12.5px; color: var(--muted); }
.chat-proposal-status-icon { display: inline-flex; }
.chat-proposal.status-applied .chat-proposal-status { color: var(--delta-good); }
.chat-proposal.status-failed .chat-proposal-status { color: var(--danger); flex-wrap: wrap; }
.chat-proposal:not(.status-pending) :is(.chat-proposal-rows, .chat-proposal-details, .chat-proposal-foot, .chat-proposal-more) { opacity: 0.72; }
.chat-proposal-error { margin: 0; color: var(--danger); font-size: 12.5px; }
.chat-proposal > .chat-proposal-error { padding: 0 14px 10px; }
.chat-proposal-undo {
  margin-left: auto;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.chat-proposal-undo:hover { background: var(--hover); color: var(--ink); }
.chat-proposal-bulk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
}
.chat-proposal-bulk > span { flex: 1; }

/* ---------- Previews (charts the assistant draws in the chat) ---------- */
.chat-inline-preview:not([data-mounted]) { display: none; }
.chat-inline-preview[data-mounted] { margin: 12px 0; }
.chat-preview-card {
  display: block;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 14px 10px;
  cursor: zoom-in;
  transition: border-color 0.13s ease;
}
.chat-preview-card:hover { border-color: var(--baseline); }
.chat-preview-card .widget-title { font-size: 12.5px; padding-bottom: 6px; }
.chat-preview-card .widget-chart { height: 220px !important; }
.chat-drawer.expanded .chat-preview-card .widget-chart { height: 300px !important; }
.chat-preview-card .widget-table-frame { max-height: 240px; }
.chat-preview-stat { display: flex; flex-direction: column; gap: 3px; }

.preview-modal { width: min(920px, calc(100vw - 48px)); padding: 20px 22px; }
.preview-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}
.preview-modal-head h2 { margin: 0; font-size: 15px; }
.preview-modal .widget-chart { height: min(56vh, 460px); }
.preview-modal .widget-table-frame { max-height: 56vh; }

/* ask_user card: question as a title, options as full-width rows, and a box
   for a typed answer. Chosen rows take the accent; the rest fade once answered. */
.chat-question {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.chat-question-title { margin: 0 0 10px; font-size: 13.5px; font-weight: 620; line-height: 1.4; }
.chat-question-options { display: flex; flex-direction: column; gap: 6px; }
.chat-question-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 11px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.chat-question-option:hover:not(:disabled) { background: var(--hover); border-color: var(--baseline); }
.chat-question-label { font-size: 13.5px; font-weight: 550; }
.chat-question-description { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.chat-question-option.chosen { border-color: var(--accent); background: var(--accent-soft); }
.chat-question.answered .chat-question-option:not(.chosen) { opacity: 0.45; }
.chat-question-custom { display: flex; gap: 6px; margin-top: 8px; }
.chat-question-custom input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 11px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.chat-question-custom input::placeholder { color: var(--muted); }
.chat-question-custom input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.chat-question-go {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.chat-question-go:hover:not(:disabled) { color: var(--ink); background: var(--hover); }
.chat-question-send { margin-top: 8px; }
.chat-question.answered .chat-question-custom,
.chat-question.answered .chat-question-send { display: none; }

/* ---------- Composer ---------- */
.chat-composer { padding: 0 14px 14px; }
.chat-drawer.expanded .chat-composer { padding: 0 24px 22px; }
.chat-composer-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 8px 14px;
  border: 1px solid var(--baseline);
  border-radius: 14px;
  background: var(--card);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.chat-composer-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--baseline));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent);
}
.chat-composer-box textarea {
  width: 100%;
  min-height: 22px;
  max-height: 168px;
  padding: 0 4px 0 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
}
.chat-composer-box textarea::placeholder { color: var(--muted); }
.chat-composer-row { display: flex; align-items: center; gap: 8px; margin-left: -6px; }
.chat-composer-hint { flex: 1; font-size: 11.5px; color: var(--muted); opacity: 0; transition: opacity 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-composer-box:focus-within .chat-composer-hint { opacity: 1; }
.chat-attach-btn,
.chat-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.chat-attach-btn { background: transparent; color: var(--muted); }
.chat-attach-btn:hover { color: var(--ink); background: var(--hover); }
.chat-send { margin-left: auto; background: var(--accent); color: var(--accent-ink); }
.chat-send:disabled { background: var(--accent-soft); color: var(--muted); cursor: default; }
.chat-drawer.is-streaming .chat-send { background: var(--accent-soft); color: var(--muted); }

.chat-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.chat-attachments.hidden { display: none; }
.chat-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  height: 26px;
  padding: 0 4px 0 8px;
  font-size: 12.5px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink);
}
.chat-attachment svg { flex: none; color: var(--muted); }
.chat-attachment > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.chat-attachment-remove:hover { color: var(--ink); background: var(--card); }

/* Phones: the open panel becomes a bottom sheet across the screen. */
@media (max-width: 640px) {
  .chat-drawer:not(.collapsed) { left: 8px; right: 8px; bottom: 8px; width: auto !important; }
  .chat-drawer:not(.collapsed) .chat-body { height: min(72vh, 620px) !important; }
  .chat-drawer.expanded { top: 8px; }
  .chat-grip { display: none; }
  .chat-composer-hint, .chat-thread-title { display: none; }
}

/* ============================================================
   Shell — sidebar + content on the same flat surface
   ============================================================ */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  flex: none;
  position: sticky;
  top: 0;
  width: 208px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
/* Full-color art, not an ink-painted mask: the mark keeps its own orange
   and black in both schemes instead of inverting. */
.brand-mark {
  display: inline-block;
  flex: none;
  height: 24px;
  aspect-ratio: 1527 / 2368;
  background: url("../img/bucket-mark.bac05a9820c4.png") no-repeat center / contain;
}
.auth-brand .brand-mark { height: 32px; }
.sidebar .brand { padding: 2px 10px 20px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
}
.side-link svg { flex: none; color: var(--muted); }
.side-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
}
.side-icon:hover { background: var(--hover); }
.side-icon img { display: block; width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.side-emoji { font-size: 13px; line-height: 1; }
.side-label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-link:hover { background: var(--hover); color: var(--ink); }
.side-link:hover svg { color: var(--ink-2); }
/* The current page is a white chip, like the cards on the page. */
.side-link.active {
  background: var(--card);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-card);
  color: var(--ink);
}
.side-link.active svg { color: var(--ink); }
.side-group {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 18px 10px 4px;
}
.side-group-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-group-icon { flex: none; font-size: 11px; line-height: 1; }
img.side-group-icon { width: 13px; height: 13px; border-radius: 3px; object-fit: cover; display: block; }

.side-foot {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}

.user-menu { position: relative; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.user-chip:hover { background: var(--hover); }
.user-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip .chev { flex: none; color: var(--muted); }
.user-popover {
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 0;
}
.user-popover form { display: contents; }
.side-user {
  padding: 0 10px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-foot form { margin: 0; }

.shell-main { flex: 1; min-width: 0; }

.side-panel { display: contents; }
.nav-toggle { display: none; }

/* Phones and narrow windows: a slim sticky bar with the brand and a menu
   button. The nav and account open as a sheet under it, rather than
   squeezing a row of links between the brand and the account chip. */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar {
    z-index: 40;
    width: auto;
    height: 56px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    background: var(--page);
    border-bottom: 1px solid var(--hairline);
  }
  .sidebar .brand { padding: 0; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle:hover { background: var(--hover); }
  .nav-toggle .nav-toggle-close,
  .sidebar.is-open .nav-toggle .nav-toggle-open { display: none; }
  .sidebar.is-open .nav-toggle .nav-toggle-close { display: inline; }
  .side-panel {
    display: none;
    position: fixed;
    inset: 56px 0 0;
    flex-direction: column;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    background: var(--page);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sidebar.is-open .side-panel { display: flex; }
  .side-panel .side-link { height: 42px; font-size: 15px; }
  .side-panel .side-foot { padding-top: 12px; }
  body.nav-open { overflow: hidden; }
  /* No keyboard shortcut to hint at on a phone. */
  .side-kbd { display: none; }
  /* The assistant pill would float over the open menu. */
  body.nav-open .chat-drawer { visibility: hidden; }
}
}

/* ============================================================
   Forms — shared field styles (settings, auth)
   ============================================================ */
.form-field { margin-bottom: 16px; }
.form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-field :is(input, select) {
  width: 100%;
  height: var(--ctl-h);
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
  padding: 0 11px;
}
.form-field select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237e8288' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.form-field input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
.form-field .helptext {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.form-field .helptext ul { margin: 4px 0 0; padding-left: 16px; }

.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--danger);
}
form > .errorlist { margin: 0 0 14px; }

.messages {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 13px;
  color: var(--ink-2);
}
.messages li {
  padding: 9px 13px;
  background: var(--card);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
}
.messages li + li { margin-top: 6px; }

/* ============================================================
   Settings page
   ============================================================ */
.settings-page { max-width: 560px; }
.page-head { padding-bottom: 24px; }
.page-head h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }

.settings-section {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px 26px;
}
.settings-section + .settings-section { margin-top: 16px; }
.settings-section .card-head { padding-bottom: 6px; }
.settings-status { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.settings-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.settings-form { max-width: 420px; }
.settings-form .btn { margin-top: 4px; }

/* ============================================================
   Standalone pages (rules, subscriptions)
   ============================================================ */
.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.page-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); max-width: 560px; }
.label-hint { font-weight: 500; color: var(--muted); }
.form-row { display: flex; gap: 10px; }
.form-row .form-field { flex: 1; min-width: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 14px;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.data-table td { padding: 8px 14px; vertical-align: middle; }
.data-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.data-table tbody tr { transition: background 0.12s ease; }
.data-table tbody tr:hover { background: var(--hover); }
.data-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-muted { color: var(--muted); }
.cell-date { white-space: nowrap; color: var(--ink-2); }
.cell-nowrap { white-space: nowrap; }
.cell-actions { text-align: right; white-space: nowrap; width: 1%; }
.cell-primary { width: 99%; }
.cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cell-clip {
  display: block;
  max-width: 30ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-strong { font-weight: 550; cursor: text; }
.cell-meta { font-size: 12px; color: var(--muted); }
.cell-note { color: var(--muted); font-size: 12.5px; }
.cell-note .cell-clip { max-width: 36ch; }
.inline-rename {
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink);
  outline: none;
  padding: 0;
  min-width: 140px;
}

/* ============================================================
   Auth — centered white card on the paper page
   ============================================================ */
.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 10vh;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 30px 28px;
}
.auth-brand { display: flex; align-items: center; margin-bottom: 28px; }
.auth-card h1 { margin: 0 0 6px; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
.auth-sub { margin: 0 0 24px; font-size: 13.5px; color: var(--ink-2); }
.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-alt { margin: 22px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-alt a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   Agent dashboards — 12-col grid of bordered, flat widgets
   ============================================================ */
/* One compact header line: the agent supplies the words, not the layout. */
/* Title on its own line, description stacked under it at reading width. */
.dash-head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.dash-head h1 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.dash-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 72ch;
}

.dash-controls {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-controls:empty { display: none; }
.dash-range-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-filter-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.widget-grid.is-loading { opacity: 0.6; transition: opacity 0.15s 0.1s; }

.widget-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
/* Every widget is one white card. Table widgets are the exception: their
   scrolling frame IS the card (title stays above it), so cards never nest. */
.widget {
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 16px;
}
/* Tables and notes are cards like every other widget, title inside, so a
   table or note beside a chart lines up with it. A table runs edge to edge
   under the title, its header row doubling as the card's divider. */
.widget:has(> .widget-body > .widget-table-frame) { padding-bottom: 0; }
.widget > .widget-body > .widget-table-frame {
  margin: 0 -16px;
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
  background: transparent;
}
.widget > .widget-body > .widget-table-frame .widget-table th { border-top: 1px solid var(--hairline); }
.widget > .widget-body > .widget-truncated { padding-bottom: 12px; }
.widget--third { grid-column: span 4; }
.widget--half { grid-column: span 6; }
.widget--two_thirds { grid-column: span 8; }
.widget--full { grid-column: span 12; }
/* A column stacks its children at one grid width, so a chart and a table
   can sit beside one tall note. The column itself draws nothing. */
.widget-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.widget-column > .widget, .widget-column > .widget-stat-strip { flex: none; }
.widget-column-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 1020px) {
  .widget, .widget-column, .widget--third, .widget--half, .widget--two_thirds, .widget--full { grid-column: span 12; }
}

.widget-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  padding-bottom: 8px;
}
.widget-body { flex: 1; min-height: 0; }
.widget-chart { width: 100%; height: 260px; }
.widget, .chat-preview-card { position: relative; }

/* Series legend: HTML so it wraps instead of paging, and every name is
   readable. Click a name to hide or show that series. */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: -2px 0 8px;
  padding-right: 64px;
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 1px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.chart-legend-item[aria-pressed="false"] { opacity: 0.4; }
.chart-legend-swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.chart-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chart ↔ table and CSV, shown when the pointer is over the widget. */
.widget-tools {
  position: absolute;
  top: 9px;
  right: 10px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
:is(.widget, .chat-preview-card):hover > .widget-tools,
.widget-tools:focus-within { opacity: 1; }
.widget-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.widget-tool:hover { background: var(--hover); color: var(--ink); }
.widget-table-view .widget-table-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: 260px;
}
.kpi-unit { margin-left: 5px; font-size: 0.55em; font-weight: 550; color: var(--muted); letter-spacing: 0; }
/* Consecutive stats pack into one row of small cards. The cards share row
   tracks (subgrid), so every label, number, caption, and delta lines up
   across the strip however long one card's text runs. Spacing comes from
   margins rather than gaps: a gap would sit between all four tracks even
   when a card has no caption or delta, padding its bottom. */
.widget-stat-strip {
  grid-column: span 12;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: auto;
  gap: 0 12px;
  /* Cancels the last row's card margin below. */
  margin-bottom: -12px;
}
.widget-stat-strip > .widget--stat {
  grid-column: auto;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  /* Separates cards when the strip wraps to a second row. */
  margin-bottom: 12px;
}
.widget-stat-strip > .widget--stat .widget-body { display: contents; }
.widget-stat-strip .kpi-label { grid-row: 1; }
.widget-stat-strip .kpi-value { grid-row: 2; margin-top: 3px; }
.widget-stat-strip .kpi-caption { grid-row: 3; margin-top: 3px; }
.widget-stat-strip .kpi-delta { grid-row: 4; margin-top: 3px; }
/* An empty or failed stat has no label; its note shouldn't stretch the
   label row for its neighbours. */
.widget-stat-strip .widget-empty,
.widget-stat-strip .widget-error { grid-row: 1 / span 4; align-self: center; }
.widget--stat { padding: 16px 18px 14px; }
.widget--stat .widget-body { display: flex; flex-direction: column; gap: 3px; }
.widget--stat .kpi-label { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.widget--stat .kpi-label-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}
.widget--stat .kpi-caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  align-self: start;
}
.widget--stat .kpi-value { overflow-wrap: anywhere; }

/* Charts fill their card: a row stretches to its tallest widget, and the
   shorter chart grows into the space instead of leaving a gap under it. */
.widget-body { display: flex; flex-direction: column; }
.widget-body > .widget-chart { flex: 1 1 auto; min-height: 240px; height: 240px; }
.widget--sankey .widget-body > .widget-chart { flex: none; }

/* Metrics: label/value rows with hairlines. */
.widget-metrics { margin: 0; display: flex; flex-direction: column; }
.widget-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: 13.5px;
}
.widget-metric + .widget-metric { border-top: 1px solid var(--hairline); }
.widget-metric dt { min-width: 0; color: var(--ink-2); display: flex; flex-direction: column; }
.widget-metric-caption { font-size: 12px; color: var(--muted); }
.widget-metric dd { margin: 0; flex: none; font-weight: 600; text-align: right; }
.widget-metric-unit { font-weight: 450; color: var(--muted); font-size: 12.5px; }

/* List: ranked rows with a share and a thin bar. */
.widget-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.widget-list-row { display: flex; flex-direction: column; gap: 5px; border-radius: 6px; }
.widget-list-head { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.widget-list-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.widget-list-value { flex: none; font-weight: 600; }
.widget-list-share { flex: none; width: 3.2em; text-align: right; font-size: 12px; color: var(--muted); }
.widget-list-caption { font-size: 12px; color: var(--muted); margin-top: -3px; }
.widget-list-track { display: block; height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.widget-list-fill { display: block; height: 100%; border-radius: 2px; opacity: 0.55; }
.widget-list-row.filterable { cursor: pointer; margin: -4px -6px; padding: 4px 6px; }
.widget-list-row.filterable:hover { background: var(--hover); }
.widget-list-row.selected .widget-list-fill { opacity: 1; }
.widget-list-row.dimmed { opacity: 0.45; }

/* One point in range: say so instead of drawing a lone dot. */
.widget-single { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 160px; }
.widget-single-row { display: flex; align-items: baseline; gap: 10px; }
.widget-single-value { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; }
.widget-single-label { font-size: 13px; color: var(--muted); }
.widget-single-note { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.widget-note { font-size: 12px; color: var(--muted); padding-top: 8px; }
.widget-error { font-size: 12.5px; color: var(--danger); padding: 10px 0; overflow-wrap: anywhere; }
.widget-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; padding: 24px 0; text-align: center; }
.widget-truncated { font-size: 12px; color: var(--muted); padding-top: 6px; }

/* Like the home page: title sits above, the frame is the card. */
.widget-table-frame {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: auto;
  max-height: 340px;
}
/* border-collapse: separate keeps the header's bottom border attached to
   the sticky th cells while the body scrolls beneath them. */
.widget-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.widget-table th, .tx-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding: 9px 14px;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  background: var(--card);
}
.widget-table td { padding: 9px 14px; }
.widget-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.widget-table td.num, .widget-table th.num, .tx-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Review rows: applied tags as quiet chips, a "+" opens the option menu. */
.widget-table th.tags, .widget-table td.tags { width: 1%; white-space: nowrap; text-align: right; }
.widget-tags { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 22px; }
.widget-tags.busy { opacity: 0.6; pointer-events: none; }
.widget-tag-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.widget-tag-chip.other { background: transparent; border: 1px solid var(--hairline); color: var(--muted); }
.widget-tag-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  border: 1px dashed var(--hairline);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.widget-tag-add:hover, .widget-tag-add[aria-expanded="true"] { border-style: solid; border-color: var(--ink-2); color: var(--ink); background: var(--card); }
.widget-tags.failed .widget-tag-add { border-color: var(--danger); color: var(--danger); }
.widget-tag-menu {
  position: fixed;
  z-index: 60;
  min-width: 176px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}
.widget-tag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.widget-tag-item:hover { background: var(--accent-soft); }
.widget-tag-item-check { display: inline-flex; color: var(--accent); opacity: 0; }
.widget-tag-item[aria-checked="true"] .widget-tag-item-check { opacity: 1; }
.widget-table td.date { white-space: nowrap; }
.widget-table td.long { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-tag-pills { display: flex; gap: 4px; }
.widget-tag-pills.busy { opacity: 0.6; pointer-events: none; }
.widget-tag-pill {
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  line-height: 20px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.widget-tag-pill:hover { border-color: var(--ink-2); color: var(--ink); }
.widget-tag-pill[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.widget-tag-pill.failed { border-color: var(--danger); color: var(--danger); }

.widget-table .group-row td { cursor: pointer; font-weight: 550; }
.widget-table .group-row:hover td { background: var(--hover); }
/* Click-to-filter rows: a table whose viz_spec sets a filter. */
.widget-table tr.filterable { cursor: pointer; }
.widget-table tr.filterable:hover td { background: var(--hover); }
.widget-table tr.filterable.selected td { background: var(--accent-soft); }
.widget-table tr.filterable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.group-chevron {
  display: inline-block;
  color: var(--muted);
  font-size: 10px;
  transition: transform 0.12s ease;
}
.group-row.open .group-chevron { transform: rotate(90deg); }
.group-count { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 4px; }

/* Markdown sits like a table: heading on the page, content in a card that
   hugs its text instead of stretching to the row beside it. */
.widget-md { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.widget-md > :first-child { margin-top: 0; }
.widget-md > :last-child { margin-bottom: 0; }
.widget-md h1, .widget-md h2, .widget-md h3 { font-size: 13.5px; font-weight: 650; color: var(--ink); margin: 10px 0 4px; }
.widget-md p { margin: 6px 0; }
.widget-md ul, .widget-md ol { margin: 6px 0; padding-left: 20px; }
.widget-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--accent-soft); padding: 1px 4px; border-radius: 4px; }

.dash-empty { margin-top: 48px; text-align: center; color: var(--muted); }
.dash-empty p { max-width: 52ch; margin: 6px auto; }

/* ---------- Documents page ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Documents page: one table; the section doubles as the drop target. */
.documents-table th:nth-child(2) { width: 150px; }
.documents-table th:nth-child(3), .documents-table th:nth-child(4) { width: 90px; }
.documents-table th:nth-child(5) { width: 130px; }
.documents-table th:nth-child(6) { width: 72px; }
.documents-table td.num, .documents-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.documents-title { color: inherit; text-decoration: none; font-weight: 550; }
.documents-title:hover { text-decoration: underline; }
.documents-tag { margin-left: 8px; vertical-align: middle; }
.documents-kind { height: 28px; max-width: 100%; }
.documents-date { color: var(--muted); white-space: nowrap; }
.documents-tools { text-align: right; white-space: nowrap; }
.documents-tools .icon-btn { vertical-align: middle; }
.documents-tools .icon-btn + .icon-btn { margin-left: 4px; }
.documents-error { margin: -8px 0 16px; font-size: 13px; color: var(--negative, #b4443c); }
.documents-error.hidden { display: none; }
.documents-drop { position: relative; border-radius: var(--radius); }
.documents-drop-hint {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--ink);
  font-weight: 550;
  pointer-events: none;
}
.documents-drop.dragging .documents-drop-hint { display: flex; }
.documents-drop.dragging .empty { min-height: 160px; }
/* Import page: a single focused column — controls, one drop target, then
   the verdict. The page never shows more than the current step needs. */
.import-page { position: relative; max-width: 760px; margin: 28px 0 0; }
.import-error { margin: 0 0 16px; font-size: 13px; color: var(--danger); }
.import-error.hidden, .import-preview.hidden, .import-done.hidden,
.import-zone.hidden, .import-filebar.hidden { display: none; }

.import-controls { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.import-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; }
.import-field .rule-select { height: var(--ctl-h); width: 100%; }

/* The drop target is the page's one primary action, so it gets the weight. */
.import-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 40px 24px;
  border: 1.5px dashed var(--baseline);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.import-zone:hover { border-color: var(--accent); color: var(--ink-2); }
.import-zone-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.import-zone-sub { font-size: 12.5px; }
.import-page.dragging .import-zone { border-color: var(--accent); background: var(--accent-soft); }

.import-filebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  height: 46px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--muted);
}
.import-filename { font-size: 13px; font-weight: 550; color: var(--ink); }
.import-filebar .btn { margin-left: auto; }

.import-preview { margin-top: 18px; }

/* The verification result is the headline: it decides whether to trust any
   of the numbers underneath it. */
.import-verdict {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
}
.import-verdict.is-good { background: color-mix(in srgb, var(--delta-good) 9%, var(--card)); }
.import-verdict.is-warn { background: color-mix(in srgb, var(--delta-bad) 9%, var(--card)); }
.import-verdict-text strong { display: block; color: var(--ink); }
.import-verdict-text span { color: var(--ink-2); }
.import-verdict-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
}
.import-verdict-mark.is-good { background: var(--delta-good); }
.import-verdict-mark.is-warn { background: var(--delta-bad); }

.import-lede { margin: 20px 0 14px; font-size: 16px; font-weight: 600; color: var(--ink); }

.import-facts {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 7px 18px;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.45;
}
.import-facts dt { color: var(--muted); }
.import-facts dd { margin: 0; color: var(--ink-2); }

.import-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.import-table th:nth-child(1) { width: 112px; }
.import-table th:nth-child(3), .import-table th:nth-child(4) { width: 108px; }
.import-table .import-date { white-space: nowrap; color: var(--muted); }
.import-table .is-in { color: var(--delta-good); }
.import-sample-note { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }

.import-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.import-done {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.import-done p { margin: 0; font-size: 13.5px; color: var(--ink); }
.import-done .btn { margin-left: auto; }

.import-drop-hint {
  position: absolute;
  inset: -8px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--page) 86%, transparent);
  color: var(--ink);
  font-weight: 600;
  pointer-events: none;
}
.import-page.dragging .import-drop-hint { display: flex; }

@media (max-width: 640px) {
  .import-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .import-facts dd { margin-bottom: 9px; }
}

/* Info button beside a stat label; its note opens in a floating popover so
   long explanations never stretch the strip. */
.info-tip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: -1px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: help;
}
.info-tip:hover, .info-tip[aria-expanded="true"] { color: var(--ink); background: var(--hover); }
.info-pop {
  position: fixed;
  z-index: 70;
  max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  white-space: pre-line;
}
.info-pop-title { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }


/* ============================================================
   Sidebar — shared pieces
   ============================================================ */
.side-ask {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--ctl-h);
  margin: 0 0 14px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow-card);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.13s ease, color 0.13s ease;
}
.side-ask:hover { border-color: var(--baseline); color: var(--ink); }
.side-ask svg { flex: none; }
.side-kbd {
  font: inherit;
  font-size: 11px;
  font-weight: 550;
  color: var(--muted);
  padding: 1px 5px;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  background: var(--page);
}
.side-nav-dash { margin-top: 18px; }
.side-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.side-new {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.side-new:hover { background: var(--hover); color: var(--ink); }
.side-nav-dash .side-group {
  width: 100%;
  margin: 0;
  padding: 8px 10px 4px;
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.side-nav-dash .side-group:hover { color: var(--ink-2); }
.side-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-chev { flex: none; margin-left: auto; opacity: 0; transition: opacity 0.13s ease, transform 0.13s ease; }
.side-group:hover .side-chev, .side-group:focus-visible .side-chev { opacity: 1; }
.side-section.collapsed .side-items { display: none; }
.side-section.collapsed .side-chev { opacity: 1; transform: rotate(-90deg); }
.side-items { display: flex; flex-direction: column; gap: 2px; }
.side-initial {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  color: var(--tint);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 861px) {
  .sidebar { width: 224px; padding: 18px 12px 16px; }
  .sidebar .brand { padding: 2px 10px 18px; font-size: 16px; }
}

/* ---------- Ask or jump to… ---------- */
.side-ask-wrap { position: relative; margin: 0 0 14px; }
/* A sticky sidebar is its own stacking context; lift it over the page so
   the suggestions don't slide under the cards. */
@media (min-width: 861px) { .sidebar { z-index: 30; } }
.side-ask-wrap .side-ask { margin: 0; cursor: text; }
.side-ask-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.side-ask-input::placeholder { color: var(--muted); }
.side-ask-input:focus-visible { outline: none; }
.side-ask:focus-within { border-color: var(--baseline); color: var(--ink-2); }
.side-ask:focus-within .side-kbd { visibility: hidden; }
.side-ask-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  width: max(100%, 300px);
  padding: 5px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.side-ask-hint { margin: 0; padding: 8px 9px; font-size: 12.5px; color: var(--muted); }
.side-ask-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.side-ask-row[aria-selected="true"] { background: var(--hover); color: var(--ink); }
.side-ask-row.is-ask { margin-top: 2px; }
.side-ask-row.is-ask .side-ask-label { font-weight: 550; }
.side-ask-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.side-ask-note { flex: none; font-size: 12px; color: var(--muted); }

/* ---------- New dashboard, described in place ---------- */
.side-new[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
/* Floats over the list, just under the heading, instead of pushing the
   dashboards down. */
.side-nav-dash { position: relative; }
.side-new-form {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
}
.side-new-form textarea {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: none;
  outline: none;
}
.side-new-actions { padding: 4px 8px 2px; font-size: 11.5px; color: var(--muted); }

/* ---------- The assistant docked beside the sidebar ---------- */
@media (min-width: 861px) {
  .chat-drawer.docked:not(.collapsed):not(.expanded) {
    top: 12px;
    bottom: 12px;
    left: 236px;
    right: auto;
    width: min(440px, calc(100vw - 260px)) !important;
    animation: dock-in 0.16s ease-out;
  }
  .chat-drawer.docked:not(.collapsed):not(.expanded) .chat-body { height: auto !important; flex: 1; min-height: 0; }
  .chat-drawer.docked .chat-grip { display: none; }
}
@keyframes dock-in {
  from { opacity: 0; transform: translateX(-10px); }
}

/* ---------- Dashboard history ---------- */
.dash-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dash-head-row .dash-head { flex: 1; }
.dash-history { position: relative; flex: none; }
.dash-history .btn { gap: 6px; }
.dash-history-menu { left: auto; right: 0; width: min(380px, calc(100vw - 32px)); padding: 6px; }
.dash-history-head { margin: 4px 8px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dash-history-note { margin: 8px; font-size: 12.5px; color: var(--muted); }
.dash-history-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; }
.dash-history-row:hover { background: var(--hover); }
.dash-history-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-history-reason { font-size: 13px; font-weight: 550; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dash-history-meta { font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }


/* ---------- Asking about a card ---------- */

/* ✦ on a card: opens the assistant about what that card shows. */
.ask-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.ask-btn:hover { background: var(--accent-soft); color: var(--ink); }
.ask-btn:focus-visible { outline: 2px solid var(--baseline); outline-offset: 2px; }

.chat-context {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  height: 26px;
  margin-bottom: 6px;
  padding: 0 6px 0 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
}
.chat-context-spark { font-size: 10px; }
.chat-context-clear {
  border: none;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
}
.chat-context-clear:hover { color: var(--ink); }
.chat-msg-context {
  align-self: flex-end;
  margin-bottom: -4px;
  font-size: 12px;
  color: var(--muted);
}

/* The "Based on …" line that closes an answer with figures. */
.chat-msg-assistant p.chat-basis {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.chat-msg-assistant p.chat-basis em { font-style: normal; }
.chat-msg-assistant p.chat-basis::before { content: "ⓘ "; }

/* ---------- Spending pace (Home) ---------- */

.pace-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 14px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.pace-head { display: flex; align-items: flex-start; gap: 12px; }
.pace-head > div { min-width: 0; flex: 1; }
.pace-caption { font-size: 13px; font-weight: 550; color: var(--muted); margin-top: 2px; }
.pace-caption .over { color: var(--series-out); }
.pace-caption .under { color: var(--delta-good); }
.pace-chart { height: 170px; min-height: 150px; margin-top: 10px; overflow: hidden; }
.pace-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.pace-legend { display: inline-flex; align-items: center; gap: 6px; }
.pace-legend::before { content: ""; width: 14px; border-top: 2px dotted var(--muted); }
/* Two plain figures under the line, read the same way as the headline. */
.pace-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.pace-fact {
  display: block;
  min-width: 0;
  padding: 6px 8px;
  margin: 0 -8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}
button.pace-fact { cursor: pointer; transition: background 0.12s ease; }
button.pace-fact:hover { background: var(--hover); }
.pace-fact > span, .pace-head .kpi-label, .pace-head .kpi-value { display: block; }
.pace-fact .kpi-value { font-size: 20px; }
.pace-fact .kpi-caption { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A ✦ beside card titles and the chart tabs. */
.card-head .ask-btn { margin-left: 6px; }
.tab-row .ask-btn { margin-left: auto; align-self: center; }
.widget-tool-ask { font-size: 12px; line-height: 1; }
/* Touch screens have no hover: keep widget tools (and ✦) in view. */
@media (hover: none) { .widget-tools { opacity: 1; } }
/* A stat's label runs full width; leave room for its ✦. */
.widget--stat .kpi-label { padding-right: 30px; }

/* ============================================================
   Budget — types, the page, and the picker on transaction rows
   ============================================================ */
/* Budget types are shades of the spending orange (--series-out): deep for
   essentials, peach for lifestyle, a pale ghost with a dashed outline for
   one-offs, neutral for business. The chart reads the same tokens, so
   swatches, chips, and bars always agree. */
:root {
  --budget-essentials: #d9612f;
  --budget-lifestyle: #f2b393;
  --budget-one_off: #f3cdb8;
  --budget-business: #e3e1da;
}
@media (prefers-color-scheme: dark) {
  :root {
    --budget-essentials: #e0703f;
    --budget-lifestyle: #8a4a2c;
    --budget-one_off: #4f3022;
    --budget-business: #34332f;
  }
}
[data-type="essentials"] { --type-color: var(--budget-essentials); }
[data-type="lifestyle"] { --type-color: var(--budget-lifestyle); }
[data-type="one_off"] { --type-color: var(--budget-one_off); }
[data-type="business"] { --type-color: var(--budget-business); }
.budget-swatch[data-type="one_off"] {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--budget-essentials) 55%, transparent) 0 1px, var(--budget-one_off) 1px 3px);
}
.budget-swatch[data-type="business"] { box-shadow: inset 0 0 0 1px var(--baseline); }

.budget-swatch {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--type-color, var(--baseline));
  vertical-align: 1px;
}

.budget-chart-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 8px;
}
.budget-chart-head h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.budget-chart-head .range-caption { margin-left: auto; }
.budget-legend { padding: 0 4px; margin-bottom: 0; }
.budget-chart { height: 320px; cursor: pointer; }
.budget-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 26px;
  padding: 0 4px 0 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.budget-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.budget-filter-clear:hover { background: var(--hover); color: var(--ink); }

.budget-table .budget-group-row td {
  padding-top: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--page);
}
.budget-table tbody.budget-group tr.budget-group-row:hover { background: none; }
.budget-table tbody + tbody tr.budget-group-row td { border-top: 1px solid var(--hairline); }
.budget-category-name { font-weight: 550; }
.budget-category-row { cursor: pointer; }
.budget-category-row:focus-visible { outline: 2px solid var(--baseline); outline-offset: -2px; }
.budget-caret {
  display: inline-block;
  width: 12px;
  margin-left: -2px;
  color: var(--muted);
  font-weight: 600;
  transition: transform 0.15s ease;
}
.budget-category-row.open .budget-caret { transform: rotate(90deg); }
.budget-table tbody tr.budget-detail-row:hover { background: none; }
.budget-detail-row > td { padding: 0 14px 12px 26px; border-top: none !important; }
.budget-detail { font-size: 12.5px; color: var(--muted); }
.budget-detail-head { padding: 2px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.budget-detail-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--hairline); }
.budget-detail-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 96px;
  align-items: center;
  gap: 12px;
  padding: 6px 0 6px 12px;
}
.budget-detail-who { display: flex; flex-direction: column; min-width: 0; }
.budget-detail-name { color: var(--ink); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.budget-detail-meta { font-size: 11.5px; color: var(--muted); }
.budget-detail-amount { display: flex; flex-direction: column; align-items: flex-end; color: var(--ink); font-variant-numeric: tabular-nums; }
.budget-category-note { font-size: 12px; color: var(--muted); }
.budget-category-note a { color: var(--ink-2); }
.budget-empty { margin: 0; padding: 18px; font-size: 13px; color: var(--muted); }

/* A row's budget type: a quiet chip, solid when set by hand. */
.budget-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px 0 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.budget-chip:hover { border-color: var(--baseline); color: var(--ink); }
.budget-chip.manual { border-color: var(--baseline); color: var(--ink); }
.budget-chip .budget-swatch { margin-right: 6px; }
.budget-chip-spread { margin-left: 5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.budget-menu {
  position: fixed;
  z-index: 60;
  min-width: 220px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
}
.budget-menu-heading { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.budget-menu-sep { height: 1px; margin: 4px 6px; background: var(--hairline); }
.budget-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.budget-menu-item:hover, .budget-menu-item:focus-visible { background: var(--hover); outline: none; }
.budget-menu-item.selected { background: var(--accent-soft); }
.budget-menu-text { display: flex; flex-direction: column; gap: 1px; }
.budget-menu-hint { font-size: 11.5px; font-weight: 450; color: var(--muted); }

@media (max-width: 640px) {
  .page-head:has(#budget-range) { flex-direction: column; }
  .budget-table th:nth-child(2), .budget-table td.cell-nowrap { padding-left: 4px; padding-right: 4px; }
}
/* Rule modal: direction and an optional date range under text and amount. */
.rule-modal-grid-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 160px; margin-top: 12px; }
.rule-modal-grid-dates .modal-input { width: 100%; min-width: 0; padding-left: 8px; padding-right: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rule-direction .seg-option { padding: 0 8px; white-space: nowrap; }
@media (max-width: 560px) {
  .rule-modal-grid-dates { grid-template-columns: 1fr 1fr; }
  .rule-modal-grid-dates > :last-child { grid-column: 1 / -1; }
}
#budget-range .pill { white-space: nowrap; }
.budget-chip-static { cursor: default; border-style: dashed; }
.budget-chip-static:hover { border-color: var(--hairline); color: var(--ink-2); }