/* ------------------------------------------------------------------ tokens */

:root {
  color-scheme: light;

  --plane: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f2f1ed;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.1);
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px rgba(11, 11, 11, 0.05);

  --accent: #2a78d6;
  --up: #006300;
  --up-mark: #0ca30c;
  --down: #d03b3b;
  --down-mark: #d03b3b;

  /* diverging ramp: blue arm -> neutral -> red arm (each arm validated) */
  --rec-strong-buy: #104281;
  --rec-buy: #3987e5;
  --rec-hold: #898781;
  --rec-sell: #d03b3b;
  --rec-strong-sell: #7d1d1d;

  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232321;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.1);
    --shadow: none;

    --accent: #3987e5;
    --up: #0ca30c;
    --up-mark: #0ca30c;
    --down: #e66767;
    --down-mark: #e66767;

    --rec-strong-buy: #9ec5f4;
    --rec-buy: #3987e5;
    --rec-hold: #898781;
    --rec-sell: #d03b3b;
    --rec-strong-sell: #f09b9b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --ink: #ffffff;
  --ink-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.1);
  --shadow: none;

  --accent: #3987e5;
  --up: #0ca30c;
  --up-mark: #0ca30c;
  --down: #e66767;
  --down-mark: #e66767;

  --rec-strong-buy: #9ec5f4;
  --rec-buy: #3987e5;
  --rec-hold: #898781;
  --rec-sell: #d03b3b;
  --rec-strong-sell: #f09b9b;
}

/* ------------------------------------------------------------------- base */

* {
  box-sizing: border-box;
}

/*
 * A class that sets `display` out-specifies the user agent's [hidden] rule, so
 * elements toggled with .hidden = true stayed on screen (the watchlist, the
 * chart-type switch). Make the attribute win everywhere.
 */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--plane);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.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;
}

/* ----------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 640;
  letter-spacing: -0.01em;
  flex: none;
}

.brand svg {
  display: block;
}

.brand span {
  font-size: 15px;
}

.search {
  position: relative;
  flex: 1;
  max-width: 460px;
  margin: 0 auto;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.search-field:focus-within {
  border-color: var(--accent);
}

.search-field svg {
  flex: none;
  color: var(--muted);
}

.search input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
}

.search input::placeholder {
  color: var(--muted);
}

.search kbd {
  flex: none;
  padding: 2px 6px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
}

.suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(11, 11, 11, 0.14);
  max-height: 340px;
  overflow-y: auto;
}

.suggest li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.suggest li[aria-selected="true"],
.suggest li:hover {
  background: var(--surface-2);
}

.suggest .s-sym {
  font-weight: 640;
  font-size: 13.5px;
  flex: none;
}

.suggest .s-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest .s-ex {
  flex: none;
  font-size: 11.5px;
  color: var(--muted);
}

.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.icon-btn:hover {
  background: var(--surface-2);
}

.icon-btn .moon {
  display: none;
}

:root[data-theme="dark"] .icon-btn .moon,
.icon-btn .sun {
  display: block;
}

:root[data-theme="dark"] .icon-btn .sun {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .icon-btn .sun {
    display: none;
  }
  :root:where(:not([data-theme="light"])) .icon-btn .moon {
    display: block;
  }
}

/* ------------------------------------------------------------------ layout */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 56px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card + .card,
.grid-2 {
  margin-top: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card h2 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- watchlist */

.watchlist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
}

.chip[aria-current="true"] {
  border-color: var(--accent);
}

.chip .c-sym {
  font-weight: 640;
}

.chip .c-chg {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
}

.chip .c-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 50%;
  line-height: 1;
}

.chip .c-x:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.chip > .c-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
}

/* -------------------------------------------------------------------- hero */

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.hero h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 640;
  letter-spacing: -0.015em;
}

.hero .ticker-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 560;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 999px;
}

.badge.state-open {
  color: var(--up);
}

.badge.state-open .dot {
  background: var(--up-mark);
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.price-block {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.price-hero {
  font-size: 52px;
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.delta.up {
  color: var(--up);
}

.delta.down {
  color: var(--down);
}

.delta.flat {
  color: var(--ink-2);
}

.delta .arrow {
  font-size: 13px;
}

.delta .period {
  color: var(--ink-2);
  font-weight: 450;
  font-size: 14px;
}

.extended {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.extended .lbl {
  color: var(--muted);
}

.extended .val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 560;
}

.asof {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 560;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.btn:hover {
  background: var(--surface-2);
}

.btn.is-on {
  color: var(--accent);
  border-color: var(--accent);
}

/* ------------------------------------------------------------------- chart */

.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.ranges {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-2);
  border-radius: 10px;
}

.ranges button {
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 560;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 7px;
}

.ranges button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.08);
}

.interval-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 3px 4px 3px 9px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 560;
  white-space: nowrap;
}

