/*
 * Invix web styles. The UI/design guideline is DESIGN.md at the repository root: warm cream canvas, warm ink, one orange
 * CTA colour used scarcely, display type at weight 400 with negative tracking, hairline-only depth (no shadows), 8px CTA
 * radius, 12px card radius, 80px section rhythm, monospace on every code surface. Use the tokens below — never inline hex.
 */
:root {
  /* colors (DESIGN.md › colors) */
  --primary: #f54e00;
  --primary-active: #d04200;
  --ink: #26251e;
  --body: #5a5852;
  --muted: #807d72;
  --muted-soft: #a09c92;
  --hairline: #e6e5e0;
  --hairline-soft: #efeee8;
  --hairline-strong: #cfcdc4;
  --canvas: #f7f7f4;
  --canvas-soft: #fafaf7;
  --surface-card: #ffffff;
  --surface-strong: #e6e5e0;
  --on-primary: #ffffff;
  --success: #1f8a65;
  --error: #cf2d56;
  /* Invix extensions (DESIGN.md › Invix adaptation): a caution tone for partial/stale data, and tints for status badges */
  --warning: #9a5b12;
  --success-tint: #e2f0ea;
  --warning-tint: #f6ebd9;
  --error-tint: #f9e3e9;
  /* AI timeline (DESIGN.md › Timeline): Ask Invix's tool rows only. The same pastels in both themes, as dots and pills;
     pill text is always the light theme's ink, since the pastels stay light on the dark canvas. */
  --timeline-thinking: #dfa88f;
  --timeline-grep: #9fc9a2;
  --timeline-read: #9fbbe0;
  --timeline-edit: #c0a8dd;
  --timeline-done: #c08532;
  --timeline-ink: #26251e;

  /* typography (the licensed display face is substituted: see DESIGN.md › Invix adaptation) */
  --font-sans: "Inter", "InterVariable", system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rounded */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-base: 16px;
  --s-md: 20px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  --container: 1200px;
  --gutter: 32px;
}

/* Dark mode: the same tokens on a warm near-black canvas. Follows the system unless the viewer picks a theme (theme.js sets
   data-theme on <html>). Keep both dark blocks identical. */
:root { color-scheme: light; --sk-shine: #f3f2ee; --chart-estimate: #f54e00; --chart-estimate-bench: #a09c92; --chart-verified: #1f8a65; --chart-verified-bench: #5a5852; --chart-sleeve: #5b3fd6; --chart-return: #c2410c; --slice-1: #2a78d6; --slice-2: #1baf7a; --slice-3: #4a3aa7; --slice-4: #eda100; --slice-5: #e87ba4; --slice-6: #008300; --corr-pos: #d9572b; --corr-neg: #2a78d6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #f54e00; --primary-active: #ff6a1f; --on-primary: #ffffff;
    --ink: #edece5; --body: #b9b6ac; --muted: #8e8b81; --muted-soft: #6d6a61;
    --hairline: #2f2e28; --hairline-soft: #262520; --hairline-strong: #45433b;
    --canvas: #171612; --canvas-soft: #1c1b17; --surface-card: #1f1e1a; --surface-strong: #33322b;
    --sk-shine: #403f37;
    --success: #4cc095; --error: #f06b8e; --warning: #e3a857;
    --success-tint: #16332a; --warning-tint: #3a2d18; --error-tint: #3e1b26;
    --chart-estimate: #ff6a1f; --chart-estimate-bench: #8e8b81; --chart-verified: #4cc095; --chart-verified-bench: #b9b6ac; --chart-sleeve: #a48bff; --chart-return: #fb7a3c;
    --slice-1: #3987e5; --slice-2: #199e70; --slice-3: #9085e9; --slice-4: #c98500; --slice-5: #d55181; --slice-6: #008300; --corr-pos: #ff7a45; --corr-neg: #3987e5;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #f54e00; --primary-active: #ff6a1f; --on-primary: #ffffff;
  --ink: #edece5; --body: #b9b6ac; --muted: #8e8b81; --muted-soft: #6d6a61;
  --hairline: #2f2e28; --hairline-soft: #262520; --hairline-strong: #45433b;
  --canvas: #171612; --canvas-soft: #1c1b17; --surface-card: #1f1e1a; --surface-strong: #33322b;
    --sk-shine: #403f37;
  --success: #4cc095; --error: #f06b8e; --warning: #e3a857;
  --success-tint: #16332a; --warning-tint: #3a2d18; --error-tint: #3e1b26;
  --chart-estimate: #ff6a1f; --chart-estimate-bench: #8e8b81; --chart-verified: #4cc095; --chart-verified-bench: #b9b6ac; --chart-sleeve: #a48bff; --chart-return: #fb7a3c;
  --slice-1: #3987e5; --slice-2: #199e70; --slice-3: #9085e9; --slice-4: #c98500; --slice-5: #d55181; --slice-6: #008300; --corr-pos: #ff7a45; --corr-neg: #3987e5;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 400 16px/1.5 var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--surface-strong); color: var(--ink) }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px }
a:hover { text-decoration-color: var(--ink) }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
b, strong { color: var(--ink); font-weight: 600 }

h1, h2, h3 { color: var(--ink); margin: 0 }
/* display-lg */
h1 { font-size: 36px; font-weight: 400; line-height: 1.2; letter-spacing: -0.72px }
/* display-md, with section rhythm above */
h2 { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.325px; margin: var(--s-xxl) 0 var(--s-sm) }
/* title-sm */
h3 { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0 0 var(--s-sm) }
h3 .muted, h3 .pill { font-weight: 400; margin-left: var(--s-xs) }
h1 + .pill, h1 ~ .pill { align-self: center }
p { margin: var(--s-xs) 0 }
ul, ol { margin: var(--s-xs) 0; padding-left: 20px }
li + li { margin-top: var(--s-xxs) }

.muted { color: var(--muted) }
.small { font-size: 14px }
.card .small, td.small, .meta { font-size: 13px }
.error { color: var(--error) }
.gain { color: var(--success) }
.loss { color: var(--error) }
/* Tax lots tab (D25): three views on a segmented control; numbers carry the page, words only where they decide something */
.lots-views { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--s-lg); background: var(--hairline-soft); border-radius: var(--r-pill) }
button.lots-view { height: 32px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--muted); background: transparent; border: 0; border-radius: var(--r-pill) }
button.lots-view:hover { background: transparent; color: var(--ink) }
button.lots-view.active, button.lots-view.active:hover { background: var(--surface-card); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline) }
button.link-btn { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px }
button.link-btn:hover { text-decoration-color: var(--ink) }
button.link-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
/* summary: three stats in one card */
.card.lots-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0 }
.lots-stat { padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-xxs) }
.lots-stat + .lots-stat { border-left: 1px solid var(--hairline-soft) }
.lots-stat .label, .lots-harvest-intro .label { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.lots-stat .value, .lots-harvest-intro .value { font-size: 30px; line-height: 1.2; letter-spacing: -0.6px; color: var(--ink); font-variant-numeric: tabular-nums }
.lots-stat .value.gain, .lots-harvest-intro .value.gain { color: var(--success) }
.lots-stat .value.loss, .lots-harvest-intro .value.loss { color: var(--error) }
.lots-stat .sub { font-size: 13px; color: var(--muted); line-height: 1.4 }
.lots-summary-foot { grid-column: 1 / -1; padding: var(--s-xs) var(--s-lg); border-top: 1px solid var(--hairline-soft) }
.lots-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-base); margin: 0 0 var(--s-base); padding: var(--s-sm) var(--s-base); background: var(--warning-tint); color: var(--ink); border-radius: var(--r-lg); font-size: 14px }
.lots-callout a { margin-left: auto; font-weight: 500 }
.lots-callout.info { background: var(--hairline-soft); color: var(--body) }
/* the year bar: how far a lot is through its first year */
.lot-bar { display: inline-block; position: relative; width: 72px; height: 6px; background: var(--surface-strong); border-radius: var(--r-pill); overflow: hidden; flex: none }
.lot-bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: var(--r-pill) }
.lot-held { display: inline-flex; align-items: center; gap: var(--s-xs); white-space: nowrap; font-size: 13px }
.lot-held.long .lot-bar i { background: var(--success) }
.lot-held.long { color: var(--success) }
/* turning long-term soon */
.lots-soon-list { list-style: none; margin: 0; padding: 0 }
.lots-soon { display: grid; grid-template-columns: minmax(0, 1fr) 120px 220px 90px; align-items: center; gap: var(--s-base); padding: var(--s-sm) 0; border-top: 1px solid var(--hairline-soft) }
.lots-soon:first-child { border-top: 0; padding-top: 0 }
li.lots-soon + li.lots-soon { margin-top: 0 }
.lots-soon .lot-bar { width: 120px }
.lots-soon-when { color: var(--ink); font-size: 14px }
.lots-soon-gain { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink) }
.lots-soon-gain.gain { color: var(--success) }
.lots-soon-gain.loss { color: var(--error) }
/* your lots: a toolbar, then one row per holding that opens onto its lots */
.lots-list-head h3 { margin: 0 }
.lots-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); margin: var(--s-sm) 0 var(--s-base) }
.lots-toolbar select { width: auto; height: 32px; padding: 0 32px 0 12px; font-size: 13px; background-position: calc(100% - 18px) 14px, calc(100% - 13px) 14px }
.lots-chips { display: inline-flex; gap: var(--s-xxs) }
.lots-toolbar-actions { display: inline-flex; align-items: center; gap: var(--s-xs) }
.lots-toolbar button { margin-top: 0 }
.lots-holding-head, .lots-holding > summary, .lots-retirement > summary { display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px 150px 64px; align-items: center; gap: var(--s-base) }
.lots-holding-head { padding: 0 0 var(--s-xs); border-bottom: 1px solid var(--hairline); font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.lots-holding-head .num, .lots-holding > summary .num { text-align: right; font-variant-numeric: tabular-nums }
.lots-holding { border-bottom: 1px solid var(--hairline-soft) }
.lots-holding:last-child { border-bottom: 0 }
.lots-holding > summary { list-style: none; cursor: pointer; padding: var(--s-sm) 0; color: var(--ink); font-size: 14px }
.lots-holding > summary::-webkit-details-marker, .lots-retirement > summary::-webkit-details-marker { display: none }
.lots-holding > summary:hover { background: var(--canvas-soft) }
.lots-holding-name { display: flex; align-items: center; gap: var(--s-xs); min-width: 0 }
.lots-holding-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lots-holding-account { display: block; font-size: 12px; line-height: 1.3 }
.lots-holding-count { font-size: 12px; text-align: right }
.lots-pct { font-size: 12px; opacity: .8 }
svg.lots-chevron { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease }
details[open] > summary svg.lots-chevron { transform: rotate(90deg) }
.lots-holding-body { padding: 0 0 var(--s-base) 24px }
.lots-holding-body .table-scroll { margin-bottom: var(--s-sm) }
.lots-table th, .lots-table td { padding-top: 8px; padding-bottom: 8px }
table.lots-table td.num, table.lots-table td.nowrap { white-space: nowrap }
.lots-none { margin: var(--s-base) 0 0 }
.lots-retirement > summary { cursor: pointer; list-style: none; grid-template-columns: auto 1fr; color: var(--ink) }
.lots-retirement[open] > summary { margin-bottom: var(--s-base) }
.lots-empty { text-align: center; padding: var(--s-xxl) var(--s-lg) }
.lots-empty p { max-width: 460px; margin: var(--s-xs) auto var(--s-base) }
/* account settings, opened from the toolbar */
.lots-accounts { position: relative }
.lots-accounts > summary { list-style: none; height: 30px; padding: 6px 12px; font-size: 13px }
.lots-accounts > summary::-webkit-details-marker { display: none }
.lots-accounts-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(520px, calc(100vw - 32px)); margin: 0 }
.lots-accounts-panel p { margin-top: 0 }
.lots-accounts-panel td { vertical-align: middle }
.lots-accounts-panel td select { min-width: 160px }
label.lots-check { display: inline-flex; gap: var(--s-xs); margin: 0; white-space: nowrap; font-size: 13px }
/* plan a sale */
.lots-planner h3 { margin-bottom: var(--s-xs) }
.lots-planner-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; gap: var(--s-base); align-items: end }
.lots-planner-fields label { margin: var(--s-xs) 0 0 }
.lots-planner-fields > button { margin-top: 0; height: 44px }
.lots-input-with { display: flex; gap: var(--s-xs); margin-top: 6px }
.lots-planner-fields label > select, .lots-planner-fields label > input { margin-top: 6px }
.lots-input-with button.small { height: 44px; margin: 0; padding: 0 14px }
.lots-picks { margin-top: var(--s-base) }
.lots-picks summary, .lots-steps details summary { display: inline-flex; align-items: center; gap: 4px; list-style: none; cursor: pointer; color: var(--ink) }
.lots-picks summary::-webkit-details-marker, .lots-steps details summary::-webkit-details-marker { display: none }
.lots-picks[open] { margin-bottom: 0 }
.lots-picks .table-scroll { margin-top: var(--s-xs) }
.lots-pick { width: 90px; height: 36px; padding: 6px 10px; font-size: 14px; text-align: right }
.lots-plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-xxs) var(--s-sm) }
.lots-plan-head h3 { margin: 0 }
.lots-plan-lede { margin: var(--s-xxs) 0 var(--s-base); color: var(--muted); font-size: 14px }
.lots-plan-cols, button.lots-plan { display: grid; grid-template-columns: 20px minmax(0, 1fr) 120px 110px 110px; gap: var(--s-base); align-items: center }
.lots-plan-cols { padding: 0 var(--s-sm) var(--s-xs); font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.lots-plan-cols .num { text-align: right }
button.lots-plan { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 20px minmax(0, 1fr) 120px 110px 110px; gap: var(--s-base); align-items: center; width: 100%; padding: var(--s-sm); border: 1px solid transparent; border-top-color: var(--hairline-soft); border-radius: var(--r-md); cursor: pointer; color: var(--body); font-size: 14px; transition: background-color .15s ease, border-color .15s ease }
button.lots-plan.no-gains { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) }
button.lots-plan:hover { background: var(--canvas-soft) }
button.lots-plan.selected { border-color: var(--ink); background: var(--canvas-soft) }
button.lots-plan.selected + button.lots-plan { border-top-color: transparent }
button.lots-plan:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
button.lots-plan .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink) }
button.lots-plan .num.gain { color: var(--success) }
button.lots-plan .num.loss { color: var(--error) }
.lots-plan-radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--hairline-strong); box-sizing: border-box }
button.lots-plan.selected .lots-plan-radio { border: 5px solid var(--ink) }
.lots-plan-name { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.lots-plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); color: var(--ink); font-weight: 500 }
.lots-plan-default { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--hairline-soft); padding: 1px 8px; border-radius: var(--r-pill) }
.lots-plan-notes { font-size: 12px; color: var(--warning) }
button.lots-plan .lots-plan-gain { font-size: 18px; letter-spacing: -0.3px }
.lots-plan-detail h3 { margin-bottom: var(--s-xs) }
.lots-steps { margin-top: var(--s-lg); padding-top: var(--s-base); border-top: 1px solid var(--hairline-soft) }
.lots-steps h3 { margin: 0 }
.lots-steps-list { margin: var(--s-sm) 0; padding-left: 22px }
.lots-steps-list li + li { margin-top: var(--s-xs) }
.lots-steps-lots { margin: var(--s-xxs) 0 0; padding-left: 18px }
/* harvest losses */
.lots-harvest-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-xl); align-items: center }
.lots-harvest-intro p { margin: 0; color: var(--body); max-width: 620px }
.lots-harvest-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 100px auto; gap: var(--s-xs) var(--s-base); align-items: center; padding: var(--s-base) 0; border-top: 1px solid var(--hairline-soft) }
.lots-harvest-row:first-child { border-top: 0; padding-top: 0 }
.lots-harvest-row:last-child { padding-bottom: 0 }
.lots-harvest-name { color: var(--ink); font-size: 14px }
.lots-harvest-loss { text-align: right; font-size: 18px; letter-spacing: -0.3px; font-variant-numeric: tabular-nums }
.lots-harvest-row > button { margin: 0 }
.lots-harvest-row .lots-track { grid-column: 2 / -1; margin: var(--s-xs) 4px 0 }
.lots-harvest-status { display: flex; gap: var(--s-xs); align-items: baseline; font-size: 14px }
.lots-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transform: translateY(-1px) }
.lots-dot.ok { background: var(--success) }
.lots-dot.warn { background: var(--warning) }
.lots-dot.bad { background: var(--error) }
.lots-track { position: relative; height: 34px; margin: 0 4px var(--s-xs) }
.lots-track-line { position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: var(--r-pill); background: var(--hairline-soft) }
.lots-track.possible .lots-track-line { background: var(--error-tint) }
.lots-track-today { position: absolute; top: 2px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); border-radius: 1px }
.lots-track-dot { position: absolute; top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--error); box-shadow: 0 0 0 2px var(--surface-card) }
.lots-track-label { position: absolute; top: 18px; font-size: 11px; color: var(--muted); white-space: nowrap }
.lots-track-label.start { left: 0 }
.lots-track-label.mid { left: 50%; transform: translateX(-50%); color: var(--ink) }
.lots-track-label.end { right: 0 }
@media (max-width: 760px) {
  .card.lots-summary { grid-template-columns: 1fr }
  .lots-stat .value { font-size: 26px }
  .lots-toolbar-actions { margin-left: 0 }
  .lots-stat + .lots-stat { border-left: 0; border-top: 1px solid var(--hairline-soft) }
  .lots-stat { padding: var(--s-base) var(--s-lg) }
  .lots-soon { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-xxs) var(--s-sm) }
  .lots-soon .lot-bar { grid-column: 1 / -1; grid-row: 3; width: 100% }
  .lots-soon-when { grid-column: 1; grid-row: 2; font-size: 13px }
  .lots-soon-gain { grid-column: 2; grid-row: 1 / 3 }
  .lots-holding-head { display: none }
  .lots-holding > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-sm) }
  .lots-holding > summary > :nth-child(2), .lots-holding > summary > :nth-child(5) { display: none }
  .lots-holding > summary > :nth-child(3) { grid-column: 2; grid-row: 1 }
  .lots-holding > summary > :nth-child(4) { grid-column: 2; grid-row: 2; font-size: 13px }
  .lots-holding-full { display: none }
  .lots-holding-body { padding-left: 0 }
  .lots-holding-body .lots-table tr > :nth-child(3), .lots-holding-body .lots-table tr > :nth-child(4) { display: none }
  .lot-held .lot-bar { width: 40px }
  .lots-planner-fields { grid-template-columns: 1fr }
  .lots-plan-cols { display: none }
  button.lots-plan, button.lots-plan.no-gains { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 2px }
  button.lots-plan > .num:not(.lots-plan-gain), button.lots-plan .lots-plan-sold-inline { grid-column: 2 / -1; text-align: left; font-size: 13px }
  button.lots-plan > .num:nth-child(4)::before { content: "Long-term " ; color: var(--muted) }
  button.lots-plan > .num:nth-child(5)::before { content: "Short-term "; color: var(--muted) }
  .lots-harvest-intro { grid-template-columns: 1fr; gap: var(--s-sm) }
  .lots-harvest-row { grid-template-columns: minmax(0, 1fr) auto }
  .lots-harvest-status, .lots-harvest-row .lots-track { grid-column: 1 / -1 }
  .lots-harvest-row > button { grid-column: 1 / -1; justify-self: start }
  .lots-accounts-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto }
}
/* caption-uppercase */
.eyebrow { display: block; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-xs) }

/* ------------------------------------------------------------------ top nav
   The app's frame, like an editor's: a slim full-width bar (logo, breadcrumb, Ask Invix, account) over the side nav, the
   page and the panes docked on the right (the security pane, Ask Invix), which all start under it at --top-h. */
:root { --top-h: 53px }
/* Above the panes docked under it (the security pane and its scrim, Ask Invix and its scrim: 15–20), so its menus open
   over them; below Ask Invix only while that is the full-screen phone sheet. */
.top { position: sticky; top: 0; z-index: 21; background: var(--canvas); border-bottom: 1px solid var(--hairline) }
body.ask-sheet-open .top { z-index: 10 }
.top-inner { height: calc(var(--top-h) - 1px); padding: 0 var(--s-sm) 0 var(--s-base); display: flex; align-items: center; gap: var(--s-sm) }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap }
.top .brand { font-size: 16px; gap: 8px }
.top .brand-logo { width: 22px; height: 22px }
.brand-logo { width: 24px; height: 24px; flex: none; fill: currentColor }
.brand-sub { color: var(--muted); font-weight: 400 }
/* The breadcrumb: the portfolio switcher, the open tab, then the security open beside it. It takes the room the Ask
   field leaves, and gives it up first. */
.crumbs { display: flex; align-items: center; min-width: 0; flex: 1 1 0; font-size: 13px }
.crumbs > nav.pf-switch::before, .top-crumb::before { content: "/"; padding: 0 6px 0 2px; color: var(--muted-soft); font-weight: 400 }
.crumbs > nav.pf-switch:not([hidden]) { display: inline-flex; align-items: center }
.top-crumb { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; padding-left: 4px }
.top-crumb:last-child, #crumb-tab:has(+ #crumb-sec[hidden]) { color: var(--ink) }
/* The portfolio switcher, on a portfolio's pages: its name and a chevron, opening the list of portfolios. */
nav.pf-switch { position: relative; min-width: 0; flex: 0 1 auto }
button.pf-switch-toggle { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 32px; padding: 0 6px 0 8px; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink); font-size: 13px; font-weight: 500 }
button.pf-switch-toggle:hover, button.pf-switch-toggle:active, button.pf-switch-toggle[aria-expanded="true"] { background: var(--hairline-soft); color: var(--ink) }
.pf-switch-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pf-switch-toggle svg, .tab-more-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none }
.pf-switch-menu, .tab-more-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(280px, calc(100vw - 32px)); max-height: min(420px, calc(100dvh - 96px)); overflow: auto; padding: 6px; background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg) }
.pf-switch-menu a, .tab-more-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 9px 10px; border-radius: var(--r-md); color: var(--ink); font-size: 13px; text-decoration: none }
.pf-switch-menu a span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pf-switch-menu a:hover, .tab-more-menu a:hover { background: var(--hairline-soft); color: var(--ink) }
.pf-switch-menu a[aria-current="page"], .tab-more-menu a.active { background: var(--surface-strong); font-weight: 500 }
.pf-switch-note { margin: 0; padding: 10px; font-size: 13px; color: var(--body) }
.pf-switch-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline) }
.pf-switch-foot a { color: var(--body) }
/* A connection to reconnect: a dot on the account button and on Connected accounts, a count in the account menu. */
.alert-dot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: var(--r-pill); background: var(--warning); border: 2px solid var(--canvas); box-sizing: content-box }
.alert-dot[hidden] { display: none }
.menu-badge { margin-left: auto; padding: 1px 8px; border-radius: var(--r-pill); background: var(--warning-tint); color: var(--warning); font-size: 11px; white-space: nowrap }
.menu-badge[hidden] { display: none }
/* As wide as the breadcrumb, so the ticker search between them sits in the middle. */
.top-tools { flex: 1 0 auto; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: 6px }
.crumbs + .top-search:not([hidden]) + .top-tools { flex-basis: 0 }
.account-menu-wrap { position: relative; padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--hairline) }
.ask-toggle[hidden] ~ .account-menu-wrap { padding-left: 0; border-left: 0 }
button.account-toggle { position: relative; width: 34px; height: 34px; padding: 0; background: var(--surface-card); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-pill) }
button.account-toggle:hover, button.account-toggle:active, button.account-toggle[aria-expanded="true"] { background: var(--surface-strong); color: var(--ink); border-color: var(--hairline-strong) }
.account-toggle svg, .account-menu svg, .account-sections svg, .account-dialog-symbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
.account-menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(256px, calc(100vw - 32px)); padding: 6px; background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); color: var(--ink) }
.account-menu-heading { display: grid; gap: 2px; padding: 12px 10px; margin-bottom: 5px; border-bottom: 1px solid var(--hairline); font-size: 14px }
.account-menu-heading strong { font-weight: 500 }
.account-menu-heading span { font-size: 12px; color: var(--body) }
.account-menu > button, .account-menu > a { display: flex; justify-content: flex-start; gap: 10px; width: 100%; min-height: 42px; padding: 10px; background: transparent; border: 0; border-radius: var(--r-md); color: var(--ink); font-size: 13px; font-weight: 400; text-decoration: none }
.account-menu > button:hover, .account-menu > button:active, .account-menu > a:hover { background: var(--hairline-soft); color: var(--ink) }
.account-menu-appearance { padding: 12px 10px; margin-top: 6px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); font-size: 13px }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; margin-top: 8px; background: var(--canvas); border-radius: var(--r-md) }
.theme-options button { height: 32px; min-width: 0; padding: 6px; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--body); font-size: 12px; font-weight: 400 }
.theme-options button:hover, .theme-options button:active { background: var(--hairline-soft); color: var(--ink) }
.theme-options button[aria-pressed="true"] { background: var(--surface-strong); color: var(--ink) }
.account-menu > .account-signout { color: var(--error); margin-top: 6px }
body { transition: background-color .2s ease }
.theme-toggle { flex: none; width: 36px; height: 36px; padding: 0; background: transparent; color: var(--body); border: 1px solid transparent }
.theme-toggle:hover, .theme-toggle:active { background: var(--hairline-soft); color: var(--ink) }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.theme-toggle .fill { fill: currentColor; stroke: none }
.theme-toggle g { display: none }
.theme-toggle[data-mode="system"] .i-system, .theme-toggle[data-mode="light"] .i-light, .theme-toggle[data-mode="dark"] .i-dark { display: inline }

/* ------------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: var(--s-xxl) var(--gutter) var(--s-section); flex: 1 }
/* Under the top bar: the side nav, then the page (notice bar, #app and the footer), so the side nav, sticky, runs to the
   end of the document. The panes docked on the right push both by padding (body.ask-push, body.sec-split, body.alerts-push). */
.shell { flex: 1 0 auto; display: flex; min-width: 0 }
.shell-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column }
/* The page's own width, for layouts that follow it rather than the window's (the docked panes narrow it). */
#app { container: page / inline-size }

