/* Winston V3 — Portfolio screen. */

#screen-portfolio .view-chips {
  margin: var(--space-3) 0 var(--space-6);
}

#screen-portfolio .sleeve-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
#screen-portfolio .sleeve-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border-top: 4px solid var(--ink-faint);
}
#screen-portfolio .sleeve-card[data-sleeve="swing"]   { border-top-color: var(--sleeve-swing); }
#screen-portfolio .sleeve-card[data-sleeve="scalp"]   { border-top-color: var(--sleeve-scalp); }
#screen-portfolio .sleeve-card[data-sleeve="short"]   { border-top-color: var(--sleeve-short); }
#screen-portfolio .sleeve-card[data-sleeve="options"] { border-top-color: var(--sleeve-options); }
#screen-portfolio .sleeve-card[data-sleeve="rotation"]  { border-top-color: var(--sleeve-rotation); }
#screen-portfolio .sleeve-card[data-sleeve="reversion"] { border-top-color: var(--sleeve-reversion); }
#screen-portfolio .sleeve-card[data-sleeve="trend"]     { border-top-color: var(--sleeve-trend); }
#screen-portfolio .sleeve-card[data-sleeve="income"]    { border-top-color: var(--sleeve-income); }
#screen-portfolio .sleeve-card[data-sleeve="pead"]      { border-top-color: var(--sleeve-pead); }
#screen-portfolio .sleeve-card[data-sleeve="cta"]      { border-top-color: var(--sleeve-cta); }
#screen-portfolio .sleeve-card[data-sleeve="momentum"] { border-top-color: var(--sleeve-momentum); }

#screen-portfolio .sleeve-label {
  font-size: var(--type-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
#screen-portfolio .sleeve-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--type-xs);
  color: var(--ink-muted);
}
#screen-portfolio .sleeve-value {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
#screen-portfolio .sleeve-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
#screen-portfolio .sleeve-state[data-state="active"]  { background: var(--money-up-soft);   color: var(--money-up); }
#screen-portfolio .sleeve-state[data-state="dormant"] { background: var(--surface-3);       color: var(--ink-muted); }

#screen-portfolio .holdings-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
#screen-portfolio .holdings-table th,
#screen-portfolio .holdings-table td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--type-sm);
  text-align: left;
}
#screen-portfolio .holdings-table th {
  color: var(--ink-muted);
  font-weight: var(--weight-medium);
  font-size: var(--type-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
#screen-portfolio .holdings-table td.num { text-align: right; font-family: var(--font-mono); }
#screen-portfolio .holdings-table tr { cursor: pointer; }
#screen-portfolio .holdings-table tr:hover td { background: var(--surface-hover); }

#screen-portfolio .perf-card { padding: 0; overflow: hidden; }
#screen-portfolio .perf-chart-wrap {
  padding: var(--space-4);
  height: 280px;
  position: relative;
}
#screen-portfolio .perf-pills {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;  /* horizontal-only pill row — block the coerced vertical scrollbar */
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}
#screen-portfolio .perf-pills::-webkit-scrollbar { display: none; }
#screen-portfolio .perf-pills .chip { flex-shrink: 0; }

#screen-portfolio .perf-scrub {
  padding: var(--space-4) var(--space-4) var(--space-2);
  border-bottom: 1px dashed var(--hairline);
}
#screen-portfolio .perf-scrub-eyebrow {
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-snug);
  margin-bottom: 2px;
  min-height: 1.2em;
}
#screen-portfolio .perf-scrub-value {
  font-family: var(--font-mono);
  font-size: var(--type-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1.1;
}
#screen-portfolio .perf-scrub-value.up   { color: var(--money-up); }
#screen-portfolio .perf-scrub-value.down { color: var(--money-down); }
#screen-portfolio .perf-scrub-delta {
  margin-top: 4px;
  font-size: var(--type-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

#screen-portfolio .perf-mode-pills {
  padding: var(--space-2) var(--space-4) var(--space-4);
  display: flex;
  gap: var(--space-2);
  border-top: 1px solid var(--hairline);
}
#screen-portfolio .perf-mode-pills .chip { height: 28px; padding: 0 var(--space-3); font-size: var(--type-xs); }

/* H7 (UAT Stream F): custom By-strategy legend. Each row is an eye-icon
   toggle — hidden series go to opacity 0.4 instead of the canvas
   strikethrough Chart.js renders by default. Empty when not in "sleeves"
   mode so it doesn't reserve vertical space. */
#screen-portfolio .sleeve-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--hairline);
}
#screen-portfolio .sleeve-legend:empty { display: none; }
#screen-portfolio .sleeve-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-full);
  font-size: var(--type-xs);
  color: var(--ink);
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease-out);
}
#screen-portfolio .sleeve-legend-item:hover { border-color: var(--border-strong); }
#screen-portfolio .sleeve-legend-item.is-off { opacity: 0.4; }
#screen-portfolio .sleeve-legend-item.is-off .sleeve-legend-swatch { opacity: 0.5; }
#screen-portfolio .sleeve-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
#screen-portfolio .sleeve-legend-eye {
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
}
#screen-portfolio .sleeve-legend-label { letter-spacing: var(--tracking-snug); }

@media (max-width: 540px) {
  #screen-portfolio .holdings-table th:nth-child(2),
  #screen-portfolio .holdings-table td:nth-child(2) { display: none; }
}