.interval-control select {
  min-width: 76px;
  padding: 4px 22px 4px 7px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
}

.period-change {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 7px;
}

.chart-wrap {
  position: relative;
  height: 320px;
  margin-top: 10px;
  overflow: hidden;
}

.chart-wrap.is-stale {
  opacity: 0.45;
}

.chart-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.tick-label {
  font-size: 11px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ref-label {
  font-size: 10.5px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tooltip {
  position: absolute;
  /* both offsets are set from JS so the card can follow the cursor */
  top: 0;
  left: 0;
  z-index: 5;
  min-width: 132px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(11, 11, 11, 0.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.tooltip.is-on {
  opacity: 1;
}

.tooltip .t-val {
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.tooltip .t-when {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.tooltip .t-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tooltip .t-key {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  flex: none;
}

.chart-foot {
  margin-top: 8px;
}

details.table-view summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}

details.table-view summary::-webkit-details-marker {
  display: none;
}

details.table-view summary::before {
  content: "▸";
  color: var(--muted);
  font-size: 10px;
}

details.table-view[open] summary::before {
  content: "▾";
}

.table-scroll {
  max-height: 260px;
  overflow-y: auto;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 7px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

th:first-child,
td:first-child {
  text-align: left;
}

thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--muted);
  font-weight: 560;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------- stats */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.tile {
  padding: 12px 14px;
  background: var(--surface);
}

.tile .t-label {
  font-size: 12px;
  color: var(--muted);
}

.tile .t-value {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tile .t-sub {
  font-size: 11.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.tile.span-2 {
  grid-column: span 2;
}

/* ------------------------------------------------------------------ meters */

.meter {
  margin-top: 8px;
}

.meter-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
}

.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pos, 0%);
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.35;
}

.meter-dot {
  position: absolute;
  top: 50%;
  left: var(--pos, 0%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- analysts */

.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rating-pill {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 640;
  color: #fff;
}

.rating-pill.r-strong_buy {
  background: var(--rec-strong-buy);
}

.rating-pill.r-buy {
  background: var(--rec-buy);
}

.rating-pill.r-hold {
  background: var(--rec-hold);
}

.rating-pill.r-sell {
  background: var(--rec-sell);
}

.rating-pill.r-strong_sell {
  background: var(--rec-strong-sell);
}

:root[data-theme="dark"] .rating-pill.r-strong_buy,
:root[data-theme="dark"] .rating-pill.r-strong_sell {
  color: #111;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .rating-pill.r-strong_buy,
  :root:where(:not([data-theme="light"])) .rating-pill.r-strong_sell {
    color: #111;
  }
}

.rating-note {
  font-size: 13px;
  color: var(--ink-2);
}

.target-chart {
  margin: 4px 0 18px;
}

.rec-row {
  display: grid;
  grid-template-columns: 82px 1fr 30px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12.5px;
}

.rec-row:last-child {
  margin-bottom: 0;
}

.rec-label {
  color: var(--ink-2);
}

.rec-bar-track {
  height: 14px;
  position: relative;
}

.rec-bar {
  height: 14px;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
}

.rec-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 560;
}

/* ------------------------------------------------------- key/value listing */

.kv {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
}

.kv dt,
.kv dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.kv dt {
  color: var(--ink-2);
}

.kv dd {
  text-align: right;
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

.kv dt:last-of-type,
.kv dd:last-of-type {
  border-bottom: 0;
}

.val-up {
  color: var(--up);
}

.val-down {
  color: var(--down);
}

/* ----------------------------------------------------------------- profile */

.summary-text {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

.summary-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-more {
  margin-top: 8px;
  padding: 0;
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: 0;
}

/* -------------------------------------------------------------------- news */

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.news-list li:first-child {
  padding-top: 0;
}

.news-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.news-list a {
  font-size: 14px;
  font-weight: 560;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}

.news-list a:hover {
  color: var(--accent);
}

.news-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

/* ------------------------------------------------------------ status/empty */

.status {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-2);
}

.status h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--ink);
  font-weight: 620;
}

.status p {
  margin: 0;
  font-size: 14px;
}

.status .examples {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.spinner {
  width: 22px;
  height: 22px;
  margin: 0 auto 14px;
  border: 2px solid var(--grid);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.notice {
  margin-top: 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 9px;
}

footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 12px;
  color: var(--muted);
}

footer p {
  margin: 0;
  max-width: 96ch;
}

/*
 * The disclaimer has to be read, not just present: a hairline above it and a
 * slightly darker ink lift it clear of the sources note without turning the
 * footer into a banner.
 */
.footer-disclaimer {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink-2);
  line-height: 1.55;
}

.footer-link {
  color: var(--accent);
  white-space: nowrap;
}

/* --------------------------------------------------------- disclaimer page */

.legal h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 640;
  letter-spacing: -0.015em;
}

.legal p {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 78ch;
}

.legal p:first-of-type {
  margin-top: 0;
}

/* the opening statement carries the weight of the page */
.legal .legal-lead {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink);
  max-width: 72ch;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 860px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-wrap: wrap;
    padding: 10px 16px;
  }

  .search {
    order: 3;
    max-width: none;
    flex-basis: 100%;
  }

  .search kbd {
    display: none;
  }

  main {
    padding: 16px 16px 48px;
  }

  footer {
    padding: 0 16px 32px;
  }

  .price-hero {
    font-size: 40px;
  }

  .tiles {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- top nav */

.topnav {
  display: flex;
  gap: 2px;
  /* shrinkable, so a narrow window scrolls the nav instead of the page */
  flex: 0 1 auto;
  min-width: 0;
  /* ten sections do not fit a phone; scroll the bar rather than the page */
  overflow-x: auto;
  scrollbar-width: none;
}

.topnav::-webkit-scrollbar {
  display: none;
}

.topnav .nav-link {
  flex: none;
}

.nav-link {
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 560;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 8px;
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.nav-link[aria-current='page'] {
  color: var(--ink);
  background: var(--surface-2);
}

/* --------------------------------------------------------------- funds */

.returns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.return-cell {
  padding: 10px 12px;
  background: var(--surface);
  text-align: center;
}

.return-cell .r-period {
  font-size: 11.5px;
  color: var(--muted);
}

.return-cell .r-value {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

.holding-row {
  display: grid;
  grid-template-columns: 1fr 96px 52px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.holding-row:last-child {
  border-bottom: 0;
}

.holding-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holding-name .h-sym {
  font-weight: 620;
  margin-right: 7px;
}

.holding-name .h-full {
  color: var(--ink-2);
  font-size: 12.5px;
}

.holding-bar-track {
  height: 12px;
}

.holding-bar {
  height: 12px;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
}

.holding-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 560;
}

.alloc-bar {
  display: flex;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px;
  margin: 10px 0 8px;
}

.alloc-seg {
  height: 14px;
}

.alloc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.alloc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.alloc-key {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* ----------------------------------------------------------------- IPOs */

.ipo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ipo-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 640;
  letter-spacing: -0.015em;
}

.ipo-head p {
  margin: 5px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  max-width: 62ch;
}

.ipo-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--ink-2);
}

.ipo-status.is-open {
  color: var(--up);
  background: color-mix(in srgb, var(--up-mark) 14%, transparent);
}

.ipo-status.is-upcoming {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.ipo-status.is-withdrawn {
  color: var(--down);
  background: color-mix(in srgb, var(--down) 14%, transparent);
}

.ipo-table td .sym-link {
  font-weight: 620;
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
}

.ipo-table td .sym-link:hover {
  text-decoration: underline;
}

.ipo-empty {
  padding: 18px 2px;
  font-size: 13.5px;
  color: var(--muted);
}

.source-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
}

.source-note a {
  color: var(--muted);
  text-decoration: underline;
}

.source-note a:hover {
  color: var(--accent);
}

@media (max-width: 860px) {
  .topnav {
    order: 2;
    flex: 1 1 100%;
    max-width: 100%;
  }

  .holding-row {
    grid-template-columns: 1fr 60px 48px;
  }

  .ipo-table {
    font-size: 12.5px;
  }

  th,
  td {
    padding: 7px 8px;
  }
}

/* ----------------------------------------------- candlestick / chart head */

.chart-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tooltip .t-ohlc {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 2px 7px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.tooltip .t-ohlc span {
  color: var(--muted);
}

.tooltip .t-ohlc b {
  font-weight: 560;
  text-align: right;
}

/* ------------------------------------------------------ futures & options */

.fo-label {
  font-weight: 560;
  display: block;
}

.fo-contract {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
}

.fo-exchange {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

/* ---------------------------------------------------------- option chain */

.opt-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

.opt-input,
.opt-select {
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.opt-input {
  width: 190px;
}

.opt-table {
  font-size: 12.5px;
}

.opt-table .opt-side-head th {
  text-align: center;
  color: var(--ink-2);
  border-bottom: 0;
}

.opt-table td {
  text-align: right;
}

.opt-strike {
  font-weight: 640;
  text-align: center !important;
  background: var(--surface-2);
  white-space: nowrap;
}

.opt-cell.is-itm {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.opt-table tr.is-atm td {
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.opt-scroll {
  max-height: 460px;
}

/* -------------------------------------------- dashboard / screener / forms */

.dash-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.dash-status h2 {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 640;
}

.screen-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 14px;
  align-items: end;
  margin-top: 14px;
}

.screen-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
}

.screen-field .opt-input,
.screen-field .opt-select {
  width: 100%;
}

.screen-input {
  width: 100%;
}

.screen-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

#screenerView .screen-actions { flex-wrap: wrap; }
#screenerView .screen-saved { padding: 12px 20px; }
#screenerView .screen-saved summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
#screenerView .screen-saved .screen-actions { margin-top: 10px; }
#screenerView .screen-saved input,
#screenerView .screen-saved select { max-width: 100%; min-width: 0; }
#screenerView .btn:disabled { opacity: .45; cursor: not-allowed; }
#screenerView #screenResults td:last-child .btn + .btn { margin-left: 6px; }

.compare-table th[scope='row'] {
  text-align: left;
  font-weight: 450;
  color: var(--ink-2);
  white-space: nowrap;
}

.compare-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compare-table thead th {
  text-align: right;
}

.compare-table thead th:first-child {
  text-align: left;
}

.compare-metric {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

/* ----------------------------------------------------------- calendar */

.cal-detail {
  color: var(--ink-2);
  font-size: 12.5px;
  max-width: 46ch;
  white-space: normal;
}

.ipo-table td .fo-contract {
  display: block;
}

/* ---------------------------------------------------------- news cards */

.news-tabs {
  flex-wrap: wrap;
  margin-top: 4px;
}

.news-search {
  grid-template-columns: minmax(200px, 340px) auto;
  margin-top: 12px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.news-card:hover {
  border-color: var(--accent);
}

.news-thumb {
  width: 100%;
  height: 148px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}

.news-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px 14px;
  flex: 1;
}

.news-headline {
  font-size: 14.5px;
  font-weight: 560;
  line-height: 1.38;
  color: var(--ink);
  text-decoration: none;
}

.news-headline:hover {
  color: var(--accent);
}

.news-card .news-meta {
  margin-top: auto;
}

.news-tickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.news-tickers .sym-link {
  font-size: 12px;
}

@media (max-width: 860px) {
  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-thumb {
    height: 172px;
  }
}

/* =========================================================================
   Market dashboard — terminal layout.
   Scoped to #dashboardView so the card styling of every other view is
   untouched: tighter spacing, hairline borders, 4px corners, no shadows.
   ========================================================================= */

#dashboardView {
  --panel-gap: 10px;
}

/* header: title, live state and region switch on one line */
#dashboardView .dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 2px 10px;
}

#dashboardView .dash-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

#dashboardView h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -0.015em;
}

#dashboardView .dash-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 560;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#dashboardView .dash-state.is-open {
  color: var(--up);
}

#dashboardView .dash-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

#dashboardView .dash-state.is-open .dash-dot {
  background: var(--up-mark);
}

#dashboardView .dash-tabs {
  padding: 2px;
  border-radius: 4px;
  display: flex;
  flex: 1 1 300px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

#dashboardView .dash-tabs button {
  border-radius: 3px;
  padding: 4px 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* benchmark ticker strip */
#dashboardView .ticker {
  display: flex;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: var(--panel-gap);
}

#dashboardView .tick {
  flex: 1 1 0;
  min-width: 158px;
  padding: 9px 14px;
  border-right: 1px solid var(--border);
}

