/* Stocks section (pipeline/pages/stocks.py). Shared look and colors: css/style.css. */

/* ---------- tables ---------- */
.stk-wrap { margin: 0 0 10px; }
.stk-table { font-size: 13px; font-variant-numeric: tabular-nums; }
.stk-table th, .stk-table td { padding: 8px 12px; }
.stk-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.3; min-width: 60px; }
.stk-table th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; line-height: inherit; }
.stk-table th button:hover { color: var(--ink); }
.stk-table th button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.stk-table th[aria-sort] { color: var(--ink); }
.stk-table td a { font-weight: 600; text-decoration: none; }
.stk-table td a:hover { text-decoration: underline; }
.stk-t3 th:nth-child(-n+3), .stk-t3 td:nth-child(-n+3),
.stk-t4 th:nth-child(-n+4), .stk-t4 td:nth-child(-n+4),
.stk-t5 th:nth-child(-n+5), .stk-t5 td:nth-child(-n+5) { text-align: left; }
.stk-t3 td:nth-child(3) { color: var(--ink-2); }
.stk-subs td:nth-child(3) { white-space: normal; min-width: 160px; }
.stk-rank td:first-child { color: var(--muted); }
.stk-rank td:nth-child(2) { white-space: normal; min-width: 150px; }
.stk-annual td:first-child { font-weight: 700; }

/* company column stays in view while a wide table scrolls sideways */
.stk-t3 td:first-child { white-space: normal; min-width: 150px; max-width: 220px; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.stk-t3 thead th:first-child { left: 0; z-index: 2; }
.stk-t3 tbody tr:hover td:first-child { background: var(--hover); }

/* ---------- filters and links ---------- */
.stk-filters[hidden] { display: none; }
.stk-filters .search { flex: 1 1 260px; max-width: 380px; }
.stk-select { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 0; border-radius: 14px; padding: 10px 14px; max-width: 100%; box-shadow: var(--shadow); cursor: pointer; }
.stk-select:focus { outline: 2px solid var(--accent); }
.stk-sectors { margin: 22px 0 0; }
a.chip { text-decoration: none; display: inline-block; }
a.chip[aria-current="page"] { background: var(--chip-active); color: var(--accent-ink); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.06); }
.stk-n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 3px; }
a.chip[aria-current="page"] .stk-n { color: inherit; opacity: 0.75; }
.stk-more { font-size: 14px; font-weight: 600; margin: 14px 0 0; }

/* ---------- key figure: one big number in the US-stocks color, with a signed pill ---------- */
.stk-key { margin: 24px 0 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 12px 40px; align-items: center; }
.stk-key-text { display: grid; gap: 8px; }
.stk-key .label { margin: 0; }
.stk-key .mid { color: var(--spx, var(--accent)); }
.stk-key .row { gap: 12px; }
.stk-spark { display: block; height: 96px; margin: 0; max-width: 520px; justify-self: end; width: 100%; overflow: visible; }
.stk-kb { fill: var(--spx); opacity: 0.32; }
.stk-kb.last { opacity: 1; }
.stk-kb:hover { opacity: 0.75; }
.stk-kb-t { font: 500 11px var(--font); fill: var(--muted); }
.stk-kb-v { font: 600 11px var(--font); fill: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .stk-key { grid-template-columns: minmax(0, 1fr); }
  .stk-spark { justify-self: stretch; max-width: none; height: 88px; }
}

/* ticker squircles: as wide as the ticker */
.ico.stk-tk { width: auto; min-width: 40px; padding: 0 9px; font-size: 12px; }
.ico.s.stk-tk { width: auto; min-width: 28px; padding: 0 7px; font-size: 9px; }
.stk-head { gap: 12px; }
a.card.stk-peer { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }

/* ---------- company page ---------- */
.stk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 24px; margin: 24px 0 0; padding: 18px 20px; background: var(--surface); border-radius: var(--r, 20px); box-shadow: var(--shadow); }
.stk-facts div { min-width: 0; }
.stk-facts dt { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.stk-facts dd { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.stk-stats { margin: 14px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.stk-finding { color: var(--ink-2); margin: 0 0 14px; max-width: 72ch; }
.stk-fig .legend { padding: 0 12px; margin: 0 0 4px; }
.stk-plot { min-height: 260px; }
.stk-list { margin: 0; padding-left: 20px; color: var(--ink-2); max-width: 80ch; }
.stk-list li { margin: 0 0 8px; }
.stk-caveats h2 { margin-bottom: 14px; }
.stk-credit { margin: 40px 0 0; max-width: 92ch; }
.stk-tip-extra { color: var(--muted); }

@media (min-width: 641px) {
  .stk-plot { min-height: 320px; }
}

@media (max-width: 640px) {
  .stk-table th, .stk-table td { padding: 7px 8px; }
  .stk-t3 td:first-child { min-width: 120px; max-width: 150px; }
  .stk-rank td:nth-child(2) { min-width: 120px; }
  /* on a phone the sector column gives way to the numbers (the filter and the company page have it) */
  .stk-t3 th:nth-child(3), .stk-t3 td:nth-child(3),
  .stk-rank th:nth-child(4), .stk-rank td:nth-child(4) { display: none; }
  .stk-rank th:first-child { min-width: 0; }
  .stk-bb th:nth-child(n+5):nth-child(-n+7), .stk-bb td:nth-child(n+5):nth-child(-n+7) { display: none; }
  .stk-filters .search { min-width: 0; flex: 1 1 100%; max-width: none; }
  .stk-select { flex: 1 1 auto; }
  .stk-facts { padding: 16px; gap: 10px 16px; }
}