/* Copyright (c) 2026 Goldeneye Technologies LLC. All rights reserved. */
/*
Per-ticker SSR landing page (templates/html/ticker.html). Small, token-driven.
The .ticker-pct-* colors match the DEFAULT "modern" map palette end stops
(map/color_scale.js signColor) so the number reads the same as the mini-map
marker: blue = gain, red = loss, grey = flat.
*/

.ticker-page {
  max-width: 640px;
}

.ticker-symbol {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

/* Headquarters block (above the fold — the page's ranking content) --------- */
.ticker-hq {
  margin: var(--space-4) 0 var(--space-5);
}

.ticker-hq-heading,
.ticker-quote-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ticker-address {
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

/* Provenance badge under the address. The `.ts-badge*` rules are site-wide
   (global.css); the page only sizes it up from the info panel's cramped xs,
   since here there is room and the badge is ranking-adjacent content. */
.ticker-badge-line {
  margin: var(--space-2) 0 0;
}

.ticker-badge-line .ts-badge {
  font-size: var(--font-size-sm);
  padding: 2px var(--space-2);
}

.ticker-badge-line .ts-badge-icon {
  flex-basis: 16px;
  height: 16px;
  width: 16px;
}

.ticker-contrast {
  margin: var(--space-3) 0 0;
  line-height: var(--line-height-base);
}

/* Up-link to the company's state hub (P13). In-content, under the address
   block, because that is where it is relevant — not in the footer links. */
.ticker-hub-link {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.ticker-no-hq,
.ticker-provenance {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.ticker-no-hq {
  margin: var(--space-4) 0 var(--space-5);
}

.ticker-provenance {
  margin: 0 0 var(--space-5);
}

/* Quote line (demoted below the location content) -------------------------- */
.ticker-quote-heading {
  margin-top: var(--space-6);
}

.ticker-quote {
  margin: var(--space-3) 0 var(--space-1);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ticker-price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.ticker-pct {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.ticker-pct-up   { color: #1a6aae; }  /* modern palette strongest-gain (blue) */
.ticker-pct-down { color: #b21f29; }  /* modern palette strongest-loss (red)  */
.ticker-pct-flat { color: var(--color-text-muted); }

.ticker-quote-na {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.ticker-quote-caption {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Metadata definition list ----------------------------------------------- */
/* Bottom margin is the small one so the sector-provenance line sits with the
   list it annotates; without it the next block's own top margin collapses
   against this and the spacing is unchanged. */
.ticker-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-3);
}

.ticker-meta dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.ticker-meta dd {
  margin: 0;
  line-height: var(--line-height-base);
}

/* As-of qualifier on the market cap. Market cap is a price times a share count
   filed with the SEC on a date, and that date is the honest limit of the claim
   (batch-7 D1). Muted and small so it reads as a footnote to the value, not as
   a second value. */
.ticker-meta .ticker-meta-note {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* Mini-map --------------------------------------------------------------- */
#ticker_map {
  height: 320px;
  width: 100%;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Match the main map's token-based control look. The main map styles its
   toolbar BUTTON children (.leaflet-control-zoom button, content_map.css);
   the mini-map uses Leaflet's default zoom control, whose +/- are <a>
   elements, so mirror the same surface/hover/focus tokens onto them here.
   Scoped to #ticker_map so it never leaks to the main map. */
#ticker_map .leaflet-control-zoom a {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border-bottom-color: var(--color-border);
  transition: background-color var(--transition-base), color var(--transition-base);
}
#ticker_map .leaflet-control-zoom a:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text);
}
/* Inset the keyboard focus ring so it stays inside the stacked control instead
   of being clipped by the button below — mirrors the content_map.css pattern. */
#ticker_map .leaflet-control-zoom a:focus-visible {
  outline-offset: -2px;
}

/* Footer links + disclaimer ---------------------------------------------- */
.ticker-links {
  margin: 0 0 var(--space-5);
}

.ticker-disclaimer {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}