#dashboardView .tick:last-child {
  border-right: 0;
}

#dashboardView .tick {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 260px;
}
#dashboardView .tick-copy { flex: 1; min-width: 0; }
#dashboardView .tick-history { flex: 0 0 110px; text-align: right; }
#dashboardView .index-mini-chart { display: block; width: 110px; height: 48px; color: var(--muted); }
#dashboardView .index-mini-chart.trend-up,
#dashboardView .tick-change.val-up { color: var(--up); }
#dashboardView .index-mini-chart.trend-down,
#dashboardView .tick-change.val-down { color: var(--down); }
#dashboardView .index-mini-grid { fill: none; stroke: currentColor; stroke-width: .6; opacity: .25; }
#dashboardView .index-mini-area { fill: currentColor; opacity: .15; }
#dashboardView .index-mini-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#dashboardView .tick-meta { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
#dashboardView .index-history-empty { font-size: 10px; color: var(--muted); }
#dashboardView .tick:focus-visible { outline: 2px solid var(--muted); outline-offset: -3px; }

#dashboardView .heatmap-panel { margin-bottom: var(--panel-gap); }
#dashboardView .heatmap-subtitle { margin: 3px 0 0; color: var(--muted); font-size: 10.5px; }
#dashboardView .heatmap-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 2px;
  min-height: 260px;
  padding: 2px;
  background: var(--border);
}
#dashboardView .heat-tile {
  flex: 1 1 92px;
  min-width: 72px;
  min-height: 56px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
