/* ============================================================
   Mohawk Research — Strategic Systems Research & Synthesis
   Monochrome research-terminal aesthetic, derived from the
   brand's script monogram and tracked-caps wordmark. Color is
   reserved for one thing only: buy/sell signal meaning.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #0a0a09;
  --bg-elevated: #141412;
  --bg-hover: #1a1a17;
  --fg: #f2f0ea;
  --muted: #8c8a82;
  --border: #232220;
  --buy: #7c9c7a;
  --sell: #a05f5a;

  --font-display: 'Archivo', -apple-system, Segoe UI, sans-serif;
  --font-body: 'Archivo', -apple-system, Segoe UI, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header / brand ---------- */

.site-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--fg);
  text-decoration: none;
  width: fit-content;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: 1.75rem;
}
.header-nav a {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.header-nav a:hover { color: var(--fg); }

.logout-form { margin: 0 0 0 auto; }
.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 2px;
  cursor: pointer;
}
.logout-btn:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- Auth (login / 2FA) ---------- */

.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 4rem);
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 2.25rem 2.25rem;
  background:
    radial-gradient(120% 100% at 50% -20%, rgba(242, 240, 234, 0.05), transparent 60%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.auth-brand-mark {
  height: 52px;
  width: auto;
  margin-bottom: 0.35rem;
  filter: drop-shadow(0 0 18px rgba(242, 240, 234, 0.08));
}

.auth-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
}

.auth-brand-tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-divider {
  height: 1px;
  margin: 1.75rem 0 1.5rem;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}

.auth-card h1 {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  text-align: center;
  letter-spacing: -0.005em;
}

.auth-hint {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 0 1.1rem;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-card label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.85rem;
}

.auth-card input[type="text"],
.auth-card input[type="password"] {
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.15s ease;
}
.auth-card input:focus { outline: none; border-color: var(--fg); }

.auth-otp-input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  letter-spacing: 0.5em;
  padding-left: 0.4rem !important;
}

.auth-card button[type="submit"] {
  margin-top: 1.75rem;
  padding: 0.7rem;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.auth-card button[type="submit"]:hover { opacity: 0.88; }
.auth-card button[type="submit"]:active { opacity: 0.75; }

.auth-error {
  color: var(--sell);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  background: rgba(160, 95, 90, 0.1);
  border: 1px solid rgba(160, 95, 90, 0.3);
  border-radius: 3px;
}

.auth-success {
  color: var(--buy);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.7rem;
  background: rgba(124, 156, 122, 0.1);
  border: 1px solid rgba(124, 156, 122, 0.3);
  border-radius: 3px;
}

.auth-footer-link {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.9rem 0 0;
}
.auth-footer-link a { color: var(--fg); }

.auth-cta-btn {
  display: block;
  text-align: center;
  margin-top: 1.5rem;
  padding: 0.7rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}
.auth-cta-btn:hover { opacity: 0.88; }

.totp-qr {
  display: block;
  margin: 1rem auto 0.5rem;
  width: 200px;
  height: 200px;
  border-radius: 4px;
  background: #fff;
  padding: 8px;
}

.totp-manual {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 1rem;
  word-break: break-all;
}
.totp-manual code {
  font-family: var(--font-mono);
  color: var(--fg);
}

/* ---------- Profile / Admin ---------- */

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 380px;
}
.profile-form label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.85rem;
}
.profile-form input {
  padding: 0.6rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.profile-form input:focus { outline: none; border-color: var(--fg); }
.profile-form button {
  margin-top: 1.25rem;
  padding: 0.6rem 1rem;
  width: fit-content;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.profile-form button:hover { opacity: 0.88; }

.admin-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.admin-inline-form { margin: 0; }
.admin-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-btn:hover { color: var(--fg); border-color: var(--fg); }
.admin-btn-danger:hover { color: var(--sell); border-color: var(--sell); }

@media (max-width: 640px) {
  .auth-card { padding: 2rem 1.5rem; }
}

.brand-mark {
  height: 36px;
  width: auto;
  display: block;
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.brand-tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

main {
  /* Fluid width, not a fixed 1100px column: data-dense dashboards should
     use the screen they're given (standard practice is a fluid container
     with a hard cap so ultra-wide monitors don't stretch text forever).
     clamp() scales the side gutters smoothly between phone and desktop. */
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 2.5vw, 2.75rem);
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.6rem;
  margin: 0 0 1.5rem;
}

/* ---------- Search ---------- */

.search-bar { margin-bottom: 1.25rem; }
.search-bar input {
  width: 100%;
  max-width: 420px;
  padding: 0.55rem 0.8rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.search-bar input::placeholder { color: var(--muted); }
.search-bar input:focus {
  outline: none;
  border-color: var(--fg);
}

/* ---------- Leaderboard table ---------- */

.table-scroll { overflow-x: auto; }

table.leaderboard {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 0.85rem;
}

table.leaderboard th, table.leaderboard td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
}

table.leaderboard thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--fg);
  padding-bottom: 0.75rem;
}

