/* Styles specific to index.html (the homepage / market dashboard). The
   ticker/company lookup hero that used to live here moved to search.html
   (see css/search.css) when the homepage became a dashboard. */

main {
  padding: 2rem;
  max-width: 1440px;
}

.scroll-down {
  display: block;
  margin: 2.5em auto 0 auto;
  width: 32px;
  color: var(--brand-blue);
  opacity: 0.85;
  animation: bounce 2s infinite;
  transition: opacity .18s;
}
.scroll-down:hover { opacity: 1; }
.scroll-down svg path { stroke: currentColor; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.custom-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -3rem; /* prevents any little white line */
}

.custom-divider svg {
  display: block;
  width: 100%;
}

/* ===== Dashboard top row =====
   The page title (left, a square-ish card of its own -- see the
   .dashboard-page-title.dashboard-card override below) and the watchlist
   card (right, #watchlist-section, see below) sit side by side in one row.
   align-items: stretch makes the shorter of the two match the taller one's
   height. Wraps to stacked on narrow screens. */

.dashboard-top-row {
  display: flex;
  align-items: stretch;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto 1.4em auto;
  padding: 0 1.2em;
  flex-wrap: wrap;
}

.dashboard-page-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dashboard-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brand-ink);
  margin: 0 0 0.2rem 0;
  white-space: nowrap;
}

.dashboard-subtitle {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.35;
}

.dashboard-subtitle a {
  font-size: 1.05rem;
  font-weight: 700;
}

/* ===== Dashboard card =====
   .dashboard-card is the shared card language (white / var(--color-border) border /
   10px radius). Currently only #watchlist-section uses it (the "Live From
   Our Database" stat card that used to sit beside it was dropped
   entirely). min-width: 0 overrides the flex item default of
   min-width: auto (sized to content) -- without it, the watchlist card's
   own row of fixed-width ticker cards can't shrink below its content's
   natural width, which pushes .dashboard-top-row (and the whole page)
   wider than the viewport instead of the card's internal grid scrolling
   sideways on its own (see .watchlist-grid's overflow-x: auto). */

.dashboard-card {
  flex: 1 1 400px;
  min-width: 0;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
}

/* Overrides .dashboard-card's flex-grow so the title card stays a fixed,
   roughly square block instead of stretching to share the row equally
   with the (much wider) watchlist card beside it -- a tidy, self-contained
   box rather than a wide strip of mostly-empty text. */
.dashboard-page-title.dashboard-card {
  flex: 0 0 320px;
  padding: 0.85rem 1.4rem;
}

@media (max-width: 640px) {
  .dashboard-page-title.dashboard-card {
    flex: 1 1 100%;
  }
}

/* ===== Market Overview (real data, from data/homepage_snapshot.json --
   see scripts/generate_homepage_snapshot.py) ===== */

.market-overview-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.2em;
}

/* ===== Dashboard blocks grid =====
   Generic container for the homepage's dashboard blocks -- most are compact
   ranked-company lists (see .qs-list below, styled after company.html's
   Overview quickstat cards) plus two charts, but the grid/card chrome is
   deliberately not content-specific so future block kinds can drop into the
   same layout. `dense` packing plus a `--wide` (2-column) variant is what
   keeps this from reading as a monotonous "identical cards per row" grid --
   blocks are different natural heights and the charts span wider, so dense
   packing pulls shorter blocks up to fill the gaps left by taller ones,
   closer to a masonry layout than uniform rows. */

.dashboard-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
}

.dashboard-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
}

.dashboard-block--wide {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .dashboard-block--wide {
    grid-column: span 1;
  }
}

.dashboard-block h3 {
  margin: 0 0 0.6em 0;
  font-size: 1rem;
  color: var(--brand-ink);
}

/* ===== Bar chart blocks (shared by the sector performance chart) ===== */

.mc-bar-chart {
  display: block;
  width: 100%;
  height: auto;
}

.mc-bar-label {
  font-size: 11px;
  font-weight: 700;
  fill: var(--brand-ink);
}

.mc-bar-value {
  font-size: 10px;
  fill: var(--color-text-secondary);
}

/* ===== Compact ranked-company list (most dashboard blocks) =====
   Styled after company.html's Overview quickstat cards (css/company.css's
   .quickstat-row) -- a label/value row, no header, no columns to line up --
   so a block reads at a glance and never needs a horizontal scroll no
   matter how long a company name or how wide a value gets (the name and
   value both truncate/stay put inside a fixed-width row instead). */

.qs-list {
  display: flex;
  flex-direction: column;
}