#dashboardView .heat-tile strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
#dashboardView .heat-tile span { font-size: 11px; font-weight: 650; }
#dashboardView .heat-tile small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .78; font-size: 8.5px; }
#dashboardView .heat-flat-0 { background: #56606b; }
#dashboardView .heat-up-1 { background: #287a50; }
#dashboardView .heat-up-2 { background: #1f6843; }
#dashboardView .heat-up-3 { background: #155535; }
#dashboardView .heat-up-4 { background: #0b4328; }
#dashboardView .heat-down-1 { background: #a94f55; }
#dashboardView .heat-down-2 { background: #933a42; }
#dashboardView .heat-down-3 { background: #792731; }
#dashboardView .heat-down-4 { background: #611720; }
#dashboardView .heat-tile:hover,
#dashboardView .heat-tile:focus-visible { filter: brightness(1.15); outline: 2px solid var(--ink); outline-offset: -2px; z-index: 1; }

#dashboardView .tick-label {
  font-size: 10.5px;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

#dashboardView .tick-value {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

#dashboardView .tick-change {
  margin-top: 1px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

/* paired panels */
#dashboardView .dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--panel-gap);
  margin-bottom: var(--panel-gap);
  align-items: start;
}

#dashboardView .panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

#dashboardView .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}

#dashboardView .panel-title {
  margin: 0;
  font-size: 11px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
}