table.leaderboard th a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
table.leaderboard th a:hover { color: var(--fg); }
table.leaderboard th.sorted a { color: var(--fg); }
table.leaderboard a { color: var(--fg); text-decoration: none; }

.cell-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-text { color: var(--fg); }
.cell-buy { color: var(--buy); }
.cell-sell { color: var(--sell); }

tr.row-toggle { cursor: pointer; }
tr.row-toggle:hover { background: var(--bg-hover); }

.symbol-cell {
  color: var(--fg);
  letter-spacing: 0.01em;
  max-width: 15rem;
}
.symbol-line {
  font-family: var(--font-display);
  font-weight: 800;
}

/* Dedicated "why" column: the AI's one-line bottom-line rationale next to
   its rating badge, readable at a glance on the board without opening the
   row (previously rendered inline under the ticker - moved to its own
   column so the ticker column stays a clean, fixed height). */
.ai-summary-cell, .ai-summary-header {
  max-width: 22rem;
}
.ai-summary-cell {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.chevron {
  display: inline-block;
  transition: transform 0.15s ease;
  margin-right: 0.35rem;
  color: var(--muted);
}
tr.expand-row { display: none; }
tr.expand-row.open { display: table-row; }
tr.row-toggle.open .chevron { transform: rotate(90deg); }

.expand-inner {
  padding: 1.25rem 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
  /* The company-detail panel lives inside a <td> of the leaderboard table.
     Without inline-size containment, its widest piece of content (nowrap
     metric tables, wide widgets) becomes part of the table's minimum
     content width - which used to push the whole table far wider than the
     screen and clip every detail panel at the right edge behind
     .table-scroll's horizontal scrollbar. container-type:inline-size
     applies that containment (the panel's intrinsic width contribution
     drops to zero, so it simply adopts the width the table already has
     from its normal rows, and anything wider scrolls inside its own
     .metric-table-wrap) AND makes this element a container-query context
     for the @container rule on .tv-widget-grid below. `contain` stays as
     a belt-and-braces fallback for engines without container queries. */
  container-type: inline-size;
  contain: inline-size;
  min-width: 0;
}

.tradingview-widget { width: 100%; min-height: 420px; }

/* ---------- Company detail ---------- */

/* The standalone /stock/{symbol} page renders .detail straight in <main>
   (no accordion) - make it a query container there too, so the market-
   snapshot cards below stack based on the panel's real width everywhere. */
.detail {
  container-type: inline-size;
  min-width: 0;
}

dl.stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
  margin: 1rem 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
dl.stats dt {
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
  align-self: center;
}
dl.stats dd {
  /* Drop the UA's default margin-inline-start (40px) - the grid already
     positions the value column. */
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.synced-cell { display: flex; align-items: center; gap: 0.5rem; }
.sync-badge { height: 16px; width: auto; opacity: 0.85; }

.summary { color: var(--muted); font-size: 0.9rem; }
ul.news { padding-left: 1.2rem; }

.panel {
  margin: 2rem 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.panel h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel h4 {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.data-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg);
  max-height: 260px;
  overflow-y: auto;
}
.data-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}

.empty { color: var(--muted); font-size: 0.85rem; font-family: var(--font-mono); }
.chart-note { color: var(--muted); font-size: 0.75rem; margin-top: 0.6rem; font-family: var(--font-mono); }

.tv-widget-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Stack the two market-snapshot cards when the DETAIL PANEL itself is
   narrow (container query - .expand-inner / .detail above are the
   containers), with a viewport query as fallback for older engines. */
@media (max-width: 800px) {
  .tv-widget-grid { grid-template-columns: 1fr; }
}
@container (max-width: 760px) {
  .tv-widget-grid { grid-template-columns: 1fr; }
}

/* TradingView's embed widgets default to a white surface around/behind
   the chart itself even with isTransparent+dark colorTheme set - force
   the container (and whatever it injects) dark so there's no white
   flash against the rest of the page. */
.tv-widget-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  padding: 2px;
}
.tv-widget-card iframe,
.tv-widget-card .tradingview-widget-container__widget {
  background: var(--bg-elevated) !important;
}

