/* Farol design system. Mobile-first: the base rules are the phone layout (360-430 px);
   @media (min-width: 768px) adds the top bar and the centred column.
   Night (dark) is the default; Daybreak (light) follows prefers-color-scheme: light.
   The lamp colour is the brand accent: active tab, the beam, decoration. Use it sparingly;
   it is never a gain or loss colour. Controls (primary buttons, the checked switch, the Trade
   action) use --control/--on-control: the lamp at night, a dark amber in Daybreak, where
   lamp yellow on white is only 1.6:1. tests/web/test_theme_contrast.py checks the ratios.
   No inline styles anywhere: the strict CSP forbids <style>, style= and inline scripts. */

/* Instrument Sans (OFL-1.1), self-hosted: see static/VENDORED.md. CSP font-src 'self'. */
@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/static/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/static/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("/static/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark light;
  /* ---- Farol tokens: Night ---- */
  --bg: #0b1626;
  --surface: #13233a;
  --raised: #1b3150;
  --text: #e8eef4;
  --muted: #8fa3b8;      /* 6.1:1 on --surface, 5.1:1 on --raised */
  --lamp: #f5c451;       /* fills: primary action, centre tab, the beam */
  --lamp-text: #f5c451;  /* lamp used as text or a line on --bg/--surface */
  --on-lamp: #0b1626;    /* text on a lamp fill, 11.2:1 */
  --gain: #3dd6a0;
  --loss: #ff6b5e;
  --link: #9cc4f0;
  --gain-bg: #10352f;
  --loss-bg: #3b1d24;
  --warn: #ffb070;
  --warn-bg: #3a2614;
  --border: #22395a;
  --border-input: #5f7896; /* 3.5:1 on --surface */
  --beam: rgb(245 196 81 / 22%);
  --control: #f5c451;    /* primary button fill, checked switch: 9.7:1 on --surface */
  --on-control: #0b1626; /* 11.2:1 on --control */
  --mark-beam: #f5c451;  /* the brand mark's beam, kept subtle at night */
  --mark-beam-opacity: 0.45;
  /* ---- legacy names, mapped onto the tokens so unmigrated pages keep working ---- */
  --surface-2: var(--raised);
  --accent: var(--control);
  --accent-text: var(--on-control);
  --error-bg: var(--loss-bg);
  --focus: var(--lamp);
  --shadow: none;
  /* charts: the owner's line lights up in lamp; CDI is the cool horizon */
  --chart-1: #f5c451;
  --chart-2: #6fa8e8;
  --chart-3: #8fa3b8;
  --chart-text: #a9b9ca;
  --chart-grid: #22395a;
  --chart-tooltip-bg: #e8eef4;
  --chart-tooltip-text: #0b1626;
  /* ---- shape, spacing, type ---- */
  --radius: 14px;
  --radius-sm: 12px;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2.5rem;
  --tabbar-h: 4rem;
  --topbar-h: 3.5rem;
  --font: "Instrument Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Daybreak: the phone is set to light */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f6f8;
    --surface: #ffffff;
    --raised: #e8eef3;
    --text: #0b1626;
    --muted: #4d5f73;      /* 6.6:1 on --surface, 5.6:1 on --raised */
    --lamp: #f5c451;
    --lamp-text: #8a5a00;  /* darkened for text: 5.9:1 on --surface */
    --on-lamp: #0b1626;
    --gain: #0a7a55;
    --loss: #c0362c;
    --link: #1f5fa8;
    --gain-bg: #dcf3e9;
    --loss-bg: #fde6e3;
    --warn: #8a4b00;
    --warn-bg: #fff1dc;
    --border: #d3dce5;
    --border-input: #7a8a9c; /* 3.5:1 on --surface */
    --beam: rgb(245 196 81 / 38%);
    --control: #8a5a00;    /* 5.9:1 on --surface, 5.4:1 on --bg */
    --on-control: #ffffff; /* 5.9:1 on --control */
    --mark-beam: #d9961a;
    --mark-beam-opacity: 0.85;
    --focus: #8a5a00;
    --shadow: 0 1px 2px rgb(11 22 38 / 8%);
    --chart-1: #b07800;
    --chart-2: #2f6fb8;
    --chart-3: #4d5f73;
    --chart-text: #4d5f73;
    --chart-grid: #d3dce5;
    --chart-tooltip-bg: #0b1626;
    --chart-tooltip-text: #ffffff;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-bottom: 9rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.5 var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* room for the fixed tab bar on phones */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s4));
  overflow-wrap: anywhere;
}

