/* The stock and options pages: what only they have, on the design system's tokens (static/css/base.css). */

/* A stock's price, under its title. */
.quote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 20px; }
.quote-change { font-weight: 600; font-size: 1.0625rem; }
.quote .pill-state { align-self: center; }
.quote-stats { margin-top: 16px; max-width: 54rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.quote-time { margin: 12px 0 0; }

/* What the model says about one stock, beside its trend. */
.ticker-read > * { min-width: 0; }
.ticker-read { grid-template-columns: minmax(0, 1fr); display: grid; gap: 28px; }
@media (min-width: 900px) { .ticker-read { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 48px; } }
.read-word { display: flex; align-items: center; gap: 10px; margin: 8px 0 8px; }
.read-note { margin: 0 0 20px; }
.read-chart-title { margin-bottom: 12px; }
.trend-count { margin: 12px 0 0; }
.company-facts dd { overflow-wrap: anywhere; }
.company-facts dd a { color: var(--accent); }

/* Chips that lead on to other stocks. */
.chips-title { margin: 28px 0 12px; }
.chips-title:first-child { margin-top: 0; }
.chip-name { color: var(--muted); font-weight: 400; }
.chip:hover .chip-name { color: var(--text); }

/* On a phone, a long row of choices scrolls rather than pushing the content below the fold. */
@media (max-width: 767.98px) {
  .chips--scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-block: 2px 6px; }
  .chips--scroll .chip { flex: none; white-space: nowrap; }
}

/* A letter of the alphabet as a chip. */
.chips--letters { gap: 6px; }
.chips--letters .chip { min-width: 40px; justify-content: center; padding-inline: 8px; }
.chips--letters .chip-off { color: var(--muted); border-color: transparent; opacity: 0.55; }

/* A long list of stocks, in columns. */
.ticker-list { list-style: none; margin: 0; padding: 0; }
.ticker-list > li { min-width: 0; border-bottom: 1px solid var(--hairline); }
.ticker-list .row-link { padding: 10px 4px; gap: 12px; }
.ticker-list .row-title { flex: 0 0 4.5rem; overflow-wrap: anywhere; }
.ticker-list .row-note { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; }

/* How a group of stocks leans today. */
.lean-stats { max-width: 44rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lean-bar { display: block; width: 100%; max-width: 44rem; height: 8px; margin-top: 16px; border-radius: 4px; overflow: hidden; background: var(--wash); }
.lean-bar .lean-up { fill: var(--up); }
.lean-bar .lean-even { fill: var(--muted); }
.lean-bar .lean-down { fill: var(--down); }
.lean-date { margin: 12px 0 0; }

/* Tables of text as well as numbers. */
.data-table th.t-left, .data-table td.t-left { text-align: left; }
.data-table td.col-name { white-space: normal; min-width: 11rem; }
.data-table td.col-rank { color: var(--muted); font-weight: 400; }
.data-table td.col-stock { white-space: normal; min-width: 7.5rem; }
.data-table td.empty-row { text-align: center; color: var(--muted); padding-block: 32px; white-space: normal; font-weight: 400; }
.data-table .contract-link { color: var(--heading); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; }
.data-table .contract-detail { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }

/* The record: performance, open and closed predictions. */
.record-tabs { margin: 28px 0 20px; }
.record-title { margin-bottom: 8px; }
.record-note { margin-bottom: 20px; max-width: 44rem; }
.record-stats { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.record-stats .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .record-stats .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.record-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.record-loading { display: flex; align-items: center; gap: 10px; min-height: 96px; color: var(--muted); font-size: 0.9375rem; }
.record-more { margin-top: 20px; }
.record-more p { color: var(--muted); font-size: 0.9375rem; }
.pagination { flex-wrap: wrap; gap: 4px; margin: 0; }
.page-link { min-width: 40px; min-height: 40px; text-align: center; border-radius: var(--radius-small) !important; }

/* The showcase as these pages use it: nothing is cut off, and the phone is a size that fits beside the words. */