/* portfolio/app.css — portseido-parity static foundation (Phase 1).
 *
 * Tokens from /tmp/portfolio_audit_2026-05-26/PHASE0_features.md §2A-2H.
 * Namespace: `.portseido-*`. NO Pico utility classes used (Pico provides
 * base reset only). Semantic HTML + custom classes.
 *
 * Mobile @768px: sidebar collapses (hidden, hamburger added — hamburger
 * interaction wired in Phase 2c). Dark mode via prefers-color-scheme.
 */

/* ---------- Design tokens ---------- */
:root {
  /* Color — primary */
  --color-primary: #550AFB;
  --color-primary-alt: #5B4CFF;
  --color-primary-light: #CDC8FF;

  /* Color — semantic */
  --color-success: #03C073;
  --color-danger: #FF5E57;

  /* Color — surfaces */
  --color-surface: #FFFFFF;
  --color-sidebar-bg: #F0F0F0;
  --color-zebra: #F8F8F8;
  --color-success-tint: #F1F9F7;
  --color-slate-panel: #CFD8DC;

  /* Color — text */
  --color-text-primary: rgba(0, 0, 0, 0.87);
  --color-text-secondary: rgba(0, 0, 0, 0.60);
  --color-text-tertiary: #9E9E9E;
  --color-text-on-primary: #FFFFFF;

  /* Color — chrome */
  --color-divider: rgba(0, 0, 0, 0.12);
  --color-divider-strong: #EEEEEE;
  --color-chart-neutral: #7590A4;

  /* Type scale (px) */
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-48: 48px;

  /* Font stack — Inter w/ system fallback per features §2A. */
  --font-stack: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* Radius */
  --radius-card: 12px;
  --radius-hero: 24px;
  --radius-pill: 999px;

  /* Layout */
  --sidebar-w: 215px;
  --header-h: 60px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #1A1A1A;
    --color-sidebar-bg: #242424;
    --color-zebra: #1F1F1F;
    --color-success-tint: rgba(3, 192, 115, 0.08);

    --color-text-primary: rgba(255, 255, 255, 0.87);
    --color-text-secondary: rgba(255, 255, 255, 0.60);
    --color-text-tertiary: rgba(255, 255, 255, 0.45);

    --color-divider: rgba(255, 255, 255, 0.12);
    --color-divider-strong: rgba(255, 255, 255, 0.18);
  }
}

/* ---------- Base reset (overlay on Pico) ---------- */
html, body {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-stack);
  font-size: var(--fs-16);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

ul, li { list-style: none; margin: 0; padding: 0; }

/* ---------- Sidebar ---------- */
.portseido-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--color-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;
  z-index: 20;
}

.portseido-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5) var(--space-5);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-18);
  letter-spacing: 0.02em;
}

.portseido-brand-glyph { font-size: var(--fs-24); }
.portseido-brand-wordmark { color: var(--color-primary); }

.portseido-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; }

.portseido-nav-list { display: flex; flex-direction: column; }

.portseido-nav-item > a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--fs-16);
  border-left: 4px solid transparent;
  transition: background-color 120ms ease, color 120ms ease;
}

.portseido-nav-item > a:hover {
  background: rgba(0, 0, 0, 0.04);
}

.portseido-nav-item--active > a {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-size: var(--fs-18);
  font-weight: 600;
}

.portseido-nav-item--stub > a { opacity: 0.55; cursor: not-allowed; }

.portseido-nav-icon { width: 24px; display: inline-flex; justify-content: center; }

.portseido-nav-group-label {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.portseido-nav-footer {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-divider);
}

/* ---------- Header ---------- */
.portseido-header {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--header-h);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  z-index: 15;
}

.portseido-nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: var(--space-2);
  flex-direction: column;
  gap: 4px;
}

.portseido-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-primary);
}

.portseido-portfolio-tabs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
}

.portseido-portfolio-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--fs-15);
  cursor: pointer;
  white-space: nowrap;
}

.portseido-portfolio-tab--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.portseido-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.portseido-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--fs-18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.portseido-icon-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-primary);
}

.portseido-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Main ---------- */
.portseido-main {
  padding: calc(var(--header-h) + var(--space-6)) var(--space-6) var(--space-8);
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ---------- Hero ---------- */
.portseido-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(520px, 2fr);
  gap: var(--space-8);
  align-items: start;
}

.portseido-hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portseido-hero-label {
  font-size: var(--fs-15);
  color: var(--color-text-secondary);
}

