/* Window sizes (Portal rework step 5; decision 4 and plan problems 4, 5, 6, 12), behind the flag rw-s5-window.
   Every rule below sits under html[data-flag-rw-s5-window] (public/flags.js sets it only while the flag is on) except
   the empty strip's own display:none, so with the flag off the page is as it was. The layout classes on <html> come from
   layout.js (started by app.js when this flag is on): lay-phone, lay-tablet, lay-strip (1024 to 1279px, and sideways),
   lay-desk, lay-wide (1920+), lay-ultra (2560+), lay-mega (5120+), lay-side (a phone held sideways), is-low (under 500px
   tall). They are measured in the page's own text size, so the wide-screen rules follow Text Size too. */

.p-strip { display: none; }

/* ============================================================ the sidebar: Leave The Portal and Collapse pinned */
/* The brand on top, the links scrolling between, the account and Collapse at the bottom. */
html[data-flag-rw-s5-window] .p-rail { overflow: hidden; }
html[data-flag-rw-s5-window] .p-brand { flex: none; }
html[data-flag-rw-s5-window] .p-nav {
  flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overflow-x: hidden; margin-inline: -4px; padding: 0 4px 4px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--k-rgb-148-163-184), var(--k-a-0-25)) transparent;
}
html[data-flag-rw-s5-window] .p-account, html[data-flag-rw-s5-window] .p-collapse { flex: none; }
html[data-flag-rw-s5-window] .p-account { margin-top: 0; }

/* ============================================================ the strip of icons: 1024 to 1279px, and sideways */
html[data-flag-rw-s5-window]:not(.rail-mini) { --rail: 15rem; } /* the sidebar grows with the text: 240px at the default size */
html[data-flag-rw-s5-window].lay-strip { --strip: 72px; --rail: 15rem; }
html[data-flag-rw-s5-window].lay-side { --strip: 56px; }
html[data-flag-rw-s5-window].lay-strip .p-shell { grid-template-columns: var(--strip) minmax(0, 1fr); }
html[data-flag-rw-s5-window].lay-strip .p-strip {
  position: sticky; top: 0; z-index: 30; display: flex; flex-direction: column; gap: 2px; height: 100vh; height: 100dvh; padding: 10px 4px 8px;
  overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--line); background: rgba(var(--t, 8, 16, 22), 0.5); scrollbar-width: none;
}
html[data-flag-rw-s5-window].lay-strip .p-strip::-webkit-scrollbar { display: none; }
html[data-flag-rw-s5-window] .ps-brand { display: grid; place-items: center; flex: none; padding: 2px 0 8px; }
html[data-flag-rw-s5-window] .ps-brand img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(var(--k-rgb-47-123-255), var(--k-a-0-35))); }
html[data-flag-rw-s5-window] .ps-i {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 6px 0;
  border: 0; border-radius: 10px; background: none; color: var(--soft); font: 500 0.75rem/1.15 var(--font); text-align: center; cursor: pointer;
}
html[data-flag-rw-s5-window] .ps-i span { max-width: 100%; white-space: nowrap; letter-spacing: -0.02em; }
html[data-flag-rw-s5-window] .ps-i svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-flag-rw-s5-window] .ps-i:hover { background: rgba(var(--acc, 56, 189, 248), 0.07); color: var(--white); }
html[data-flag-rw-s5-window] .ps-i[aria-current="page"], html[data-flag-rw-s5-window] .ps-i.is-current, html[data-flag-rw-s5-window] .ps-i[aria-expanded="true"] {
  background: rgba(var(--acc, 56, 189, 248), 0.14); color: var(--white); box-shadow: inset 2px 0 0 var(--sky);
}
html[data-flag-rw-s5-window] .ps-i[aria-current="page"] svg, html[data-flag-rw-s5-window] .ps-i.is-current svg { color: var(--sky); }
/* Leave The Portal and Open The Sidebar stay in view in a short window: the icons scroll, the foot sticks. */
html[data-flag-rw-s5-window] .ps-foot { position: sticky; bottom: -8px; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 8px; background: linear-gradient(transparent, rgba(var(--t, 8, 16, 22), 0.96) 10px); }
html[data-flag-rw-s5-window].is-low .ps-i { min-height: 40px; }
html[data-flag-rw-s5-window] .ps-foot .p-collapse { width: 100%; }
html[data-flag-rw-s5-window] .ps-open svg { transform: rotate(180deg); }

