/* Portal rework step 7: colour (plan decisions 5 and 6). One switch per pick (owner): every rule hangs on exactly one of
   html[data-flag-rw-s7-faint | done-rows | tile-ink | red-text | tape-type | tape-more | tape-pause] (public/flags.js; the
   seamless loop on any of the three tape flags), so with all of them off this file changes nothing.
   The Price Moves option and the accent lines have their own flags (rw-s7-moves, rw-s7-accent). */

/* ================================================================ rw-s7-faint */
/* The faint grey of notes and source lines is the lighter grey the other themes already use (theme.js). */
html[data-flag-rw-s7-faint] body.portal-app { --faint: var(--k-pick-8797ad); }

/* ================================================================ rw-s7-done-rows */
/* Finished calendar rows keep full strength, and their name goes to the muted grey so they still read as done. Each
   ready-made theme has its own surfaces, so the name takes a value that meets 6.5:1 on every one of them (html[data-theme]
   is set by app.js while this flag or rw-s7-red-text is on; a colour of the visitor's own ("custom") takes the values of the
   brightest-surfaced themes). */
html[data-flag-rw-s7-done-rows] .event-row.is-past { opacity: 1; }
html[data-flag-rw-s7-done-rows] .event-row.is-past .ev, html[data-flag-rw-s7-done-rows] .event-row.is-past .ev a:not(:hover) { color: var(--done-name, var(--muted)); }
html[data-flag-rw-s7-done-rows][data-theme="midnight"] .portal-app, html[data-flag-rw-s7-done-rows][data-theme="plum"] .portal-app,
html[data-flag-rw-s7-done-rows][data-theme="steel"] .portal-app { --done-name: var(--k-pick-aab7c8); }
html[data-flag-rw-s7-done-rows][data-theme="black"] .portal-app, html[data-flag-rw-s7-done-rows][data-theme="wine"] .portal-app,
html[data-flag-rw-s7-done-rows][data-theme="void"] .portal-app { --done-name: var(--k-pick-a0aec0); }
html[data-flag-rw-s7-done-rows][data-theme="gold"] .portal-app, html[data-flag-rw-s7-done-rows][data-theme="emerald"] .portal-app,
html[data-flag-rw-s7-done-rows][data-theme="custom"] .portal-app { --done-name: var(--k-pick-c0cad8); }

/* ================================================================ rw-s7-tile-ink */
/* Heatmap tiles (US Stocks, the crypto map), their colour keys and the crypto-map bubbles: a bright colour takes dark
   words (class set by flags/rw-s7.js), the rest keep white; the move under a name is full strength, not 92%. */
html[data-flag-rw-s7-tile-ink] .tm-cell i { opacity: 1; }
html[data-flag-rw-s7-tile-ink] .tm-cell.tm-dark { color: var(--k-black); }
/* The colour key's swatches are the same colours whatever the figures: the brightest end (+100%) and, in the seven-swatch
   keys, the one before it (+67%) take dark words. */
html[data-flag-rw-s7-tile-ink]:not([data-moves="bo"]) .tm-legend span:last-child,
html[data-flag-rw-s7-tile-ink]:not([data-moves="bo"]) .tm-legend span:nth-child(6):nth-last-child(2) { color: var(--k-black); }
html[data-flag-rw-s7-tile-ink] .tm-cell.tm-dark b, html[data-flag-rw-s7-tile-ink] .tm-cell.tm-dark i { text-shadow: none; }
html[data-flag-rw-s7-tile-ink] .tm-cell.tm-dark:hover { box-shadow: inset 0 0 0 2px rgba(var(--k-rgb-0-0-0), var(--k-a-0-7)); }
html[data-flag-rw-s7-tile-ink] .cm-svg g.tm-dark text { fill: var(--k-black); stroke: none; opacity: 1; }

/* ================================================================ rw-s7-red-text */
/* Red TEXT under 24px is a slightly lighter red, #F26161 (a value of its own on each ready-made theme's surfaces, 4.5:1).
   Bars, candles, large figures and the RSI chart keep #EF4444, and so does the price chart's own read-out (.dr-ohlc). */
