/* styles/research.css — Top Analysts + Stock Research + ETF Research + live/footer/trust/drop/snaptrade
   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). */
/* ---------- Top Analysts page ---------- */
/* The API-key setting: a quiet, centred field. */
.keyzone {
  max-width: 460px;
  margin: 0 auto 8px;
  text-align: center;
}
.keyzone__label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.keyzone__row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.keyfield {
  flex: 1;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  outline: none;
  transition: border-color 0.2s ease;
}
.keyfield:focus { border-color: var(--accent); }
.keyzone__hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.keyzone__hint a { color: var(--accent); }

/* The friendly "open Portfolio first" message. */
.analysts-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  padding: 32px 0;
}
.analysts-empty a { color: var(--accent); }

/* The analyst table reuses .holdings; these are the extras it needs. */
.analysts .a-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
}
.analysts .a-muted { color: var(--ink-soft); font-size: 13px; }

/* The clickable ticker (also the way to fix a wrong one). */
.a-ticker {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--accent);
  cursor: pointer;
}
.a-ticker:hover { text-decoration: underline; }

/* The consensus chip — one calm pill, tinted by how bullish analysts are. */
.rating {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.rating--buy2  { color: var(--on-accent);  background: var(--accent); border-color: var(--accent); }
.rating--buy   { color: var(--accent); background: rgba(78, 97, 87, 0.12); border-color: transparent; }
.rating--hold  { color: var(--ink-soft); background: transparent; }
.rating--sell  { color: var(--neg); background: rgba(181, 128, 111, 0.12); border-color: transparent; }
.rating--sell2 { color: var(--on-accent); background: var(--neg); border-color: var(--neg); }

/* Upside / downside to the average target. */
.a-up   { color: var(--accent); }
.a-down { color: var(--neg); }

/* ── "Analyst view of your holdings" — the spacious card layout ──────────────
   A calm raised card, roomy rows: a rating pill + big company name on the left,
   large price / avg-target numbers, and a big coloured upside over a diverging
   mini bar. Scoped to `.analysts--holdings` so the leaderboard table (which also
   reuses `.analysts`) keeps its own compact look. */
.a-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px 34px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.a-card .holdings-head { margin-bottom: 4px; }

.analysts--holdings th { padding-bottom: 14px; }
.analysts--holdings td { padding: 18px 0; vertical-align: middle; }

/* POSITION cell: pill + name/ticker block, vertically centred together. */
.a-pos__row { display: flex; align-items: center; gap: 16px; }
.a-pos__body { min-width: 0; }
.a-pill { flex: none; }
.a-pill:empty { display: none; }
/* The pill + hover already signal expandability, so drop the little caret here. */
.analysts--holdings .a-caret { display: none !important; }
.a-name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.analysts--holdings .a-sub { font-size: 13px; margin-top: 3px; }

/* Calm pills, in scale with the row typography. */
.a-pill .rating {
  font-size: 12px;
  padding: 5px 16px;
  letter-spacing: 0.01em;
}

/* PRICE / AVG TARGET: the figure with a small muted currency suffix, at the
   same 15px body scale the rest of the app's tables use. */
.analysts--holdings .a-price,
.analysts--holdings .a-target {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.a-ccy {
  font-size: 0.72em;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.03em;
  margin-left: 3px;
}

/* UPSIDE: coloured percentage over a diverging mini bar. */
.a-upside__pct {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.a-upbar {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  width: 140px;
  max-width: 100%;
  margin: 8px 0 0 auto;   /* right-aligned under the number */
}
.a-upbar::before {         /* faint centre tick = 0% */
  content: "";
  position: absolute;
  left: 50%; top: -1px; bottom: -1px;
  width: 1px;
  background: var(--ink-soft);
  opacity: 0.3;
  transform: translateX(-0.5px);
}
.a-upbar__fill { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.a-upbar__fill--up   { background: var(--accent); }
.a-upbar__fill--down { background: var(--neg); }

/* On narrow screens keep it readable: dial the big type back a touch. */
@media (max-width: 560px) {
  .a-card { padding: 20px 18px 8px; }
  .a-pos__row { gap: 12px; }
  .a-upbar { width: 96px; }
}

/* A clickable holding row (expands to recent bank ratings). */
.analysts tr.a-expandable { cursor: pointer; }
.analysts tr.a-expandable:hover td { background: rgba(78, 97, 87, 0.05); }
.a-caret {
  display: none;   /* only expandable rows (stocks with ratings) show the caret */
  margin-right: 8px;
  color: var(--ink-soft);
  transition: transform 0.2s ease;
}
.analysts tr.a-expandable .a-caret { display: inline-block; }
.analysts tr.a-open .a-caret { transform: rotate(90deg); color: var(--accent); }

/* a small neutral tag for ETFs / funds in the consensus column */
.a-fund-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 4px;
}

/* The expanded panel: a calm list of recent analyst ratings. */
.a-detail > td { padding: 4px 0 22px; border-bottom: 1px solid var(--line); }
.a-detail__head {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 4px 0 14px;
}
/* the analyst rating spread: a thin proportional Buy/Hold/Sell bar + legend */
.a-spread { margin: 4px 0 18px; }
.a-bar {
  display: flex;
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--line);
}
.a-bar__seg { height: 100%; }
.a-bar__seg--buy  { background: var(--accent); }
.a-bar__seg--hold { background: #cdcbc2; }
.a-bar__seg--sell { background: var(--neg); }
.a-spread__counts {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.a-spread__item { display: inline-flex; align-items: center; gap: 6px; }
.a-spread__item b { color: var(--ink); font-weight: 600; }
.a-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.a-dot--buy  { background: var(--accent); }
.a-dot--hold { background: #cdcbc2; }
.a-dot--sell { background: var(--neg); }
.a-rate {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.a-rate:first-of-type { border-top: none; }
.a-rate__firm { flex: 1; color: var(--ink); font-size: 14px; }
.a-rate__act { color: var(--ink-soft); font-size: 12px; }   /* "upgraded" / "initiated" next to the bank */
/* This bank's own published price target (from FMP), when available. */
.a-rate__pt {
  flex-shrink: 0;
  min-width: 88px;
  text-align: right;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The consensus-average fallback: a touch muted, with a small "avg" tag so it's
   read as the stock's market average, not this bank's own published number. */
.a-rate__pt--cons { color: var(--ink-soft); cursor: help; }
.a-rate__avg {
  margin-left: 5px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}
.a-rate__grade { flex-shrink: 0; }
.a-rate__date {
  flex-shrink: 0;
  min-width: 84px;
  text-align: right;
  white-space: nowrap;   /* keep "9 buy · 21 hold · 1 sell" on one line */
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* ETF breakdown rows: the fund's top holdings, shown as real table rows so their
   price / target / upside line up under the same columns as the fund row above.
   Lighter and tighter than a normal row, and gently inset to read as nested. */
.a-fundrow > td {
  padding: 10px 0;
  border-bottom: none;
  font-size: 14px;
  color: var(--ink-soft);
}
.a-fundrow:first-child > td { padding-top: 14px; }
.a-fundrow .a-fund-name { color: var(--ink); }
.a-fundrow > td:first-child { padding-left: 16px; }
.a-fund-lbl { font-size: 12px; color: var(--ink-soft); }
/* the Buy/Hold/Sell bar that leads the fund's expansion (no divider under it,
   so it reads as part of the same block as the holdings below) */
.a-fund-spread {
  padding: 6px 0 16px 16px !important;
  border-bottom: none !important;
}
.a-fund-spread .a-detail__head { margin-top: 0; }
.a-fund-note {
  padding: 8px 0 22px 16px !important;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-bottom: 1px solid var(--line) !important;
}

/* ── Top Analysts leaderboard (analyst-board.js) ───────────────────────────── */
/* A quiet section heading above the leaderboard table. */
.leaderboard-intro {
  margin: 56px 0 6px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.leaderboard-intro__text { min-width: 0; }
.leaderboard-intro__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.leaderboard-intro__sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }

/* The top-right view selector: a small segmented pill (Best analysts / New ratings). */
.lb-seg {
  display: inline-flex;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--line);
}
.lb-seg__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.lb-seg__btn:hover { color: var(--ink); }
.lb-seg__btn.is-on {
  background: var(--card, #fff);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ---- the "New Ratings" feed: filter bar + full-width table + pager ---- */
.lb-feed { margin-top: 4px; }
.lb-feed__filters {
  display: flex;
  align-items: center;
  gap: 6px 18px;
  flex-wrap: wrap;
  padding: 6px 0 14px;
}
.lb-feed__filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lb-feed__filter .range-select { font-size: 13px; text-transform: none; letter-spacing: 0; }
.lb-feed__count { margin-left: auto; font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.lb-feed__wrap { overflow-x: auto; }
.lb-feed__table { width: 100%; border-collapse: collapse; min-width: 620px; }
.lb-feed__table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 12px 16px 10px 0;
}
.lb-feed__table th.hd-num { text-align: right; }
.lb-feed__table th[title]:not(.lb-th) { cursor: help; }
.lb-feed__table td {
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}
.lb-feed__table td.hd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-feed__bank { color: var(--ink); font-weight: 500; }
.lb-feed__sector { color: var(--ink-soft); }
.lb-feed__date { color: var(--ink-soft); font-size: 12px; }

.lb-feed__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 0 4px;
}
.lb-feed__pg {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lb-feed__pg:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lb-feed__pg:disabled { opacity: 0.4; cursor: default; }
.lb-feed__pageinfo { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .leaderboard-intro { flex-direction: column; align-items: flex-start; gap: 14px; }
}

.lb-loading, .lb-note { padding: 22px 0; font-size: 15px; line-height: 1.6; max-width: 660px; }

/* A slim sage progress bar, reused by the ranked list's "hit rate". */
.lb-bar {
  width: 64px;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--line);
  flex-shrink: 0;
}
.lb-bar__fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* ── Leaderboard: master-detail two-panel layout ─────────────────────────────
   Left = a ranked list of firms/analysts (rank · name · avg return · hit bar);
   Right = the selected one's headline stats + the stocks it recommends now.
   Modelled on the WallStreetZen/TipRanks "top firms" screen, calm-styled. */
.lb2 {
  display: grid;
  grid-template-columns: minmax(270px, 310px) 1fr;
  gap: 16px;
  align-items: start;
}

/* Left: the ranked list. */
.lb2__list {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 16px;
}
.lb2__eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0 6px 14px;
}
.lb2__items { display: flex; flex-direction: column; gap: 2px; }

.lb2-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 12px 13px;
  font: inherit;
  color: inherit;
  cursor: default;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lb2-item--able { cursor: pointer; }
.lb2-item--able:hover { background: rgba(78, 97, 87, 0.06); }
.lb2-item.is-active {
  background: var(--white);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(42, 42, 40, 0.05);
}
.lb2-item__top { display: flex; align-items: baseline; gap: 10px; }
.lb2-item__rank {
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 14px;
}
.lb2-item__name {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
}
.lb2-item__ret { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.lb2-item__hitrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 0 0 24px;
}
.lb2-item__hitrow .lb-bar { flex: 1; }
.lb2-item__hit {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Right: the detail panel. */
.lb2__detail {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  min-height: 200px;
}
.lb2-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.lb2-detail__name {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.15;
}
.lb2-detail__sub { margin-top: 4px; color: var(--ink-soft); font-size: 13px; }
.lb2-detail__stats { display: flex; gap: 22px; }
.lb2-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb2-stat__val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.lb2-stat__lbl {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lb2-detail__note, .lb2-detail__empty { padding: 24px 2px; font-size: 15px; }

/* The coverage table inside the detail panel — deliberately airy, light rules. */
.lb2-cov { overflow-x: hidden; }
/* Fixed layout = stable, aligned column lanes (widths don't jump around with content), and
   the table always fits the panel (no sideways scrollbar). Seven columns share 100%. */
.lb2-cov__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lb2-cov__c-name   { width: 26%; }
.lb2-cov__c-rating { width: 11%; }
.lb2-cov__c-price  { width: 12%; }
.lb2-cov__c-target { width: 12%; }
.lb2-cov__c-upside { width: 12%; }
.lb2-cov__c-sector { width: 15%; }
.lb2-cov__c-date   { width: 12%; }
.lb2-cov__table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  padding: 13px 8px 9px 0;
}
.lb2-cov__table th.hd-num { text-align: right; }
.lb2-cov__table td {
  padding: 12px 8px 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  vertical-align: middle;
}
.lb2-cov__table td.hd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Long names (e.g. "Amazon.com, Inc.") stay on one line and ellipsis rather than wrap and
   bloat the row — the full name is in the cell's title tooltip. */
.lb2-cov__name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb2-cov__tick { color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
/* Sector is shortened in JS (shortSector), so it stays on one line without pushing the table wide. */
.lb2-cov__sector { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb2-cov__date { color: var(--ink-soft); font-size: 12px; }
.lb2-cov__note { margin: 14px 0 2px; font-size: 12px; color: var(--ink-soft); line-height: 1.5; }
/* Fixed layout already fills the panel, so no min-width / horizontal scrollbar. */
.lb-cov--full { min-width: 0; }

/* Stack the two panels on narrow screens. */
@media (max-width: 720px) {
  .lb2 { grid-template-columns: 1fr; }
  .lb2__detail { padding: 20px 16px; }
}

/* ── "Best analysts" board: a WallStreetZen-style full-width sortable table ───
   One ranked table (# · Analyst/Firm · Primary Sector · Avg. Return · Win Rate ·
   No. Ratings · Latest) with a sector filter; click a row to expand its coverage. */
.lb-board { margin-top: 4px; }
.lb-board__head {
  display: flex;
  align-items: baseline;
  gap: 6px 18px;
  flex-wrap: wrap;
  padding: 4px 0 12px;
}
.lb-board__eyebrow {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.lb-board__filters { margin-left: auto; display: inline-flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; }

.lb-board__table { min-width: 680px; }
/* Sortable headers: quiet by default, sage + an arrow when active. Shared by the board
   table and the expanded coverage table (both let you click a column to reorder). */
th.lb-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.15s ease; }
th.lb-th:hover { color: var(--ink); }
th.lb-th.is-sorted { color: var(--accent); }
.lb-th__arrow { font-size: 9px; }

/* Rows. */
.lb-brow--able { cursor: pointer; }
.lb-brow--able:hover td { background: rgba(78, 97, 87, 0.05); }
.lb-brow.is-open td { background: rgba(78, 97, 87, 0.06); }
.lb-brow__rank { color: var(--ink-soft); width: 1%; }
.lb-brow__name { color: var(--ink); font-weight: 600; white-space: nowrap; }
.lb-brow__caret {
  display: inline-block;
  width: 12px;
  margin-right: 6px;
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}
.lb-brow.is-open .lb-brow__caret { transform: rotate(90deg); color: var(--accent); }
.lb-brow__sector { color: var(--ink-soft); white-space: nowrap; }
.lb-brow__latest { color: var(--ink-soft); font-size: 12px; }
/* Win-rate cell: the slim sage bar + its % sit together, right-aligned. */
.lb-brow__win { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lb-brow__win .lb-bar { width: 54px; }
.lb-brow__winpct { font-variant-numeric: tabular-nums; }

/* The expanded coverage row: inset + tinted so it reads as nested detail. */
.lb-bdetail > td { padding: 0 !important; border-top: none !important; background: rgba(78, 97, 87, 0.04); }
.lb-bdetail__inner { padding: 4px 16px 20px; }
.lb-board__empty { text-align: center; padding: 28px 0 !important; }

.a-detail__note { padding: 10px 0 4px; color: var(--ink-soft); font-size: 14px; }
/* "Recent news": a separate, deliberately eye-catching card panel below the analyst
   detail — Yahoo-Finance style. A two-column grid of cards, each with a thumbnail,
   a bold headline, a short description and "source · 3h ago". Built to invite a daily
   return, while staying in the app's calm palette. */
.news-panel {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.news-panel__head {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; gap: 0; }
}
.news-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* the first card in each column has no top rule (mirrors Yahoo's clean top edge) */
.news-grid > .news-card:nth-child(1),
.news-grid > .news-card:nth-child(2) { border-top: none; }
@media (max-width: 640px) {
  .news-grid > .news-card:nth-child(2) { border-top: 1px solid var(--line); }
}
.news-card:hover { opacity: 0.72; }
.news-card__body {
  flex: 1;
  min-width: 0;   /* let the clamps shrink instead of overflowing the grid cell */
  display: flex;
  flex-direction: column;
}
.news-card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card:hover .news-card__title { color: var(--accent); }
.news-card__desc {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__meta {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.news-card__thumb {
  flex: 0 0 116px;
  width: 116px;
  height: 82px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eceae3, #e0e4dc);   /* soft placeholder if no image */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media (max-width: 640px) {
  .news-card__thumb { flex-basis: 92px; width: 92px; height: 68px; }
}
.a-detail__note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 14px;
  line-height: 1.5;
}
.a-detail__note code {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 5px;
  border-radius: 4px;
}
/* A brief "what this company does" line, sat where the provenance note used to be.
   A touch larger/darker than a footnote since it's real content, not fine print. */
.a-detail__about {
  font-size: 13px;
  color: var(--ink-soft2, var(--ink-soft));
}

/* The small tag marking a target as an estimate (not a published one). */
.a-est {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- Stock Research page ---------- */
/* The research page holds five lists side by side, so it gets a wider column. */
.page--research { max-width: 1000px; }

/* The AI search box: one calm ChatGPT-style line — a rounded field with the send
   button tucked inside on the right. Nothing else around it. */
.ask {
  max-width: 640px;
  margin: 8px auto 8px;
}
.ask__box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 7px 7px 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;   /* anchor for the type-ahead menu */
}
.ask__box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(78, 97, 87, 0.12);
}
.ask__field {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: none;
  outline: none;
  padding: 6px 0;
}
.ask__field::placeholder { color: var(--ink-soft); }
.ask__send {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ask__send:hover { opacity: 0.9; }
.ask__send svg { width: 19px; height: 19px; }

/* Type-ahead suggestions dropdown — a calm card floating just under the search box. */
.ac-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  padding: 6px;
  overflow: hidden;
}
.ac-menu[hidden] { display: none; }
.ac-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.ac-item:hover, .ac-item.is-active { background: var(--paper); }
.ac-item__sym {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  min-width: 58px;
  font-variant-numeric: tabular-nums;
}
.ac-item__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-item__exch {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--ink-soft);
  opacity: 0.7;
}
.ac-item__type {
  flex-shrink: 0;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border-radius: 6px;
  padding: 1px 6px;
}

/* The sector chips / example-search chips: calm pill buttons, sage when on. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 40px;
  max-width: 620px;
}
.chip {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 15px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.chip:hover { color: var(--ink); border-color: var(--ink-soft); }
.chip.is-on {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.chips__hint {
  flex-basis: 100%;
  text-align: center;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* AI search results: one heading + a self-wrapping grid of picks. */
.ask-list { margin-top: 30px; }
.ask-list__head {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 8px;
}
.ask-list__sub { font-size: 13px; color: var(--ink-soft); }
.ask-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 24px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

/* The five curated lists, laid out horizontally as compact cards. */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.theme-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 14px 12px;
}
.theme-card__title {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 8px;
}
.theme-card__empty {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding: 8px 0;
}
.theme-card__picks { display: flex; flex-direction: column; }

/* One pick — a clickable row: company on the left, upside on the right. */
.pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  padding: 9px 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.pick:first-child { border-top: none; }
.pick:hover { background: rgba(78, 97, 87, 0.06); }
.pick--active { background: rgba(78, 97, 87, 0.12); }
.pick__co { flex: 1; min-width: 0; }
.pick__name {
  display: block;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick__tk { font-size: 10px; letter-spacing: 0.04em; color: var(--accent); }
.pick__own {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}
.pick__up {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* The detail panel below the lists — the selected stock, in full. */
.detail-panel:empty { display: none; }
.detail-panel { margin-top: 40px; }
.detail {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 22px 24px;
}
.detail__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.detail__name { font-size: 20px; color: var(--ink); }
.detail__tk { font-size: 13px; letter-spacing: 0.04em; color: var(--accent); margin-left: 8px; }
.detail__sector { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat__lbl {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stat__val { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* The price chart inside the detail card — a calm area sparkline with a range toggle. */
.dchart { margin: 22px 0 6px; }
.dchart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.dchart__perf { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dchart__perf.a-up   { color: var(--accent); }
.dchart__perf.a-down { color: var(--neg); }
.dchart__perf-range { color: var(--ink-soft); font-weight: 400; font-size: 12px; }
.dchart__ranges { display: inline-flex; gap: 2px; }
.dchart__range {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 3px 10px;
  border-radius: 999px;
}
.dchart__range:hover { color: var(--ink); }
.dchart__range.is-on { color: var(--ink); background: var(--paper); }
.dchart__plot { position: relative; width: 100%; height: 180px; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.dchart__svg { display: block; width: 100%; height: 100%; }
.dchart__line { stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dchart--down .dchart__line { stroke: var(--neg); }
.dchart__fill-a { stop-color: var(--accent); stop-opacity: 0.16; }
.dchart__fill-b { stop-color: var(--accent); stop-opacity: 0; }
.dchart--down .dchart__fill-a { stop-color: var(--neg); }
.dchart__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--white);
  pointer-events: none;
}
.dchart__plot.is-down .dchart__dot { background: var(--neg); }
.dchart__tip {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
  z-index: 2;
}
.dchart__tip b   { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.dchart__tip span { font-size: 11px; color: var(--ink-soft); }

/* Drag-to-measure: the shaded band, its two endpoint dots, and the % / period label. */
.dchart__band {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: rgba(78, 97, 87, 0.12);          /* sage tint (a gain) */
  border-left: 1px solid rgba(78, 97, 87, 0.45);
  border-right: 1px solid rgba(78, 97, 87, 0.45);
}
.dchart__plot.sel-neg .dchart__band {
  background: rgba(181, 128, 111, 0.12);          /* clay tint (a loss) */
  border-left-color: rgba(181, 128, 111, 0.45);
  border-right-color: rgba(181, 128, 111, 0.45);
}
.dchart__edge {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--accent);
  pointer-events: none;
}
.dchart__plot.sel-neg .dchart__edge { box-shadow: 0 0 0 2px var(--neg); }
.dchart__sel {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 11px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.dchart__sel b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dchart__sel.a-up   b { color: var(--accent); }
.dchart__sel.a-down b { color: var(--neg); }
.dchart__sel span { font-size: 11px; color: var(--ink-soft); }
.dchart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.dchart__tick { white-space: nowrap; }
/* Bar-chart axis: one centred cell per bar (bars are centred, not edge-to-edge). */
.macro-baraxis { justify-content: stretch; }
.macro-baraxis__cell { flex: 1 1 0; text-align: center; white-space: nowrap; min-width: 0; }
/* Line-chart axis: one label per fiscal period, absolutely placed under its point
   (points run edge-to-edge at i/(n-1), so evenly-spread flex ticks would misalign and,
   with few points, repeat a year). */
.macro-lineaxis { display: block; position: relative; height: 14px; }
.macro-lineaxis__cell { position: absolute; top: 0; white-space: nowrap; }

/* The key-metrics grid + 52-week range bar, below the chart. */
.detail__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px 22px;
  padding: 18px 0 2px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric__lbl {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.metric__val { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.range52 { margin: 18px 0 2px; }
.range52__lbl {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 9px;
}
.range52__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
.range52__mark {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--white);
}
.range52__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* On narrow screens the five cards become a horizontal swipe. */
@media (max-width: 900px) {
  .themes-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .theme-card { scroll-snap-align: start; }
}

/* The static ticker under a pick's name (not editable, unlike the Analysts page). */
.a-ticker-static { font-size: 12px; letter-spacing: 0.03em; color: var(--accent); }

/* A quiet tag marking a pick you already hold. */
.owned-tag {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(78, 97, 87, 0.4);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* The "Surprise me" chip — a slightly warmer, sage-tinted starter. */
.chip--spark { color: var(--accent); border-color: rgba(78, 97, 87, 0.35); }
.chip--spark:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* ---------- Today's standout: the single hero pick, fresh each visit ---------- */
.standout-wrap:empty { display: none; }
.standout-wrap { margin: 28px auto 8px; max-width: 560px; }
.standout {
  display: block;
  width: 100%;
  text-align: center;
  font: inherit;
  cursor: pointer;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(78, 97, 87, 0.10), rgba(78, 97, 87, 0) 62%),
    var(--white);
  border: 1px solid rgba(78, 97, 87, 0.28);
  border-radius: var(--radius);
  padding: 20px 24px 18px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.standout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(78, 97, 87, 0.14);
  border-color: rgba(78, 97, 87, 0.45);
}
.standout__eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.standout__name { display: block; font-size: 24px; font-weight: 300; color: var(--ink); letter-spacing: 0.01em; }
.standout__tk { font-size: 13px; letter-spacing: 0.04em; color: var(--accent); margin-left: 10px; vertical-align: middle; }
.standout__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.standout__rating { font-size: 12px; }
.standout__up { font-size: 17px; font-variant-numeric: tabular-nums; }
.standout__go {
  font-size: 13px;
  color: var(--ink-soft);
  transition: color 0.15s ease, transform 0.15s ease;
}
.standout:hover .standout__go { color: var(--accent); transform: translateX(2px); }

/* A little life in the five theme cards — a gentle lift on hover. */
.theme-card { transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; }
.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(42, 42, 40, 0.06);
  border-color: rgba(78, 97, 87, 0.30);
}

/* The one-line note shown when we fall back to the built-in starter list. */
.research-note {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 8px;
  max-width: 560px;
}
.research-note code {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ========== ETF Research page ==========
   Six big index blocks + five theme baskets, each a one-line explainer over a
   top-5 table (reuses the Portfolio's .holdings table). The one genuinely new
   pieces are the per-block explainer/fee lines and the little risk-meter. */

/* One index / theme block: a title, a plain-English explainer, then its table. */
.index-block { margin-top: 44px; }
.index-block:first-child { margin-top: 32px; }
.index-block__title {
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}
.index-block__note {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
/* The honest reminder under an INDEX block: within one index, fee/size is what differs. */
.index-block__fee {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.6;
}
.index-block__fee b { color: var(--ink); font-weight: 600; }

/* The ETF table: the .holdings look, with a two-line Fund cell (name + ticker/fee). */
/* Tighter rows than the default .holdings (16px) — the name cell is 2–3 lines tall, so
   the extra padding made the rows feel far apart — and TOP-align every column so the
   numbers line up with the index/fund name instead of floating in the vertical middle. */
.etf-table td {
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: top;
}
.etf-table .hd-name { padding-right: 16px; }
/* Column headers carry a `title` explaining each column — hint it's hoverable. */
.etf-table th[title] { cursor: help; }
.etf-name { display: block; font-size: 15px; color: var(--ink); }
.etf-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.etf-tk { font-size: 11px; letter-spacing: 0.04em; color: var(--accent); }
.pick__fee { font-size: 11px; color: var(--ink-soft); }
/* The index row's plain-English explainer ("The 500 biggest US companies."), and the
   theme fund's one-line "angle" — both quiet sub-lines under the name. */
.index-row__note,
.etf-angle {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 3px;
  line-height: 1.35;
}
.etf-angle { margin-top: 4px; }
.ret-span { font-size: 11px; color: var(--ink-soft); }   /* the "(3y)" tag when 5y is missing */
/* The generic `.pick` rule (Stock Research) is display:flex for its button-rows. Here
   the picks are REAL table rows, so force them back to table-row / table-cell — otherwise
   each row lays out as its own flex line and the number columns don't align. */
.etf-table tr.pick { display: table-row; cursor: pointer; transition: background 0.12s ease; }
.etf-table tr.pick > td { display: table-cell; }
.etf-table tbody tr.pick:hover { background: rgba(78, 97, 87, 0.06); }
.etf-table tbody tr.pick--active { background: rgba(78, 97, 87, 0.12); }
/* Give the risk column room so the dot meter + word sit on one tidy line. */
.etf-risk { white-space: nowrap; }

/* Popular-ETFs table: give each number lane a left gutter so Avg./year · Volatility ·
   Risk · Since read as separate columns. */
@media (min-width: 680px) {
  .etf-table--index th.hd-num,
  .etf-table--index td.hd-num { padding-left: 30px; }
}

/* The risk meter — five dots (level of them filled) + a plain word. Coloured
   sage (calm) → clay (wild) so the S&P 500 vs Emerging Markets gap is obvious. */
.risk { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.risk__word { font-size: 12px; color: var(--ink-soft); }
.risk--none { color: var(--ink-soft); }
.risk-meter { display: inline-flex; gap: 3px; align-items: center; }
.risk-meter__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);   /* an empty dot */
}
/* Filled dots take the level's colour; the higher the level, the warmer (toward clay). */
.risk--lv1 .risk-meter__dot.is-on { background: var(--accent); }
.risk--lv2 .risk-meter__dot.is-on { background: var(--accent); }
.risk--lv3 .risk-meter__dot.is-on { background: #b0a35f; }   /* a muted amber, the middle of sage→clay */
.risk--lv4 .risk-meter__dot.is-on { background: #bd9068; }
.risk--lv5 .risk-meter__dot.is-on { background: var(--neg); }

/* The headline row: the big value on the left, the invested / return stats on the right */
.summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.summary__main { min-width: 0; }

/* A quiet eye button beside the headline value: tap to blur all money for privacy. */
.hide-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.hide-toggle:hover { color: var(--ink); background-color: rgba(0, 0, 0, 0.04); }
.hide-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* When hiding, "frost" every money figure rather than smudging it. Two techniques,
   both under .values-hidden, so layout stays put and the chart line shape still reads —
   only the numbers turn to a soft, deliberate frost (never a broken-looking blur):
   - HTML figures melt the DIGITS to a low-contrast frost via transparent text + a soft
     text-shadow. Because the glyphs themselves aren't `filter`-blurred, a crisp glass
     panel can sit ON TOP of the hero value (see the ::after below) without blurring too.
   - SVG chart/tooltip text can't do the transparent-text trick, so it keeps a gentle
     `filter` blur (softer + a touch faded than the old hard 8px). */
.values-hidden .summary__value,
.values-hidden .summary__sub,
.values-hidden .summary__return,
.values-hidden .summary__meta,
.values-hidden .stat__value,
.values-hidden .hd-money,
.values-hidden .chart-ylabel,
.values-hidden .tip-amt,
.values-hidden .tip-hold-val {
  user-select: none;
  -webkit-user-select: none;
}
/* The frost itself (HTML figures + their coloured child spans). The digits go fully
   transparent and are replaced by a soft, DENSE halo (two stacked shadows) — heavy
   enough that adjacent digits' glows merge into one unreadable band, so the number can't
   be made out at all, while still reading as a deliberate frost rather than a hard blur.
   The `*` reaches nested coloured bits (e.g. the sage/terracotta return); text-shadow is
   inherited, so each element casts the halo for its own glyphs. No panel, no outline. */
.values-hidden .summary__value,
.values-hidden .summary__value *,
.values-hidden .summary__sub,
.values-hidden .summary__return,
.values-hidden .summary__meta,
.values-hidden .summary__meta *,
.values-hidden .stat__value,
.values-hidden .hd-money {
  color: transparent !important;
  text-shadow: 0 0 15px rgba(24, 34, 32, 0.42), 0 0 26px rgba(24, 34, 32, 0.30);
}
html[data-theme="dark"] .values-hidden .summary__value,
html[data-theme="dark"] .values-hidden .summary__value *,
html[data-theme="dark"] .values-hidden .summary__sub,
html[data-theme="dark"] .values-hidden .summary__return,
html[data-theme="dark"] .values-hidden .summary__meta,
html[data-theme="dark"] .values-hidden .summary__meta *,
html[data-theme="dark"] .values-hidden .stat__value,
html[data-theme="dark"] .values-hidden .hd-money {
  text-shadow: 0 0 15px rgba(244, 246, 247, 0.48), 0 0 26px rgba(244, 246, 247, 0.34);
}
/* SVG text keeps a soft blur (the transparent-text trick doesn't apply to <text> fill),
   pushed strong enough to be unreadable too. */
.values-hidden .chart-ylabel,
.values-hidden .tip-amt,
.values-hidden .tip-hold-val {
  filter: blur(7px);
  opacity: 0.5;
}
.summary__label {
  font-size: 18px;               /* same letter as "Current portfolio" below */
  font-weight: 500;
  color: var(--ink);             /* Deep Pine — clearly names where you are */
  letter-spacing: -0.005em;
  line-height: 1.15;
}
/* The "Portfolio" heading, in senyera gold. Uses --gold-deep so the yellow
   stays readable on the white ground (pure --gold is too pale for text). */
.summary__label--gold { color: var(--gold-deep); }
.summary__value {
  font-size: 52px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 8px 0 6px;
  color: var(--headline);
}
/* The value splits into a deep-sage number + a muted currency suffix. The suffix is
   also a quick currency switch (click to cycle, right-click for all), so it gets a
   gentle interactive affordance — a pointer + a soft pill that warms on hover/focus. */
.summary__value .v-ccy {
  font-size: 30px;
  color: var(--ink-soft);
  margin-left: 6px;
  cursor: pointer;
  border-radius: 8px;
  padding: 0 4px;
  margin-right: -4px;                 /* keep the eye's spacing unchanged despite the padding */
  transition: color 0.18s ease, background-color 0.18s ease;
  -webkit-user-select: none;
  user-select: none;
}
.summary__value .v-ccy:hover {
  color: var(--ink);
  background-color: rgba(42, 42, 40, 0.06);
}
html[data-theme="dark"] .summary__value .v-ccy:hover { background-color: rgba(255, 255, 255, 0.08); }
.summary__value .v-ccy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.summary__sub {
  font-size: 13px;
  color: var(--ink-soft);
}

/* The single meta line under the big value. EVERY view (Total value / Savings /
   Performance / Compare) renders its one meta line into this same fixed-height slot, so
   the header is pixel-identical across views — the tabs and the chart below never move
   when you switch. Only the text + the graph change, and they dissolve together. */
.summary__meta {
  margin-top: 5px;
  /* Fixed to the TALLEST single meta line (the 17px .summary__return on Total value /
     Savings, line-height 27.2px) so Performance's shorter 13px .summary__sub line fills the
     SAME slot instead of collapsing 3px — which used to shove the tabs, selectors and chart
     up on the switch to Performance (the "flicker"). Still grows for a 2nd wrapped line. */
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 2px;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* Option A on the Total-value view: one calm line under the big value — the return
   (coloured, value only) then a muted "· X invested". Replaces the old right stat column. */
.summary__return {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.summary__return .stat__arrow { font-size: 12px; }
.summary__invested {
  color: var(--ink-soft);
  margin-left: 6px;
}

/* The right-hand stats column: Invested + Return, quietly stacked and right-aligned */
.summary__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: none;
  text-align: right;
  padding-top: 2px;
}
.stat__label {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stat__value {
  font-size: 17px;
  color: var(--ink);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.stat__arrow { font-size: 12px; }

/* The chart header: currency/compare (left, quiet) + time-range pills (right) */
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
/* the account picker on the left of the control bar */
.chart-head__acct {
  position: relative;   /* anchors the account popover */
  display: flex;
  align-items: center;
  gap: 12px;            /* breathing room between the chip and the Add-account pill */
  min-width: 0;
}

/* ── "Add account" call-to-action: a discrete hairline pill — quiet cooling-grey outline,
   regular-weight muted text — led by a small senyera-gold plus (the lone spark from the
   logo). It sits just right of the account chip and opens the drop overlay. ── */
.acct-add-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 17px 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.acct-add-cta__plus {
  flex: none;
  display: block;
}
.acct-add-cta:hover { border-color: var(--ink-soft); color: var(--ink); }
.acct-add-cta:focus { outline: none; }
.acct-add-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Compare / Currency / Time dropdowns grouped on the right */
.chart-head__controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.range-select,
.account-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;   /* same as the page */
  border: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 5px 22px 5px 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  /* a small chevron on the right */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237a7a73' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.range-select:hover,
.account-select:hover { color: var(--ink); }
.range-select:focus,
.account-select:focus { outline: none; }

/* The header is the positioning context for the floating date pickers. */
.chart-head { position: relative; }

/* the custom from → to date pickers: a small, quiet group that floats just BELOW the "Dates"
   dropdown (top-right of the chart). Absolutely positioned, so showing it never resizes the
   header or nudges the graph; kept right under the controls so it stays off the plotted line. */
.date-range {
  position: absolute;
  top: 100%;                /* just under the header row */
  right: 0;                 /* aligned under the "Dates" dropdown */
  margin-top: -6px;         /* nudged up a touch so it never touches the graph's top */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* Hidden → gone entirely, so the header looks exactly as before on a preset range. */
.date-range.hidden { display: none; }
.date-range__sep { color: var(--ink-soft); font-size: 12px; }
.date-input {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  padding: 3px 5px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.date-input:hover { color: var(--ink); border-color: var(--ink-soft); }
.date-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── The account chip: a Trencadís mosaic avatar + a two-line name/meta + a chevron.
   The avatar is the account's own mosaic tile; the account you're viewing wears a
   senyera-gold crown (see .acct-av below). ── */
.account-select {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  max-width: 260px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  background-image: none;
  border: none;
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.account-select:hover { background-color: rgba(42, 42, 40, 0.05); }
.account-select:focus { outline: none; }
.account-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-select__stack {
  display: flex;
  flex-direction: column;
  line-height: 1.22;
  min-width: 0;
  text-align: left;
}
.account-select__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.account-select__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.account-select__chev {
  flex: none;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1;
}

/* ── The avatar: a sculpted mosaic tile. Five brand tiles (Steel Sage · sage · Green
   Platinum · gold · terracotta); the active account's tile keeps its colour and gains
   a gold ring — a finial crowning a spire. "All accounts" is a quiet outlined ∑-mark. ── */
.acct-av {
  flex: none;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--on-accent);
}
.acct-av--all {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.acct-av--all svg { width: 15px; height: 15px; }
.acct-av--tile {
  overflow: hidden;
  background: var(--b, var(--accent));   /* solid fallback where color-mix is unsupported */
  background: conic-gradient(from 210deg,
      color-mix(in srgb, var(--b) 84%, #fff), var(--b) 42%,
      color-mix(in srgb, var(--b) 82%, #000) 76%,
      color-mix(in srgb, var(--b) 84%, #fff));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28),
              inset 0 -2px 5px rgba(0, 0, 0, 0.16),
              0 1px 2px rgba(24, 34, 32, 0.18);
}
.acct-av--tile > span {   /* the monogram sits above the sheen */
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(24, 34, 32, 0.4);
}
.acct-av--tile::after {   /* a diagonal sheen — light catching the broken tile */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,0.32) 0%, transparent 44%, rgba(0,0,0,0.16) 100%);
}
.acct-tile-1 { --b: var(--at1); }
.acct-tile-2 { --b: var(--at2); }
.acct-tile-3 { --b: var(--at3); }
.acct-tile-4 { --b: var(--at4); }
.acct-tile-5 { --b: var(--at5); color: var(--gold-ink); }   /* the lightest green → dark monogram */
.acct-tile-5 > span { text-shadow: 0 1px 1px rgba(255,255,255,0.35); }
.acct-av.is-crown {   /* the gold crown keeps the tile's own sculpt underneath */
  box-shadow: var(--gold-glow),
              inset 0 1px 0 rgba(255, 255, 255, 0.3),
              inset 0 -2px 5px rgba(0, 0, 0, 0.18);
}

/* ── The popover: a raised card. Rows are labels wrapping a (visually hidden) checkbox,
   so the existing tick wiring is untouched — the ✓ + wash reflect the checked state. ── */
.acct-picker { position: relative; }
.acct-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  /* Sits above the animated broker marquee below it. The marquee's `animation`
     promotes it to its own GPU layer; a non-composited popover can paint BEHIND
     that layer even with a higher z-index (the logos bleed through the card's
     lower half). translateZ(0) puts the menu on its own composite layer too, so
     it reliably wins. High z-index keeps it clear of everything else nearby. */
  z-index: 60;
  transform: translateZ(0);
  min-width: 240px;
  max-width: 292px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 48px -12px rgba(24, 34, 32, 0.28),
              0 4px 14px -6px rgba(24, 34, 32, 0.16),
              var(--sheen-hi);
}
.acct-menu.hidden { display: none; }   /* explicit: the panel hides when closed */
.acct-menu__label {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 6px 12px 6px;
  opacity: 0.72;
}
.acct-menu__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.acct-menu__row:hover { background: rgba(42, 42, 40, 0.05); }
/* Any ticked account — one or many — carries the senyera-gold wash (never grey). */
.acct-menu__row.is-on { background: var(--gold-tint); }
.acct-cbx {   /* the real checkbox, hidden but still toggled by the label click */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
/* a long account name stays on one line, trailing off with an ellipsis */
.acct-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.acct-menu__sub {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}
.acct-check {
  flex: none;
  color: var(--accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.acct-menu__row.is-on .acct-check { opacity: 1; transform: none; color: var(--gold-deep); }
/* Gaudí's hanging chain (a catenary) as a hairline divider */
.acct-catenary { display: block; width: 100%; height: 13px; margin: 5px 0; color: var(--line); }
.acct-catenary path { fill: none; stroke: currentColor; stroke-width: 1; }
.acct-menu__add {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-radius: 11px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.acct-menu__add:hover { color: var(--ink); background: rgba(42, 42, 40, 0.05); }
.acct-add__plus {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px dashed var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-soft);
}

/* each side of the chart head lays its controls out in a quiet row */
.chart-head__side {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* the "Compare" button sits by the currency/range pickers on the right */
.compare-btn {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.compare-btn:hover { color: var(--ink); border-color: var(--ink-soft); }
.compare-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-btn--active,
.compare-btn--active:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* The Live toggle: word + dot are ALWAYS both visible — turning it on/off only
   changes the dot's pulse and the text's weight, nothing appears or vanishes. */
.live-steady {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 4px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.live-steady:hover { border-color: var(--line); }
.live-steady:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.live-steady .steady-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.5;
  flex: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.live-steady.is-on { color: var(--ink); font-weight: 600; }
.live-steady.is-on .steady-dot {
  background: var(--accent);
  opacity: 1;
  animation: live-pulse 1.8s ease-in-out infinite;
}

/* The "Compare" control: a select-like button that opens a checkbox popover, so you can
   tick several benchmarks at once. Sits with the currency/range dropdowns and reads the
   same — quiet, borderless, a small chevron. */
.cmp-picker { position: relative; display: inline-flex; }
.compare-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 5px 6px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.compare-select:hover { color: var(--ink); }
.compare-select--on { color: var(--ink); }
.compare-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.compare-select__chev { font-size: 10px; color: var(--ink-soft); }
/* the checkbox popover (mirrors the account menu) */
.cmp-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  min-width: 168px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
}
.cmp-menu.hidden { display: none; }
.cmp-menu__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.cmp-menu__row:hover { background: rgba(42, 42, 40, 0.05); }
.cmp-menu__row input { accent-color: var(--accent); cursor: pointer; flex: none; }

/* a small, quiet "+ Add" button beside the account picker */
.add-acct {
  background: none;
  border: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  margin-left: 2px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.add-acct:hover { color: var(--accent); }

/* The timeline chart — the page's hero: given room to breathe above and below so it
   reads as the main focus, with the quiet control bar and caption secondary to it. */
#chartHost {
  margin-top: 8px;
  margin-bottom: 4px;
}
.chart {
  width: 100%;
  height: auto;
  display: block;
}
.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;          /* a fine, delicate line */
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-area {
  fill: url(#chartFade);      /* soft vertical fade, dissolving to the baseline */
  opacity: 1;
  stroke: none;
}
/* The two ends of that fade: a whisper of sage under the line → nothing below */
.chart-fade-top { stop-color: var(--accent); stop-opacity: 0.18; }
.chart-fade-bot { stop-color: var(--accent); stop-opacity: 0; }
/* The savings line on the Compare chart: a quiet, dashed grey behind the value line */
.chart-line--savings {
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  opacity: 0.7;
}
.chart-dot--savings {
  fill: var(--ink-soft);
  stroke: var(--white);
  stroke-width: 2;
}
/* The benchmark-index lines on the Compare chart: solid coloured lines (markets that move
   every day), distinct from the dashed-grey savings line. S&P 500 = clay, Nasdaq = slate. */
.chart-line--sp500,
.chart-line--nasdaq {
  stroke-width: 1.75;
  opacity: 0.85;
}
.chart-line--sp500  { stroke: var(--neg); }
.chart-line--nasdaq { stroke: var(--bench); }

/* ── The Live chart (today, minute by minute) ────────────────────────────────
   Same skin as every other chart, with three additions: the dashed previous-close
   line the day is read against, a pulsing dot on the live end of the line, and a
   terracotta variant for a day that's below that reference. */
.chart-prev {
  stroke: var(--ink-soft);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  opacity: 0.55;
}
.chart-prevlab {
  fill: var(--ink-soft);
  font-size: 9.5px;
  text-anchor: end;
  letter-spacing: 0.04em;
  font-family: -apple-system, sans-serif;
}
.chart-live { fill: var(--accent); }
.chart-live-halo {
  fill: var(--accent);
  opacity: 0.2;
  /* Its own keyframes: live-pulse also scales, and a transform on an SVG circle scales
     about the canvas origin — it would fly off the chart. Fade only. */
  animation: chart-live-pulse 1.8s ease-in-out infinite;
}
@keyframes chart-live-pulse {
  0%, 100% { opacity: 0.26; }
  50%      { opacity: 0.05; }
}
@media (prefers-reduced-motion: reduce) { .chart-live-halo { animation: none; } }
/* Pre-market / after-hours: a faint wash outside the regular session, fenced off with a
   hairline — the same separation Yahoo draws, in this app's quieter register. */
.chart-xhours { fill: var(--ink); opacity: 0.035; }
.chart-xdiv {
  stroke: var(--ink-soft);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.35;
}
.chart--down .chart-line { stroke: var(--neg); }
.chart--down .chart-fade-top { stop-color: var(--neg); }
.chart--down .chart-fade-bot { stop-color: var(--neg); }
.chart--down .chart-live,
.chart--down .chart-live-halo { fill: var(--neg); }
.chart-dot--sp500,
.chart-dot--nasdaq {
  stroke: var(--white);
  stroke-width: 2;
}
.chart-dot--sp500  { fill: var(--neg); }
.chart-dot--nasdaq { fill: var(--bench); }

/* The little key under the Compare chart */
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.legend-swatch {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top-width: 2px;
  border-top-style: solid;
}
.legend-swatch--value   { border-top-color: var(--ink); }
.legend-swatch--savings { border-top-color: var(--ink-soft); border-top-style: dashed; }
.legend-swatch--sp500   { border-top-color: var(--neg); }
.legend-swatch--nasdaq  { border-top-color: var(--bench); }

/* The coloured value rows inside the Compare hover card */
.tip-amt--value   { fill: var(--tip-ink); }
.tip-amt--savings { fill: var(--tip-sub); }
.tip-amt--sp500   { fill: var(--neg); }
.tip-amt--nasdaq  { fill: var(--bench); }
.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  opacity: 0.55;
}
.chart-zero {
  stroke: var(--ink-soft);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}
.chart-ylabel {
  fill: var(--ink-soft);
  font-size: 11px;
  text-anchor: end;
  font-family: -apple-system, sans-serif;
}
.chart-xlabel {
  fill: var(--ink-soft);
  font-size: 11px;
  text-anchor: middle;
  font-family: -apple-system, sans-serif;
}

/* Hover readout */
.chart-capture { cursor: crosshair; }
.hover { pointer-events: none; }
/* The hover cursor line is hidden — the dot + card mark the point without a full-height
   rule crossing the graph. (Element kept in the SVG so the hover JS wiring is untouched.) */
.chart-cursor {
  display: none;
}
.chart-dot {
  fill: var(--accent);
  stroke: var(--white);
  stroke-width: 2;
}
.tip { filter: drop-shadow(0 10px 24px rgba(40, 46, 38, 0.20)); }
/* The hover card: a cool "Silver" platinum pane with a soft border, floating over the chart. */
.tip-bg {
  fill: var(--tip-bg);
  stroke: var(--tip-rim);
  stroke-width: 1;
}
.tip-amt {
  fill: var(--tip-ink);
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
.tip-date {
  fill: var(--tip-sub);
  font-size: 11px;
  font-family: -apple-system, sans-serif;
}
/* A hairline between the value/date header and the holdings list */
.tip-div {
  stroke: rgba(35, 38, 43, 0.14);
  stroke-width: 1;
}
/* "What you held then": name on the left, its value flush-right, quiet and even */
.tip-hold-name {
  fill: var(--tip-ink);
  font-size: 11.5px;
  font-family: -apple-system, sans-serif;
}
.tip-hold-val {
  fill: var(--tip-sub);
  font-size: 11.5px;
  text-anchor: end;
  font-family: -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Drag-to-measure: a shaded band between two chosen points + a change readout.
   Sage when the value rose over the span, clay when it fell. */
.measure { pointer-events: none; }
.measure-band { fill: var(--ink); opacity: 0.08; }
.measure--neg .measure-band { fill: var(--neg); }
.measure-edge {
  fill: var(--ink);
  stroke: var(--white);
  stroke-width: 2;
}
.measure--neg .measure-edge { fill: var(--neg); }
.measure-sel { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.22)); }
.measure-sel-bg {
  fill: var(--tip-bg);
  stroke: none;
}
.measure-sel-amt {
  fill: var(--tip-ink);
  font-size: 14px;
  font-weight: 600;
  font-family: -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
.measure--neg .measure-sel-amt { fill: var(--neg); }
.measure-sel-range {
  fill: var(--tip-sub);
  font-size: 11px;
  font-family: -apple-system, sans-serif;
}
.tip-hold-more {
  fill: var(--tip-sub);
  font-style: italic;
}

.chart__caption {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 16px;
}
.note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ---------- Live prices control ---------- */
.live-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.live-bar__text { color: var(--ink); }
/* the soft pulsing dot that signals "live" */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .live-dot, .steady-dot { animation: none; } }

/* ---------- Footer ---------- */
.reassurance {
  margin-top: 72px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
/* Cloud-sync status: a quiet " · Synced" appended by sync.js via a data
   attribute, so the base privacy copy is untouched for signed-out users. */
.reassurance[data-sync]:not([data-sync=""])::after {
  content: " · " attr(data-sync);
  color: var(--accent);
}
/* A quiet contact line under the privacy note. */
.reassurance__contact {
  margin-top: 8px;
}
.reassurance__contact a {
  color: var(--accent);
  text-decoration: none;
}
.reassurance__contact a:hover {
  text-decoration: underline;
}

/* ---------- Trust strip: grayscale broker marquee ----------
   A calm, auto-scrolling row of supported-broker logos. The logos are muted
   grey (--ink-soft) and monochrome; the viewport fades them at both edges and
   the track slides -50% (it holds the set twice) for a seamless infinite loop. */
.trust {
  margin-top: 80px;
}
.trust__eyebrow {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
  margin: 0 0 28px;
}
.trust__viewport {
  overflow: hidden;
  /* soft fade at both ends, so logos drift in and out rather than snapping */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.trust__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: trust-scroll 46s linear infinite;
}
.trust__viewport:hover .trust__track {
  animation-play-state: paused;
}
.trust__logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  /* The spacing lives on each logo (not a flex `gap`) so the wrap-around at
     the loop seam is exactly one logo + one identical gap — perfectly even
     everywhere and no jump when the -50% loop repeats. */
  margin-inline-end: 52px;
  color: var(--ink-soft);
  opacity: 0.72;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;          /* the original small scale */
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.trust__logo:hover {
  opacity: 1;
}
/* The landing-page broker strip shows real full-colour brand logos, so it runs
   at full opacity instead of the muted grey the shared rule sets. Most logos are
   the brokers' real SVG artwork (.trust__img); a few are brand-coloured wordmarks
   (.trust__wm / .trust__ing) where no clean official SVG was available. */
.trust--lp .trust__logo { opacity: 1; }
/* Real SVG logos sit as images; per-logo heights (inline) keep them optically
   balanced despite very different artwork proportions. */
.trust__img { display: block; width: auto; height: 22px; }
/* In dark theme the strip sits on the dark sage background, where dark wordmarks
   (Revolut, Trade Republic, DEGIRO, Swissquote…) would vanish. Render the SVG
   artwork as clean white silhouettes there so every logo stays legible. */
:root[data-theme="dark"] .trust--lp .trust__img { filter: brightness(0) invert(1); opacity: 0.92; }
/* ING's signature orange tile — explicit colours (the shared .trust__ing uses a
   `background: currentColor` trick that collapses to a solid block once a brand
   colour is set on the logo). White "ING" on orange, legible in both themes. */
.trust--lp .trust__ing { background: #FF6200; color: #fff; }
.trust__wm--serif {
  font-family: Georgia, 'Times New Roman', serif;
}
.trust__wm--yuh {
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-weight: 800;
}
.trust__mk {
  display: block;
  height: 0.66em;           /* marks scale with the wordmark */
  width: auto;
}
/* ING sits in its signature rounded box */
.trust__ing {
  display: inline-block;
  background: currentColor;
  color: var(--paper);
  font-style: italic;
  font-weight: 800;
  line-height: 1;
  padding: 0.14em 0.22em 0.18em;
  border-radius: 0.14em;
}
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 28px;
  }
}

/* Super-discrete "forget account" line at the very bottom of the page */
.accounts-note {
  margin-top: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
}
.accounts-note:empty { display: none; }
/* A link button that stays almost invisible until you look for it */
.linkbtn--quiet {
  color: var(--ink-soft);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.linkbtn--quiet:hover {
  opacity: 1;
  color: var(--accent);
  text-decoration: underline;
}

/* A small helper: hides an element completely */
.hidden { display: none; }

/* ---------- Drop overlay: drag a folder of exports to add accounts ---------- */
/* A soft, dimmed sheet over the page, with one calm card in the middle. */
.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 42, 40, 0.28);        /* a quiet ink wash */
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease both;
}
/* Keep the generic .hidden working here: .drop-overlay's display:flex is declared
   later in the file, so without this more-specific rule it would win and the
   overlay would never actually hide. */
.drop-overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- SnapTrade "Automatically connect" — the broker portal, embedded IN the app.
   It reuses the Log in / Register page's green frosted field (.signup-stage +
   .signup-frost) as the backdrop, and floats SnapTrade's OWN portal card on it. We add
   no title/status/second card — SnapTrade already draws a full card (header, its own ×,
   "Select your institution", search, broker list), so the wrapper is just the field. */
.st-modal {                        /* the element also carries .signup-stage (green field) */
  position: fixed;
  inset: 0;
  z-index: 60;                     /* above the navbar (40/41) + drop overlay (50) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 20px;              /* generous green field all around the card */
  animation: fadeIn 0.2s ease both;
}
.st-modal.hidden { display: none; }

/* SnapTrade's portal, floating on the frost as one clean card. Sized to fit the portal
   (its own card is ~408px wide and the broker list scrolls INSIDE it), so the header +
   search + several brokers all show without cramping — the fix for the cut-off list. */
.st-portal {
  position: relative;
  z-index: 2;
  width: 468px;
  max-width: 100%;
  height: min(680px, 84vh);
  border-radius: 24px;
  padding: 16px;                   /* a soft white mat so SnapTrade breathes, not edge-to-edge */
  background: #fff;
  box-shadow: 0 40px 90px -28px rgba(10, 16, 13, 0.6);
}
.st-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 12px;             /* framed inside the mat */
  overflow: hidden;
  background: #fff;
}
.st-modal__frame[hidden] { display: none; }

/* One quiet lightbox × in the field's top-right — a reliable escape that stays clear of
   SnapTrade's own × (so there aren't two side by side). */
.st-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.15s ease;
}
.st-modal__close:hover { background: rgba(255, 255, 255, 0.34); }

/* The "loading your holdings" state shown after a successful link — fills the portal. */
.st-modal__wait {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: var(--white);
}
.st-modal__wait[hidden] { display: none; }
.st-modal__spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--gold-deep);
  animation: stSpin 0.8s linear infinite;
}
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-modal__waitmsg {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.drop-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  padding: 28px;
}

/* The quiet close (×) in the corner */
.drop-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
.drop-close:hover { color: var(--ink); }

/* SnapTrade — the "connect your broker" block above the file drop */
.connect-broker { text-align: center; padding: 6px 4px 0; }
.connect-broker__title {
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.connect-broker__hint {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto 18px;
  max-width: 36ch;
}
.status--connect {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.status--connect:empty { margin: 0; }

/* Both action buttons run full-width and stack, so they read as a matched pair:
   a filled sage hero, then a quiet outlined second choice below the broker wall. */
.connect-broker .btn--broker,
.btn--file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.btn__ic { flex: 0 0 auto; width: 16px; height: 16px; }
.btn--broker .btn__ic { width: 17px; height: 17px; }

/* A compact drift of the brokers we connect to (reuses the trust-strip marks,
   scaled down for the card; the track holds the set twice and slides -50%). */
.cb-marquee {
  overflow: hidden;
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.cb-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: trust-scroll 30s linear infinite;
}
.cb-marquee:hover .cb-marquee__track { animation-play-state: paused; }
.cb-marquee .trust__logo {
  font-size: 15px;              /* down from the page strip's 24px */
  margin-inline-end: 30px;
  opacity: 0.6;
}
.cb-support {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 12px 0 20px;
}
.cb-support b { color: var(--ink); font-weight: 600; }

/* The quiet secondary "Add your file manually" button (Variation C): the base
   .btn look — outlined, muted text, accent on hover — a touch lighter still. */
.btn--file {
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.btn--file:hover { color: var(--accent); }

.cb-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 14px 0 0;
}
.cb-privacy svg { flex: 0 0 auto; width: 13px; height: 13px; color: var(--accent); }

/* Drag hint — a clean full-card "drop here" state, invisible until a folder is
   dragged over the card. pointer-events:none so the drop still lands on the card. */
.drop-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1.5px dashed var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.drop-card--over .drop-hint { opacity: 1; }
/* On the file-drop view the dashed zone is the target, so hide the full-card hint. */
.drop-card--files .drop-hint { display: none; }

/* --- File-drop view (reached from "Add your file manually") --- */
.drop-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px 6px 4px 2px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}
.drop-back:hover { color: var(--ink); }
.drop-back svg { width: 18px; height: 18px; }

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 48px 24px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.drop-zone:hover,
.drop-zone:focus-visible { outline: none; border-color: var(--accent); }
/* Lit up while a folder is hovering over it */
.drop-zone--over {
  border-color: var(--accent);
  background: rgba(78, 97, 87, 0.08);
  transform: scale(1.01);
}
.drop-zone__icon { width: 40px; height: 40px; color: var(--accent); opacity: 0.9; }
.drop-zone__title { font-size: 18px; font-weight: 300; color: var(--ink); margin: 0; }
.drop-zone__hint  { font-size: 13px; color: var(--ink-soft); line-height: 1.7; max-width: 320px; margin: 0; }
.drop-zone__hint code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--ink);
}
#fileView .cb-privacy { margin-top: 18px; }
.drop-hint__icon { width: 44px; height: 44px; color: var(--accent); opacity: 0.9; }
.drop-hint__title { font-size: 17px; font-weight: 300; color: var(--ink); margin: 0; }
.drop-hint__sub {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0;
}
.drop-card:focus-visible { outline: none; }

/* ═══════════════════════════════════════════════════════════════
   "Add your new account" — the redesigned add-account card.
   Lives inside #dropOverlay; overrides the older .drop-card look.
   Matches the landing (Plus Jakarta Sans, sage + senyera gold).
   ═══════════════════════════════════════════════════════════════ */
/* Softer, page-matched backdrop: the portfolio behind reads as a calm grey blur. */
.drop-overlay {
  background: rgba(226, 232, 231, 0.55);
  -webkit-backdrop-filter: blur(7px) saturate(0.92);
  backdrop-filter: blur(7px) saturate(0.92);
}
html[data-theme="dark"] .drop-overlay { background: rgba(10, 16, 13, 0.55); }

.drop-card.aa-card {
  max-width: 520px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  box-shadow: 0 40px 90px -28px rgba(10, 16, 13, 0.4);
  padding: 30px 30px 24px;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html[data-theme="dark"] .drop-card.aa-card { background: var(--card); border-color: var(--line); }

.aa-title { font-size: 27px; font-weight: 700; line-height: 1.2; margin: 0 0 20px; text-align: center; color: var(--ink); }

/* search box (default) + selected-broker bar (after pick) share the same slot & size */
.aa-slot { position: relative; }
.aa-search { position: relative; }
.aa-search > svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-soft); }
.aa-search input { width: 100%; padding: 12px 16px 12px 42px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); }
.aa-search input:focus { outline: none; border-color: var(--accent); }
.aa-search input::placeholder { color: var(--ink-soft); opacity: 1; }
.aa-chosen { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.aa-chosen__mark { height: 24px; display: flex; align-items: center; color: var(--ink); }
.aa-chosen__name { flex: 1; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.aa-chosen__check { width: 18px; height: 18px; color: var(--accent); flex: none; }

/* simple back arrow, top-left of the card — no circle, just the arrow */
.aa-back { position: absolute; top: 18px; left: 18px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--ink-soft); cursor: pointer; padding: 0; transition: color 0.18s; }
.aa-back:hover { color: var(--ink); }
.aa-back svg { width: 22px; height: 22px; }

/* the most-popular broker grid */
.aa-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin: 16px 0 10px 2px; }
.aa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.aa-brk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, transform 0.05s; text-align: center; }
.aa-brk:hover { border-color: var(--gold); box-shadow: 0 6px 18px -10px rgba(24, 34, 32, 0.4); }
.aa-brk:active { transform: translateY(1px); }
.aa-brk__mark { height: 24px; display: flex; align-items: center; color: var(--ink); }
.aa-brk__name { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.aa-brk .ing { font-weight: 800; font-size: 18px; color: #ff6200; }

/* the three ways in — register-sized pills. Gold primary; the other two greyed. */
.aa-opts { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; animation: aaFade 0.28s ease both; }
@keyframes aaFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.aa-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s, transform 0.05s; }
.aa-opt:active { transform: translateY(1px); }
.aa-opt__ic { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.aa-opt__ic svg { width: 20px; height: 20px; }
/* PRIMARY — senyera gold, the webpage CTA */
.aa-opt--gold { background: var(--gold); border-color: var(--gold); color: #17211d; font-weight: 700; box-shadow: 0 12px 30px -16px rgba(20, 29, 25, 0.5); }
.aa-opt--gold:hover { background: #f2cf00; border-color: #f2cf00; }
.aa-opt--gold:disabled { opacity: 0.6; cursor: default; }
/* SECONDARY — quietly greyed, so the eye lands on the gold one */
.aa-opt--muted { color: var(--ink-soft); background: transparent; }
.aa-opt--muted .aa-opt__ic { opacity: 0.7; }
.aa-opt--muted:hover { border-color: var(--accent); color: var(--accent); }

.aa-foot { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--ink-soft); font-size: 13px; margin-top: 18px; }
.aa-foot svg { width: 15px; height: 15px; }

/* make .hidden win over the display:flex/inline-flex set above */
.aa-chosen.hidden, .aa-opts.hidden, .aa-back.hidden { display: none; }