/* Portal rework step 6: US Stocks (Heatmap, Top 100, Movers, ETFs). Every rule sits under html[data-flag-rw-s6-stocks]
   (public/flags.js sets it when the flag is on), so with the flag off this file changes nothing. A phone is under 700px,
   as in portal.css. Loaded after portal.css in portal/app.html. */

/* ---------------------------------------------------------------- head */
/* "Wall Street, distilled" and the time go on a phone; the day and the delay stay. */
html[data-flag-rw-s6-stocks] .view-stocks .v-sub .nw { white-space: nowrap; }
@media (max-width: 699px) {
  html[data-flag-rw-s6-stocks] .view-stocks .v-sub .vs-what { display: none; }
  /* The Live / Market Closed chip sits at the right of the kicker line. */
  html[data-flag-rw-s6-stocks] .view-stocks .v-title { position: relative; }
  html[data-flag-rw-s6-stocks] .view-stocks .v-title > .kicker { max-width: calc(100% - 8.5rem); }
  html[data-flag-rw-s6-stocks] .view-stocks .v-src { position: absolute; top: 0; right: 0; }
  /* (with rw-s3-first-screen the kicker and the day share one line, .v-k: it leaves the chip's room too, and the day wraps under the kicker where it is short of it) */
  html[data-flag-rw-s6-stocks] .view-stocks .v-title .v-k { padding-right: 8.5rem; }
}
/* From 1920px "Also in Discord" takes its own row. */
@media (min-width: 1920px) {
  html[data-flag-rw-s6-stocks] .view-stocks .v-row .cmd-chip { flex: 0 0 100%; max-width: max-content; }
}

/* ---------------------------------------------------------------- heatmap */
/* Tile words are 11px or more; a narrow tall tile carries its ticker on its side. */
html[data-flag-rw-s6-stocks] .view-stocks .tm-name { font-size: 11px; }
html[data-flag-rw-s6-stocks] .view-stocks .tm-cell .tm-side { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; white-space: nowrap; }
html[data-flag-rw-s6-stocks] .view-stocks .tm-legend span { font-size: 0.75rem; line-height: 1; padding: 0.25rem 0; }
@media (max-width: 699px) {
  /* The map is about as tall as it is wide; the key and the colour choice run the panel's width. */
  html[data-flag-rw-s6-stocks] .view-stocks .tm-panel .treemap { height: auto; aspect-ratio: 4 / 5; }
  html[data-flag-rw-s6-stocks] .view-stocks .tm-panel .panel-head .tm-legend { flex: 1 1 100%; }
  html[data-flag-rw-s6-stocks] .view-stocks .tm-panel .panel-head .tm-legend span { flex: 1; width: auto; }
}
/* A sector opened: its stocks listed under its map. */
html[data-flag-rw-s6-stocks] .view-stocks .tm-list { margin-top: 0.75rem; }
html[data-flag-rw-s6-stocks] .view-stocks .tm-list[hidden] { display: none; }

