/* Rework step 8, accessibility pass. Everything here is gated on html[data-flag-rw-s8-a11y] (public/flags.js), so with
   the flag off the Portal is exactly what it was. Shared, low-churn rules only: focus rings, target sizes, forced
   colours. Page layout and colour are the page builders' (portal-rw-*.css). Names, sort state and announcements are in
   assets/js/portal/a11y.js. */

/* One focus ring for everything the keyboard can reach. Controls that draw their own state keep it (their rule is as
   specific and comes first); this fills in the ones with none, and shows the ring on inline-SVG focus targets. */
html[data-flag-rw-s8-a11y] :is(a, button, input, select, textarea, summary, [role="button"], [role="tab"], [role="option"], [tabindex]):focus-visible {
  outline: 2px solid var(--sky); outline-offset: 2px;
}
/* Buttons and rows that sit flush with a box edge get the ring inside, so an overflow clip never cuts it. */
html[data-flag-rw-s8-a11y] :is(.p-link, .p-tabs a, .p-tabs button, .p-sheet a, .seg button, .pager button, .list-row, .pal-item, .tbl tbody tr, .tm-cell):focus-visible {
  outline-offset: -2px;
}
/* The chart's price-scale gear had no ring, only a border-colour change. */
html[data-flag-rw-s8-a11y] .chart .zoom-gear:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
html[data-flag-rw-s8-a11y] #view:focus-visible { outline: none; } /* the page itself takes focus after a route change (skip link, new section) */

/* Controls the audit measured under 24x24 CSS px (WCAG 2.2 target size, minimum): the box grows, the drawing does not. */
html[data-flag-rw-s8-a11y] :is(.p-collapse, .p-signout) { min-width: 24px; min-height: 24px; }
html[data-flag-rw-s8-a11y] .star { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; box-sizing: border-box; }
html[data-flag-rw-s8-a11y] .chart .zoom-gear { min-width: 24px; min-height: 24px; }
html[data-flag-rw-s8-a11y] :is(a.more, a.cmd-chip) { display: inline-flex; align-items: center; min-height: 24px; }
html[data-flag-rw-s8-a11y] .dr-arrow { min-width: 24px; min-height: 24px; }
/* Second pass (audit B16 S8-F2), the targets the plan names: heatmap sector names, the checkboxes and radios (My Pages
   templates, Customise), the small (i) buttons and the Overview headline links. */
html[data-flag-rw-s8-a11y] .tm-name { min-height: 24px; box-sizing: border-box; }
html[data-flag-rw-s8-a11y] .ph-info.sm { min-width: 24px; min-height: 24px; }
html[data-flag-rw-s8-a11y] input:is([type="checkbox"], [type="radio"]) { width: 24px; height: 24px; flex: none; margin: 0; }
html[data-flag-rw-s8-a11y] .my-tpl input { left: 10px; top: 13px; }
/* (rw-s6-tools draws the New Page rows' radios 16px: with both on they are still 24px) */
html[data-flag-rw-s8-a11y] .my-tpl-rows .my-tpl input[type="radio"] { width: 24px; height: 24px; left: 8px; }
html[data-flag-rw-s8-a11y] .nw674 a { display: block; min-height: 24px; box-sizing: border-box; }
/* A sort button is its heading cell (only sort buttons: the (i) beside a Technicals pivot name stays a 24px button): the cell's padding moves into the button, so the button's own box is the whole cell
   (2-sizes row 98). Step 4's sizes (rw-s4-sizes) does the same with its own heights, so this stands aside when that is on. */
html[data-flag-rw-s8-a11y]:not([data-flag-rw-s4-sizes="on"]) .tbl th:has(> button:is([data-sort], [data-mk-sort])) { padding: 0; }
html[data-flag-rw-s8-a11y]:not([data-flag-rw-s4-sizes="on"]) .tbl th > button:is([data-sort], [data-mk-sort]) {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.25em; box-sizing: border-box; width: 100%; min-height: 24px; padding: 9px 12px; white-space: nowrap;
}
html[data-flag-rw-s8-a11y]:not([data-flag-rw-s4-sizes="on"]) .tbl th.l > button:is([data-sort], [data-mk-sort]) { justify-content: flex-start; }
html[data-flag-rw-s8-a11y]:not([data-flag-rw-s4-sizes="on"]) .tbl th.c > button:is([data-sort], [data-mk-sort]) { justify-content: center; }

/* Windows high contrast (forced colours) drops background colours, so what they marked gets an outline; charts get a
   frame; the live dots and the watch stars are drawn in the system's colours so they stay visible. */
@media (forced-colors: active) {
  html[data-flag-rw-s8-a11y] :is(.seg [aria-pressed="true"], .seg [aria-current="page"], .pager [aria-current="page"], .pager [aria-pressed="true"],
    .p-theme-pop [aria-pressed="true"], .p-link[aria-current="page"], .p-tabs [aria-current="page"], .list-row.is-on, .pal-item[aria-selected="true"]) {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
  html[data-flag-rw-s8-a11y] .tbl tbody tr[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  html[data-flag-rw-s8-a11y] .tbl tbody tr[aria-selected="true"] td { border-block: 2px solid Highlight; }
  html[data-flag-rw-s8-a11y] .ps-i[aria-current="page"], html[data-flag-rw-s8-a11y] .ps-i.is-current { outline: 2px solid Highlight; outline-offset: -2px; }
  html[data-flag-rw-s8-a11y] .chip [data-c="live"]::before { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  html[data-flag-rw-s8-a11y] :is(.chart, .treemap, .gauge) { border: 1px solid CanvasText; border-radius: 8px; }
  html[data-flag-rw-s8-a11y] :is(.p-live i, .p-clock .is-open .dot, .p-me .dot, .md-open i) { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  html[data-flag-rw-s8-a11y] .p-clock .dot { forced-color-adjust: none; border-color: CanvasText; }
  html[data-flag-rw-s8-a11y] .star { forced-color-adjust: none; color: GrayText; }
  html[data-flag-rw-s8-a11y] .star[aria-pressed="true"] { color: Highlight; }
  html[data-flag-rw-s8-a11y] :focus-visible { outline-color: Highlight; }
  html[data-flag-rw-s8-a11y] .skip:focus { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* The link the heatmap's head gets (a11y.js): the stocks as a list. */
html[data-flag-rw-s8-a11y] .a11y-list { margin: 6px 0 0; padding: 0 var(--pad, 16px); text-align: right; }