.qs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px;
  border-top: 1px solid var(--color-surface-tint);
  text-decoration: none;
  border-radius: 4px;
  line-height: 1.3;
}

.qs-row:first-child {
  border-top: none;
}

.qs-row:hover {
  background: var(--color-surface-soft);
}

.qs-left {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.qs-ticker {
  flex: none;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--brand-blue);
}

.qs-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-value {
  flex: none;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--brand-ink);
  white-space: nowrap;
}

.qs-value .is-positive { color: var(--color-positive); }
.qs-value .is-negative { color: var(--color-negative); }

/* ===== Two-column ranked list (Movers, Growth Leaders) =====
   Folds a pair of near-identical rankings (e.g. Gainers/Losers) into one
   wide block instead of two visually-identical qs-list blocks back to
   back -- see twoColumnList() in js/home.js. */

.qs-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

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

.qs-column {
  min-width: 0;
  border-left: 1px solid var(--color-surface-tint);
  padding-left: 20px;
}

.qs-column:first-child {
  border-left: none;
  padding-left: 0;
}

@media (max-width: 640px) {
  .qs-column {
    border-left: none;
    padding-left: 0;
  }
}

.qs-column-title {
  margin: 0 0 0.4em 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* ===== Sector performance chart (diverging bar chart) =====
   Same magnitude-chart language as .mc-bar-chart, but bars grow left/red
   or right/green from a shared zero axis instead of all growing right from
   a label -- see sectorPerformanceChart() in js/home.js. */

.sector-bar-fill-pos {
  fill: var(--color-positive);
}

.sector-bar-fill-neg {
  fill: var(--color-negative);
}

.sector-bar-axis {
  stroke: var(--color-border);
  stroke-width: 1;
}

/* ===== Featured price chart block =====
   Reuses js/price-chart.js's renderPriceChart() verbatim (same function
   company.html's Overview tab uses), so it needs that module's hover/
   tooltip class names -- duplicated here rather than shared with
   css/company.css since each page-specific stylesheet is already
   self-contained on this site (see css/search.css). */

.dashboard-price-chart {
  min-height: 160px;
}

.trend-chart-inner {
  position: relative;
}

.trend-hover-capture {
  cursor: crosshair;
}

.trend-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  background: var(--color-text);
  color: var(--color-surface);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(20, 30, 50, 0.25);
  z-index: 5;
  white-space: nowrap;
}

.trend-tooltip-period {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.trend-tooltip-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.trend-tooltip-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.trend-tooltip-label {
  flex: 1 1 auto;
  margin-right: 10px;
}

.trend-tooltip-value {
  font-weight: 700;
}

.trend-chart-empty {
  color: var(--color-text-secondary);
  text-align: center;
  padding: 40px 0;
}

/* ===== "Your Companies" watchlist section (index.html) =====
   #watchlist-section is a .dashboard-card, now the sole full-width block
   under the thin page title -- deliberately kept as one thin row (title on
   the left, content filling the rest) rather than a tall stacked card:
   the title and content are laid out side by side, and the card grid
   scrolls horizontally instead of wrapping to further rows, so this block's
   height never grows past a single card no matter how many companies are
   starred (see WATCHLIST_PREVIEW_LIMIT in js/home.js, which also caps the
   row to a handful of cards + a "view all" card linking to watchlist.html --
   the uncapped, normal-wrapping version of this same grid, see
   css/watchlist.css). :empty (signed in, nothing starred yet) drops the
   card entirely rather than leaving a blank bar. */

.watchlist-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
}

.watchlist-section:empty {
  display: none;
}

.watchlist-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-ink);
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.watchlist-empty-state {
  display: flex;
  align-items: center;
  gap: 0.8em;
  flex: 1 1 260px;
  min-width: 0;
}

.watchlist-empty-icon {
  font-size: 1.2rem;
  color: #f0a63a;
  flex: 0 0 auto;
}

.watchlist-empty-state p {
  color: var(--color-text-secondary);
  font-size: 0.86rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 160px;
}

.watchlist-empty-state .auth-signin-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* At very narrow widths there isn't room for the icon + message + Sign In
     button in one row without the message's 160px floor forcing an
     overflow -- let the row wrap instead. */
  .watchlist-empty-state {
    flex-wrap: wrap;
  }
  .watchlist-empty-state p {
    min-width: 0;
    flex-basis: 100%;
  }
}

