/* PIP-OS page-specific styles */

/* STAT — dashboard */
#page-stat .stat-header {
  padding: 4px var(--panel-pad);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  text-align: center;
}
#page-stat .panel-body {
  font-size: var(--fs-sm);
  display: flex;
  flex-direction: column;
}
/* Task/event/note rows read smaller than the same rows on their own full
   pages (which don't inherit the dashboard's compact --fs-sm) — bump them
   back to the app's normal size so text and tap targets match elsewhere. */
#page-stat .item-row { font-size: var(--fs); }
#panel-tasks .task-progress-bars { margin-top: auto; }
#page-stat .stat-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#page-stat .stat-clock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#page-stat .clock-col {
  flex: 1;
  text-align: center;
}
#page-stat .weather-col {
  flex: 1;
  text-align: right;
}
#weather-widget {
  font-size: var(--fs-sm);
  color: var(--fg);
  line-height: 1.4;
}
#weather-widget > div { white-space: nowrap; }
#wx-retry { padding: 0 4px; font-size: var(--fs-sm); }
#page-stat #date-display {
  text-align: left;
}
#page-stat .user-line {
  font-size: var(--fs-sm);
  color: var(--dim);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container shell (max-width: 480px) {
  #page-stat .user-line { display: none; }
  #page-stat .stat-header { padding: 2px var(--panel-pad); }
  #page-stat #date-display { text-align: left; }
  #page-stat .clock-col, #page-stat .weather-col { flex: none; text-align: left; }
  #page-stat .weather-col { text-align: right; }
  #weather-widget > div { white-space: nowrap; }
}

/* TASKS */
.task-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--panel-pad);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.task-add-row input {
  flex: 1;
  border-bottom: 1px solid var(--border);
  padding: 2px 0;
}