html[data-flag-rw-s7-red-text] .portal-app { --down-text: var(--k-pick-f26161); }
html[data-flag-rw-s7-red-text][data-theme="steel"] .portal-app { --down-text: var(--k-pick-f57373); }
html[data-flag-rw-s7-red-text][data-theme="gold"] .portal-app, html[data-flag-rw-s7-red-text][data-theme="emerald"] .portal-app,
html[data-flag-rw-s7-red-text][data-theme="custom"] .portal-app { --down-text: var(--k-pick-f78585); }
html[data-flag-rw-s7-red-text] .portal-app .down:not(i, .dr-ohlc, .dr-ohlc *),
html[data-flag-rw-s7-red-text] .portal-app :is(.verdict small b.down, .dv .l b.down, .kv .v b.down, .gl-v b.down, .tr-c.down b,
  .tr-c.lean-down b, .gd-rule b.down, .tq-counts b.down, .tq-verdict.down, .tq-read.down, .my-tq .p.down, .event-row .fig.act.st-down b,
  .sub-h.down, .mk-s .down, .mk-tbl td.down, .liq-side.down, .tx-tally .down, .vb.down, .tx-mood.down, .badge.st-down, .tx-c.down b),
html[data-flag-rw-s7-red-text] .portal-app :is([style*="color:#EF4444"], [style*="color:var(--down)"]) { color: var(--down-text) !important; }

/* ================================================================ rw-s7-tape-type */
/* Symbols 12px, values 14px. */
html[data-flag-rw-s7-tape-type] .p-tape a { font-size: 0.875rem; }
html[data-flag-rw-s7-tape-type] .p-tape .l { font-size: 0.75rem; }

/* ================================================================ the loop (any of the three tape flags) */
/* The slide never stops. flags/rw-s7.js repeats the set as often as the screen needs and gives the track its set width,
   so it moves one set and starts over, at about 40 px a second on any window (hover still holds it). */
@keyframes tape-slide-set { to { transform: translateX(calc(var(--tape-set) * -1)); } }
html:is([data-flag-rw-s7-tape-type], [data-flag-rw-s7-tape-more], [data-flag-rw-s7-tape-pause]) .p-tape.is-px .tape-track { animation-name: tape-slide-set; }

/* ================================================================ rw-s7-tape-more */
/* Decision 6b: the five extra instruments show only where the plain set is narrower than the screen (flags/rw-s7.js). */
html[data-flag-rw-s7-tape-more] .p-tape:not(.is-wide) [data-more] { display: none; }

/* ================================================================ rw-s7-tape-pause */
html[data-flag-rw-s7-tape-pause] .p-tape { position: relative; }
/* Pointing at or tabbing into the figures holds the slide (as today), but the Pause button sits in the tape and must not
   hold it: a tap leaves the pointer and the focus on the button, and Play would otherwise stay still. The hold is the
   track's own, so the button is outside it; Pause is the one thing that holds from the button. */
html[data-flag-rw-s7-tape-pause] .p-tape:hover .tape-track, html[data-flag-rw-s7-tape-pause] .p-tape:focus-within .tape-track { animation-play-state: running; }
html[data-flag-rw-s7-tape-pause] .p-tape .tape-track:hover, html[data-flag-rw-s7-tape-pause] .p-tape .tape-track:focus-within { animation-play-state: paused; }
html[data-flag-rw-s7-tape-pause] .p-tape.is-paused .tape-track { animation-play-state: paused; }
/* A Pause button on any screen with a touch screen (laptops included), 44px to tap; not with reduced motion, where the
   tape already stands still. */
