/* Portal rework step 6 (flag rw-s6-nfo): News, Funding Rates and Options. Every rule sits under html[data-flag-rw-s6-nfo]
   (public/flags.js sets it only while the flag is on), so with the flag off this file changes nothing. Linked after portal.css. */

/* ------------------------------------------------------------------------------------------------- shared */
html[data-flag-rw-s6-nfo] .view :is(.ph-note) { font-size: 0.8125rem; }
html[data-flag-rw-s6-nfo] .ph-key-line { margin: 0 0 0.5rem; font-size: 0.8125rem; }
/* Notes no wider than about 75 characters. */
html[data-flag-rw-s6-nfo] :is(.view-news, .view-funding, .view-options) .panel-foot { max-width: 75ch; }
html[data-flag-rw-s6-nfo] :is(.view-funding, .view-options) .strip-info { max-width: 75ch; }

/* ---------------------------------------------------------------------------------------------------- News */
/* The topics are one line that scrolls inside itself, faded at an edge with more beyond it. */
html[data-flag-rw-s6-nfo] .view-news .nw-bar .search { order: 1; }
html[data-flag-rw-s6-nfo] .view-news .nw-tags-w { position: relative; order: 2; flex: 1 1 100%; min-width: 0; }
html[data-flag-rw-s6-nfo] .view-news .nw-tags { flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0 0 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
html[data-flag-rw-s6-nfo] .view-news .nw-tags::-webkit-scrollbar { display: none; }
html[data-flag-rw-s6-nfo] .view-news .nw-tag { flex: none; }
html[data-flag-rw-s6-nfo] .view-news .nw-tags-w.more-l .nw-tags { -webkit-mask-image: linear-gradient(90deg, transparent, var(--k-black) 2.5rem); mask-image: linear-gradient(90deg, transparent, var(--k-black) 2.5rem); }
html[data-flag-rw-s6-nfo] .view-news .nw-tags-w.more-r .nw-tags { -webkit-mask-image: linear-gradient(270deg, transparent, var(--k-black) 2.5rem); mask-image: linear-gradient(270deg, transparent, var(--k-black) 2.5rem); }
html[data-flag-rw-s6-nfo] .view-news .nw-tags-w.more-l.more-r .nw-tags { -webkit-mask-image: linear-gradient(90deg, transparent, var(--k-black) 2.5rem, var(--k-black) calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, transparent, var(--k-black) 2.5rem, var(--k-black) calc(100% - 2.5rem), transparent); }
@media (max-width: 699px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .nw-tags-w { order: 1; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .nw-bar .search { order: 2; flex: 1 1 100%; width: 100%; margin-left: 0; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .nw-order { display: none; }
}
html[data-flag-rw-s6-nfo].lay-phone .view-news .nw-tags-w { order: 1; }
html[data-flag-rw-s6-nfo].lay-phone .view-news .nw-bar .search { order: 2; flex: 1 1 100%; width: 100%; margin-left: 0; }
html[data-flag-rw-s6-nfo].lay-phone .view-news .nw-order { display: none; }
/* A story's line is no longer than about 75 characters, whatever the width (ch is the width of a "0"; the text's characters average narrower). */
html[data-flag-rw-s6-nfo] .view-news .nw-item h3 { max-width: 52ch; }
/* Touch: the topics are 44px tall. */
@media (pointer: coarse) { html[data-flag-rw-s6-nfo] .view-news .nw-tag { height: 44px; padding: 0 14px; } }
/* Publisher initials: 12px in a 20px box. */
html[data-flag-rw-s6-nfo] .nw-src i { width: 1.25rem; height: 1.25rem; border-radius: 0.3125rem; font-size: 0.75rem; }
/* From 2560px: two story columns and a 640px side column. */
@media (min-width: 2560px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .dash { grid-template-columns: minmax(0, 1fr) 40rem; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .dash > * { grid-column: auto; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .nw-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-news .nw-rows .nw-item:nth-last-child(2) { border-bottom: 0; }
}
html[data-flag-rw-s6-nfo].lay-ultra .view-news .dash { grid-template-columns: minmax(0, 1fr) 40rem; }
html[data-flag-rw-s6-nfo].lay-ultra .view-news .dash > * { grid-column: auto; }
html[data-flag-rw-s6-nfo].lay-ultra .view-news .nw-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
html[data-flag-rw-s6-nfo].lay-ultra .view-news .nw-rows .nw-item:nth-last-child(2) { border-bottom: 0; }

/* -------------------------------------------------------------------------------------------- Funding Rates */
/* The table takes the full row under 1920px (Live below it); from 1920px the two sit 9 / 3. */
html[data-flag-rw-s6-nfo] .view-funding #f-panel, html[data-flag-rw-s6-nfo] .view-funding #f-hl { grid-column: span 12; }
@media (min-width: 1920px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-panel { grid-column: span 9; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-hl { grid-column: span 3; }
}
html[data-flag-rw-s6-nfo].lay-wide .view-funding #f-panel { grid-column: span 9; }
html[data-flag-rw-s6-nfo].lay-wide .view-funding #f-hl { grid-column: span 3; }
/* Live: its 25 rows at their own height, no scrolling inside the panel; three columns under the table, two on a
   tablet, one on a phone or beside the table. */
html[data-flag-rw-s6-nfo] .view-funding #f-hl .hl-cols { max-height: none; overflow: visible; column-gap: 1.75rem; column-rule: 1px solid var(--line); }
html[data-flag-rw-s6-nfo] .view-funding .hl-cols .list-row { break-inside: avoid; }
html[data-flag-rw-s6-nfo] .view-funding .hl-cols .list-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) and (max-width: 1099px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-hl .hl-cols { columns: 2; }
}
html[data-flag-rw-s6-nfo].lay-tablet .view-funding #f-hl .hl-cols, html[data-flag-rw-s6-nfo].lay-strip .view-funding #f-hl .hl-cols { columns: 2; }
@media (min-width: 1100px) and (max-width: 1919px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-hl .hl-cols { columns: 3; }
}
html[data-flag-rw-s6-nfo].lay-desk:not(.lay-wide) .view-funding #f-hl .hl-cols { columns: 3; }

/* Columns that fit: the exchanges fold away from the last one (funding.js). */
html[data-flag-rw-s6-nfo] .view-funding .c-off { display: none; }
html[data-flag-rw-s6-nfo] .view-funding .f-cols { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.8125rem; }
html[data-flag-rw-s6-nfo] .view-funding .f-cols[hidden] { display: none; }
html[data-flag-rw-s6-nfo] .view-funding .f-cols .btn { margin-left: 0.25rem; }
/* The phone's column: a low-to-high bar, a tick for each exchange, a dot for the average, drawn in the Avg cell and
   shown only while the exchanges' columns are folded away on a phone. */
html[data-flag-rw-s6-nfo] .view-funding :is(.f-rng, .f-rng-h, .f-key) { display: none; }
html[data-flag-rw-s6-nfo] .view-funding .f-rng { position: relative; width: min(8.5rem, 32vw); height: 2.125rem; margin-right: 0.75rem; vertical-align: middle; }
html[data-flag-rw-s6-nfo] .view-funding .f-track { position: absolute; left: 0; right: 0; top: 0.5rem; height: 0.25rem; border-radius: 99px; background: rgba(var(--k-rgb-148-163-184), var(--k-a-0-22)); }
html[data-flag-rw-s6-nfo] .view-funding .f-rng i { position: absolute; top: 0.25rem; width: 2px; height: 0.75rem; margin-left: -1px; border-radius: 1px; background: rgba(var(--k-rgb-203-213-225), var(--k-a-0-65)); }
html[data-flag-rw-s6-nfo] .view-funding .f-rng b { position: absolute; top: 0.125rem; width: 0.875rem; height: 0.875rem; margin-left: -0.4375rem; border: 2px solid var(--k-ink-0e1a23); border-radius: 50%; background: var(--muted); box-sizing: border-box; }
html[data-flag-rw-s6-nfo] .view-funding .f-rng b.up { background: var(--up); }
html[data-flag-rw-s6-nfo] .view-funding .f-rng b.down { background: var(--down); }
html[data-flag-rw-s6-nfo] .view-funding .f-rng :is(.f-lo, .f-hi, .f-one) { position: absolute; bottom: 0; font-size: 0.75rem; font-weight: 500; line-height: 1; white-space: nowrap; }
html[data-flag-rw-s6-nfo] .view-funding .f-rng .f-lo { left: 0; }
html[data-flag-rw-s6-nfo] .view-funding .f-rng .f-hi { right: 0; }
html[data-flag-rw-s6-nfo] .view-funding .f-rng .f-one { left: 50%; transform: translateX(-50%); color: var(--muted); }
@media (max-width: 699px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-table:has(td.f-ex.c-off) .f-rng { display: inline-block; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-table:has(td.f-ex.c-off) .f-rng-h { display: inline; margin-right: auto; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-table:has(td.f-ex.c-off) th.f-avg > button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.75rem; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding #f-panel:has(td.f-ex.c-off) .f-key { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.8125rem; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding .f-key .f-rng-key { display: inline-block; flex: none; width: 2.75rem; height: 0.875rem; margin: 0; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding .f-key .f-rng-key .f-track { top: 0.3125rem; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding .f-key .f-rng-key i { top: 0.0625rem; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding .f-key .f-rng-key b { top: 0; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding td.f-avg { white-space: nowrap; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-funding .tbl td { padding-inline: 0.5rem; }
}
html[data-flag-rw-s6-nfo].lay-phone .view-funding #f-table:has(td.f-ex.c-off) .f-rng { display: inline-block; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding #f-table:has(td.f-ex.c-off) .f-rng-h { display: inline; margin-right: auto; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding #f-table:has(td.f-ex.c-off) th.f-avg > button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 0.75rem; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding #f-panel:has(td.f-ex.c-off) .f-key { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.8125rem; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding .f-key .f-rng-key { display: inline-block; flex: none; width: 2.75rem; height: 0.875rem; margin: 0; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding .f-key .f-rng-key .f-track { top: 0.3125rem; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding .f-key .f-rng-key i { top: 0.0625rem; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding .f-key .f-rng-key b { top: 0; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding td.f-avg { white-space: nowrap; }
html[data-flag-rw-s6-nfo].lay-phone .view-funding .tbl td { padding-inline: 0.5rem; }

/* --------------------------------------------------------------------------------------------------- Options */
/* Five figures on one line (they wrap again on a phone). */
@media (min-width: 700px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .kpis.opt-kpis { display: flex; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .kpis.opt-kpis > .kpi { flex: 1 1 auto; min-width: 0; }
}
html[data-flag-rw-s6-nfo].lay-tablet .kpis.opt-kpis, html[data-flag-rw-s6-nfo].lay-strip .kpis.opt-kpis, html[data-flag-rw-s6-nfo].lay-desk .kpis.opt-kpis, html[data-flag-rw-s6-nfo].lay-side .kpis.opt-kpis { display: flex; }
html[data-flag-rw-s6-nfo].lay-tablet .kpis.opt-kpis > .kpi, html[data-flag-rw-s6-nfo].lay-strip .kpis.opt-kpis > .kpi, html[data-flag-rw-s6-nfo].lay-desk .kpis.opt-kpis > .kpi, html[data-flag-rw-s6-nfo].lay-side .kpis.opt-kpis > .kpi { flex: 1 1 auto; min-width: 0; }
@media (min-width: 700px) and (max-width: 1099px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .kpis.opt-kpis .kpi :is(.l, .d) { white-space: normal; }
}
html[data-flag-rw-s6-nfo].lay-tablet .kpis.opt-kpis .kpi :is(.l, .d), html[data-flag-rw-s6-nfo].lay-strip .kpis.opt-kpis .kpi :is(.l, .d) { white-space: normal; }
@media (max-width: 699px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .kpis.opt-kpis > .kpi:last-child:nth-child(odd) { grid-column: span 2; }
}
html[data-flag-rw-s6-nfo].lay-phone .kpis.opt-kpis > .kpi:last-child:nth-child(odd) { grid-column: span 2; }
html[data-flag-rw-s6-nfo] .kpis.opt-kpis .kpi .d { font-size: 0.8125rem; }
/* Chart labels at 11px or more (the drawings are charts.js's: this raises the 10px ones). */
html[data-flag-rw-s6-nfo] .view-options .chart svg text { font-size: max(11px, 1em) !important; }
html[data-flag-rw-s6-nfo] .view-options .chart svg { font-size: 11px; }
/* From 2560px the expiry and strike drawings sit side by side (6 / 3 / 3 of 12), the four small panels in the next row. */
@media (min-width: 2560px) {
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-options #o-exp { grid-column: span 6; }
  html[data-flag-rw-s6-nfo]:not(.lay-phone):not(.lay-tablet):not(.lay-strip):not(.lay-desk):not(.lay-side) .view-options :is(#o-strikes, #o-top, #o-mp, #o-venues, #o-iv, #o-skew) { grid-column: span 3; }
}
html[data-flag-rw-s6-nfo].lay-ultra .view-options #o-exp { grid-column: span 6; }
html[data-flag-rw-s6-nfo].lay-ultra .view-options :is(#o-strikes, #o-top, #o-mp, #o-venues, #o-iv, #o-skew) { grid-column: span 3; }
/* A phone's expiries: a row each (its date, calls over puts, open interest, put/call); a tap shows it by strike. */
html[data-flag-rw-s6-nfo] .view-options .o-exp-rows { display: grid; container-type: inline-size; }
html[data-flag-rw-s6-nfo] .view-options :is(.oe-head, .oe-row) { display: grid; grid-template-columns: 3.5rem minmax(2.5rem, 1fr) 4.25rem 2.5rem; align-items: center; gap: 0.5rem; padding: 0 0.5rem; }
html[data-flag-rw-s6-nfo] .view-options .oe-head { min-height: 2.25rem; color: var(--muted); font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
html[data-flag-rw-s6-nfo] .view-options .oe-head span:nth-child(n + 3) { text-align: right; }
html[data-flag-rw-s6-nfo] .view-options .oe-row {
  min-height: 2.75rem; margin: 0; border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 0; background: none;
  color: var(--soft); font: 500 0.875rem/1.25 var(--mono); text-align: left; cursor: pointer;
}
html[data-flag-rw-s6-nfo] .view-options .oe-row:disabled { cursor: default; opacity: 0.7; }
html[data-flag-rw-s6-nfo] .view-options .oe-row[aria-pressed="true"] { border-color: rgba(var(--k-rgb-56-189-248), var(--k-a-0-55)); border-radius: 0.5rem; background: rgba(var(--k-rgb-56-189-248), var(--k-a-0-08)); color: var(--kicker); }
html[data-flag-rw-s6-nfo] .view-options .oe-row:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; border-radius: 0.5rem; }
html[data-flag-rw-s6-nfo] .view-options .oe-d { display: flex; flex-direction: column; color: var(--white); white-space: nowrap; }
html[data-flag-rw-s6-nfo] .view-options .oe-row[aria-pressed="true"] .oe-d { color: var(--kicker); }
html[data-flag-rw-s6-nfo] .view-options .oe-d small { color: var(--muted); font-size: 0.75rem; }
html[data-flag-rw-s6-nfo] .view-options .oe-d small.big { color: var(--kicker); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
html[data-flag-rw-s6-nfo] .view-options .oe-bars { display: grid; gap: 0.1875rem; }
html[data-flag-rw-s6-nfo] .view-options .oe-bars i { display: block; height: 0.5rem; min-width: 2px; border-radius: 2px; }
html[data-flag-rw-s6-nfo] .view-options .oe-bars i.c { background: var(--up); }
html[data-flag-rw-s6-nfo] .view-options .oe-bars i.p { background: var(--down); }
html[data-flag-rw-s6-nfo] .view-options :is(.oe-v, .oe-pc) { text-align: right; font-variant-numeric: tabular-nums; }
html[data-flag-rw-s6-nfo] .view-options .oe-pc { color: var(--white); font-weight: 600; }
@media (forced-colors: active) { html[data-flag-rw-s6-nfo] .view-options .oe-row[aria-pressed="true"] { outline: 2px solid Highlight; } }
/* Beside the table (funding.js capLive) Live shows the rows that fit; "All" shows the rest. */
html[data-flag-rw-s6-nfo] .view-funding #f-hl .hl-off { display: none; }
html[data-flag-rw-s6-nfo] .view-funding #f-hl .hl-all { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.8125rem; }

/* News: a ticker chip wraps inside the line instead of running past the screen (320px, and 390px at Large/Larger text). */
html[data-flag-rw-s6-nfo] .view-news .nw-tk { flex-wrap: wrap; height: auto; min-height: 1.625rem; max-width: 100%; padding-block: 0.25rem; row-gap: 0.125rem; }
html[data-flag-rw-s6-nfo] .view-news .nw-also { overflow-wrap: anywhere; min-width: 0; }
/* Options: Largest Strikes and the strike drawing take the height their content needs, so nothing scrolls inside the panel (decision 15). */
html[data-flag-rw-s6-nfo] .view-options :is(#o-strikes, #o-top).panel.fixed { height: auto; }
html[data-flag-rw-s6-nfo] .view-options #o-top .pb { flex: none; overflow: visible; }

/* The phone's expiry rows follow the width they are given, in the page's own text size (container query on rem): when the four
   columns will not fit (Large / Larger text on a narrow phone) a row is two lines, date / open interest / put-call over the bars. */
@container (max-width: 20rem) {
  html[data-flag-rw-s6-nfo] .view-options :is(.oe-head, .oe-row) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "d v p" "b b b"; row-gap: 0.25rem; }
  html[data-flag-rw-s6-nfo] .view-options .oe-row { padding-block: 0.5rem; }
  html[data-flag-rw-s6-nfo] .view-options .oe-row .oe-d { grid-area: d; }
  html[data-flag-rw-s6-nfo] .view-options .oe-row .oe-bars { grid-area: b; }
  html[data-flag-rw-s6-nfo] .view-options .oe-row .oe-v { grid-area: v; min-width: 4rem; }
  html[data-flag-rw-s6-nfo] .view-options .oe-row .oe-pc { grid-area: p; min-width: 2.5rem; }
  html[data-flag-rw-s6-nfo] .view-options .oe-head { grid-template-areas: none; }
  html[data-flag-rw-s6-nfo] .view-options .oe-head span:nth-child(2) { display: none; }
  html[data-flag-rw-s6-nfo] .view-options .oe-head span:nth-child(3) { min-width: 4rem; }
  html[data-flag-rw-s6-nfo] .view-options .oe-head span:nth-child(4) { min-width: 2.5rem; }
}
/* The five figures: one to a row when two tiles side by side would cut their text (a narrow phone at Large / Larger text). */
html[data-flag-rw-s6-nfo] .kpis.opt-kpis { container-type: inline-size; }
@container (max-width: 16rem) {
  html[data-flag-rw-s6-nfo] .kpis.opt-kpis > .kpi { grid-column: 1 / -1; }
}

/* The phone's Low – High cell (audit R4): the bar is sized in rem, with the average under it. Its two end labels need about 11rem to
   stay apart, so they show only when the table has 20rem or more; under that they step aside (the values stay in the bar's title and
   label), and under 16rem the heading's "Low – High" and the coin's rank step aside too, so Coin and the average always fit. */
html[data-flag-rw-s6-nfo] .view-funding #f-table { container-type: inline-size; }
html[data-flag-rw-s6-nfo] .view-funding td.f-avg { text-align: right; }
html[data-flag-rw-s6-nfo] .view-funding td.f-avg > b { display: block; }
html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .f-rng { width: 11rem; margin-right: 0; }
@container (max-width: 20rem) {
  html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .f-rng { width: 6rem; height: 1.25rem; }
  html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .f-rng :is(.f-lo, .f-hi, .f-one) { display: none; }
  html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .tbl .who .rank { display: none; }
}
@container (max-width: 16rem) {
  html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .f-rng-h { display: none; }
}
@container (max-width: 13rem) {
  html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .f-rng { width: 5rem; }
  html[data-flag-rw-s6-nfo][data-flag-rw-s6-nfo][data-flag-rw-s6-nfo] .view-funding #f-table:has(td.f-ex.c-off) .tbl :is(td, th) { padding-inline: 0.25rem; }
}