body.no-nav { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }

main { padding: var(--s4); max-width: 56rem; margin: 0 auto; }

h1 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; margin: var(--s2) 0 var(--s4); }
h2 { font-size: 1.15rem; margin: var(--s5) 0 var(--s3); }
h3 { font-size: 1rem; margin: 0 0 var(--s2); }
p { margin: 0 0 var(--s3); }
small { font-size: 0.85rem; }
a { color: var(--link); text-underline-offset: 2px; }
code { font-family: var(--mono); background: var(--surface-2); padding: 0.1em 0.4em; border-radius: 6px; }
ul { padding-left: 1.2rem; margin: 0 0 var(--s3); }
li { margin-bottom: var(--s2); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--surface); padding: var(--s2) var(--s3);
  z-index: 100;
}
.skip-link:focus { left: var(--s2); top: var(--s2); }

/* ---- layout helpers ---- */
.stack > * + * { margin-top: var(--s4); }
.stack-sm > * + * { margin-top: var(--s2); }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.row-between { justify-content: space-between; }
.grow { flex: 1 1 auto; }
.muted, .note { color: var(--muted); }
.phone-only { display: block; }
.desktop-only { display: none; }

/* ---- numbers ---- */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }

/* ---- cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card-title { margin: 0 0 var(--s2); font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.kpi { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.kpi-label { color: var(--muted); font-size: 0.85rem; }
.kpi-value { font-size: clamp(1.05rem, 5.5vw, 1.35rem); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-value .num { white-space: nowrap; text-align: left; }
.kpi-note { color: var(--muted); font-size: 0.8rem; }

/* ---- buttons ---- */
.btn, button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; min-width: 44px; padding: 0 var(--s4);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.btn-primary, button[type="submit"]:not(.btn-plain):not(.btn) {
  background: var(--accent); color: var(--accent-text); border-color: var(--accent);
}
.btn-block { display: flex; width: 100%; }
.btn-ghost { background: transparent; }
.btn:hover, button:hover { filter: brightness(0.96); }
.btn:active, button:active { transform: translateY(1px); }
button[disabled], .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.htmx-request button, button.htmx-request { opacity: 0.7; cursor: progress; }

/* ---- forms ---- */
label, .field { display: block; margin-top: var(--s3); font-weight: 600; }
.field > span { display: block; margin-bottom: var(--s1); }
.field-hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  display: block; width: 100%; min-height: 44px; margin-top: var(--s1);
  padding: var(--s2) var(--s3); font: inherit; font-weight: 400; /* 16px+ stops iOS zoom */
  color: var(--text); background: var(--surface); border: 1px solid var(--border-input);
  border-radius: 12px;
}
::placeholder { color: var(--muted); opacity: 1; }
.card label:first-of-type { margin-top: 0; }
input[type="checkbox"], input[type="radio"] {
  width: 1.5rem; height: 1.5rem; margin: 0 var(--s2) 0 0; vertical-align: middle; accent-color: var(--accent);
}
label:has(> input[type="checkbox"]) { display: flex; align-items: center; min-height: 44px; font-weight: 400; }
form p { margin-top: var(--s4); }
form .btn, form button { width: 100%; }
.inline-form { margin: 0; }
.inline-form .btn, .inline-form button { width: auto; }
.form-actions { margin-top: var(--s4); }

/* ---- badges ---- */
.badge {
  display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700; line-height: 1.5; background: var(--surface-2); color: var(--text);
}
.badge-pos { background: var(--gain-bg); color: var(--gain); }
.badge-neg { background: var(--loss-bg); color: var(--loss); }
.badge-neutral { background: var(--surface-2); color: var(--muted); }

/* ---- banners ---- */
.banner, .warn, .error {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: 12px;
  border: 1px solid transparent;
}
.banner-warn, .warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.banner-error, .error { background: var(--error-bg); color: var(--loss); border-color: var(--loss); }
strong.warn, strong.error { display: inline; padding: 0; border: 0; background: none; }

/* ---- tables: plain on desktop; cards on phones with .table-cards ---- */
table { border-collapse: collapse; width: 100%; }
th, td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
th.num, td.num { text-align: right; }