html[data-flag-rw-s7-tape-pause] .tape-pause { display: none; }
@media (any-pointer: coarse) and (prefers-reduced-motion: no-preference) {
  html[data-flag-rw-s7-tape-pause] { --tape-h: calc(2.75rem + 1px); } /* the bar's own 1px line, so the button inside is 44px */
  html[data-flag-rw-s7-tape-pause] .p-tape .tape-pause {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; display: grid; place-items: center; box-sizing: border-box; width: 56px; padding: 0 0 0 12px; /* as tall as the tape: 44px, or the sideways phone's slim one */
    border: 0; background: linear-gradient(90deg, transparent, rgba(var(--t, 8, 16, 22), 0.96) 35%); color: var(--soft); cursor: pointer;
  }
  html[data-flag-rw-s7-tape-pause] .tape-pause svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  html[data-flag-rw-s7-tape-pause] .tape-pause .i-play { display: none; fill: currentColor; stroke-width: 1.5; }
  html[data-flag-rw-s7-tape-pause] .tape-pause[aria-pressed="true"] .i-pause { display: none; }
  html[data-flag-rw-s7-tape-pause] .tape-pause[aria-pressed="true"] .i-play { display: inline; }
}
/* ================================================================ decision 12: Price Moves, Blue / Orange */
/* html[data-moves="bo"] is set by app.js only while rw-s7-moves is on and the visitor picked Blue / Orange in Portal
   Colours. The tokens below are the whole palette of the option (a dozen named colours, W9); everything that shows a
   price move reads them. Never the RSI chart (#r-chart), the dials, or a live dot (a live feed is not a price move). */
html[data-flag-rw-s7-moves] {
  --mv-blue: var(--k-pick-3b82f6); --mv-blue-text: var(--k-pick-60a5fa); --mv-blue-rgb: 59, 130, 246;
  --mv-orange: var(--k-orange-f97316); --mv-orange-text: var(--k-pick-fb923c); --mv-orange-rgb: 249, 115, 22;
}
html[data-flag-rw-s7-moves][data-moves="bo"] {
  --up: var(--mv-blue); --down: var(--mv-orange); --up-rgb: var(--mv-blue-rgb); --down-rgb: var(--mv-orange-rgb);
}
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app { --up-text: var(--mv-blue-text); --down-text: var(--mv-orange-text); }

