/* styles/portfolio.css — results summary + chart + framed cards + holdings list
   Part of the former single style.css, split by source order so the cascade is
   unchanged (loaded in sequence: tokens→base→landing→auth→portfolio→research→pages). */
/* ---------- Results: summary + chart ---------- */
.results:empty { display: none; }
.results { margin-top: 8px; }

/* The portfolio sits inline on the page (no card shell) — just a wrapper for layout. */
.pcard {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* The headline value and the hide-amounts eye share one row, so the eye sits just to the
   right of the big value (and its currency) rather than up in a separate top bar. The eye
   aligns to the bottom of the value (a bit lower) and stays very discreet. */
.summary__valrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.summary__valrow .hide-toggle {
  width: 26px;
  height: 26px;
  margin-bottom: 8px;   /* nudge it down toward the value's baseline */
  opacity: 0.35;        /* very discreet — barely there until you hover */
}
.summary__valrow .hide-toggle:hover { opacity: 0.85; }

/* The Savings / Total-value switch — a left-aligned segmented pill group */
.tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: 26px;
  background: rgba(42, 42, 40, 0.05);
  border-radius: 999px;
}
html[data-theme="dark"] .tabs { background: rgba(255, 255, 255, 0.06); }
.tab {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 7px 18px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tab:hover { color: var(--ink); }
.tab--active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] .tab--active { background: #34352f; }

/* The "coming next" placeholder for the Total-value view */
.placeholder {
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
  padding: 24px 8px 8px;
}
.placeholder p { margin-bottom: 14px; }
.placeholder__title {
  color: var(--ink);
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 18px;
}

/* A whisper of colour for gain (sage) / loss (clay) */
.gain-pos { color: var(--accent); }
.gain-neg { color: var(--neg); }

/* Clickable Historic column headers (sort the table) */
.hist-sort { cursor: pointer; user-select: none; transition: color 0.15s ease; }
.hist-sort:hover { color: var(--ink); }
.hist-sort--on { color: var(--accent); }

/* The quiet "Mar 2019 → Jun 2022 · held 3y 2m" line under a closed company */
.hist-when {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* The holdings block sits under the Total-value graph */
/* ---------- Framed cards (Option A) ----------
   The main portfolio chart and the "Current portfolio" block each sit in a
   soft floating card, topped with the StockGaudi mark for branding. This is
   purely a frame — colours and content are unchanged. Scoped to #results so
   only the tracker's cards get it. */
.pv-card {
  position: relative;
  background: var(--card);
  background-image: var(--card-grad);   /* brushed-platinum sheen on the hero card */
  border: 1px solid var(--line);        /* a quiet Cooling hairline, no loud frame */
  border-radius: 22px;
  box-shadow: 0 20px 44px -26px rgba(24, 34, 32, 0.38), var(--sheen-hi);
  padding: 24px 30px 22px;
}
html[data-theme="dark"] .pv-card {
  box-shadow: 0 20px 44px -26px rgba(0, 0, 0, 0.55), var(--sheen-hi);
}
/* The "Current portfolio" block sits INSIDE the same card, connected to the chart
   above by a hairline divider — one frame, one logo (at the top). No second frame. */
.pv-card .holdings-block {
  margin-top: 24px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

/* The logo mark on the framed card. A quiet signature tucked into the top-right
   corner (Steve-Jobs placement) — out of the way of the value headline, which
   owns the top-left. Horizontal: small mark + wordmark, no divider. */
.brand-head {
  position: absolute;
  /* Centred on the "Portfolio" label's line so the mark and the title read as
     one row (translateY makes this hold whatever the mark's height is). */
  top: 34px;
  transform: translateY(-50%);
  right: 28px;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.brand-head__mark { width: 38px; height: 38px; display: block; flex: none; color: var(--ink); opacity: 0.85; }
.brand-head__name {
  margin-left: 9px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}

@media (max-width: 540px) {
  .brand-head { top: 16px; right: 18px; }
  .brand-head__mark { width: 30px; height: 30px; }
  .brand-head__name { margin-left: 7px; font-size: 15px; }
}

@media (max-width: 540px) {
  .pv-card { padding: 20px 18px 18px; border-radius: 18px; }
}

.holdings-title {
  text-align: center;
  font-size: 18px;               /* a clear section heading, sentence case */
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 20px;
}

/* Header row: the title on the left, the Portfolio / Historic toggle on the right */
.holdings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.holdings-head .holdings-title { margin-bottom: 0; text-align: left; }

/* A small segmented toggle (matches the calm pill of the tabs) */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg__btn,
.tx-seg__btn,
.pt-seg__btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.seg__btn:hover,
.tx-seg__btn:hover,
.pt-seg__btn:hover { color: var(--ink); }
.seg__btn--active,
.tx-seg__btn--active,
.pt-seg__btn--active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* The Performance table's controls (Price/Value toggle + currency picker) sit together
   on the right of the block header. */
.perf-head__side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Quiet messages / footnote inside the holdings block */
.holdings-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  padding: 16px 0;
}
.holdings-foot {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 18px;
}

/* Holdings table */
.holdings {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.holdings th {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.holdings td {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
/* Right-align the numeric columns — header AND cells (the `.holdings` qualifier
   gives this enough weight to beat the `.holdings th` left-align above). Tabular
   figures keep every digit the same width, so the numbers line up cleanly. */
.holdings .hd-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Keep the data lanes on a single line so the overview reads cleanly: the price
   never splits from its currency, headers don't wrap, and the fund consensus
   ("Buy · ETF · from its holdings") stays one tidy line. Company names — the one
   column that can be long — are still free to wrap. Only on screens wide enough
   to hold five lanes; narrow phones keep wrapping so nothing runs off the edge. */
@media (min-width: 680px) {
  .analysts .hd-num,
  .analysts th,
  .analysts .a-consensus { white-space: nowrap; }

  /* Give each money column a clear left gutter so Price · Avg. target · Upside
     read as separate lanes instead of running together. */
  .analysts th.hd-num,
  .analysts td.hd-num { padding-left: 34px; }

  /* Cap the company name to one tidy line (full name on hover) so a long fund
     title can't crowd the numbers next to it. */
  .analysts .hd-name {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.hd-name { color: var(--ink); }
.hd-pct { color: var(--ink-soft); }

/* ---------- Portfolio holdings — a calm iPhone-style list ----------
   Badge + name on the left, value + share on the right. No dense columns, no bar:
   two clear anchors per row (what it is · what it's worth), light sans type, roomy. */
.hold-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hold {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.hold:last-child { border-bottom: none; }

/* A weight ring around the ticker: the sage arc's length shows this holding's
   share of the portfolio, the badge letters sit in the middle. */
.hd-ring {
  flex: none;
  position: relative;
  width: 46px;
  height: 46px;
}
.hd-ring svg { display: block; width: 100%; height: 100%; }
.hd-ring__track { fill: none; stroke: var(--line); stroke-width: 3; }
.hd-ring__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}
.hd-ring__txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* Left zone: name over a quiet "N shares" line; takes the slack so figures sit right */
.hold__idn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.hold__name {
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hold__sub {
  font-size: 13px;
  color: var(--ink-soft);
}

/* Right zone: two lanes — the value anchor, then the share % as its own quiet
   column to the right of it (a bit more discreet than the value). */
.hold__val {
  flex: none;
  text-align: right;
  font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hold__pct {
  flex: none;
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .hold { gap: 12px; }
  .hd-ring { width: 40px; height: 40px; }
  .hold__pct { min-width: 44px; }
  .hold__name, .hold__val { font-size: 16px; }
}

/* A holding row is clickable: it expands a detail panel below it. */
.hold { cursor: pointer; border-radius: 10px; transition: background 0.15s ease; outline: none; }
.hold:hover { background: rgba(78, 97, 87, 0.05); }
.hold:focus-visible { box-shadow: 0 0 0 2px rgba(78, 97, 87, 0.4); }
.hold--open { border-bottom-color: transparent; }

/* The Cash reconciliation row — calm, muted, and not interactive (it's a balance,
   not a security, so no hover/pointer/expand). */
.hold--cash { cursor: default; }
.hold--cash:hover { background: transparent; }
.hold--cash .hd-ring__txt { font-size: 0.62em; letter-spacing: 0.02em; color: var(--ink-soft); }
.hold--cash .hold__name,
.hold--cash .hold__val { color: var(--muted); font-weight: 500; }

/* The expanded detail panel: performance toggle + tiles + "what analysts think". */
.hold-detail {
  list-style: none;
  margin: 2px 0 10px;
  padding: 18px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
}
/* Three headline figures side by side: Invested + Value now + Return, each with a
   quiet per-share / percentage sub-line. Wraps on narrow screens. */
.hd-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 18px;
}
.hd-anchor {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hd-anchor__lbl { font-size: 12px; color: var(--ink-soft); }
.hd-anchor__val {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hd-anchor__sub { font-size: 13px; color: var(--ink-soft); }
/* Colour the Return figure (two classes → beats the plain .hd-anchor__val colour). */
.hd-anchor__val.gain-pos, .hd-anchor__sub.gain-pos { color: var(--accent); }
.hd-anchor__val.gain-neg, .hd-anchor__sub.gain-neg { color: var(--neg); }

/* The stock's price sparkline + its range picker. */
.hd-chart { margin-bottom: 18px; }
.hd-plot { position: relative; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.hd-spark { display: block; width: 100%; height: 72px; }
.hd-spark__area { fill: rgba(78, 97, 87, 0.10); }
.hd-spark__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
/* Hover-to-see-price: a crisp dot snaps to the nearest day and a small card floats above it
   with the price + date (mirrors the Total-value chart's hover card). Both fade in together. */
.hd-dot {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
}
.hd-plot--pick .hd-dot { opacity: 1; }
/* The floating price/date card, anchored to the dot and lifted just above it. */
.hd-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  transform: translate(-50%, calc(-100% - 14px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tip-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  z-index: 2;
}
.hd-plot--pick .hd-tip { opacity: 1; }
.hd-tip__price {
  color: var(--tip-ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hd-tip__date { color: var(--tip-sub); font-size: 11px; }
/* Quiet time axis under the sparkline — year / date ticks placed by percent. */
.hd-axis { position: relative; height: 14px; margin-top: 5px; }
.hd-tick {
  position: absolute;
  top: 0;
  font-size: 11px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hd-range {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.hd-range__btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
.hd-range__btn:hover { color: var(--ink); }
.hd-range__btn--active { color: var(--ink); font-weight: 500; }

.hd-analyst { display: block; border-top: 1px solid var(--line); padding-top: 14px; color: inherit; text-decoration: none; cursor: pointer; }
.hd-analyst__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hd-analyst__label { font-size: 13px; color: var(--ink-soft); }
.hd-analyst__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.hd-analyst__note { font-size: 13px; color: var(--ink-soft); padding: 2px 0 6px; }
/* the spread bar's default bottom margin is meant for the Analysts page; trim it here */
.hd-analyst .a-spread { margin: 4px 0 0; }

/* On a narrow screen the extra columns can't all fit; let the table scroll
   sideways rather than run off the edge (it's roomy on a normal desktop). */
.holdings-scroll { overflow-x: auto; }

/* The Performance holdings table carries an extra number column (Return with the
   amount under it), so its lanes need a clear gutter and mustn't wrap, or the figures
   run together.
   The one long column — the company name — is capped to a tidy line (full name on
   hover) so it can't crowd the numbers. */
.holdings--perf th.hd-num,
.holdings--perf td.hd-num {
  padding-left: 22px;
  white-space: nowrap;
}
.holdings--perf .hd-name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}