/* ---------------------------------------------------------------- lists with whole names */
/* The ticker and its figures on one line, the company's whole name on the line under them (it wraps). */
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 0.625rem; row-gap: 0.125rem; align-items: center; padding-block: 0.5rem; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr.rk { grid-template-columns: 1.5rem auto minmax(0, 1fr) auto auto; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .rank { grid-column: 1; grid-row: 1 / span 2; width: auto !important; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > :is(.logo-img, .mono-logo) { grid-column: 1; grid-row: 1 / span 2; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr.rk > :is(.logo-img, .mono-logo) { grid-column: 2; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .sr-s { grid-column: 2; grid-row: 1; min-width: 0; color: var(--white); font-weight: 600; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr.rk > .sr-s { grid-column: 3; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .num, html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .chg-pill { grid-row: 1; text-align: right; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .sr-n { grid-column: 2 / -1; grid-row: 2; color: var(--muted); font-size: 0.78rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr.rk > .sr-n { grid-column: 3 / -1; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .chg-pill { min-width: 4.5rem; }
html[data-flag-rw-s6-stocks] .view-stocks .list-row.sr > .chg-pill.sm { min-width: 4rem; }
/* Earnings: the name wraps in its own column. */
html[data-flag-rw-s6-stocks] .view-stocks .er-list .who small.whole { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
html[data-flag-rw-s6-stocks] .view-stocks .er-list .list-row { align-items: center; }

/* ---------------------------------------------------------------- Top 100 and ETFs */
html[data-flag-rw-s6-stocks] .view-stocks .tp-ctl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
html[data-flag-rw-s6-stocks] .view-stocks .rows-sel { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--muted); font-size: 0.78rem; }
html[data-flag-rw-s6-stocks] .view-stocks .rows-sel select { min-height: 32px; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, transparent); color: var(--white); font: inherit; }
html[data-flag-rw-s6-stocks] .view-stocks .top-panel .panel-head .search { width: 12.5rem; }
html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx { min-width: 10em; }
@media (max-width: 699px) {
  html[data-flag-rw-s6-stocks] .view-stocks .top-panel .panel-head .right { width: 100%; justify-content: flex-start; }
  html[data-flag-rw-s6-stocks] .view-stocks .top-panel .panel-head .tp-ctl { width: 100%; }
  html[data-flag-rw-s6-stocks] .view-stocks .top-panel .panel-head .search { flex: 1 1 100%; width: auto; }
  /* The company is its logo and ticker. */
  /* The company is its logo, its ticker and its name, which wraps instead of being cut. */
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .rank { display: none; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx { min-width: 0; max-width: 6.5rem; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx small { max-width: none; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.25; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who :is(.logo-img, .mono-logo) { width: 24px; height: 24px; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf td.pin { min-width: 0; }
}
/* ETFs: the fund's name whole beside its ticker, on two lines where the column is tight. */
html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf .who { display: grid; grid-template-columns: auto 3.75rem minmax(0, 1fr); align-items: center; gap: 0.625rem; }
html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf .who small { max-width: none; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.35; }
html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf td.pin { min-width: 14rem; }
@media (max-width: 699px) {
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf .who { width: 7rem; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; row-gap: 0; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf .who > :is(.logo-img, .mono-logo) { grid-row: 1 / span 2; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf .who > b, html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf .who > small { grid-column: 2; }
}
/* "9 of 16 columns · All Columns" under the table. */
html[data-flag-rw-s6-stocks] .view-stocks .fit-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.78rem; }
html[data-flag-rw-s6-stocks] .view-stocks .fit-note[hidden] { display: none; }
/* ETFs from 2240px: two tables side by side (rwd.js twoColumns). */
html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf.tbl-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }

/* ---------------------------------------------------------------- Movers by session */
/* From 1600px three columns, one per session (Top, Pre-Market, After Hours), gainers above losers; from 3440px all six in a row. */
@media (min-width: 1600px) {
  html[data-flag-rw-s6-stocks] .view-stocks .dash > .mv-panel { grid-column-end: span 4; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-g, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-l { grid-column-start: 1; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-pg, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-pl { grid-column-start: 5; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-ag, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-al { grid-column-start: 9; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-g, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-pg, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-ag { grid-row: 1; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-l, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-pl, html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-al { grid-row: 2; }
}
@media (min-width: 3440px) {
  html[data-flag-rw-s6-stocks] .view-stocks .dash > .mv-panel { grid-column-end: span 2; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > :is(#s-m-g, #s-m-l, #s-m-pg, #s-m-pl, #s-m-ag, #s-m-al) { grid-row: 1; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-g { grid-column-start: 1; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-l { grid-column-start: 3; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-pg { grid-column-start: 5; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-pl { grid-column-start: 7; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-ag { grid-column-start: 9; }
  html[data-flag-rw-s6-stocks] .view-stocks .dash > #s-m-al { grid-column-start: 11; }
}
/* Names stay in view at every width (portal.css hides a small name under 720px and in a narrow panel): they wrap. */
html[data-flag-rw-s6-stocks] .view-stocks :is(.tbl-top, .tbl-etf) .who small { display: block; }
@media (max-width: 699px) { html[data-flag-rw-s6-stocks] .view-stocks .tbl-etf td.pin { min-width: 0; } }
/* Long company and fund names wrap on a desktop too (portal.css cuts them with an ellipsis at 14em). */
html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx { max-width: 16rem; }
html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx small { max-width: none; overflow: visible; white-space: normal; text-overflow: clip; line-height: 1.25; }
@media (max-width: 699px) { html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx { max-width: 6.5rem; } }
/* A phone has room for the company, the price and one more column: keep the cells close. */
@media (max-width: 699px) {
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .tbl td { padding-inline: 0.5rem; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .tbl th > button, html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .tbl th > .th-l { padding-inline: 0.5rem; letter-spacing: 0; }
  html[data-flag-rw-s6-stocks] .view-stocks .tbl-top .who .tx { max-width: 5.5rem; }
}