/* The side nav (app.js renderSide), 1024px and up. Sticky under the top bar; collapses to its icons. */
.side { position: sticky; top: var(--top-h); align-self: flex-start; flex: none; width: 232px; height: calc(100dvh - var(--top-h)); overflow: hidden auto; display: flex; flex-direction: column; gap: 2px; padding: var(--s-sm) 10px; background: var(--canvas-soft); border-right: 1px solid var(--hairline); transition: width .18s ease }
@media (prefers-reduced-motion: reduce) { .side { transition: none } }
.side-group { padding: var(--s-sm) 10px 6px; font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted); white-space: nowrap }
.side-section { display: grid; gap: 2px; flex: none }
.side-section:first-child > .side-group { padding-top: 4px }
.side-item, button.side-item { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 36px; height: 36px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--body); font-size: 13.5px; font-weight: 400; text-decoration: none; white-space: nowrap; overflow: hidden }
.side-item:hover, button.side-item:hover, button.side-item:active { background: var(--hairline-soft); color: var(--ink) }
.side-item.active { background: var(--surface-card); border-color: var(--hairline); color: var(--ink); font-weight: 500 }
.side-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.side-item span:not(.alert-dot) { overflow: hidden; text-overflow: ellipsis }
.side-item .alert-dot { position: absolute; top: 7px; left: 21px }
/* Unread alerts: a count at the item's end, a dot on the icon while the nav shows its icons only. */
.side-item .side-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; overflow: visible }
.side-collapse { margin-top: auto }
body.side-collapsed .side, body.side-squeezed .side, body.alerts-squeeze .side { width: 56px }
body.side-collapsed .side-group, body.side-squeezed .side-group, body.alerts-squeeze .side-group { height: 0; padding: 6px 0; overflow: hidden; color: transparent; border-top: 1px solid var(--hairline); margin: 6px 4px 0 }
body:is(.side-collapsed, .side-squeezed, .alerts-squeeze) .side-section:first-child > .side-group { border-top: 0; margin-top: 0 }
body.side-collapsed .side-item > span:not(.alert-dot, .side-count), body.side-squeezed .side-item > span:not(.alert-dot, .side-count), body.alerts-squeeze .side-item > span:not(.alert-dot, .side-count) { display: none }
body.side-collapsed .side-item .side-count, body.side-squeezed .side-item .side-count, body.alerts-squeeze .side-item .side-count { position: absolute; top: 7px; left: 21px; min-width: 0; width: 9px; height: 9px; padding: 0; border: 2px solid var(--canvas-soft); box-sizing: content-box; font-size: 0 }
body.side-collapsed .side-collapse svg { transform: scaleX(-1) }
@media (max-width: 1023px) { .side { display: none } }
/* Beside the side nav the bell is its Alerts item. */
@media (min-width: 1024px) { body.has-side button.alerts-toggle { display: none } }
/* With the side nav listing the tabs, the portfolio's own tab row is left out. */
@media (min-width: 1024px) {
  body.has-side .pf-tabs { display: none }
  body.has-side .pf-tabs + #tab { margin-top: var(--s-lg) }
}

/* ------------------------------------------------------------------ bottom bar (phones)
   Below 640px, on a portfolio (app.js renderBottomNav), in place of the tab row: the everyday tabs and More, fixed to
   the bottom above the home indicator. More opens a sheet with the rest and Update holdings. The page reaches the
   screen's edges (viewport-fit=cover), so the body keeps clear of a landscape notch. */
:root { --bottom-nav-h: 65px }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right) }
.bottom-nav, .pf-h1-view { display: none }
@media (max-width: 639px) {
  body.has-bottom-nav { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)) }
  body.has-bottom-nav .bottom-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 14; padding: 6px calc(4px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left)); background: var(--canvas); border-top: 1px solid var(--hairline) }
  body.has-bottom-nav .pf-tabs { display: none }
  body.has-bottom-nav .pf-tabs + #tab { margin-top: var(--s-base); animation: view-in .3s cubic-bezier(.2, .8, .2, 1) both }
  body.has-bottom-nav .alert-toast { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--s-sm)) }
  /* The page head: the open tab's name (the switcher above names the portfolio), Update and the gear beside it. */
  body.has-bottom-nav .wrap { padding-top: var(--s-lg) }
  body.has-bottom-nav .page-head { flex-wrap: nowrap; align-items: center; gap: var(--s-xs) }
  body.has-bottom-nav .page-title { flex: 1 1 auto; min-width: 0 }
  body.has-bottom-nav .page-head .eyebrow, body.has-bottom-nav .pf-h1, body.has-bottom-nav .update-rest { display: none }
  body.has-bottom-nav .pf-h1-view { display: block; font-size: 26px; line-height: 1.25; letter-spacing: -0.325px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  body.has-bottom-nav .page-head .update-btn { height: 40px }
  body.has-bottom-nav .page-head button.icon-btn { width: 44px; height: 44px; margin-right: -8px }
}
.bottom-nav-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) }
.bottom-nav .nav-btn, .bottom-nav button.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0; height: auto; min-height: 52px; padding: 2px 0; background: transparent; border: 0; border-radius: var(--r-md); color: var(--body); font-size: 11.5px; font-weight: 500; line-height: 1.3; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease }
.bottom-nav a.nav-btn:hover, .bottom-nav button.nav-btn:hover, .bottom-nav button.nav-btn:active { background: transparent; color: var(--ink) }
/* The open tab keeps the label's weight, so a long name ("Performance") still fits its fifth of a phone. */
.bottom-nav .nav-btn.is-on { color: var(--ink) }
.bottom-nav .nav-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
/* The open tab's pill grows out from its centre; a press squeezes it. */
.nav-pill { position: relative; display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--r-pill); transition: transform .15s ease }
.nav-pill::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--surface-strong); opacity: 0; transform: scaleX(.35); transition: opacity .18s ease, transform .38s cubic-bezier(.2, .9, .25, 1.2) }
.nav-btn.is-on .nav-pill::before { opacity: 1; transform: none }
.nav-btn:active .nav-pill { transform: scale(.9) }
.nav-pill .nav-ic { position: relative; width: 22px; height: 22px }
.nav-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
/* Give Portfolio Pulse room in More's slot on narrow phones. */
.bottom-nav-bar:has(#bottom-more[data-open="digest"]) { grid-auto-columns: minmax(max-content, 1fr) }
.bottom-nav-bar:has(#bottom-more[data-open="digest"]) .nav-pill { width: 100%; max-width: 56px }
/* More's sheet: slides up over a fading backdrop, its rows following; the open tab is marked with a tick. */
dialog.more-sheet { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 85dvh; margin: 0; padding: 0; overflow: auto; background: var(--surface-card); color: var(--ink); border: 0; border-top: 1px solid var(--hairline); border-radius: var(--r-xl) var(--r-xl) 0 0 }
dialog.more-sheet[open] { animation: sheet-up .34s cubic-bezier(.2, .9, .25, 1) both }
dialog.more-sheet::backdrop { background: rgb(0 0 0 / .35) }
dialog.more-sheet[open]::backdrop { animation: fade-in .22s ease both }
.more-sheet-body { padding: var(--s-xs) calc(var(--s-xs) + env(safe-area-inset-right)) calc(var(--s-base) + env(safe-area-inset-bottom)) calc(var(--s-xs) + env(safe-area-inset-left)) }
.more-sheet-grab { display: block; width: 36px; height: 4px; margin: 2px auto 10px; border-radius: var(--r-pill); background: var(--hairline-strong) }
.more-sheet .eyebrow { padding: 0 var(--s-sm) }
.more-sheet hr { height: 1px; margin: 6px var(--s-sm); border: 0; background: var(--hairline-soft) }
.sheet-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 var(--s-sm); border-radius: var(--r-md); color: var(--ink); font-size: 15px; text-decoration: none; animation: row-in .3s cubic-bezier(.2, .8, .2, 1) both }
.sheet-row:nth-of-type(2) { animation-delay: 40ms }
.sheet-row:nth-of-type(3) { animation-delay: 80ms }
.sheet-row:nth-of-type(4) { animation-delay: 120ms }
.sheet-row:nth-of-type(n + 5) { animation-delay: 160ms }
@media (hover: hover) { .sheet-row:hover { background: var(--hairline-soft) } }
.sheet-row.is-on { background: var(--canvas); font-weight: 600 }
.sheet-row > span { flex: 1 1 auto }
.sheet-row > svg { width: 22px; height: 22px; flex: none; color: var(--body) }
.sheet-row.is-on > svg { color: var(--ink) }
.sheet-row > svg:not(.nav-ic) { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.sheet-row > svg.sheet-check { width: 18px; height: 18px; visibility: hidden }
.sheet-row.is-on > svg.sheet-check { visibility: visible }
.sheet-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
/* The symbols: a 24px grid, 1.7 stroke, round caps. Outline at rest; the open one takes its fill (.f solid, .fs a 16%
   tint) and plays its motion once. Only Intraday keeps moving: a slow live pulse. */
.nav-ic { display: block; overflow: visible }
.nav-ic .s { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.nav-ic .k { fill: currentColor; stroke: none }
.nav-ic .f, .nav-ic .fs { fill: currentColor; stroke: none; opacity: 0; transition: opacity .22s ease }
.is-on .nav-ic .f { opacity: 1 }
.is-on .nav-ic .fs { opacity: .16 }
/* Intraday: the session line draws in, then the live dot pulses. Performance: the trend draws up, its arrowhead after. */
.is-on .nav-ic .draw { stroke-dasharray: 1 1; animation: ni-draw .6s cubic-bezier(.3, .7, .2, 1) both }
.nav-ic .ring { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center }
.is-on .nav-ic .ring { animation: ni-ping 2.4s ease-out .6s infinite }
.nav-ic .late { transform-box: fill-box; transform-origin: center }
.is-on .nav-ic .late { animation: ni-in .25s ease .45s both }
/* Holdings: the slice pops out. Risk: the needle swings up and settles. More: the dots hop in turn. */
.nav-ic .wedge { transform-box: view-box; transform-origin: 13.25px 10.75px }
.is-on .nav-ic .wedge { animation: ni-pop .5s cubic-bezier(.2, .9, .3, 1.35) both }
.nav-ic .needle { transform-box: view-box; transform-origin: 12px 17.5px }
.is-on .nav-ic .needle { animation: ni-swing .8s cubic-bezier(.3, 1.6, .45, 1) both }
.nav-ic .hop { transform-box: fill-box; transform-origin: center }
.is-on .nav-ic .hop { animation: ni-hop .5s ease both }
.is-on .nav-ic .hop:nth-of-type(2) { animation-delay: .07s }
.is-on .nav-ic .hop:nth-of-type(3) { animation-delay: .14s }
/* Look-through: the lens tilts in. Income: the coin flips. Fund costs: the slash draws. Tax lots: the lots drop. */
.nav-ic .tilt { transform-box: view-box; transform-origin: 10.5px 10.5px }
.is-on .nav-ic .tilt { animation: ni-tilt .55s cubic-bezier(.3, 1.4, .5, 1) both }
.nav-ic .flip { transform-box: view-box; transform-origin: 12px 12px }
.is-on .nav-ic .flip { animation: ni-flip .6s ease both }
.is-on .nav-ic .drop { animation: ni-drop .4s cubic-bezier(.2, .9, .3, 1.3) both }
.is-on .nav-ic .drop.d2 { animation-delay: .08s }
.is-on .nav-ic .drop.d3 { animation-delay: .16s }
@keyframes ni-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes ni-ping { 0% { opacity: .6; transform: scale(1) } 70%, 100% { opacity: 0; transform: scale(2.4) } }
@keyframes ni-pop { from { transform: translate(-2px, 2px) scale(.55) } to { transform: none } }
@keyframes ni-in { from { opacity: 0; transform: scale(.5) } to { opacity: 1; transform: none } }
@keyframes ni-swing { from { transform: rotate(-100deg) } to { transform: rotate(0) } }
@keyframes ni-hop { 0%, 100% { transform: none } 40% { transform: translateY(-3.5px) } }
@keyframes ni-tilt { from { transform: rotate(-20deg) scale(.88) } to { transform: none } }
@keyframes ni-flip { 0% { transform: none } 50% { transform: scaleX(.08) } 100% { transform: none } }
@keyframes ni-drop { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
@keyframes view-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes sheet-up { from { transform: translateY(100%) } to { transform: none } }
@keyframes row-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .nav-ic *, .nav-pill, .nav-pill::before, .sheet-row, dialog.more-sheet[open], dialog.more-sheet[open]::backdrop, body.has-bottom-nav .pf-tabs + #tab { animation: none !important; transition: none !important }
}
.page-head { display: flex; align-items: flex-end; gap: var(--s-base); flex-wrap: wrap; margin-bottom: var(--s-xs) }
.page-head .right { align-self: center }
.page-head .btn.secondary.active { background: var(--hairline-soft); border-color: var(--ink) }
/* Update holdings: the upload arrow before its label. */
.page-head .update-btn { display: inline-flex; align-items: center; gap: 6px }
.page-head .update-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.page-head .portfolio-actions { flex-wrap: nowrap; flex-shrink: 0 }
.page-lede { max-width: 720px; margin: var(--s-xs) 0 var(--s-xl); color: var(--body) }
.row { display: flex; gap: var(--s-sm); align-items: center; flex-wrap: wrap }
.right { margin-left: auto }
.grid { display: grid; gap: var(--s-base) }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); margin-bottom: var(--s-base) }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); margin-bottom: var(--s-base) }
.grid.two > .card { margin-bottom: 0 }

.foot { border-top: 1px solid var(--hairline); background: var(--canvas) }
.foot-links { display: flex; flex-wrap: wrap }
.foot-links a { text-decoration: none }
/* The Privacy Policy's website-analytics choice (site-analytics.js). */
.site-analytics-choice { box-sizing: border-box; max-width: 420px; margin: 16px 0; padding: var(--s-base); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-card); color: var(--ink); font: 14px/1.45 var(--font-sans) }
.site-analytics-choice:empty, .site-analytics-status:empty { display: none }
.site-analytics-choice p { margin: 0; color: var(--body) }
.site-analytics-choice > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.site-analytics-choice button.secondary { flex: 1; min-height: 38px; padding: 6px 12px; font-size: 14px }
/* The app's footer is one muted line: the backtest labels sit on the figures themselves. */
.foot-app .foot-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-base); padding: var(--s-sm) var(--gutter); font-size: 12px; color: var(--muted) }
.foot-app p { margin: 0 }
.foot-app .foot-links { gap: 4px var(--s-sm) }
.foot-app .foot-links a { color: var(--muted) }
.foot-app .foot-links a:hover { color: var(--ink) }

/* ------------------------------------------------------------------ cards (hairline-only depth) */
.card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-lg); margin-bottom: var(--s-base); overflow-x: auto; color: var(--body) }
.card > h3:first-child, .card > .row:first-child h3 { margin-bottom: var(--s-sm) }
.card > .row:first-child { margin-bottom: var(--s-xs) }
.card > .row:first-child h3 { margin-bottom: 0 }
.card.error { color: var(--error); border-color: var(--error-tint); background: var(--surface-card) }
a.card { text-decoration: none; transition: border-color .15s ease }
a.card:hover { border-color: var(--hairline-strong) }

/* portfolio list */
.pf-list { display: grid; gap: var(--s-base); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); margin-top: var(--s-lg) }
.pf-card { display: flex !important; flex-direction: column; gap: var(--s-xs); margin: 0 }
.pf-card .pf-name { display: flex; align-items: center; gap: var(--s-xs); min-width: 0; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.11px; color: var(--ink) }
.pf-card .pf-name > span:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere }
.pf-card .pf-src { display: inline-flex; flex: none; color: var(--muted) }
.pf-card .pf-src svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.pf-card .pf-desc { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pf-card .pf-tags { gap: var(--s-xs); margin-bottom: var(--s-xxs) }
/* Room above the foot's line however short the card is. */
.pf-card > :nth-last-child(2) { margin-bottom: var(--s-xs) }
.pf-card .pf-foot { margin-top: auto; padding-top: var(--s-sm); border-top: 1px solid var(--hairline-soft); font-size: 13px; color: var(--muted) }
.pf-card.archived { background: transparent }
.pf-card.archived .pf-name { color: var(--muted) }
.pf-new { align-items: center; justify-content: center; gap: var(--s-xs); padding: var(--s-lg); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); color: var(--muted); font-size: 15px; text-decoration: none; transition: border-color .15s ease, color .15s ease }
.pf-new span { font-size: 28px; font-weight: 300; line-height: 1 }
.pf-new:hover { border-color: var(--ink); color: var(--ink) }

/* KPI tiles */
.kpi .card { margin: 0; display: flex; flex-direction: column; gap: var(--s-xxs); min-height: 128px }
.kpi .card.kpi-lead { min-height: 0 }
.kpi .card.kpi-lead .sub { margin-top: 0 }
.kpi .label { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.kpi .value { font-size: 30px; font-weight: 400; line-height: 1.2; letter-spacing: -0.6px; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: var(--s-xs) }
.kpi .sub { color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: auto }
/* Overview: the value with its chart, then the period table, stacked full-width. The Performance tab's metric tiles
   use the same grid, three to a row. */
.grid.kpi.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.kpi .kpi-delta { font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums }
.grid.kpi.kpi-3 > .card.kpi-lead,
.grid.kpi.kpi-3 > .card.kpi-chart,
.grid.kpi.kpi-3 > .card.kpi-table { grid-column: 1 / -1 }
.kpi .card.kpi-table { min-height: 0 }
.kpi-table td { vertical-align: middle }
th .th-sort { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit }
th .th-sort:hover, th .th-sort:active, th .th-sort.active { color: var(--body); background: transparent }
th .th-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
.kpi .card.kpi-chart { min-height: 280px; padding-top: var(--s-md); padding-bottom: var(--s-md) }
@media (max-width: 899px) {
  .grid.kpi.kpi-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* ------------------------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--body) }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline-soft); vertical-align: top }
tr:last-child > td { border-bottom: 0 }
th { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; border-bottom-color: var(--hairline); white-space: nowrap; vertical-align: bottom }
th:first-child, td:first-child { padding-left: 0 }
th:last-child, td:last-child { padding-right: 0 }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums }
.concentration-stat { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px }
td b { font-weight: 600 }
/* A group (Holdings: cash) and its breakdown lines, indented under it. The group's name lines up with the symbols
   above it; its chevron follows the name. */
tr.group-row > td { border-top: 1px solid var(--hairline) }
tr.sub-row > td:first-child { padding-left: var(--s-base) }
.group-label { display: inline-flex; align-items: center; gap: 2px }
button.row-toggle svg { transition: transform .15s ease }
button.row-toggle[aria-expanded="true"] svg { transform: rotate(90deg) }
td.nowrap { white-space: nowrap }
.card table + h3, .card table + p, .card .tbl-x + h3, .card .tbl-x + p { margin-top: var(--s-base) }
.card h3 + table, .card p + table, .card h3 + .tbl-x, .card p + .tbl-x { margin-top: var(--s-xs) }
/* A wide table scrolls sideways in its own box (table-scroll.js wraps each bare table in .tbl-x), so the card's
   title and its controls stay where they are on a phone while the table moves under them. */
.tbl-x { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin }

/* ------------------------------------------------------------------ tabs */
/* Keep the strip on one vertical track while allowing horizontal swipes and pinch zoom. */
.tabs { display: flex; gap: var(--s-xs); border-bottom: 1px solid var(--hairline); margin: var(--s-xl) 0 var(--s-lg); overflow-x: auto; overflow-y: hidden; overscroll-behavior-y: none; touch-action: pan-x pinch-zoom; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tabs a { flex: none; padding: 10px 4px 12px; margin-right: var(--s-base); font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent }
.tabs a:hover { color: var(--ink) }
.tabs a.active { color: var(--ink); border-bottom-color: var(--ink) }
/* The portfolio's tabs with More: the everyday tabs scroll, More stays at their end with its menu outside the scroller. */
.tabs-row { display: flex; align-items: flex-end; border-bottom: 1px solid var(--hairline); margin: var(--s-xl) 0 var(--s-lg) }
.tabs-row > .tabs { border-bottom: 0; margin: 0; min-width: 0; flex: 0 1 auto }
.tab-more { position: relative; flex: none }
button.tab-more-toggle { display: inline-flex; align-items: center; gap: 4px; height: auto; line-height: inherit; padding: 10px 4px 12px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); font-size: 14px; font-weight: 500 }
button.tab-more-toggle:hover, button.tab-more-toggle:active, button.tab-more-toggle[aria-expanded="true"] { background: transparent; color: var(--ink) }
button.tab-more-toggle.active { color: var(--ink); border-bottom-color: var(--ink) }
.tab-more-menu { top: calc(100% + 4px); left: auto; right: 0; width: 200px }

/* ------------------------------------------------------------------ buttons */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-xs);
  height: 40px; padding: 10px 18px;
  font: 500 14px/1 var(--font-sans);
  color: var(--on-primary); background: var(--primary);
  border: 1px solid transparent; border-radius: var(--r-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button:hover, .btn:hover, button:active, .btn:active { background: var(--primary-active); color: var(--on-primary) }
button.secondary, .btn.secondary { background: var(--surface-card); color: var(--ink); border-color: var(--hairline-strong); padding: 9px 17px }
button.secondary:hover, button.secondary:active, .btn.secondary:hover, .btn.secondary:active { background: var(--canvas); color: var(--ink); border-color: var(--muted-soft) }
/* destructive actions stay outlined: orange is the only filled action colour */
button.danger { background: var(--surface-card); color: var(--error); border-color: var(--hairline-strong) }
button.danger:hover, button.danger:active { background: var(--error-tint); color: var(--error); border-color: var(--error) }
button.small { height: 30px; padding: 6px 12px; font-size: 13px }
button:disabled, button:disabled:hover { opacity: .45; cursor: default }
button.secondary:disabled:hover { background: var(--surface-card); border-color: var(--hairline-strong) }
.card button + button, .row button + button { margin-left: 0 }

/* ------------------------------------------------------------------ upgrade call to action (upgrade.js)
   Basic meeting a Pro limit: a faint orange wash and hairline around the one orange button, with a filled Pro mark.
   Hairline-only depth, no shadow. Stacks under 560px so the button keeps its full label. */
.upgrade-cta { display: flex; align-items: center; gap: var(--s-base); margin-bottom: var(--s-base); padding: var(--s-base) var(--s-lg); background: color-mix(in srgb, var(--primary) 6%, var(--surface-card)); border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--hairline)); border-radius: var(--r-lg); color: var(--body) }
.upgrade-mark { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase }
.upgrade-copy { flex: 1; min-width: 0 }
.upgrade-copy b { display: block; color: var(--ink); font-size: 15px; font-weight: 500 }
.upgrade-copy p { margin: 2px 0 0; font-size: 13px; line-height: 1.45 }
.upgrade-btn { flex: none }
.upgrade-arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease }
.upgrade-btn:hover .upgrade-arrow { transform: translateX(2px) }
.upgrade-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
.upgrade-cta.compact { gap: var(--s-sm); margin: var(--s-sm) 0 0; padding: var(--s-sm) var(--s-base) }
.upgrade-cta.compact .upgrade-copy b { font-size: 13px }
.upgrade-cta.compact .upgrade-btn { height: 30px; padding: 6px 12px; font-size: 13px }
@media (max-width: 560px) {
  .upgrade-cta { flex-wrap: wrap; padding: var(--s-base) }
  .upgrade-copy { flex-basis: calc(100% - 60px) }
  .upgrade-btn { width: 100% }
}
@media (prefers-reduced-motion: reduce) { .upgrade-arrow { transition: none } }
/* The upgrade modal (showUpgradeDialog): opened by a click, never on its own. Pro mark top left, then title, line,
   what Pro adds as check rows, and Not now beside the orange button. */
dialog.upgrade-dialog { max-width: 440px }
dialog.upgrade-dialog h3 { margin-top: var(--s-sm); font-size: 20px; font-weight: 500 }
.upgrade-points { list-style: none; margin: var(--s-base) 0 0 !important; padding: 0 !important }
.upgrade-points li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5 }
.upgrade-points li + li { margin-top: var(--s-xs) !important }
.upgrade-points li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 10px; height: 5px; border: solid var(--primary); border-width: 0 0 2px 2px; transform: rotate(-45deg) }
.upgrade-actions { justify-content: flex-end; gap: var(--s-sm); margin-top: var(--s-lg) }
/* A Basic action that needs Pro: the usual secondary button with a small Pro tag inside it. */
.pro-tag { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase }


/* ------------------------------------------------------------------ forms */
input, select, textarea {
  width: 100%; height: 44px; padding: 10px 14px;
  font: 400 16px/1.4 var(--font-sans); color: var(--ink);
  background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder { color: var(--muted-soft) }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--hairline) }
input:disabled, select:disabled { background: var(--canvas-soft); color: var(--muted) }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat }
select[multiple] { height: auto; padding: 6px; background-image: none }
select[multiple] option { padding: 6px 8px; border-radius: var(--r-xs) }
input[type="checkbox"], input[type="radio"] { width: 16px !important; height: 16px; padding: 0; margin: 0; flex: none; accent-color: var(--ink); box-shadow: none }
input[type="file"] { height: auto; padding: 10px; font-size: 14px; background: var(--canvas-soft); border-style: dashed }
input[type="file"]::file-selector-button { font: 500 13px/1 var(--font-sans); color: var(--ink); background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 8px 12px; margin-right: 12px; cursor: pointer }
textarea { height: auto; font-family: var(--font-mono); font-size: 13px }
label { display: block; font-size: 14px; font-weight: 500; color: var(--ink); margin: var(--s-base) 0 6px }
label.row { font-weight: 400; color: var(--body); margin: var(--s-sm) 0 }
form > button, form .row > button { margin-top: var(--s-lg) }

/* ------------------------------------------------------------------ badges */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase;
  background: var(--surface-strong); color: var(--ink); white-space: nowrap; vertical-align: middle;
}
.pill.ok { background: var(--success-tint); color: var(--success) }
.pill.warn { background: var(--warning-tint); color: var(--warning) }
.pill.bad { background: var(--error-tint); color: var(--error) }
.pill button { height: auto; padding: 0 2px !important; background: transparent; color: var(--muted); border: 0; font-size: 14px; line-height: 1 }
.pill button:hover { background: transparent; color: var(--error) }
td .pill + br + select { margin-top: var(--s-xs) }
/* Compact select in a table row: less padding than a form field, so a 36px box still fits its label. */
td select { height: 36px; padding: 0 32px 0 12px; font-size: 14px; min-width: 190px; background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px }

.warn-list { margin: var(--s-sm) 0 0; padding-left: 18px; color: var(--warning); font-size: 13px }

/* ------------------------------------------------------------------ code surfaces (monospace everywhere) */
code, pre, kbd { font-family: var(--font-mono) }
code { font-size: 0.86em; background: var(--hairline-soft); color: var(--ink); padding: 2px 6px; border-radius: var(--r-xs); word-break: break-word }
pre { background: var(--canvas-soft); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-md); overflow: auto; font-size: 13px; line-height: 1.5; margin: var(--s-sm) 0 }
pre code { background: none; padding: 0 }

/* calculation metadata footer on each analytics card */
.meta { color: var(--muted); margin-top: var(--s-base); border-top: 1px solid var(--hairline-soft); padding-top: var(--s-sm); line-height: 1.6 }
/* A card that is only provenance (the overview) needs no rule above the first line. */
.card > .meta:first-child { margin-top: 0; border-top: 0; padding-top: 0 }
.meta b { color: var(--body); font-weight: 500 }

/* ------------------------------------------------------------------ auth */
/* Sign in, register and password reset: pages of their own, with no top bar or footer. The logo, a centred title, the
   form (sign-in has "Forgot password?" beside its label) with a full-width button, then a closing line. */