/* The tabs and the phone's top bar give way to the strip. */
html[data-flag-rw-s5-window].lay-strip .p-tabs, html[data-flag-rw-s5-window].lay-strip .p-sheet { display: none; }
html[data-flag-rw-s5-window].lay-strip .p-view { padding-bottom: clamp(14px, 1.6vw, 22px); }
html[data-flag-rw-s5-window].lay-strip .p-top .p-mobile-brand { display: none; }
html[data-flag-rw-s5-window].lay-strip .p-cmdbox { flex: 0 1 400px; }

/* The full sidebar opens over the page, at the group clicked (always 240px, never the collapsed rail). */
html[data-flag-rw-s5-window].lay-strip .p-rail {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; display: flex; width: var(--rail); max-width: 100vw; height: 100vh; height: 100dvh;
  background: var(--x-deep, var(--k-ink-0a1219)); box-shadow: 24px 0 60px -20px var(--k-black); transform: translateX(-105%); visibility: hidden;
}
html[data-flag-rw-s5-window].lay-strip.rail-open .p-rail { transform: none; visibility: visible; }
html[data-flag-rw-s5-window].lay-strip.rail-open .p-shell::after { content: ""; position: fixed; inset: 0; z-index: 49; background: rgba(var(--k-rgb-3-7-10), var(--k-a-0-6)); }
html[data-flag-rw-s5-window].lay-strip.rail-mini .p-brand-name, html[data-flag-rw-s5-window].lay-strip.rail-mini .p-rail .p-label,
html[data-flag-rw-s5-window].lay-strip.rail-mini .p-rail .p-me { display: revert; }
html[data-flag-rw-s5-window].lay-strip.rail-mini .p-rail .p-group { width: fit-content; height: auto; margin: 16px 10px 6px; padding: 3px 8px 3px 9px; border: 1px solid rgba(var(--acc, 56, 189, 248), 0.28); overflow: visible; background: linear-gradient(180deg, rgba(var(--acc, 56, 189, 248), 0.12), rgba(var(--acc, 56, 189, 248), 0.05)); color: var(--k-sky-7dd3fc); }
html[data-flag-rw-s5-window].lay-strip.rail-mini .p-rail .p-link { justify-content: flex-start; padding-inline: 10px; }
html[data-flag-rw-s5-window].lay-strip.rail-mini .p-rail .p-account { flex-direction: row; padding-inline: 4px; }
html[data-flag-rw-s5-window].lay-strip.rail-mini .p-brand { justify-content: flex-start; padding-inline: 10px; }
html[data-flag-rw-s5-window].lay-strip .p-collapse svg { transform: none; }
/* The slide runs only once the sidebar has been opened (window-strip.js sets rail-anim), never when a window resize or the
   first paint changes the layout. */
@media (prefers-reduced-motion: no-preference) {
  html[data-flag-rw-s5-window].rail-anim.lay-strip .p-rail { transition: transform 0.18s ease, visibility 0s linear 0.18s; }
  html[data-flag-rw-s5-window].rail-anim.lay-strip.rail-open .p-rail { transition: transform 0.18s ease; }
}


/* ============================================================ a phone held sideways (under 500px tall, 560px+ wide) */
/* A slim top bar and ticker, the nav as an icon strip at the side, a one-line header; the opened sidebar is 420px with
   the links two to a row. */
html[data-flag-rw-s5-window].lay-side { --p-top: 44px; --tape-h: 28px; --gap: 8px; }
html[data-flag-rw-s5-window].lay-side .ps-i { min-height: 44px; }
html[data-flag-rw-s5-window].lay-side .ps-i span { display: none; }
html[data-flag-rw-s5-window].lay-side .p-rail { width: min(420px, 100vw); }
html[data-flag-rw-s5-window].lay-side .p-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
html[data-flag-rw-s5-window].lay-side .p-nav .p-group { grid-column: 1 / -1; }
html[data-flag-rw-s5-window].lay-side .p-nav .p-link { min-height: 44px; }
html[data-flag-rw-s5-window].lay-side .p-top { gap: 10px; }
html[data-flag-rw-s5-window].lay-side .p-cmdbox { flex: 1; height: 32px; }
html[data-flag-rw-s5-window].lay-side .p-cmdbox kbd, html[data-flag-rw-s5-window].lay-side .p-clock, html[data-flag-rw-s5-window].lay-side .p-fresh { display: none; }
html[data-flag-rw-s5-window].lay-side .p-view { padding: 10px 14px; }
html[data-flag-rw-s5-window].lay-side .v-head { flex-wrap: nowrap; align-items: center; gap: 12px; }
/* The title block (it holds the page's controls) shrinks to the row and wraps them; the verdict grows from nothing into what is
   left, never under its chip and chevron, so an opened verdict (taller, not wider) yields to the title and its Customise button. */
