/* GlidePath — standalone styles
   Aesthetic: minimal, utilitarian, warm paper light theme with optional dark mode. */

:root {
  --bg: #fafaf7;
  --bg-secondary: #f1efea;
  --bg-tertiary: #e8e5dd;
  --border: #d8d4ca;
  --border-strong: #c4bfb1;
  --text: #1a1a17;
  --text-secondary: #5a564e;
  --text-tertiary: #8a857a;
  --accent: #1d6e56;
  --accent-light: #4e9b80;
  --success: #1d6e56;
  --warning: #b8830f;
  --danger: #b04030;
  --info: #2c5f8a;
  --super: #6e4ba8;
  --super-bg: rgba(110, 75, 168, 0.08);
  --super-border: rgba(110, 75, 168, 0.25);
  --radius: 6px;
  --radius-lg: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311;
    --bg-secondary: #1f1f1c;
    --bg-tertiary: #2a2a26;
    --border: #353530;
    --border-strong: #45453f;
    --text: #f0eee8;
    --text-secondary: #aaa59a;
    --text-tertiary: #7a756a;
    --accent: #4e9b80;
    --accent-light: #6fb89c;
    --success: #4e9b80;
    --warning: #d9a23a;
    --danger: #d96850;
    --info: #5b9bc8;
    --super: #a98ad6;
    --super-bg: rgba(169, 138, 214, 0.10);
    --super-border: rgba(169, 138, 214, 0.30);
  }
}

* { box-sizing: border-box; }

body {
  font-family: 'Iowan Old Style', 'Charter', 'Georgia', serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.app-header h1 {
  font-size: 28px;
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.app-sub {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-style: italic;
  max-width: 640px;
}

.privacy-note {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 640px;
}
.privacy-note strong { color: var(--text-primary); }
.privacy-note-fine {
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-tertiary);
  max-width: 640px;
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.header-btn-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s ease;
}

.ghost-btn:not(:disabled):hover { background: var(--bg-secondary); border-color: var(--accent); }
.ghost-btn.danger:not(:disabled):hover { border-color: var(--danger); color: var(--danger); }
.ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* <a> styled as a ghost button (e.g. the Feedback link). */
a.ghost-btn { display: inline-flex; align-items: center; text-decoration: none; }

.save-status {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  min-width: 80px;
}

.save-status.saved { color: var(--success); }

/* Donation call-to-action — sits below the config-button row in the header's
   right column, sized to its content. Buy Me a Coffee brand yellow so it reads
   instantly as a support link; theme-independent (filled button). */
.coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: var(--radius);
  background: #ffdd00;
  border: 1px solid #e3c200;
  color: #1a1a1a;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.coffee-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34);
}
.coffee-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }
.coffee-icon { flex: 0 0 auto; }
.coffee-text { display: flex; flex-direction: column; line-height: 1.25; }
.coffee-text-main { font-size: 15px; font-weight: 700; }
.coffee-text-sub { font-size: 11px; font-weight: 500; opacity: 0.72; }

/* Control sections */
.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ============== Sidebar layout ==============
   Global config lives in a sticky left sidebar so the main area (scenario tabs,
   bucket assets, loans, chart, tables) is always editable WHILE the chart is
   visible. The sidebar scrolls internally; main content scrolls page-wise. */
.app-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  transition: grid-template-columns 200ms ease;
}
/* Advisor mode: widen the sidebar so the chat has more room. Calc remains
   visible to the right but compressed. */
.app-grid.advisor-mode { grid-template-columns: 600px minmax(0, 1fr); }
.side-controls {
  position: sticky;
  /* Offset by approx. sticky scenario-bar height so sidebar pins BELOW it. */
  top: 56px;
  max-height: calc(100vh - 64px);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: width 200ms ease;
}
.side-controls-inner {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 10px 10px 60px;
  scrollbar-width: thin;
}

/* ============== Sidebar floating nav ==============
   Sticks to top of the sidebar's internal scroll. Section links scroll to
   their target; AI Advisor button switches the sidebar body into chat view. */