.auth-standalone #top, .auth-standalone #notice, .auth-standalone .foot { display: none }
.auth-standalone .wrap { display: flex; align-items: center; justify-content: center; padding: var(--s-xxl) var(--gutter) }
.auth-page { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; text-align: center }
.auth-logo { display: inline-flex; color: var(--ink); margin-bottom: var(--s-xl) }
.auth-logo svg { width: 64px; height: 64px; fill: currentColor }
.auth-page h1 { font-size: 30px; letter-spacing: -0.6px; line-height: 1.2; margin: 0 }
.auth-note { color: var(--muted); font-size: 14px; margin: var(--s-sm) 0 0 }
.auth-form { width: 100%; margin-top: var(--s-xl); text-align: left }
.auth-provider { width: 100%; margin-top: var(--s-xl) }
.auth-provider button { width: 100%; min-height: 44px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px }
.auth-provider .google-mark { width: 18px; height: 18px; flex: none }
.auth-divider { display: flex; align-items: center; gap: var(--s-base); margin-top: var(--s-lg); color: var(--muted); font-size: 13px }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline) }
.auth-provider ~ .auth-form { margin-top: var(--s-lg) }
.auth-link { width: 100%; margin-top: var(--s-lg); text-align: left; color: var(--muted); font-size: 15px }
.auth-link strong { color: var(--ink); overflow-wrap: anywhere }
.auth-link button { width: 100%; min-height: 44px; margin-top: var(--s-sm); font-size: 15px }
.auth-link[hidden], .auth-provider[hidden], .auth-form[hidden], .auth-switch[hidden] { display: none }
.auth-form > label:first-child { margin-top: 0 }
.auth-home { position: absolute; top: calc(var(--s-lg) + env(safe-area-inset-top)); left: calc(var(--gutter) + env(safe-area-inset-left)); display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; text-decoration: none }
.auth-home:hover, .auth-home:focus-visible { color: var(--ink) }
.auth-home svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.auth-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--s-base); margin-top: var(--s-xl); font-size: 13px }
.auth-page nav.auth-foot a { color: var(--muted); font-size: inherit; text-decoration: none }
.auth-page nav.auth-foot a:hover, .auth-page nav.auth-foot a:focus-visible { color: var(--ink) }
.auth-legal { margin: var(--s-base) 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center }
.auth-page .auth-legal a { font-size: inherit }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s-base) 0 6px }
.auth-label-row label { margin: 0 }
/* Links here take the brand colour; primary-active is the shade that reads as text in each theme. */
.auth-page a:not(.auth-logo) { color: var(--primary-active); font-size: 14px; font-weight: 500; text-decoration: none }
.auth-page a:not(.auth-logo):hover { text-decoration: underline }
.auth-form .error { margin: var(--s-sm) 0 0 }
.auth-form .error:empty { display: none }
.auth-form button[type="submit"] { width: 100%; height: 44px; margin-top: var(--s-lg); font-size: 15px }
.auth-switch { margin: var(--s-xl) 0 0; color: var(--muted); font-size: 14px }
/* The other account screens (email confirmation, AI app consent): one centred panel. */
.card.auth { max-width: 440px; width: 100%; padding: var(--s-xl); margin: 0 }
.card.auth h1 { font-size: 26px; letter-spacing: -0.325px; margin-bottom: var(--s-xxs) }
.card.auth button[type="submit"] { min-width: 120px }
.wrap > .card.auth { margin: var(--s-xl) auto }
/* Account notices above the page (an unconfirmed email address): one line of text and its action. */
.notice-bar { width: 100%; max-width: var(--container); margin: var(--s-base) auto 0; padding: 0 var(--gutter) }
.notice-bar > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); background: var(--warning-tint); color: var(--ink); border-radius: var(--r-lg); padding: var(--s-sm) var(--s-base); font-size: 14px }
.notice-bar button { padding: 5px 12px }
.notice-bar + .wrap { padding-top: var(--s-xl) }

/* ------------------------------------------------------------------ AI prompts + allocation bars */
.bar { height: 6px; background: var(--hairline-soft); border-radius: var(--r-pill); overflow: hidden; margin-top: 9px }
.bar i { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill) }

/* ------------------------------------------------------------------ performance chart */
.chart-ranges { gap: var(--s-xxs); margin: var(--s-xxs) 0 var(--s-sm) }
/* Chip groups stay on one line; when they outgrow their space (a phone, a narrow card) they scroll sideways
   instead of wrapping to a second row. The padding keeps focus rings clear of the scroll clip. */
.row.chart-ranges { flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px; margin-inline: -2px }
.row.chart-ranges::-webkit-scrollbar { display: none }
.row.chart-ranges > button.chip { flex: none; white-space: nowrap }
button.chip { height: 30px; padding: 4px 12px; font-size: 13px; border-radius: var(--r-pill) }
button.chip:hover { background: var(--hairline-soft); color: var(--ink) }
button.chip.active, button.chip.active:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink) }
.chart-box { position: relative }
svg.chart { display: block; max-width: 100%; touch-action: pan-y; font-family: var(--font-sans) }
svg.chart .grid { stroke: var(--hairline-soft) }
svg.chart .grid.zero { stroke: var(--hairline-strong) }
svg.chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums }
svg.chart .cursor { stroke: var(--muted-soft); stroke-dasharray: 3 3 }
.chart-tip { position: absolute; top: 8px; background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 8px 12px; font-size: 12px; line-height: 1.6; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--body) }
.chart-tip i, .chart-legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle }
.chart-legend { display: flex; gap: var(--s-base); flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: var(--s-sm) }
.chart-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums }

/* Stacked bars: a 2px surface gap between segments (the card behind them, drawn as a stroke); a square swatch per series. */
svg.chart .bar-seg { stroke: var(--surface-card); stroke-width: 2; paint-order: stroke }
svg.chart .bar-hover { fill: var(--hairline-soft) }
svg.chart .bar-up { fill: var(--success) }
svg.chart .bar-down { fill: var(--error) }
svg.chart .bar-bench { fill: var(--chart-estimate-bench) }
.chart-legend i.period-key { background: linear-gradient(90deg, var(--success) 50%, var(--error) 50%) }
.chart-tip i.bench-key, .chart-legend i.bench-key { background: var(--chart-estimate-bench) }
.chart-legend i.up-key { background: var(--success) }
.chart-legend i.down-key { background: var(--error) }
svg.chart .bar-value { fill: var(--body); font-size: 11px; font-variant-numeric: tabular-nums }
/* Risk contribution flow */
svg.chart.sankey .sankey-link { fill-opacity: 1; transition: opacity .12s }
svg.chart.sankey .sankey-link.dim { opacity: .35 }
svg.chart.sankey .sankey-row { cursor: default }
svg.chart.sankey .sankey-row:hover .sankey-label { fill: var(--ink); font-weight: 600 }
svg.chart.sankey .sankey-label { fill: var(--body); font-size: 13px }
svg.chart.sankey .sankey-label.halo { fill: var(--ink); font-weight: 500; stroke: var(--surface-card); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke }
svg.chart.sankey .sankey-note { fill: var(--muted); font-weight: 400 }
svg.chart.sankey .sankey-cell { fill: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums }
svg.chart.sankey .sankey-cell.muted { fill: var(--muted) }
svg.chart.sankey .sankey-lead-label { fill: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase }
svg.chart.sankey .sankey-lead-value { fill: var(--ink); font-size: 24px; letter-spacing: -0.4px; font-variant-numeric: tabular-nums }
svg.chart .net-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
svg.chart .net-dot { fill: var(--ink); stroke: var(--surface-card); stroke-width: 1.5 }
.chart-legend i.net-key { width: 14px; height: 2px; background: var(--ink) }
.chart-tip i.swatch, .chart-legend i.swatch { width: 10px; height: 10px; border-radius: 2px }
.income-head { gap: var(--s-sm); flex-wrap: wrap }
.income-head .chart-ranges { margin: 0 0 0 auto }
.income-head .chart-ranges + .chart-ranges { margin-left: var(--s-sm) }
/* The Income tab (income.js): the summary borrows the Intraday card's styles; a payment's status is its chart colour. */
.income-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-xxl); padding: var(--s-lg) var(--s-lg) var(--s-md) }
.income-top .pf-value small { margin-left: var(--s-sm); font-size: 14px; letter-spacing: 0; color: var(--muted); white-space: nowrap }
.income-bar { height: 8px; margin-top: var(--s-base); border-radius: var(--r-pill); background: var(--hairline-soft); overflow: hidden }
.income-bar span { display: flex; gap: 2px; height: 100%; border-radius: var(--r-pill); overflow: hidden }
.income-bar i { display: block; min-width: 2px }
.income-summary .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (max-width: 640px) {
  .income-top { grid-template-columns: 1fr; gap: var(--s-lg); padding: var(--s-base) }
}
td.income-status { white-space: nowrap }
td.income-status i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 1px }
td.income-status.overdue { color: var(--warning) }
#income-upcoming .link-btn { margin-top: var(--s-sm) }

/* Info button beside a card title, and the modal holding that card's notes. */
.card .row > h3 + .info-btn { margin-left: calc(var(--s-xs) - var(--s-sm)) }
button.info-btn { width: 26px; height: 22px; padding: 0; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-pill) }
button.info-btn:hover, button.info-btn:active { background: var(--hairline-soft); color: var(--ink) }
button.info-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
button.info-btn svg .fill { fill: currentColor; stroke: none }
dialog.info-dialog { width: min(480px, calc(100vw - 32px)); padding: var(--s-lg); background: var(--surface-card); color: var(--body); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg, 12px) }
dialog.info-dialog::backdrop { background: rgb(0 0 0 / .35) }
dialog.info-dialog h3 { margin: 0 }
dialog.info-dialog p { margin: var(--s-sm) 0 0 }
/* A dialog opened from inside a table cell keeps none of the cell's text settings (the concentration table's cells
   do not wrap), so its notes wrap to the dialog's width instead of running off it. */
dialog.info-dialog { white-space: normal; text-align: left; font-variant-numeric: normal }
dialog.info-dialog ul { margin: var(--s-xs) 0 0; padding-left: 20px }
dialog.info-dialog li + li { margin-top: 2px }
/* The info button beside a table row's label: smaller than a card title's, on the label's line. */
td > button.info-btn { width: 18px; height: 18px; margin-left: 2px; vertical-align: -3px }
td > button.info-btn svg { width: 14px; height: 14px }
button.info-close { width: 32px; height: 32px; padding: 0; font-size: 22px; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-pill) }
button.info-close:hover, button.info-close:active { background: var(--hairline-soft); color: var(--ink) }

/* The gear beside a portfolio's name, opening its settings; the dialog's trash icon sits opposite Save and Cancel. */
button.icon-btn { width: 36px; height: 36px; padding: 0; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-md) }
button.icon-btn:hover, button.icon-btn:active { background: var(--hairline-soft); color: var(--ink) }
button.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
button.icon-btn.danger-icon:hover, button.icon-btn.danger-icon:active { background: transparent; color: var(--error) }
.settings-actions { margin-top: var(--s-base) }
.settings-actions button.right { margin-left: auto }

/* The Holdings tab's breakdown chips sit opposite the card title (no .chart-ranges margins, which would defeat .right). */
.bd-modes { gap: var(--s-xxs) }
/* Its breakdown list, opposite the card title: sized to its options, at a table select's height. */
select.bd-select { width: auto; min-width: 150px; height: 36px; padding: 0 32px 0 12px; font-size: 14px; background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px }
/* Breakdown and concentration side by side above the holdings table: the concentration card is as wide as its table
   (its rows do not wrap, to stay level with the legend's), the breakdown takes the rest so its legend sits beside the
   ring, and both cards stretch to the taller one. Their title rows are the select's height, so what is under them
   starts level. One column below a 1096px page (a 1160px window without panes beside the page), where the two no
   longer fit side by side: measured on the page, which the side nav and the docked panes narrow. */
.grid.holdings-top { margin-bottom: var(--s-base) }
.grid.holdings-top > .card { margin-bottom: 0; display: flex; flex-direction: column; min-width: 0 }
@container page (min-width: 1096px) {
  .grid.holdings-top { grid-template-columns: minmax(0, 1fr) auto }
  .holdings-top #concentration td { white-space: nowrap }
}
.card-head { min-height: 36px; margin-bottom: var(--s-sm) }
.card-head h3 { margin: 0 }
.holdings-top #bd-chart { flex: 1 1 auto }
.holdings-top .donut { margin-top: 0; gap: var(--s-lg); align-items: flex-start }
/* The ring's top is pinned level with the legend's first row, under its header row (36.5px, the concentration table's
   header beside it), so a short legend leaves it where a long one does. */
.holdings-top .donut-ring { flex-basis: 200px; width: 200px; height: 200px; margin-top: 36.5px }
/* Below a 506px page the legend wraps under the ring (200px + 24px gap + 240px no longer fit, with the cards' padding),
   which then needs no offset. */
@container page (max-width: 505px) { .holdings-top .donut-ring { margin-top: 0 } }
.holdings-top .donut-center { inset: 56px }
.holdings-top .donut-legend { flex-basis: 240px }
/* The legend reads as the concentration table beside it: a header row, then rows of the same height, so the two
   cards' rows line up across. A slice's detail ("Other (4)": which ones) moves to its tooltip to keep rows one line. */
.holdings-top .donut-legend li, .holdings-top #concentration td { padding-top: 10px; padding-bottom: 10px; line-height: 20px }
.holdings-top .donut-legend li { margin: 0; align-items: center; border-bottom: 1px solid var(--hairline-soft) }
.holdings-top .donut-legend li.donut-head, .holdings-top #concentration th { line-height: 16px }
/* The table's collapsed borders put half a pixel of each row's border outside it: the header row is 36.5px. */
.holdings-top .donut-legend li.donut-head { padding-bottom: 9.5px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase; border-bottom-color: var(--hairline) }
.holdings-top .donut-legend li.donut-head b { color: inherit; font-weight: inherit }
.holdings-top .donut-legend li.donut-head .donut-val { color: inherit }
.holdings-top .donut-legend li:not(.donut-off) .donut-name em { display: none }

/* Session line: under the value, in the same card. The stroke is currentColor, so .gain / .loss on the
   wrapper colours it. The 0% gridline is the previous close. While the session is still open (.is-live), the last
   print blinks slowly and a halo expands from it. */
.kpi-spark { flex: 1 1 0; min-height: 240px; margin: 0; display: flex; flex-direction: column }
.kpi-spark .chart-box { flex: 1 1 0; min-height: 0 }
.kpi-spark svg.chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible }
.kpi-spark .session-line { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.kpi-spark .session-dot { fill: currentColor }
.kpi-spark .session-dot-pulse { fill: currentColor; pointer-events: none; transform-box: fill-box; transform-origin: center }
.kpi-spark.is-live .session-dot { animation: session-live-dot 2.4s ease-in-out infinite }
.kpi-spark.is-live .session-dot-pulse { animation: session-live-pulse 2.4s ease-out infinite }
@keyframes session-live-dot {
  0%, 100% { opacity: 1 }
  50% { opacity: 0.32 }
}
@keyframes session-live-pulse {
  0% { transform: scale(1); opacity: 0.55 }
  65% { transform: scale(4); opacity: 0 }
  100% { transform: scale(4); opacity: 0 }
}
/* The Overview holdings table's per-row session line: stroke follows .gain / .loss; the dashed line is the previous close. */
td.spark-cell { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; width: 88px }
svg.row-spark { display: block; overflow: visible }
/* Under a long holdings table: its first rows until "Show all". */
.table-more { display: flex; justify-content: center; margin-top: var(--s-base) }
svg.row-spark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round }
svg.row-spark circle { fill: currentColor }
svg.row-spark .row-spark-base { stroke: var(--muted); stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 2 2 }
@media (prefers-reduced-motion: reduce) {
  .kpi-spark.is-live .session-dot,
  .kpi-spark.is-live .session-dot-pulse { animation: none }
  .kpi-spark.is-live .session-dot-pulse { opacity: 0.22; transform: scale(2.2) }
}
.kpi-spark .chart-tip { top: 8px; z-index: 1 }

/* Donut (part-to-whole): ring left, legend right — the legend is also the table view, so no value is colour-only. */
.donut { display: flex; align-items: center; gap: var(--s-xl); flex-wrap: wrap; margin-top: var(--s-sm) }
.donut-ring { position: relative; flex: 0 0 220px; width: 220px; height: 220px }
.donut-ring svg { display: block; width: 100%; height: 100% }
/* The 2px surface gap between segments is the card behind them, drawn as a stroke. */
.donut-slice { stroke: var(--surface-card); stroke-width: 2; transition: opacity .12s ease }
.donut-slice.dim { opacity: .35 }
.donut-center { position: absolute; inset: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; line-height: 1.25 }
.donut-center b { font-size: 22px; font-weight: 400; letter-spacing: -0.3px; color: var(--ink); font-variant-numeric: tabular-nums }
.donut-center span { font-size: 12px; color: var(--muted); max-width: 96px; overflow: hidden }
.donut-center .donut-sub { font-variant-numeric: tabular-nums }
.donut-legend { flex: 1 1 260px; list-style: none; margin: 0; padding: 0; min-width: 0 }
.donut-legend li { display: flex; align-items: baseline; gap: var(--s-sm); padding: 7px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; color: var(--body); cursor: default }
.donut-legend li:last-child { border-bottom: 0 }
.donut-legend li.on { color: var(--ink) }
.donut-legend li:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
.donut-legend i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--r-xs); align-self: center }
.donut-legend .donut-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.donut-legend .donut-name em { display: block; font-style: normal; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.donut-legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums }
.donut-legend .donut-val { flex: 0 0 auto; width: 90px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums }
.donut-legend li.donut-off i { background: none; border: 1.5px solid var(--muted) }
.donut-legend li.donut-off b { color: var(--body) }
@media (max-width: 640px) {
  .donut { gap: var(--s-base); justify-content: center }
  .donut-legend .donut-val { width: 72px }
}

/* ------------------------------------------------------------------ responsive (DESIGN.md › Responsive Behavior) */
@media (max-width: 1024px) {
  .brand-sub { display: none }
}
@media (max-width: 768px) {
  :root { --gutter: 16px }
  .top-inner { gap: var(--s-xs) }
  .account-menu-wrap { padding-left: 0; border-left: 0 }
  .wrap { padding-top: var(--s-xl) }
  h1 { font-size: 30px; letter-spacing: -0.6px }
  h2 { font-size: 22px; letter-spacing: -0.11px; margin-top: var(--s-xl) }
  .card { padding: var(--s-md) }
  .card.auth { padding: var(--s-lg) }
  .kpi .value { font-size: 26px }
}
@media (min-width: 900px) {
  .grid.kpi.kpi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .grid.kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-sm) }
  .kpi .card { min-height: 112px; padding: var(--s-base) }
  .kpi .card.kpi-chart { min-height: 220px }
  .kpi .value { font-size: 22px; letter-spacing: -0.3px }
}
.eyebrow a { color: inherit; text-decoration: none }
.eyebrow a:hover { color: var(--ink) }

/* Intraday summary: the value and the session's move beside the allocation, then three figures, then the session's
   best and worst holdings. Bands are split by hairlines, the figures by hairlines between them. */
.card.pf-summary { padding: 0; overflow: hidden }
.pf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-xl); align-items: end; padding: var(--s-lg) var(--s-lg) var(--s-md) }
.pf-label { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.pf-value { font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -1px; color: var(--ink); margin-top: var(--s-xs) }
.pf-today { min-height: 22px; margin-top: var(--s-xs); font-size: 15px; font-variant-numeric: tabular-nums }
.pf-alloc-bar { display: flex; gap: 2px; height: 8px; border-radius: var(--r-pill); overflow: hidden }
.pf-alloc-bar i { display: block; min-width: 2px }
.pf-alloc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: var(--s-sm) 0 0; padding: 0; list-style: none; font-size: 13px }
.pf-alloc-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap }
.pf-alloc-legend i { width: 8px; height: 8px; border-radius: 2px }
.pf-alloc-legend b { font-weight: 500 }
.pf-alloc-legend span { color: var(--muted); font-variant-numeric: tabular-nums }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline-soft) }
.pf-stat { min-width: 0; padding: var(--s-base) var(--s-lg) var(--s-md) }
.pf-stat + .pf-stat { border-left: 1px solid var(--hairline-soft) }
.pf-figure { display: flex; align-items: baseline; gap: var(--s-xs); margin-top: 6px; font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; color: var(--ink); white-space: nowrap }
.pf-figure small { font-size: 13px; letter-spacing: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis }
.pf-figure small.gain { color: var(--success) }
.pf-figure small.loss { color: var(--error) }
.pf-stat .sk.sk-value { height: 22px }
.pf-movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-xxl); padding: var(--s-base) var(--s-lg) var(--s-md); border-top: 1px solid var(--hairline-soft) }
.pf-movers-col { min-width: 0 }
table.pf-movers-list { margin-top: var(--s-xxs); table-layout: fixed }
table.pf-movers-list td { padding: 5px 0; border: 0; vertical-align: middle; line-height: 20px }
.pf-move-name { display: flex; align-items: baseline; gap: var(--s-xs); min-width: 0 }
.pf-move-name button.sec-link { flex: none; min-width: 44px; white-space: nowrap; font-weight: 500 }
.pf-move-name span { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pf-movers-list td.pf-move-bar { width: 124px; padding-left: var(--s-sm) }
.pf-move-bar span { display: block; height: 3px; border-radius: var(--r-pill); background: var(--hairline-soft); overflow: hidden }
.pf-move-bar i { display: block; height: 100%; background: currentColor }
.pf-movers-list td.num { width: 72px }
.pf-movers-list td.pf-move-pnl { width: 84px; font-size: 13px }
/* Measured on the page (a 900px and a 640px window without panes beside it), which the docked panes narrow. */
@container page (max-width: 836px) {
  .pf-top { grid-template-columns: 1fr; gap: var(--s-base) }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pf-stat:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hairline-soft) }
  .pf-movers { grid-template-columns: 1fr; row-gap: var(--s-base) }
}
@container page (max-width: 608px) {
  .pf-top { padding: var(--s-base) }
  .pf-value { font-size: 32px }
  .pf-stat, .pf-movers { padding: var(--s-sm) var(--s-base) var(--s-base) }
  .pf-figure { font-size: 18px }
  .pf-move-name span { display: none }
  .pf-movers-list td.pf-move-bar { width: 88px }
  .pf-movers-list td.pf-move-pnl { width: 76px }
}

/* Overview value and chart, one card: the value and the period's change above the line, the period buttons below it
   (fixed, so they never shift). */
.kpi-chart .kpi-delta { min-height: 20px; margin-bottom: var(--s-sm) }
.kpi-chart .chart-ranges { gap: var(--s-xxs); margin: var(--s-sm) 0 0 }
.kpi-chart .chart-ranges button.chip { height: 26px; padding: 2px 10px; font-size: 12px }
/* The period chips, and opposite them the measure (Return or Value); on a narrow screen the measure wraps below. */
.kpi-chart .chart-controls { justify-content: space-between; gap: var(--s-xs); margin: var(--s-sm) 0 0 }
.kpi-chart .chart-controls .chart-ranges { margin: 0 }
/* Overview provenance: collapsed to one summary line until opened. */

/* ------------------------------------------------------------------ connections */
/* Read-only promise under the title, and the same lock line inside set-up guides. */
.safe-note { display: flex; align-items: flex-start; gap: var(--s-xs); margin: var(--s-sm) 0 0; font-size: 14px; color: var(--body) }
.safe-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--success); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.safe-note.conn-lede { margin-top: var(--s-xs); font-size: 16px }
.safe-note.conn-lede svg { margin-top: 4px }
/* Getting started: connect, choose accounts, add to a portfolio. Done steps tick, the next one is inked, the rest wait. */
/* An empty portfolio's start card: a short welcome, then the ways to add holdings side by side, split by "or". */
.card.start { padding: var(--s-xl); overflow: visible }
.start-head { max-width: 640px; margin-bottom: var(--s-lg) }
.start-head h2 { margin: 0 0 var(--s-xs) }
.start-head p { margin: 0; color: var(--body) }
.start-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-base); max-width: 560px }
.start-ways:has(.start-or) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); max-width: none }
.start-way { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-lg); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas-soft) }
.start-way .method-icon { margin-bottom: var(--s-base); background: var(--surface-card); border: 1px solid var(--hairline) }
.start-way h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.1px; margin: 0 0 var(--s-xxs) }
.start-blurb { margin: 0 0 var(--s-base); color: var(--body) }
.start-points { list-style: none; margin: 0 0 var(--s-lg); padding: 0; display: grid; gap: var(--s-xs); font-size: 14px; color: var(--body) }
.start-points li { display: flex; align-items: flex-start; gap: var(--s-xs) }
.start-points svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: var(--success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
/* The buttons sit at the foot of each way, so the two cards' buttons line up whatever their text above. */
.start-actions { margin-top: auto; gap: var(--s-xs) }
.start-points:has(+ .start-note) { margin-bottom: var(--s-sm) }
.start-note { margin: 0 0 var(--s-lg); font-size: 13px; color: var(--muted) }
.start-or { display: flex; flex-direction: column; align-items: center; gap: var(--s-xs); color: var(--muted); font-size: 13px }
.start-or::before, .start-or::after { content: ""; flex: 1 1 0; width: 1px; background: var(--hairline-strong) }
.start-foot { margin: var(--s-lg) 0 0; font-size: 14px; color: var(--muted) }
/* Create portfolio: the name, with currency, benchmark and description folded under More options */
.card.create-pf { max-width: 560px }
.create-pf label:first-child { margin-top: 0 }
.create-more { margin: var(--s-base) 0 0 }
.create-more > summary { cursor: pointer; width: fit-content; font-size: 14px; color: var(--ink) }
.create-more > summary .muted { font-weight: 400 }
.create-more[open] > summary { margin-bottom: var(--s-xs) }
.create-pf button { margin-top: var(--s-base) }
@media (max-width: 760px) {
  .card.start { padding: var(--s-lg) var(--s-base) }
  .start-ways, .start-ways:has(.start-or) { grid-template-columns: minmax(0, 1fr) }
  .start-or { flex-direction: row }
  .start-or::before, .start-or::after { width: auto; height: 1px }
  .start-way { padding: var(--s-base) }
}
.journey { list-style: none; display: flex; align-items: center; margin: var(--s-xl) 0 0; padding: var(--s-base) var(--s-lg); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface-card) }
.journey li { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-sm); min-width: 0; font-size: 14px; color: var(--muted) }
.journey li:last-child { flex: 0 0 auto }
.journey li:not(:last-child)::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 1px; margin: 0 var(--s-base) 0 var(--s-xxs); background: var(--hairline-strong) }
.journey li.done:not(:last-child)::after { background: var(--success) }
.journey-mark { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hairline-strong); border-radius: 50%; color: var(--muted) }
.journey-mark svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.journey-text { white-space: nowrap }
.journey + .flash { margin-top: var(--s-base) }
.journey li.done { color: var(--body) }
.journey li.done .journey-mark { border-color: transparent; background: var(--success-tint); color: var(--success) }
.journey li.done .journey-mark svg { stroke-width: 2.4 }
.journey li.now { color: var(--ink); font-weight: 500 }
.journey li.now .journey-mark { border-color: var(--ink); background: var(--ink); color: var(--canvas) }
@media (max-width: 760px) {
  .journey { flex-direction: column; align-items: stretch; gap: var(--s-sm); padding: var(--s-base) }
  .journey li:not(:last-child)::after { display: none }
}
.section-head { gap: var(--s-xxs); margin: var(--s-xl) 0 var(--s-sm) }
.section-head h2 { margin: 0 }
.flash { font-size: 14px; color: var(--ink); background: var(--hairline-soft); border-radius: var(--r-md); padding: 10px 14px; margin: 0 0 var(--s-base) }
/* The ⋯ menu drops out of the card, so the card does not clip; its table scrolls on its own instead. */
.card.conn-card { overflow: visible }
.conn-head { align-items: center }
.conn-head .grow { flex: 1 1 200px; min-width: 0 }
.conn-head .grow .small { margin-top: 2px }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--success); vertical-align: 1px }
.conn-icon, .method-icon { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--hairline-soft); color: var(--ink) }
.conn-icon svg, .method-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.conn-icon .brand-logo, .method-icon .brand-logo { width: 100%; height: 100%; border-radius: inherit; display: block }
.method.off .method-icon .brand-logo { filter: grayscale(1); opacity: .6 }
.table-scroll { overflow-x: auto; margin-top: var(--s-sm); border-top: 1px solid var(--hairline-soft) }
.acct-table td { vertical-align: middle }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
/* Fixed column widths, so the columns of every connection's card line up with each other whatever the cells hold. */
.acct-table { table-layout: fixed; min-width: 760px }
.acct-table col.c-sel { width: 64px }
.acct-table col.c-hold { width: 168px }
.acct-table col.c-pf { width: 300px }
.acct-table col.c-view { width: 60px }
.acct-table td { overflow-wrap: anywhere }
/* A long portfolio name wraps inside its chip instead of running into the next column. */
.acct-table .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere }
.conn-head .grow .info-btn { height: 20px; margin-left: 2px; vertical-align: -4px }
details.menu { position: relative }
details.menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-card); color: var(--ink); cursor: pointer }
details.menu > summary::-webkit-details-marker { display: none }
details.menu > summary:hover, details.menu[open] > summary { background: var(--canvas) }
details.menu > summary svg { width: 18px; height: 18px; fill: currentColor }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 230px; display: flex; flex-direction: column; padding: 4px; background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md) }
.menu-list button, .menu-list button.danger { justify-content: flex-start; width: 100%; height: 36px; padding: 8px 12px; background: transparent; color: var(--ink); border: 0; border-radius: var(--r-sm) }
.menu-list button:hover { background: var(--hairline-soft); color: var(--ink) }
.menu-list button.danger, .menu-list button.danger:hover { color: var(--error) }
.menu-list button.danger:hover { background: var(--error-tint) }
.methods { display: flex; flex-direction: column; gap: var(--s-sm) }
.card.method { margin: 0; overflow: visible }
.card.method.off { background: var(--canvas-soft) }
.method.off .method-icon, .method.off .method-name { color: var(--muted) }
.method-head { flex-wrap: nowrap; gap: var(--s-base) }
.method-head .grow { flex: 1 1 auto; min-width: 0 }
.method-name { font-size: 18px; line-height: 1.3; letter-spacing: -0.1px; color: var(--ink) }
.method-name .info-btn { height: 20px; margin-left: 2px; vertical-align: -3px }
.method-blurb { margin-top: 2px; font-size: 14px; color: var(--muted) }
.method-status { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px }
.method-status.ok { color: var(--success) }
.method-status.warn { color: var(--warning) }
.method-status svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.method-action { flex-wrap: nowrap; gap: var(--s-base) }
.method-action button.link-btn { font-size: 14px }
/* Below the name, lined up with it rather than the icon. */
.method-connect, .inst-list { margin: var(--s-xs) 0 0 56px }
.method-connect .consent { margin-top: 0 }
.inst-list .row { flex-wrap: nowrap; padding: 8px 0; border-top: 1px solid var(--hairline-soft); color: var(--ink) }
@media (max-width: 640px) {
  .method-head { flex-wrap: wrap }
  .method-action { width: 100%; justify-content: flex-end }
  .method-connect, .inst-list { margin-left: 0 }
}
/* A set-up guide: numbered steps on a rail. Each says where to go (a path of the other service's menus) and shows a
   small picture of the settings to choose there. */
