/* ── Page-level max-width container ── */
.page-inner {
  width: 100%;
}

/* Nav row owns its own stacking context so dropdowns (tab overflow, export
   menu) render above the tab-content panels that follow it in source order.
   Must rank below --z-header so the sticky header occludes the tab buttons
   when they scroll underneath it, not the other way around. */
#nav-row {
  position: relative;
  z-index: var(--z-navrow);
}

/* ── Tab bar: horizontal scroll, no wrap ── */
.tab-bar {
  overflow-x: clip;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-top: -2px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-bar-right {
  flex-shrink: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* ── Chart control separators ── */
.ctrl-sep {
  width: 1px; height: 16px;
  background: var(--border);
  opacity: 0.6;
  flex-shrink: 0;
  align-self: center;
}

/* ── Summary card number sizing ── */
#card-total-value #total-value { font-size: 1.75rem; line-height: 1.1; }
#card-total-value,
#card-total-pnl,
#card-day-change,
#card-positions,
#card-movers {
  display: flex; flex-direction: column;
  container-type: inline-size;
  min-width: 0;
  overflow: hidden; /* clip content that exceeds the card — prevents value/stat collision */
}

/* Card label: single line so all card headers stay the same height,
   keeping the headline values visually aligned across cards */
.card-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* When a card-label also anchors a tooltip, the overflow:hidden above would
   clip the absolutely-positioned info-bubble at the card edge. .stat-tip is
   already declared overflow:visible in 03-components.css, but .card-label's
   single-class rule above lives in the same cascade tier — the combined
   selector here wins by higher specificity and keeps the ellipsis behaviour
   intact for plain labels. */
.card-label.stat-tip { overflow: visible; }

/* Headline values: never overflow the card; consistent line-height keeps
   all values at the same visual baseline across cards (text-2xl default is
   line-height:2rem which would shift text ~2-3px lower than the 1.1 set on
   #total-value — unifying here removes that offset on all sizes) */
#total-value, #total-pnl, #day-change, #pos-count {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  flex-shrink: 0;
  line-height: 1.1;
}
/* Baseline rows (value + trend arrow) must also clip cleanly */
#card-total-pnl .flex.items-baseline,
#card-day-change .flex.items-baseline { min-width: 0; overflow: hidden; }

/* Scale headline down as cards narrow */
@container (max-width: 185px) {
  #total-value { font-size: 1.35rem !important; }
  #total-pnl, #day-change, #pos-count { font-size: 1.15rem; }
}
@container (max-width: 145px) {
  #total-value { font-size: 1.05rem !important; }
  #total-pnl, #day-change, #pos-count { font-size: 0.95rem; }
}

/* Positions allocation rows: label fixed, value clips if somehow still tight */
#card-positions .flex.justify-between { gap: 0.25rem; }
#card-positions .flex.justify-between > span:first-child { flex-shrink: 0; }
#card-positions .flex.justify-between > span:last-child  {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: right;
}

/* Movers list: stretch to fill card height, rows distributed evenly */
#card-movers #movers-list { flex: 1; justify-content: space-evenly; }

/* ── Top movers strip ── */
#movers-strip { align-items: center; }
.mover-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: var(--radius-sm, 6px);
  font-size: 0.72rem; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer; transition: opacity 0.12s;
  white-space: nowrap;
}
.mover-pill:hover { opacity: 0.7; }
.mover-pill .mp-sym { color: var(--text-primary); }

/* ── History chart stats footer ── */
.stat-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 3px 9px; border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border); background: var(--bg-deep);
  white-space: nowrap;
}
.stat-chip .sc-label { font-size: 0.58rem; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; }
.stat-chip .sc-value { font-size: 0.72rem; font-family: ui-monospace, "SF Mono", monospace; color: var(--text-primary); }

/* ── Correlation canvas panel ── */
#correlation-panel { position: relative; }
#corr-canvas-wrap {
  padding: 16px;
  overflow-x: auto;
}
#corr-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 5px 10px;
  font-size: 0.72rem;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 10;
  display: none;
}

/* ── Rebalance visual bars ── */
.rebalance-bar-wrap {
  position: relative;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: visible;
  min-width: 80px;
}
.rebalance-bar-current {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-soft);
  opacity: 0.7;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}
.rebalance-bar-target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: var(--accent);
  border-radius: 1px;
  transform: translateX(-1px);
  transition: left 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ==============================================================
 * Valence brand personality
 * ============================================================== */