.portseido-hero-value {
  font-size: var(--fs-48);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.portseido-hero-deltas { display: flex; flex-direction: column; gap: var(--space-1); }
.portseido-hero-deltas--compact { gap: 2px; }

.portseido-delta {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.portseido-delta-value, .portseido-delta-pct { font-weight: 500; }
.portseido-delta-tag {
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.portseido-delta--positive {
  color: var(--color-success);
}
.portseido-delta--positive .portseido-delta-value,
.portseido-delta--positive .portseido-delta-pct {
  color: var(--color-success);
}

.portseido-delta--negative {
  color: var(--color-danger);
}
.portseido-delta--negative .portseido-delta-value,
.portseido-delta--negative .portseido-delta-pct {
  color: var(--color-danger);
}

.portseido-hero-updated {
  margin-top: var(--space-2);
  font-size: var(--fs-12);
  color: var(--color-text-tertiary);
}

.portseido-hero-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- Pill tabs (shared) ---------- */
.portseido-pill-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.portseido-pill {
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.portseido-pill--active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-text-primary);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .portseido-pill--active { background: rgba(255, 255, 255, 0.12); }
}

/* ---------- Counterfactual cards ---------- */
.portseido-cf-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.portseido-cf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portseido-cf-card-label {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.portseido-cf-card-value {
  font-size: var(--fs-30);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ---------- Chart section ---------- */
.portseido-chart {
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.portseido-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.portseido-zoom-pills {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.portseido-zoom-label {
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
  margin-right: var(--space-2);
}

.portseido-chart-legend {
  display: flex;
  gap: var(--space-5);
  font-size: var(--fs-13);
  color: var(--color-text-secondary);
}

.portseido-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.portseido-legend-item::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.portseido-legend-portfolio { color: var(--color-text-primary); }
.portseido-legend-spy { color: var(--color-chart-neutral); }
.portseido-legend-cash { color: var(--color-primary-light); }

.portseido-chart-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 380px;
}

/* Phase 2b — chart empty-state overlay (no Chart init yet) */
.portseido-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: var(--fs-14);
  font-style: italic;
  text-align: center;
  padding: var(--space-5);
  border: 1px dashed var(--color-divider-strong);
  border-radius: var(--radius-card);
  background: var(--color-zebra);
}

#perf-chart {
  width: 100% !important;
  height: 380px !important;
  display: block;
}

/* ---------- Portfolio cards row ---------- */
.portseido-section-heading {
  font-size: var(--fs-24);
  font-weight: 600;
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
}

.portseido-portfolio-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.portseido-portfolio-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.portseido-portfolio-card-label {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
}

.portseido-portfolio-card-value {
  font-size: var(--fs-21);
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ---------- Benchmarks bar ---------- */
.portseido-benchmarks-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.portseido-benchmark-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.portseido-benchmark-label {
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

.portseido-benchmark-value {
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--color-text-primary);
}

.portseido-benchmark-value em {
  font-style: normal;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

/* ---------- Holdings ---------- */
.portseido-holdings-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.portseido-holdings-header .portseido-section-heading { margin-bottom: 0; }

.portseido-holdings-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-divider-strong);
  border-radius: var(--radius-card);
  overflow-x: auto;
  box-shadow: var(--shadow-card);
}

.portseido-holdings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.portseido-holdings-table thead th {
  text-align: right;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.portseido-holdings-table thead th.portseido-th-ticker { text-align: left; }

/* Phase 2b — sortable column headers */
.portseido-holdings-table thead th.portseido-th-sortable {
  cursor: pointer;
  user-select: none;
}
.portseido-holdings-table thead th.portseido-th-sortable:hover {
  color: var(--color-text-secondary);
}
.portseido-holdings-table thead th[data-sort-active="true"] {
  color: var(--color-primary);
}
.portseido-holdings-table thead th[data-sort-active="true"]::after {
  content: " \25B2";
  font-size: var(--fs-10);
}
.portseido-holdings-table thead th[data-sort-active="true"][data-sort-dir="desc"]::after {
  content: " \25BC";
}

.portseido-holdings-table tbody td {
  text-align: right;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider-strong);
  color: var(--color-text-primary);
}

.portseido-holdings-table tbody td:first-child { text-align: left; }

.portseido-holdings-table tbody tr:nth-child(even) td {
  background: var(--color-zebra);
}

.portseido-holdings-table tbody tr:last-child td { border-bottom: 0; }

.portseido-holdings-empty td {
  text-align: center;
  color: var(--color-text-tertiary);
  padding: var(--space-6);
}

.portseido-holdings-empty em { font-style: normal; }

/* ---------- Mobile responsive (≤768px) ---------- */
@media (max-width: 768px) {
  .portseido-sidebar {
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }
  .portseido-sidebar.portseido-sidebar--open {
    transform: translateX(0);
  }
  .portseido-header {
    left: 0;
    padding: 0 var(--space-3);
  }
  .portseido-nav-toggle { display: inline-flex; }
  .portseido-main {
    margin-left: 0;
    padding: calc(var(--header-h) + var(--space-4)) var(--space-3) var(--space-6);
    gap: var(--space-6);
  }
  .portseido-hero {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .portseido-cf-cards { grid-template-columns: 1fr; }
  .portseido-portfolio-cards-row { grid-template-columns: 1fr; }
  .portseido-benchmarks-row { grid-template-columns: repeat(2, 1fr); }
  .portseido-hero-value { font-size: var(--fs-30); }
  .portseido-cf-card-value { font-size: var(--fs-24); }
}