.setup { margin-top: var(--s-lg); padding-top: var(--s-lg); border-top: 1px solid var(--hairline-soft) }
.setup-lede { max-width: 600px; margin: 0 0 var(--s-base); font-size: 14px; color: var(--body) }
.setup-steps { list-style: none; counter-reset: step; margin: 0; padding: 0 }
.setup-steps > li { counter-increment: step; position: relative; padding: 0 0 var(--s-xl) 48px }
.setup-steps > li:last-child { padding-bottom: 0 }
.setup-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--canvas); font: 600 13px/28px var(--font-sans); text-align: center }
.setup-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 36px; bottom: 8px; width: 1px; background: var(--hairline-strong) }
.setup-steps > li.with-picture { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 600px); gap: var(--s-sm) var(--s-xl); align-items: start }
@media (max-width: 899px) { .setup-steps > li.with-picture { grid-template-columns: minmax(0, 1fr) } }
.step-copy > :last-child { margin-bottom: 0 }
.setup-steps h4 { margin: 3px 0 var(--s-sm); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink) }
.step-text { margin: 0; font-size: 14px; color: var(--body) }
.step-tip { margin: var(--s-sm) 0 0; font-size: 14px; color: var(--muted) }
.ui-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s-sm); font-size: 13px; color: var(--muted-soft) }
.ui-path i { font-style: normal }
.ui-path span { padding: 3px 10px; border-radius: var(--r-pill); background: var(--hairline-soft); color: var(--body) }
.ui-path span.here { background: var(--ink); color: var(--canvas) }
.mock { max-width: 600px; min-width: 0; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--canvas-soft); overflow: hidden }
.mock-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); background: var(--hairline-soft); font-size: 12px; color: var(--muted) }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong) }
.mock-bar span { margin-left: var(--s-xs) }
.mock-body { margin: 0; padding: 0 14px }
.mock-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--s-sm); align-items: start; padding: 10px 0 }
.mock-row + .mock-row { border-top: 1px solid var(--hairline-soft) }
.mock-row dt { padding-top: 3px; font-size: 13px; color: var(--muted) }
.mock-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0 }
.mock-field { min-width: 96px; padding: 3px 10px; font-size: 13px; color: var(--ink); background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm) }
.mock-field.mono { font-family: var(--font-mono) }
.mock-chips { display: flex; flex-wrap: wrap; gap: 6px }
.mock-chip { display: inline-flex; white-space: nowrap; align-items: center; gap: 4px; padding: 2px 10px 2px 7px; font-size: 12px; color: var(--ink); background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill) }
.mock-chip svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--success); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.mock-hint { flex-basis: 100%; font-size: 12px; color: var(--muted) }
@media (max-width: 640px) {
  .setup-steps > li { padding-left: 40px }
  .mock-row { grid-template-columns: minmax(0, 1fr); gap: 6px }
  .mock-row dt { padding-top: 0 }
}
.mock-toggle { position: relative; width: 30px; height: 18px; border-radius: var(--r-pill); background: var(--success) }
.mock-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-card) }
.mock-on { font-size: 13px; color: var(--ink) }
.mock-foot { display: flex; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--hairline-soft) }
.mock-btn { padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--canvas); background: var(--ink); border-radius: var(--r-sm) }
.setup-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-base); max-width: 600px }
.setup-fields label { margin-top: 0 }
.setup-form .row > button { margin-top: var(--s-xs) }
.setup-form input[type="file"] { max-width: 600px; font-size: 13px }
#imp-out .card { margin: var(--s-base) 0 0 }
.setup-howto { margin-top: var(--s-lg) }
.setup-howto > summary { cursor: pointer; font-size: 14px; color: var(--body) }
.setup-howto[open] > summary { margin-bottom: var(--s-base) }
.file-list { margin: var(--s-xs) 0 var(--s-sm) }
.file-list summary { cursor: pointer; color: var(--body) }
.file-list td { vertical-align: top }
#flex-err:not(.error) { color: var(--muted) }
button.link-btn { height: auto; padding: 0; background: transparent; color: var(--body); font-size: 13px; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px }
button.link-btn:hover, button.link-btn:active { background: transparent; color: var(--ink) }
.consent { gap: 5px; margin-top: var(--s-base); font-size: 14px }
.consent label.row { flex-wrap: nowrap; margin: 0; gap: var(--s-xs); font-size: 14px; color: var(--ink); cursor: pointer }
.consent button.link-btn { margin: 0; padding: 0; font-size: 14px; line-height: 21px; color: var(--ink) }
.consent + .error:empty { display: none }

/* The Upload tab's preview, shown in place of the tab: a headline, the editable positions table, then how the file was
   read (folded), the date, the mode and Import. */
.pv-back { margin: 0 0 var(--s-sm) }
.pv-head { margin-bottom: var(--s-base) }
.pv-head h2 { margin: var(--s-xxs) 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.2px; color: var(--ink) }
.pv-head p { margin: 0 }
/* The file type the preview reads the upload as: "Read as" and a two-way switch, so a wrong guess is hard to miss. */
.pv-head .pv-kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-sm); margin-top: var(--s-sm) }
.pv-kind-label { font-size: 13px; font-weight: 500; color: var(--ink) }
.pv-kind-switch { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: var(--surface-card) }
.pv-kind-switch button { height: 28px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer }
.pv-kind-switch button:hover { background: var(--hairline-soft); color: var(--ink) }
.pv-kind-switch button[aria-pressed="true"], .pv-kind-switch button[aria-pressed="true"]:hover { background: var(--ink); color: var(--surface-card); cursor: default }
.pv-kind-note { font-size: 13px; color: var(--muted) }
.pv-table-wrap { overflow-x: auto; margin: var(--s-sm) 0 }
.pv-positions td { vertical-align: middle }
.pv-positions input.pv-in { width: 110px; height: 32px; padding: 4px 8px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums }
.pv-positions input.pv-sym { width: 96px; text-align: left; text-transform: uppercase; font-family: var(--font-mono) }
.pv-positions tr.pv-unmapped input.pv-sym { border-color: var(--error) }
.pv-positions tr.pv-edited td:first-child { box-shadow: inset 3px 0 0 var(--ink) }
.pv-positions tr.pv-zero td { color: var(--muted) }
.pv-positions input.pv-date { width: 140px; text-align: left }
.pv-date-all { margin: var(--s-base) 0 0 }
.pv-date-all label { margin-top: 0 }
.pv-date-all .row { gap: var(--s-xs); flex-wrap: nowrap; align-items: center }
.pv-date-all input { width: auto }
.pv-tx td:first-child { white-space: nowrap }
.pv-tx select.pv-tx-side { width: auto; min-width: 96px; height: 32px; padding: 4px 8px; font-size: 13px }
.pv-tx input.pv-tx-in { width: 92px }
.pv-tx .pv-file-action { margin-top: 2px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pv-del-cell { width: 32px; text-align: right }
.pv-del { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer }
.pv-del:hover, .pv-del:focus-visible { border-color: var(--hairline-strong); color: var(--error); background: var(--canvas-soft) }
.pv-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) }
.pv-more { margin: var(--s-sm) 0; padding: var(--s-xs) 0; border-top: 1px solid var(--hairline-soft) }
.pv-more > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink) }
.pv-more[open] > summary { margin-bottom: var(--s-xs) }
.pv-mode { margin-top: var(--s-base) }
@media (max-width: 560px) { .pv-positions input.pv-in { width: 84px } .pv-positions input.pv-sym { width: 76px } }
/* Portfolio Upload tab: the mode as two cards. */
.mode-cards { border: 0; padding: 0; margin: var(--s-base) 0 0; display: grid; gap: var(--s-xs) }
.mode-cards legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--ink) }
.mode-card { display: flex; align-items: flex-start; gap: var(--s-sm); margin: 0; padding: var(--s-sm) var(--s-base); border: 1px solid var(--hairline); border-radius: var(--r-md); font-weight: 400; cursor: pointer }
.mode-card:has(input:checked) { border-color: var(--ink); background: var(--canvas-soft) }
.mode-card input { margin-top: 3px }
.mode-card > span { display: grid; gap: 2px }
.mode-card b { font-weight: 500; color: var(--ink) }
/* The Import tab's top row: the import card (the wider), History beside it as a timeline; stacked when narrow. Wide,
   History takes the import card's height (its list is out of the flow, so only the import card sizes the row) and
   scrolls within it. */
.import-row { display: grid; gap: var(--s-lg); margin-bottom: var(--s-base) }
.import-row > .card { min-width: 0; margin: 0 }
.history-head { display: flex; align-items: baseline; gap: var(--s-xs); margin-bottom: var(--s-xs) }
.history-head h3 { margin: 0 }
.history-card #entry-history { max-height: 420px; overflow-y: auto }
@media (min-width: 1100px) {
  .import-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) }
  .history-card { position: relative; padding: 0 }
  /* The title stays put; the timeline under it scrolls. */
  .history-body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: var(--s-lg) var(--s-base) var(--s-base) var(--s-lg) }
  .history-card #entry-history { flex: 1 1 auto; min-height: 0; max-height: none; margin-left: calc(-1 * var(--s-sm)); padding-left: var(--s-sm) }
}
/* Beside History the manual entry has about 600px: a trade row's eight cells fit with narrower inputs and cell padding. */
@media (min-width: 1100px) {
  .import-row #pane-manual .me-table th, .import-row #pane-manual .me-table td { padding-left: 4px; padding-right: 4px }
  .import-row #pane-manual .me-table input.pv-in { width: 76px }
  .import-row #pane-manual .me-table.pv-tx input.pv-in { width: 72px }
  .import-row #pane-manual .me-table select.pv-in { min-width: 64px }
  .import-row #pane-manual .me-table .me-name { min-width: 0 }
  .import-row #pane-manual .me-table .me-amount { min-width: 48px }
}
/* The import card's head: Upload | Manual entry as underlined tabs with icons (unlike the segmented Positions |
   Transactions toggle inside Manual entry), and the broker help as a quiet link on the right. */
.import-head { display: flex; align-items: flex-end; gap: var(--s-base); margin: calc(-1 * var(--s-xs)) 0 var(--s-lg); border-bottom: 1px solid var(--hairline) }
.import-tabs { display: flex; gap: var(--s-lg) }
.import-tab { position: relative; margin: 0; cursor: pointer }
.import-tab input { position: absolute; opacity: 0; pointer-events: none }
.import-tab span { display: inline-flex; align-items: center; gap: 8px; padding: var(--s-xs) 2px 10px; font-size: 15px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease }
.import-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.import-tab:hover span { color: var(--ink) }
.import-tab input:checked + span { color: var(--ink); border-bottom-color: var(--primary) }
.import-tab input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
#up-help { margin-left: auto; padding-bottom: 8px }
button.help-link { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 4px 8px; background: transparent; border: 0; border-radius: var(--r-pill); color: var(--muted); font-size: 13px; font-weight: 500 }
button.help-link:hover { background: var(--hairline-soft); color: var(--ink) }
button.help-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
button.help-link svg .fill { fill: currentColor; stroke: none }
/* On a phone the tabs take the row: the help is its icon alone (the words stay for screen readers). */
@media (max-width: 560px) { button.help-link .help-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } button.help-link svg { width: 20px; height: 20px } }
.upload-form { display: grid; gap: var(--s-base); justify-items: start }
.upload-form .up-box, .upload-form #up-shot-note { justify-self: stretch }
/* The broker dropdown: each source's mark (initials on its colour) beside its name, in the face and in the list. */
.src-picker { position: relative; max-width: 380px; margin-top: var(--s-sm) }
button.src-face { display: flex; align-items: center; gap: var(--s-sm); width: 100%; height: 48px; padding: 0 12px 0 8px; background: var(--surface-card); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); font-size: 15px; font-weight: 500; text-align: left }
button.src-face:hover { border-color: var(--muted-soft); background: var(--surface-card) }
button.src-face[aria-expanded="true"] { border-color: var(--ink) }
.src-face .src-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.src-face .src-name.muted { font-weight: 400 }
.src-chevron { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease }
.src-face[aria-expanded="true"] .src-chevron { transform: rotate(180deg) }
.src-mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--surface-strong); color: var(--body); font: 700 12px/1 var(--font-sans); letter-spacing: -0.2px }
.src-mark.empty { background: transparent; border: 1.5px dashed var(--hairline-strong) }
.src-list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); box-shadow: 0 12px 32px rgb(0 0 0 / .18) }
.src-list [role="option"] { display: flex; align-items: center; gap: var(--s-sm); padding: 6px 8px; border-radius: var(--r-sm); font-size: 14px; color: var(--ink); cursor: pointer; outline: none }
.src-list [role="option"]:hover, .src-list [role="option"]:focus { background: var(--hairline-soft) }
.src-list [role="option"] .src-mark { width: 28px; height: 28px; font-size: 11px }
.src-list .src-name { flex: 1 1 auto }
.src-check { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden }
.src-list [aria-selected="true"] .src-check { visibility: visible }
.src-list [aria-selected="true"] { font-weight: 600 }
dialog.info-dialog#info-upload-sources { width: min(560px, calc(100vw - 32px)); overflow: visible }
#up-instructions { margin-top: var(--s-sm) }
.src-steps { margin: 0 0 var(--s-xs); padding-left: 1.2em; font-size: 14px; color: var(--body); line-height: 1.6 }
.src-steps li + li { margin-top: var(--s-xxs) }
.crumb { display: inline-block; padding: 0 8px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--canvas-soft); font-size: 13px; line-height: 22px; color: var(--ink); white-space: nowrap }
.up-box { position: relative; padding: var(--s-xs) var(--s-sm); border: 1.5px dashed var(--hairline-strong); border-radius: var(--r-lg); background: var(--canvas-soft); transition: border-color .15s ease, background .15s ease }
.up-box.over, .up-box:focus-within { border-color: var(--ink) }
.up-box.over { background: var(--surface-strong) }
.up-box input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.up-field { position: relative; display: grid }
.up-field > * { grid-area: 1 / 1 }
.up-box textarea { position: relative; width: 100%; min-height: 300px; padding: var(--s-xs) 0; border: 0; background: transparent; box-shadow: none; resize: vertical; font: 400 13px/1.5 var(--font-mono); color: var(--ink) }
.up-box textarea:focus { box-shadow: none }
.up-box.filled .up-guide { visibility: hidden }
/* The guide: what the box takes, drawn rather than written. Under the textarea, so a click anywhere pastes or types. */
.up-guide { display: grid; align-content: center; gap: var(--s-base); padding: var(--s-base) var(--s-xs); pointer-events: none; color: var(--body) }
.up-guide-head { display: flex; align-items: center; gap: var(--s-sm); font-size: 15px; color: var(--body) }
.up-guide-head b { color: var(--ink); font-weight: 600 }
.up-guide-head svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--hairline); fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.up-fmts { display: flex; flex-wrap: wrap; gap: 6px }
.fmt { padding: 2px 9px; border-radius: var(--r-pill); background: var(--surface-card); border: 1px solid var(--hairline); font-size: 12px; font-weight: 500; color: var(--body) }
.up-sheets { display: grid; gap: var(--s-sm) }
.up-sheet { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-sm); align-items: center }
.up-sheet-kind { display: grid; gap: 1px; font-size: 14px; line-height: 1.3 }
.up-sheet-kind b { color: var(--ink); font-weight: 600 }
.up-sheet-kind span { font-size: 12px; color: var(--muted) }
/* The transactions file is the one to get: tagged in the box and in the broker steps. */
.rec-tag, .up-sheet-kind .rec-tag { justify-self: start; display: inline-block; padding: 0 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; vertical-align: 1px }
.up-rec-note { margin: var(--s-xxs) 0 var(--s-sm) }
.up-legend b { color: var(--body); font-weight: 600 }
/* The example tables sit above the textarea, so their headings show their hints and a phone can swipe them; a click on one
   still goes to the textarea (app.js), and a paste or drop anywhere in the box is taken as before. */
.up-sheet-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-card); overflow: hidden; pointer-events: auto }
.up-sheet-grid .col, .up-sheet-grid .cell { padding: 5px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.up-sheet-grid .cell { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--hairline-soft) }
.up-sheet-grid .cell + .cell, .up-sheet-grid .col + .col { border-left: 1px solid var(--hairline-soft) }
.up-sheet-grid .col { cursor: help }
/* The Required and Optional bands over the columns; the required columns tinted under theirs. */
.up-sheet-grid .band { padding: 3px 8px; white-space: nowrap; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--hairline-soft) }
.up-sheet-grid .band.req { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent) }
.up-sheet-grid .band.opt { color: var(--muted); border-left: 1px solid var(--hairline-soft) }
.up-sheet-grid .band.req::before, .up-sheet-grid .band.opt::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: var(--primary) }
.up-sheet-grid .band.opt::before { width: 4px; height: 4px; background: none; border: 1.5px dashed var(--muted-soft) }
.up-sheet-grid .col.req, .up-sheet-grid .cell.req { background: color-mix(in srgb, var(--primary) 5%, transparent) }
.up-sheet-grid .col.req::before, .up-sheet-grid .col.opt::before { display: none }
.up-sheet-grid .col.opt { color: var(--muted) }
/* Required columns solid, optional ones dashed: the same marks as the legend. */
.col { font-weight: 600; color: var(--ink) }
.col.req::before, .col.opt::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px }
.col.req::before { background: var(--primary) }
.col.opt { font-weight: 500; color: var(--body) }
.col.opt::before { border: 1.5px dashed var(--muted-soft); width: 5px; height: 5px }
.up-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-base); font-size: 12px; color: var(--muted) }
.up-legend .col { font-size: 12px }
@media (max-width: 560px) {
  .up-sheet { grid-template-columns: 1fr }
  /* Every column, scrolled sideways rather than cut. */
  .up-sheet-grid { grid-template-columns: repeat(var(--cols, 5), max-content); overflow-x: auto }
}
.up-box-foot { display: flex; justify-content: flex-end; align-items: flex-end; gap: var(--s-sm); padding-top: var(--s-xs); border-top: 1px solid var(--hairline-soft); text-align: right }
.up-box-foot > span { flex: 1 1 auto; min-width: 0 }
.link-label { display: inline; margin: 0; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap }
/* A chosen file: a card in the box's place (its type as a badge, its name and size, Remove), the paste field set aside. */
#up-file-name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); padding: var(--s-base) var(--s-xs) }
.up-box.has-file .up-field { display: none }
.up-box.has-file #up-file-name { min-height: 300px; align-content: center; padding-inline: var(--s-xl) }
.up-file-icon { display: grid; place-items: center; width: 44px; height: 52px; border-radius: var(--r-sm); background: var(--surface-card); border: 1px solid var(--hairline-strong); font: 600 11px/1 var(--font-mono); color: var(--primary) }
.up-file-meta { display: grid; gap: 2px; min-width: 0; flex: 1 1 160px; overflow-wrap: anywhere }
.up-file-meta b { color: var(--ink); font-weight: 600 }
#up-shot-note { margin: var(--s-xxs) 0 0 }
.up-thumb { display: block; max-width: 240px; max-height: 160px; margin-top: var(--s-xs); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); object-fit: contain; object-position: left top }
/* History as a timeline, newest first: a dot per entry in its kind's colour (DESIGN.md's timeline pastels), what it is
   and its file, its rows imported as a bar, the date, and icon actions that come forward on hover. */
.tl { list-style: none; margin: 0; padding: 0; position: relative }
.tl::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--hairline) }
.tl:has(> li:only-child)::before { display: none }
.tl-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "dot body date" "dot body acts"; column-gap: var(--s-sm); padding: 10px 6px 10px 0; border-radius: var(--r-md) }
.tl-item:hover { background: var(--canvas-soft) }
.tl-dot { grid-area: dot; position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--timeline-read); color: var(--timeline-ink); box-shadow: 0 0 0 3px var(--surface-card) }
.tl-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.tl-manual .tl-dot { background: var(--timeline-edit) }
.tl-start .tl-dot { background: var(--timeline-done) }
.tl-split .tl-dot { background: var(--timeline-grep) }
.tl-removal .tl-dot { background: var(--timeline-thinking) }
.tl-body { grid-area: body; min-width: 0; display: grid; gap: 3px; align-content: start; padding-top: 3px }
.tl-title { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35 }
.tl-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
.tl-date { grid-area: date; justify-self: end; padding-top: 4px; font-size: 12px; color: var(--body); white-space: nowrap; font-variant-numeric: tabular-nums }
.tl-acts { grid-area: acts; justify-self: end; display: flex; gap: 2px; opacity: .55; transition: opacity .15s ease }
.tl-item:hover .tl-acts, .tl-acts:focus-within { opacity: 1 }
@media (hover: none) { .tl-acts { opacity: 1 } }
button.icon-btn.tl-act { width: 28px; height: 28px; border-radius: var(--r-sm) }
button.icon-btn.tl-act svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.tl-bar { display: flex; width: min(160px, 100%); height: 5px; margin-top: 3px; border-radius: var(--r-pill); background: var(--hairline-soft); overflow: hidden }
.tl-bar .ok { background: var(--success) }
.tl-bar .bad { background: var(--error) }
.tl-item.removed .tl-title, .tl-item.removed .tl-date { color: var(--muted) }
.tl-item.removed .tl-dot { background: var(--surface-strong) }
.tl-ghost .tl-dot { background: transparent; border: 2px dashed var(--hairline-strong) }
.tl-empty { padding: var(--s-xs) 0 }
/* Holdings history: the value over time, above its table. The line is stretched to the box; dots and labels sit by percent. */
.section-head h3 { margin: 0 }
.hv-chart { margin: 0 0 var(--s-sm); display: grid; gap: 6px }
.hv-plot { position: relative; height: 150px; margin: 28px 40px 0 }
.hv-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.hv-area { fill: url(#hv-fade) }
.hv-fade-top { stop-color: var(--primary); stop-opacity: .16 }
.hv-fade-end { stop-color: var(--primary); stop-opacity: 0 }
.hv-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.hv-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--primary) }
.hv-dot.now { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent) }
.hv-val { position: absolute; transform: translate(-50%, calc(-100% - 10px)); font-size: 12px; font-weight: 500; color: var(--body); white-space: nowrap; font-variant-numeric: tabular-nums }
.hv-val.last { font-size: 13px; font-weight: 600; color: var(--ink); transform: translate(-50%, calc(-100% - 12px)) }
.hv-axis { display: flex; justify-content: space-between; margin: 0 40px; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--muted) }
@media (max-width: 560px) { .hv-plot, .hv-axis { margin-left: 8px; margin-right: 8px } .hv-val { display: none } }
.history-divider { margin: var(--s-lg) 0 var(--s-xxs); font-size: 14px; font-weight: 600; color: var(--ink) }
dialog.info-dialog.entry-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto }
.entry-dialog h4 { margin: var(--s-base) 0 var(--s-xs); font-size: 14px; font-weight: 600; color: var(--ink) }
.entry-dialog table { font-size: 13px }
.conflicts { margin: 0; padding-left: 18px }
/* Manual entry: a two-way toggle and the date on one line, then the rows as the upload preview's table. */
.seg { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); overflow: hidden }
.seg-option { position: relative; margin: 0; font-weight: 500; cursor: pointer }
.seg-option input { position: absolute; opacity: 0; pointer-events: none }
.seg-option span { display: block; padding: 6px 14px; font-size: 13px; color: var(--muted) }
.seg-option input:checked + span { background: var(--ink); color: var(--surface-card) }
.seg-option input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -2px }
.me-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm) var(--s-base) }
/* The date as small as the toggle beside it. */
.me-head input[type="date"] { width: 136px; height: 32px; padding: 0 10px; font-size: 13px }
.me-legend { display: flex; gap: var(--s-base); margin-left: auto; font-size: 12px }
.me-legend .col { font-size: 12px; font-weight: 500; color: var(--muted) }
.me-table th .col { cursor: help }
.me-table { margin: 0 }
.me-table th { white-space: nowrap }
.me-table .me-name { min-width: 140px }
.me-table select.pv-in { width: auto; min-width: 96px; height: 32px; padding: 4px 8px; font-size: 13px; text-align: left }
.me-table .me-amount { display: inline-block; min-width: 80px; font-variant-numeric: tabular-nums }
.me-field { display: flex; align-items: center; gap: var(--s-xs); margin: 0; font-size: 13px; font-weight: 500; color: var(--muted) }
.me-settle { margin: 0; gap: 6px; font-size: 13px; white-space: nowrap }
.me-settle input { width: auto }