.watchlist-scroll-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.watchlist-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  /* Hide the native scrollbar -- the row is still scrollable by drag/wheel/
     trackpad, but the only visible scroll affordance is the minimal prev/
     next arrows either side (js/home.js's wireWatchlistScrollButtons),
     which also keeps the row from reserving extra height for a scrollbar
     track. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.watchlist-scroll-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}

.watchlist-scroll-btn:hover {
  color: var(--brand-blue);
  background: var(--color-surface-tint);
}

.watchlist-scroll-btn.is-hidden {
  visibility: hidden;
}

.watchlist-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  width: 200px;
  flex: 0 0 200px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Homepage preview row only (#watchlist-grid, capped to
   WATCHLIST_PREVIEW_LIMIT -- see js/home.js) -- trimmed down to just the
   ticker, price and one headline stat (2 lines total) so the row stays as
   short as possible. The company name and the rest of the stats
   (P/E, Mkt Cap / Revenue, Net Income) stay on the full list at
   watchlist.html (css/watchlist.css), where cards have more room to
   spare -- renderWatchlistCard (js/watchlist-cards.js) always builds all
   of them; this just hides the extras here. */
#watchlist-grid .watchlist-card {
  gap: 2px;
  padding: 7px 12px;
}

#watchlist-grid .watchlist-card-name {
  display: none;
}

#watchlist-grid .watchlist-card-stats {
  padding-top: 3px;
  flex-wrap: nowrap;
}

#watchlist-grid .watchlist-card-stats span:nth-child(n+2) {
  display: none;
}

.watchlist-card:hover {
  border-color: var(--brand-blue);
  box-shadow: 0 2px 10px rgba(14, 109, 209, 0.1);
}

.watchlist-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.watchlist-card-ticker {
  font-weight: 700;
  color: var(--brand-blue);
  font-size: 0.98rem;
}

.watchlist-card-price {
  font-weight: 700;
  color: var(--brand-ink);
  font-size: 0.95rem;
}

.watchlist-card-name {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-surface-tint);
  padding-top: 8px;
}

.watchlist-card-stats span strong {
  color: var(--brand-ink);
}

.watchlist-card-stats .is-positive strong { color: var(--color-positive); }
.watchlist-card-stats .is-negative strong { color: var(--color-negative); }

/* Shown in place of a card once the preview grid hits
   WATCHLIST_PREVIEW_LIMIT (js/home.js) -- links to the full,
   uncapped list on watchlist.html instead of letting this block grow
   without bound as more companies are starred. */
.watchlist-view-all-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-surface-tint);
  gap: 4px;
}

.watchlist-view-all-count {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-blue);
}

.watchlist-view-all-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* ===== Services ===== */

@keyframes section-gradient-drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.services-section {
  background: linear-gradient(120deg, var(--color-surface-soft) 0%, var(--color-surface-tint) 50%, var(--color-surface-soft) 100%);
  background-size: 200% 200%;
  animation: section-gradient-drift 16s ease-in-out infinite;
  padding: 3em 1em;
  text-align: center;
}
.services-section h2 {
  font-size: 2em;
  margin-bottom: 2em;
}
.services-grid {
  display: flex;
  justify-content: center;
  gap: 2em;
  flex-wrap: wrap;
}
.service-card {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(68, 109, 224, 0.07);
  width: 240px;
  padding: 2em 1.2em 1.5em 1.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .18s, box-shadow .18s;
}
.service-card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 8px 32px rgba(68, 109, 224, 0.16);
}
.service-icon {
  font-size: 2.5em;
  margin-bottom: 1em;
}
.service-card h3 {
  margin-bottom: .7em;
  color: var(--brand-blue);
}
.service-card p {
  font-size: 1em;
  color: var(--color-text-secondary);
}

/* ===== Data coverage banner ===== */

.coverage-message {
  max-width: 950px;
  margin: 5rem auto;
  padding: 2rem;
  background: var(--color-surface-soft);
  border: 2px solid var(--brand-blue);
  border-radius: 1rem;
  text-align: center;
  font-size: 1.15rem;
}
.coverage-message .coverage-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* ===== "Coming soon" service badge ===== */

.service-badge {
  display: inline-block;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-tint);
  border-radius: 1em;
  padding: 0.2em 0.6em;
  margin-left: 0.4em;
  vertical-align: middle;
}

/* ===== Small screens ===== */

@media (max-width: 600px) {
  main {
    padding: 1rem;
  }
  header {
    padding: 0.5rem;
  }
  footer {
    padding: 0.5rem;
  }
  .services-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
  }
  .service-card {
    width: 90%;
    margin-bottom: 2em;
  }
}