/* Portal rework step 4: sizes and tables (decisions 3, 7 and 9). Every rule is under html[data-flag-rw-s4-sizes="on"],
   which public/flags.js sets from public/flags.json: with the flag off this file changes nothing. Sizes are in rem, so
   the page grows with Text Size (Portal Colours) and the browser's own setting. The floor rule (nothing under 12px) is
   generated into portal-rw-s4-floor.css by tools/rw-s4-floor.mjs. */

html[data-flag-rw-s4-sizes="on"] {
  /* One short list of text sizes, the compact scale (owner's pick A, 2026-10-13). Nothing under 12px (chart and dial drawings aside). */
  --fs-title: 1.75rem; --fs-panel: 1rem; --fs-cell: 0.8125rem; --fs-btn: 0.75rem; --fs-label: 0.75rem;
  /* Controls are 24, 32 or 40px tall; 44px to tap on a touch screen. */
  --ctl-s: 1.5rem; --ctl-m: 2rem; --ctl-l: 2.5rem; --ctl-touch: 44px;
  --th-h: 2.25rem; /* a column header row: 36px (44px on touch) */
  --row-h: 2.25rem; /* a table row: 36px for one line (44px on touch) */
  /* The rest of the short list (plan row 11): line heights and spacing (weights are 400, 600 and 700, set by the generated sweep). */
  --lh-title: 1.2; --lh-row: 1.3; --lh-note: 1.5;
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
}
html.touch[data-flag-rw-s4-sizes="on"] { --th-h: 2.75rem; --row-h: 2.75rem; }
/* A Text Size pick takes effect at once: the reduced-motion rule (site.css) gives every element, the root too, a 0.01ms
   transition of all properties, which leaves the root's font size at the old size for a frame while the tables measure. */
html[data-flag-rw-s4-sizes="on"] { transition-duration: 0s !important; }

/* ---------------------------------------------------------------- sizes */
html[data-flag-rw-s4-sizes="on"] .tbl, html[data-flag-rw-s4-sizes="on"] .list-row { font-size: var(--fs-cell); line-height: var(--lh-row); }
html[data-flag-rw-s4-sizes="on"] .tbl tbody tr { height: var(--row-h); }
/* Crypto's coin list beside the chart from 1920px (rw-s6-crypto, decision 13) keeps its compact rows, so ten rows, the pager and
   the columns line end above the fold. */