/* ------------------------------------------------------------------ AI apps
   One reading column (the title carries the app marks and a read-only pill): either the numbered connect steps (first visit, .setup-steps
   as on Connections) or the connected apps with "Connect another app" opening the picker under their heading; then the
   skill cards, whose sample questions copy on click. */
.ai-page { max-width: 880px }
/* The title's line of app marks, as on the product tour: round marks, each overlapping the one before and ringed in the page's colour. */
.ai-page-head { margin-bottom: var(--s-base) }
.ai-apps-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-xs) var(--s-sm); margin-top: var(--s-sm) }
.ai-logo-stack { display: inline-flex; align-items: center; padding-left: 10px }
.ai-logo { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -10px; border-radius: 50%; border: 1px solid var(--hairline-strong); box-shadow: 0 0 0 2px var(--canvas); background: var(--surface-card); color: var(--ink) }
.ai-logo svg { width: 18px; height: 18px; fill: currentColor; stroke: none }
.ai-logo:nth-child(1) { z-index: 5 } .ai-logo:nth-child(2) { z-index: 4 } .ai-logo:nth-child(3) { z-index: 3 } .ai-logo:nth-child(4) { z-index: 2 } .ai-logo:nth-child(5) { z-index: 1 }
.ai-logo-claude { color: #d97757 }
.ai-logo-gemini { color: #4285f4 }
.ai-logo.ai-logo-more { color: var(--muted) }
.ai-logo.ai-logo-more svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.ai-apps-names { font-size: 14px; color: var(--muted) }
/* The read-only promise as a small pill beside the title; its full wording is the pill's tooltip. */
.ai-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-sm) }
.ai-title-row h1 { margin: 0 }
.ai-readonly { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--hairline-strong); font-size: 13px; color: var(--body); white-space: nowrap }
.ai-readonly svg { width: 14px; height: 14px; fill: none; stroke: var(--success); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ai-page > :first-child { margin-top: var(--s-lg) }
.ai-section { margin-top: var(--s-xxl) }
.ai-section h2 { margin: 0 0 var(--s-base) }
.ai-section h2:has(+ .ai-section-lede) { margin-bottom: var(--s-xxs) }
.ai-section-head { justify-content: space-between; align-items: flex-end; margin-bottom: var(--s-base) }
.ai-section-head h2 { margin: 0 }
.ai-section-lede { margin: 0 0 var(--s-md); color: var(--body) }
.ai-connect { margin: 0; padding: var(--s-xl); overflow: visible }
.ai-connect > h2 { margin: 0 0 var(--s-lg); font-size: 22px; letter-spacing: -0.2px }
.ai-connect .setup-steps > li { padding-bottom: var(--s-lg) }
.ai-connect .setup-steps > li:last-child { padding-bottom: 0 }
.ai-connect .ui-path { margin-bottom: var(--s-xs) }
.ai-connect.compact { display: grid; gap: var(--s-md); margin-bottom: var(--s-base); padding: var(--s-lg) }
.ai-add { display: grid; gap: var(--s-sm) }
.ai-add .ui-path { margin: 0 }
.ai-add .ai-or { margin-top: var(--s-xs) }
.ai-off { color: var(--body) }
.ai-apps { display: flex; flex-wrap: wrap; gap: var(--s-xs) }
.ai-apps button { height: 44px; padding: 0 18px; border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink); border: 1px solid var(--hairline-strong) }
.ai-apps button:hover, .ai-apps button:active { background: var(--canvas); color: var(--ink); border-color: var(--muted-soft) }
.ai-apps button[aria-checked="true"], .ai-apps button[aria-checked="true"]:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink) }
.ai-apps button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.copy-field { display: flex; align-items: stretch; gap: var(--s-xs); min-width: 0 }
.copy-field .value { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 14px; overflow-wrap: anywhere }
.copy-field .value.prompt { font-family: var(--font-sans); font-size: 15px }
.copy-field button { flex: none; height: auto; min-height: 44px; min-width: 88px }
.copy-field button.copied, .copy-field button.copied:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink) }
.ai-empty { padding: var(--s-lg); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); color: var(--muted); text-align: center }
ul.grants { list-style: none; margin: 0; padding: 0 }
.grant { display: flex; align-items: center; gap: var(--s-base); flex-wrap: wrap; padding: var(--s-base) var(--s-md) }
.grant + .grant { border-top: 1px solid var(--hairline-soft) }
.grant-mark { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--hairline-soft); color: var(--ink); font-weight: 600 }
.grant-app { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.grant-app b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere }
.grant-domain { margin-left: var(--s-xs); font-size: 13px; color: var(--muted) }
.grant-domain.unverified { color: var(--warning) }
.grant-reads { font-size: 14px; color: var(--body) }
button.grant-remove { color: var(--body) }
.grant-confirm { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); flex-wrap: wrap; padding: var(--s-sm) var(--s-base); border-radius: var(--r-md); background: var(--error-tint); color: var(--ink); font-size: 14px }
.grant-confirm .row { gap: var(--s-xs) }
button.remove { background: var(--error); color: var(--canvas) }
button.remove:hover, button.remove:active { background: var(--error); color: var(--canvas); filter: brightness(.92) }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: var(--s-base) }
.card.skill { margin: 0; display: flex; flex-direction: column; gap: var(--s-sm); overflow: visible }
.skill-head { display: flex; align-items: center; gap: var(--s-sm) }
.skill-head h3 { margin: 0; font-size: 17px }
.skill-icon { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--hairline-soft); color: var(--ink) }
.skill-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.card.skill p { margin: 0; font-size: 14px }
.asks { display: grid; gap: var(--s-xs); margin-top: auto; padding-top: var(--s-xxs) }
button.ask { justify-content: space-between; gap: var(--s-sm); height: auto; min-height: 44px; padding: 10px 14px; text-align: left; white-space: normal; line-height: 1.4; font-weight: 400; color: var(--ink); background: var(--canvas-soft); border-color: var(--hairline) }
button.ask:hover, button.ask:active { background: var(--canvas); color: var(--ink); border-color: var(--hairline-strong) }
button.ask svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.ask-icon { display: inline-flex; color: var(--muted-soft) }
.ask-done { display: none; align-items: center; gap: 4px; flex: none; font-size: 12px }
button.ask.copied, button.ask.copied:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink) }
button.ask.copied .ask-icon { display: none }
button.ask.copied .ask-done { display: inline-flex }
td.act { text-align: right; white-space: nowrap }
@media (max-width: 560px) {
  .ai-connect { padding: var(--s-md) var(--s-base) }
  .ai-connect .setup-steps > li { padding-left: 40px }
  .copy-field { flex-direction: column }
  .copy-field button { align-self: flex-start }
  .grant { padding: var(--s-base) }
  .hide-sm { display: none }
}

/* ------------------------------------------------------------------ security details pane
   A right-hand drawer over the page (a modal <dialog>), opened from a holding's row. Full width on a phone. */
tr.sec-row { cursor: pointer }
tr.sec-row:hover td, tr.sec-row.selected td { background: var(--canvas-soft) }
/* The ticker opens the pane without looking like a link: the row's hover shade and pointer say it is clickable. */
button.sec-link { all: unset; cursor: pointer; font-weight: 600; color: var(--ink) }
button.sec-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
/* Opened with show(), not showModal(), so Ask Invix stays usable beside it. Docked under the top bar, left of Ask Invix
   when that pushes the page: beside the page (body.sec-split, which pushes it in turn), or over it, behind a scrim
   that dims the page up to Ask Invix (app.js securityLayout). Both sit below the Ask pane and its scrim. */
:root { --sec-w: 400px }
.sec-scrim { position: fixed; inset: var(--top-h) 0 0 0; z-index: 15; background: rgb(0 0 0 / .3) }
body.ask-push .sec-scrim { right: var(--ask-w) }
dialog.sec-pane { position: fixed; inset: var(--top-h) 0 0 auto; z-index: 16; margin: 0; width: min(var(--sec-w), 100%); max-width: 100%; height: calc(100dvh - var(--top-h)); max-height: calc(100dvh - var(--top-h)); padding: 0; border: 0; border-left: 1px solid var(--hairline-strong); background: var(--surface-card); color: var(--body); overflow: hidden }
body.ask-push dialog.sec-pane { right: var(--ask-w) }
body.sec-split dialog.sec-pane { width: var(--sec-w); border-left-color: var(--hairline) }
/* The left border drags the pane wider or narrower (app.js bindSecurityResize), as Ask Invix's does. It sits inside the
   pane, which clips what overflows, over the body's left padding. */
.sec-resize { position: absolute; top: 0; left: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 2; touch-action: none }
.sec-resize:hover, .sec-resize:focus-visible, body.sec-resizing .sec-resize { background: linear-gradient(to right, transparent 0, var(--hairline-strong) 0, var(--hairline-strong) 2px, transparent 2px); outline: none }
body.sec-resizing { cursor: ew-resize; user-select: none }
body.sec-resizing dialog.sec-pane { animation: none }
@media (max-width: 640px) { .sec-resize { display: none } }
body.sec-split .shell { padding-right: var(--sec-w) }
body.ask-push.sec-split .shell { padding-right: calc(var(--ask-w) + var(--sec-w)) }
dialog.sec-pane[open] { animation: sec-pane-in .2s ease-out }
@keyframes sec-pane-in { from { transform: translateX(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { dialog.sec-pane[open] { animation: none } }
.sec-pane-inner { display: flex; flex-direction: column; height: 100% }
.sec-pane-head { display: flex; align-items: flex-start; gap: var(--s-sm); padding: var(--s-md) var(--s-lg) var(--s-base); border-bottom: 1px solid var(--hairline) }
.sec-pane-titles { flex: 1 1 auto; min-width: 0 }
.sec-pane-head .eyebrow { margin-bottom: var(--s-xxs) }
.sec-pane-head .eyebrow:empty { display: none }
.sec-pane-head h2 { margin: 0; font-size: 26px; letter-spacing: -0.325px; color: var(--ink) }
.sec-pane-head .info-close { flex: none; margin-right: -6px }
.sec-pane-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-lg) var(--s-xl) }
.sec-section { padding: var(--s-lg) 0; border-bottom: 1px solid var(--hairline-soft) }
.sec-section:last-child { border-bottom: 0 }
.sec-section h3 { margin-bottom: var(--s-sm) }
.sec-section h4 { margin: var(--s-lg) 0 var(--s-xs); font-size: 13px; font-weight: 600; color: var(--ink) }
.sec-section h4 .muted { font-weight: 400; margin-left: var(--s-xxs) }
.sec-section > .row > h3 { margin-bottom: var(--s-sm) }
.sec-quote { display: flex; flex-direction: column; gap: var(--s-xs); margin-bottom: var(--s-sm) }
/* The price, then its change and the period it covers on the same baseline. */
.sec-quote-row { display: flex; align-items: baseline; gap: var(--s-xxs) var(--s-sm); flex-wrap: wrap }
.sec-price { font-size: 34px; font-weight: 400; line-height: 1.15; letter-spacing: -0.8px; color: var(--ink); font-variant-numeric: tabular-nums }
.sec-change { font-size: 15px; line-height: 1.35; font-variant-numeric: tabular-nums }
.sec-change .small { font-size: 12px }
.sec-quote-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-xxs) var(--s-sm); font-size: 12px; color: var(--muted) }
.sec-market { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; background: var(--hairline-soft); color: var(--muted); font-weight: 500; white-space: nowrap }
.sec-market::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6 }
.sec-market.open { background: var(--success-tint); color: var(--success) }
.sec-market.open::before { opacity: 1 }
.kpi-spark.sec-spark { min-height: 200px; height: 200px; flex: none }
.sec-spark > p { margin: var(--s-xl) 0 }
/* The period buttons sit under the chart. */
.row.chart-ranges.sec-chart-ranges { margin: var(--s-xs) -2px 0 }
.sec-range { margin-top: var(--s-base) }
.sec-range .row { justify-content: space-between; font-variant-numeric: tabular-nums }
.sec-range-bar { position: relative; height: 4px; margin: 6px 0; border-radius: 2px; background: var(--hairline) }
.sec-range-bar i { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface-card) }
/* The pane's bar fills from the 52-week low to the price, red at the low through amber to green at the high: the
   colour reached is where the price sits. The gradient spans the whole track, and the fill is clipped at the price. */
.sec-range .sec-range-bar { height: 6px; border-radius: 3px; margin: 8px 0 6px }
.sec-range .sec-range-bar b { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to right, var(--error), var(--warning) 50%, var(--success)) }
.sec-range .sec-range-bar i { top: -4px; width: 14px; height: 14px; margin-left: -7px; box-shadow: 0 1px 2px rgb(0 0 0 / .18) }
dl.kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm) var(--s-base); margin: 0 }
dl.kv > div { min-width: 0 }
dl.kv dt { font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
dl.kv dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
table.sec-table { font-size: 13px; margin-top: var(--s-xs) }
table.sec-table th, table.sec-table td { padding: 8px 10px }
table.sec-table td.num .small { font-size: 11px }
.sec-section .warn-note { margin: var(--s-xs) 0 0; color: var(--warning) }
dl.sec-company-kv { gap: var(--s-base) var(--s-lg) }
dl.sec-company-kv dt { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 400 }
dl.sec-company-kv dd { font-size: 15px }
.sec-expand { margin-top: var(--s-base) }
.sec-expand > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-sm); list-style: none; cursor: pointer; color: var(--ink); font-size: 13px }
.sec-expand > summary::-webkit-details-marker { display: none }
.sec-expand > summary::after { content: "+"; color: var(--muted); font-size: 18px; flex: none }
.sec-expand[open] > summary::after { content: "−" }
.sec-expand[open] > summary { margin-bottom: var(--s-base) }
.sec-expand .sec-when-open, .sec-expand[open] .sec-when-closed { display: none }
.sec-expand[open] .sec-when-open { display: inline }
.sec-business-summary { margin: 0; font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere }
.sec-business-more { margin-top: var(--s-xs) }
.sec-business-more > summary { justify-content: flex-start; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px }
.sec-business-more > summary::after, .sec-business-more[open] > summary::after { content: none }
.sec-company-facts { margin-top: var(--s-base) }
.sec-company-facts dd { font-size: 14px }
.sec-company-website { display: inline-block; margin-top: var(--s-base); font-size: 13px; overflow-wrap: anywhere }
.sec-performance { margin-top: 0 }
.sec-performance > summary h3 { margin: 0 }
@media (pointer: coarse) { .sec-expand > summary { min-height: 44px } }
@media (max-width: 640px) {
  .sec-pane-head { padding: var(--s-base) var(--s-base) var(--s-sm) }
  .sec-pane-body { padding: 0 var(--s-base) var(--s-xl) }
  .sec-price { font-size: 28px }
}

/* ------------------------------------------------------------------ Position alerts (D26 §3.2)
   The top-bar bell with its unread badge, and the Alerts drawer. Opened with show() and docked as the security pane is:
   under the top bar (which stays usable above it), left of Ask Invix when that pushes the page. When the page would
   still have 520px (alertsLayout in alerts-core.js), the drawer reserves its width as padding on .shell (body.alerts-push)
   and may narrow the side nav to its icons (body.alerts-squeeze). Otherwise it covers the page, as it does on a
   phone. Both sit below the Ask pane. */
button.alerts-toggle { position: relative; flex: none; width: 34px; height: 34px; padding: 0; justify-content: center; background: transparent; color: var(--body); border: 1px solid transparent; border-radius: var(--r-pill) }
button.alerts-toggle:hover, button.alerts-toggle:active, button.alerts-toggle[aria-expanded="true"] { background: var(--hairline-soft); color: var(--ink) }
button.alerts-toggle[hidden] { display: none }
.alerts-toggle svg, .alert-toast-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
.alerts-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); border: 2px solid var(--canvas); font-size: 10.5px; font-weight: 600; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums }
.alerts-badge[hidden] { display: none }
.alerts-scrim { position: fixed; inset: var(--top-h) 0 0 0; z-index: 15; background: rgb(0 0 0 / .2) }
body.ask-push .alerts-scrim { right: var(--ask-w) }
.alerts-scrim[hidden] { display: none }
:root { --alerts-w: 380px }
dialog.alerts-pane { position: fixed; inset: var(--top-h) 0 0 auto; z-index: 16; margin: 0; width: min(var(--alerts-w), 100%); max-width: 100%; height: calc(100dvh - var(--top-h)); max-height: calc(100dvh - var(--top-h)); padding: 0; border: 0; border-left: 1px solid var(--hairline-strong); background: var(--surface-card); color: var(--body); overflow: hidden }
dialog.alerts-pane[open] { animation: sec-pane-in .2s ease-out }
body.ask-push dialog.alerts-pane { right: var(--ask-w) }
body.alerts-push .shell { padding-right: var(--alerts-w) }
body.alerts-push.ask-push .shell { padding-right: calc(var(--ask-w) + var(--alerts-w)) }
@media (prefers-reduced-motion: reduce) { dialog.alerts-pane[open] { animation: none } }
.alerts-inner { display: flex; flex-direction: column; height: 100% }
.alerts-head { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-base) var(--s-base) var(--s-sm) var(--s-lg) }
.alerts-head h2 { flex: 1 1 auto; margin: 0; font-size: 22px; letter-spacing: -0.3px; color: var(--ink) }
.alerts-head h2:focus { outline: none }
.alerts-head .link-btn { font-size: 13px }
.alerts-head .link-btn[disabled], .alerts-head .link-btn[hidden] { display: none }
.alerts-head .info-close { flex: none }
.alerts-views { display: flex; gap: 2px; margin: 0 var(--s-lg) var(--s-sm); padding: 3px; background: var(--hairline-soft); border-radius: var(--r-pill) }
button.alerts-view { flex: 1; height: 30px; padding: 0 12px; font-size: 13.5px; font-weight: 500; color: var(--muted); background: transparent; border: 0; border-radius: var(--r-pill) }
button.alerts-view:hover { background: transparent; color: var(--ink) }
button.alerts-view[aria-pressed="true"], button.alerts-view[aria-pressed="true"]:hover { background: var(--surface-card); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline) }
.alerts-status { margin: 0 var(--s-lg) var(--s-sm); padding: var(--s-xs) var(--s-sm); background: var(--hairline-soft); border-radius: var(--r-md); color: var(--ink) }
.alerts-status[hidden] { display: none }
.alerts-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-lg) var(--s-xl); border-top: 1px solid var(--hairline) }
.alerts-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs); padding: var(--s-sm) 0 }
.alerts-chips { display: inline-flex; gap: 4px }
button.alerts-chip { height: 28px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--body); background: transparent; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill) }
button.alerts-chip:hover { background: var(--hairline-soft); color: var(--ink) }
button.alerts-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface-card); border-color: var(--ink) }
select.alerts-portfolio { width: auto; max-width: 170px; margin: 0 0 0 auto; height: 30px; padding: 0 28px 0 10px; font-size: 13px }
.alerts-group h3 { margin: var(--s-base) 0 var(--s-xxs); font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.alerts-group h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 400 }
.alerts-list { list-style: none; margin: 0; padding: 0 }
.alert-item, .alert-rule { position: relative; display: flex; gap: var(--s-xs); padding: var(--s-sm) 0; border-bottom: 1px solid var(--hairline-soft) }
.alert-item:last-child, .alert-rule:last-child { border-bottom: 0 }
.alert-item.unread { padding-left: 14px }
.alert-unread-dot { position: absolute; left: 0; top: calc(var(--s-sm) + 7px); width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--primary) }
.alert-item-main { flex: 1 1 auto; min-width: 0 }
.alert-item-subject { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.alert-item-message { margin: 2px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink) }
.alert-item-meta { margin-top: 2px }
.alert-item-note { margin: 4px 0 0; color: var(--body); font-style: italic }
.alert-item-actions { display: flex; flex-wrap: wrap; gap: var(--s-base); margin-top: 6px; font-size: 13px }
.alert-item-actions .link-btn.danger { color: var(--error); text-decoration-color: var(--error-tint) }
.alert-rule.paused .alert-item-message, .alert-rule.expired .alert-item-message { color: var(--muted) }
button.alert-dismiss { flex: none; align-self: flex-start; width: 28px; height: 28px; padding: 0; justify-content: center; margin: -4px -6px 0 0; background: transparent; color: var(--muted); border: 0; border-radius: var(--r-pill) }
button.alert-dismiss:hover { background: var(--hairline-soft); color: var(--ink) }
.alert-dismiss svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.alerts-empty { margin: var(--s-lg) 0; color: var(--muted); font-size: 14px }
.alerts-more { margin: var(--s-base) 0 0; text-align: center }
.alert-toast { position: fixed; right: var(--s-lg); bottom: var(--s-lg); z-index: 14; display: flex; align-items: center; gap: var(--s-sm); max-width: min(420px, calc(100vw - 32px)); padding: var(--s-sm) var(--s-sm) var(--s-sm) var(--s-base); background: var(--surface-card); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgb(0 0 0 / .12); font-size: 14px; animation: sec-pane-in .2s ease-out }
.alert-toast[hidden] { display: none }
.alert-toast p { margin: 0; flex: 1 1 auto; line-height: 1.4 }
.alert-toast-icon { display: inline-flex; color: var(--primary) }
button.alert-toast-close { flex: none; width: 28px; height: 28px; padding: 0; justify-content: center; background: transparent; color: var(--muted); border: 0; font-size: 18px }
button.alert-toast-close:hover { background: var(--hairline-soft); color: var(--ink) }
@media (prefers-reduced-motion: reduce) { .alert-toast { animation: none } }
@media (max-width: 640px) {
  dialog.alerts-pane { width: 100%; border-left: 0 }
  body.alerts-push .shell,
  body.alerts-push.ask-push .shell { padding-right: 0 }
  .alerts-head { padding: var(--s-sm) var(--s-sm) var(--s-xs) var(--s-base) }
  .alerts-views { margin: 0 var(--s-base) var(--s-sm) }
  .alerts-status { margin: 0 var(--s-base) var(--s-sm) }
  .alerts-body { padding: 0 var(--s-base) var(--s-xl) }
  .alert-toast { right: var(--s-base); bottom: var(--s-base) }
}
@media (pointer: coarse) { button.alerts-toggle { width: 44px; height: 44px } button.alert-dismiss { width: 44px; height: 44px; margin: -12px -12px 0 0 } }

/* Setting an alert (D26 §3.1): the Add alert dialog, an Intraday row's bell, the Alerts column, the holding pane's list. */
dialog.alert-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; background: var(--surface-card); color: var(--body); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); overflow: hidden }
dialog.alert-dialog::backdrop { background: rgb(0 0 0 / .35) }
dialog.alert-dialog[open] { display: flex; flex-direction: column }
.alert-form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto }
.alert-dialog-head { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-base) var(--s-base) var(--s-xs) var(--s-lg) }
.alert-dialog-head h2 { flex: 1 1 auto; margin: 0; font-size: 20px; letter-spacing: -0.2px; color: var(--ink) }
.alert-dialog-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s-lg) var(--s-sm) }
.alert-dialog-body label { margin: 0 0 4px; font-size: 13px }
.alert-dialog-body input, .alert-dialog-body select { height: 38px; padding: 6px 10px; font-size: 14px }
.alert-dialog-body select { padding-right: 32px; background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px }
.alert-holding { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-sm); padding: var(--s-sm) 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; color: var(--ink) }
.alert-quote { font-variant-numeric: tabular-nums }
.alert-presets { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--s-xs) 0 0 }
.alert-row { display: flex; gap: var(--s-sm) }
.alert-row > .alert-field { flex: 1 1 0; min-width: 0 }
.alert-field { margin-top: var(--s-sm) }
.alert-field > p { margin: 4px 0 0 }
label.alert-check { display: inline-flex; align-items: center; gap: var(--s-xs); margin: var(--s-sm) 0 0; font-weight: 400; color: var(--body) }
.alert-field label.alert-check { margin: 0 0 6px }
.alert-hint { margin: 6px 0 0 }
.alert-sentence { margin: var(--s-sm) 0 0; padding: var(--s-xs) var(--s-sm); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-md); font-size: 14px; line-height: 1.45; color: var(--ink) }
.alert-error { margin: 0 var(--s-lg) var(--s-xs); color: var(--error); font-size: 13px }
.alert-error[hidden] { display: none }
.alert-dialog-foot { padding: var(--s-sm) var(--s-lg) var(--s-base); border-top: 1px solid var(--hairline) }
.alert-dialog-foot p { margin: 0 0 var(--s-sm) }
.alert-dialog-foot .row > button { margin-top: 0 }
/* Contact Invix: the alert dialog's frame, with a message box and the result in place of the form once sent. */
.contact-dialog p.contact-lede { margin: 0; color: var(--body) }
.contact-dialog .alert-dialog-body > label { margin-top: var(--s-sm) }
.contact-dialog .alert-dialog-body > label.contact-details { margin-bottom: 2px }
.contact-dialog .alert-dialog-body select { width: 100% }
.contact-dialog textarea { display: block; width: 100%; min-height: 150px; resize: vertical; font-family: var(--font-sans); font-size: 14px; line-height: 1.45; padding: 8px 10px }
.contact-dialog p.contact-count { margin: 4px 0 0; text-align: right }
.contact-dialog p.contact-count:empty { margin: 0 }
.contact-dialog p.contact-details-note { margin: 0 0 0 24px; line-height: 1.4 }
.contact-dialog p.contact-reply { margin: var(--s-sm) 0 0; color: var(--body) }
.contact-done { padding: var(--s-xs) 0 var(--s-sm) }
.contact-done h3 { margin: 0 0 var(--s-xs); font-size: 17px; color: var(--ink) }
.contact-done p { margin: 0 0 var(--s-xs) }
.alerts-rules-head { display: flex; justify-content: flex-end; padding: var(--s-sm) 0 0 }
/* The row's bell: beside the symbol, shown on hover or focus (always on touch), filled while the holding has alerts. */
button.row-alert-btn { display: inline-flex; vertical-align: -3px; width: 22px; height: 22px; padding: 0; margin-left: 6px; justify-content: center; align-items: center; background: transparent; color: var(--muted); border: 0; border-radius: var(--r-pill); opacity: 0 }
button.row-alert-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
tr:hover button.row-alert-btn, tr:focus-within button.row-alert-btn, button.row-alert-btn:focus-visible, button.row-alert-btn.on { opacity: 1 }
button.row-alert-btn:hover { background: var(--hairline-soft); color: var(--ink) }
button.row-alert-btn.on { color: var(--primary) }
button.row-alert-btn.on svg { fill: currentColor }
@media (hover: none) { button.row-alert-btn { opacity: 1; width: 32px; height: 32px; margin: -5px -5px -5px 1px } }
td.alerts-cell { max-width: 220px; white-space: normal; font-variant-numeric: tabular-nums }
.sec-alerts .row h3 { margin: 0 }
.sec-alert-list { list-style: none; margin: var(--s-xs) 0 0; padding: 0 }
.sec-alert-list li { display: flex; align-items: baseline; gap: var(--s-sm); padding: 6px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14px; color: var(--ink) }
.sec-alert-list li:last-child { border-bottom: 0 }
.sec-alert-rule { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums }
@media (max-width: 640px) {
  .alert-dialog-head { padding: var(--s-sm) var(--s-sm) var(--s-xs) var(--s-base) }
  .alert-dialog-body { padding: 0 var(--s-base) var(--s-sm) }
  .alert-dialog-foot { padding: var(--s-sm) var(--s-base) var(--s-base) }
  .alert-error { margin: 0 var(--s-base) var(--s-xs) }
}