/* Text: the up and down classes, inline figures (heat()), and the few places that name a colour of their own. */
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .up:not(i, #r-chart *) { color: var(--up-text); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .down:not(i, #r-chart *) { color: var(--down-text); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app [style*="color:#22C55E"] { color: var(--up-text) !important; }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app [style*="color:#EF4444"] { color: var(--down-text) !important; }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app :is(.verdict small b.up, .dv .l b.up, .kv .v b.up, .gl-v b.up, .tr-c.up b, .gd-rule b.up,
  .tq-counts b.up, .tq-verdict.up, .tq-read.up, .my-tq .p.up, .event-row .fig.act.st-up b, .sub-h.up, .badge.st-up, .tx-c.up b, .tx-mood.up) { color: var(--up-text); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app :is(.verdict small b.down, .dv .l b.down, .kv .v b.down, .gl-v b.down, .tr-c.down b, .tr-c.lean-down b,
  .gd-rule b.down, .tq-counts b.down, .tq-verdict.down, .tq-read.down, .my-tq .p.down, .event-row .fig.act.st-down b, .sub-h.down, .badge.st-down, .tx-c.down b, .tx-mood.down) { color: var(--down-text); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app :is(.vb.up, .tx-mood.up) { border-color: rgba(var(--mv-blue-rgb), 0.55); background: rgba(var(--mv-blue-rgb), 0.1); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app :is(.vb.down, .tx-mood.down) { border-color: rgba(var(--mv-orange-rgb), 0.55); background: rgba(var(--mv-orange-rgb), 0.1); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .badge.st-up { border-color: rgba(var(--mv-blue-rgb), 0.5); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .badge.st-down { border-color: rgba(var(--mv-orange-rgb), 0.5); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .liq-side.up { color: var(--up-text); background: rgba(var(--mv-blue-rgb), 0.12); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .liq-side.down { color: var(--down-text); background: rgba(var(--mv-orange-rgb), 0.12); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .mk-s .up, html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .mk-tbl td.up, html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .tx-tally .up { color: var(--up-text); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .mk-s .down, html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .mk-tbl td.down, html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .tx-tally .down { color: var(--down-text); }
/* Bars, keys and borders that were green or red tints. */
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .tx-c.up { border-left-color: rgba(var(--mv-blue-rgb), 0.75); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .tx-c.down { border-left-color: rgba(var(--mv-orange-rgb), 0.75); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app :is(.liq-key i.up, .os-bar i.c) { background: rgba(var(--mv-blue-rgb), 0.75); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app :is(.liq-key i.down, .os-bar i.p) { background: rgba(var(--mv-orange-rgb), 0.75); }
html[data-flag-rw-s7-moves][data-moves="bo"] .portal-app .liq-key i.line { background: linear-gradient(90deg, var(--mv-blue-text) 50%, var(--mv-orange-text) 50%); }
/* A live feed or an open market is not a price move: its dot and chip stay green. */
html[data-flag-rw-s7-moves][data-moves="bo"] .p-live[data-state="live"] i, html[data-flag-rw-s7-moves][data-moves="bo"] .p-clock .is-open .dot { background: var(--k-green-22c55e); border-color: var(--k-green-22c55e); }

/* The charts' green and red (drawn as attributes, which CSS outranks). The RSI chart (#r-chart) keeps its own colours. */
html[data-flag-rw-s7-moves][data-moves="bo"] :is(:not(#r-chart) > .chart, svg.spark) :is([fill="#22C55E"], [fill="#4ADE80"]) { fill: var(--up); }
html[data-flag-rw-s7-moves][data-moves="bo"] :is(:not(#r-chart) > .chart, svg.spark) :is([stroke="#22C55E"], [stroke="#4ADE80"]) { stroke: var(--up); }
html[data-flag-rw-s7-moves][data-moves="bo"] :is(:not(#r-chart) > .chart, svg.spark) :is([fill="#EF4444"], [fill="#F87171"]) { fill: var(--down); }
html[data-flag-rw-s7-moves][data-moves="bo"] :is(:not(#r-chart) > .chart, svg.spark) :is([stroke="#EF4444"], [stroke="#F87171"]) { stroke: var(--down); }
html[data-flag-rw-s7-moves][data-moves="bo"] :not(#r-chart) > .chart :is([style*="fill:#22C55E"], [style*="fill:#4ADE80"]) { fill: var(--up) !important; }
html[data-flag-rw-s7-moves][data-moves="bo"] :not(#r-chart) > .chart :is([style*="fill:#EF4444"], [style*="fill:#F87171"]) { fill: var(--down) !important; }
html[data-flag-rw-s7-moves][data-moves="bo"] .dr-ohlc.up b, html[data-flag-rw-s7-moves][data-moves="bo"] .dr-ohlc .dr-ch.up { color: var(--up-text); }
html[data-flag-rw-s7-moves][data-moves="bo"] .dr-ohlc.down b, html[data-flag-rw-s7-moves][data-moves="bo"] .dr-ohlc .dr-ch.down { color: var(--down-text); }

/* Heatmap tiles, keys and bubbles are drawn on the blue and orange scale (charts.js moveColor); the orange end is bright,
   so its words (and its key swatch) are dark, as with contrast. */
html[data-flag-rw-s7-moves][data-moves="bo"] .tm-cell i { opacity: 1; }
html[data-flag-rw-s7-moves][data-moves="bo"] .tm-cell.tm-dark { color: var(--k-black); }
html[data-flag-rw-s7-moves][data-moves="bo"] .tm-cell.tm-dark b, html[data-flag-rw-s7-moves][data-moves="bo"] .tm-cell.tm-dark i { text-shadow: none; }
html[data-flag-rw-s7-moves][data-moves="bo"] .tm-cell.tm-dark:hover { box-shadow: inset 0 0 0 2px rgba(var(--k-rgb-0-0-0), var(--k-a-0-7)); }
html[data-flag-rw-s7-moves][data-moves="bo"] .tm-legend span:first-child { color: var(--k-black); }
html[data-flag-rw-s7-moves][data-moves="bo"] .cm-svg g.tm-dark text { fill: var(--k-black); stroke: none; opacity: 1; }