/* EVNT */
.view-toggle {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.view-btn {
  flex: 1;
  padding: 4px 8px;
  text-align: center;
  font-size: var(--fs-sm);
  cursor: pointer;
  border-right: 1px solid var(--border);
  transition: var(--transition-color);
}
.view-btn:last-child { border-right: none; }
.view-btn.active { background: var(--fg); color: var(--bg); }

/* NOTE */
#page-notes .notes-inner {
  display: flex;
  flex: 1;
  overflow: hidden;
}
#page-notes .note-list-pane {
  width: min(220px, 40%);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-notes .note-reader-pane {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@container shell (max-width: 480px) {
  #page-notes .note-list-pane { width: 100%; border-right: none; }
  #page-notes .note-reader-pane { display: none; }
  #page-notes.note-open .note-list-pane { display: none; }
  #page-notes.note-open .note-reader-pane { display: flex; }
}

.note-search {
  padding: 4px var(--panel-pad);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.note-search input { width: 100%; }

.note-editor {
  flex: 1;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.7;
  resize: none;
  border: none;
  background: transparent;
  color: var(--fg);
}

.reader-toolbar {
  padding: 4px var(--panel-pad);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.reader-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

/* FILE */
#page-files .files-inner {
  display: flex;
  flex: 1;
  overflow: hidden;
}
#page-files .file-list-pane {
  width: min(260px, 45%);
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#page-files .file-preview-pane {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Resizable split handle (desktop) */
.pane-resizer {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--border);
  transition: background 0.15s;
}
.pane-resizer:hover,
.pane-resizer.dragging { background: var(--fg); }

@container shell (max-width: 480px) {
  #page-files .file-list-pane { width: 100%; border-right: none; }
  #page-files .file-preview-pane { display: none; }
  #page-files.file-open .file-list-pane { display: none; }
  #page-files.file-open .file-preview-pane { display: flex; }
  .pane-resizer { display: none; }
}

.upload-area {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--panel-pad);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.file-preview-card {
  padding: var(--panel-pad);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.file-preview-card .fp-meta { color: var(--dim); font-size: var(--fs-sm); flex-shrink: 0; }
.file-preview-card .fp-glyph {
  font-size: 2em;
  text-align: center;
  padding: 1rem 0;
  color: var(--dim);
  margin: auto;
}
.file-preview-card .fp-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Toolbar at top of file preview */
.fp-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.fp-name {
  flex: 1 1 100%;
  font-weight: bold;
  color: var(--bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Preview content area */
.fp-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fp-html-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  max-width: 32ch;
}
.fp-frame {
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
  background: #fff;
}
.fp-text {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0.5rem;
  box-sizing: border-box;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-sm);
  text-align: left;
  align-self: flex-start;
}
.fp-docx {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0.5rem;
  box-sizing: border-box;
}
.fp-pdf {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0;
  box-sizing: border-box;
}
.fp-pdf-page {
  max-width: 100%;
  box-shadow: 0 0 0 1px var(--border);
}
.preview-video { max-width: 100%; max-height: 100%; }

.preview-img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }

/* Upload progress */
.upload-bar {
  width: 100%;
  height: 4px;
  background: var(--border);
  position: relative;
}
.upload-bar-fill {
  height: 100%;
  background: var(--fg);
  transition: width 0.1s;
}

/* CONF */
#page-conf .conf-scroll { flex: 1; overflow-y: auto; }

.theme-swatch {
  display: inline-block;
  width: 18px; height: 18px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
  vertical-align: middle;
}
.theme-swatch.selected { border-color: var(--fg); border-width: 2px; }
.theme-picker { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.kbd-map {
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 2;
}

.changelog-details {
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.6;
}
.kbd-map kbd {
  border: 1px solid var(--border);
  padding: 0 4px;
  font-family: var(--font);
  color: var(--fg);
}

/* Task expand detail */
.task-detail {
  padding: 4px var(--panel-pad) 6px calc(var(--panel-pad) + 20px);
  font-size: var(--fs-sm);
  color: var(--dim);
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
.task-detail .td-notes {
  color: var(--fg);
  margin-bottom: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}
.task-detail .td-title {
  color: var(--bright);
  font-weight: bold;
  white-space: normal;
  word-break: break-word;
  margin-bottom: 2px;
}
.task-detail .td-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* Expand/collapse indicator */
.expand-arrow {
  display: inline-block;
  transition: transform 0.15s;
}
.expand-arrow.open {
  transform: rotate(180deg);
}

/* NOTES panel — constrain long content to a scroll area */
#panel-notes .task-detail .td-notes {
  max-height: 160px;
  overflow-y: auto;
}

/* Mini calendar — STAT tasks panel */
.mini-cal { margin-bottom: 1.1rem; }
.mini-cal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--dim);
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: 0.08em;
}
.mc-nav {
  padding: 0 4px;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--dim);
  font-family: var(--font);
  font-size: var(--fs-sm);
  transition: var(--transition-color);
}
.mc-nav:hover { color: var(--bright); }
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: var(--fs-sm);
}
.mini-cal-grid .mc-cell {
  text-align: center;
  padding: 1px 0;
  cursor: pointer;
  min-height: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--transition-color);
}
.mini-cal-grid .mc-cell:hover:not(.mc-hdr) { color: var(--bright); }
.mini-cal-grid .mc-hdr { color: var(--dim); cursor: default; font-weight: bold; }
.mini-cal-grid .mc-cell.today { background: var(--fg); color: var(--bg); }
.mini-cal-grid .mc-cell.selected:not(.today) { outline: 1px solid var(--fg); }
.mini-cal-grid .mc-cell.other-month { cursor: default; }
.mc-dots { height: 4px; display: flex; gap: 2px; justify-content: center; align-items: center; }
.mc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); display: inline-block; }
.mc-dot.task { background: var(--dim); }
.mini-cal-grid .mc-cell.today .mc-dot { background: var(--bg); }

/* STAT quick-access buttons */
.qa-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0.5rem;
}