.side-controls-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  margin: -10px -10px 10px;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.side-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.side-nav-link:hover {
  color: var(--text-primary, #fff);
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
}
.side-nav-link.active {
  color: var(--text-primary, #fff);
  background: var(--bg-tertiary, rgba(255,255,255,0.10));
  border-color: var(--border-strong, rgba(255,255,255,0.16));
}
.side-nav-advisor {
  margin-left: auto;
  color: var(--accent, #1d6e56);
  border-color: var(--accent, rgba(78,161,255,0.35));
}
.side-nav-advisor:hover {
  background: rgba(78,161,255,0.10);
  color: var(--accent, #1d6e56);
}
.side-nav-advisor.active {
  background: var(--accent, #1d6e56);
  color: #fff;
  border-color: var(--accent, #1d6e56);
}

/* Smooth scroll inside the sidebar; offset target headings so the sticky
   nav doesn't cover them. */
.side-controls-inner { scroll-behavior: smooth; }
.side-controls-config > section { scroll-margin-top: 56px; }

/* ============== Sidebar view-mode switch ==============
   In advisor mode, hide config sections and show the chat container. The
   chat itself manages its own internal scroll. */
.side-controls.advisor-mode .side-controls-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 10px 0;
}
.side-controls.advisor-mode .side-controls-nav {
  margin: -10px -10px 0;
  flex: 0 0 auto;
}
.side-controls.advisor-mode .side-controls-config { display: none; }
.side-controls.advisor-mode .side-controls-chat {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -10px;
}

/* AI Config test-result indicator (green/red dot + message) */
.ai-test-result {
  font-size: 11px;
  color: var(--text-secondary);
  margin-left: 8px;
}
.ai-test-result.ok { color: var(--accent, #1d6e56); }
.ai-test-result.err { color: #d9534f; }
/* In sidebar mode, control sections stack single-column. Each section gets
   a subtle background pill so the boundaries are obvious and related rows
   (like the downturn block + its catchup option) read as grouped. */
.side-controls-inner .controls {
  grid-template-columns: 1fr;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 0 0 10px;
}
.side-controls-inner .controls:last-child { margin-bottom: 0; }
.side-controls-inner .controls.super-controls {
  background: var(--super-bg);
  border-color: var(--super-border);
}
/* The downturn catchup row is logically a sub-option of the downturn block.
   Indent it slightly and tie it to the section header with a left rule so it
   reads as "part of the downturn section" rather than a standalone item. */
.side-controls-inner .downturn-catchup-row {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border-strong, rgba(255,255,255,0.10));
}

/* Inside the sidebar, force the downturn-event-row to stack each input on its
   own line — the 6-column horizontal grid only works in a wide viewport,
   inside ~420px it collapses and labels overlap the sliders. */
.side-controls-inner .downturn-event-row {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 12px;
}
.side-controls-inner .downturn-event-row .downturn-event-label {
  margin-bottom: 2px;
}
.side-controls-inner .downturn-event-row .input-group {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 8px;
}
.side-controls-inner .downturn-event-row .input-group label { min-width: 0; }
.side-controls-inner .downturn-event-row input[type="number"] { width: 100%; }
.side-controls-inner .downturn-event-row .rm-btn,
.side-controls-inner .downturn-event-row > button {
  justify-self: end;
  margin-top: 4px;
}

/* Inside the sidebar, most `.row` items are label : value pairs. Force them
   to stack their label above the input so nothing collides. Compact values
   (toggles, narrow numbers) stay inline. */
.side-controls-inner .controls .row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}
.side-controls-inner .controls .row > .lbl.tiny {
  grid-column: 1 / -1;
  font-size: 10px;
  margin-top: -2px;
}
.side-controls-inner .controls .row input[type="range"] { width: 100%; min-width: 0; }
.side-controls-inner .controls .row input[type="number"] { max-width: 100px; }
.side-controls-inner .controls .row input[type="text"] { max-width: 140px; }
.side-controls-inner .help { font-size: 11px; line-height: 1.4; }

/* Collapsed state — single column, full width to the main content. */
.app-grid.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); gap: 0; }
.app-grid.sidebar-collapsed .side-controls { display: none; }

.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  align-self: center;
  margin: 0 4px 0 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.sidebar-toggle-btn:hover { background: var(--bg-tertiary, rgba(255,255,255,0.06)); color: var(--text-primary, #fff); }

@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; }
  .side-controls {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 340px;
    transform: translateX(-100%);
    z-index: 200;
    border-radius: 0;
    box-shadow: 4px 0 16px rgba(0,0,0,0.4);
  }
  .side-controls.is-open { transform: translateX(0); }
  .app-grid.sidebar-collapsed .side-controls { display: block; }
}

.controls.super-controls {
  background: var(--super-bg);
  border-color: var(--super-border);
}

.control-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lbl { font-size: 13px; color: var(--text-secondary); }
.lbl.small { min-width: 90px; font-size: 12px; }
.lbl.tiny { font-size: 11px; }

.val {
  font-weight: 600;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.val.small { font-size: 13px; min-width: 24px; text-align: right; margin-left: 0; }

.toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.help {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  font-style: italic;
}

.help.inline { margin: 0; flex: 1; }
.help.indent { margin-left: 102px; }

input[type="text"],
input[type="number"],
select {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

input[type="number"].narrow-input { width: 90px; flex: 0 0 auto; }
input[type="number"].flex-input { flex: 1; width: auto; }
select { width: auto; min-width: 100px; }

input:focus, select:focus {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

input[type="range"] {
  flex: 1;
  padding: 0;
  background: transparent;
  border: none;
  width: auto;
  cursor: pointer;
}

input[type="checkbox"] { width: auto; cursor: pointer; }
input:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============== Asset groups (View By: Region / Style / Sector) ==============
   Wraps the cards belonging to one classification value in a single container
   with a header showing per-group summary stats. Left border picks up the
   group's chart colour (set inline) so the visual link to the chart legend
   is obvious. Drift indicator after current% turns red/orange when |drift| ≥ 2pp. */
.asset-group {
  margin-bottom: 12px;
  padding: 4px 8px 6px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);  /* overridden inline with group colour */
  border-radius: var(--radius-md);
}
@media (prefers-color-scheme: dark) {
  .asset-group { background: rgba(255, 255, 255, 0.02); }
}
.asset-group > .asset-details { margin-bottom: 6px; }
.asset-group > .asset-details:last-child { margin-bottom: 0; }
.asset-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 8px;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 6px;
}
.group-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.group-label {
  font-weight: 600;
  color: var(--text-primary);
}
.group-stats {
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 11.5px;
}
.group-drift {
  font-weight: 500;
  margin-left: 2px;
}
.group-drift.over  { color: var(--danger, #d9534f); }
.group-drift.under { color: var(--info, #d97706); }

/* ============== Asset collapsible (details + summary) ==============
   Each asset is rendered as a <details> wrapping a <summary> (the one-line
   digest) and the existing .asset card (the full editor). Closed by default
   so a bucket with 10 assets fits on a screen; click any row to expand. The
   summary is read-only — edits happen inside the card body and the summary
   text refreshes only on the next renderAssets() (View By change, asset
   add/remove, account change). Acceptable staleness; matches the group-
   summary behaviour. */
.asset-details {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  overflow: hidden;
}
.asset-details.is-super {
  border-color: var(--super-border);
  background: var(--super-bg);
}
/* Hide the default disclosure marker; we draw our own caret. */
.asset-details > summary { list-style: none; }
.asset-details > summary::-webkit-details-marker { display: none; }
.asset-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  min-height: 32px;
}
.asset-summary::before {
  content: '▸';
  display: inline-block;
  width: 10px;
  font-size: 10px;
  color: var(--text-tertiary);
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}
.asset-details[open] > .asset-summary::before { transform: rotate(90deg); }
.asset-summary:hover { background: rgba(0, 0, 0, 0.04); }
@media (prefers-color-scheme: dark) {
  .asset-summary:hover { background: rgba(255, 255, 255, 0.04); }
}
.asset-summary-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.10);
}
.asset-summary-name {
  font-weight: 600;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.asset-summary-cls {
  color: var(--text-secondary);
  font-size: 11.5px;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asset-summary-nums {
  display: flex;
  gap: 10px;
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.asset-summary-nums span { white-space: nowrap; }
.asset-summary-flags {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}
.flag-pill {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.flag-pill.flag-buffer     { color: var(--info, #d97706); border-color: rgba(217, 119, 6, 0.30); }
.flag-pill.flag-illiquid   { color: var(--accent, #1d6e56); border-color: rgba(29, 110, 86, 0.30); }
.flag-pill.flag-hold-losses{ color: var(--text-secondary); }

/* Inside an open details wrapper, the .asset card no longer needs its own
   outer border / radius / background — the wrapper provides those. Keep the
   internal padding/structure intact. */
.asset-details[open] > .asset {
  border: none;
  border-top: 1px dashed var(--border);
  border-radius: 0;
  background: transparent;
  margin-bottom: 0;
}

/* Asset cards */
.asset {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

.asset.is-super {
  border-color: var(--super-border);
  background: var(--super-bg);
}

.asset-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* The asset colour picker doubles as the swatch — strip the native chrome
   so it reads as a small coloured circle just like the old static `.dot`. */
.asset-color {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.25));
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  overflow: hidden;
}
.asset-color::-webkit-color-swatch-wrapper { padding: 0; }
.asset-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.asset-color::-moz-color-swatch { border: none; border-radius: 50%; }
.asset-color:hover { transform: scale(1.1); }

.asset-header input[type="text"] {
  flex: 1;
  min-width: 140px;
  font-weight: 500;
}

.account-select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  width: auto;
  min-width: 95px;
  border-radius: var(--radius);
  cursor: pointer;
}

.account-select.super {
  background: var(--super-bg);
  border-color: var(--super-border);
  color: var(--super);
}

.no-loss {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
}

.no-loss:hover { background: var(--bg-tertiary); }
.no-loss input { margin: 0; width: auto; }

.buffer-flag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
}

.buffer-flag:hover { background: var(--bg-tertiary); }
.buffer-flag input { margin: 0; width: auto; }
.buffer-flag input:checked + span { color: var(--info); font-weight: 600; }

.illiquid-flag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
}

.illiquid-flag:hover { background: var(--bg-tertiary); }
.illiquid-flag input { margin: 0; width: auto; }
.illiquid-flag input:checked + span { color: var(--warning, #b85a1f); font-weight: 600; }

/* Loans panel */
.loans-section {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-secondary, rgba(0,0,0,0.02));
  border: 1px solid var(--border-strong, rgba(0,0,0,0.08));
}
.loans-header h2 { margin: 0 0 4px 0; font-size: 16px; }
.loans-note { margin: 0 0 10px 0; color: var(--text-secondary); font-size: 12px; }

/* Collapsible Asset & Loan sections (stage 3) */
.collapsible-section > summary.section-summary {
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
  list-style: none;
  user-select: none;
  display: flex;
  align-items: baseline;
}
/* Right-aligned digest shown on the section header (counts at a glance). */
.section-summary-meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}
.collapsible-section > summary.section-summary::-webkit-details-marker { display: none; }
.collapsible-section > summary.section-summary::before {
  content: '▾';
  display: inline-block;
  width: 1em;
  margin-right: 4px;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}
.collapsible-section:not([open]) > summary.section-summary::before { transform: rotate(-90deg); }
.collapsible-section:not([open]) > summary.section-summary { margin-bottom: 0; }
.loan-list { display: flex; flex-direction: column; gap: 10px; }
.loan-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  border: 1px dashed var(--border-strong, rgba(0,0,0,0.12));
  border-radius: var(--radius);
}
.loan-card {
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg, white);
  border: 1px solid var(--border-strong, rgba(0,0,0,0.08));
  border-left: 3px solid var(--danger, #c4382f);
}
.loan-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.loan-name { flex: 1; font-weight: 600; padding: 4px 8px; border-radius: var(--radius); border: 1px solid var(--border-strong); }
.loan-bucket { padding: 4px 8px; border-radius: var(--radius); border: 1px solid var(--border-strong); font-size: 12px; }
.loan-drawable-flag {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 4px 8px;
  border-radius: var(--radius); border: 1px solid var(--border-strong);
  cursor: pointer; white-space: nowrap; color: var(--text-secondary);
}
.loan-drawable-flag input { margin: 0; width: auto; }
.loan-drawable-flag input:checked + span { color: var(--info, #2f7fc4); font-weight: 600; }

/* Loud failure card — sits in the summary grid but spans the row and shouts. */
.metric.strategy-failed {
  grid-column: 1 / -1;
  border: 2px solid var(--danger, #c4382f);
  background: rgba(196, 56, 47, 0.12);
  padding: 12px 16px;
}
.metric.strategy-failed .metric-label {
  color: var(--danger, #c4382f);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.metric.strategy-failed .metric-value {
  font-size: 13px !important;
  color: var(--text);
  font-weight: 600;
}

/* Stress-test scan results */
.loan-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.stress-results { margin-top: 12px; }
.stress-empty {
  padding: 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.stress-header h3 { margin: 0 0 4px; font-size: 14px; }
.stress-header p { margin: 0 0 8px; color: var(--text-secondary); font-size: 12px; }
.stress-table {
  border-collapse: collapse;
  font-size: 12px;
  width: auto;
}
.stress-table th, .stress-table td {
  border: 1px solid var(--border-strong);
  padding: 6px 12px;
  text-align: center;
  white-space: nowrap;
}
.stress-table thead th { background: var(--bg-tertiary, rgba(0,0,0,0.04)); font-weight: 600; }
.stress-table tbody th { text-align: right; background: var(--bg-tertiary, rgba(0,0,0,0.04)); }
.stress-table td.stress-pass { background: rgba(40, 150, 80, 0.12); color: var(--success, #2a8); }
.stress-table td.stress-warn { background: rgba(200, 145, 30, 0.15); color: var(--warning, #b85a1f); font-weight: 600; }
.stress-table td.stress-fail { background: rgba(196, 56, 47, 0.18); color: var(--danger, #c4382f); font-weight: 700; }

/* Chart bucket-visibility toggles. The toggle buttons themselves are reused
   inside the sticky scenario bar (.scenario-bucket-filter) — same .bucket-toggle
   styling, different container chrome. */
.chart-bucket-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px 0;
  flex-wrap: wrap;
}
.chart-bucket-toggles .lbl { margin-right: 4px; }
.scenario-bucket-filter {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border-strong, rgba(0,0,0,0.12));
}
.scenario-bucket-filter .lbl.tiny { color: var(--text-tertiary); margin-right: 2px; }
.scenario-bucket-filter .bucket-toggle { padding: 3px 8px; font-size: 11px; }

/* View By selector — sits next to the bucket filter in the scenario bar.
   Same visual weight: subtle border-left separator, small font, no chrome. */
.scenario-view-by {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border-strong, rgba(0,0,0,0.12));
}
.scenario-view-by .lbl.tiny { color: var(--text-tertiary); margin-right: 2px; }
.view-by-select {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg, transparent);
  color: var(--text-primary);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
}
.view-by-select:hover { border-color: var(--accent); }
.bucket-toggle {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bucket-toggle:hover { background: var(--bg-tertiary); }
.bucket-toggle.active { background: var(--bg-tertiary, rgba(0,0,0,0.05)); color: var(--text); font-weight: 600; }
.bucket-toggle.active.super { color: var(--super, #6e4ba8); }
.bucket-toggle:not(.active) { opacity: 0.55; }

/* Scenario tab bar — sits directly below the app header. */
.scenario-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0 0 12px 0;
  padding: 4px 4px 0 4px;
  border-bottom: 1px solid var(--border-strong, rgba(0,0,0,0.12));
  /* Sticky so the scenario tabs + jump links follow you down the page. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg, #0f0f10);
  /* Subtle shadow appears only after the bar pins (handled by .is-stuck) */
  transition: box-shadow 120ms ease;
}
.scenario-bar.is-stuck {
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.scenario-jump {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 8px;
  border-left: 1px solid var(--border-strong, rgba(0,0,0,0.12));
}
.scenario-jump-link {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}
.scenario-jump-link:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  color: var(--text-primary, #fff);
}
html { scroll-behavior: smooth; }
/* Offset scroll anchors so the sticky bar doesn't cover the section heading. */
[id^="section-"] { scroll-margin-top: 56px; }
.scenario-tabs-list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
.scenario-tab {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 1px solid var(--border-strong, rgba(0,0,0,0.12));
  border-bottom: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background: var(--bg-secondary, rgba(0,0,0,0.03));
  position: relative;
  top: 1px;  /* overlap the bar border when active */
}
.scenario-tab.active {
  background: var(--bg, white);
  border-color: var(--border-strong);
  border-bottom: 1px solid var(--bg, white);
  font-weight: 600;
}
.scenario-tab-label {
  background: transparent;
  border: none;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scenario-tab:not(.active) .scenario-tab-label { color: var(--text-secondary, #555); }
.scenario-tab-menu {
  background: transparent;
  border: none;
  padding: 6px 8px;
  margin-right: 2px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
}
.scenario-tab-menu:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.scenario-add-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  align-self: center;
  margin-left: auto;
}
.scenario-add-btn:hover { background: var(--bg-tertiary); color: var(--text); }

.scenario-tab-popover {
  position: absolute;
  z-index: 1000;
  background: var(--bg, white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 4px;
}
.scenario-tab-popover button {
  background: transparent;
  border: none;
  padding: 6px 10px;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius);
}
.scenario-tab-popover button:hover:not([disabled]) { background: var(--bg-tertiary); }
.scenario-tab-popover button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Downturn panel — span both columns of the .controls grid so the events
   list and sliders have room to breathe. */
.downturn-block { grid-column: 1 / -1; width: 100%; }
.downturn-block .downturn-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 4px 0;
  width: 100%;
}
.downturn-event-row {
  display: grid;
  /* label | start-year | drawdown-yrs | flat-yrs | severity | × */
  grid-template-columns: 100px 2fr 2fr 2fr 110px 32px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg, transparent);
  font-size: 12px;
  width: 100%;
}
.downturn-event-row.disabled { opacity: 0.55; }
.downturn-event-label {
  font-weight: 600;
  color: var(--danger, #c4382f);
  font-size: 12px;
  white-space: nowrap;
}
.downturn-event-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 2px;
}
.downturn-event-row .input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;  /* let the slider shrink to fit the grid track */
}
.downturn-event-row .input-group label {
  font-size: 10px;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  min-width: 78px;
}
.downturn-event-row input[type="range"] { flex: 1; min-width: 40px; }
.downturn-event-row input[type="number"] { width: 60px; }
.downturn-event-out { min-width: 28px; text-align: right; font-weight: 600; }
.downturn-event-empty {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* Cash injections */
.cash-injection-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}
.cash-injection-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 1fr 1fr 50px 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg, transparent);
  font-size: 12px;
}
.cash-injection-label {
  font-weight: 600;
  color: var(--info, #3a8fc8);
  font-size: 12px;
  white-space: nowrap;
}
.cash-injection-row .input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.cash-injection-row .input-group label {
  font-size: 10px;
  color: var(--text-secondary);
  margin: 0;
}
.cash-injection-row input[type="number"] {
  width: 100%;
  min-width: 0;
}
.cash-injection-sum {
  text-align: right;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cash-injection-empty {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* Per-item enable toggle: a clickable label with embedded checkbox. */
.cash-event-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.cash-event-toggle input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}
.cash-injection-row.is-disabled,
.cash-withdrawal-row.is-disabled {
  opacity: 0.45;
}
.cash-injection-row.is-disabled .cash-event-toggle,
.cash-withdrawal-row.is-disabled .cash-event-toggle {
  opacity: 1;  /* keep the toggle itself fully visible so user can re-enable */
}
.cash-injection-row.is-disabled .cash-event-toggle span,
.cash-withdrawal-row.is-disabled .cash-event-toggle span {
  text-decoration: line-through;
}

/* Nominal $ / Today's $ display toggle (above the stats block) */
.real-dollar-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  flex-wrap: wrap;
}
.real-dollar-toggle-row .bucket-toggle {
  font-size: 12px;
  padding: 4px 12px;
}
.real-dollar-toggle-row #realDollarHint {
  font-style: italic;
  color: var(--info, #3a8fc8);
}

/* Section-level reminder that values are inflation-adjusted */
.real-dollar-note {
  display: none;
  margin: 4px 0 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-style: italic;
  color: var(--info, #3a8fc8);
  border-left: 2px solid var(--info, #3a8fc8);
  background: rgba(58, 143, 200, 0.06);
}
body.real-dollars .real-dollar-note { display: block; }

/* Cash withdrawals — same shape as injections, different accent. */
.cash-withdrawal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}
.cash-withdrawal-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg, transparent);
  font-size: 12px;
}
.cash-withdrawal-label {
  font-weight: 600;
  color: var(--warning, #b85a1f);
  font-size: 12px;
  white-space: nowrap;
}
.cash-withdrawal-row .input-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.cash-withdrawal-row .input-group label {
  font-size: 10px;
  color: var(--text-secondary);
  margin: 0;
}
/* Field inputs fill their input-group. Scoped to .input-group so the toggle
   checkbox in .cash-withdrawal-label is NOT stretched to 100% (which would
   make it consume the whole row and push the title off the edge). */
.cash-withdrawal-row .input-group input,
.cash-withdrawal-row .input-group select {
  width: 100%;
  min-width: 0;
}
.cash-withdrawal-empty {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.side-controls-inner .cash-withdrawal-row {
  grid-template-columns: 1fr;
  gap: 8px;
}
.side-controls-inner .cash-withdrawal-row .input-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 6px;
}
/* Stack injection-row inputs vertically in the sidebar (same trick as
   downturn-event-row) since the 8-column grid is too wide for ~420px. */
.side-controls-inner .cash-injection-row {
  grid-template-columns: 1fr;
  gap: 8px;
}
.side-controls-inner .cash-injection-row .input-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 6px;
}
.side-controls-inner .cash-injection-row .cash-injection-sum {
  text-align: left;
}
/* The per-event toggle (checkbox + title) is a full-width header row in the
   narrow sidebar. It must STRETCH to fill the grid cell (not shrink-to-fit) so
   the title has room; min-width:0 lets it shrink to the cell rather than
   overflowing; white-space:normal wraps a long title at word boundaries. */
.side-controls-inner .cash-withdrawal-row .cash-withdrawal-label,
.side-controls-inner .cash-injection-row .cash-injection-label {
  justify-self: stretch;
  min-width: 0;
  white-space: normal;
}
.downturn-catchup-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1000px) {
  .downturn-event-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .downturn-event-label { grid-column: 1 / -1; }
}
.loan-inputs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.loan-inputs .input-group label { font-size: 10px; color: var(--text-secondary); }
.loan-lvr-narrative {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(127,127,127,0.06);
  border-radius: 4px;
  line-height: 1.45;
}
.loan-lvr-narrative strong { color: var(--text-primary); font-weight: 600; }
.loan-lvr-warn {
  margin-top: 4px;
  color: var(--warning, #b85a1f);
  font-weight: 500;
}
.loan-collateral {
  padding-top: 6px;
  border-top: 1px solid var(--border-strong, rgba(0,0,0,0.08));
}
.loan-collateral-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.loan-collateral-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.loan-collateral-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  cursor: pointer;
}
.loan-collateral-opt input { margin: 0; }
.loan-collateral-opt.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .loan-inputs { grid-template-columns: repeat(2, 1fr); }
}

.rm-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.rm-btn:hover { color: var(--danger); border-color: var(--danger); }

/* Three-axis classification sub-row between the asset header and the numeric
   inputs grid. Always three equal columns — narrow enough that it fits even
   on tight viewports without wrapping awkwardly. Visual weight is low (small
   labels, subtle border) so it reads as metadata rather than another input row. */
.asset-classification {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 6px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.asset-classification .classification-input label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.asset-classification .classification-input input[type="text"] {
  font-size: 12px;
  padding: 4px 6px;
}

.asset-inputs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.asset-inputs.cols-6 { grid-template-columns: repeat(6, 1fr); }
.asset-inputs.cols-7 { grid-template-columns: repeat(7, 1fr); }
/* New: 5 base cols (added Cost basis), so toggles produce 6 or 7 */

.input-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.input-group label {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-group.downturn label { color: var(--danger); }
.input-group.income label { color: var(--success); }
.input-group.rebal label { color: var(--info); }

.add-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

.add-btn:hover { border-color: var(--accent); color: var(--accent); }

.warn {
  font-size: 12px;
  color: var(--warning);
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(184, 131, 15, 0.08);
  border-radius: var(--radius);
}

/* Summary metrics */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 24px 0 16px;
}

.metric {
  background: var(--bg-secondary);
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.metric.super {
  background: var(--super-bg);
  border-color: var(--super-border);
}

.metric-label {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.metric-value {
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.metric-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Charts */
.hover-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 8px 0 4px;
  font-style: italic;
}

.chart-wrap {
  height: 400px;
  position: relative;
  margin-bottom: 16px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 6px 8px;
  margin: 0 0 4px;
}
.chart-legend:empty { display: none; }
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chart-legend-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 14px;
  line-height: 1;
  font-size: 12px;
}
.chart-legend-band {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.08);
}

.chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
  justify-items: center;
}
.chart-row > div { min-width: 0; width: 100%; max-width: 380px; }

.chart-cap {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 6px;
}

.pie-wrap { height: 280px; position: relative; min-width: 0; max-width: 380px; margin: 0 auto; }

/* Footer */
.app-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

.app-footer p { margin: 6px 0; }
.disclaimer { font-style: italic; max-width: 760px; margin: 0 auto; }

/* Critical legal disclaimer — shown in both the header and the footer. */
.legal-disclaimer {
  margin: 8px 0 0;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(176, 64, 48, 0.08);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  max-width: 760px;
}
.app-footer .legal-disclaimer { margin: 0 auto 10px; }

/* Bucket tabs */
.bucket-section {
  margin-bottom: 16px;
}

.bucket-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border-strong);
}

.tab {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  position: relative;
  top: 1px;
}

.tab:hover { color: var(--text); background: var(--bg-secondary); }

.tab.active {
  background: var(--bg-secondary);
  color: var(--text);
  border-color: var(--border-strong);
  border-bottom: 1px solid var(--bg-secondary);
  font-weight: 600;
}

.tab.super.active {
  color: var(--super);
}

.bucket-panel {
  display: none;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}

.bucket-panel.active { display: block; }

.bucket-panel.super {
  background: var(--super-bg);
  border-color: var(--super-border);
}

/* ===== Dynamic bucket UI (v7) ===== */
.bucket-toggle-list { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.bucket-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bucket-name-input {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary, #fff);
  color: var(--text);
  min-width: 140px;
}
.bucket-owner-input {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary, #fff);
  color: var(--text-secondary);
  max-width: 160px;
}
.bucket-type-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg-tertiary, rgba(0,0,0,0.06));
  color: var(--text-secondary);
}
.bucket-type-badge.super { background: var(--super-bg); color: var(--super); }
.bucket-rm { margin-left: auto; }
.bucket-super-overrides { margin-top: 8px; }
.bucket-super-override-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.bucket-super-override-grid .input-group { margin: 0; }
.add-bucket-btn { margin-top: 8px; }

.bucket-controls {
  padding: 8px 12px 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Specificity-matched to the base `input[type="number"] { width:100% }` rule
   above — without the attribute selector the base rule wins and this input
   stretches across the row. */
input[type="number"].bucket-monthly-input { width: 120px; flex: 0 0 auto; }

/* ============== Bucket strategy notes ==============
   Collapsible block per bucket holding objective / structure / risks
   textareas. Not used in the simulation — surfaces the user's intent to
   the AI Advisor (and to themselves). Collapsed by default so the bucket
   panel doesn't feel busy when the user isn't editing notes. */
.bucket-strategy {
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
}
@media (prefers-color-scheme: dark) {
  .bucket-strategy { background: rgba(255, 255, 255, 0.025); }
}
.bucket-strategy > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 2px 0;
  list-style: revert;
}
.bucket-strategy[open] > summary { margin-bottom: 6px; }
.bucket-strategy-help {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}
.bucket-strategy-field {
  display: block;
  margin-bottom: 8px;
}
.bucket-strategy-field:last-child { margin-bottom: 0; }
.bucket-strategy-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.bucket-strategy textarea {
  width: 100%;
  min-height: 38px;
  max-height: 240px;
  resize: vertical;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.45;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-sizing: border-box;
}
.bucket-strategy textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Investment thesis section (top of the main view) */
.thesis-section { margin-bottom: 16px; }
.thesis-help {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 12px;
  max-width: 760px;
  line-height: 1.5;
}
.thesis-field { display: block; margin-bottom: 10px; }
.thesis-field:last-child { margin-bottom: 0; }
.thesis-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.thesis-section textarea {
  width: 100%;
  min-height: 70px;
  max-height: 360px;
  resize: vertical;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-sizing: border-box;
}
.thesis-section textarea:focus { outline: none; border-color: var(--accent); }

/* Allocation table */
.allocation-table-section {
  margin-top: 28px;
}

.allocation-table-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.allocation-table-section h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.2px;
}

.density-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.density-toggle select {
  width: auto;
  font-size: 12px;
  padding: 3px 6px;
}

.allocation-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
}

#allocationTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#allocationTable thead th {
  position: sticky;
  top: 0;
  background: var(--bg-tertiary);
  padding: 8px 10px;
  text-align: right;
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

#allocationTable thead th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
}

#allocationTable thead th.bucket-total-head { background: var(--bg-tertiary); color: var(--text); }
#allocationTable thead th.bucket-total-head.super { color: var(--super); }
#allocationTable thead th.grand-total-head { background: var(--accent); color: white; }

#allocationTable td {
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(127,127,127,0.08);
  white-space: nowrap;
}

#allocationTable td:first-child {
  text-align: left;
  font-weight: 600;
  position: sticky;
  left: 0;
  background: var(--bg-secondary);
  z-index: 1;
}

#allocationTable tbody tr:hover td { background: var(--bg-tertiary); }
#allocationTable tbody tr:hover td:first-child { background: var(--bg-tertiary); }

#allocationTable td.bucket-total { background: rgba(127,127,127,0.04); font-weight: 600; }
#allocationTable td.bucket-total.super { color: var(--super); background: var(--super-bg); }
#allocationTable td.grand-total { background: rgba(29, 110, 86, 0.08); font-weight: 700; color: var(--accent); }

#allocationTable .pct { color: var(--text-tertiary); font-size: 10px; margin-left: 4px; }

/* Adjust .controls so help text doesn't span entire width on bucket tab options */
.bucket-section .help { font-style: italic; }

/* View tabs (above allocation table) */
.view-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary);
  padding: 3px;
  border-radius: var(--radius);
}

.view-tab {
  background: transparent;
  border: none;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.view-tab:hover { color: var(--text); }

.view-tab.active {
  background: var(--bg-secondary);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Delta cells */
#allocationTable td.delta-pos { color: var(--success); }
#allocationTable td.delta-neg { color: var(--danger); }
#allocationTable td.delta-zero { color: var(--text-tertiary); }
#allocationTable td.muted { color: var(--text-tertiary); font-weight: 400; }

/* Flow columns */
#allocationTable th.flow-in { color: var(--success); }
#allocationTable th.flow-out { color: var(--danger); }
#allocationTable td.flow-in { color: var(--success); font-variant-numeric: tabular-nums; }
#allocationTable td.flow-out { color: var(--danger); font-variant-numeric: tabular-nums; }

/* Action panel (Y1 → Y3 next actions) */
/* ============== Actions taken (real-world transaction journal) ==============
   Sits above the projected-action panel. User records sells / buys /
   contributions / buffer redeploys they've actually executed; each recording
   mutates the relevant asset.start + asset.costBasis at the time, and the
   stored delta enables a clean reverse on delete. */
.actions-taken-section {
  margin: 24px 0 12px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.actions-taken-header { margin-bottom: 12px; }
.actions-taken-header h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}
.actions-taken-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.action-recorder-form {
  margin-bottom: 10px;
}
.action-recorder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.action-recorder-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 140px;
}
.action-recorder-label {
  font-size: 11px;
  color: var(--text-tertiary);
}
.action-recorder-field input,
.action-recorder-field select {
  font-size: 13px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  color: var(--text-primary);
  font-family: inherit;
}
.action-recorder-form #actionRecordBtn {
  flex: 0 0 auto;
  min-height: 32px;
}
.action-recorder-error {
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--danger, #d9534f);
  background: rgba(217, 83, 79, 0.10);
  border: 1px solid rgba(217, 83, 79, 0.30);
  border-radius: 4px;
}

.actions-journal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.actions-journal-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}
@media (prefers-color-scheme: dark) {
  .actions-journal-entry { background: rgba(255, 255, 255, 0.03); }
}
.actions-journal-marker {
  font-weight: 600;
  color: var(--accent, #1d6e56);
  min-width: 12px;
}
.actions-journal-desc { flex: 1 1 auto; }
.actions-journal-date {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.actions-journal-remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.actions-journal-remove:hover {
  color: var(--danger, #d9534f);
  border-color: var(--danger, #d9534f);
}
.actions-journal-empty {
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  padding: 4px 0;
}

/* Advance controls + archived list */
.actions-taken-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.actions-taken-controls-hint {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  flex: 1 1 200px;
}
#advanceYearBtn { flex: 0 0 auto; }

.actions-archived {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
@media (prefers-color-scheme: dark) {
  .actions-archived { background: rgba(255, 255, 255, 0.025); }
}
.actions-archived > summary {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 0;
}
.archived-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.archived-block {
  padding: 8px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.archived-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.archived-header strong { font-weight: 600; }
.archived-undo {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.archived-undo:hover {
  color: var(--accent, #1d6e56);
  border-color: var(--accent, #1d6e56);
}
.archived-entries {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  color: var(--text-secondary);
}
.archived-entry { font-size: 11.5px; line-height: 1.4; }

/* Advance-year dialog: a modal form for entering end-of-Y0 real-world
   holdings. Pre-fills with the model's Y1 prediction; user adjusts to
   match actual balances and cost basis before confirming. */
.advance-dialog {
  width: min(92vw, 720px);
  max-height: 90vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  /* Kill the dialog's own scrollbar — the inner scroll-area is the ONLY
     thing that should scroll. Without this the dialog tries to scroll
     itself when the form's intrinsic content height exceeds max-height. */
  overflow: hidden;
}
.advance-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.advance-dialog form {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  min-height: 0;
}
.advance-dialog-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.advance-dialog-header h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.advance-dialog-header p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
/* Tabs wrapper — sits between header and scroll area, always visible. */
.advance-tabs-wrap {
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-strong);
}

/* Scroll area — only the panel content scrolls; tabs stay anchored above.
   `flex: 1 1 auto` means start at content size and grow/shrink as needed.
   `min-height: 0` is required: without it, the flex item's default
   `min-height: auto` lets the child content's intrinsic height inflate the
   item, pushing the form past 90vh and producing a second outer scrollbar.
   Together they give: scroll-area sized by content up to 90vh − siblings,
   then internal overflow takes over. */
.advance-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px;
  display: block;
}

/* Collapsible "What exactly changes?" details inside the header. */
.advance-dialog-details {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-secondary);
}
.advance-dialog-details > summary {
  cursor: pointer;
  font-weight: 500;
  padding: 2px 0;
}
.advance-dialog-details ul {
  margin: 6px 0 0;
  padding-left: 20px;
  line-height: 1.55;
}
.advance-dialog-details li { margin: 2px 0; }

/* Bucket tabs inside the advance dialog. Visually echoes the main asset-list
   bucket tabs so the dialog feels like the same configuration surface. */
.advance-tabs {
  display: flex;
  gap: 2px;
}
.advance-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 7px 14px;
  cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  position: relative;
  top: 1px;
}
.advance-tab:hover { color: var(--text); background: var(--bg-tertiary, rgba(255,255,255,0.04)); }
.advance-tab.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
  border-bottom: 1px solid var(--bg-secondary);
  font-weight: 600;
}
.advance-tab.super.active { color: var(--super, var(--text-primary)); }
.advance-tab-count {
  display: inline-block;
  margin-left: 4px;
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.advance-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0 4px;
}
.advance-panel.active { display: flex; }
.advance-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}
.advance-row {
  padding: 10px 12px;
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 6px;
}
.advance-row-asset {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}
.advance-row-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.advance-row-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--text-secondary);
}
.advance-row-fields input {
  font-size: 13px;
  padding: 5px 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
}
.advance-row-hint {
  font-size: 10.5px;
  color: var(--text-tertiary);
}
.advance-dialog-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
}
.advance-dialog-footer .ghost-btn.primary {
  background: var(--accent, #1d6e56);
  color: #fff;
  border-color: var(--accent, #1d6e56);
}
.advance-dialog-footer .ghost-btn.primary:hover { filter: brightness(1.08); }

.action-panel-section {
  margin: 24px 0 20px;
}

.action-panel-header {
  margin-bottom: 12px;
}

.action-panel-header h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
}

.action-panel-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
  font-style: italic;
}

.action-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.action-year-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.action-year-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.action-year-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.action-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.action-chip.accum { background: rgba(29, 110, 86, 0.12); color: var(--success); }
.action-chip.drawdown { background: rgba(110, 75, 168, 0.12); color: var(--super); }
.action-chip.downturn { background: rgba(176, 64, 48, 0.12); color: var(--danger); }
.action-chip.preservation { background: rgba(127, 119, 221, 0.12); color: #7F77DD; }
.action-chip.injection { background: rgba(58, 143, 200, 0.14); color: var(--info, #3a8fc8); }
.action-chip.withdrawal { background: rgba(184, 90, 31, 0.16); color: var(--warning, #b85a1f); }
.action-chip.div296 { background: rgba(176, 64, 48, 0.16); color: var(--danger); font-weight: 600; }
.action-div296-banner {
  /* Spans the full action-panel grid width as its own row above the year
     cards — it is not a year card and must not take a Y1/Y2/Y3 column. */
  grid-column: 1 / -1;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(176, 64, 48, 0.10);
  border-left: 3px solid var(--danger);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.action-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.action-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.action-bucket {
  padding: 6px 0 8px;
  margin-bottom: 4px;
}

.action-bucket:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}

.action-bucket-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.action-bucket-label strong {
  color: var(--text);
  font-weight: 600;
}

.action-item {
  font-size: 12px;
  padding: 2px 0;
  line-height: 1.4;
  color: var(--text);
}

.action-item.invest { color: var(--success); }
.action-item.sell { color: var(--danger); }
.action-item.buy { color: var(--success); }
.action-item.skip { color: var(--text-tertiary); font-style: italic; }
.action-item.muted { color: var(--text-tertiary); }
.action-item.note { color: var(--text-secondary); font-size: 11px; }
.action-item.note.danger { color: var(--danger); font-weight: 600; }

.action-item strong { font-weight: 600; }
.action-muted { color: var(--text-tertiary); font-size: 11px; font-weight: 400; }

/* Journal-progress annotations on Y1 action items.
   `.action-done` = user's journal meets or exceeds the plan for this line.
   `.action-progress` = partial progress; shows done / left split. */
.action-done {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  letter-spacing: 0.01em;
}
.action-progress {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--info, #d97706);
  letter-spacing: 0.01em;
}

.action-tax-summary {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .action-panel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .controls { grid-template-columns: 1fr; }
  .asset-inputs,
  .asset-inputs.cols-6,
  .asset-inputs.cols-7 { grid-template-columns: repeat(3, 1fr); }
  .chart-row { grid-template-columns: 1fr; }
  .app-header { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
  .asset-inputs,
  .asset-inputs.cols-6,
  .asset-inputs.cols-7 { grid-template-columns: repeat(2, 1fr); }
  .no-loss span { display: none; }
  .buffer-flag span { display: none; }
  .illiquid-flag span { display: none; }
  .account-select { min-width: 80px; font-size: 10px; }
}

/* Small app modals — passphrase prompt, export & restore dialogs. Native
   <dialog>, same visual language as .advance-dialog. */
.app-dialog {
  width: min(92vw, 440px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}
.app-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.app-dialog-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.app-dialog-header h3 { margin: 0 0 6px; font-size: 16px; }
.app-dialog-header p {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.app-dialog-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.app-dialog-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}
.app-dialog-check input { cursor: pointer; }
#exportEncryptFields:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.passphrase-field { display: flex; flex-direction: column; gap: 4px; }
.passphrase-field span { font-size: 12px; color: var(--text-secondary); }
.passphrase-field input {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
}
.app-dialog-error { margin: 0; font-size: 12px; color: var(--danger); }
.app-dialog-hint {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.app-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
/* Wrapper so a disabled button still shows its title tooltip on hover. */
.cfg-soon-wrap { display: inline-flex; }

/* Footer "buy me a coffee" support line. */
.support-line { margin-top: 6px; }
.support-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.support-link:hover { text-decoration: underline; }