/* Upload preview: the number and date conventions sit on one line beside their labels. */
.pv-conv select { display: inline-block; width: auto; min-width: 140px; margin: 0 var(--s-base) 0 var(--s-xs) }

/* ------------------------------------------------------------------ Ask Invix (the in-app assistant pane)
   docs/phase3/in-app-assistant-proposal.md §4. A pane outside #app, docked on the right under the top bar: it pushes
   the page at 1024px and up, overlays it at 768–1023px and is a full-screen sheet below 768px. The top bar's field
   and button open it, each marked with the bot, the one place the primary colour marks Ask. Hairline depth only;
   the tool rows are the one place the timeline-* pastels appear. */
:root { --ask-w: 400px }
.ask-bot { color: var(--primary) }
/* The bot: a hexagon head after the logo's blocks. It blinks now and then and on hover; while an answer streams
   (body.ask-working) a light runs round the head; when it lands (body.ask-answered) the head flashes and smiles once. */
.ask-bot .fill { fill: currentColor; stroke: none }
.ask-bot * { transform-box: fill-box; transform-origin: center }
.ask-bot .bot-shell { fill: currentColor; fill-opacity: 0; transition: stroke-opacity .2s }
.ask-bot .bot-run { stroke-dasharray: 9 39; opacity: 0 }
.ask-bot .bot-happy { opacity: 0 }
@keyframes bot-blink { 0%, 93%, 100% { transform: scaleY(1) } 96% { transform: scaleY(.12) } }
@keyframes bot-blink-once { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.12) } }
@keyframes bot-trace { to { stroke-dashoffset: -48 } }
@keyframes bot-flash { 0% { fill-opacity: 0 } 30% { fill-opacity: .22 } 100% { fill-opacity: 0 } }
.ask-bot .bot-eye { animation: bot-blink 6s ease-in-out infinite }
.ask-toggle:hover .ask-bot .bot-eye { animation: bot-blink-once .5s ease-in-out 1 }
body.ask-working .ask-bot .bot-run { opacity: 1; animation: bot-trace 1.2s linear infinite }
body.ask-working .ask-bot .bot-shell { stroke-opacity: .3 }
body.ask-working .ask-bot .bot-eye { animation: bot-blink-once 1.2s ease-in-out infinite }
body.ask-answered .ask-bot .bot-shell { animation: bot-flash .9s ease-out 1 }
body.ask-answered .ask-bot .bot-eye { opacity: 0 }
body.ask-answered .ask-bot .bot-happy { opacity: 1; transition: opacity .15s }
@media (prefers-reduced-motion: reduce) {
  .ask-bot *, body.ask-working .ask-bot * { animation: none !important; transition: none }
  body.ask-working .ask-bot .bot-run { opacity: .6 }
}
/* The top bar's ticker search, on a portfolio's pages: a ticker sent from it opens in the security pane. */
.top-search { position: relative; flex: 0 1 380px; min-width: 200px; margin: 0 }
.top-search[hidden] { display: none }
.top-search > svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; pointer-events: none }
.top-search input { width: 100%; height: 34px; padding: 0 34px 0 32px; background: var(--surface-card); border-color: var(--hairline-strong); border-radius: var(--r-md); font-size: 13px; text-transform: uppercase }
.top-search input::placeholder { text-transform: none; color: var(--muted) }
.top-search input:hover { border-color: var(--muted-soft) }
.top-search input::-webkit-search-cancel-button { display: none }
.top-search .ask-kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none }
.top-search:focus-within .ask-kbd { display: none }
.ask-kbd { flex: none; padding: 3px 5px; border: 1px solid var(--hairline); border-radius: var(--r-xs); background: var(--canvas-soft); color: var(--muted); font: 500 11px/1 var(--font-mono) }
.ask-toggle { flex: none; height: 34px; padding: 0 10px 0 9px; gap: 6px; background: transparent; color: var(--ink); border: 1px solid transparent; font-size: 13px }
.ask-toggle:hover, .ask-toggle:active { background: var(--hairline-soft); color: var(--ink) }
.ask-toggle.active, .ask-toggle.active:hover { background: var(--surface-card); border-color: var(--hairline-strong) }
.ask-toggle svg, .ask-title svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
body.ask-push .shell { padding-right: var(--ask-w) }
body.ask-sheet-open { overflow: hidden }
body.ask-resizing { cursor: ew-resize; user-select: none }
.ask-scrim { position: fixed; inset: var(--top-h) 0 0 0; z-index: 19; background: rgb(0 0 0 / .3) }
.ask-pane {
  position: fixed; right: 0; top: var(--top-h); bottom: 0; z-index: 20; width: var(--ask-w);
  display: flex; flex-direction: column;
  background: var(--canvas-soft); color: var(--body); border-left: 1px solid var(--hairline-strong);
  animation: ask-in .18s ease-out;
}
.ask-pane[data-layout="sheet"] { top: 0; width: 100vw; height: 100dvh; border-left: 0; padding-bottom: env(safe-area-inset-bottom) }
@keyframes ask-in { from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ask-pane { animation: none } }
.ask-resize { position: absolute; top: 0; left: -4px; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1 }
.ask-resize:hover, .ask-resize:focus-visible { background: linear-gradient(to right, transparent 3px, var(--hairline-strong) 3px, var(--hairline-strong) 5px, transparent 5px); outline: none }
.ask-pane[data-layout="sheet"] .ask-resize { display: none }

.ask-head { flex: none; display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 var(--s-xs) 0 var(--s-base); border-bottom: 1px solid var(--hairline) }
.ask-title { display: inline-flex; align-items: center; gap: var(--s-xs); flex: 1; color: var(--ink); font-size: 15px; font-weight: 600 }
button.ask-icon { width: 34px; height: 34px; padding: 0; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-md) }
button.ask-icon:hover, button.ask-icon:active, button.ask-icon[aria-pressed="true"] { background: var(--hairline-soft); color: var(--ink) }
button.ask-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }

.ask-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-base) var(--s-base) var(--s-xs) }
.ask-log { display: flex; flex-direction: column; gap: var(--s-lg); font-size: 14px; line-height: 1.55 }
.ask-loading { margin: var(--s-base) 0 }
.ask-state { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-base) var(--s-md) }
.ask-state p { margin: 0 0 var(--s-xs); color: var(--ink) }
.ask-state p:last-child { margin-bottom: 0 }
.ask-notice { margin: 0; padding: var(--s-sm) var(--s-base); border-radius: var(--r-md); background: var(--hairline-soft); color: var(--ink); font-size: 13px }
.ask-notice.limit { background: var(--warning-tint); color: var(--ink) }

/* the empty state */
.ask-empty { display: flex; flex-direction: column; gap: var(--s-sm) }
.ask-lede { margin: 0; color: var(--ink); font-size: 15px }
.ask-starters { display: flex; flex-direction: column; gap: var(--s-xs) }
button.ask-starter { height: auto; justify-content: flex-start; text-align: left; white-space: normal; padding: 10px 14px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--ink); background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md) }
button.ask-starter:hover, button.ask-starter:active { background: var(--surface-card); color: var(--ink); border-color: var(--ink) }
button.ask-linkish { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px }
button.ask-linkish:hover { text-decoration-color: var(--ink) }
button.ask-linkish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }

/* one question and its answer */
.ask-turn { display: flex; flex-direction: column; gap: var(--s-sm) }
.ask-q { align-self: flex-end; max-width: 88%; background: var(--surface-strong); color: var(--ink); border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg); padding: var(--s-xs) var(--s-sm) }
.ask-q p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere }
.ask-a { display: flex; flex-direction: column; gap: var(--s-xs); color: var(--body) }
.ask-md { color: var(--ink); overflow-wrap: anywhere }
.ask-md p { margin: 0 0 var(--s-xs) }
.ask-md > :last-child { margin-bottom: 0 }
.ask-md ul, .ask-md ol { margin: 0 0 var(--s-xs); padding-left: 20px }
.ask-md li + li { margin-top: var(--s-xs) }
.ask-md a[target="_blank"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.ask-md a[target="_blank"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
.ask-md pre { margin: 0 0 var(--s-xs); padding: var(--s-sm); font-size: 12px }
.ask-md code { font-size: 12.5px }
.ask-table { overflow-x: auto; margin: 0 0 var(--s-xs); background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 0 var(--s-sm) }
.ask-table table { font-size: 13px }
.ask-table th, .ask-table td { padding: 7px 8px }
.ask-table th.num, .ask-table td.num { text-align: right; font-variant-numeric: tabular-nums }
.ask-table th.mid, .ask-table td.mid { text-align: center }

/* the tool timeline */
.ask-timeline { list-style: none; margin: 0; padding: 0 0 0 2px; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--timeline-read) }
.ask-timeline li + li { margin-top: 0 }
button.ask-tool-row { width: 100%; height: auto; justify-content: flex-start; gap: var(--s-xs); padding: 5px 8px; background: transparent; color: var(--body); border: 0; border-radius: var(--r-sm); font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal }
button.ask-tool-row:hover, button.ask-tool-row:active { background: var(--hairline-soft); color: var(--ink) }
button.ask-tool-row:disabled, button.ask-tool-row:disabled:hover { opacity: 1; cursor: default; background: transparent }
.ask-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--timeline-done) }
.ask-tool[data-status="running"] .ask-dot { background: var(--timeline-thinking); animation: ask-pulse 1.2s ease-in-out infinite }
.ask-tool[data-status="error"] .ask-dot { background: var(--error) }
.ask-tool[data-status="stopped"] .ask-dot { background: var(--muted-soft) }
@keyframes ask-pulse { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .ask-tool[data-status="running"] .ask-dot { animation: none } }
.ask-tool-label { color: var(--ink) }
.ask-tool-meta { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap }
.ask-chev { display: inline-flex; color: var(--muted) }
.ask-chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s ease }
.ask-tool-row[aria-expanded="true"] .ask-chev svg { transform: rotate(90deg) }
.ask-tool-error { margin: 0 8px 4px 24px; color: var(--error); font-size: 12.5px }
.ask-inputs { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-sm); margin: 2px 8px 6px 24px; font-size: 12px }
.ask-inputs dt { color: var(--muted) }
.ask-inputs dd { margin: 0; min-width: 0 }
.ask-inputs code { font-size: 11.5px }
.ask-thinking { margin: 0 }
.ask-pill { display: inline-flex; padding: 3px 10px; border-radius: var(--r-pill); background: var(--timeline-thinking); color: var(--timeline-ink); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; animation: ask-pulse 1.6s ease-in-out infinite }
@media (prefers-reduced-motion: reduce) { .ask-pill { animation: none } }
.ask-error { margin: 0; color: var(--error); font-size: 13.5px }
.ask-muted { margin: 0; color: var(--muted); font-size: 13.5px }

/* deep links, actions and feedback */
.ask-links { display: flex; flex-wrap: wrap; gap: var(--s-xs) }
a.ask-link { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none }
a.ask-link:hover { border-color: var(--ink) }
.ask-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 0 }
.ask-actions:empty { display: none }
button.ask-action { height: 28px; padding: 0 8px; gap: 4px; background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500 }
button.ask-action:hover, button.ask-action:active, button.ask-action[aria-pressed="true"] { background: var(--hairline-soft); color: var(--ink) }
button.ask-action.danger:hover { color: var(--error); background: var(--error-tint) }
button.ask-action.icon { width: 28px; padding: 0 }
button.ask-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
button.ask-action .fill, .ask-send .fill { fill: currentColor; stroke: none }
.ask-feedback { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--s-sm) }
.ask-feedback label { margin: 0 0 4px; font-size: 13px }
.ask-feedback textarea { font-family: var(--font-sans); font-size: 14px; padding: 8px 10px }
.ask-feedback .ask-share { align-items: flex-start; flex-wrap: nowrap; margin: var(--s-sm) 0; font-weight: 400; color: var(--body); font-size: 12.5px; line-height: 1.45 }
.ask-feedback .ask-share input { margin-top: 2px }
.ask-feedback .row button { margin-top: 0 }

/* consent and history */
.ask-consent { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-md) }
.ask-consent h3 { font-size: 18px; margin-bottom: var(--s-xs) }
.ask-consent .row { margin-top: var(--s-base) }
.ask-recipients { list-style: none; padding: 0; margin: var(--s-sm) 0; display: flex; flex-direction: column; gap: var(--s-xs) }
.ask-recipients li { display: flex; flex-direction: column; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--hairline); border-radius: var(--r-md); margin: 0 }
.ask-history h3 { margin: 0 }
.ask-history-head { margin-bottom: var(--s-sm) }
.ask-convs { list-style: none; padding: 0; margin: 0 0 var(--s-sm); display: flex; flex-direction: column; gap: 4px }
.ask-conv { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-md); margin: 0 }
.ask-conv.current { background: var(--hairline-soft) }
button.ask-conv-open { flex: 1; min-width: 0; height: auto; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 8px; background: transparent; color: var(--ink); border: 0; border-radius: var(--r-sm); font-weight: 400; text-align: left; white-space: normal }
button.ask-conv-open:hover, button.ask-conv-open:active { background: var(--hairline-soft); color: var(--ink) }
.ask-conv-title { font-size: 14px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical }
.ask-rename { display: flex; gap: 4px; width: 100% }
.ask-rename input { height: 34px; font-size: 14px; padding: 6px 10px }
.ask-rename button { flex: none; margin: 0 }
.ask-keep { margin-top: var(--s-base); padding-top: var(--s-sm); border-top: 1px solid var(--hairline) }
.ask-keep label { align-items: flex-start; flex-wrap: nowrap; font-size: 14px; font-weight: 400; color: var(--body) }
.ask-keep input { margin-top: 3px }

/* the question box */
.ask-compose { flex: none; padding: var(--s-xs) var(--s-base) var(--s-sm); border-top: 1px solid var(--hairline); background: var(--canvas-soft) }
.ask-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 4px 0 var(--s-xs); padding: 2px 4px 2px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink); font-size: 12.5px; line-height: 1.6 }
.ask-chip-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success) }
.ask-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ask-chip button { width: 22px; height: 22px; padding: 0; flex: none; background: transparent; color: var(--muted); border: 0; border-radius: var(--r-pill) }
.ask-chip button:hover, .ask-chip button:active { background: var(--hairline-soft); color: var(--ink) }
.ask-chip button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
.ask-chips { display: flex; flex-wrap: wrap; gap: 0 6px }
.ask-chip-sec { border-color: var(--ink) }
.ask-chip-ticker { font-weight: 600; font-family: var(--font-mono); font-size: 12px }
.ask-chip-sec .ask-chip-text { color: var(--muted) }
.ask-quick { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 var(--s-xs) }
button.ask-quick-q { height: 26px; padding: 0 10px; margin: 0; background: var(--surface-card); color: var(--body); border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); font-size: 12.5px; font-weight: 400 }
button.ask-quick-q:hover, button.ask-quick-q:active { background: var(--hairline-soft); color: var(--ink) }
.ask-q-sec { display: inline-block; margin-bottom: 2px; padding: 0 6px; border-radius: var(--r-xs); background: var(--surface-card); color: var(--ink); font: 600 11.5px/1.6 var(--font-mono) }
.ask-drag-hint { margin-top: var(--s-xs) }

/* a security row dragged into the pane */
tr.sec-row[draggable="true"] { -webkit-user-drag: element }
.ask-drag-ghost { position: fixed; top: -200px; left: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font-size: 12.5px; white-space: nowrap; pointer-events: none }
.ask-drag-ghost svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.ask-drag-ghost b { font-family: var(--font-mono); font-weight: 600 }
body.ask-dragging .ask-toggle { outline: 2px dashed var(--primary); outline-offset: 2px }
body.ask-dragging .ask-pane .ask-compose { outline: 2px dashed var(--hairline-strong); outline-offset: -6px }
.ask-toggle.ask-drop-over, .ask-toggle.ask-drop-over:hover { background: var(--primary); color: var(--on-primary); outline-style: solid }
.ask-drop-over .ask-bot, .ask-drop-over .ask-kbd { color: inherit }
.ask-pane.ask-drop-over .ask-compose { outline: 2px solid var(--primary); background: var(--warning-tint) }
.ask-pane.ask-drop-over .ask-form { border-color: var(--primary) }
.sec-ask { flex: none; margin: 4px 0 0 }
/* Watch (the watchlist): an outline star, filled orange while the security is watched. */
.sec-watch { flex: none; margin: 4px 0 0; display: inline-flex; align-items: center; gap: 6px }
.sec-watch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round }
.sec-watch.on svg { fill: var(--primary); stroke: var(--primary) }
.sec-watch-note { margin-top: 4px; color: var(--error) }

.ask-form { display: flex; align-items: flex-end; gap: var(--s-xs); background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 6px 6px 6px 12px }
.ask-form:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--hairline) }
.ask-form textarea { flex: 1; min-height: 28px; max-height: 160px; height: 28px; padding: 4px 0; border: 0; background: transparent; resize: none; overflow-y: hidden; font: 400 15px/1.35 var(--font-sans); color: var(--ink); box-shadow: none }
.ask-form textarea:focus { box-shadow: none }
.ask-form textarea::placeholder { color: var(--muted-soft) }
.ask-form textarea:disabled { background: transparent; color: var(--muted-soft) }
button.ask-send { width: 32px; height: 32px; padding: 0; flex: none; margin: 0; border-radius: var(--r-md) }
button.ask-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
button.ask-send.stop { background: var(--ink); color: var(--canvas) }
button.ask-send.stop:hover, button.ask-send.stop:active { background: var(--body); color: var(--canvas) }
.ask-foot { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; text-align: center }

/* The top bar spans the window, the panes below it: the search narrows under 1100px, the Ask button's label goes under
   768px, and on a phone the search is its icon until it is focused, when it spans the bar. */
@media (max-width: 1099px) { .top-search { flex-basis: 220px; min-width: 150px } .top-search .ask-kbd { display: none } }
@media (max-width: 639px) {
  .top-inner { position: relative }
  .top-search { flex: none; width: 34px; min-width: 0; margin-left: auto }
  .top-search input { padding: 0; color: transparent; border-color: transparent; background: transparent; cursor: pointer }
  .top-search input::placeholder { color: transparent }
  .top-search:focus-within { position: absolute; left: var(--s-sm); right: var(--s-sm); width: auto; z-index: 2; background: var(--canvas); box-shadow: 0 0 0 var(--s-sm) var(--canvas) }
  .top-search:focus-within input { padding: 0 10px 0 32px; color: var(--ink); background: var(--surface-card); border-color: var(--ink); cursor: text }
  .top-search:focus-within input::placeholder { color: var(--muted) }
  .top-search + .top-tools { flex: none; margin-left: 0 }
}
@media (max-width: 767px) {
  .ask-toggle span { display: none }
  .ask-toggle { width: 34px; padding: 0; justify-content: center }
  .top-crumb { display: none }
}

/* ------------------------------------------------------------------ account */
/* Account cards keep their existing controls inside the dialog sections below. */
.btn.small { height: 30px; padding: 6px 12px; font-size: 13px }
#name-status:empty { visibility: hidden }
.acct-line-label svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
.acct-card { padding: var(--s-lg) var(--s-lg) var(--s-xs) }
.acct-card-head { display: flex; align-items: center; gap: var(--s-base); padding-bottom: var(--s-base); margin-bottom: var(--s-xxs); border-bottom: 1px dashed var(--hairline-strong) }
.acct-card-head h2 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.11px; font-weight: 500 }
.acct-card-head > :last-child:not(h2) { margin-left: auto }
/* A card that is only its head (the plan): no rule under it. */
.acct-card-head:last-child { border-bottom: 0; margin-bottom: 0 }
.acct-plan-card { padding-bottom: var(--s-lg) }
.acct-plan-card .acct-card-head { padding-bottom: 0 }
.acct-plan-end { display: flex; align-items: center; gap: var(--s-sm) }
.acct-line { display: flex; align-items: center; gap: var(--s-base); padding: var(--s-sm) var(--s-xs); margin: 0 calc(-1 * var(--s-xs)); border-radius: var(--r-md); color: var(--body); text-decoration: none }
.acct-line-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.acct-line-label { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500 }
.acct-line-sub { padding-left: 30px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere }
.acct-line-sub code { font-size: 12px }
.acct-line-end { flex: none; display: flex; align-items: center; gap: var(--s-xs); color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; max-width: 55% }
.acct-addr { font-size: 14px; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.warn-text { color: var(--warning) }
.acct-exports { list-style: none; padding: 0; margin: var(--s-xs) 0 0; max-width: 360px }
.acct-exports li { display: flex; justify-content: space-between; gap: var(--s-base); padding: 4px 0; border-top: 1px solid var(--hairline-soft) }
.acct-exports li + li { margin-top: 0 }
#dmsg:empty { display: none }
#dmsg { padding: var(--s-xs) 0 var(--s-sm) }
/* Manage subscription: the plan, then the actions; cancelling is a quiet text button, confirmed on its own view. */
.sub-plan { display: flex; align-items: center; gap: var(--s-xs); margin: var(--s-base) 0 }
.sub-dialog .price-list { margin-bottom: var(--s-sm) }
.sub-actions { margin-top: var(--s-lg) }
.sub-actions > .right { margin-left: auto }
button.link-btn { height: auto; padding: 4px 0; background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 400; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px }
button.link-btn:hover, button.link-btn:active { background: transparent; color: var(--body); text-decoration-color: var(--muted) }
@media (max-width: 560px) {
  .acct-card { padding: var(--s-base) var(--s-base) var(--s-xxs) }
  .acct-line:has(button, .btn) { flex-wrap: wrap; row-gap: var(--s-xs) }
  .acct-line-end:has(button, .btn) { width: 100%; max-width: none; padding-left: 30px }
}

/* ------------------------------------------------------------------ account dialog */
/* Account stays above the current workspace. Native modal behavior traps focus and makes the page inert. */
body.account-modal-open { overflow: hidden }
dialog.account-dialog { position: fixed; inset: 0; margin: auto; width: min(760px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--hairline-strong); border-radius: var(--r-xl); background: var(--surface-card); color: var(--body); overflow: hidden }
dialog.account-dialog::backdrop { background: rgb(38 37 30 / .42) }
dialog.account-dialog[open] { display: flex }
.account-dialog-inner { display: flex; flex-direction: column; width: 100%; min-width: 0; max-height: inherit }
.account-dialog-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 18px 24px; border-bottom: 1px solid var(--hairline) }
.account-dialog-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--canvas); color: var(--ink); flex: none }
.account-dialog-head h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -.3px }
.account-dialog-head p { margin: 2px 0 0; font-size: 12px; color: var(--body) }
.account-dialog-head .info-close { margin-left: auto; width: 40px; height: 40px; flex: none }
.account-dialog-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); height: 400px; min-height: 0; flex: 1 1 auto }
.account-sections { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 18px 12px; background: var(--canvas); border-right: 1px solid var(--hairline) }
.account-sections button, .account-sections a { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 40px; height: auto; padding: 10px 12px; background: transparent; border: 0; border-radius: var(--r-md); color: var(--body); font-size: 13px; font-weight: 400; text-decoration: none }
.account-sections button:hover, .account-sections button:active, .account-sections a:hover { background: var(--hairline-soft); color: var(--ink) }
.account-sections button[aria-current="page"] { background: var(--surface-strong); color: var(--ink); font-weight: 500 }
.account-sections svg { width: 16px; height: 16px }
.account-sections .account-signout { margin-top: auto; color: var(--error) }
.account-content { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 28px }
.account-content h3 { font-size: 18px; font-weight: 500; margin: 0 }
.account-panel-lede { margin: 4px 0 20px; font-size: 12px; color: var(--body) }
.account-loading { margin: 0; font-size: 14px }
/* AI apps is a page of its own; the dialog's section list links to it. */
.account-sections .account-page-link .account-page-arrow { margin-left: auto; color: var(--muted-soft) }
.account-profile-form label { margin: 0 0 7px; font-size: 12px; font-weight: 400 }
.account-profile-form input { width: 100%; height: 40px; font-size: 14px }
.account-content .acct-card { padding: 0; margin: 0; border: 0; border-radius: 0; overflow: visible }
.account-content .acct-card-head { border-bottom: 0; flex-wrap: wrap; gap: 12px }
.account-content .acct-card-head h2 { font-size: 18px }
#account-panel-profile .acct-card-head, #account-panel-privacy .acct-card-head { display: none }
.account-content .acct-line { margin: 0; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; gap: 12px }
.account-content .acct-line:last-child { border-bottom: 0 }
.account-content .acct-line-label { font-size: 13px; font-weight: 500 }
.account-content .acct-line-label svg { display: none }
.account-content .acct-line-sub { padding-left: 0; font-size: 12px }
.account-content .acct-line-main { flex-basis: 160px }
.account-content .acct-line-end { max-width: 100%; flex-wrap: wrap; padding-left: 0; font-size: 13px; gap: 6px }
.account-content .acct-addr { white-space: normal; overflow-wrap: anywhere; font-size: 13px }
.account-content .acct-plan-end { flex-wrap: wrap; margin-left: 0 }
.account-content .acct-plan-card .acct-card-head { justify-content: space-between }
.account-content .acct-exports { max-width: none }
.account-content .acct-exports li { flex-wrap: wrap; gap: 6px }
.account-theme-options { padding: 0; gap: 10px; background: transparent; margin: 0 0 18px }
.account-theme-options button { height: 72px; border: 1px solid var(--hairline); border-radius: var(--r-md); font-size: 13px }
.account-theme-options button[aria-pressed="true"] { border-color: var(--muted) }
.account-dialog-foot { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; min-height: 64px; padding: 14px 24px; border-top: 1px solid var(--hairline); flex: none }
.account-dialog-foot > div { display: flex; gap: 8px; margin-left: auto }
.account-dialog #name-status { position: static; flex: 1 1 120px; white-space: normal; font-size: 12px }
.account-dialog-foot button { min-height: 34px }
@media (max-width: 600px) {
  dialog.account-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 32px) }
  .account-dialog-head { padding: 14px 16px }
  .account-dialog-symbol { display: none }
  .account-dialog-body { display: flex; flex-direction: column; height: 520px }
  .account-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; border-right: 0; border-bottom: 1px solid var(--hairline); flex: none }
  .account-sections button { font-size: 12px; gap: 8px; padding: 10px; min-height: 40px }
  .account-sections .account-signout { display: none }
  .account-content { flex: 1; padding: 20px 16px }
  .account-profile-form input { font-size: 16px }
  .account-dialog-foot { padding: 12px 16px }
  .account-content .acct-line-end:has(button, .btn) { width: auto }
}
@media (pointer: coarse) {
  button.account-toggle, .account-menu > button, .account-menu > a, .theme-options button, .account-sections button, .account-dialog button.small, .account-dialog .btn.small, .account-dialog .info-close { min-height: 44px }
  button.account-toggle { width: 44px }
}