/* EKTA embedded panel */
#panel-ekta .panel-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
#ekta-log {
  flex: 1;
  overflow-y: auto;
  padding: 6px var(--panel-pad);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.ekta-msg-user { margin-bottom: 3px; }
.ekta-msg-ai { margin-bottom: 3px; color: var(--dim); }
.ekta-input-row {
  display: flex;
  gap: 4px;
  padding: 4px var(--panel-pad);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ekta-input-row input {
  flex: 1;
  border: 1px solid var(--border);
  padding: 2px 4px;
  font-size: var(--fs-sm);
}
.ekta-input-row button {
  flex-shrink: 0;
  padding: 2px 6px;
}

/* Vertical dashboard — condensed weather + finance snapshot under the clock */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
}
.dash-progress-strip {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.dfin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: var(--fs-sm);
  padding: 1px 0;
  min-width: 0;
}
.dfin-label { flex: 0 0 auto; letter-spacing: 0.03em; }
.dfin-value {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--dim);
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  padding: 1px 0;
  min-width: 0;
}
.wx-label { flex: 0 0 auto; min-width: 3ch; letter-spacing: 0.03em; }
.wx-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--dim);
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Guest banner */
#guest-banner {
  background: var(--fg);
  color: var(--bg);
  text-align: center;
  padding: 2px 8px;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

/* PROD — undated tasks tray */
.prod-undated {
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* FINC — summary panel */
.finc-summary { margin-bottom: 0.75rem; flex-shrink: 0; }
.finc-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.35rem;
}
.finc-cat-total {
  border-top: 1px solid var(--border);
  padding-top: 0.35rem;
  margin-top: 0.2rem;
}

/* FINC — paycheck detail allocation breakdown (% of gross) */
.finc-alloc { margin: 0.2rem 0; }
.finc-alloc-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.finc-alloc-label { flex: 1; font-size: var(--fs-sm); }
.finc-alloc-amt {
  flex: 0 0 10ch;
  text-align: right;
  font-size: var(--fs-sm);
}
.finc-alloc-pct {
  flex: 0 0 5ch;
  text-align: right;
  font-size: var(--fs-sm);
}
/* Indented sub-line for itemized debt/bills entries */
.finc-alloc-sub .finc-alloc-label { padding-left: 1.2ch; opacity: 0.85; }
.finc-alloc-sub .finc-alloc-label::before { content: "└ "; opacity: 0.6; }

/* FINC — monthly budget panel */
.finc-budget { flex-shrink: 0; }
/* Every panel on the FINC summary page gets the same gap below it — OVERVIEW
   used to be the only one with breathing room (its own one-off margin);
   PLAN VS ACTUAL, BILLS/DEBT/GOALS, WHERE MONEY WENT and PAYCHECKS were
   butted straight against each other with shared borders instead. */
#page-finc .scroll-area > .panel { margin-bottom: 0.75rem; }
.finc-month-nav { display: flex; align-items: center; gap: 6px; }
.finc-month-btn { padding: 1px 7px; line-height: 1; }
.finc-month-label { font-size: var(--fs-sm); min-width: 9ch; text-align: center; }
/* FINC — top action bar, styled like the bottom main nav (equal-width,
   shared borders, full width) so it reads as one clean row. */