html.lay-wide[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-crypto="on"] .c-dash #c-list .tbl-compact .tbl tbody tr { height: auto; }
html[data-flag-rw-s4-sizes="on"] .panel-head h2, html[data-flag-rw-s4-sizes="on"] .v-title h1 { line-height: var(--lh-title); }
html[data-flag-rw-s4-sizes="on"] .panel-foot, html[data-flag-rw-s4-sizes="on"] .sec-head p { line-height: var(--lh-note); }
html[data-flag-rw-s4-sizes="on"] .panel-foot, html[data-flag-rw-s4-sizes="on"] .v-src .src, html[data-flag-rw-s4-sizes="on"] .strip-info,
html[data-flag-rw-s4-sizes="on"] .my-hint { font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .portal-app .cmd-chip, html[data-flag-rw-s4-sizes="on"] .portal-app .badge { font-size: var(--fs-label); }
html[data-flag-rw-s4-sizes="on"] .panel-head h2 { font-size: var(--fs-panel); }
html[data-flag-rw-s4-sizes="on"] .panel-head .kicker, html[data-flag-rw-s4-sizes="on"] .v-title .kicker { font-size: var(--fs-label); }
html[data-flag-rw-s4-sizes="on"] .panel-head a.more, html[data-flag-rw-s4-sizes="on"] .sec-head a.more,
html[data-flag-rw-s4-sizes="on"] .sec-head p { font-size: var(--fs-btn); }

/* A <small> with no size of its own is the browser's 0.83em: under 12px inside 14px rows. No specificity, so any rule
   that sizes it still wins. */
:where(html[data-flag-rw-s4-sizes="on"]) small { font-size: max(0.75rem, 0.8333em); }

/* -------------------------------------------------------------- controls */
html[data-flag-rw-s4-sizes="on"] .seg button, html[data-flag-rw-s4-sizes="on"] .seg a { min-height: calc(var(--ctl-l) - 0.5rem); font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .panel-head .seg button, html[data-flag-rw-s4-sizes="on"] .panel-head .seg a { min-height: calc(var(--ctl-m) - 0.5rem); font-size: var(--fs-btn); }
/* Pages that set their own segment heights (26px, 27px) take the token. */
html[data-flag-rw-s4-sizes="on"] :is(.eh-span, .seg-row) .seg :is(button, a) { min-height: calc(var(--ctl-m) - 0.5rem); font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .search { height: var(--ctl-m); font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .btn-chip, html[data-flag-rw-s4-sizes="on"] .panel-head .btn-chip { height: var(--ctl-m); font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .ph-max, html[data-flag-rw-s4-sizes="on"] .ph-info { width: var(--ctl-m); height: var(--ctl-m); }
html[data-flag-rw-s4-sizes="on"] .ph-info.sm { width: var(--ctl-s); height: var(--ctl-s); } /* the (i) beside a label or in a row: 24px */
html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-ts="on"] .view-technicals .ph-info.sm { width: var(--ctl-s); height: var(--ctl-s); } /* the page's own 24px, as the token */
html[data-flag-rw-s4-sizes="on"] .ph-info.sm svg { width: 0.9375rem; height: 0.9375rem; }
html[data-flag-rw-s4-sizes="on"] .pager button { min-width: var(--ctl-m); height: var(--ctl-m); font-size: var(--fs-btn); }
@media (pointer: coarse) {
  html[data-flag-rw-s4-sizes="on"] .search, html[data-flag-rw-s4-sizes="on"] .pal-input input { height: var(--ctl-touch); font-size: 16px; } /* iOS zooms into a box under 16px */
  html[data-flag-rw-s4-sizes="on"] .pager button { height: var(--ctl-touch); min-width: var(--ctl-touch); }
}
/* The Portal Colours menu grows with the text. */
html[data-flag-rw-s4-sizes="on"] .p-theme-pop { width: 18.125rem; }
html[data-flag-rw-s4-sizes="on"] .p-theme-pop > h3 + .seg { margin-bottom: 0.875rem; } /* Text Size, the first row of the menu */

/* ---------------------------------------------------------------- tables */
/* A column header is a 36px row (44px on touch) whose whole cell sorts; a clear ring on the one with focus. */
html[data-flag-rw-s4-sizes="on"] .tbl th { height: var(--th-h); padding: 0; font-size: var(--fs-label); }
html[data-flag-rw-s4-sizes="on"] .tbl th > button, html[data-flag-rw-s4-sizes="on"] .tbl th > .th-l {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; box-sizing: border-box; width: 100%; min-height: var(--th-h);
  padding: 0 0.75rem; white-space: nowrap; cursor: pointer;
}
html[data-flag-rw-s4-sizes="on"] .tbl th > .th-l { cursor: default; }
html[data-flag-rw-s4-sizes="on"] .tbl th.l > button, html[data-flag-rw-s4-sizes="on"] .tbl th.l > .th-l { justify-content: flex-start; }
html[data-flag-rw-s4-sizes="on"] .tbl th.c > button, html[data-flag-rw-s4-sizes="on"] .tbl th.c > .th-l { justify-content: center; }
html[data-flag-rw-s4-sizes="on"] .tbl th > button:hover { background: rgba(var(--acc, 56, 189, 248), 0.06); color: var(--white); }
html[data-flag-rw-s4-sizes="on"] .tbl th > button:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; border-radius: 6px; }
/* Columns that fit (lib.js table): hidden columns and the "9 of 16 columns · All Columns" line under the table. */
html[data-flag-rw-s4-sizes="on"] .tbl .c-off { display: none; }
html[data-flag-rw-s4-sizes="on"] .tbl-cols { display: flex; justify-content: flex-end; align-items: center; gap: 0.375rem; margin: 0.5rem 0 0; color: var(--muted); font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .tbl-cols[hidden] { display: none; }
html[data-flag-rw-s4-sizes="on"] .tbl-cols .lnk { padding: 0; border: 0; background: none; color: var(--sky); font: inherit; font-weight: 600; cursor: pointer; }
html[data-flag-rw-s4-sizes="on"] .tbl-cols .lnk:hover { color: var(--sky-hover, var(--white)); }
@media (pointer: coarse) { html[data-flag-rw-s4-sizes="on"] .tbl-cols .lnk { min-height: var(--ctl-touch); } }
/* All Columns shows every column, whatever hid it. */
html[data-flag-rw-s4-sizes="on"] .tbl.tbl-all :is(th, td) { display: table-cell !important; }
/* A first column too wide for the panel (lib.js: --c1 is what it may take) ends in an ellipsis; a page's own min-width on it gives way. */
/* Still too wide with the first column at its least, the column labels may take two lines (a long label such as "Yield / Day
   Change" on a 320px phone at Larger text). */
html[data-flag-rw-s4-sizes="on"] .tbl.tbl-thwrap th > :is(button, .th-l) { white-space: normal; overflow-wrap: anywhere; }
html[data-flag-rw-s4-sizes="on"] .tbl.tbl-squeeze :is(td, th).c-1 { min-width: 0 !important; max-width: calc(var(--c1) + 1.5rem); overflow: hidden; text-overflow: ellipsis; }
html[data-flag-rw-s4-sizes="on"] .tbl.tbl-squeeze tbody td.c-1 > * { max-width: var(--c1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-flag-rw-s4-sizes="on"] .tbl.tbl-squeeze tbody td.c-1 .who > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Rows per page: "Rows 10 25 50 100" at the pager's right. */
html[data-flag-rw-s4-sizes="on"] .pager .pg-rows { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; color: var(--muted); font-size: var(--fs-btn); }
html[data-flag-rw-s4-sizes="on"] .pager .pg-rows > span { margin-right: 0.25rem; }
html[data-flag-rw-s4-sizes="on"] .pager .pg-rows button[aria-pressed="true"] { border-color: rgba(var(--acc, 56, 189, 248), 0.6); background: rgba(var(--acc, 56, 189, 248), 0.16); color: var(--white); }

/* ---------------------------------------------------- Larger text on a phone */
/* The page never grows wider than the screen: grid items may shrink below their content, and rows of small figures wrap. */
html[data-flag-rw-s4-sizes="on"] :is(.dash, .tq-kpis, .kpis, .glance) > * { min-width: 0; }
html[data-flag-rw-s4-sizes="on"] .tq-gauge { min-width: 0; max-width: 100%; }
html[data-flag-rw-s4-sizes="on"] .tq-counts { flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); }
html[data-flag-rw-s4-sizes="on"] .kpi .l, html[data-flag-rw-s4-sizes="on"] .stat-tile .l { min-width: 0; max-width: 100%; }
/* One column on a phone, whatever the text size; with rw-s6-ts its own two across (its last tile spans both: under a one-column
   grid it would add a second, empty-width column and squash the rest). */
html.lay-phone[data-flag-rw-s4-sizes="on"]:not([data-flag-rw-s6-ts="on"]) .view-technicals .tq-kpis.tq-kpis { grid-template-columns: minmax(0, 1fr); }
html.lay-phone[data-flag-rw-s4-sizes="on"]:not([data-flag-rw-s6-ts="on"]) .view-technicals .tq-kpis.tq-kpis > * { grid-column: 1 / -1; }
/* With rw-s6-ts: two across while a tile keeps 9rem (144px at Default, so its 12px+ labels stay whole), else one; the last tile
   spans the row either way (a span of two in a one-column grid would add an empty-width column). */
html.lay-phone[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-ts="on"] .view-technicals .tq-kpis:not(.rb-kpis) { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
html.lay-phone[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-ts="on"] .view-technicals .tq-kpis:not(.rb-kpis) > .kpi:last-child { grid-column: 1 / -1; }
/* rw-s6-ts' Technical Summary on a phone: Value and Reading cells 2px each side (the headings keep 6px, 12px apart), so at 390px
   Larger text the three columns fit beside a 150px name with the (i) that grows with the text. */
html.lay-phone[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-ts="on"] .view-technicals .tq-ind td:nth-child(n+2) { padding-inline: 2px; }
/* The few inline sizes of 0.72rem (11.5px) in the views take the 12px floor. */
html[data-flag-rw-s4-sizes="on"] [style*="font-size:.72rem"] { font-size: var(--fs-label) !important; }
/* The bottom tabs share the screen at any text size: five equal columns that may shrink, labels that wrap. */
html[data-flag-rw-s4-sizes="on"] .p-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-flag-rw-s4-sizes="on"] .p-tabs :is(a, button) { min-width: 0; padding-inline: 2px; text-align: center; overflow-wrap: anywhere; }
/* Safety net on a phone: whatever a page still lays out wider than the screen is cut at the page's edge (a table keeps its own
   sideways scroll) rather than widening the page and stretching the bottom tabs. */
html.lay-narrow[data-flag-rw-s4-sizes="on"] .p-main { overflow-x: clip; }

/* ------------------------------------------- the one short list (plan row 11) */
/* Radii: 14px panels, 10px cards and controls, 6px chips, full for pills. */
html[data-flag-rw-s4-sizes="on"] { --r-panel: 0.875rem; --r-card: 0.625rem; --r-control: 0.625rem; --r-chip: 0.375rem; --pad: 1.5rem; --gap-p: 1rem; --pad-p: 1rem; --title: 1.75rem; --h-sec: 1rem; }
html[data-flag-rw-s4-sizes="on"] .panel { border-radius: var(--r-panel); padding: var(--pad-p); }
html[data-flag-rw-s4-sizes="on"] :is(.kpi, .stat-tile, .dial-card, .kv, .state) { border-radius: var(--r-card); }
html[data-flag-rw-s4-sizes="on"] :is(.seg, .search, .btn-chip, .pager button, .p-cmdbox, .ph-max, .ph-info) { border-radius: var(--r-control); }
html[data-flag-rw-s4-sizes="on"] :is(.badge, .cmd-chip) { border-radius: var(--r-chip); }
/* Page padding 12px on a phone, 16px on a tablet, 24px on a desktop; the gap between panels 12px on a phone, 16px above. */
html[data-flag-rw-s4-sizes="on"] .p-view { padding: var(--pad); }
/* Under 1100px the bottom tabs are fixed over the page: the page ends above them (as on main), so its last line and controls
   can be scrolled clear of the bar. */
@media (max-width: 1099px) { html[data-flag-rw-s4-sizes="on"] .p-view { padding-bottom: calc(var(--tabs) + var(--pad) + env(safe-area-inset-bottom)); } }
html.lay-tablet[data-flag-rw-s4-sizes="on"], html.lay-strip[data-flag-rw-s4-sizes="on"] { --pad: 1rem; }
html.lay-phone[data-flag-rw-s4-sizes="on"], html.lay-side[data-flag-rw-s4-sizes="on"] { --pad: 0.75rem; --gap-p: 0.75rem; --pad-p: 0.75rem; --title: 1.375rem; }
html[data-flag-rw-s4-sizes="on"] .dash { gap: var(--gap-p); }
/* Titles and headings: page title 28px (22px on a phone), section heading 16px. */
html[data-flag-rw-s4-sizes="on"] .v-title h1 { font-size: var(--title); }
html[data-flag-rw-s4-sizes="on"] .sec-head h2 { font-size: var(--h-sec); }
/* Table cells 8 by 12px; sidebar links 32px tall. */
html[data-flag-rw-s4-sizes="on"] .tbl td { padding: 0.5rem 0.75rem; }
html[data-flag-rw-s4-sizes="on"] .p-rail .p-link { min-height: var(--link-h, 2rem); padding-block: 0.25rem; border-radius: var(--r-control); }
html[data-flag-rw-s4-sizes="on"] { --link-h: 2rem; }

/* Funding's Low - High bar (rw-s6-nfo) shrinks on a phone so the Avg column fits beside Coin at any text size. */
html.lay-narrow[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-nfo] .view-funding .f-rng { width: 4.25rem; margin-right: 0.375rem; }

/* ------------------------------------------------ touch: 44px on every control */
/* On a touch screen every button and link-button in the top bar and the page is at least 44px each way (plan row 15). The chart
   view, its drawing tools and the heatmap tiles are left alone; running text links are not controls. 44 CSS px, not rem: a finger
   does not grow with Text Size (2.75rem made a row of four segments 264px wide at Larger and pushed controls off a phone). */
html.touch[data-flag-rw-s4-sizes="on"] :is(.p-top, .p-view) :is(button, summary, a.more, a.cmd-chip, .seg a, .p-bell, .p-mobile-brand, .pg-rows button, .lnk):not(.chart *, [class*="cv-"] *, [class*="dr-"] *, .tm-sector *, .tbl th > button[data-sort], .ph-info) { min-height: 44px; min-width: 44px; box-sizing: border-box; }
/* The (i) buttons follow the size token on touch too (44px at Default, 66px at Larger), as rw-s6-ts' (i) does. */
html.touch[data-flag-rw-s4-sizes="on"] :is(.p-top, .p-view) .ph-info:not(.chart *) { min-height: 2.75rem; min-width: 2.75rem; }
html.touch[data-flag-rw-s4-sizes="on"] :is(.p-top, .p-view) :is(.seg button, .seg a) { padding-inline: 0.75rem; }
html.touch[data-flag-rw-s4-sizes="on"] .p-view .seg { padding: 0.125rem; }
html.touch[data-flag-rw-s4-sizes="on"] :is(.p-top, .p-view) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select) { min-height: 44px; box-sizing: border-box; }

/* The sign-in page (/portal, PORTAL-50): its controls are 44px to tap on a touch screen; the privacy link in the note keeps its place
   and gets a 44px hit area from padding it takes back with a negative margin. */
@media (pointer: coarse) {
  html[data-flag-rw-s4-sizes="on"] :is(.signin-top .back, .signin-top .brand, .btn) { min-height: 2.75rem; box-sizing: border-box; }
  html[data-flag-rw-s4-sizes="on"] .gate-note a { display: inline-block; padding: 0.875rem 0.5rem; margin: -0.875rem -0.5rem; }
}

/* ----------------------- rows of controls on a phone, at any text size */
/* A row of controls wraps or scrolls inside itself instead of running past the screen: the Rows choice and page buttons wrap, a long
   joined control (topic tabs) scrolls on its own, a flex head may shrink its children. */
html.lay-narrow[data-flag-rw-s4-sizes="on"] :is(.pager, .pager .pg-rows, .panel-head, .liq-win.head, .v-ctl, .tx-c) { flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* The view's controls never reach past the screen: what they hold may shrink (a <select> is otherwise as wide as its longest option:
   433px for Technicals' indicator pick at 320px Larger). */
html.lay-narrow[data-flag-rw-s4-sizes="on"] .v-ctl > * { min-width: 0; max-width: 100%; }
html.lay-narrow[data-flag-rw-s4-sizes="on"] .v-ctl select { max-width: 100%; text-overflow: ellipsis; }
/* A "Not Available Right Now" box in a narrow tile wraps its words inside the tile. */
html.lay-narrow[data-flag-rw-s4-sizes="on"] .state { min-width: 0; max-width: 100%; box-sizing: border-box; }
html.lay-narrow[data-flag-rw-s4-sizes="on"] .state > * { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
/* Liquidations' window rows (1H / 4H / 24H, without rw-s6-liq) at Large and Larger text on a phone: the first two columns take their
   text's width rather than 38 and 70px, so the "$0 / $20.8K" column stays on the screen. */
html.lay-narrow[data-flag-rw-s4-sizes="on"]:is([data-text="lg"], [data-text="xl"]) .liq-win { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 0.5rem; }
html.lay-narrow[data-flag-rw-s4-sizes="on"]:is([data-text="lg"], [data-text="xl"]) .liq-win > * { min-width: 0; }
html.lay-narrow[data-flag-rw-s4-sizes="on"]:is([data-text="lg"], [data-text="xl"]) .liq-win .lw-s { white-space: normal; }
html.lay-narrow[data-flag-rw-s4-sizes="on"] .pager .pg-rows { margin-left: 0; }
html.lay-narrow[data-flag-rw-s4-sizes="on"] .p-view .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html.lay-narrow[data-flag-rw-s4-sizes="on"] .p-view :is(.panel-head, .liq-win.head, .tx-c) > * { min-width: 0; }
html.lay-narrow[data-flag-rw-s4-sizes="on"] .p-view :is(.kpi, .kv, .stat-tile, .liq-kpis .kpi) :is(.l, .d, .v, b, strong, small) { white-space: normal; overflow-wrap: anywhere; }
/* A dial's unit is chart-internal text: 11px at least. */
html[data-flag-rw-s4-sizes="on"] .gauge .g-unit { font-size: max(0.6875rem, 0.62em); }
/* "Columns That Fit" / "All Columns" is a control: 24px tall (44px on touch, below). */
html[data-flag-rw-s4-sizes="on"] .tbl-cols .lnk { display: inline-flex; align-items: center; min-height: var(--ctl-s); }
/* Dial cards (Overview) show their whole values at any text size: they wrap rather than end in an ellipsis. */
html[data-flag-rw-s4-sizes="on"] .dial-card :is(b, small, span, .l, .v, .d) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* A tile label with an (i) keeps the (i) inside the tile at any text size: the label wraps and the (i) sits at its end. */
html[data-flag-rw-s4-sizes="on"] :is(.kpi, .stat-tile, .kv, .kv-wide) > .l:has(.ph-info) { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); white-space: normal; overflow: visible; text-overflow: clip; }
html[data-flag-rw-s4-sizes="on"] :is(.kpi, .stat-tile, .kv) > .l .ph-info { flex: none; margin: -0.125rem 0 0 auto; }
/* Technical Summary figure tiles grow with the text: their minimum width is in rem (150px at Default). */
html[data-flag-rw-s4-sizes="on"]:not(.lay-phone) .tq-kpis { grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, calc(100vw - 80px)), 1fr)); }
/* the Rainbow tiles keep their own two (four from a 620px panel): the auto-fit above would make three and one at Larger text */
html[data-flag-rw-s4-sizes="on"] .kpis.rb-kpis.rb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 620px) { html[data-flag-rw-s4-sizes="on"] .kpis.rb-kpis.rb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------ Economic Calendar with the 12px floor */
/* Without rw-s6-calendar, a phone at Large or Larger text: Actual / Forecast / Previous take a line of their own under the event
   (beside the name they had 44px at 320 Larger and ran off the screen). */
@media (max-width: 699px) {
  html[data-flag-rw-s4-sizes="on"]:not([data-flag-rw-s6-calendar="on"]):is([data-text="lg"], [data-text="xl"]) .event-row { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "imp t res" "imp ev ev" "imp c hc" "imp figs figs"; }
  html[data-flag-rw-s4-sizes="on"]:not([data-flag-rw-s6-calendar="on"]):is([data-text="lg"], [data-text="xl"]) .event-row .figs { flex-wrap: wrap; gap: 0.25rem 0.875rem; min-width: 0; }
}
/* Wide rows: the column labels keep a little letter spacing so "Currency" fits its 4.125rem column at any Text Size. */
html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"] .view-calendar[data-w="d"] .cal-cols { letter-spacing: 0.04em; }
/* A 320px phone at Large or Larger text (256 or 213px in its own text size): three figures and their 12px+ labels cannot sit side
   by side, so each figure takes its own line with its label beside it, and the label row above goes. */
@media (max-width: 359px) {
  html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"]:is([data-text="lg"], [data-text="xl"]) .view-calendar[data-w="xxs"] .cal-cols { display: none; }
  html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"]:is([data-text="lg"], [data-text="xl"]) .view-calendar[data-w="xxs"] .event-row .ev-l2 { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"]:is([data-text="lg"], [data-text="xl"]) .view-calendar[data-w="xxs"] .event-row .fig { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; min-width: 0; }
  html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"]:is([data-text="lg"], [data-text="xl"]) .view-calendar[data-w="xxs"] .event-row .fig small { display: inline; font-size: var(--fs-label); letter-spacing: 0.04em; }
  html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"]:is([data-text="lg"], [data-text="xl"]) .view-calendar[data-w="xxs"] .event-row .res { grid-column: 1; }
  html[data-flag-rw-s4-sizes="on"][data-flag-rw-s6-calendar="on"]:is([data-text="lg"], [data-text="xl"]) .view-calendar[data-w="xxs"] .event-row .hc { grid-column: 2; }
}
/* Liquidations' figures (1366px at Larger text): a figure and its "est." note wrap rather than end cut at the tile's edge. */
html[data-flag-rw-s4-sizes="on"] .liq-kpis .kpi .v { white-space: normal; text-overflow: clip; }
html[data-flag-rw-s4-sizes="on"] .liq-kpis .kpi .v small { white-space: nowrap; }
/* The first-screen verdict chip (rw-s3-first-screen, "5 Better · 3 Worse") may wrap on a narrow phone at Larger text, so the
   chevron stays on the screen. */
html.lay-narrow[data-flag-rw-s4-sizes="on"][data-flag-rw-s3-first-screen="on"] .verdict .v-line .vb { flex: 0 1 auto; min-width: 0; white-space: normal; }