.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
.table-cards tr {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s2) var(--s4); margin-bottom: var(--s3); box-shadow: var(--shadow);
}
.table-cards td {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  border: 0; padding: var(--s1) 0; text-align: right;
}
.table-cards td::before { content: attr(data-label); color: var(--muted); font-size: 0.85rem; text-align: left; flex: none; }
.table-cards td.cell-title {
  font-size: 1.1rem; font-weight: 700; padding-bottom: var(--s2); margin-bottom: var(--s1);
  border-bottom: 1px solid var(--border);
}
.table-cards td.cell-title::before { content: none; }
.table-cards td.cell-title a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- navigation ---- */
.topbar { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* the on-screen keyboard must not cover inputs: drop the fixed tab bar while typing */
body:has(input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus) .tabbar { display: none; }
body:has(input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus) { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
.topnav { display: flex; gap: var(--s2); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: stretch; background: var(--surface); border-top: 1px solid var(--border);
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.tabbar a {
  flex: 1 1 0; min-width: 0; min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: 0.75rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--lamp-text); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.4; }
/* the centre Trade action: a lamp-filled disc, the one emphasised tab */
.tabbar a.tab-trade { color: var(--text); }
.tabbar a.tab-trade svg {
  width: 44px; height: 32px; padding: 4px 10px; margin: -4px 0; border-radius: 999px;
  background: var(--control); color: var(--on-control); stroke: var(--on-control); stroke-width: 2.4;
}
.tabbar a.tab-trade[aria-current="page"] { color: var(--lamp-text); }

/* ---- Farol building blocks (reused by every redesigned page) ---- */
/* .tiles > .tile: small labelled figures (my buy, my sell, AI suggestion...) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--s2); }
.tile {
  min-width: 0; background: var(--raised); border-radius: var(--radius-sm);
  padding: var(--s3); display: flex; flex-direction: column; gap: 2px;
}
.tile-label { color: var(--muted); font-size: 0.8rem; }
.tile-value { font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .chip: sentiment / stance / impact pills */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1); padding: 0.1rem 0.6rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--raised); color: var(--text);
}
.chip-pos { background: var(--gain-bg); color: var(--gain); }
.chip-neg { background: var(--loss-bg); color: var(--loss); }
.chip-neutral { background: var(--raised); color: var(--muted); }
/* .row-item: a flat one-line row (watchlist, feed, settings) where a card adds nothing */
.row-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 48px; padding: var(--s3) 0; border-top: 1px solid var(--border);
}
.row-item:first-child { border-top: 0; }
.row-item > :last-child { text-align: right; }
/* .hero-figure: the big gain/loss number */
.hero-figure {
  display: block; font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.05; font-weight: 700;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* .beam: the lighthouse beam, a quiet wedge of lamp light behind its content */
.beam { position: relative; isolation: isolate; }
.beam::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -10%; right: -10%; top: 15%; bottom: -35%;
  background: linear-gradient(100deg, var(--beam), transparent 70%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .beam::before { animation: beam-reveal 0.9s ease-out both; }
  @keyframes beam-reveal { from { opacity: 0; transform: translateX(-6%); } to { opacity: 1; transform: none; } }
}

/* ---- brand ---- */
.brand { display: inline-flex; align-items: center; gap: var(--s2); }
.brand-mark { width: 1.6em; height: 1.6em; flex: none; }
.brand-mark .bm-tower { fill: currentColor; }
.brand-mark .bm-lamp { fill: var(--lamp); }
.brand-mark .bm-beam { fill: var(--mark-beam); opacity: var(--mark-beam-opacity); }
.auth-brand { display: flex; align-items: center; gap: var(--s3); font-size: 2rem; letter-spacing: -0.02em; margin-bottom: var(--s2); }
.auth-brand .brand-mark { width: 2.75rem; height: 2.75rem; }
.auth-tagline { color: var(--muted); margin-top: 0; text-wrap: pretty; }

/* ---- stock page bits ---- */
.outlook-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.evidence { list-style: none; padding: 0; }
.evidence li { padding: var(--s2) 0; border-top: 1px solid var(--border); margin: 0; }
.chart-box { position: relative; height: 280px; }
.chart-box #chart { height: 100%; width: 100%; }
.chart-box #chart[hidden] { display: none; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); list-style: none; margin: 0 0 var(--s2); padding: 0; font-size: 0.8rem; line-height: 1.3; color: var(--muted); }
.chart-legend[hidden] { display: none; }
.chart-legend li { white-space: nowrap; }
.chart-legend li::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: var(--s1); vertical-align: middle; background: var(--chart-1); }
.chart-legend .legend-cdi::before { background: var(--muted); }
.chart-legend .legend-invested::before { background: var(--chart-3); }
.chart-legend .legend-portfolio { color: var(--text); }
.chart-legend .legend-value { font-variant-numeric: tabular-nums; color: var(--text); }
.error:empty { display: none; }
.stock-chart-plot { position: relative; height: 300px; width: 100%; }
.stock-chart-plot[hidden], .stock-chart-empty[hidden] { display: none; }
.range-tabs { display: flex; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.range-btn { min-width: 3rem; }
.range-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
main > .card + .card { margin-top: var(--s4); }
.news-list { list-style: none; }
.news-list li:last-child { margin-bottom: 0; }

/* ---- toggle switch (settings) ---- */
label.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; margin-top: var(--s3); font-weight: 600; cursor: pointer; flex-direction: row-reverse; }
.switch input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 3.25rem; height: 2rem; margin: 0; border-radius: 1rem;
  background: var(--border-input); border: 0; cursor: pointer;
}
.switch input[type="checkbox"]::after {
  content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--surface);
}
.switch input[type="checkbox"]:checked { background: var(--accent); }
.switch input[type="checkbox"]:checked::after { left: 1.5rem; background: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .switch input[type="checkbox"], .switch input[type="checkbox"]::after { transition: background-color 0.15s, left 0.15s; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, button, .tabbar a { transition: background-color 0.15s, color 0.15s, filter 0.15s; }
}

@media (min-width: 768px) {
  .chart-box { height: 420px; }
  .stock-chart-plot { height: 420px; }
}

@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  body { padding-bottom: var(--s6); }
  body.no-nav { padding-bottom: var(--s6); }
  main { padding: var(--s5) var(--s5); }
  h1 { font-size: 1.75rem; }
  .phone-only { display: none; }
  .desktop-only { display: block; }
  .tabbar { display: none; }
  .topbar {
    display: block; position: sticky; top: 0; z-index: 50;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .topbar-inner {
    display: flex; align-items: center; gap: var(--s2);
    max-width: 56rem; margin: 0 auto; padding: 0 var(--s5); min-height: var(--topbar-h);
  }
  .brand { font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; margin-right: var(--s4); }
  .topbar a:not(.brand) {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
    color: var(--muted); text-decoration: none; font-weight: 600; border-radius: 10px;
  }
  .topbar a:not(.brand):hover { background: var(--surface-2); }
  .topbar a[aria-current="page"] { color: var(--lamp-text); background: var(--surface-2); }
  .topbar a.tab-trade { color: var(--on-control); background: var(--control); margin-left: var(--s2); }
  .topbar a.tab-trade:hover { background: var(--control); filter: brightness(1.05); }
  .topbar a.tab-trade[aria-current="page"] { color: var(--on-control); background: var(--control); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--control); }
  .topbar form { margin: 0 0 0 auto; }
  .topbar form button { width: auto; min-height: 44px; }

  .table-cards { display: table; }
  .table-cards thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .table-cards tbody { display: table-row-group; }
  .table-cards tr { display: table-row; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
  .table-cards td { display: table-cell; width: auto; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--border); }
  .table-cards td::before { content: none; }
  .table-cards td.cell-title { font-size: inherit; border-bottom: 1px solid var(--border); margin: 0; padding: var(--s2) var(--s3); text-align: left; }
  form .btn, form button { width: auto; }
  .btn-block, form .btn-block { width: 100%; }
}