html[data-flag-rw-s5-window].lay-side .v-title { flex: 0 1 auto; min-width: 0; }
html[data-flag-rw-s5-window].lay-side .v-title .kicker, html[data-flag-rw-s5-window].lay-side .v-row { display: none; }
html[data-flag-rw-s5-window].lay-side .v-title h1 { font-size: 1.375rem; white-space: nowrap; }
html[data-flag-rw-s5-window].lay-side .verdict { flex: 1 1 0; min-width: min-content; padding: 6px 12px; }
html[data-flag-rw-s5-window].lay-side .verdict b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* A verdict that the first-screen step makes tappable (is-open) shows its details; otherwise it stays one line. (The chip is
   left to that step: rw-s3-first-screen keeps it.) Without that step there is no tap, so the details stay. */
html[data-flag-rw-s5-window][data-flag-rw-s3-first-screen="on"].lay-side .verdict:not(.is-open) small { display: none; }
html[data-flag-rw-s5-window].lay-side .verdict.is-open b { white-space: normal; }

/* ============================================================ panels two to a row on tablets */
/* 700 to 1099px: where a grid is made only of halves (6 of 12 columns) they go two to a row, and an odd last one takes the
   row. A grid with wider neighbours (5, 7, 8, 9, 12 columns) is left as it is, so no row is left half empty. */
@media (min-width: 700px) and (max-width: 1099px) {
  html[data-flag-rw-s5-window] .dash:not(:has(> :is(.s-3, .s-4, .s-5, .s-7, .s-8, .s-9, .s-12))) > .s-6 { grid-column: span 6; }
  html[data-flag-rw-s5-window] .dash:not(:has(> :is(.s-3, .s-4, .s-5, .s-7, .s-8, .s-9, .s-12))) > .s-6:last-child:nth-child(odd) { grid-column: span 12; }
}

/* ============================================================ wide screens: tables, notes and Market Day */
/* Market Day is at most about 1600px, and the dials stay beside it: where the Overview puts them in the next column
   (overview-674-market), that column is capped and the dials follow it. (Where rw-s3-first-screen lays the dials out, that
   step owns the width.) Notes read at 75 characters. */
html[data-flag-rw-s5-window].lay-wide .ov[data-mkt] { grid-template-columns: minmax(0, 1600px) minmax(250px, 320px) minmax(0, 1fr); } /* (the third track is the rest of the page: the full-width sections still span it) */
html[data-flag-rw-s5-window] .panel-foot:not(.md-foot), html[data-flag-rw-s5-window] .strip-info, html[data-flag-rw-s5-window] .ch-hint { max-width: 75ch; }
/* A table is as wide as its columns (a 3-coin Funding table is not 2330px): the table itself, and, where window-hug.js
   measured it (--hug, on a grid whose table panel has no chart in it), its panel too: alone in its row the panel hugs the table;
   beside a list the first track does and the list sits right next to it. */
html[data-flag-rw-s5-window].lay-wide .tbl-wrap > table.tbl:not(.tbl-2), html[data-flag-rw-s5-window].lay-wide .tq-tbl { width: max-content; min-width: min(100%, 24rem); max-width: 100%; }
html[data-flag-rw-s5-window].lay-wide .dash[data-hug] > .panel.s-12:has(> .tbl-wrap, > .pb > .tbl-wrap) { justify-self: start; width: min(var(--hug), 100%); }
html[data-flag-rw-s5-window].lay-wide .dash[data-hug]:has(> :is(.s-8, .s-9) + :is(.s-3, .s-4)):not(:has(> :not(.s-3, .s-4, .s-8, .s-9, .s-12))) { grid-template-columns: minmax(0, var(--hug)) minmax(0, 640px) minmax(0, 1fr); }
html[data-flag-rw-s5-window].lay-wide .dash[data-hug]:has(> :is(.s-8, .s-9) + :is(.s-3, .s-4)):not(:has(> :not(.s-3, .s-4, .s-8, .s-9, .s-12))) > :is(.s-3, .s-4, .s-8, .s-9) { grid-column: auto; }
html[data-flag-rw-s5-window].lay-wide .dash[data-hug]:has(> :is(.s-8, .s-9) + :is(.s-3, .s-4)):not(:has(> :not(.s-3, .s-4, .s-8, .s-9, .s-12))) > .s-12 { grid-column: 1 / -1; }