#dashboardView .panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

#dashboardView .panel-actions .btn {
  padding: 3px 8px;
  font-size: 11.5px;
  border-radius: 3px;
}

#dashboardView .mini-toggle {
  padding: 2px;
  border-radius: 3px;
}

#dashboardView .mini-toggle button {
  padding: 2px 8px;
  font-size: 11.5px;
  border-radius: 2px;
}

#dashboardView .panel-note {
  margin: 0;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* dense tables: the panel already draws the frame */
#dashboardView .table-scroll {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  max-height: none;
}

#dashboardView table {
  font-size: 12.5px;
}

#dashboardView thead th {
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
}

#dashboardView td {
  padding: 4px 10px;
  white-space: nowrap;
}

/* symbol and company name share one line so rows stay single-height */
#dashboardView td:first-child {
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardView .fo-contract {
  display: inline;
  margin-left: 7px;
  font-size: 11.5px;
}

#dashboardView .dash-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

#dashboardView .dash-foot .source-note {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 860px) {
  #dashboardView .dash-row {
    grid-template-columns: 1fr;
  }

  #dashboardView .tick {
    min-width: 280px;
  }

  #dashboardView td:first-child {
    max-width: 150px;
  }
}

/* =========================================================================
   Stock detail — trading-terminal layout.
   Scoped to #dash so every other view keeps its card styling.
   ========================================================================= */

/* ---- pannable chart ---- */

.chart-wrap {
  display: flex;
  align-items: stretch;
  height: 360px;
}

