/* Colors, type, and spacing come from tokens.css (vendored from
   ../design-system/). This file only holds Baseline's own layout
   and components. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  font-family: var(--ds-font-display);
  min-height: 100vh;
}

.mono, .price, td, .hero-sub span, thead th {
  font-family: var(--ds-font-mono);
}

/* Header/nav/theme-toggle now live in components.css as the shared .topbar
   component (vendored from ../design-system/). Baseline-only header layout,
   if any is ever needed beyond the vendored primitive, goes here instead. */

.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.hero-line {
  font-size: var(--ds-text-display);
  line-height: 1.15;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

.hero-line span {
  font-family: var(--ds-font-mono);
  font-weight: 500;
}

#heroUp { color: var(--ds-color-positive); }
#heroDown { color: var(--ds-color-negative); }

.hero-sub {
  color: var(--ds-color-text-muted);
  margin: 16px 0 0;
  font-size: 0.92rem;
}

.movers {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.movers h2, .scan h2 {
  font-size: var(--ds-text-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--ds-color-text-muted);
  margin: 0 0 14px;
  font-family: var(--ds-font-mono);
}

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

.mover-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--ds-color-border);
  cursor: pointer;
}

.mover-list li:hover .sym { color: var(--ds-color-accent); }

.mover-list .sym {
  font-weight: 500;
}

.mover-list .pct {
  font-family: var(--ds-font-mono);
  font-size: 0.88rem;
}

.pct.up { color: var(--ds-color-positive); }
.pct.down { color: var(--ds-color-negative); }

.scan {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--ds-space-5) 24px 60px;
}

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

.scan-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scan-controls input,
.scan-controls select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ds-color-border);
  color: var(--ds-color-text);
  font-family: var(--ds-font-mono);
  font-size: 0.82rem;
  padding: 5px 2px;
}

.topbar .mark { color: var(--ds-color-text); text-decoration: none; }

.topbar nav a { word-spacing: -0.2em; }

/* Every page shows the same four nav links so the centered nav block
   (and every link inside it) stays the same width and position on
   every page. The current page's link takes the full text color while
   the others stay muted, and it is not clickable. */
.topbar nav a.current { color: var(--ds-color-text); pointer-events: none; }

.scan-controls input { width: 130px; }
.scan-controls input:focus,
.scan-controls select:focus {
  outline: none;
  border-bottom-color: var(--ds-color-accent);
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.col-symbol, .col-price, .col-change, .col-signal, .col-recommendation { width: 20%; }

/* Sticky under the sticky topbar so the column names stay visible down a
   134-row table. With border-collapse the th's own bottom border doesn't
   stick with it, so ::before draws the line instead (::after holds the
   sort arrow). */
thead th {
  position: sticky;
  top: var(--ds-topbar-height);
  z-index: 1;
  background: var(--ds-color-bg);
  text-align: left;
  padding: 8px 4px;
  color: var(--ds-color-text-muted);
  font-weight: 400;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

thead th::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ds-border-width);
  background: var(--ds-color-border);
}

thead th.sorted-asc::after { content: " ↑"; }
thead th.sorted-desc::after { content: " ↓"; }

tbody tr {
  border-bottom: 1px solid var(--ds-color-border);
  cursor: pointer;
}

tbody tr:hover { background: var(--ds-color-bg-raised); }

tbody td {
  padding: 9px 4px;
}

.signal-uptrend { color: var(--ds-color-positive); }
.signal-downtrend { color: var(--ds-color-negative); }
.signal-flat { color: var(--ds-color-text-muted); }

.rec-unsure { color: var(--ds-color-text-muted); }

.empty {
  padding: 20px 0;
  color: var(--ds-color-text-muted);
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal[hidden] { display: none; }

.modal-card {
  background: var(--ds-color-bg);
  border: 1px solid var(--ds-color-border);
  padding: 28px;
  width: 100%;
  max-width: 620px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: var(--ds-color-text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}

.modal-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.modal-head h3 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
}

.modal-head span {
  font-family: var(--ds-font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.range-picker {
  display: flex;
  gap: 4px;
  margin-bottom: var(--ds-space-1);
}

.range-picker button {
  background: none;
  border: 1px solid var(--ds-color-border);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  cursor: pointer;
}

.range-picker button:hover { border-color: var(--ds-color-border-strong); color: var(--ds-color-text); }

.range-picker button.active {
  border-color: var(--ds-color-accent);
  color: var(--ds-color-accent);
}

#modalChart {
  width: 100%;
  height: 240px;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.th-short { display: none; }

@media (max-width: 640px) {
  .movers { grid-template-columns: 1fr; gap: 24px; }

  /* Five equal columns don't fit a phone: "RECOMMENDATION" and long ETF
     symbols pushed the page sideways. Give the symbol more room and let it
     wrap, tighten the type and padding, and shorten the last header. */
  table { font-size: 0.72rem; }
  .col-symbol { width: 27%; }
  .col-price { width: 21%; }
  .col-change { width: 16%; }
  .col-signal { width: 20%; }
  .col-recommendation { width: 16%; }
  thead th { padding: 8px 2px; letter-spacing: 0.02em; }
  tbody td { padding: 8px 2px; }
  tbody td:first-child { overflow-wrap: anywhere; }
  /* The tag goes under the symbol, so a long ETF symbol keeps the full
     column width instead of splitting mid-word beside it. */
  tbody td:first-child .type-tag { display: table; margin: var(--ds-space-half) 0 0; }
  .th-full { display: none; }
  .th-short { display: inline; }
}

/* Listings that stopped printing prices: kept in the scan, marked, and left
   out of the headline counts and mover lists. */
.stale-tag {
  margin-left: var(--ds-space-1);
  padding: 1px 6px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius);
  color: var(--ds-color-text-faint);
  font-family: var(--ds-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Marks an ETF in the table and the movers lists. Same shape as the stale
   tag, but muted rather than faint: it carries information, and faint text
   is for decoration only. */
.type-tag {
  margin-left: var(--ds-space-1);
  padding: 1px 6px;
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.signal-none { color: var(--ds-color-text-muted); }

tr.is-stale td { color: var(--ds-color-text-muted); }
tr.is-stale .pct { color: var(--ds-color-text-faint); }

.modal-stale {
  margin: 0 0 var(--ds-space-1);
  color: var(--ds-color-text-muted);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-label);
}