.finc-topnav {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.finc-topnav-btn {
  flex: 1;
  min-width: 0;
  padding: 6px 2px;
  text-align: center;
  font-size: var(--fs-sm);
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.03em;
  transition: var(--transition-color);
}
.finc-topnav-btn:last-child { border-right: none; }
.finc-topnav-btn:hover { color: var(--bright); }
.finc-topnav-btn:focus-visible, .finc-topnav-btn:active { background: var(--fg); color: var(--bg); }

/* FINC — paycheck AUTO/MANUAL mode toggle */
.finc-mode-toggle {
  display: flex;
  margin: 0.4rem 0 0.2rem;
  border: 1px solid var(--border);
}
.finc-mode-btn {
  flex: 1;
  padding: 4px 2px;
  font-size: var(--fs-sm);
  border: none;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: var(--transition-color);
}
.finc-mode-btn:last-child { border-right: none; }
.finc-mode-btn.active { background: var(--fg); color: var(--bg); font-weight: bold; }
.finc-alloc-ro { text-align: right; }

/* FINC — budget modal "left to allocate" (sticky so it stays visible) */
.finc-left-alloc {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 8px;
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  text-align: center;
}

/* FINC — monthly projection status */
.finc-proj-status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  gap: 8px;
}
.finc-proj-sub { font-size: var(--fs-sm); margin-bottom: 0.4rem; }
.finc-ontrack { color: var(--bright); font-weight: bold; white-space: nowrap; }
.finc-behind { color: var(--fg); font-weight: bold; white-space: nowrap; }

.finc-budget-cat { font-size: var(--fs-sm); margin: 0.3rem 0 0.15rem; letter-spacing: 0.04em; }
/* A second data group (BALANCES) within the same OVERVIEW panel as IN/OUT —
   a plain top-margin read as too close to a continuation of the list above,
   so it gets the same "new section" treatment (rule + more air) that
   distinguishes any other section boundary in FINC. */
.finc-budget-cat-divider { margin-top: 1.1rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.finc-budget-head { margin-top: 0.25rem; }
.finc-budget-head .finc-budget-label, .finc-budget-head .finc-alloc-label { font-weight: bold; }

/* FINC — budget modal 3-col item rows (label / amount / destination) */
.finc-item-row-3 { display: flex; gap: 6px; align-items: center; }
.finc-item-row-3 .finc-item-label { flex: 1 1 auto; min-width: 0; }
.finc-item-row-3 .finc-item-amt { flex: 0 0 7ch; }
.finc-item-dest { flex: 0 0 11ch; min-width: 0; font-size: var(--fs-sm); }

/* FINC — paycheck allocation editor rows */
.finc-alloc-edit { display: flex; gap: 6px; align-items: center; margin-bottom: 0.25rem; }
.finc-alloc-edit-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.finc-alloc-edit-amt { flex: 0 0 8ch; }
.finc-alloc-edit-pct { flex: 0 0 4ch; text-align: right; font-size: var(--fs-sm); }
.finc-alloc-edit-dest { flex: 0 0 10ch; text-align: right; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* FINC — visuals: normal, consistent spacing between the pie/Sankey/bars
   blocks — a forced full-height space-between with only two short blocks
   left one giant, unnatural gap in the middle instead of looking filled.
   Same divider treatment as every other section boundary in FINC
   (.finc-budget-cat-divider) for one consistent look across the app. */
.finc-visuals-block + .finc-visuals-block { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }

/* FINC — tap-to-expand info tooltip: an overlay popover (fixed position,
   black bg, bordered) anchored to the tapped ⓘ/!, matching the "+" quick-add
   dropdown's look — not inline content, so opening it never shifts anything
   else on the page. See openFincTip()/bindFincTips() in finance.js. */
.finc-tip-btn {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0 4px;
  color: var(--dim);
  font-size: var(--fs-sm);
  line-height: 1;
  vertical-align: middle;
}
.finc-tip-btn:hover, .finc-tip-btn:focus-visible { color: var(--bright); }
/* Reuses the same bordered "!" look as .finc-auto-mark so an attention
   marker reads the same everywhere in the app. */
.finc-tip-flag {
  min-width: 1.1em;
  text-align: center;
  font-weight: bold;
  color: var(--bright);
  border: 1px solid var(--bright);
  border-radius: 2px;
  line-height: 1.1;
  padding: 0 2px;
}
.finc-tip-popover {
  position: fixed;
  z-index: 950;
  max-width: min(280px, 80vw);
  background: var(--bg);
  border: 1px solid var(--fg);
  padding: 8px 10px;
  font-size: var(--fs-sm);
}
.finc-tip-body { color: var(--fg); }

/* FINC — visuals: legend */
.finc-legend { margin-top: 0.4rem; }
.finc-legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0.2rem; font-size: var(--fs-sm); }
.finc-legend-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; }
.finc-legend-label { flex: 1 1 auto; }
.finc-legend-val { flex: 0 0 auto; white-space: nowrap; }

