/* Portal rework step 3, held options for Market Day (flags rw-s3-bar, rw-s3-bigday, rw-s3-overlay2, rw-s3-cap, rw-s3-dialsmax:
   the dials in an expanded panel). Every rule sits under html[data-flag-rw-s3-first-screen="on"] and a class that views/overview.js
   adds to .ov only when its flag is on, so with the flags off nothing here applies. The owner picked toolbar A and overlay D on
   2026-10-13 (toolbar B and overlays A to C were removed); each option is a screenshot in docs/dossiers/PORTAL/evidence/rw-s3-first-screen/.
   Options:  bar (A)      one compact toolbar: the coin as a list, Line | Candles as icons, Day | Live
             bigday       the dials column is narrower so the chart is bigger (from 1920px)
             overlay2 (D) the price and its change full bleed over the chart, the toolbar a glass pill at its top-right
             cap          Market Day never wider than 1600px (from 2560px the Technical Summary sits beside the dials) */
html[data-flag-rw-s3-first-screen="on"] .day-tools { display: contents; }
html[data-flag-rw-s3-first-screen="on"] .day-ctl .seg .ic, html[data-flag-rw-s3-first-screen="on"] .day-ctl .seg .ls, html[data-flag-rw-s3-first-screen="on"] .md-ov { display: none; }
html[data-flag-rw-s3-first-screen="on"] .day-ctl .seg .ic { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1280px) {
  /* ---- the compact toolbar (bar A, and under the overlay) */
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day { --dh: 2rem; grid-template-rows: auto auto auto; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .kicker { display: none; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .ph-t h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-pick { display: block; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-pick + .seg { display: none; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-pick select { height: var(--dh); padding: 0 1.5rem 0 0.625rem; border-radius: 0.5rem; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-pick::after { right: 0.6rem; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-ctl { gap: 0.375rem; flex-wrap: nowrap; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-ctl .seg { flex: none; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-ctl .seg button { min-height: calc(var(--dh) - 0.25rem); padding: 0 0.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .seg[aria-label="Chart Type"] .ic { display: block; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .seg[aria-label="Chart Type"] .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .seg[aria-label="View"] .lf { display: none; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .seg[aria-label="View"] .ls { display: inline; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .btn-chip { height: var(--dh); padding: 0 0.625rem; gap: 0.3125rem; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .right { gap: 0.25rem; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .right :is(.ph-info, .ph-max) { width: var(--dh); height: var(--dh); }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day > #o-dayc { grid-column: 1 / -1; grid-row: 2; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day > .panel-foot { grid-row: 3; }

  /* ---- overlay D: the toolbar floats over the chart's top-right as a glass pill */
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day > .day-ctl { display: contents; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-pick { grid-column: 2; grid-row: 1; justify-self: end; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools {
    grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: end; z-index: 4; margin: 2.2rem 0.75rem 0 0;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 0.25rem; padding: 0.1875rem;
    border: 1px solid rgba(var(--k-rgb-255-255-255), var(--k-a-0-08)); border-radius: 0.75rem; background: rgba(var(--k-rgb-8-14-24), var(--k-a-0-85)); box-shadow: 0 0.5rem 1.5rem -0.75rem rgba(var(--k-rgb-0-0-0), var(--k-a-0-7));
  }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools .seg { border: 0; background: none; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools .seg + .seg { padding-left: 0.25rem; border-left: 1px solid var(--line-strong); border-radius: 0; }
  /* rw-s3-live-row: the Live Chart has no price block for the toolbar to clear, so the toolbar's margin left a band under the
     head and the period bar stretched over the row. In Live, the period bar sits left and the toolbar right, on one row. */
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-live-row="on"] .ov.ovl-d #o-day:has([data-view="live"][aria-pressed="true"]) .day-tools { grid-column: 2 / -1; grid-row: 2; justify-self: end; margin: 0; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-live-row="on"] .ov.ovl-d #o-day:has([data-view="live"][aria-pressed="true"]) :is(.seg[aria-label="Candles"], .seg[aria-label="Period"]) { grid-column: 1; grid-row: 2; justify-self: start; }

  /* ---- overlays: the price and its change over the chart's top-left */
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov #o-day > .md-ov {
    grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: start; z-index: 3; pointer-events: none;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; max-width: 60%; margin: 2.2rem 0 0 0.75rem; font-variant-numeric: tabular-nums;
  }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-t { color: var(--muted); font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-p { color: var(--white); font-weight: 600; letter-spacing: -0.01em; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-c { font-weight: 600; white-space: nowrap; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-c.up { color: var(--up); } html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-c.down { color: var(--k-red-f87171); } html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-c.flat { color: var(--muted); }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-c i { display: none; font-style: normal; font-size: 0.7em; margin-right: 0.25em; }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-per { color: var(--faint); font-size: 0.75rem; } html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-per em { display: none; font-style: normal; } html[data-flag-rw-s3-first-screen="on"] .ov.has-ov .md-ov .ov-per b { font-weight: 500; }
  /* (the price lives in the corner, so the tag beside the dot only shows while the replay runs) */
  html[data-flag-rw-s3-first-screen="on"] .ov.has-ov #o-day:not(:has([data-replay][aria-pressed="true"])) #o-dayc .md-tag { visibility: hidden; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day { padding: 0; overflow: hidden; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day > .panel-head > .ph-t { margin: 0.75rem 0 0 1rem; } html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day > .panel-head > .right { margin: 0.75rem 1rem 0 0; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day > #o-dayc { margin-top: 0.5rem; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day > .panel-foot { margin: 0; padding: 0.5rem 1rem 0.75rem; border-top: 1px solid var(--line); }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools { margin-right: 1rem; opacity: 0.55; transition: opacity 0.18s ease; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day:hover .day-tools, html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools:focus-within { opacity: 1; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day > .md-ov { display: grid; grid-template-columns: auto auto; column-gap: 0.625rem; align-items: baseline; margin-left: 1rem; text-shadow: 0 1px 0.75rem rgba(var(--k-rgb-10-18-25), var(--k-a-0-95)), 0 0 0.25rem rgba(var(--k-rgb-10-18-25), var(--k-a-0-9)); }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d .md-ov .ov-t { grid-column: 1 / -1; margin-bottom: 0.125rem; } html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d .md-ov .ov-t::after { content: " · Last 24 hours"; letter-spacing: 0.04em; }
  html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d .md-ov .ov-p { font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.02em; } html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d .md-ov .ov-c { font-size: 0.875rem; } html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d .md-ov .ov-c i { display: inline; } html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d .md-ov .ov-per { display: none; }
}
@media (min-width: 1280px) and (pointer: coarse) { html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools { opacity: 0.75; } }
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) { html[data-flag-rw-s3-first-screen="on"] .ov.ovl-d #o-day .day-tools { transition: none; } }

/* ---- bigday: from 1920px to 2559px the dials column is narrower (24rem), so Market Day (and its chart) is bigger. From 2560px the
   three-column layout of portal.css keeps its own widths (the Technical Summary is a column there). The history of each dial is the
   short list of the narrow layout (label, figure, mood) and a long mood wraps rather than being cut. */
@media (min-width: 1920px) and (max-width: 2559px) {
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.big-day { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
  html[data-flag-rw-s3-first-screen="on"] .ov.big-day #o-glance .dial-card > .fng-hist { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-flag-rw-s3-first-screen="on"] .ov.big-day #o-glance .fng-c, html[data-flag-rw-s3-first-screen="on"] .ov.big-day #o-glance .fng-c:nth-child(3) { display: grid; grid-template-columns: 4.75rem auto minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 5px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
  html[data-flag-rw-s3-first-screen="on"] .ov.big-day #o-glance .fng-c small { text-align: right; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
/* ---- cap: Market Day is never wider than 1600px; from 2560px, when Market Day is followed by the dials, they sit beside it with the
   Technical Summary under them (when that follows the dials) and the first two lists as a column of their own (views/overview.js
   adds .cap-beside and .cap-ts from the saved order and moves the lists between one block and two as the window crosses 2560px).
   Any other order keeps portal.css's layout, with Market Day held to 1600px. */
@media (min-width: 2560px) {
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-day > [data-sec="day"] { max-width: 1600px; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside { grid-template-columns: minmax(0, min(1600px, 54%)) minmax(0, 1fr) minmax(0, 26rem); grid-template-rows: auto 1fr; align-items: start; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside.cap-ts { grid-template-rows: auto auto 1fr; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside > [data-sec="day"]:not([hidden]) { grid-column: 1; grid-row: 1 / span 2; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside.cap-ts > [data-sec="day"]:not([hidden]) { grid-row: 1 / span 3; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside > [data-sec="day"]:not([hidden]) + [data-sec="glance"]:not([hidden]) { grid-column: 2; grid-row: 1; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside.cap-ts > [data-sec="day"]:not([hidden]) + [data-sec="glance"]:not([hidden]) + [data-sec="trend"]:not([hidden]) { grid-column: 2; grid-row: 2; }
  /* The Feeds section lets its blocks join the page's grid: the first two lists are the third column, the heading and the other three
     lists keep the rows below. */
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside > [data-sec="feeds"]:not([hidden]) { display: contents; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside [data-sec="feeds"] > .sec-head { grid-column: 1 / -1; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside [data-sec="feeds"] > .feeds-1 { grid-column: 3; grid-row: 1 / span 2; align-self: start; align-content: start; grid-template-columns: minmax(0, 1fr); }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside.cap-ts [data-sec="feeds"] > .feeds-1 { grid-row: 1 / span 3; }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside [data-sec="feeds"] > .feeds-2 { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside [data-sec="feeds"] .dash.feeds > .panel:nth-child(n) { grid-column: auto; }
}
/* Where the second column is wide enough for the three dials in a row, each card is the narrow one: the gauge, the mood and the
   three history boxes under it. */
@media (min-width: 3300px) {
  html[data-flag-rw-s3-first-screen="on"] .view-overview .ov.cap-beside > [data-sec="day"]:not([hidden]) + [data-sec="glance"]:not([hidden]) .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-flag-rw-s3-first-screen="on"] .ov.cap-beside #o-glance .dial-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
  html[data-flag-rw-s3-first-screen="on"] .ov.cap-beside #o-glance .dial-card > .gauge { grid-column: 1; grid-row: 2; justify-self: center; }
  html[data-flag-rw-s3-first-screen="on"] .ov.cap-beside #o-glance .dial-card .dial-mood { grid-column: 1; grid-row: 3; text-align: center; }
  html[data-flag-rw-s3-first-screen="on"] .ov.cap-beside #o-glance .dial-card > .fng-hist { grid-column: 1; grid-row: 4; margin-top: 8px; }
}

/* ---- DF23 (flag rw-s3-dialsmax): in an expanded panel the three dial cards' dials scale up (and their readings with them). Under 900px
   the card is one column (the dial, its mood, then the three history boxes), so nothing is cut on a phone. */
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-content: center; column-gap: 2rem; padding: 2rem; }
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max > .gauge svg { width: 100%; max-width: 22rem; height: auto; }
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .dial-mood { font-size: 1.75rem; }
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max > .fng-hist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c, html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c:nth-child(3) { display: block; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: rgba(var(--k-rgb-255-255-255), var(--k-a-0-02)); }
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c b { font-size: 1.5rem; }
html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c .l, html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c small { font-size: 1rem; text-align: left; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; column-gap: 0; padding: 1rem; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max > .gauge { grid-column: 1; grid-row: auto; justify-self: center; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .dial-mood { grid-column: 1; grid-row: auto; text-align: center; font-size: 1.375rem; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max > .fng-hist { grid-column: 1; grid-row: auto; gap: 0.5rem; margin-top: 0.75rem; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c { padding: 0.5rem; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c b { font-size: 1.25rem; }
  html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c .l, html[data-flag-rw-s3-first-screen="on"][data-flag-rw-s3-dialsmax="on"] #o-glance .dial-card.is-max .fng-c small { font-size: 0.8125rem; }
}

/* ---- touch: on a screen with a touch pointer the compact toolbar's buttons and the coin list are at least 44px tall */
@media (min-width: 1280px) and (pointer: coarse) {
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day { --dh: max(44px, 2.75rem); }
  html[data-flag-rw-s3-first-screen="on"] .ov.has-tools #o-day .day-ctl .seg button { min-width: 44px; min-height: var(--dh); }
}