/* DM Mono for financial numbers — must beat the body * font-family above */
[data-theme="valence"] #table-body td,
[data-theme="valence"] .stat-chip .sc-value,
[data-theme="valence"] #total-value,
[data-theme="valence"] #total-pnl,
[data-theme="valence"] #day-change {
  font-family: "DM Mono", ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums;
}
/* Table row hover: faint grey tint */
[data-theme="valence"] #table-body tr:hover td {
  background: rgba(0,0,0,0.03);
}
/* Buttons: no fill change on hover — border darkens instead */
[data-theme="valence"] .tab-inactive:hover    { background: var(--bg-card); border-color: var(--accent); }
[data-theme="valence"] .period-inactive:hover { background: var(--bg-card); border-color: var(--accent); }
[data-theme="valence"] .btn-accent:hover      { opacity: 1; border-color: var(--text-sub); }
[data-theme="valence"] .btn-accent-warn:hover { opacity: 1; }

/* Valence body: dot-grid texture — depth without decoration */
[data-theme="valence"] body {
  background-image: radial-gradient(circle at 1px 1px, rgba(71,85,105,0.08) 1px, transparent 0);
  background-size: 22px 22px;
  background-color: var(--bg-surface);
}
/* Brand icon pill — accent-tinted container, adapts to every theme */
.brand-icon-pill {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 9px;
  padding: 5px 6px;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="valence"] .brand-icon-pill {
  background: color-mix(in srgb, var(--brand, var(--accent)) 10%, transparent);
}
.brand-icon-pill-lg { width: 56px; height: 56px; }

/* Brand wordmark — tracked all-caps: editorial contrast to dense data */
.brand-wordmark {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.brand-wordmark::first-letter {
  color: var(--accent);
}
[data-theme="valence"] .brand-wordmark {
  color: var(--brand);
}
[data-theme="valence"] .brand-wordmark::first-letter {
  color: var(--brand);
}

/* Account plan flag — shown right-aligned beside the email in Account Settings.
   Geometry/typography deliberately mirror the app's buttons (--radius-sm,
   1px border, normal case) so both states read as part of the button family:
   FREE echoes the soft neutral button (.btn-soft: --bg-deep fill, --text-sub
   text); PREMIUM echoes the filled accent button (.btn-accent) but in a fixed
   gold (theme-independent, so the paid tier is gold in every theme) and carries
   the ✦ motif from the upgrade modal. */
.plan-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}
.plan-flag.is-premium::before {
  content: "\2726"; /* ✦ — same premium motif as the upgrade modal */
  font-size: 0.85em;
  line-height: 1;
}
.plan-flag.is-premium {
  /* Filled accent button, in gold. Dark text (not the .btn-accent white) because
     white on gold fails WCAG AA (~2.6:1); dark text reaches ~6:1. */
  background: #d0a73a;
  color: #3a2c04;
  border-color: #b8901f;
}
.plan-flag.is-free {
  background: var(--bg-deep);
  color: var(--text-sub);
  border-color: var(--border);
}

/* ==============================================================
 * Page-load entrance animations
 * ============================================================== */

/* ── Header slides in from above ── */
@keyframes hdr-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
header { animation: hdr-enter 0.3s ease-out both; }

/* ── Summary cards stagger up into view ── */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
#card-total-value { animation: card-enter 0.38s ease-out both 40ms;  }
#card-total-pnl   { animation: card-enter 0.38s ease-out both 90ms;  }
#card-day-change  { animation: card-enter 0.38s ease-out both 140ms; }
#card-movers      { animation: card-enter 0.38s ease-out both 190ms; }
#card-positions   { animation: card-enter 0.38s ease-out both 240ms; }

/* ── Charts row fades in after cards ── */
#hist-card  { animation: card-enter 0.42s ease-out both 280ms; }
#alloc-card { animation: card-enter 0.42s ease-out both 320ms; }

/* ── Tab bar row and table card continue the stagger ── */
#nav-row    { animation: card-enter 0.38s ease-out both 360ms; }
#table-card { animation: card-enter 0.42s ease-out both 400ms; }

/* ── Tab content cards: don't lift on hover.
   The History/Allocation/summary cards have their transform pinned by the
   `card-enter` entrance animation (animation-fill-mode: both wins the cascade
   over `:hover { transform: ... }`), so they only show the theme's box-shadow
   / border / background hover change. Cards without that entrance animation
   (#markets-chart-card, #fx-chart-card, #charts-panel, the various *-panel
   tab containers) were free to apply the per-theme `:hover` transform and
   would visibly lift. Cancel just the transform so every tab card behaves
   like the History card — theme custom border/background/shadow hover is
   preserved. ── */
.t-card.t-card-content:hover { transform: none; }


/* ==============================================================
 * Summary card stable min-height
 * min-height prevents layout shift between skeleton and loaded state
 * ============================================================== */
#card-total-value,
#card-total-pnl,
#card-day-change,
#card-movers,
#card-positions {
  min-height: 160px;
  transition: box-shadow 0.22s ease, border-color 0.15s, transform 0.22s ease;
}

/* ==============================================================
 * Mover pill: scale on hover
 * ============================================================== */
.mover-pill {
  transition: opacity 0.12s, transform 0.15s ease-out;
}
.mover-pill:hover { opacity: 0.85; transform: scale(1.04); }