/* FINC — visuals: vault balances bar chart */
.finc-vaultbars { margin-top: 0.3rem; }
.finc-vaultbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0.35rem; font-size: var(--fs-sm); }
.finc-vaultbar-label { flex: 0 0 10ch; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finc-vaultbar-track { flex: 1 1 auto; height: 10px; background: var(--border); border-radius: 2px; overflow: hidden; }
.finc-vaultbar-fill { display: block; height: 100%; }
.finc-vaultbar-amt { flex: 0 0 9ch; text-align: right; }

/* FINC — clickable chart segments (pie slice/legend row, Sankey node) that
   drill into the transactions behind them */
.finc-drillable { cursor: pointer; }
.finc-pie-slice { transition: opacity 0.1s; }
.finc-pie-slice:hover { opacity: 0.8; }
.finc-legend-row.finc-drillable:hover .finc-legend-label,
.finc-legend-row.finc-drillable:hover .finc-legend-val { color: var(--bright); }
g.finc-drillable:hover rect { opacity: 0.8; }
g.finc-drillable:hover text.finc-sankey-label { fill: var(--bright); }

/* FINC — transaction list filter chip (set by a chart drill-down click) */
.finc-tx-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  margin: 0.4rem 0 0.1rem;
  padding: 4px 6px;
  border: 1px solid var(--border);
}
.finc-tx-filter b { color: var(--bright); }
.finc-tx-filter-clear { margin-left: auto; padding: 1px 6px; font-size: var(--fs-sm); }
.finc-budget-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 0.3rem;
}
/* One vault's row + its category sub-rows read as a single group; a bit of
   extra air between one vault's group and the next keeps them from reading
   as one continuous list — but no rule line here, unlike other dividers in
   FINC: IN/OUT is one continuous ledger (Bare into Flex into ...), not
   separate sections the way OVERVIEW/BALANCES or distinct panels are. */