/* ------------------------------------------------------------------ pricing */
/* Two plan cards and a comparison table. Pro is set apart by an orange hairline, not a shadow or a fill; its CTA is the
   page's one orange button. */
.pricing-head { text-align: center; max-width: 720px; margin: var(--s-xl) auto var(--s-xxl) }
.pricing-head h1 { font-size: 44px; letter-spacing: -1.1px; line-height: 1.12 }
.pricing-head .page-lede { margin: var(--s-base) auto var(--s-lg) }
.billing-toggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--surface-card) }
.billing-toggle button { height: 34px; padding: 6px 16px; border-radius: var(--r-pill); background: transparent; color: var(--muted); border: 0 }
.billing-toggle button:hover { background: var(--hairline-soft); color: var(--ink) }
.billing-toggle button[aria-pressed="true"], .billing-toggle button[aria-pressed="true"]:hover { background: var(--ink); color: var(--canvas) }
.billing-save { font-size: 11px; font-weight: 600; letter-spacing: .2px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--success-tint); color: var(--success) }
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-base); max-width: 880px; margin: 0 auto }
.price-card { display: flex; flex-direction: column; margin-bottom: 0; padding: var(--s-xl) }
.price-card.featured { border-color: var(--primary) }
.price-card > .row:first-child { margin-bottom: 0 }
.price-name { margin: 0; font-size: 22px; letter-spacing: -0.11px; line-height: 1.3 }
.price-blurb { margin: var(--s-xxs) 0 var(--s-lg); color: var(--muted); font-size: 14px }
.price { min-height: 96px }
.price-amount { font-size: 48px; font-weight: 400; line-height: 1; letter-spacing: -1.6px; color: var(--ink); font-variant-numeric: tabular-nums }
.price-unit { margin-left: var(--s-xxs); color: var(--muted); font-size: 15px }
.price-note { margin: var(--s-xs) 0 0; color: var(--muted); font-size: 13px }
.price-cta { margin: var(--s-base) 0 var(--s-lg) }
.price-cta .btn, .price-cta button { width: 100% }
.price-list-head { margin: 0 0 var(--s-xs); color: var(--ink); font-size: 13px; font-weight: 600 }
.price-list { list-style: none; padding: 0; margin: 0; font-size: 14px }
.price-list li { display: flex; gap: var(--s-xs); align-items: flex-start }
.price-list li + li { margin-top: var(--s-xs) }
.price-check { flex: none; width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.price-fine { text-align: center; max-width: 880px; margin: var(--s-base) auto 0 }
.pricing > h2 { text-align: center; margin-top: var(--s-section) }
.pricing > .card { max-width: 880px; margin-left: auto; margin-right: auto }
.price-compare th + th, .price-compare td + td { text-align: center; width: 22% }
.price-compare td .price-check { margin: 0; vertical-align: middle }
@media (max-width: 768px) {
  .pricing-head { margin-top: var(--s-base); margin-bottom: var(--s-xl) }
  .pricing-head h1 { font-size: 32px; letter-spacing: -0.64px }
  .price-grid { grid-template-columns: minmax(0, 1fr) }
  .price-card { padding: var(--s-lg) }
  .pricing > h2 { margin-top: var(--s-xxl) }
}

/* ------------------------------------------------------------------ skeletons (skeleton.js)
   Shapes standing in for content that is loading: bars on the strong surface tone with a lighter band (--sk-shine, set
   per theme) moving across; with reduced motion the bars stay still. Bars and rows take the height of the text they
   replace, so the content arriving moves little. */
.skeleton { display: flex; flex-direction: column; gap: var(--s-sm) }
.skeleton.sk-inline { display: block; gap: 0 }
.sk {
  display: block; height: 12px; max-width: 100%; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-strong) 30%, var(--sk-shine) 50%, var(--surface-strong) 70%);
  background-size: 300% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
}
@keyframes sk-shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
/* A figure on its line (a KPI value, the period's move, an eyebrow): the line keeps its own height. */
.sk-inline > .sk { display: inline-block; height: 0.8em; vertical-align: middle }
.sk.sk-title { height: 16px; margin-bottom: var(--s-xxs) }
.sk.sk-label { height: 11px }
.sk.sk-value { height: 28px; margin-top: var(--s-xs) }
.sk.sk-sub { margin-top: auto }
.skeleton:has(> .sk-sub) { flex: 1 1 auto; gap: var(--s-xs) }
.sk.sk-chart { height: 220px; width: 100%; border-radius: var(--r-md); margin-top: var(--s-sm) }
/* In the Intraday card the chart block fills the sparkline's own height. */
.kpi-spark > .skeleton { flex: 1 1 0 }
.kpi-spark .sk.sk-chart { flex: 1 1 0; height: auto; min-height: 200px; margin-top: var(--s-xs) }
/* Table rows at a table row's height (14px text, 10px padding, a hairline), first cell wide, the rest right-aligned. */
/* The concentration card's table while it loads: bars on the figures' lines, the HHI's at its tag's height. */
table.conc-sk .sk { display: inline-block; vertical-align: middle }
table.conc-sk .sk.sk-pill { height: 21.4px; border-radius: var(--r-pill) }
.sk-table { gap: 0 }
.sk-row { display: flex; gap: var(--s-sm); padding: 14px 0; border-bottom: 1px solid var(--hairline-soft) }
.sk-row:last-child { border-bottom: 0 }
.sk-cell { flex: 1 1 0; display: flex; justify-content: flex-end; min-width: 0 }
.sk-cell:first-child { flex-grow: 2; justify-content: flex-start }
.sk-title + .sk-row { margin-top: var(--s-xxs) }
.skeleton:has(> .sk-row) { gap: 0 }
.skeleton:has(> .sk-row) > .sk-title { margin-bottom: var(--s-sm) }
.sk-boot { margin-top: var(--s-xl) }
.sec-pane-body > .skeleton { padding-top: var(--s-base) }
/* The portfolios list's plan line ("Pro plan · 1 of 10 portfolios"), at about its width so the heading row wraps as it will. */
.eyebrow > .skeleton { width: 220px; max-width: 100% }
/* Portfolio Pulse while its first page loads: Key highlights rows (rank, headline, meta) and update cards (meta,
   headline, two summary lines), each at its loaded row's padding and dividers. */
.sk-highlights, .sk-feed { gap: 0 }
.sk-hl { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--hairline) }
.sk.sk-rank { width: 26px; height: 26px; border-radius: 6px }
.sk-hl-text { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.sk.sk-hl-title { height: 15px }
.sk-feed-item { display: flex; flex-direction: column; gap: 8px; padding: var(--s-base) var(--s-lg) }
.sk-feed-item + .sk-feed-item { border-top: 1px solid var(--hairline-soft) }
.sk.sk-meta { height: 11px }
.sk.sk-feed-title { height: 18px; margin-bottom: 2px }
@media (max-width: 639px) { .sk-feed-item { padding-inline: var(--s-sm) } }
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; background: var(--surface-strong) }
}

/* The Intraday table's 52-week range: the details pane's bar, with its two ends beneath. */
.kpi-table td.range-cell { min-width: 120px }
.kpi-table td.range-cell .sec-range-bar { margin: 6px 6px 4px }
.range-ends { display: flex; justify-content: space-between; gap: var(--s-xs); white-space: nowrap }
/* The column picker: one row per column, its checkbox and its arrows. */

/* ------------------------------------------------------------------ Performance tab */
.perf-summary, .perf-return, .perf-table { min-width: 0; overflow: visible }
.perf-metrics-select { margin-left: auto; width: auto; min-width: 96px; height: 34px; padding: 5px 32px 5px 10px; font-size: 13px; background-position: calc(100% - 18px) 14px, calc(100% - 13px) 14px }
.perf-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline-soft) }
.perf-metric { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--hairline-soft); display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.perf-metric:nth-child(3n + 2), .perf-metric:nth-child(3n + 3) { padding-left: 16px; border-left: 1px solid var(--hairline-soft) }
.perf-metric:nth-child(3n) { padding-right: 0 }
.perf-metric:nth-last-child(-n + 3) { border-bottom: 0; padding-bottom: 0 }
.perf-metric .label { font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .88px; text-transform: uppercase; color: var(--muted) }
.perf-metric .value { margin: 2px 0; font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums }
.perf-metric .value.gain { color: var(--success) }
.perf-metric .value.loss { color: var(--error) }
.perf-metric .sub { min-height: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums }
.perf-period-dates { font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums }
.perf-summary .perf-period-dates { margin-top: 14px }
.perf-return-controls { display: flex; gap: 8px; align-items: flex-start; margin-left: auto; max-width: 100%; min-width: 0 }
/* Right-aligned by an auto margin, not justify-content: flex-end, which would put overflowing chips out of scroll reach. */
.perf-return-controls .chart-ranges { margin: 3px 0 0; gap: 4px }
.perf-return-controls .chart-ranges > :first-child { margin-left: auto }
.perf-return-controls .chip { padding: 4px 10px }
/* Spread panel under the Return chart: portfolio less benchmark, gain colour above zero and loss colour below. */
.spread-box { margin-top: 4px; border-top: 1px solid var(--hairline-soft); padding-top: 4px }
svg.chart .spread-area.up { fill: color-mix(in srgb, var(--success) 18%, transparent) }
svg.chart .spread-area.down { fill: color-mix(in srgb, var(--error) 18%, transparent) }
svg.chart .spread-line { stroke-width: 1.5; stroke-linejoin: round }
svg.chart .spread-line.up { stroke: var(--success) }
svg.chart .spread-line.down { stroke: var(--error) }
.chart-tip i.spread-key, .chart-legend i.spread-key { height: 8px; background: linear-gradient(var(--success) 50%, var(--error) 50%) }
.perf-chart-footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 12px }
.perf-chart-footer .chart-legend { margin: 0 }
.perf-chart-footer .perf-period-dates { margin-left: auto }
button.perf-config-button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; padding: 0; border-radius: 8px; color: var(--body) }
button.perf-config-button[aria-expanded="true"] { background: var(--surface-strong); color: var(--ink) }
.perf-config, .perf-date-tip { position: fixed; inset: auto; margin: 0; padding: 8px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-card); color: var(--body); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); overflow-y: auto }
.perf-config::backdrop, .perf-date-tip::backdrop { background: transparent }
.perf-config-heading { padding: 8px 8px 10px; font-size: 13px; font-weight: 500; color: var(--ink) }
.perf-config-tabs { display: flex; gap: 16px; margin: 0 8px 8px; border-bottom: 1px solid var(--hairline) }
.perf-config-tabs button { padding: 9px 0; background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-size: 13px; font-weight: 400 }
.perf-config-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink) }
.perf-period-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.perf-option { display: flex; align-items: center; gap: 10px; padding: 8px; min-height: 36px; margin: 0; border-radius: 5px; font-size: 13px; font-weight: 400; color: var(--body); cursor: pointer }
.perf-option:hover { background: var(--canvas) }
.perf-option input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: var(--ink) }
.perf-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px }
.perf-comparison { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px }
.perf-comparison th, .perf-comparison td { padding: 14px 8px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle }
.perf-comparison th { text-transform: none; letter-spacing: normal }
.perf-comparison tbody th { font-size: 13px }
.perf-comparison .perf-period-col { width: 184px }
.perf-comparison thead th { font-size: 12px; font-weight: 400; color: var(--body) }
.perf-comparison thead .perf-stat-group { padding: 4px 8px 10px; color: var(--ink); font-weight: 500; text-align: center; border-bottom: 0 }
.perf-comparison thead tr:last-child th { padding: 4px 8px 12px }
.perf-comparison .perf-group-start { border-left: 1px solid var(--hairline-soft) }
.perf-comparison .perf-period-cell { position: sticky; left: 0; z-index: 1; background: var(--surface-card); text-align: left; font-weight: 400; color: var(--body); padding-left: 0; border-right: 1px solid var(--hairline) }
.perf-comparison tbody .perf-period-cell { padding: 0 }
button.perf-period-label { display: block; width: 100%; padding: 14px 8px 14px 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left }
.perf-comparison td { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.perf-comparison .perf-benchmark { color: var(--muted); font-weight: 400 }
.perf-comparison [data-period="Full"] > * { border-top: 1px solid var(--hairline) }
.perf-comparison tbody tr:last-child > * { border-bottom: 0 }
.perf-date-tip { padding: 8px 12px; font-size: 12px; pointer-events: none }
.perf-coverage-marker { color: var(--warning); margin-left: 4px; font-size: 11px }
button.perf-coverage-button { padding: 3px 6px; margin-left: 1px; border: 0; background: transparent; color: var(--warning); font-size: 13px; line-height: 1; vertical-align: super; cursor: help }
.perf-coverage-explanation { display: block; margin-top: 6px }
@media (max-width: 720px) {
  .perf-comparison .perf-period-col { width: 152px }
  .perf-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .perf-metric:nth-child(n) { padding: 16px 16px 16px 0; border-left: 0; border-bottom: 1px solid var(--hairline-soft) }
  .perf-metric:nth-child(2n) { padding-left: 16px; padding-right: 0; border-left: 1px solid var(--hairline-soft) }
  .perf-metric:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 0 }
  .perf-return-controls { flex-wrap: nowrap }
}

/* ------------------------------------------------------------------ Risk tab */
.risk-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hairline-soft) }
.risk-metric { padding: var(--s-base) var(--s-base) var(--s-base) 0; border-bottom: 1px solid var(--hairline-soft); display: flex; flex-direction: column; gap: var(--s-xxs); min-width: 0 }
.risk-metric:nth-child(4n + 2), .risk-metric:nth-child(4n + 3), .risk-metric:nth-child(4n + 4) { padding-left: var(--s-base); border-left: 1px solid var(--hairline-soft) }
.risk-metric:nth-last-child(-n + 4) { border-bottom: 0; padding-bottom: 0 }
.risk-metric .label { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.risk-metric .value { font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums }
.risk-metric .value.loss { color: var(--error) }
.risk-metric .sub { font-size: 13px; color: var(--muted); min-height: 18px; font-variant-numeric: tabular-nums }
@media (max-width: 720px) {
  .risk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .risk-metric:nth-child(n) { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--hairline-soft); padding-bottom: var(--s-base) }
  .risk-metric:nth-child(2n) { padding-left: var(--s-base); border-left: 1px solid var(--hairline-soft) }
  .risk-metric:nth-last-child(-n + 2) { border-bottom: 0; padding-bottom: 0 }
}
/* The Risk tab's summary: a three-bar risk meter, then three columns of a headline over figures, bars and tags. */
.risk-meter { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 3px; color: var(--ink) }
.risk-meter i { width: 6px; border-radius: 2px; background: var(--surface-strong) }
.risk-meter i:nth-child(1) { height: 8px } .risk-meter i:nth-child(2) { height: 12px } .risk-meter i:nth-child(3) { height: 16px }
.risk-meter.low i.on { background: var(--success) }
.risk-meter.medium i.on { background: var(--warning) }
.risk-meter.high i.on { background: var(--error) }
.risk-meter b { margin-left: var(--s-xs); font-size: 15px; font-weight: 600; line-height: 16px }
/* The summary's "Explain": asks Ask Invix for a plain-English digest of the card. */
.risk-summary .card-head button.risk-explain { flex: none; margin: 0 0 0 var(--s-base); gap: 6px }
.risk-explain svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none }
.sum-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hairline-soft) }
.sum-cols section { padding: var(--s-base) var(--s-lg) 0; border-left: 1px solid var(--hairline-soft); min-width: 0; display: flex; flex-direction: column; gap: var(--s-sm) }
.sum-cols section:first-child { padding-left: 0; border-left: 0 }
.sum-cols section:last-child { padding-right: 0 }
.sum-cols .label { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.88px; text-transform: uppercase; color: var(--muted) }
.sum-cols h4 { margin: -6px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink) }
.sum-stats { margin: 0; display: flex; flex-direction: column }
.sum-stats > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-sm); padding: 6px 0; border-top: 1px solid var(--hairline-soft) }
.sum-stats dt { font-size: 13px; color: var(--muted) }
.sum-stats dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.sum-stats dd.loss { color: var(--error) }
.sum-stats dd.gain { color: var(--success) }
.sum-split { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-xs) var(--s-sm); font-size: 12px; color: var(--muted) }
.sum-bar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden }
.sum-bar i { flex: none; min-width: 0 }
.sum-bar i.rest { flex: 1; background: var(--surface-strong) }
.sum-key { display: flex; flex-wrap: wrap; gap: var(--s-xxs) var(--s-sm); font-size: 12px; color: var(--body) }
.sum-key span { display: inline-flex; align-items: center; gap: 5px }
.sum-key i { width: 8px; height: 8px; border-radius: 2px }
.sum-key i.rest { background: var(--surface-strong) }
.sum-callout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-xxs) var(--s-sm); padding: var(--s-xs) var(--s-sm); border-radius: var(--r-sm); background: var(--warning-tint); font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums }
.sum-callout b { color: var(--ink); font-weight: 600 }
.sum-callout .nums { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap }
.sum-callout .arrow { color: var(--warning) }
.sum-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.sum-tags-label { font-size: 12px; color: var(--muted); margin-right: 2px }
.sum-tag { padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 18px; color: var(--ink); background: var(--canvas); border: 1px solid var(--hairline) }
.sum-tag.together { background: color-mix(in srgb, var(--corr-pos) 14%, transparent); border-color: color-mix(in srgb, var(--corr-pos) 40%, transparent) }
.sum-tag.cushion { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 40%, transparent) }
.sum-tag.none { font-weight: 500; color: var(--muted) }
/* Move together and the correlation finder: two cards side by side, as tall as each other; stacked on narrow screens. */
.mt-group { display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-base); border: 1px solid var(--hairline); border-radius: var(--r-md); min-width: 0 }
.mt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-xs); font-size: 13px }
.mt-weight { font-size: 26px; line-height: 1.1; letter-spacing: -0.5px; color: var(--ink); font-variant-numeric: tabular-nums }
.mt-group .sum-tag { font-weight: 400 }
.mt-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--body) }
.mt-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0 }
.sum-tag .mt-key { margin-right: 5px }
.mt-pairs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px }
.mt-pairs span { padding: 2px 8px; border-radius: var(--r-xs); font-size: 12px; line-height: 18px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums }
.mt-pairs b { font-weight: 600; margin-left: 2px }
button.more { height: auto; padding: 2px 6px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer }
button.more:hover { color: var(--primary) }
/* "+n more" turns the Move together card over to its matrix. Whichever face is up sets the card's height. */
.flip-card { perspective: 1600px; min-width: 0 }
.flip-inner { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform 0.5s ease }
.flip-card.flipped .flip-inner { transform: rotateY(180deg) }
.flip-card .face { grid-area: 1 / 1; margin: 0; min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden }
.flip-card .face.back { position: absolute; inset: 0; overflow: hidden; transform: rotateY(180deg) }
.flip-card.flipped .face.back { position: relative; inset: auto }
.flip-card.flipped .face:not(.back) { position: absolute; inset: 0; overflow: hidden }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none } }
.mt-back { margin-left: auto }
/* The back: the groups' matrix in compact cells (a 32px row pitch: 30px cells, 2px spacing) and each holding's weight
   on a row of the same pitch beside it; pairs across two groups dimmed. */
.mt-back-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-lg) }
.mt-back-body > .table-scroll { flex: none; max-width: 100% }
.mt-back-body table.corr-grid { font-size: 11px }
.mt-back-body table.corr-grid thead th { height: 26px; min-width: 34px; font-size: 11px; letter-spacing: 0 }
.mt-back-body table.corr-grid td { width: 34px; height: 30px }
.mt-back-body table.corr-grid tbody th { font-size: 11px; padding-right: 6px }
.mt-back-body table.corr-grid td.cross { opacity: 0.35 }
.mt-back-list { flex: 1; min-width: 150px; display: flex; flex-direction: column; padding-top: 42px; font-size: 13px; font-variant-numeric: tabular-nums }
.mt-back-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 48px; align-items: center; gap: var(--s-xs); height: 32px; border-top: 1px solid var(--hairline-soft) }
.mt-back-row:first-child { border-top: 0 }
.mt-back-row b { color: var(--ink); font-weight: 600 }
.mt-back-row > span:last-child { text-align: right; color: var(--ink) }
.mt-back-bar { height: 8px; border-radius: 4px; background: var(--hairline-soft); overflow: hidden }
.mt-back-bar i { display: block; height: 100%; border-radius: 4px }
.mt-back-row.total { border-top: 1px solid var(--hairline); font-weight: 600 }
/* The finder: a ticker box with the security's name beside it, then the holdings it moves most and least with. */
.tk-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-sm); margin-bottom: var(--s-xs) }
#tk-input { width: 140px; height: 36px; font: inherit; font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--ink); background: var(--surface-card); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 0 10px }
#tk-input::placeholder { text-transform: none; font-weight: 400 }
#tk-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tk-hint { margin: 0; padding: var(--s-xs) 0; font-size: 14px; color: var(--muted) }
.tk-list { display: flex; flex-direction: column }
.tk-label { font-size: 11px; color: var(--muted); padding: var(--s-xs) 8px 4px }
.tk-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s-sm); padding: 6px 8px; border-top: 1px solid var(--hairline-soft); font-size: 13px; font-variant-numeric: tabular-nums }
.tk-label + .tk-row { border-top: 0 }
.tk-row.close { background: color-mix(in srgb, var(--corr-pos) 12%, transparent); border-radius: var(--r-xs); border-top-color: transparent }
.tk-row.close + .tk-row { border-top-color: transparent }
.tk-sym { display: flex; align-items: baseline; gap: var(--s-xs) }
.tk-sym b { color: var(--ink); font-weight: 600 }
.tk-sym span { color: var(--muted) }
.tk-corr { display: flex; align-items: center; gap: var(--s-xs) }
.cb { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--hairline-soft) }
.cb::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--hairline-strong) }
.cb i { position: absolute; top: 0; bottom: 0; border-radius: 4px }
.cb-v { width: 40px; text-align: right; font-weight: 600; color: var(--ink) }
@media (max-width: 720px) {
  .mt-back-body { gap: var(--s-sm) }
  .mt-back-list { padding-top: 0 }
  .mt-back-body table.corr-grid tbody th { padding-right: 4px }
}
@media (max-width: 720px) {
  .sum-cols { grid-template-columns: 1fr }
  .sum-cols section { padding: var(--s-base) 0; border-left: 0; border-top: 1px solid var(--hairline-soft) }
  .sum-cols section:first-child { border-top: 0 }
  .sum-cols section:last-child { padding-bottom: 0 }
}
.card-head .chart-ranges { margin-left: auto }
/* Periodic returns: Return | vs benchmark as underlined tabs under the title (the import card's, smaller). */
.basis-tabs { display: flex; gap: var(--s-lg); margin: 0 0 var(--s-base); border-bottom: 1px solid var(--hairline) }
.basis-tab { position: relative; margin: 0; cursor: pointer }
.basis-tab input { position: absolute; opacity: 0; pointer-events: none }
.basis-tab span { display: inline-block; padding: 2px 2px 8px; font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease }
.basis-tab:hover span { color: var(--ink) }
.basis-tab input:checked + span { color: var(--ink); border-bottom-color: var(--primary) }
.basis-tab input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-xs) }
.card-head .chart-ranges button.chip { height: 28px }
.risk-offsets { display: flex; flex-wrap: wrap; gap: var(--s-xxs) var(--s-base); align-items: baseline; font-size: 13px; color: var(--muted); margin-top: var(--s-sm); font-variant-numeric: tabular-nums }
.risk-offsets b { color: var(--ink); font-weight: 600 }
.risk-offsets .label { font-size: 11px; font-weight: 600; letter-spacing: 0.88px; text-transform: uppercase }
.period-stats { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-xl); margin-top: var(--s-base); border-top: 1px solid var(--hairline-soft); padding-top: var(--s-sm) }
.period-stats table { font-size: 13px }
.period-stats th, .period-stats td { padding: 7px 12px }
.period-stats tbody th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--muted); vertical-align: middle }
.period-stats tbody tr:last-child th, .period-stats tbody tr:last-child td { border-bottom: 0 }
.period-stats td { color: var(--ink) }
.period-stats .key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0 }
.period-stats .key.up { background: var(--success) }
.period-stats .key.down { background: var(--error) }
.period-stats .key.bench { background: var(--chart-estimate-bench) }
@media (max-width: 720px) { .period-stats { grid-template-columns: 1fr; gap: var(--s-sm) } }
table.corr-grid { width: auto; border-collapse: separate; border-spacing: 2px; font-size: 12px }
table.corr-grid th, table.corr-grid td { border: 0; padding: 0; text-align: center; vertical-align: middle }
table.corr-grid thead th { height: 28px; min-width: 48px; letter-spacing: 0.4px; text-transform: none; font-size: 12px; color: var(--muted) }
table.corr-grid tbody th { text-align: right; padding-right: var(--s-xs); color: var(--muted); font-weight: 600; white-space: nowrap }
table.corr-grid td { width: 48px; height: 36px; border-radius: var(--r-xs); color: var(--ink); font-variant-numeric: tabular-nums }
table.corr-grid td.diag { background: var(--hairline-soft) }
table.corr-grid td.high { font-weight: 700 }
table.corr-grid td { cursor: default; transition: opacity 0.15s }