.chart-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  /*
   * The chart owns the gestures that are its own and no others. `pan-y` keeps
   * vertical scrolling with the browser — a finger swiping up the page still
   * scrolls it, even starting on the chart — while horizontal panning and
   * pinch come to our pointer handlers (a touch-action without `pinch-zoom`
   * also stops the browser zooming the page here). `overscroll-behavior`
   * keeps a sideways swipe off the browser's back gesture. Only this element
   * is affected: page zoom everywhere else is untouched.
   */
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
}

.chart-scroll.is-panning {
  cursor: grabbing;
  user-select: none;
}

/* the canvas is as wide as the timeline needs; it must not be squashed */
.chart-wrap .chart-scroll svg {
  display: block;
  width: auto;
  height: 100%;
  touch-action: inherit;
}

.chart-scroll::-webkit-scrollbar {
  height: 8px;
}

.chart-scroll::-webkit-scrollbar-thumb {
  background: var(--axis);
  border-radius: 4px;
}

.chart-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* price axis stays put while the canvas moves under it */
.chart-wrap .chart-axis {
  flex: none;
  width: 60px;
  height: 100%;
  border-left: 1px solid var(--border);
  background: var(--surface);
}

/* ---- denser detail layout ---- */

#dash {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#dash .card {
  border-radius: 6px;
  box-shadow: none;
  padding: 14px 16px;
}

#dash .card + .card,
#dash .grid-2 {
  margin-top: 0;
}

#dash .grid-2 {
  gap: 10px;
}

#dash .card h2 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.07em;
}

/* hero: the price is the headline, everything else recedes */
#dash .hero {
  padding: 16px 18px 14px;
}

#dash .hero h1 {
  font-size: 19px;
}

#dash .price-hero {
  font-size: 44px;
  letter-spacing: -0.035em;
}

#dash .price-block {
  margin-top: 10px;
}

#dash .asof {
  margin-top: 10px;
  padding-top: 9px;
}

/* chart card carries the page, so it gets the room */
#dash .chart-head {
  margin-bottom: 8px;
}

#dash .chart-foot {
  margin-top: 6px;
}

/* stat tiles: compact grid, no oversized numbers */
#dash .tiles {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border-radius: 5px;
}

#dash .tile {
  padding: 9px 11px;
}

#dash .tile .t-label {
  font-size: 11px;
}

#dash .tile .t-value {
  font-size: 14.5px;
}

/* dense supporting tables and lists */
#dash table {
  font-size: 12.5px;
}

#dash thead th {
  padding: 5px 10px;
  font-size: 10px;
}

#dash td {
  padding: 4px 10px;
}

#dash .kv dt,
#dash .kv dd {
  padding: 5px 0;
  font-size: 12.5px;
}

#dash .holding-row {
  padding: 5px 0;
  font-size: 12.5px;
}

#dash .returns-grid {
  border-radius: 5px;
}

#dash .return-cell {
  padding: 8px 10px;
}

#dash .news-list li {
  padding: 8px 0;
}

#dash .news-list a {
  font-size: 13.5px;
}

#dash .table-scroll {
  border-radius: 5px;
}

@media (max-width: 860px) {
  .chart-wrap {
    height: 300px;
  }

  .chart-wrap .chart-axis {
    width: 52px;
  }
}

/* ------------------------------------------------------- chart fullscreen */

.chart-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-expand {
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: 5px;
  white-space: nowrap;
}

body.modal-open {
  overflow: hidden;
}

.chart-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--plane);
}

.chart-modal-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
  padding: 12px 16px 16px;
}

.chart-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
}

