/* trade_canvas/static/assets/css/security-page.css
 *
 * The stock page, /securities/<TICKER> (C82, EXP-09 round 1), on the public
 * frame (templates/public/site/base.html). Only what public-site.css doesn't
 * already give: the header (logo, price row, 52-week range bar), the answer,
 * the returns table, the short offer's layout and the related links. The
 * chart and its cards are the Performance component's own (performance-chart.css).
 *
 * Check G's rules hold here: the frame's --ps-* tokens, sizes 12/14/16/20/28
 * plus the H1's 32/48, Nunito 400/600/700, tabular figures, flat surfaces
 * (no shadows, gradients or glow), green/red only on figures. Margins are
 * scoped under .ps because public-site.css resets `.ps p` and `.ps h3`.
 */

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

.sp-head-body {
  display: grid;
  gap: 16px;
}

.sp-identity {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.sp-identity-text {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* A long fund name or ticker wraps inside the 16px gutter, never past it. */
.ps .sp-identity h1 { overflow-wrap: break-word; }

/* The issuer's logo, or the ticker's first letters; a flat disc, no frame. */
.sp-logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ps-surface);
}

/* Contained with an inset: a wordmark logo (Schwab, SPDR) cropped at the
   disc's edges read "SCHWAI" (ui-review 2026-10-19). */
.sp-logo img {
  width: 100%;
  height: 100%;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;
}

.sp-logo-fallback {
  color: var(--ps-text-2);
  font-size: var(--ps-fs-14);
  font-weight: 700;
}

.sp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  color: var(--ps-muted);
  font-size: var(--ps-fs-14);
}

.sp-meta-item { white-space: nowrap; }

.sp-meta-item > [aria-hidden] { margin-right: 8px; }

/* Neutral, not green: green is for gains and losses (Messaging §9b). */
.sp-symbol {
  color: var(--ps-text-2);
  font-weight: 600;
}

.sp-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  font-variant-numeric: tabular-nums;
}

.sp-price {
  color: var(--ps-text);
  font-size: var(--ps-fs-20);
  font-weight: 700;
  line-height: 1.2;
}

@media (min-width: 576px) {
  .sp-price { font-size: var(--ps-fs-28); }
}

.sp-change {
  color: var(--ps-text);
  font-size: var(--ps-fs-16);
  font-weight: 600;
  white-space: nowrap;
}

.sp-session {
  color: var(--ps-muted);
  font-weight: 400;
}

.sp-when,
.sp-facts {
  color: var(--ps-muted);
  font-size: var(--ps-fs-12);
}

.sp-price-none { color: var(--ps-muted); }

/* The facts line belongs to the price above it. */
.ps .sp-price-row + .sp-facts { margin-top: -10px; }

/* Green/red only on figures (Messaging §9b): the day's move, the returns table. */
.ps .sp-pos { color: var(--ss-pos, #34d399); }
.ps .sp-neg { color: var(--ss-neg, #f87171); }

/* The 52-week range: a neutral track, the low and high under its ends, and
   the current price as one purple data mark (the chart's primary colour).
   The rail is inset by the marker's radius, so a price at the low or the
   high sits on the track's end rather than past it. */
.sp-range {
  display: grid;
  gap: 6px;
  max-width: 360px;
  font-variant-numeric: tabular-nums;
}

.sp-range-label {
  color: var(--ps-muted);
  font-size: var(--ps-fs-12);
}

.sp-range-track {
  position: relative;
  height: 4px;
  margin-block: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}

.sp-range-rail {
  position: absolute;
  inset: 0 6px;
}

.sp-range-marker {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  width: 12px;
  height: 12px;
  border: 2px solid var(--ps-bg);
  border-radius: 50%;
  background: #8b5cf6;
  transform: translate(-50%, -50%);
}

.sp-range-ends {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ps-text-2);
  font-size: var(--ps-fs-12);
}

.sp-note {
  max-width: 60ch;
  color: var(--ps-text-2);
}

/* ---------- Has it beaten the S&P 500? ---------- */

.sp-section-head {
  display: grid;
  gap: 12px;
  max-width: 720px;
  margin-bottom: 24px;
}

/* The answer reads like the frame's lead: 16, 20 from 992px. */
.sp-answer {
  max-width: 60ch;
  color: var(--ps-text-2);
  font-size: var(--ps-fs-16);
}

@media (min-width: 992px) {
  .sp-answer {
    font-size: var(--ps-fs-20);
    line-height: 1.55;
  }
}

.ps .sp-fine {
  max-width: 72ch;
  margin-top: 4px;
  color: var(--ps-muted);
  font-size: var(--ps-fs-12);
}

.ps .sp-periods-heading { margin: 40px 0 12px; }

/* A real table, so crawlers and screen readers get every period's figures.
   At 375px its three columns fit: the period names take the room left by
   the two figure columns. */
.sp-table {
  width: 100%;
  max-width: 560px;
  border-collapse: collapse;
  font-size: var(--ps-fs-14);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 576px) {
  .sp-table { font-size: var(--ps-fs-16); }
}

.ps .sp-table th,
.ps .sp-table td {
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid var(--ps-line);
  text-align: right;
  vertical-align: baseline;
}

.ps .sp-table th:first-child {
  padding-left: 0;
  text-align: left;
}

.ps .sp-table thead th {
  color: var(--ps-muted);
  font-size: var(--ps-fs-12);
  font-weight: 600;
}

.ps .sp-table tbody th {
  color: var(--ps-text-2);
  font-weight: 400;
}

.ps .sp-table td {
  color: var(--ps-text);
  font-weight: 600;
  white-space: nowrap;
}

.ps .sp-table td.sp-pos { color: var(--ss-pos, #34d399); }
.ps .sp-table td.sp-neg { color: var(--ss-neg, #f87171); }

.ps .sp-risk {
  max-width: 72ch;
  margin-top: 16px;
  color: var(--ps-text-2);
  font-size: var(--ps-fs-14);
  font-variant-numeric: tabular-nums;
}

/* ---------- Offers ---------- */

/* The short offer's band is shorter than a section's: two lines and the pair. */
.ps .ps-band#sp-offer { padding-block: 40px; }

.sp-offer {
  display: grid;
  gap: 20px;
}

.sp-offer-copy {
  display: grid;
  gap: 8px;
  max-width: 640px;
}

.sp-offer-q {
  color: var(--ps-text);
  font-size: var(--ps-fs-16);
  font-weight: 700;
}

.sp-offer-cta {
  display: grid;
  gap: 12px;
}

/* From 992px the copy and the buttons share a row, as the compact hero does. */
@media (min-width: 992px) {
  .ps .ps-band#sp-offer { padding-block: 56px; }

  .sp-offer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 56px;
  }
}

@media (max-width: 575.98px) {
  .sp-offer { gap: 16px; }
  .sp-offer-cta { gap: 8px; }
}

.sp-fallback {
  color: var(--ps-text-2);
  font-size: var(--ps-fs-14);
}

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

.ps .sp-related {
  display: grid;
  gap: 16px;
  margin-top: 56px;
}

.sp-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Neutral chips at the 44px touch size: links to reference pages, not offers. */
.ps a.sp-related-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ps-surface);
  color: var(--ps-text-2);
  font-size: var(--ps-fs-14);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.ps a.sp-related-link:hover {
  background: #1c2c48;
  color: var(--ps-text);
}

.ps a.sp-related-link:focus-visible {
  outline: 2px solid var(--ps-brand-focus);
  outline-offset: 2px;
}