/* ============================================================
   Portfolio page mock — Iter 12DI proposal
   Palette pulled from dashboard.css (Market Insight V2 / B2)
   ============================================================ */

:root {
  --bg:           #131316;
  --surface:      #1c1c20;
  --surface-2:    #1f1f24;
  --surface-hover:#222226;
  --border:       #2a2a30;
  --border2:      rgba(42,42,48,0.55);
  --accent:       #4F98A3;
  --accent-2:     #6FBCC9;
  --accent-bg:    rgba(79,152,163,0.10);
  --secondary:    #BB653B;
  --up:           #0EB35B;
  --up-bg:        rgba(14,179,91,0.12);
  --down:         #C24A4A;
  --down-bg:      rgba(194,74,74,0.12);
  --text:         #e0e0e0;
  --text-strong:  #ffffff;
  --text-muted:   #ffffff80;
  --text-faint:   #6e6e74;
  --radius:       10px;
  --radius-sm:    6px;
  --shadow-sm:    0 1px 0 rgba(255,255,255,0.02), 0 1px 2px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Top bar (simplified mock of mi-topbar) ─── */
.mock-topbar {
  background: #1d1d22;
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex; align-items: center;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 10;
}
.mock-topbar-inner {
  display: flex; align-items: center; gap: 28px;
  width: 100%; max-width: 1440px; margin: 0 auto;
}
.mock-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; color: var(--text-strong);
  text-decoration: none;
}
.mock-brand-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
}
.mock-brand-light { color: var(--text-muted); font-weight: 500; }
.mock-brand-live {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--up-bg); color: var(--up);
  font-weight: 600; letter-spacing: 0.04em;
  margin-left: 6px;
}
.mock-brand-live::before { content: "●"; margin-right: 5px; font-size: 8px; }
.mock-nav { display: flex; gap: 22px; flex: 1; }
.mock-nav a {
  color: var(--text-muted); text-decoration: none; font-size: 13px;
  padding: 6px 0; position: relative;
}
.mock-nav a:hover { color: var(--text); }
.mock-nav a.active { color: var(--text-strong); }
.mock-nav a.active::after {
  content: ""; position: absolute; bottom: -19px; left: 0; right: 0;
  height: 2px; background: var(--accent);
}
.mock-topbar-right { display: flex; align-items: center; gap: 12px; }
.mock-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4F98A3, #BB653B);
  color: white; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}

/* ─── Page ─── */
.portfolio-page {
  max-width: 1440px; margin: 0 auto;
  padding: 28px 24px 60px;
}

.portfolio-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.portfolio-title { font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 0; letter-spacing: -0.01em; }
.portfolio-subtitle { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* Iter 12EU: .portfolio-breadcrumb rules removed — markup was deleted from portfolio.html. */

/* ─── Sub-tab switcher (Dashboard | Holdings) ─── */
.pf-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  width: fit-content;
  margin-bottom: 22px;
}
.pf-tab-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-weight: 500; font-size: 13px;
  padding: 8px 18px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
}
.pf-tab-btn:hover { color: var(--text); }
.pf-tab-btn.active {
  background: var(--accent); color: white;
  box-shadow: var(--shadow-sm);
}