.finc-budget-block + .finc-budget-block { margin-top: 0.6rem; }
.finc-budget-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-sm);
}
.finc-budget-amt {
  flex: 0 0 auto;
  text-align: right;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
/* Over-target/over-limit marker on a VAULTS/item row label — plain "!", no
   border/box (per explicit request: visible but not shouting), tappable for
   the actual overspend figure via the shared .finc-tip-btn popover. */
.finc-over-flag {
  color: var(--bright);
  font-weight: bold;
  margin-left: 0; /* it's always the leading element in the label, not trailing text */
}
.finc-budget-gap {
  /* Only ever holds a short fixed tag ("spending"/"paid"/a percent) — never
     a variable-length figure like a balance, which belongs on its own
     .finc-proj-sub line instead. min-width:0 + ellipsis is a guardrail: if
     something long ever does land here, it truncates instead of silently
     widening past 8ch and shoving every row's amount out of alignment. */
  flex: 0 0 8ch;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Itemized line (PLAN → ITEMS) shown under its parent vault row — same
   indent + "└" convention as .finc-alloc-sub, so itemization reads as a
   consistent sub-entry pattern everywhere it shows up. */
.finc-budget-row.finc-budget-sub { margin: -0.05rem 0 0.15rem; }
.finc-budget-row.finc-budget-sub .finc-budget-label { padding-left: 1.2ch; opacity: 0.8; }
.finc-budget-row.finc-budget-sub .finc-budget-label::before { content: "└ "; opacity: 0.55; }
.finc-budget-row.finc-budget-sub .finc-budget-amt { font-size: var(--fs-sm); opacity: 0.8; }

.finc-items-hdr-meta { display: flex; align-items: baseline; gap: 10px; }
.finc-budget-left { font-size: var(--fs-sm); }
.finc-fixed-left {
  text-align: right;
  font-size: var(--fs-sm);
  margin: -0.3rem 0 0.5rem;
}

/* FINC — modal itemized fixed inputs (debt/bills line items) */
.finc-items-block { margin-bottom: 0.6rem; }
.finc-items-hdr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  margin-bottom: 0.25rem;
}
.finc-items-list { display: flex; flex-direction: column; gap: 4px; }
.finc-item-row { display: flex; gap: 6px; align-items: center; }
.finc-item-label { flex: 1; min-width: 0; }
.finc-item-amt { flex: 0 0 9ch; }
.finc-item-del {
  flex: 0 0 auto;
  padding: 2px 8px;
  line-height: 1;
}
.finc-item-add {
  align-self: flex-start;
  padding: 2px 8px;
  font-size: var(--fs-sm);
}

.finc-trend-toggle-btn {
  padding: 2px 8px;
  line-height: 1;
}

/* FINC — auto/unconfirmed marker */
.finc-auto-mark {
  display: inline-block;
  min-width: 1.1em;
  text-align: center;
  font-weight: bold;
  color: var(--bright);
  border: 1px solid var(--bright);
  border-radius: 2px;
  line-height: 1.1;
  padding: 0 2px;
}

/* FINC — compact attention marker + expand toggle */
.finc-hdr-actions { display: inline-flex; align-items: center; gap: 6px; }

/* FINC — collapsible section headers (the "menu" rows on the landing page):
   the whole header is tappable, with a trailing arrow that flips on expand. */
.panel-header[role="button"] { cursor: pointer; }
.panel-header[role="button"]:hover { background: rgba(var(--fg-rgb, 242,242,242), 0.07); }

/* FINC — actionable alert banners (Move Paycheck / Statement attention) */
.finc-alert { border-color: var(--bright); }
.finc-alert > .panel-header { color: var(--bright); }

/* FINC — slim one-line status hints, no boxed panel since there's nothing to act on */
.finc-hint {
  font-size: var(--fs-sm);
  text-align: center;
  margin: 0.3rem 0;
}
.finc-hint-del {
  margin-left: 6px;
  padding: 0 6px;
  line-height: 1.2;
  font-size: var(--fs-sm);
}

/* FINC — Sankey (VISUALS): paycheck flow */
.finc-sankey { margin-top: 0.2rem; }
.finc-sankey text.finc-sankey-label {
  font-family: var(--font);
  font-size: 9px;
  fill: var(--fg);
  dominant-baseline: middle;
}
.finc-sankey text.finc-sankey-label.dim { fill: var(--dim); }
.finc-sankey text.finc-sankey-label tspan.dim { fill: var(--dim); }

/* FINC — vault reorder (cascade fill order): press-and-hold drag instead of
   a ▲▼ button pair — one handle instead of two cluttered buttons per row. */
.finc-vault-block { position: relative; }
.finc-vault-block.finc-dragging {
  z-index: 5;
  opacity: 0.7;
  background: rgba(var(--fg-rgb, 242,242,242), 0.08);
}
.finc-drag-handle {
  flex: 0 0 auto;
  padding: 0 8px 0 0;
  font-size: 1.05em;
  color: var(--dim);
  cursor: grab;
  touch-action: none; /* otherwise a vertical drag scrolls the modal instead of reordering */
  user-select: none;
}
.finc-dragging .finc-drag-handle { cursor: grabbing; color: var(--bright); }

/* FINC — obligations (bills/debt) vault toggle */
.finc-oblig-btn {
  flex: 0 0 auto;
  padding: 2px 8px;
  line-height: 1.2;
  font-weight: bold;
  opacity: 0.45;
}
.finc-oblig-btn.active {
  opacity: 1;
  color: var(--bright);
  border-color: var(--bright);
}

/* FINC — PLAN vault "ITEMS" expand toggle + nested groups/items editor */
.finc-expand-btn {
  padding: 1px 6px;
  font-size: var(--fs-sm);
  line-height: 1.2;
}
.finc-groups-panel {
  margin: 0.1rem 0 0.5rem 1rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
}
.finc-group-block { margin-bottom: 0.5rem; }
.finc-group-hdr { display: flex; gap: 6px; align-items: center; margin-bottom: 0.25rem; }
.finc-group-name { font-size: var(--fs-sm); }
.finc-item-row2 { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.finc-item-row2 .finc-item-label { flex: 1 1 auto; min-width: 0; }
.finc-item-row2 .finc-item-amt { flex: 0 0 7ch; }
.finc-item-sub-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; flex-wrap: wrap; }
/* explicit width, not just flex-basis: the app-wide ".modal select { width:100% }"
   rule outranks a bare `flex: 0 0 auto` (auto basis falls back to `width`). */
.finc-item-freq { flex: 0 0 9ch; width: 9ch; font-size: var(--fs-sm); min-width: 0; }
.finc-item-due { flex: 0 0 7ch; width: 7ch; font-size: var(--fs-sm); min-width: 0; }
.finc-item-match { flex: 1 1 12ch; min-width: 0; font-size: var(--fs-sm); }
.finc-item-add-sm { align-self: flex-start; padding: 1px 6px; font-size: var(--fs-sm); margin-bottom: 0.3rem; }
.finc-goal-btn {
  flex: 0 0 auto;
  padding: 2px 6px;
  line-height: 1.2;
  font-size: var(--fs-sm);
  opacity: 0.45;
}
.finc-goal-btn.active { opacity: 1; color: var(--bright); border-color: var(--bright); }
.finc-goal-fields { display: flex; gap: 6px; align-items: center; margin: 0 0 0.4rem; flex-wrap: wrap; }
.finc-goal-fields select { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); }
.finc-goal-fields .finc-item-amt { flex: 0 0 8ch; }
.finc-goal-sel { font-size: var(--fs-sm); }