/* Look-through: summary on the left and holdings flow on the right, followed by a full-width exposure chart. */
.lt-top-grid { display: grid; gap: 0 var(--s-base) }
@media (min-width: 960px) { .lt-top-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) } }
.lt-top-card { min-width: 0 }
.lt-summary-card:only-child { grid-column: 1 / -1 }
.lt-summary-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-base); margin: var(--s-sm) 0 var(--s-lg) }
.lt-summary-stats > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; min-width: 0 }
.lt-summary-stats dt { font-size: 12px; color: var(--body) }
.lt-summary-stats dd { margin: var(--s-xxs) 0; color: var(--ink); font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.325px; font-variant-numeric: tabular-nums }
.lt-summary-stats span { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
.lt-summary-leaders { border-top: 1px solid var(--hairline-soft); padding-top: var(--s-base) }
.lt-summary-leaders h4 { margin: 0 0 var(--s-xs); font-size: 13px; font-weight: 500; color: var(--ink) }
.lt-summary-leaders p { font-size: 13px }
.lt-summary-securities { list-style: none; margin: 0; padding: 0 }
.lt-summary-securities li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s-sm); align-items: center; padding: var(--s-xs) 0; font-size: 13px; font-variant-numeric: tabular-nums }
.lt-summary-rank { color: var(--muted); font-size: 12px }
.lt-summary-securities li > div { min-width: 0 }
.lt-summary-securities b, .lt-summary-securities strong { font-weight: 500 }
.lt-summary-securities b { overflow-wrap: anywhere }
.lt-summary-securities li > div > span { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lt-summary-bets { display: grid; gap: var(--s-base); margin: var(--s-base) 0 0; padding-top: var(--s-base); border-top: 1px solid var(--hairline-soft) }
.lt-summary-bets dt { margin-bottom: var(--s-xxs); font-size: 12px; color: var(--muted) }
.lt-summary-bets dd { display: flex; justify-content: space-between; gap: var(--s-sm); margin: 0; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums }
.lt-summary-bets dd > span { min-width: 0; overflow-wrap: anywhere }
.lt-summary-bets strong { flex: none; font-weight: 500 }
.lt-summary-note { margin: var(--s-base) 0 0; font-size: 12px; color: var(--muted) }
/* The flow: sources and their bars, the bands (an SVG stretched over the middle column), then each security's ticker with
   its weight under it and each band's end beside them. Both toggle views share one reserved height, and the flow fills
   the card when it stretches to match the summary beside it. Hovering one part dims unrelated bands. */
.lt-flow-card { display: flex; flex-direction: column; padding: var(--s-base); padding-top: var(--s-lg) }
.lt-flow-wrap { flex: 1; display: flex; flex-direction: column }
.lt-flow { flex: 1; position: relative; display: grid; grid-template-columns: 60px minmax(48px, 1fr) 80px; grid-template-rows: 100%; font-size: 12px; font-variant-numeric: tabular-nums }
.lt-col { position: relative }
.lt-node { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; cursor: default }
/* Both sides label alike: the ticker over its weight, centred on its source or row. */
.lt-node-label { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; line-height: 14px }
.lt-node-label b, .lt-row b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--body) }
.lt-node-label span, .lt-row-weight { font-weight: 600; color: var(--ink) }
.lt-node-bar { flex: none; align-self: flex-start; width: 6px; border-radius: 2px }
.lt-bands { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible }
.lt-bands path { fill-opacity: 0.28 }
.lt-end { position: absolute; left: 0; width: 3px }
.lt-row { position: absolute; left: 6px; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 0 0 2px; border-bottom: 1px solid var(--hairline-soft); line-height: 14px; white-space: nowrap; cursor: default }
.lt-row:last-child { border-bottom: 0 }
.lt-flow path, .lt-node, .lt-row, .lt-end { transition: opacity 0.12s, fill-opacity 0.12s }
.lt-flow.focus .lt-node:not(.on), .lt-flow.focus .lt-row:not(.on), .lt-flow.focus .lt-end:not(.on) { opacity: 0.3 }
.lt-flow.focus path { fill-opacity: 0.05 }
.lt-flow.focus path.on { fill-opacity: 0.6 }
.lt-flow-legend { flex: 0 0 72px; height: 72px; margin-top: var(--s-xs); padding-top: 6px; border-top: 1px solid var(--hairline-soft); overflow: auto; font-size: 11px; line-height: 16px; color: var(--muted) }
.lt-legend-head { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; white-space: nowrap }
.lt-legend-head b { flex: none; color: var(--ink); font-size: 12px; font-weight: 600 }
.lt-legend-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.lt-legend-head .lt-legend-total { margin-left: auto; font-variant-numeric: tabular-nums }
.lt-tags { display: flex; flex-wrap: wrap; gap: 4px }
/* A source's share, tinted with its colour. */
.lt-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tag) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tag) 40%, transparent); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap }
.lt-tag b { font-weight: 600 }
/* The effective exposure table: a column per source, keyed by the top holdings card's colours, and column totals. */
.lt-table td { color: var(--ink); font-variant-numeric: tabular-nums }
.lt-table td .muted, .lt-table td.muted { color: var(--muted) }
.lt-table .lt-total { font-weight: 600 }
.lt-table .lt-sum td { background: var(--canvas-soft); font-weight: 600 }
.lt-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px }
/* Headers let the toggle wrap on narrow screens. */
.card.lt-top-card > .row.lt-card-head { min-height: 30px; margin: 0 0 var(--s-sm); flex-wrap: wrap; gap: var(--s-xs) var(--s-sm) }
.card.lt-flow-card > .row.lt-card-head { margin-bottom: var(--s-xs); gap: var(--s-xxs) var(--s-xs) }
.lt-flow-card .lt-views button.chip { height: 26px; padding: 3px 8px; font-size: 12px }
.lt-card-head h3 { margin: 0 }
.lt-views { gap: var(--s-xxs) }
.lt-card-head .lt-views { margin-left: auto }
.lt-exposure-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-md) }
.lt-exposure-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-xs) var(--s-base); font-size: 12px; color: var(--body) }
.lt-exposure-legend > span { display: inline-flex; align-items: center; gap: 6px }
/* Brand orange for the portfolio and overweights, the Risk tab's blue for underweights, ink for the benchmark tick. */
.lt-portfolio-swatch, .lt-relative-swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--primary) }
.lt-relative-swatch.lt-under { background: var(--slice-1) }
.lt-benchmark-swatch { width: 3px; height: 12px; border-radius: 1px; background: var(--ink) }
label.lt-weight-mode { display: inline-flex; flex: none; align-items: center; gap: 9px; margin: 0 0 0 auto; min-height: 32px; font-size: 12px; color: var(--muted); cursor: pointer }
.lt-weight-mode[data-mode="absolute"] .lt-absolute-label, .lt-weight-mode[data-mode="relative"] .lt-relative-label { color: var(--ink); font-weight: 500 }
input.lt-weight-switch { appearance: none; position: relative; flex: none; width: 38px !important; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-pill); background: var(--surface-strong); cursor: pointer; transition: background 160ms ease }
input.lt-weight-switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
input.lt-weight-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform 160ms ease, background 160ms ease }
input.lt-weight-switch:checked { background: var(--ink) }
input.lt-weight-switch:checked::after { transform: translateX(16px); background: var(--surface-card) }
.lt-weight-mode:has(input:disabled) { opacity: 0.5; cursor: default }
input.lt-weight-switch:disabled { cursor: default }
.lt-chart-heading { display: flex; justify-content: space-between; gap: var(--s-xs); margin-bottom: var(--s-xs); font-size: 12px; color: var(--muted) }
.lt-chart-heading b { color: var(--body); font-weight: 500 }
.lt-exposure-chart { display: block; width: 100%; overflow: visible; font-variant-numeric: tabular-nums }
.lt-exposure-chart text { font-family: inherit; font-size: 12px }
.lt-exposure-chart .lt-chart-value { fill: var(--ink); font-weight: 500 }
.lt-exposure-chart .lt-chart-category { fill: var(--body) }
.lt-chart-zero { stroke: var(--hairline-strong); stroke-width: 1 }
.lt-chart-track { fill: var(--hairline-soft) }
.lt-portfolio-bar, .lt-relative-bar { fill: var(--primary) }
.lt-relative-bar.lt-under { fill: var(--slice-1) }
.lt-benchmark-marker { stroke: var(--ink); stroke-width: 2; stroke-linecap: round }
.lt-exposure-hit { fill: transparent }
.lt-exposure-group { cursor: pointer; outline: none }
.lt-exposure-group:hover .lt-exposure-hit, .lt-exposure-group[aria-pressed="true"] .lt-exposure-hit { fill: var(--canvas-soft) }
.lt-exposure-group:focus-visible .lt-exposure-hit { fill: var(--canvas-soft); stroke: var(--ink); stroke-width: 1.5 }
.lt-exposure-group[aria-pressed="true"] .lt-chart-category { fill: var(--ink); font-weight: 500 }
.lt-exposure-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 5px var(--s-sm); margin-top: var(--s-base); padding: var(--s-sm); border-radius: var(--r-sm); background: var(--canvas-soft); color: var(--body); font-size: 12px; font-variant-numeric: tabular-nums }
.lt-exposure-detail b, .lt-exposure-detail strong { color: var(--ink); font-weight: 500 }
.lt-exposure-name { margin-right: auto }
.lt-exposure-scope { margin-top: var(--s-sm); color: var(--muted); font-size: 12px }
@media (max-width: 600px) { .lt-exposure-name { flex-basis: 100% } }
@media (pointer: coarse) { label.lt-weight-mode { min-height: 44px } }
@media (prefers-reduced-motion: reduce) { input.lt-weight-switch, input.lt-weight-switch::after { transition: none } }

/* Portfolio Pulse */

.feed-item { position: relative; isolation: isolate; padding: var(--s-base) var(--s-lg); border-top: 1px solid var(--hairline-soft) }
.feed-item:has(a.feed-story-link:is(:hover, :focus-visible)) { background: var(--hairline-soft) }
.feed-story-link { display: block; color: inherit; text-decoration: none }
a.feed-story-link::before { content: ""; position: absolute; inset: 0 }
.feed-story-link > * { position: relative }
.feed-title { margin: 5px 0 0; font-size: 18px; color: var(--ink); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere }
a.feed-story-link:focus-visible::before { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: var(--r-sm) }
.feed-summary { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere }
.feed-meta { margin-top: 4px; font-size: 13px; color: var(--muted) }
.feed-also { display: inline; font-size: 12px; color: var(--muted) }
.feed-also, .feed-sec, .feed-earlier, .feed-in-highlights { position: relative; z-index: 1 }
button.feed-in-highlights { height: auto; min-height: 24px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: 12px/1.5 var(--font-sans); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer }
button.feed-in-highlights:is(:hover, :focus-visible) { color: var(--ink) }
.feed-earlier { margin-top: 6px; font-size: 12px; color: var(--muted) }
.feed-earlier > summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; list-style: none; text-decoration: underline dotted; text-underline-offset: 3px }
.feed-earlier > summary::-webkit-details-marker { display: none }
.feed-earlier > summary::before { content: "›"; display: inline-block; width: 12px; font-size: 15px; transition: transform .15s }
.feed-earlier[open] > summary::before { transform: rotate(90deg) }
.feed-earlier ul { list-style: none; margin: 4px 0 0 5px; padding: 0 0 0 12px; border-left: 1px solid var(--hairline) }
.feed-earlier-link { display: block; padding: 5px 0; color: var(--body); text-decoration: none; overflow-wrap: anywhere }
.feed-earlier-link small { display: block; color: var(--muted) }
.feed-earlier-link span { font-size: 14px; color: var(--ink) }
a.feed-earlier-link:is(:hover, :focus-visible) span { text-decoration: underline; text-underline-offset: 3px }
.feed-earlier-more { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; line-height: 24px; overflow-wrap: anywhere }
.feed-earlier-more a { color: var(--muted); text-underline-offset: 3px }
.feed-earlier-more a:is(:hover, :focus-visible) { color: var(--ink) }
@media (pointer: coarse) { .feed-earlier > summary, button.feed-in-highlights { min-height: 36px } }
.feed-also summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline dotted }
.feed-also summary::-webkit-details-marker { display: none }
.feed-also[open] span { margin-left: 4px }
.feed-reasons { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.feed-reasons:empty { display: none }
.feed-chip, button.feed-chip { display: inline-flex; align-items: center; height: auto; padding: 2px 9px; border: 0; border-radius: var(--r-pill); background: var(--surface-strong); color: var(--ink); font: 500 12px/1.5 var(--font-sans); max-width: 100%; white-space: normal; overflow-wrap: anywhere }
button.feed-chip:hover, button.feed-chip:active { background: var(--hairline-strong); color: var(--ink) }
.feed-foot { margin: var(--s-sm) 0 0 }
.feed-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto }
.feed-topics { border: 0; margin: var(--s-base) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px }
.feed-topics legend { padding: 0; margin-bottom: var(--s-xs); font-weight: 600; color: var(--ink); font-size: 14px }
.feed-topics[disabled] { opacity: .55 }
.feed-topic { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--body); margin: 0; font-weight: 400 }
.feed-dialog label[for] { margin-top: var(--s-base) }
.feed-post-head { display: flex; align-items: center; gap: var(--s-xs); font-size: 14px; color: var(--body); flex-wrap: wrap }
.feed-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-strong); color: var(--ink); font-size: 12px; font-weight: 600; flex: none }
.feed-post-text { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere }
.feed-post-text, .feed-quote p { white-space: pre-line }
.feed-quote { margin: 8px 0 0; padding: var(--s-xs) var(--s-sm); border: 1px solid var(--hairline); border-radius: var(--r-md); font-size: 13px; color: var(--body) }
.feed-quote p { margin: 4px 0 0; overflow-wrap: anywhere }
.digest-head.page-head { align-items: center; margin-bottom: var(--s-base) }
.digest-head .page-title { min-width: 0; overflow-wrap: anywhere }
.digest-head h1 { margin-bottom: 3px }
.digest-head .feed-gear { display: inline-flex; align-items: center; gap: 6px; flex: none }
.feed-gear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round }
.feed-gear .feed-short-label { display: none }
@media (max-width: 639px) {
  .digest-head .feed-gear > span { display: none }
  .digest-head .feed-gear .feed-short-label { display: inline }
}
.digest-toolbar, .digest-updates > header, .digest-highlights > header, .feed-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-xs) }
.digest-toolbar, .digest-updates > header, .digest-highlights > header { justify-content: space-between; gap: var(--s-xs) var(--s-base) }
.digest-toolbar { margin-bottom: var(--s-base) }
.feed-filters { min-width: 0; flex: 1 1 auto }
button[data-feed-filter] { height: auto; min-height: 30px; padding: 4px 12px; border-radius: var(--r-pill); font-size: 13px; white-space: normal; overflow-wrap: anywhere }
button[data-feed-filter][aria-pressed="true"] { color: var(--canvas); background: var(--ink); border-color: var(--ink) }
.digest-highlights.card { margin: 0 0 var(--s-lg); padding: var(--s-base) var(--s-lg) 0 }
.digest-highlights h2, .digest-updates h2 { margin: 0; font-size: 21px; font-weight: 600 }
.digest-highlights > header { padding-bottom: var(--s-sm) }
.digest-tag { padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-strong); color: var(--muted); font: 500 11px/20px var(--font-sans); cursor: default }
.digest-tickers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-xs) }
.digest-highlights ol { list-style: none; padding: 0; margin: 0 }
/* "In Key highlights" scrolls a row to the top: clear the sticky top bar. */
.digest-event { scroll-margin-top: 72px }
.digest-highlights > ol > li { border-top: 1px solid var(--hairline) }
.digest-highlight { min-height: 56px; display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; align-items: center; gap: 12px; padding: 10px 0; line-height: 1.35; color: var(--ink); text-decoration: none }
.digest-highlight strong, .digest-highlight small { display: block; overflow-wrap: anywhere }
.digest-highlight strong { font-size: 15px; font-weight: 600 }
.digest-highlight small, .digest-chevron, .digest-coverage-link small { color: var(--muted) }
.digest-highlight small { margin-top: 3px; font-size: 12px; font-weight: 400 }
.digest-highlight { list-style: none; cursor: pointer }
.digest-highlight::-webkit-details-marker { display: none }
/* Hover matches the Latest updates cards: a gray row edge to edge, no underline on the headline. */
.digest-highlights { --digest-pad: var(--s-lg) }
.digest-highlight { margin-inline: calc(-1 * var(--digest-pad)); padding-inline: var(--digest-pad) }
.digest-highlight:is(:hover, :focus-visible) { background: var(--hairline-soft) }
.digest-highlight:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
a.digest-coverage-link:is(:hover, :focus-visible) > span > span { text-decoration: underline; text-underline-offset: 3px }
.digest-chevron { justify-self: center; font: 22px/1 var(--font-sans) }
.digest-event[open] > summary .digest-chevron { transform: rotate(90deg) }
.digest-event-body { padding: 0 0 var(--s-base) clamp(0px, 3vw, 38px); overflow-wrap: anywhere }
.digest-event-body h3 { margin: var(--s-sm) 0 var(--s-xs); font-size: 14px }
.digest-event-body p { margin: 0 0 var(--s-xs) }
.digest-coverage { list-style: none; margin: 0; padding: 0 }
.digest-coverage-link { min-height: 44px; display: flex; justify-content: space-between; gap: var(--s-sm); align-items: center; padding: var(--s-xs) 0; border-top: 1px solid var(--hairline); color: var(--ink); text-decoration: none }
.digest-coverage-link small { display: block }
.digest-linked-article { display: inline-flex; align-items: center; min-height: 32px; color: var(--body); text-underline-offset: 3px }
@media (pointer: coarse) { .digest-linked-article { min-height: 44px } }
.digest-no-highlights { margin: 0; border-top: 1px solid var(--hairline); padding: var(--s-sm) 0 }
.digest-rank { display: grid; place-items: center; height: 26px; color: var(--body); background: var(--canvas); border-radius: 6px; font: 500 12px var(--font-mono) }
/* Rank badges step down from solid orange (1) through fading tints (2–4) to the plain badge (5+). The tints mix
   with the card surface and the text mixes with ink, so both themes keep contrast. */
.digest-highlights > ol > li:nth-child(-n+4) .digest-rank { --rank-text: color-mix(in srgb, var(--primary) 72%, var(--ink)); color: var(--rank-text); font-weight: 600 }
.digest-highlights > ol > li:nth-child(1) .digest-rank { background: var(--primary); color: var(--on-primary) }
.digest-highlights > ol > li:nth-child(2) .digest-rank { background: color-mix(in srgb, var(--primary) 26%, var(--surface-card)) }
.digest-highlights > ol > li:nth-child(3) .digest-rank { background: color-mix(in srgb, var(--primary) 15%, var(--surface-card)) }
.digest-highlights > ol > li:nth-child(4) .digest-rank { background: color-mix(in srgb, var(--primary) 7%, var(--surface-card)) }
.feed-move { font-variant-numeric: tabular-nums; white-space: nowrap }
.feed-x-mark { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em }
.feed-move .gain, .feed-move .loss { font-weight: 600 }
.feed-move-when { color: var(--muted); font-weight: 400 }
.feed-ticker { color: var(--ink); white-space: nowrap }
.feed-live { display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle; animation: feed-live 2s ease-in-out infinite }
@keyframes feed-live { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .feed-live { animation: none } }
.digest-developing { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: var(--r-pill); color: var(--warning); background: var(--warning-tint); font-weight: 600; font-size: 11px; line-height: 18px; vertical-align: 1px }
/* Timeline: a rail with one node per development, oldest first, the newest filled. */
.digest-timeline { list-style: none; margin: 0; padding: 0 }
.digest-node { position: relative; padding: 0 0 var(--s-sm) 22px }
.digest-node::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; width: 1px; background: var(--hairline-strong) }
.digest-node:last-child::before { display: none }
.digest-node::after { content: ""; position: absolute; left: 1px; top: 5px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--muted); background: var(--surface-card) }
.digest-node.latest::after { border-color: var(--ink); background: var(--ink) }
.digest-node-time { color: var(--muted) }
.digest-latest { color: var(--ink); font-weight: 600 }
.digest-event-body p.digest-node-headline { margin: 2px 0 4px; color: var(--ink); font-weight: 500; line-height: 1.4 }
.digest-node-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px }
.digest-source { display: inline-flex; align-items: center; gap: 3px; min-height: 26px; padding: 0 9px; border: 1px solid var(--hairline); border-radius: var(--r-pill); color: var(--body); font-size: 12px; text-decoration: none; overflow-wrap: anywhere }
a.digest-source:is(:hover, :focus-visible) { color: var(--ink); border-color: var(--hairline-strong) }
.digest-more-sources { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px }
.digest-more-sources > summary { display: inline-flex; align-items: center; min-height: 26px; padding: 0 4px; color: var(--muted); font-size: 12px; cursor: pointer; list-style: none; text-decoration: underline dotted }
.digest-more-sources > summary::-webkit-details-marker { display: none }
.digest-more-sources[open] > summary { order: 1 }
.digest-more-sources .digest-less-label, .digest-more-sources[open] .digest-more-label { display: none }
.digest-more-sources[open] .digest-less-label { display: inline }
@media (pointer: coarse) { .digest-source, .digest-more-sources > summary { min-height: 36px } }
.digest-updates > header { margin: 0 0 var(--s-xs) }
.card.feed-list { padding: 0; margin: 0 }
.feed-list > p { margin: var(--s-base) var(--s-lg) }
.feed-item:first-child { border-top: 0 }
.feed-more { margin-block: var(--s-sm); width: 100% }
.feed-error:not([hidden]) { padding: var(--s-sm) 0 }
@media (max-width: 639px) {
  .feed-filters { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 2px; scrollbar-width: thin }
  .feed-filters > button { flex: none }
  .digest-highlights.card { --digest-pad: var(--s-sm); padding: var(--s-sm) var(--s-sm) 0 }
  .feed-item { padding-inline: var(--s-sm) }
  .digest-highlight { gap: var(--s-xs) }
  .feed-meta { overflow-wrap: anywhere }
}

/* ------------------------------------------------------------------ watchlist (watchlist.js) */
/* The page head holds the title, the add field and Columns; one card holds the table. Rows open the security pane;
   the drag handle and remove button show on hover (and keyboard focus). */
.wl-head { align-items: center; gap: var(--s-sm); margin-bottom: var(--s-md) }
.wl-head h1 { margin-right: auto }
.wl-add { position: relative; margin: 0 }
.wl-add > svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none }
.wl-add input { width: 240px; height: 40px; padding-left: 34px }
.wl-suggest { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: max(100%, 320px); padding: 6px; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .08) }
.wl-sugg { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--s-xs); align-items: center; padding: 8px 10px; border-radius: var(--r-md); font-size: 13px; color: var(--body); cursor: pointer }
.wl-sugg.hl, .wl-sugg:hover { background: var(--hairline-soft) }
.wl-sugg b { color: var(--ink); font-weight: 600 }
.wl-sugg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wl-sugg em { font-style: normal; font-size: 12px; color: var(--muted) }
.wl-cols { position: relative }
.wl-cols > button { display: inline-flex; align-items: center; gap: 6px }
.wl-cols > button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round }
.wl-cols > button[aria-expanded="true"] { background: var(--canvas); border-color: var(--muted-soft) }
.wl-menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 280px; max-height: min(480px, 70vh); overflow: auto; padding: 6px; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .08) }
.wl-menu hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 6px 4px }
.wl-group { margin: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .88px; text-transform: uppercase; color: var(--muted) }
.wl-opt { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--r-md); color: var(--ink); font-size: 13.5px; cursor: pointer; user-select: none }
.wl-opt:hover { background: var(--hairline-soft) }
.wl-opt input { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer }
.wl-opt-grip { margin-left: auto; color: var(--muted-soft); cursor: grab; letter-spacing: -2px; font-size: 12px }
.wl-opt.dragging { opacity: .4 }
.wl-opt.drop-above { box-shadow: inset 0 2px 0 var(--ink) }
.wl-opt.drop-below { box-shadow: inset 0 -2px 0 var(--ink) }
/* A table card's Columns menu (column-menu.js): the Watchlist's, beside the card's title. */
.tbl-cols { margin-left: auto }
/* The menu reaches past the card's foot: the card does not clip it (its table scrolls in its own .tbl-x box). */
.card.tbl-card { overflow: visible }
.tbl-cols .wl-menu { text-align: left; font-weight: 400 }
.wl-menu-foot { display: flex; justify-content: flex-end; padding: 2px 6px 4px; font-size: 13px }
.wl-card { padding-top: var(--s-xs); padding-bottom: 0 }
.wl-table td, .wl-table th { white-space: nowrap; vertical-align: middle }
.wl-table tbody tr:last-child td { border-bottom: 0 }
.wl-table th .wl-sort { margin-left: 4px; font-size: 10px }
.wl-row { cursor: pointer; transition: background-color .12s ease }
.wl-row:hover td, .wl-row.selected td, .wl-row:focus-visible td { background: var(--canvas-soft) }
.wl-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
.wl-row.wl-flash td { animation: wl-flash 1.2s ease-out }
@keyframes wl-flash { from { background: var(--hairline-soft) } to { background: transparent } }
.wl-row.dragging { opacity: .4 }
.wl-row.drop-above td { box-shadow: inset 0 2px 0 var(--ink) }
.wl-name > div { position: relative; display: grid; min-width: 140px }
.wl-sym { color: var(--ink); font-weight: 600 }
.wl-co { max-width: 220px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted) }
.wl-grip { position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: var(--muted-soft); font-size: 12px; letter-spacing: -2px; cursor: grab; opacity: 0 }
.wl-row:hover .wl-grip { opacity: 1 }
.wl-table.sorted .wl-grip { display: none }
.wl-price { color: var(--ink) }
.wl-na { color: var(--muted-soft) }
.wl-range { position: relative; display: inline-block; width: 72px; height: 4px; border-radius: 2px; background: var(--hairline); vertical-align: middle }
.wl-range i { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--surface-card); border: 2px solid var(--ink) }
.wl-table svg.row-spark { display: inline-block; vertical-align: middle; color: var(--muted) }
.wl-table svg.row-spark.gain { color: var(--success) }
.wl-table svg.row-spark.loss { color: var(--error) }
th.wl-x, td.wl-x { width: 28px; padding-left: 4px }
/* Its screen-reader label is absolutely placed: anchored here, the table's scroll box clips it, not the page. */
th.wl-x { position: relative }
button.wl-remove { width: 26px; height: 26px; padding: 0; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--muted); font-size: 17px; line-height: 1; opacity: 0 }
.wl-row:hover button.wl-remove, button.wl-remove:focus-visible { opacity: 1 }
button.wl-remove:hover, button.wl-remove:active { background: var(--hairline-soft); color: var(--ink) }
.wl-empty { margin: 0; padding: var(--s-xxl) 0; text-align: center; color: var(--muted) }
.wl-toast { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--s-lg) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-base); padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--canvas); font-size: 13px }
.wl-toast button.link-btn { color: var(--canvas); font-weight: 600; text-decoration-color: currentColor }
@media (max-width: 640px) {
  .wl-head h1 { width: 100% }
  .wl-add { flex: 1; min-width: 0 }
  .wl-add input { width: 100% }
  .wl-card { padding-inline: var(--s-base) }
  .wl-menu { position: fixed; left: var(--s-base); right: var(--s-base); top: auto; bottom: calc(var(--s-base) + env(safe-area-inset-bottom, 0px)); width: auto }
  button.wl-remove { opacity: 1 }
}
@media (prefers-reduced-motion: reduce) { .wl-row.wl-flash td { animation: none } }