/* ---- page specifics ---- */
.filter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s3); align-items: end; margin-bottom: var(--s4); }
.filter-form .field { margin-top: 0; }
.filter-form button { grid-column: 1 / -1; margin-top: var(--s3); }
.spaced { margin-top: var(--s4); }
.confirm-area { margin-top: var(--s4); }
.outlook { margin-bottom: var(--s3); }
.table-cards td.desktop-cell { display: none; }
@media (min-width: 768px) {
  .filter-form { grid-template-columns: 1fr 1fr auto; }
  .filter-form button { grid-column: auto; margin-top: 0; }
  .table-cards td.desktop-cell { display: table-cell; }
}
.filter-form .field, .filter-form input { min-width: 0; }
@media (max-width: 359px) {
  .kpis, .filter-form { grid-template-columns: minmax(0, 1fr); }
  .filter-form .field + .field { margin-top: var(--s3); }
}
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.auth-card { max-width: 26rem; margin: var(--s5) auto 0; }
.table-cards + p { margin-top: var(--s4); }
.tabbar a span { overflow-wrap: normal; word-break: normal; }
@media (max-width: 359px) {
  .tabbar a { font-size: 0.64rem; }
  input[type="date"], input[type="time"] { padding-inline: var(--s2); }
}

/* ---- research panel ---- */
.research h3 { margin-top: var(--s4); }
.levels-list { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.levels-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid var(--border); margin: 0; }
.levels-main { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* ---- ticker type-ahead and price panel ---- */
.typeahead { position: relative; }
.ticker-results:empty { display: none; }
.ta-list { list-style: none; margin: var(--s1) 0 var(--s3); padding: 0; border: 1px solid var(--border-input); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ta-list li { margin: 0; border-top: 1px solid var(--border); }
.ta-list li:first-child { border-top: 0; }
.ta-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); width: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 0; border-radius: 0; background: transparent; text-align: left; justify-content: flex-start; }
.ta-item:focus-visible, .ta-item:hover { background: var(--surface-2); }
.ta-empty { margin: var(--s1) 0 var(--s3); }
.price-panel:not(:empty) { margin-bottom: var(--s4); }