/* FINC — goal/debt progress bar (VISUALS) */
.finc-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.2rem 0 0.1rem;
}
.finc-progress-fill {
  display: block;
  height: 100%;
  background: var(--bright);
  border-radius: 3px;
}

/* FINC — VISUALS: bills/debt/goals actual-vs-planned rows */
.finc-bill-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: var(--fs-sm); margin-top: 0.3rem; }
.finc-bill-name { flex: 1 1 auto; min-width: 0; }
.finc-bill-amt { flex: 0 0 auto; white-space: nowrap; }
/* Each item (row + its goal/progress bar) is its own group — extra air
   between items so e.g. Parent Debt and Emergency Fund read as clearly
   separate entries, not one run-on block. */
.finc-bill-block + .finc-bill-block { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--border); }

/* FINC — VISUALS: 50/30/20 plan-vs-actual stacked bars */
.finc-523-row { display: flex; gap: 8px; align-items: center; }
/* Plan and Actual are two distinct data groups — separate them clearly
   instead of letting Actual's bar butt right up against Plan's caption. */
.finc-523-group + .finc-523-group { margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
.finc-523-label { flex: 0 0 4.5ch; font-size: var(--fs-sm); }
.finc-523-bar {
  flex: 1 1 auto;
  margin-right: 12px;
  display: flex;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}
.finc-523-seg { display: block; height: 100%; }

/* FINC — PLAN category → vault rows */
.finc-cat-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.finc-cat-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.finc-cat-vault { flex: 0 0 10ch; min-width: 0; font-size: var(--fs-sm); }
/* Wide enough for a real typed value ("1000.00"), not just the shortened
   "limit" placeholder — the old 7ch column clipped the placeholder to
   "no li" and would've clipped entered figures too. */
.finc-cat-limit { flex: 0 0 8ch; width: 8ch; min-width: 0; font-size: var(--fs-sm); }
.finc-cat-row .finc-item-label { flex: 1 1 0; min-width: 0; }
/* Old→new vault alias select — same "no width, no basis" trap as
   .finc-item-freq (see comment above): unconstrained, ".modal select
   { width:100% }" swallows the row and truncates the name column next to
   it down to a few characters. */
.finc-alias-sel { flex: 0 0 13ch; width: 13ch; min-width: 0; font-size: var(--fs-sm); }

/* FINC — vault-match warnings */
.finc-warn {
  font-size: var(--fs-sm);
  color: var(--fg);
  margin-bottom: 0.25rem;
  padding-left: 0.9rem;
  text-indent: -0.9rem;
}
.finc-warn::before { content: '⚠ '; color: var(--bright); }

/* FINC — spending transactions + category relabeling */
.finc-tx-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.25rem;
  font-size: var(--fs-sm);
}
.finc-tx-cat { flex: 0 0 12ch; min-width: 0; font-size: var(--fs-sm); }
.finc-tx-cat.finc-tx-manual { border-color: var(--bright); color: var(--bright); }