.chart-modal-title {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the moved chart fills whatever height is left */
.chart-modal-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.chart-modal-slot .chart-head {
  flex: none;
  margin-bottom: 0;
}

.chart-modal-slot .chart-wrap {
  flex: 1;
  height: auto;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* nothing scrolls behind the overlay, so here the chart takes both axes */
.chart-modal-slot .chart-scroll {
  touch-action: none;
}

@media (max-width: 860px) {
  .chart-modal-inner {
    padding: 10px 10px 12px;
  }

  /* the fixed mobile chart height must not win inside the overlay */
  .chart-modal-slot .chart-wrap {
    height: auto;
  }
}

/* ------------------------------------------------------ indicator control */

.indicator-wrap {
  position: relative;
}

.indicator-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 330px;
  max-height: 62vh;
  overflow-y: auto;
  padding: 10px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 40px rgba(11, 11, 11, 0.2);
}

.ind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.ind-title {
  font-size: 12px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
}

.ind-head .btn {
  padding: 3px 8px;
  font-size: 11.5px;
  border-radius: 4px;
}

.ind-group {
  margin: 12px 0 4px;
  font-size: 10.5px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.ind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ind-row:last-child {
  border-bottom: 0;
}

.ind-row.is-off {
  opacity: 0.55;
}

.ind-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 560;
  cursor: pointer;
}

.ind-params {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ind-param {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
}

.ind-input {
  width: 52px;
  padding: 3px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.ind-note {
  flex-basis: 100%;
  font-size: 10.5px;
  color: var(--muted);
}

/* sub-panel captions drawn inside the chart canvas */
.panel-caption {
  font-size: 10.5px;
  font-weight: 560;
  fill: var(--muted);
}

.tooltip .t-ind {
  max-width: 230px;
  white-space: normal;
  line-height: 1.5;
}

/* ------------------------------------------------------ crosshair labels */

/* boxed readouts sitting on the time and price axes */
.cross-label {
  font-size: 10.5px;
  font-weight: 560;
  fill: var(--surface);
  font-variant-numeric: tabular-nums;
}

/* the tooltip trails the cursor, so it must never swallow pointer events */
.tooltip {
  pointer-events: none;
  transition: opacity 0.1s ease;
  max-width: 260px;
}

/* ------------------------------------------------- grouped key statistics */

#dash .stat-group {
  margin: 14px 0 6px;
  font-size: 10.5px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

#dash .stat-group:first-child {
  margin-top: 0;
}

/* the 52-week meter sits above the groups as a full-width band */
#dash .stat-band {
  padding: 10px 12px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
  border-radius: 5px;
}

#dash .stat-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#dash .stat-band .t-value {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* a metric the sources do not publish reads as absent, not as a number */
#dash .tile .t-value.is-na {
  color: var(--muted);
  font-weight: 500;
}

/* ============================================================ statistics
   Six section cards in one responsive grid: 3 up on desktop, 2 on tablet,
   1 on mobile. Each card carries its own inner grid of label/value rows, so
   cards grow to fit their metrics rather than metrics being squeezed into
   fixed cells — and no column can run away vertically on its own.
   ========================================================================= */

#dash .stat-cards {
  display: grid;
  /*
   * Cards are wide enough to hold two readable metric columns: at a typical
   * desktop width that is two cards across (four metric columns in total),
   * and three cards across on a wide screen. Narrower cards forced the inner
   * grid back to a single column, which is the tall-thin look we are avoiding.
   */
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 10px;
  align-items: start;
  /* override the old tile-grid look this container used to carry */
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#dash .stat-card {
  min-width: 0;
  padding: 12px 14px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

#dash .stat-card-title {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* two metric columns inside a card, one when the card is narrow */
#dash .stat-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 22px;
}

#dash .stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

/* every row keeps its rule: in a two-column grid, exempting only the last DOM
   child leaves one column ending short, which looks like a mistake */

#dash .stat-k {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: var(--ink-2);
  min-width: 0;
}

#dash .stat-note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

#dash .stat-v {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#dash .stat-v.is-na {
  color: var(--muted);
  font-weight: 500;
}

/* the 52-week position bar spans the full card width */
#dash .stat-meter {
  grid-column: 1 / -1;
  padding-top: 8px;
}

@media (max-width: 1099px) {
  /* tablet: two cards across, one metric column in each */
  #dash .stat-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dash .stat-rows {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #dash .stat-cards {
    grid-template-columns: 1fr;
  }

  #dash .stat-rows {
    grid-template-columns: 1fr;
  }
}

/* =========================================================== phone / touch
 *
 * A phone is not a narrow desktop: the screen is short, the pointer is a
 * thumb, and the browser reserves gestures of its own. The rules below fix
 * those three things — they never hide a metric or a control, they only
 * re-flow and re-size what is already there.
 */