/* ============================================================ the sidebar's folding group chips (D14-f) */
/* A group's name is a row: the chip fits its text (tinted as before, 12px) and a chevron sits at the row's end. */
html[data-flag-rw-s5-window] .p-group[data-fold] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: auto; margin: 0.75rem 0.625rem 0.25rem; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; border-radius: 0.375rem; }
html[data-flag-rw-s5-window] .p-group[data-fold] .pg-chip { padding: 3px 8px 3px 9px; border: 1px solid rgba(var(--grp, var(--acc, 56, 189, 248)), 0.32); border-radius: 6px;
  background: linear-gradient(180deg, rgba(var(--grp, var(--acc, 56, 189, 248)), 0.12), rgba(var(--grp, var(--acc, 56, 189, 248)), 0.04)); box-shadow: 0 0 12px -4px rgba(var(--grp, var(--acc, 56, 189, 248)), 0.35);
  color: rgb(var(--grp, var(--acc, 56, 189, 248))); font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
html[data-flag-rw-s5-window] .p-group[data-fold] .pg-chev { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: var(--muted); }
html[data-flag-rw-s5-window] .p-group[data-fold] .pg-chev svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-flag-rw-s5-window] .p-group[data-fold][aria-expanded="false"] .pg-chev svg { transform: rotate(-90deg); }
html[data-flag-rw-s5-window] .p-group[data-fold]:hover .pg-chev { color: var(--white); }
html[data-flag-rw-s5-window] .p-group[data-fold]:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
html[data-flag-rw-s5-window]:not(.rail-mini) .p-link.pg-folded { display: none; }
html[data-flag-rw-s5-window].rail-mini .p-group[data-fold] .pg-chip, html[data-flag-rw-s5-window].rail-mini .p-group[data-fold] .pg-chev { display: none; }

/* ============================================================ no sideways jump between pages that scroll and pages that don't (L5) */
/* The page keeps room for its scrollbar whether or not it needs one: the document where it scrolls, and the Portal's own
   scroller on a desktop. (Scrollbars that float over the page, on phones and tablets, take no room either way.) */
html[data-flag-rw-s5-window] { scrollbar-gutter: stable; }
html[data-flag-rw-s5-window] .p-view { scrollbar-gutter: stable; }

/* ============================================================ 480 to 699px: small cards two to a row, dials three from 600px (L1) */
@media (min-width: 480px) and (max-width: 699px) {
  html[data-flag-rw-s5-window] .dash:not(.my-dash) > :is(.s-3, .s-4) { grid-column: span 6; }
  html[data-flag-rw-s5-window] .dash:not(.my-dash) > :is(.s-3, .s-4):last-child:nth-child(odd) { grid-column: span 12; }
}
/* (Not with rw-s3-first-screen on: that step lays the dials out itself, as compact cards, and three across would be too narrow.) */
@media (min-width: 600px) and (max-width: 699px) {
  html[data-flag-rw-s5-window]:not([data-flag-rw-s3-first-screen]) .glance.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  html[data-flag-rw-s5-window]:not([data-flag-rw-s3-first-screen]) .dial-card { display: flex; padding: 0.625rem 0.75rem; }
}

/* ============================================================ list panels by band, and the 640px list cap (P4, L3, PORTAL-575) */
/* The five Overview feeds: three and two below 2880px (as the Portal has them), all five in a row from 2880px (about 520px each,
   640px at most). A grid made only of list panels (3 columns each) takes 4 from 2240px, 5 from
   2880px, 6 from 3440px and 8 from 5120px, whatever their number (a short last row is swept to full width). */
html[data-flag-rw-s5-window].lay-cols5 .dash.feeds { grid-template-columns: repeat(5, minmax(0, 640px)); justify-content: start; }
html[data-flag-rw-s5-window].lay-cols5 .dash.feeds > .panel, html[data-flag-rw-s5-window].lay-cols5 .dash.feeds > .panel:nth-child(n) { grid-column: auto; }
html[data-flag-rw-s5-window].lay-cols4 .dash:not(.feeds):not(:has(> :not(.s-3))) { grid-template-columns: repeat(4, minmax(0, 640px)); justify-content: start; }
html[data-flag-rw-s5-window].lay-cols5 .dash:not(.feeds):not(:has(> :not(.s-3))) { grid-template-columns: repeat(5, minmax(0, 640px)); justify-content: start; }
html[data-flag-rw-s5-window].lay-cols6 .dash:not(.feeds):not(:has(> :not(.s-3))) { grid-template-columns: repeat(6, minmax(0, 640px)); justify-content: start; }
html[data-flag-rw-s5-window].lay-mega .dash:not(.feeds):not(:has(> :not(.s-3))) { grid-template-columns: repeat(8, minmax(0, 640px)); justify-content: start; }
html[data-flag-rw-s5-window]:is(.lay-cols4) .dash:not(.feeds):not(:has(> :not(.s-3))) > .s-3 { grid-column: auto; }