/* FINC — transaction row: collapsed to a single item-row (date/name/amount,
   same look as every other list in the app); tapping it reveals the
   task-detail below with editable name/amount and the category ▸ vault
   cascade — nothing else is on screen until you ask for it. */
.finc-tx-l2 { display: flex; align-items: center; gap: 6px; margin-top: 0.3rem; }
.finc-tx-l2 .finc-tx-cat { flex: 1 1 0; }
.finc-tx-arrow { flex: 0 0 auto; }
.finc-tx-edit-row { display: flex; align-items: center; gap: 8px; margin-bottom: 0.35rem; }
/* Wide enough for "AMOUNT $" (the longest label here) to not wrap. */
.finc-tx-edit-label { flex: 0 0 9ch; font-size: var(--fs-sm); }
.finc-tx-edit-row .inline-input { flex: 1 1 auto; color: var(--fg); }
/* Collapsed row: date leads (grey, fixed-width), replacing the generic ►
   cursor other list rows use — it doubles as the "this row expands" cue
   while giving the date its own reliable slot instead of sharing the
   right-aligned meta column with the amount. */
.finc-tx-row-date { flex: 0 0 6ch; font-size: var(--fs-sm); }

/* FINC — reconcile diff modal (statement vs prior/Plaid data) */
.finc-rec-body { max-height: 46vh; overflow-y: auto; margin: 0.3rem 0 0.5rem; }
.finc-rec-month { margin-bottom: 0.5rem; }
.finc-rec-hdr { font-size: var(--fs-sm); margin: 0.35rem 0 0.15rem; letter-spacing: 0.04em; }
.finc-rec-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  margin-bottom: 0.2rem;
  cursor: pointer;
}
.finc-rec-row input { flex: 0 0 auto; }
.finc-rec-date { flex: 0 0 6ch; white-space: nowrap; }
.finc-rec-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finc-rec-amt { flex: 0 0 auto; text-align: right; white-space: nowrap; }

/* FINC — modal % total indicator */
.finc-pct-total {
  text-align: right;
  font-size: var(--fs-sm);
  margin: -0.3rem 0 0.6rem;
}
.finc-pct-total.finc-pct-warn {
  color: var(--bright);
  font-weight: bold;
}

/* FINC — modal linked sliders */
.finc-slider-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.finc-slider-field label { flex: 0 0 110px; margin-bottom: 0; }
.finc-slider-val { font-size: var(--fs-sm); }

/* Drag handle */
.drag-handle {
  cursor: grab;
  color: var(--border);
  padding: 0 4px;
  flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }