/* =====================================================================
   CPI Portal — Institutional refinement layer (2026-09-02)

   Loaded LAST on every portal page (accredited, retail, guest, admin), after
   cpi-portal.css, the page's own <style>, and mobile-fix.css. It does not
   change the palette or the fonts — the dark ground, gold accent, serif
   figures and mono labels are the house look. It changes what makes the
   portal feel like a template instead of an institution:

     1. Legibility: labels were 9px mono with 0.16–0.2em tracking. They are
        now 10px with calmer tracking; body/table text is 12.5–13px; figures
        use tabular numerals so columns of numbers line up.
     2. One navigation: the top tab strip (01 — Dashboard …) duplicated the
        sidebar on desktop. It is hidden at desktop widths; the phone layout
        keeps its bottom tab bar.
     3. Phones: the accredited dashboard stacked up to eighteen stat tiles
        before any content. The roster and YTD bars now scroll sideways as
        one row each, and the holdings PREVIEW cards show four fields
        (instrument, market value, unrealised P&L, %) instead of eight; the
        full portfolio page keeps every column.
     4. Consistent controls: one radius, one focus ring, one hover, and
        document status buttons that read as states, not as unfinished work.
   ===================================================================== */

/* ── 1. Legibility ─────────────────────────────────────────────────── */
.perf-label,
.section-title,
.nav-section-label,
.overline-mono,
.widget-header,
.re-alloc-title,
.doc-section-head,
.ps-label,
.ph-label,
.acct-stat-label,
.stat-box .l,
.page-header-over,
.rule-label,
.sidebar-plan-title,
.data-table th,
.admin-table th,
.doc-table th {
  font-size: 10px;
  letter-spacing: 0.13em;
}
.perf-label { margin-bottom: 6px; }
.perf-value {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.perf-sub { font-size: 10.5px; margin-top: 4px; }
.perf-stat { padding: 16px 20px; }

.nav-item { font-size: 13px; padding: 8px 16px 8px 16px; }
.nav-item svg { width: 14px; height: 14px; opacity: 0.85; }
.investor-chip { font-size: 12.5px; }
.accred-badge, .retail-badge { font-size: 9.5px; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 2px; }

.data-table td, .doc-table td { font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
.data-table td, .ps-value, .ph-value, .summary-val, .re-alloc-val, .acct-stat-value {
  font-variant-numeric: tabular-nums;
}
.summary-row { font-size: 12px; }
.summary-val { font-size: 11px; }
.ticker { font-size: 11.5px; letter-spacing: 0.02em; }
.view-all, .re-alloc-link, .qa-link, .pedro-link { font-size: 10.5px; letter-spacing: 0.06em; }
.page-header-title { font-size: 24px; }
.content { padding: 22px 26px; }
.two-col { gap: 20px; }
.widget { margin-bottom: 14px; }

/* Thin, quiet scrollbars — the default grey bar is the loudest thing on
   a dark page. */
.main::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
.main::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.main::-webkit-scrollbar-track, .sidebar::-webkit-scrollbar-track { background: transparent; }

/* ── 2. One navigation on desktop ──────────────────────────────────── */
@media (min-width: 769px) {
  .page-nav { display: none !important; }
}

/* ── 3. Phones ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Investor-base and YTD bars: one swipeable row each instead of a
     2-column stack of nine tiles. */
  #roster-bar.perf-bar, #ytd-bar.perf-bar,
  #roster-bar.perf-bar[style], #ytd-bar.perf-bar[style] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  #roster-bar.perf-bar::-webkit-scrollbar, #ytd-bar.perf-bar::-webkit-scrollbar { display: none; }
  /* 44%, not 48%: at 48% the tiles' dividers missed the two-column grid
     above by a few points and the next tile showed as a cut-off sliver; now
     the next tile plainly peeks in, so the row reads as one to swipe. */
  #roster-bar.perf-bar .perf-stat, #ytd-bar.perf-bar .perf-stat {
    flex: 0 0 44% !important;
    min-width: 140px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: none !important;
    scroll-snap-align: start;
    grid-column: auto !important;
  }

  /* Holdings PREVIEW cards: four fields, not eight. pwa.js stamps each
     <td> with data-label = its column header, which is what these match.
     The full portfolio table is untouched. */
  table.data-table.holdings-preview tbody tr:not(.holding-expand-row) > td[data-label="Position"],
  table.data-table.holdings-preview tbody tr:not(.holding-expand-row) > td[data-label="Mkt Price"],
  table.data-table.holdings-preview tbody tr:not(.holding-expand-row) > td[data-label="Cost Basis"],
  table.data-table.holdings-preview tbody tr:not(.holding-expand-row) > td[data-label="Avg Price"],
  table.data-table.holdings-preview tbody tr:not(.holding-expand-row) > td[data-label="Sector"] {
    display: none !important;
  }
  table.data-table.holdings-preview tbody tr:not(.holding-expand-row) { padding: 8px 14px; }

  .perf-label { font-size: 9.5px !important; letter-spacing: 0.1em !important; }
  .perf-value { font-size: 19px !important; }
  .perf-sub { font-size: 10px !important; }
  .content { padding: 14px !important; }
}

/* ── 4. Consistent controls ────────────────────────────────────────── */
:root { --radius: 3px; }
.status-btn, .qa-link, .signout-btn, .ibkr-cta, .btn, .btn-gold, .btn-outline,
.chart-toggle-btn, .btn-approve, .btn-reject, .btn-view, .switch {
  border-radius: var(--radius);
}
.status-btn {
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  min-width: 78px;
  text-align: center;
  display: inline-block;
}
/* A state, not a promise: muted, no border glow, reads as information. */
.status-btn.soon, .status-btn.pending {
  background: rgba(156,163,175,0.07);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: default;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.nav-item:focus-visible { outline-offset: -2px; }