.pf-panel { display: none; }
.pf-panel.active { display: block; animation: pf-fadeIn 0.25s ease both; }
@keyframes pf-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── KPI tiles ─── */
.pf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.pf-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.pf-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pf-kpi-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.pf-kpi-icon.value     { background: rgba(79,152,163,0.18); color: var(--accent-2); }
.pf-kpi-icon.profit    { background: rgba(14,179,91,0.16); color: var(--up); }
.pf-kpi-icon.irr       { background: rgba(150,120,255,0.16); color: #b08fff; }
.pf-kpi-icon.passive   { background: rgba(187,101,59,0.18); color: #d68a5a; }
.pf-kpi-label { color: var(--text-muted); font-size: 12px; font-weight: 500; }
/* Iter 15O: .pf-kpi-info replaced by .pf-info-btn (see end of file). */

.pf-kpi-value {
  font-size: 24px; font-weight: 600; color: var(--text-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.pf-kpi-value .pf-eye {
  color: var(--text-faint); font-size: 14px; margin-left: 6px; cursor: pointer;
}
.pf-kpi-sub {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pf-kpi-delta { font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.pf-up   { color: var(--up); }
.pf-down { color: var(--down); }

/* Iter 13v — RAG signal pills used by the Signals column section.
   Compact, accessible (title attribute carries the rule reason), and
   keyboard-focusable via the parent <span> tooltip behaviour. The dot
   character (●) is colour-coded; — is rendered for none/no-data. */
.pf-sig {
  display: inline-block; min-width: 18px; text-align: center;
  font-weight: 700; font-size: 14px; line-height: 1;
  border-radius: 6px; padding: 2px 6px;
  cursor: help;
}
.pf-sig-green { color: #19a974; background: rgba(25, 169, 116, 0.12); }
.pf-sig-amber { color: #d9822b; background: rgba(217, 130, 43, 0.14); }
.pf-sig-red   { color: #d62828; background: rgba(214, 40, 40, 0.12); }
.pf-sig-none  { color: var(--text-muted); background: transparent; opacity: 0.6; }

/* ─── 2-column row: chart + sectors ─── */
.pf-row-2 {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.pf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.pf-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.pf-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-strong);
  letter-spacing: 0.01em;
}
.pf-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.pf-chart-controls { display: flex; align-items: center; gap: 10px; }
.pf-timeframe {
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.pf-tf-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 4px; cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.pf-tf-btn:hover { color: var(--text); }
.pf-tf-btn.active { background: var(--accent); color: white; }
.pf-unit-toggle {
  display: flex; gap: 2px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.pf-unit-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 5px 11px; border-radius: 4px; cursor: pointer;
  min-width: 30px;
}
.pf-unit-btn.active { background: var(--accent); color: white; }

.pf-chart-wrap {
  height: 320px; position: relative;
}
.pf-chart-legend {
  display: flex; gap: 18px; margin-top: 12px;
  font-size: 12px;
}
.pf-chart-legend-item { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.pf-legend-swatch { width: 14px; height: 3px; border-radius: 2px; }
.pf-chart-summary {
  display: flex; gap: 16px; margin-top: 6px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}
.pf-summary-stat { display: flex; flex-direction: column; gap: 2px; }
.pf-summary-stat-label { color: var(--text-faint); font-size: 11px; letter-spacing: 0.02em; }
.pf-summary-stat-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─── Sector summary table (right of chart) ─── */
.pf-sector-list {
  display: flex; flex-direction: column;
  margin: 0 -4px;
}
/* Iter 12DZ — scrollable inner container so every sector is visible without
   stretching the panel taller than the chart card next to it. Header stays
   pinned at the top of the card. The max-height is tuned to roughly match
   the chart wrap (320px) plus the chart’s legend/summary so the two cards
   in the row stay visually aligned. */
#pfSectorRows {
  max-height: 360px;
  overflow-y: auto;
  /* Thin scrollbar that matches the rest of the app. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#pfSectorRows::-webkit-scrollbar { width: 8px; }
#pfSectorRows::-webkit-scrollbar-track { background: transparent; }
#pfSectorRows::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
#pfSectorRows::-webkit-scrollbar-thumb:hover { background: var(--border2); }
.pf-sector-head {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.6fr;
  gap: 10px; padding: 0 12px 10px;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.pf-sector-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 0.6fr;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border2);
  position: relative;
  align-items: center;
  transition: background 0.15s;
}
.pf-sector-row:hover { background: var(--surface-hover); }
.pf-sector-row:last-child { border-bottom: none; }
.pf-sector-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px;
  background: var(--sector-color, var(--accent));
}
.pf-sector-name-block { display: flex; align-items: center; gap: 12px; }
.pf-sector-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--sector-color, var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.pf-sector-name { font-size: 13px; color: var(--text-strong); font-weight: 500; line-height: 1.3; }
.pf-sector-items { font-size: 11px; color: var(--text-muted); }
.pf-sector-val { font-size: 13px; color: var(--text-strong); font-variant-numeric: tabular-nums; font-weight: 500; }
.pf-sector-invested { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pf-sector-gain { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-sector-gain-pct { font-size: 11px; font-variant-numeric: tabular-nums; }
.pf-sector-alloc { font-size: 13px; color: var(--text-strong); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }

/* ─── Holdings tab ─── */
.pf-holdings-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pf-currency-toggle {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.pf-curr-btn {
  background: transparent; border: none; color: var(--text-muted);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 12px; border-radius: 4px; cursor: pointer;
}
.pf-curr-btn.active { background: var(--accent); color: white; }
.pf-show-sold { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.pf-show-sold input { cursor: pointer; }

.pf-search {
  flex: 1; min-width: 200px; max-width: 320px;
  position: relative; margin-left: auto;
}
.pf-search input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 32px 7px 12px;
  color: var(--text); font: inherit; font-size: 12px;
}
.pf-search input::placeholder { color: var(--text-faint); }
.pf-search input:focus { outline: none; border-color: var(--accent); background: rgba(79,152,163,0.06); }
/* Search icon — hidden when clear button is visible */
.pf-search::after {
  content: "🔍"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; opacity: 0.5; pointer-events: none;
  transition: opacity 0.15s;
}
.pf-search.has-query::after { opacity: 0; }
/* × clear button */
.pf-search-clear {
  display: flex; align-items: center; justify-content: center;
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  color: var(--text-muted); font-size: 13px; line-height: 1;
  cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s;
}
.pf-search-clear:hover { background: rgba(255,255,255,0.22); color: var(--text); }
/* Active state ring when query is live */
.pf-search.has-query input {
  border-color: var(--accent);
  background: rgba(79,152,163,0.06);
  padding-right: 32px;
}
/* No-results message inside the table */
.pf-empty-row.pf-search-empty {
  color: var(--text-muted);
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
}

.pf-icon-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.pf-icon-btn:hover { color: var(--text); background: rgba(255,255,255,0.07); }

.pf-add-btn {
  background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  margin-bottom: 14px;
}
.pf-add-btn:hover { background: var(--accent-2); }

/* Iter 12EQ — inline quick-add row for manual portfolios. Sits between the
   holdings toolbar and the sub-sub-tabs; only visible when exactly one
   manual (non-broker) portfolio is selected in the portfolio filter. */
.pf-quick-add {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pf-quick-add[hidden] { display: none; }
.pf-quick-add-target {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
  white-space: nowrap; flex-shrink: 0;
}
.pf-quick-add-target strong { color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 600; }
.pf-quick-add-fields {
  display: flex; align-items: center; gap: 8px;
  flex: 1; flex-wrap: wrap;
}
.pf-quick-add-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13px;
  padding: 7px 10px;
  min-width: 0;
  transition: border-color .15s, background .15s;
}
.pf-quick-add-input:focus {
  outline: none; border-color: var(--accent); background: var(--surface-hover);
}
.pf-quick-add-input::placeholder { color: var(--text-faint); }
.pf-quick-add-ticker { flex: 1.4; min-width: 120px; text-transform: uppercase; letter-spacing: 0.02em; }
.pf-quick-add-num    { flex: 1;   min-width: 90px; }
.pf-quick-add-ccy    { flex: 0 0 78px; cursor: pointer; }
.pf-quick-add-btn {
  background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.pf-quick-add-btn:hover:not(:disabled) { background: var(--accent-2); }
.pf-quick-add-btn:disabled { opacity: 0.6; cursor: progress; }
.pf-quick-add-error {
  flex-basis: 100%;
  font-size: 12px;
  color: #ff6b6b;
  padding-top: 2px;
}
@media (max-width: 720px) {
  .pf-quick-add { padding: 12px; }
  .pf-quick-add-fields { gap: 6px; }
  .pf-quick-add-ticker { flex-basis: 100%; }
  .pf-quick-add-num,
  .pf-quick-add-ccy { flex: 1; }
  .pf-quick-add-btn { flex-basis: 100%; }
}

/* Holdings sub-sub-tabs */
.pf-h-subtabs {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pf-h-subtab {
  background: transparent; border: none;
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.pf-h-subtab:hover { color: var(--text); }
.pf-h-subtab.active { color: var(--accent-2); border-bottom-color: var(--accent); }

.pf-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pf-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.pf-table thead th {
  text-align: left;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 12px 11px;
  background: rgba(0,0,0,0.18);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: relative;
  user-select: none;
}
.pf-table thead th.right { text-align: right; }

/* Iter 12EL — sortable + draggable column headers.
   - Sortable data <th>s gain a grab cursor and a hover background to
     signal they're interactive.
   - The sort indicator (▲ / ▼ / ↕) sits inline next to the label.
     Idle (↕) is rendered at low opacity so it doesn't distract; the
     active one (▲ / ▼) is full opacity.
   - Dragging shows a faded source and a left-edge accent on the drop
     target so the user can see exactly where the column will land. */
.pf-table thead th.pf-th-sortable { cursor: grab; }
.pf-table thead th.pf-th-sortable:hover { background: rgba(255,255,255,0.04); }
.pf-table thead th.pf-th-sortable:active { cursor: grabbing; }
.pf-table thead th .pf-th-label { vertical-align: middle; }
.pf-table thead th .pf-sort-ind {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.85;
}
.pf-table thead th .pf-sort-ind.pf-sort-ind-idle { opacity: 0.25; }
.pf-table thead th.pf-th-sort-asc,
.pf-table thead th.pf-th-sort-desc { color: var(--text); }
.pf-table thead th.pf-th-dragging { opacity: 0.4; }
.pf-table thead th.pf-th-dragover {
  box-shadow: inset 2px 0 0 0 var(--accent-2, #4e9cff);
}
.pf-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border2);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.pf-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.pf-table tbody tr:last-child td { border-bottom: none; }
.pf-table td.right { text-align: right; }

.pf-holding-cell { display: flex; align-items: center; gap: 10px; }
.pf-holding-logo {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-2); font-weight: 700; font-size: 11px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Iter 12DP5a — real FMP logo image (reuses the watchlist's image-stock
   CDN via the shared mi-logo.js helper). Fills the round container;
   falls back to .pf-holding-logo-fb (letters) via inline onerror when
   FMP returns 404 (ETFs, unlisted tickers). */
.pf-holding-logo-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  display: block;
}
.pf-holding-logo-fb {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  color: var(--accent-2); font-weight: 700; font-size: 11px;
  letter-spacing: 0.02em;
}
.pf-holding-name { color: var(--text-strong); font-weight: 500; line-height: 1.3; }
.pf-holding-ticker { color: var(--text-muted); font-size: 11px; }

.pf-two-line { line-height: 1.35; }
.pf-two-line-1 { color: var(--text-strong); }
.pf-two-line-2 { color: var(--text-muted); font-size: 11px; }

/* Iter 12EM — ensure red/green wins on Total profit + Daily cells.
   Without these compound selectors the .pf-two-line-1/.pf-two-line-2 colours
   would tie on specificity with .pf-up/.pf-down and the cascade order
   (these two-line rules are declared after pf-up/pf-down) meant the
   primary $ amount sometimes painted as text-strong instead of green/red.
   We also bump the primary line to font-weight 600 when it carries an
   up/down class so positive/negative P&L reads cleanly at a glance. */
.pf-two-line-1.pf-up   { color: var(--up);   font-weight: 600; }
.pf-two-line-1.pf-down { color: var(--down); font-weight: 600; }
.pf-two-line-2.pf-up   { color: var(--up); }
.pf-two-line-2.pf-down { color: var(--down); }

.pf-cell-checkbox { width: 30px; padding: 0 0 0 16px !important; }
.pf-cell-checkbox input { cursor: pointer; }
.pf-cell-action {
  width: 40px; text-align: right;
  color: var(--text-faint); cursor: pointer;
  user-select: none;
}
.pf-portfolio-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text);
}
/* Iter 15k3 — removed the .pf-portfolio-tag::before coloured square. The
   broker logo (rendered immediately before the chip in the Portfolios
   column via .pf-broker-cell) now serves the same "which broker is this"
   purpose, so the little gradient square was redundant clutter between the
   logo and the portfolio name. Removed globally — the chip itself keeps
   its text-only styling everywhere it's used (Portfolios column on the My
   Holdings tab plus the Portfolio column on the General tab). */

.pf-empty {
  padding: 60px 30px; text-align: center;
  color: var(--text-muted); font-size: 13px;
}

/* Subtle disclaimer */
.pf-disclaimer {
  margin-top: 18px;
  font-size: 11px; color: var(--text-faint);
  text-align: center;
}

@media (max-width: 1180px) {
  .pf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pf-kpi-grid { grid-template-columns: 1fr; }
  .portfolio-page { padding: 18px 14px 40px; }
  .pf-table { font-size: 12px; }
  .mock-nav { display: none; }
}

/* ============================================================
   Iter 12DI.2 — additions: portfolio filter, add popover,
   columns popover, GBP toggle
   ============================================================ */

/* Header actions row — right side of page header */
.portfolio-header-actions {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* ─── Portfolio filter (multi-select) ─── */
.pf-portfolio-filter { position: relative; }
.pf-pf-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pf-pf-trigger:hover { background: var(--surface-hover); border-color: #383840; }
.pf-pf-trigger[aria-expanded="true"] {
  background: var(--surface-hover);
  border-color: var(--accent);
}
.pf-pf-icon { color: var(--text-muted); display: inline-flex; }
.pf-pf-label { color: var(--text); }
.pf-pf-count {
  background: var(--accent); color: white;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 10px;
  min-width: 18px; text-align: center;
}
.pf-pf-caret { color: var(--text-muted); font-size: 10px; }

/* ─── Generic popover ─── */
.pf-popover {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: #232328;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.02) inset;
  padding: 10px;
  z-index: 50;
  min-width: 280px;
}
.pf-popover[hidden] { display: none; }
.pf-popover-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 8px;
}
.pf-popover-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pf-popover-link {
  background: none; border: none; color: var(--accent-2);
  font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.pf-popover-link:hover { color: white; }

/* Portfolio filter rows */
.pf-pf-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
.pf-pf-row:hover { background: rgba(255,255,255,0.04); }
.pf-pf-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  background: transparent;
  border: 1.5px solid #4a4a52;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pf-pf-row input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
.pf-pf-row input[type="checkbox"]:checked::after {
  content: ""; display: block;
  width: 4px; height: 8px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.pf-pf-row-name { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pf-row-count { color: var(--text-faint); font-size: 12px; }
.pf-pf-divider { height: 1px; background: var(--border); margin: 4px 0; }
.pf-pf-all { font-weight: 500; }

/* Iter 12EP — popover head actions row (Clear + "+ New" stacked horizontally). */
.pf-popover-actions {
  display: inline-flex; align-items: center; gap: 4px;
}

/* Iter 12EP — inline delete button on manual portfolios. Hidden until the row
   is hovered (or focused for keyboard users) to keep the list visually calm. */
.pf-pf-row-del {
  background: none; border: none; color: var(--text-faint);
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 4px; border-radius: 3px;
  /* Always visible — hidden via opacity was invisible on touch devices */
  opacity: 0.35; transition: opacity .15s, color .15s, background .15s;
  flex-shrink: 0;
}
.pf-pf-row:hover .pf-pf-row-del,
.pf-pf-row-del:focus { opacity: 1; }
.pf-pf-row-del:hover { color: #ff6b6b; background: rgba(255,107,107,0.12); }
/* Empty portfolios (count=0): show delete at full opacity to prompt cleanup */
.pf-pf-row:has(.pf-pf-row-count:empty) .pf-pf-row-del,
.pf-pf-row[data-empty="1"] .pf-pf-row-del { opacity: 0.7; }

/* ─── Add investments button + popover ─── */
.pf-add-wrap { position: relative; }
.pf-add-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: white;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s;
}
.pf-add-btn:hover { background: var(--accent-2); }
.pf-add-plus { font-size: 16px; line-height: 1; }
.pf-add-popover { min-width: 300px; padding: 12px; }
.pf-add-section { padding: 4px 0; }
.pf-add-section + .pf-add-section { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.pf-add-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 4px 8px;
}
.pf-add-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 8px;
}
.pf-add-card-row { display: flex; align-items: center; gap: 10px; }
.pf-add-card-icon {
  width: 28px; height: 28px;
  background: rgba(79,152,163,0.15);
  color: var(--accent-2);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.pf-add-card-body { flex: 1; min-width: 0; }
.pf-add-card-title { font-size: 13px; font-weight: 500; color: var(--text); }
.pf-add-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pf-add-card-link { color: var(--accent-2); text-decoration: none; }
.pf-add-card-link:hover { text-decoration: underline; }
.pf-add-card-sync {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  opacity: 0.55;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s;
}
.pf-add-card-sync:hover { opacity: 1; background: var(--surface-hover); }
@keyframes pf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.pf-spin {
  animation: pf-spin 0.8s linear infinite;
  transform-origin: center;
}
.pf-add-card-cta {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 10px;
  cursor: pointer;
}
.pf-add-card-cta:hover { background: rgba(255,255,255,0.05); }
.pf-add-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: none;
  color: var(--text);
  font: inherit; font-size: 13px;
  text-align: left;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pf-add-row:hover { background: rgba(255,255,255,0.05); }
.pf-add-row-icon {
  width: 22px; height: 22px;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500;
  flex-shrink: 0;
}

/* ─── Columns popover ─── */
.pf-cols-wrap { position: relative; }
.pf-cols-popover {
  min-width: 380px;
  padding: 12px;
}
.pf-cols-section-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 8px 4px 6px;
}
.pf-cols-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}
.pf-col-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.pf-col-row:hover { background: rgba(255,255,255,0.04); }
.pf-col-row-label { color: var(--text); flex: 1; }
/* Iter 13x — (ⓘ) info icon beside signal rows. Hover/tap surfaces the
   native browser title-attribute tooltip with the green/amber/red rule. */
.pf-col-row-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: help;
  user-select: none;
  flex-shrink: 0;
}
.pf-col-row-info:hover { color: var(--accent-2); background: rgba(255,255,255,0.06); }
.pf-col-switch {
  position: relative;
  width: 26px; height: 14px;
  background: #3a3a40;
  border-radius: 14px;
  transition: background .15s;
  flex-shrink: 0;
}
.pf-col-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 10px; height: 10px;
  background: #cfcfd3;
  border-radius: 50%;
  transition: left .15s, background .15s;
}
.pf-col-row.is-on .pf-col-switch { background: var(--accent-2); }
.pf-col-row.is-on .pf-col-switch::after { left: 14px; background: white; }
.pf-col-row.is-on .pf-col-row-label { color: var(--text-strong); }

/* Tabs row \u2014 Dashboard/Holdings on left, actions on right */
.pf-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pf-tabs-row .pf-tabs { margin-bottom: 0; }

/* Iter 16P — Left cluster: tab pills + currency dropdown on same baseline */
.pf-tabs-left {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}

/* Currency select wrapper — matches .pf-pf-trigger style; ~25% smaller than pill row */
.pf-ccy-select-wrap {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 7px 0 7px;
  height: 28px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pf-ccy-select-wrap:hover {
  background: var(--surface-hover);
  border-color: #383840;
}
.pf-ccy-select-wrap:focus-within {
  border-color: var(--accent);
  background: var(--surface-hover);
}
.pf-ccy-select-icon {
  color: var(--text-muted);
  display: inline-flex;
  flex-shrink: 0;
  pointer-events: none;
}
.pf-ccy-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 2px 0 0;
  min-width: 36px;
}
.pf-ccy-select option {
  background: #232328;
  color: var(--text);
}
.pf-ccy-select-caret {
  color: var(--text-muted);
  font-size: 10px;
  pointer-events: none;
  flex-shrink: 0;
}

/* ============================================================
   NEW TRANSACTION MODAL (Iter 12DN)
   Styled to match the reference: dark dialog, top portfolio
   selector, tabs (Trades/Incomes/Expenses/Cash), 2-column grid
   for paired inputs, and a 3-button footer.
   ============================================================ */
.pf-txn-dialog {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.pf-txn-dialog::backdrop {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
.pf-txn-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

/* Header */
.pf-txn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.pf-txn-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
}
.pf-txn-title-prefix { color: var(--text-strong); }
.pf-txn-pf-select-wrap { display: inline-flex; align-items: center; }
.pf-txn-pf-select {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--accent-2);
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  padding: 2px 22px 2px 4px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-2) 50%),
                    linear-gradient(135deg, var(--accent-2) 50%, transparent 50%);
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-txn-pf-select:focus { outline: 1px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.pf-txn-pf-select option { background: var(--surface-2); color: var(--text); }
.pf-txn-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pf-txn-close:hover { background: var(--surface-hover); color: var(--text-strong); }

/* Tabs */
.pf-txn-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 20px 0;
  border-bottom: 1px solid var(--border);
}
.pf-txn-tab {
  appearance: none; background: none; border: none;
  color: var(--text-muted);
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pf-txn-tab:hover { color: var(--text); }
.pf-txn-tab.active {
  color: var(--text-strong);
  border-bottom-color: var(--accent);
}

/* Panels (scrollable body) */
.pf-txn-panel {
  display: none;
  padding: 18px 20px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.pf-txn-panel.active { display: block; }
.pf-txn-soon {
  color: var(--text-muted);
  font-size: 14px;
  padding: 28px 6px;
  text-align: center;
}

/* Fields */
.pf-txn-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.pf-txn-field-full { width: 100%; }
.pf-txn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pf-txn-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pf-txn-req { color: var(--down); }
.pf-txn-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--text-muted); color: var(--text-muted);
  font-size: 10px; font-weight: 700;
  cursor: help;
  margin-left: 2px;
}
.pf-txn-hint { font-size: 12px; color: var(--text-muted); min-height: 14px; }

.pf-txn-input-wrap { position: relative; display: flex; align-items: stretch; }
.pf-txn-input,
.pf-txn-textarea {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  padding: 10px 12px;
  appearance: none;
}
.pf-txn-input:focus,
.pf-txn-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(79,152,163,0.04);
}
.pf-txn-input::placeholder,
.pf-txn-textarea::placeholder { color: var(--text-faint); }
.pf-txn-select {
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-txn-select option { background: var(--surface-2); color: var(--text); }
.pf-txn-input-caret {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 12px;
}
.pf-txn-input-suffix {
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 0 28px 0 10px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.pf-txn-input-suffix option { background: var(--surface-2); color: var(--text); }
.pf-txn-input-wrap > .pf-txn-input + .pf-txn-input-suffix {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pf-txn-input-wrap > .pf-txn-input:has(+ .pf-txn-input-suffix) {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.pf-txn-textarea { resize: vertical; min-height: 70px; }

/* Error banner */
.pf-txn-error {
  margin: 0 20px 12px;
  padding: 10px 12px;
  border: 1px solid var(--down);
  background: var(--down-bg);
  color: var(--down);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* Footer */
.pf-txn-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.pf-txn-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.pf-txn-btn:hover { background: var(--surface-hover); }
.pf-txn-btn-cancel { color: var(--text); }
.pf-txn-btn-save {
  background: transparent;
  border-color: transparent;
  color: var(--accent-2);
}
.pf-txn-btn-save:hover { background: var(--accent-bg); }
.pf-txn-btn-save-more {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.pf-txn-btn-save-more:hover { background: var(--accent-2); border-color: var(--accent-2); }
.pf-txn-btn[disabled] {
  opacity: 0.55; cursor: not-allowed;
}

/* Mobile */
@media (max-width: 640px) {
  .pf-txn-dialog {
    width: calc(100vw - 12px);
    border-radius: 12px;
  }
  .pf-txn-grid-2 { grid-template-columns: 1fr; }
  .pf-txn-footer { flex-wrap: wrap; }
  .pf-txn-btn { flex: 1 1 auto; min-width: 0; }
}

/* ----------------------------------------------------------------
   Iter 13y — Transactions sub-tab (list view).
   Uses the pf-txnl- ("transactions list") prefix to avoid colliding
   with the pre-existing pf-txn- namespace used by the manual entry
   dialog. Lives inside #pfTableWrap, swapped in when the user clicks
   the Transactions sub-tab.
   ---------------------------------------------------------------- */
.pf-txnl-table th, .pf-txnl-table td {
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.pf-txnl-table th { color: var(--text-faint); font-weight: 600; letter-spacing: 0.02em; }
.pf-txnl-table tbody tr:hover { background: var(--surface-hover); }
.pf-txnl-num { text-align: right; font-variant-numeric: tabular-nums; }

.pf-txnl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.pf-txnl-badge-buy  { background: rgba(34,197,94,0.12);  color: #16a34a; border-color: rgba(34,197,94,0.3); }
.pf-txnl-badge-sell { background: rgba(239,68,68,0.12);  color: #dc2626; border-color: rgba(239,68,68,0.3); }
.pf-txnl-badge-div  { background: rgba(59,130,246,0.12); color: #2563eb; border-color: rgba(59,130,246,0.3); }
.pf-txnl-badge-fee  { background: rgba(148,163,184,0.12);color: #64748b; border-color: rgba(148,163,184,0.3); }

.pf-txnl-empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}
.pf-txnl-error { color: #dc2626; }

.pf-txnl-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 4px;
  gap: 12px;
}
.pf-txnl-pager-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.pf-txnl-pager-btn:hover:not([disabled]) { background: var(--surface-hover); }
.pf-txnl-pager-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.pf-txnl-pager-info { color: var(--text-faint); font-size: 12px; }

/* ──────────────────────────────────────────────────────────────
   Iter 14a-14f — Dashboard analytical lift
   - .pf-row-3  : 3-up insight row (movers / conviction / signals)
   - .pf-whatchanged + .pf-wc-*  : "What changed today" strip (14f)
   - .pf-movers-*  : winners/losers split (14a)
   - .pf-conv-buckets  : earnings conviction roll-up (14b)
   - .pf-sig-health  : green/amber/red bars (14c)
   - .pf-theme-list  : thematic exposure rows (14d)
   - .pf-factor-list : factor tilt rows (14e)
   - .pf-card-source : tiny data-freshness chip in card head
   ────────────────────────────────────────────────────────────── */

/* 3-up insight row */
.pf-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Tiny data-freshness chip used in card head right-edge */
.pf-card-source {
  font-size: 11px;
  color: var(--text-faint);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

/* ─── 14f: What changed today (full-width strip) ─── */
.pf-whatchanged {
  margin-top: 14px;
}
/* Iter 14g.a — AI narrative strip above the 3-column grid. Hidden by default;
   shown only when payload.narrative.text is present. */
.pf-wc-narrative {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 4px 0 16px;
  border: 1px solid var(--border-subtle, rgba(140, 140, 140, 0.18));
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(59, 130, 246, 0.04));
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text, #1f2937);
  flex-wrap: wrap;
}
.pf-wc-narr-icon {
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}
.pf-wc-narr-text {
  flex: 1 1 auto;
  min-width: 200px;
}
.pf-wc-narr-meta {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .pf-wc-narrative {
    font-size: 12.5px;
    padding: 10px 12px;
  }
  .pf-wc-narr-meta {
    font-size: 10px;
  }
}
.pf-wc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pf-wc-col {
  min-width: 0;
}
.pf-wc-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pf-wc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-wc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.pf-wc-row .pf-wc-tkr { font-weight: 600; color: var(--text-strong); }
.pf-wc-row .pf-wc-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-wc-row .pf-wc-pct { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); }
.pf-wc-empty { font-size: 13px; color: var(--text-faint); padding: 6px 8px; }

/* ─── 14a: Today's movers (winners/losers split) ─── */
.pf-movers-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pf-movers-col { min-width: 0; }
.pf-movers-h {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  opacity: 0.85;
}
.pf-movers-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pf-movers-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 13px;
}
.pf-movers-row .pf-mv-tkr { font-weight: 600; color: var(--text-strong); }
.pf-movers-row .pf-mv-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-movers-empty { font-size: 12px; color: var(--text-faint); padding: 4px 8px; }

/* ─── 14b: Earnings conviction roll-up ─── */
.pf-conv-buckets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-conv-bucket {
  display: grid;
  grid-template-columns: 90px 1fr 56px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.pf-conv-label {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-conv-bar-wrap {
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  overflow: hidden;
}
.pf-conv-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 200ms ease;
}
.pf-conv-count {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.pf-conv-buy    .pf-conv-label { color: var(--up); }
.pf-conv-buy    .pf-conv-bar   { background: var(--up); }
.pf-conv-hold   .pf-conv-label { color: #d9822b; }
.pf-conv-hold   .pf-conv-bar   { background: #d9822b; }
.pf-conv-sell   .pf-conv-label { color: var(--down); }
.pf-conv-sell   .pf-conv-bar   { background: var(--down); }
.pf-conv-none   .pf-conv-label { color: var(--text-faint); }
.pf-conv-none   .pf-conv-bar   { background: var(--text-faint); opacity: 0.5; }

/* ─── 14c: Signal health bars ─── */
.pf-sig-health {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pf-sig-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: center;
}
.pf-sig-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.pf-sig-stack {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  position: relative;
}
.pf-sig-seg {
  height: 100%;
  transition: width 200ms ease;
}
.pf-sig-seg-green { background: #2c8b3b; }
.pf-sig-seg-amber { background: #d9822b; }
.pf-sig-seg-red   { background: #d62828; }
.pf-sig-counts {
  display: flex;
  gap: 10px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-top: 4px;
  grid-column: 2;
}
.pf-sig-counts .pf-sig-c-g { color: #2c8b3b; }
.pf-sig-counts .pf-sig-c-a { color: #d9822b; }
.pf-sig-counts .pf-sig-c-r { color: #d62828; }

/* ─── 16E: Signal health — Criteria panel ─── */
.pf-sig-criteria-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 10px;
  text-transform: uppercase;
  transition: background .15s, color .15s;
  white-space: nowrap;
  align-self: center;
}
.pf-sig-criteria-btn:hover,
.pf-sig-criteria-btn.active {
  background: rgba(99,211,199,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.pf-sig-criteria-panel {
  border-top: 1px solid var(--border);
  margin: 0 -16px;
  padding: 12px 16px 10px;
  background: rgba(255,255,255,0.02);
}
.pf-sig-criteria-grid {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pf-sig-criteria-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
}
.pf-sig-criteria-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-sig-criteria-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-sig-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pf-sig-pill-g {
  background: rgba(44,139,59,.15);
  border-color: rgba(44,139,59,.35);
  color: #4ade80;
}
.pf-sig-pill-a {
  background: rgba(217,130,43,.15);
  border-color: rgba(217,130,43,.35);
  color: #fb923c;
}
.pf-sig-pill-r {
  background: rgba(214,40,40,.15);
  border-color: rgba(214,40,40,.35);
  color: #f87171;
}
@media (max-width: 600px) {
  .pf-sig-criteria-row { grid-template-columns: 1fr; gap: 4px; }
  .pf-sig-criteria-label { font-size: 10px; }
}

/* ─── 14d: Thematic exposure list ─── */
.pf-theme-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
}
.pf-theme-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.pf-theme-row:hover { background: rgba(255,255,255,0.04); }
.pf-theme-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.pf-theme-name {
  font-weight: 600;
  color: var(--text-strong);
}
.pf-theme-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.pf-theme-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1 / -1;
  margin-top: 6px;
}
.pf-theme-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.pf-theme-meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  grid-column: 1 / -1;
}

/* ─── 14e: Factor exposure list ─── */
.pf-factor-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 4px;
}
.pf-factor-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.pf-factor-name {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-factor-track {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.pf-factor-track::before {
  content: '';
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.18);
}
.pf-factor-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 4px;
}
.pf-factor-fill.pf-up   { background: #2c8b3b; }
.pf-factor-fill.pf-down { background: #d62828; }
.pf-factor-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}
.pf-factor-value.pf-up   { color: #2c8b3b; }
.pf-factor-value.pf-down { color: #d62828; }
.pf-factor-meta {
  font-size: 11px;
  color: var(--text-faint);
  grid-column: 2 / 3;
}

/* Responsive: stack on small screens */
@media (max-width: 980px) {
  .pf-row-3 { grid-template-columns: 1fr; }
  .pf-wc-grid { grid-template-columns: 1fr; gap: 14px; }
  .pf-movers-split { grid-template-columns: 1fr 1fr; }
  .pf-factor-row { grid-template-columns: 80px 1fr 46px; }
  .pf-sig-row { grid-template-columns: 92px 1fr; }
  .pf-conv-bucket { grid-template-columns: 70px 1fr 48px; }
}
@media (max-width: 600px) {
  .pf-movers-split { grid-template-columns: 1fr; }
}

/* ============================================================
   Iter 15c–15h — Performance pills, freshness pill, export menu,
   benchmark select, drilldown modal, welcome card.

   All styles namespaced under .pf- to match the rest of the file
   and keep the cascade contained. Dark-only (no light theme on
   portfolio yet); palette pulled from :root tokens above.
   ============================================================ */

/* ---- Freshness pill (header-right) ---------------------------- */
.pf-freshness-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pf-freshness-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pf-freshness-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}
.pf-freshness-pill.pf-fr-live {
  color: var(--up);
  border-color: rgba(14,179,91,0.35);
  background: var(--up-bg);
}
.pf-freshness-pill.pf-fr-live::before {
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(14,179,91,0.18);
  animation: pf-fr-pulse 2.4s ease-in-out infinite;
}
.pf-freshness-pill.pf-fr-stale {
  color: #d6a52b;
  border-color: rgba(214,165,43,0.35);
  background: rgba(214,165,43,0.10);
}
.pf-freshness-pill.pf-fr-stale::before { background: #d6a52b; }
.pf-freshness-pill.pf-fr-eod {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--surface-2);
}
.pf-freshness-pill.pf-fr-eod::before { background: var(--text-faint); }
@keyframes pf-fr-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(14,179,91,0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(14,179,91,0.08); }
}

/* ---- Export menu --------------------------------------------- */
.pf-export-wrap {
  position: relative;
  display: inline-flex;
}
.pf-export-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pf-export-trigger:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  color: var(--text-strong);
}
.pf-export-trigger svg { opacity: 0.85; }
.pf-export-caret { opacity: 0.7; font-size: 10px; }
.pf-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), var(--shadow-sm);
  padding: 6px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-export-menu[hidden] { display: none; }
.pf-export-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.pf-export-item:hover { background: var(--surface-hover); }
.pf-export-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.pf-export-item-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- Welcome card -------------------------------------------- */
.pf-welcome-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  margin: 16px 0;
  background: linear-gradient(135deg, var(--accent-bg) 0%, rgba(79,152,163,0.02) 100%);
  border: 1px solid rgba(79,152,163,0.35);
  border-radius: 12px;
}
.pf-welcome-card[hidden] { display: none; }
.pf-welcome-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(79,152,163,0.18);
  border-radius: 12px;
}
.pf-welcome-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 4px;
}
.pf-welcome-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.pf-welcome-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-welcome-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  transition: color 0.18s;
}
.pf-welcome-check {
  font-size: 16px;
  color: var(--text-faint);
  line-height: 1;
  width: 16px;
  text-align: center;
}
.pf-welcome-done { color: var(--text-muted); text-decoration: line-through; }
.pf-welcome-done .pf-welcome-check { color: var(--up); }
@media (max-width: 600px) {
  .pf-welcome-card { grid-template-columns: 1fr; }
  .pf-welcome-icon { width: 44px; height: 44px; font-size: 22px; }
}

/* ---- Performance pills (replace IRR tile) -------------------- */
.pf-kpi-perf { /* no extra layout; the pills below sit inside */ }
.pf-perf-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.pf-perf-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-strong);
  white-space: nowrap;
}
.pf-perf-pill.pf-up   { color: var(--up);   border-color: rgba(14,179,91,0.35); background: var(--up-bg); }
.pf-perf-pill.pf-down { color: var(--down); border-color: rgba(194,74,74,0.35); background: var(--down-bg); }

/* ---- Drillable KPI tiles ------------------------------------- */
.pf-kpi-drillable {
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.pf-kpi-drillable:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(79,152,163,0.18);
}
.pf-kpi-drillable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Benchmark select ---------------------------------------- */
.pf-benchmark-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.pf-benchmark-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.pf-benchmark-select {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 24px 4px 9px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a0a0aa' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.pf-benchmark-select:hover {
  border-color: var(--accent);
  color: var(--text-strong);
}
.pf-benchmark-select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ---- Drilldown modal ----------------------------------------- */
.pf-drill-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-drill-modal[hidden] { display: none; }
.pf-drill-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pf-drill-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pf-drill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.pf-drill-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0.01em;
}
.pf-drill-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.pf-drill-close:hover { background: var(--surface-hover); color: var(--text-strong); }
.pf-drill-sub {
  padding: 8px 18px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.pf-drill-body {
  padding: 12px 18px 18px;
  overflow: auto;
}
.pf-drill-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pf-drill-table th,
.pf-drill-table td {
  padding: 8px 6px;
  text-align: left;
  border-bottom: 1px solid var(--border2);
}
.pf-drill-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pf-drill-table td.num,
.pf-drill-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-drill-table tbody tr:hover { background: var(--surface-hover); }
.pf-drill-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pf-drill-pill {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.pf-drill-pill.pf-up   { border-color: rgba(14,179,91,0.35); background: var(--up-bg); }
.pf-drill-pill.pf-down { border-color: rgba(194,74,74,0.35); background: var(--down-bg); }
.pf-drill-pill-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.pf-drill-pill-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.pf-drill-pill.pf-up   .pf-drill-pill-value { color: var(--up); }
.pf-drill-pill.pf-down .pf-drill-pill-value { color: var(--down); }
.pf-drill-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 6px;
  border-top: 1px solid var(--border2);
}
body.pf-modal-open { overflow: hidden; }

/* Iter 15i — sector rows are clickable: subtle hover lift + cursor + focus ring
   so the drilldown affordance is discoverable but doesn't shout. Matches the
   existing pf-kpi-drillable treatment. */
.pf-sector-row-drillable { cursor: pointer; transition: background .12s ease, transform .12s ease; }
.pf-sector-row-drillable:hover { background: var(--row-hover, rgba(0,0,0,.025)); }
.pf-sector-row-drillable:focus-visible { outline: 2px solid var(--accent, #5a8dff); outline-offset: -2px; border-radius: 6px; }

/* Iter 15j — Manage Brokerage Accounts pill, sits left of the freshness pill
   in the portfolio header. Same height / radius / font-size as
   .pf-freshness-pill so the row remains visually balanced; tinted teal to
   match the dashboard accent (which is also the colour of the active
   "Dashboard" tab and the chart line). Hover slightly intensifies the fill,
   focus-visible gets a 2px ring for keyboard users. */
.pf-brokerage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(79, 152, 163, 0.15);
  border: 1px solid rgba(79, 152, 163, 0.45);
  color: #4f98a3;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}
.pf-brokerage-pill:hover {
  background: rgba(79, 152, 163, 0.25);
  border-color: rgba(79, 152, 163, 0.65);
  color: #5fb0bd;
}
.pf-brokerage-pill:active { transform: translateY(1px); }
.pf-brokerage-pill:focus-visible {
  outline: 2px solid #4f98a3;
  outline-offset: 2px;
}
.pf-brokerage-pill svg { flex: 0 0 auto; opacity: 0.9; }

/* On narrow screens collapse the label so the row doesn't wrap awkwardly. */
@media (max-width: 720px) {
  .pf-brokerage-pill span { display: none; }
  .pf-brokerage-pill { padding: 4px 8px; }
}

/* Iter 15k — Brokerage logos on the holdings table.
   .pf-broker-logo is a 20px square that holds either an <img> (Clearbit
   logo) or a coloured-initials fallback span. .pf-broker-logo-inline is the
   variant rendered next to the ticker symbol inside the holding cell — it's
   slightly smaller (14px) and uses lower opacity so it doesn't compete with
   the holding company logo. .pf-broker-cell wraps the Portfolios-column
   logo + chip so they align nicely. */
.pf-broker-cell { display: inline-flex; align-items: center; gap: 6px; }
.pf-broker-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2, rgba(255,255,255,0.04));
  flex: 0 0 auto;
}
.pf-broker-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.pf-broker-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* Inline variant inside the Holding cell: smaller + subtle. */
.pf-broker-logo-inline { width: 14px; height: 14px; border-radius: 3px; opacity: 0.75; margin-left: 6px; vertical-align: middle; }
.pf-broker-logo-inline .pf-broker-logo-inline-fallback,
.pf-broker-logo-inline .pf-broker-logo-fallback { font-size: 8px; }

/* Holding cell layout: ticker symbol + broker logo on one inline row. */
.pf-holding-ticker-row {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* ============================================================
   Iter 15O — Info icon button + per-panel info modal.
   Click any ⓘ button on a KPI tile or card head to open a modal
   explaining what the panel shows, how it's calculated, and why
   it matters. Reuses the drill-modal layout pattern from 15g.
   ============================================================ */
.pf-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background 120ms ease, color 120ms ease;
}
.pf-info-btn:hover,
.pf-info-btn:focus-visible {
  background: var(--surface-hover);
  color: var(--text-strong);
  outline: none;
}
.pf-info-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(80, 130, 255, 0.35);
}

/* Modal — same overlay + panel pattern as .pf-drill-modal but a
   narrower body since this is text-only and shouldn't fill the
   viewport. */
.pf-info-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pf-info-modal[hidden] { display: none; }
.pf-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.pf-info-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.pf-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.pf-info-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.3;
}
.pf-info-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.pf-info-close:hover { background: var(--surface-hover); color: var(--text-strong); }
.pf-info-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.pf-info-section + .pf-info-section { margin-top: 16px; }
.pf-info-section-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.pf-info-section-h::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent-2, #5082ff);
}
.pf-info-section p {
  margin: 0;
  color: var(--text);
}
.pf-info-section p + p { margin-top: 8px; }
.pf-info-section code {
  font-family: ui-monospace, Menlo, Monaco, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-hover);
  color: var(--text-strong);
}

/* ──────────────────────────────────────────────────────────────────
   Iter 13h — Dividend calendar strip + utility colours
   ────────────────────────────────────────────────────────────────── */
.pf-warn  { color: #e59500; }
.pf-dim   { color: var(--text-faint); font-size: 11px; }

/* Calendar strip — horizontal timeline of upcoming ex-div events */
.pf-div-calendar {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pf-div-calendar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
  margin: 0 0 12px;
}
.pf-div-cal-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.pf-div-cal-track::-webkit-scrollbar { height: 4px; }
.pf-div-cal-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.pf-div-cal-week {
  flex: 0 0 auto;
  min-width: 100px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.pf-div-cal-week-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin: 0 0 6px;
}
.pf-div-cal-event {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
}
.pf-div-cal-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--surface);
  flex-shrink: 0;
}
.pf-div-cal-info {
  flex: 1;
  min-width: 0;
}
.pf-div-cal-ticker {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-div-cal-date {
  font-size: 10px;
  color: var(--text-faint);
}
.pf-div-cal-empty {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}
/* Urgency highlight on the week card */
.pf-div-cal-week.is-urgent {
  border-color: rgba(214, 40, 40, 0.4);
  background: rgba(214, 40, 40, 0.05);
}
.pf-div-cal-week.is-soon {
  border-color: rgba(229, 149, 0, 0.4);
  background: rgba(229, 149, 0, 0.05);
}

/* ──────────────────────────────────────────────────────────────────
   Iter 13i — Dashboard sub-tabs (Summary / Dividend Overview)
   ────────────────────────────────────────────────────────────────── */

/* Sub-tab nav — mirrors .pf-h-subtabs pattern exactly */
.pf-dash-subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--border);
}
.pf-dash-subtab {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.pf-dash-subtab:hover { color: var(--text); }
.pf-dash-subtab.active {
  color: var(--accent-2, #5082ff);
  border-bottom-color: var(--accent, #5082ff);
}

/* Sub-panels — hidden by default, active shows */
.pf-dash-subpanel { display: none; }
.pf-dash-subpanel.active { display: block; }

/* ── Dividend Overview layout ── */
.pf-div-ov-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .pf-div-ov-row { grid-template-columns: 1fr; }
}
.pf-div-ov-card { flex: 1; }
.pf-div-ov-kpis {
  display: flex;
  gap: 20px;
  font-size: 12px;
  margin-top: 4px;
  color: var(--text-muted);
}
.pf-div-ov-kpis strong {
  color: var(--text-strong);
  font-weight: 600;
}
.pf-div-ov-chart-wrap {
  position: relative;
  margin-top: 14px;
  min-height: 220px;  /* Iter 13n: increased from 160px to give top-labels room */
}
.pf-div-ov-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

/* ── Annual income breakdown bar list ── */
.pf-div-income-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-div-income-row {
  display: grid;
  grid-template-columns: 120px 1fr 80px;
  align-items: center;
  gap: 10px;
}
.pf-div-income-ticker {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-div-income-bar-wrap {
  height: 8px;
  background: var(--surface-hover);
  border-radius: 4px;
  overflow: hidden;
}
.pf-div-income-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--accent, #5082ff);
  transition: width 0.4s ease;
}
.pf-div-income-val {
  font-size: 12px;
  color: var(--text);
  text-align: right;
}

/* ── Events grid ── */
.pf-div-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.pf-div-event-card {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pf-div-event-card.is-today  { border-color: rgba(80,130,255,0.45); }
.pf-div-event-card.is-urgent { border-left: 3px solid var(--down, #d62828); }
.pf-div-event-card.is-soon   { border-left: 3px solid #e59500; }
.pf-div-event-card.pf-past   { opacity: 0.55; }
/* Ex-dividend date block: amber accent instead of teal */
.pf-div-event-date-block.is-exdiv .pf-div-event-day   { color: #e59500; }
.pf-div-event-date-block.is-exdiv .pf-div-event-month { color: #e5950099; }
.pf-div-event-date-block {
  text-align: center;
  min-width: 34px;
}
.pf-div-event-day {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1;
}
.pf-div-event-month {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-top: 2px;
}
.pf-div-event-body { flex: 1; min-width: 0; }
.pf-div-event-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-2, #5082ff);
  margin-bottom: 3px;
}
.pf-div-event-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-div-event-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.pf-div-events-empty {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  padding: 12px 0;
}
.pf-div-ov-income-card { margin-bottom: 16px; }

/* ─────────────────────────────────────────────────────────────────────
   Iter 13k — Dividend Income Forecast Panel
   ───────────────────────────────────────────────────────────────────── */

/* Card margin matching income card */
.pf-div-forecast-card { margin-bottom: 16px; }

/* Header row: title+KPIs on left, legend chips on right */
.pf-div-forecast-card .pf-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* Legend chip strip — top-right of card header */
.pf-div-fcst-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 340px;
}
.pf-div-fcst-legend-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.pf-div-fcst-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* YoC ticker strip below the chart */
.pf-div-fcst-yoc-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pf-div-fcst-yoc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
}
.pf-div-fcst-yoc-ticker {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-strong);
  min-width: 62px;
}
.pf-div-fcst-yoc-bar-wrap {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  min-width: 40px;
  max-width: 80px;
}
.pf-div-fcst-yoc-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--accent-2, #5082ff);
  transition: width 0.3s ease;
}
.pf-div-fcst-yoc-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 38px;
  text-align: right;
}

/* Cumulative line series colour tokens */
.pf-div-fcst-line-cum  { color: #6FBCC9; }   /* teal — cumulative income */
.pf-div-fcst-line-roll { color: #9B7FD4; }   /* purple — rolling 12m average */

@media (max-width: 540px) {
  .pf-div-fcst-legend { display: none; }
  .pf-div-fcst-yoc-item { min-width: 100%; }
}

/* ============================================================
   Holdings Reconciliation view (Iter 16B)
   ============================================================ */

.pf-recon-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Table layout */
.pf-recon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text);
}

/* Header row */
.pf-recon-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface2, #1a1a22);
}
.pf-recon-th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pf-recon-col-holding { text-align: left; min-width: 180px; }
.pf-recon-col-broker  { text-align: left; min-width: 160px; }
.pf-recon-col-num     { text-align: right; min-width: 100px; }

/* Summary row (one per ticker) */
.pf-recon-summary {
  background: var(--surface, #1e1e28);
  border-top: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
.pf-recon-summary:hover { background: rgba(79,152,163,0.06); }
.pf-recon-summary.open  { background: rgba(79,152,163,0.04); }

/* Expand/collapse chevron on summary row holding cell */
.pf-recon-summary .pf-recon-col-holding::before {
  display: none; /* handled via ::after on the holding cell instead */
}
.pf-recon-summary td:first-child .pf-recon-holding-cell::before {
  content: '▶';
  font-size: 9px;
  color: var(--text-faint, #555570);
  margin-right: 6px;
  transition: transform 0.15s;
  display: inline-block;
  vertical-align: middle;
}
.pf-recon-summary.open td:first-child .pf-recon-holding-cell::before {
  transform: rotate(90deg);
}

/* Sub-rows (one per broker/portfolio) */
.pf-recon-subrow {
  background: var(--surface3, #17171f);
  border-top: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.pf-recon-subrow:hover { background: rgba(255,255,255,0.03); }
.pf-recon-hidden { display: none; }

/* Sub-row indent spacer */
.pf-recon-sub-indent {
  width: 24px;
  border-right: 2px solid rgba(79,152,163,0.25);
}

/* Shared cell */
.pf-recon-td {
  padding: 9px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.pf-recon-col-num.pf-recon-td { text-align: right; font-variant-numeric: tabular-nums; }

/* Holding cell layout */
.pf-recon-holding-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-recon-holding-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pf-recon-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-recon-ticker {
  font-size: 10px;
  color: var(--text-faint, #555570);
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Badges */
.pf-recon-multi-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(79,152,163,0.15);
  color: var(--accent, #4f98a3);
  border: 1px solid rgba(79,152,163,0.3);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  margin-right: 6px;
  white-space: nowrap;
}

/* Price mismatch warning badge */
.pf-recon-disc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(240,160,40,0.12);
  color: #f0a028;
  border: 1px solid rgba(240,160,40,0.3);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  white-space: nowrap;
  cursor: help;
}
.pf-recon-disc-price {
  color: #f0a028;
  font-weight: 700;
}

/* P&L colour */
.pf-recon-pos { color: var(--gain, #0EB35B); }
.pf-recon-neg { color: var(--loss, #e05c5c); }

/* Bold totals */
.pf-recon-bold { font-weight: 600; }

/* Responsive: hide less-critical columns on small screens */
@media (max-width: 900px) {
  .pf-recon-col-num:nth-child(4),
  .pf-recon-col-num:nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .pf-recon-col-num:nth-child(5) { display: none; }
}

/* ── Portfolios sub-tab (Iter 16D) ───────────────────────────────── */
.pf-broker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  padding: 4px 0 8px;
}
.pf-broker-empty {
  color: var(--text-faint);
  font-size: 13px;
  padding: 32px 0;
  grid-column: 1 / -1;
  text-align: center;
}
/* Broker card */
.pf-broker-card {
  background: var(--card-bg, #16161e);
  border: 1px solid var(--border, #2a2a36);
  border-radius: 12px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.pf-broker-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--broker-accent, var(--accent-2));
  border-radius: 12px 12px 0 0;
}
/* Header row: logo + name + allocation badge */
.pf-broker-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-broker-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--bg-subtle, #1e1e2a);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}
.pf-broker-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.pf-broker-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.pf-broker-alloc-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-subtle, #1e1e2a);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
}
/* KPI row */
.pf-broker-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.pf-broker-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-broker-kpi-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pf-broker-kpi-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.pf-broker-kpi-value.up   { color: var(--green, #4caf7d); }
.pf-broker-kpi-value.down { color: var(--red,   #e05252); }
.pf-broker-kpi-sub {
  font-size: 11px;
  color: var(--text-faint);
}
/* Allocation bar */
.pf-broker-alloc-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pf-broker-alloc-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-faint);
}
.pf-broker-alloc-bar-bg {
  height: 5px;
  background: var(--bg-subtle, #1e1e2a);
  border-radius: 3px;
  overflow: hidden;
}
.pf-broker-alloc-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--broker-accent, var(--accent-2));
  transition: width 0.5s ease;
}
/* Holdings mini-list */
.pf-broker-holdings-label {
  font-size: 11px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.pf-broker-holdings-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pf-broker-holding-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.pf-broker-holding-ticker {
  font-weight: 600;
  color: var(--text);
  font-size: 12px;
}
.pf-broker-holding-name {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf-broker-holding-value {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.pf-broker-holding-pct {
  font-size: 11px;
  white-space: nowrap;
}
.pf-broker-holding-pct.up   { color: var(--green, #4caf7d); }
.pf-broker-holding-pct.down { color: var(--red,   #e05252); }
/* Divider */
.pf-broker-divider {
  height: 1px;
  background: var(--border);
  margin: 0 -20px;
}
/* Best/worst row */
.pf-broker-bw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pf-broker-bw-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-broker-bw-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}
.pf-broker-bw-ticker {
  font-size: 13px;
  font-weight: 700;
}
.pf-broker-bw-ticker.up   { color: var(--green, #4caf7d); }
.pf-broker-bw-ticker.down { color: var(--red,   #e05252); }
.pf-broker-bw-pct {
  font-size: 11px;
  color: var(--text-faint);
}
/* Sector pill row */
.pf-broker-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.pf-broker-sector-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-subtle, #1e1e2a);
  border: 1px solid var(--border);
  color: var(--text-faint);
  white-space: nowrap;
}
.pf-broker-sector-pill strong { color: var(--text); }
/* Responsive */
@media (max-width: 600px) {
  .pf-broker-grid { grid-template-columns: 1fr; }
/* ─── Iter 16C — Action menu dropdown & Holdings edit panel ──────────── */

/* Mini dropdown that appears below ⋯ */
.pf-action-menu {
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  min-width: 130px;
  z-index: 9100;
  overflow: hidden;
  animation: pfMenuIn 0.12s ease;
}
@keyframes pfMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.pf-action-menu-item {
  display: block; width: 100%;
  padding: 9px 14px;
  background: none; border: none;
  color: var(--text, #e0e0e0);
  font-size: 13px; text-align: left;
  cursor: pointer; transition: background .12s;
}
.pf-action-menu-item:hover { background: var(--hover-bg, rgba(255,255,255,.07)); }
.pf-action-delete { color: #e55; }
.pf-action-delete:hover { background: rgba(220,50,50,.12) !important; }

/* ─── Slide-in edit panel ──────────────────────────────────────────────── */
.pf-edit-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 360px;
  max-width: 95vw;
  background: var(--card-bg, #1a1a2e);
  border-left: 1px solid var(--border, rgba(255,255,255,.12));
  box-shadow: -8px 0 40px rgba(0,0,0,.55);
  z-index: 9200;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.pf-edit-panel.pf-edit-panel-open { transform: translateX(0); }

.pf-edit-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.1));
  flex-shrink: 0;
}
.pf-edit-panel-title {
  font-size: 15px; font-weight: 600; color: var(--text, #e0e0e0);
}
.pf-edit-panel-close {
  background: none; border: none;
  color: var(--text-muted, #888); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 2px 6px;
  border-radius: 4px; transition: background .12s, color .12s;
}
.pf-edit-panel-close:hover { background: rgba(255,255,255,.08); color: var(--text); }

.pf-edit-panel-body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

.pf-edit-field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.pf-edit-field label {
  font-size: 11.5px; font-weight: 500;
  color: var(--text-muted, #888); text-transform: uppercase; letter-spacing: .04em;
}
.pf-edit-req { color: var(--accent-red, #e55); }
.pf-edit-input {
  background: var(--input-bg, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 7px;
  color: var(--text, #e0e0e0);
  font-size: 13.5px;
  padding: 8px 11px;
  outline: none;
  transition: border-color .15s;
  width: 100%; box-sizing: border-box;
}
.pf-edit-input:focus { border-color: var(--accent, #5082ff); }
select.pf-edit-input { cursor: pointer; }
.pf-edit-field-row { display: flex; gap: 10px; }

.pf-edit-hint {
  font-size: 11.5px; color: var(--text-faint, #666);
  background: rgba(80,130,255,.07);
  border: 1px solid rgba(80,130,255,.15);
  border-radius: 6px; padding: 8px 11px;
}

.pf-edit-panel-actions { display: flex; gap: 10px; margin-top: 4px; }
.pf-edit-btn {
  flex: 1; padding: 10px 0;
  border-radius: 8px; border: none;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: opacity .15s, background .15s;
}
.pf-edit-btn:disabled { opacity: .5; cursor: not-allowed; }
.pf-edit-btn-primary {
  background: var(--accent, #5082ff); color: #fff;
}
.pf-edit-btn-primary:hover:not(:disabled) { opacity: .88; }
.pf-edit-btn-secondary {
  background: var(--hover-bg, rgba(255,255,255,.08));
  color: var(--text-muted, #aaa);
}
.pf-edit-btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,.13); }
.pf-edit-error {
  font-size: 12px; color: #e55;
  background: rgba(220,50,50,.1); border: 1px solid rgba(220,50,50,.2);
  border-radius: 6px; padding: 8px 11px;
}

@media (max-width: 480px) {
  .pf-edit-panel { width: 100%; border-left: none; }
  .pf-edit-field-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   Iter 16S — Correlation Heatmap
   Full-width card · canvas renderer · legend · insight bullets
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card container ──────────────────────────────────────────────── */
.pf-corr-card {
  grid-column: 1 / -1;         /* full-width in any grid context */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Window selector buttons ─────────────────────────────────────── */
.pf-corr-win-group {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.pf-corr-win-btn {
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,.12));
  background: transparent;
  color: var(--text-muted, #999);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.pf-corr-win-btn:hover {
  background: var(--hover-bg, rgba(255,255,255,.07));
  color: var(--text, #e0e0e0);
}
.pf-corr-win-btn.active {
  background: var(--accent, #4F98A3);
  border-color: var(--accent, #4F98A3);
  color: #fff;
}

/* ── Canvas wrapper (scrollable on small screens) ────────────────── */
.pf-corr-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* relative for tooltip positioning */
  position: relative;
}
#pfCorrHeatmap {
  display: block;
  max-width: 100%;
  /* height set dynamically by JS */
}

/* ── Tooltip ─────────────────────────────────────────────────────── */
.pf-corr-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--card-bg, rgba(24,26,32,.97));
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text, #e0e0e0);
  white-space: nowrap;
  z-index: 20;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* ── Colour-scale legend bar ─────────────────────────────────────── */
.pf-corr-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.pf-corr-leg-label {
  font-size: 11px;
  color: var(--text-muted, #888);
  min-width: 16px;
  text-align: center;
}
.pf-corr-leg-bar {
  border-radius: 4px;
  display: block;
  height: 12px;
  width: 180px;
}

/* ── Insight bullets ─────────────────────────────────────────────── */
.pf-corr-insights {
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  padding-top: 10px;
}
.pf-corr-insight-list {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-corr-insight-list li {
  font-size: 12.5px;
  color: var(--text-muted, #aaa);
  line-height: 1.5;
  padding-left: 4px;
}
.pf-corr-insight-list li strong {
  color: var(--text, #ddd);
}
.pf-corr-ins-badge {
  display: inline-block;
  font-weight: 600;
  font-size: 11.5px;
  margin-right: 4px;
  min-width: 110px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pf-corr-win-btn { padding: 3px 7px; font-size: 10.5px; }
  .pf-corr-leg-bar { width: 120px; }
  .pf-corr-ins-badge { min-width: 80px; }
}
/* ═══════════════════════════════════════════════════════════════════
   Iter 16W — Sector Triage System
   Holdings table pencil · Unknown row accent · Triage banner ·
   Inline triage panel · Inline reassign strip
   ═══════════════════════════════════════════════════════════════════ */

/* ── Unknown sector row accent ───────────────────────────────────── */
.pf-sector-row-unknown { --sector-color: var(--amber,#f39c12); }
.pf-sector-icon-unknown {
  background: rgba(243,156,18,.15) !important;
  color: var(--amber,#f39c12) !important;
  border: 1px solid rgba(243,156,18,.28);
}
.pf-sector-name-row { display: flex; align-items: center; gap: 5px; }

/* ── Triage banner ───────────────────────────────────────────────── */
.pf-triage-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 14px;
  background: rgba(243,156,18,.08);
  border: 1px solid rgba(243,156,18,.22);
  border-radius: 8px; margin-bottom: 10px;
  color: #c8922a; font-size: 12.5px; transition: background .15s;
}
.pf-triage-banner-open { background: rgba(243,156,18,.13); border-color: rgba(243,156,18,.35); }
.pf-triage-banner-left { display: flex; align-items: flex-start; gap: 7px; }
.pf-triage-banner-btn {
  flex-shrink: 0; padding: 5px 13px;
  background: #4F98A3; color: #fff;
  border: none; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: opacity .14s; white-space: nowrap;
  letter-spacing: .01em;
}
.pf-triage-banner-btn:hover { opacity: .85; }

/* ── Triage panel (inline, no overlay) ──────────────────────────── */
.pf-triage-panel {
  background: #22242c;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; overflow: hidden; margin-bottom: 10px;
  animation: pfTriageIn .18s ease;
}
@keyframes pfTriageIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pf-triage-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; gap: 8px;
  border-bottom: 1px solid var(--border,rgba(255,255,255,.08));
  background: rgba(243,156,18,.06);
  color: #c8922a; font-size: 12.5px; font-weight: 500;
}
.pf-triage-head-left { display: flex; align-items: center; gap: 7px; }
.pf-triage-close {
  background: none; border: none; color: var(--text-muted,#888);
  font-size: 14px; cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
.pf-triage-close:hover { color: var(--text,#ddd); }

/* ── Triage list ─────────────────────────────────────────────────── */
.pf-triage-list { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pf-triage-row {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 10px; align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  transition: background .12s;
}
.pf-triage-row:last-child { border-bottom: none; }
.pf-triage-row:hover { background: rgba(255,255,255,.04); }
.pf-triage-row-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-triage-ticker { font-size: 13px; font-weight: 700; color: #e8eaed; letter-spacing: .02em; }
.pf-triage-name { font-size: 11px; color: var(--text-muted,#888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-triage-row-mid { display: flex; align-items: center; }
.pf-triage-row-mid-full { grid-column: unset; flex: 1; }

/* ── Custom sector dropdown (no native <select> — avoids Safari iOS white pill) ── */
.pf-sel-wrap {
  position: relative; width: 100%;
  background: #1e2027;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: border-color .14s;
  outline: none;
}
.pf-sel-wrap:focus,
.pf-sel-wrap.pf-sel-open { border-color: var(--accent,#4F98A3); box-shadow: 0 0 0 2px rgba(79,152,163,.2); }
.pf-sel-trigger {
  padding: 7px 28px 7px 10px;
  font-size: 12.5px; color: #d4d6db; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 32px; line-height: 18px;
}
.pf-sel-trigger.pf-sel-placeholder { color: #666; }
.pf-sel-caret {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  pointer-events: none; display: flex; align-items: center;
  transition: transform .15s;
}
.pf-sel-caret.pf-sel-caret-open { transform: translateY(-50%) rotate(180deg); }

/* Dropdown list */
.pf-sel-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #1e2027;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  z-index: 9000;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  animation: pfSelIn .12s ease;
}
@keyframes pfSelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pf-sel-option {
  padding: 9px 12px;
  font-size: 12.5px; color: #d4d6db;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .1s;
}
.pf-sel-option:last-child { border-bottom: none; }
.pf-sel-option-ph { color: #555; font-style: italic; cursor: default; }
.pf-sel-option:not(.pf-sel-option-ph):hover,
.pf-sel-option.pf-sel-option-focused { background: rgba(79,152,163,.18); color: #fff; }
.pf-sel-option.pf-sel-option-selected {
  color: var(--accent,#4F98A3); font-weight: 600;
  background: rgba(79,152,163,.1);
}
.pf-sel-option.pf-sel-option-selected::after {
  content: ' ✓'; font-size: 11px;
}

/* ── Done row ────────────────────────────────────────────────────── */
.pf-triage-row-done { opacity: .65; pointer-events: none; grid-template-columns: 1fr; }
.pf-triage-done-inner { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.pf-triage-done-label { font-size: 12px; color: var(--accent,#4F98A3); font-weight: 500; }

/* ── Triage footer ───────────────────────────────────────────────── */
.pf-triage-footer {
  padding: 10px 14px; border-top: 1px solid var(--border,rgba(255,255,255,.08));
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.pf-triage-footer-err { font-size: 11.5px; color: #e06060; flex: 1; }
.pf-triage-save-all-btn {
  padding: 7px 24px; background: #4F98A3; color: #fff;
  border: none; border-radius: 7px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .14s; letter-spacing: .01em; white-space: nowrap;
}
.pf-triage-save-all-btn:disabled { opacity: .5; cursor: not-allowed; }
.pf-triage-save-all-btn:hover:not(:disabled) { opacity: .85; }

@media (max-width: 600px) {
  .pf-triage-row { grid-template-columns: 1fr; gap: 6px; }
  .pf-triage-row-left { flex-direction: row; align-items: center; gap: 6px; }
  .pf-triage-banner { flex-direction: column; align-items: flex-start; }
}