/* ---- trade form: Buy/Sell segmented control, sticky action, confirmation card ---- */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s1); margin: 0 0 var(--s3); padding: var(--s1); border: 1px solid var(--border-input); border-radius: 14px; background: var(--surface-2); }
.segmented .segment, .segmented a { display: flex; text-align: center; line-height: 1.2; padding: 0 var(--s2); align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; font-weight: 700; font-size: 1.1rem; color: var(--muted); text-decoration: none; }
/* selected segment: an inverted pill, so the lamp stays for primary actions */
.segmented .segment[aria-current="page"], .segmented a[aria-current="page"] { background: var(--text); color: var(--bg); }
.sticky-actions {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s2));
  z-index: 10; padding: var(--s2) 0; background: var(--surface); margin-bottom: 0;
}
body:has(input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus) .sticky-actions { bottom: env(safe-area-inset-bottom); }
@media (min-width: 768px) { .sticky-actions { position: static; } }
.confirm-card .confirm-summary, .confirm-card .confirm-basis { margin: 0; }
.banner-info { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.empty-state p { margin: 0; }
.confirm-card h2 { margin-top: 0; }

/* ---- price targets (stock screen: tiles, edited in place) ---- */
.target-form { margin: 0; text-align: left; }
.target-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: end; }
.target-fields .field { margin-top: 0; }
.target-fields .field input { min-width: 0; width: 100%; }
.target-form .note { margin: var(--s2) 0 0; font-size: 0.85rem; }
.target-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.target-actions .btn { flex: 1 1 0; }
.target-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.target-warn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; font-size: 0.9rem; }
.target-reason { margin: var(--s3) 0 0; font-size: 0.85rem; text-wrap: pretty; }
.app-suggests { margin-top: var(--s3); padding: var(--s3); border-radius: var(--radius-sm); background: var(--raised); border-left: 3px solid var(--lamp); }
.app-suggests p { margin: 0; }
.app-suggests .note { margin-top: var(--s1); font-size: 0.8rem; }
.app-suggests .disclosure { margin-top: var(--s1); }
@media (min-width: 640px) { .target-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Overall: targets and risk summaries side by side on wide screens ---- */
.highlights { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 900px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Stocks: read-only cards, attention first ---- */
.sentiment-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border);
}
.sentiment-strip .note { font-size: 0.85rem; }
.stock-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.stock-card {
  display: block; min-width: 0; padding: var(--s4); color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); -webkit-tap-highlight-color: transparent;
}
.stock-card:hover { border-color: var(--muted); }
.stock-card-alert, .stock-card-alert:hover { border-color: var(--loss); }
.stock-card-warn, .stock-card-warn:hover { border-color: var(--warn); }
.stock-card p { margin: 0; }
.sc-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.sc-id { min-width: 0; flex: 1 1 8rem; display: flex; align-items: baseline; gap: var(--s2); }
.sc-ticker { flex: none; white-space: nowrap; overflow-wrap: normal; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.sc-name { min-width: 0; color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-gain { display: flex; gap: var(--s2); font-weight: 700; margin-left: auto; white-space: nowrap; }
.sc-meta { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.sc-when { font-size: 0.8rem; }
.sc-stance { margin: var(--s3) 0; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--raised); }
.sc-stance-positive { background: var(--gain-bg); }
.sc-stance-negative { background: var(--loss-bg); }
.sc-stance-positive > .sc-chips strong { color: var(--gain); }
.sc-stance-negative > .sc-chips strong { color: var(--loss); }
.sc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.sc-chips strong { margin-right: var(--s1); }
.sc-stance .chip { background: var(--surface); }
.sc-stance .chip-neutral { color: var(--muted); }
.sc-reason { margin-top: var(--s1); font-size: 0.9rem; text-wrap: pretty; }
.sc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-tiles .tile { padding: var(--s2); border: 1px solid transparent; }
.sc-tiles .tile-value { font-size: 0.95rem; }
.tile-pair { display: flex; flex-direction: column; line-height: 1.3; }
.tile-pair > span { overflow: hidden; text-overflow: ellipsis; }
.sc-tiles .tile-warn { border-color: var(--warn); }
.sc-warning { margin-top: var(--s2); color: var(--warn); font-size: 0.85rem; font-weight: 600; }
.watch-list { padding-top: var(--s1); padding-bottom: var(--s1); }
.watch-row { color: var(--text); text-decoration: none; }
.watch-main, .watch-side { display: flex; flex-direction: column; min-width: 0; }
.watch-main > :first-child { display: inline; }
.watch-side { align-items: flex-end; flex: 0 1 50%; text-align: right; }
.watch-main { flex: 1 1 8rem; }
.watch-sub { font-size: 0.8rem; }
.watch-dist { white-space: nowrap; font-weight: 600; }
.watch-dist .note { font-size: 0.8rem; font-weight: 400; }
.link-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); }
.link-row a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (max-width: 374px) {
  .stock-card { padding: var(--s3); }
  .sc-tiles { gap: var(--s1); }
  .sc-tiles .tile { padding: var(--s2) var(--s1) var(--s2) var(--s2); }
  .sc-tiles .tile-value { font-size: 0.85rem; }
}
@media (min-width: 900px) {
  .stock-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- stock screen ---- */
.stock-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s2);
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) var(--s3); padding: var(--s2) var(--s4) var(--s2) var(--s1);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.back-link { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text); }
.back-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover { background: var(--surface); }
.st-id { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.st-id h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.st-name { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-price { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.st-last { font-size: 1.2rem; font-weight: 700; }
.st-change { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.st-change .num { font-weight: 600; }
.position-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--s4); }
.tile-note { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-note .num { text-align: left; }
.tile-gain { background: var(--gain-bg); }
.tile-loss { background: var(--loss-bg); }
.tile-none { font-size: 0.85rem; font-weight: 600; color: var(--muted); white-space: normal; line-height: 1.25; }
.tiles .tile-warn { box-shadow: inset 0 0 0 1px var(--warn); }
.stock-chart-card { padding-bottom: var(--s3); }
main > .card + .card, main > .tiles + .card, main > .banner + .card { margin-top: var(--s3); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.card-head .card-title { margin: 0; }
.btn-small { padding: 0 var(--s3); color: var(--link); border-color: transparent; }
/* Sentiment */
.horizon-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.horizon-tile .tile-value { font-size: 1rem; }
.horizon-pos { background: var(--gain-bg); }
.horizon-pos .tile-value { color: var(--gain); }
.horizon-neg { background: var(--loss-bg); }
.horizon-neg .tile-value { color: var(--loss); }
.horizon-flat .tile-value { color: var(--text); }
.sentiment-reason { margin: var(--s3) 0 var(--s2); text-wrap: pretty; }
.evidence-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.evidence-item { margin: 0; padding: var(--s2) 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.evidence-item a { display: inline; }
.evidence-item .note { font-size: 0.8rem; white-space: nowrap; }
.sentiment-meta { margin: var(--s2) 0 0; font-size: 0.85rem; }
.horizon-detail + .horizon-detail { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border); }
.horizon-detail h3 { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
/* disclosure: one tap away (bull/bear, how the chart read was calculated, analyst calls) */
.disclosure { margin-top: var(--s2); }
.disclosure > summary {
  display: flex; align-items: center; gap: var(--s2); min-height: 44px; cursor: pointer;
  font-weight: 600; color: var(--link); list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after { content: "›"; font-size: 1.2rem; line-height: 1; transform: rotate(0deg); }
.disclosure[open] > summary::after { transform: rotate(90deg); }
.disclosure[open] > summary { margin-bottom: var(--s2); }
.disclosure .analysis { padding-left: 1.1rem; }
/* Chart read */
.read-verdict { margin: 0 0 var(--s1); font-size: 1.15rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.read-plain { margin-bottom: var(--s3); text-wrap: pretty; }
.read-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s1); }
.read-levels .num { text-align: left; font-size: 0.85rem; font-weight: 600; }
.read-news-title { margin-top: var(--s4); }
.research .levels-list { margin-top: var(--s2); }
/* News */
.news-section h2 { margin-top: var(--s5); }
.news-rows { list-style: none; padding: 0; margin: 0; }
.news-row { margin: 0; padding: var(--s3) 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.news-row:first-child { border-top: 0; }
.news-row .chip { margin-bottom: var(--s1); }
.news-row p { margin: 0; }
.news-title { font-weight: 600; line-height: 1.35; }
.news-title a { color: var(--text); text-decoration-color: var(--border-input); }
.news-meta { font-size: 0.8rem; margin-top: 2px; }
.news-reason { margin-top: var(--s1); font-size: 0.9rem; color: var(--muted); text-wrap: pretty; }
.analyst-calls { margin-top: var(--s3); border-top: 1px solid var(--border); padding-top: var(--s1); }
.analyst-calls .chip { white-space: normal; }
@media (max-width: 374px) {
  .horizon-tiles, .position-tiles { gap: var(--s1); }
  .horizon-tiles .tile, .position-tiles .tile { padding: var(--s2); }
  .horizon-tile .tile-value { font-size: 0.9rem; }
  .tile-none { font-size: 0.78rem; }
}
@media (min-width: 768px) {
  .stock-top { top: var(--topbar-h); margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4); padding: var(--s2) var(--s5) var(--s2) var(--s3); }
}

/* ---- Home: the morning screen (hero, chart, summary, ranked feed) ---- */
.hero { margin: var(--s2) 0 var(--s4); padding: var(--s3) 0 var(--s4); overflow-x: clip; } /* the beam reaches past the column: never a page scroll */
.hero p { margin: 0; }
.hero-label { color: var(--muted); font-size: 0.9rem; }
.hero-sub { margin-top: var(--s1); font-size: 1.15rem; font-weight: 600; }
.hero-sub .num { text-align: left; }
.hero-note { margin-top: var(--s2); color: var(--muted); font-size: 0.85rem; text-wrap: pretty; }
.home-chart .range-tabs { gap: var(--s1); }
.range-btn[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.home-links { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: var(--s1) 0 0; }
.home-links a, .feed-sources a { display: inline-flex; align-items: center; min-height: 44px; }
.summary-card p { margin: 0; }
.summary-card > * + * { margin-top: var(--s2); }
.summary-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); color: var(--muted); font-size: 0.85rem; }
.summary-overview { font-size: 1.05rem; line-height: 1.45; text-wrap: pretty; }
.summary-label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.summary-lines { margin: var(--s1) 0 0; padding-left: 1.1rem; }
.summary-lines li + li { margin-top: var(--s1); }
.feed { margin-top: var(--s4); }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-item { position: relative; padding: var(--s3) 0 var(--s2); border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.feed-list > .feed-item:first-child { border-top: 0; }
/* the whole item opens the stock screen; the source links sit above that link */
.feed-main { display: block; min-height: 44px; color: var(--text); text-decoration: none; }
.feed-main::after { content: ""; position: absolute; inset: 0; }
.feed-main:focus-visible { outline: none; }
.feed-main:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); }
.feed-ticker { font-weight: 700; font-size: 1.05rem; }
.feed-impact { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.feed-text { display: block; margin-top: var(--s1); line-height: 1.4; text-wrap: pretty; }
.feed-warning { display: block; margin-top: var(--s1); color: var(--warn); font-size: 0.85rem; }
.feed-sources { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin: 0; font-size: 0.9rem; }
.feed-more { margin-top: 0; border-top: 1px solid var(--border); }
.feed-quiet { margin: var(--s3) 0 0; color: var(--muted); font-size: 0.9rem; }
.feed-nosell a { display: inline-flex; align-items: center; min-height: 44px; }