/* rotating the phone must not have it re-flow our type */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (pointer: coarse) {
  /*
   * A fingertip covers roughly 9mm. These controls are laid out for a mouse,
   * so give them a floor a thumb can actually hit — padding stays as it is,
   * only the box grows.
   */
  .nav-link,
  .btn,
  .ranges button,
  .chip > .c-open,
  .dash-tabs button,
  .seg button,
  .icon-btn {
    min-height: 36px;
  }

  .chip .c-x {
    width: 30px;
    height: 30px;
  }

  /* a tap is not a hover: stop the grey flash Chrome paints over a tapped control */
  .nav-link,
  .btn,
  .ranges button,
  .chip,
  .sym-link,
  a {
    -webkit-tap-highlight-color: transparent;
  }
}

/*
 * Below 860px the header stacks. It was three rows — 162px of a short screen,
 * pinned — because the search took a row of its own. Beside the brand it
 * needs no row of its own, and the header becomes two: brand + search +
 * theme, then the section bar.
 */
@media (max-width: 860px) {
  .topbar {
    gap: 8px 10px;
    padding: 8px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .brand {
    order: 0;
  }

  .search {
    order: 1;
    flex: 1 1 120px;
    /* without this the field's intrinsic width sets the flex line and the
       theme button wraps onto a third row */
    min-width: 0;
    max-width: none;
    margin: 0;
  }

  #themeBtn {
    order: 2;
  }

  .topnav {
    order: 3;
    /* scroll-snap keeps a half-cut section label from reading as the edge */
    scroll-snap-type: x proximity;
  }

  .nav-link {
    scroll-snap-align: center;
  }
}

@media (max-width: 720px) {
  /* 16px is the threshold under which a phone browser zooms in on focus */
  .search input {
    font-size: 16px;
  }

  main {
    padding: 14px 12px 40px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  footer {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .price-hero {
    font-size: 34px;
  }

  /* the chip's own padding sits on top of the 36px thumb target inside it */
  .chip {
    padding: 2px 4px 2px 10px;
    gap: 6px;
  }

  .watchlist {
    gap: 6px;
    margin-bottom: 12px;
  }
}

@media (max-width: 720px) {
  /*
   * Chart controls wrapped into four rows on a phone. Each half of the header
   * becomes one full-width strip that scrolls sideways instead, so the chart
   * itself starts two rows down rather than five.
   */
  .chart-head {
    gap: 6px;
  }

  .chart-head-left,
  .chart-head-right {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    min-width: 0;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chart-head-left::-webkit-scrollbar,
  .chart-head-right::-webkit-scrollbar {
    display: none;
  }

  .chart-head-right {
    justify-content: space-between;
  }

  .ranges {
    flex: none;
  }

  .period-change {
    font-size: 12.5px;
    white-space: nowrap;
  }

  /* the figure carries the meaning; "past day" is what the range buttons say */
  .period-change .period {
    display: none;
  }

  .chart-expand .btn-text {
    display: none;
  }

  /* one scrollable row of chips instead of three stacked ones, so the price
     and the chart start higher up the page */
  .watchlist {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .watchlist::-webkit-scrollbar {
    display: none;
  }

  .watchlist .chip {
    flex: none;
  }

  /*
   * A 330px dropdown anchored to a button has nowhere to go on a 375px
   * screen, so the indicator list becomes a bottom sheet — the same controls,
   * reachable by thumb.
   */
  .indicator-panel {
    position: fixed;
    inset: auto 0 0 0;
    width: auto;
    max-height: 68vh;
    border-radius: 12px 12px 0 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(11, 11, 11, 0.25);
  }

  .chart-modal-inner {
    padding: 10px max(10px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  /*
   * A segmented group with six or seven options is wider than a phone. Let
   * the group itself scroll rather than pushing the whole page sideways —
   * except inside the chart header, where the strip around it already does.
   */
  .ranges {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ranges::-webkit-scrollbar {
    display: none;
  }

  .ranges button {
    flex: none;
  }

  .chart-head .ranges {
    overflow: visible;
  }

  .interval-control span { display: none; }
  .interval-control { padding-left: 4px; }
  #dashboardView .heatmap-grid { min-height: 220px; }
  #dashboardView .heat-tile { flex-basis: 74px; min-width: 62px; min-height: 52px; padding: 6px; }

  /* a flex child will not shrink below its content unless it is told to */
  .dash-status,
  .dash-status > * {
    min-width: 0;
  }

  /*
   * Dense tables still scroll sideways — that is the honest way to show ten
   * columns on a phone — but the symbol column stays put, so a row never
   * loses the name it belongs to.
   */
  .table-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .table-scroll th:first-child,
  .table-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }

  .table-scroll thead th:first-child {
    z-index: 3;
  }
}