/* ---------- Favorites star ---------- */

.fav-col { width: 2.75rem; text-align: center; }
.ai-col, .ai-col-header { width: 3.75rem; text-align: center; }
.ai-col .ai-rating { padding: 0.15rem 0.4rem; font-size: 0.6rem; }
.ai-col-empty { color: var(--border); }
.fav-form { display: inline-block; margin: 0; }
.fav-star {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  /* Touch target: glyph alone is ~18px; padding brings the clickable
     area close to the 44x44px minimum recommended for touch (WCAG 2.5.5)
     without inflating the row height or visual size of the star itself. */
  padding: 0.6rem 0.65rem;
  margin: -0.6rem -0.65rem;
  color: var(--border);
  transition: color 0.15s ease;
}
.fav-star:hover { color: var(--muted); }
.fav-star.is-fav { color: #d4b95a; }
.fav-star.is-fav:hover { color: #e0c76e; }

.detail-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.page-sub {
  color: var(--muted);
  font-size: 0.85rem;
  margin: -0.75rem 0 1.25rem;
}
.page-sub a { color: var(--fg); }

.cell-sub {
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

/* ---------- Structured metric tables (financial ratios / key metrics) ---------- */

.metric-table-wrap {
  overflow: auto;
  max-height: 340px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
table.metric-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}
table.metric-table th, table.metric-table td {
  text-align: right;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
table.metric-table th:first-child, table.metric-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}
table.metric-table thead th {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--bg);
  position: sticky;
  top: 0;
}

/* ---------- Inline sparklines (ratio / metric trend column) ---------- */

.spark-head { text-align: center !important; }
.spark-cell { text-align: center !important; padding: 0.2rem 0.5rem !important; }
canvas.js-spark { display: inline-block; vertical-align: middle; }

/* ---------- Trend panels (redesigned) ---------- */

.trend-help {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 0.85rem;
}
.trend-key { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.6rem; }
.trend-dir { font-size: 0.7em; }

/* directional colour, shared by the trend table and the theme pills */
.trend-up { color: var(--buy); }
.trend-down { color: var(--sell); }
.trend-flat, .trend-na { color: var(--muted); }
.trend-up .trend-dir, td.trend-up { color: var(--buy); }
.trend-down .trend-dir, td.trend-down { color: var(--sell); }

table.trend-table td { font-variant-numeric: tabular-nums; }
table.trend-table td .trend-dir { margin-right: 0.25rem; }

.trend-block-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 1.1rem 0 0.5rem;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}
.trend-cat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.7rem 0.8rem;
}
.trend-cat-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.trend-pill-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.trend-pill {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.22rem 0.45rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.trend-pill b { font-weight: 700; }
.trend-pill.trend-up b { color: var(--buy); }
.trend-pill.trend-down b { color: var(--sell); }
.trend-pill.trend-flat b, .trend-pill.trend-na b { color: var(--fg); }

/* ---------- Charts ---------- */

.chart-wrap {
  position: relative;
  height: 300px;
  width: 100%;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

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

ul.news-list { list-style: none; padding: 0; margin: 0; }
.news-card { border-bottom: 1px solid var(--border); }
.news-card:last-child { border-bottom: none; }
.news-link, .news-link-static {
  display: block;
  padding: 0.75rem 0.25rem;
  text-decoration: none;
  color: var(--fg);
}
a.news-link:hover { background: var(--bg-hover); }
.news-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.news-title {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.news-text {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- AI analysis ---------- */

.ai-analysis-card {
  padding: 1rem 1.1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.ai-analysis-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.ai-analysis-date {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.ai-analysis-summary {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--fg);
}
.ai-analysis-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre-line;
}
.ai-rating {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.ai-rating-buy, .ai-rating-bullish {
  color: var(--buy);
  border-color: rgba(124, 156, 122, 0.4);
  background: rgba(124, 156, 122, 0.1);
}
.ai-rating-sell, .ai-rating-bearish {
  color: var(--sell);
  border-color: rgba(160, 95, 90, 0.4);
  background: rgba(160, 95, 90, 0.1);
}
.ai-rating-hold, .ai-rating-neutral {
  color: var(--fg);
  border-color: var(--border);
  background: var(--bg-hover);
}

/* ---------- Responsive floor ---------- */

@media (max-width: 640px) {
  .site-header { padding: 0.9rem 1rem; }
  .brand-mark { height: 30px; }
  .brand-name { font-size: 0.92rem; }
  .brand-tagline { font-size: 0.52rem; letter-spacing: 0.1em; }
  main { padding: 1.25rem 1rem; }
  h1 { font-size: 1.3rem; }
}

/* ---------- Accessibility floor ---------- */

a:focus-visible, input:focus-visible, tr.row-toggle:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .chevron { transition: none; }
}

/* ============================================================
   Polish pass — subtle depth + rhythm on top of the existing
   research-terminal look. No new colours; identity unchanged.
   ============================================================ */

/* Header reads as a fixed instrument bar with a faint hairline glow. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, #0c0c0b, var(--bg));
  box-shadow: 0 1px 0 var(--border), 0 8px 24px -18px rgba(0, 0, 0, 0.9);
}

/* Section titles get a short signal tick before the label - a small
   piece of the buy/sell palette used structurally, not decoratively. */
.panel h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.panel h3::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--buy);
  opacity: 0.8;
  flex: none;
}

/* Charts sit inside a quiet card instead of floating on pure black. */
.chart-wrap {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 0.9rem;
  height: 320px;
}

/* AI analysis card gets a left accent that echoes its rating colour
   context (kept neutral by default; the badge carries the signal). */
.ai-analysis-card {
  border-left: 2px solid var(--buy);
}

/* Leaderboard: make the active sort column subtly legible top-to-bottom. */
table.leaderboard thead th.sorted { color: var(--fg); }

/* Metric tables: gentle zebra so long tables stay readable. */
table.metric-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.014); }
table.metric-table tbody tr:hover td { background: var(--bg-hover); }

/* Give the whole detail panel a touch more vertical rhythm. */
.expand-inner { padding: 1.5rem 0.75rem 0.75rem; }
.panel:first-of-type { border-top: none; padding-top: 0; }

/* ============================================================
   Layout pass — fluid width + small-screen fit
   (goes with the fluid <main> and .expand-inner containment above)
   ============================================================ */

/* Embedded iframes (TradingView) can never force horizontal overflow -
   they shrink with their container instead. */
iframe { max-width: 100%; }

/* Phones: shorter chart cards so a chart never fills the whole screen,
   and slightly tighter card padding. Placed after the polish pass on
   purpose - the unscoped .chart-wrap rule above would otherwise win. */
@media (max-width: 640px) {
  .chart-wrap { height: 240px; padding: 0.6rem 0.65rem; }
  .expand-inner { padding: 1.1rem 0.35rem 0.5rem; }
  dl.stats { gap: 0.3rem 0.85rem; }
}