/* =====================================================================
   EDVEXA — polish layer, version 2 (design critique + WCAG 2.1 AA review, 30 Oct 2026)
   Loaded AFTER app.css. It only overrides; nothing in app.css is removed.
   To undo everything: delete the polish.css and a11y.js lines from index.html.

   What it does
   1. Any institute colour stays readable: buttons, selected chips and brand-coloured text
      use colours that js/a11y.js works out from the institute's colour (4.5:1 or better).
   2. Focus is always visible: a solid ring, white on dark areas.
   3. Form fields, chips and toggles have borders you can actually see (3:1).
   4. Teal controls follow the institute's colour (white-label); teal stays only where it means "done".
   5. Small text no smaller than 12px; small icon buttons get a bigger hit area.
   6. Reduced motion respected everywhere; Windows high-contrast mode keeps selected states.
   The exam screens (.exam) are deliberately untouched: they copy the real UCAT.
   ===================================================================== */

:root {
  --control-line: #8C84A0;                         /* 3.5:1 on white, 3.3:1 on --paper */
  --control-line-hover: #6F6884;
  /* filled in by js/a11y.js from the institute colour; these fallbacks are the default purple */
  --brand-text: var(--brand);
  --brand-fill: var(--brand);
  --brand-fill-ink: var(--brand-ink);
  --focus-ring: var(--brand-text);
}

/* ---------- 1. Focus: always visible ---------- */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.side :focus-visible, .page-head:not(.plain) :focus-visible, .auth :focus-visible:not(.auth-card *),
.qp-dark :focus-visible, .mk-book :focus-visible, .gm-head :focus-visible, .dh-hero :focus-visible,
.tc-pts :focus-visible, .as-bar :focus-visible, .viewer-bar :focus-visible, .gm-pop-card :focus-visible,
.sol-head :focus-visible, .dh-dc :focus-visible, .ms-fig.dark :focus-visible {
  outline-color: #FFFFFF;
}
.gm-badge:focus-visible { outline: 3px solid var(--focus-ring); }
/* text fields: a dark 2px ring instead of a faint tint */
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-text);
  box-shadow: 0 0 0 1px var(--brand-text), 0 0 0 4px color-mix(in srgb, var(--brand-text) 18%, transparent);
}
.mb-search:focus-within { border-color: var(--brand-text); box-shadow: 0 0 0 1px var(--brand-text); }
.mb-search input:focus { box-shadow: none; }
.dropzone:focus-within, .seg-item input:focus-visible + span { outline-color: var(--focus-ring); }
/* headings that a11y.js moves focus to after a page change don't need a ring */
[data-evx-focus]:focus { outline: none; }

/* ---------- 2. Skip link and screen-reader helpers (used by js/a11y.js) ---------- */
.evx-skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px;
  background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 20px rgba(22, 15, 34, .25); }
.evx-skip:focus { top: 12px; }
.evx-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only { clip-path: inset(50%); }

/* ---------- 3. Institute colour, made readable ---------- */
a, .link-btn, .btn.ghost, .icon-btn, .stim-details summary, .bank-ans > summary { color: var(--brand-text); }
.tab[aria-selected=true] { color: var(--brand-text); }
.pill.on { color: var(--brand-text); }
.mat-icon, .st-conn-ic { color: var(--brand-text); }
.st-tab[aria-selected=true] strong, .dh-now, .tc-wh.today b { color: var(--brand-text); }
.link-btn.strong:hover, .list-row:hover strong, .mk-qlink:hover, .dh-irow:hover span:first-child,
.tc-due:hover b, .tc-sub:hover b, .mb-th:hover { color: var(--brand-text); }
.sol-foot .btn.secondary { border-color: var(--brand-text); color: var(--brand-text); }
.dh-dc-btn { color: var(--brand-text); }
.dh-dots span.on { color: var(--brand-text); }

.btn { background: var(--brand-fill); color: var(--brand-fill-ink); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
.btn.secondary:hover { border-color: var(--control-line-hover); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--surface); color: var(--danger); border-color: #D9928A; }
.side .btn.secondary, .page-head .btn.secondary, .viewer-bar .btn.secondary { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .45); }
.page-head.plain .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--control-line); }
.page-head .btn.danger { background: transparent; color: #FFB4A9; border-color: rgba(255, 180, 169, .6); }
.btn.dark { background: var(--night); color: #FFFFFF; }
.btn.warn { background: #7A4B00; color: #FFFFFF; }
.as-bar-go { background: #5EEAD4; color: #160F22; }
.mk-tofix .mk-review, .mk-teal, .gm-ok { background: #14B8A6; color: #062B27; }
.btn.ms-shout { background: #FEF3C7; color: #7A5300; } .btn.ms-shout:hover { background: #FDE68A; }

.chip[aria-pressed=true], .card .chip[aria-pressed=true], .rv-chip[aria-pressed=true] {
  background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-fill-ink); }
.logo-mark, .qp-sec.on, .dh-tick.on, .tc-lv, .tc-md.today .tc-mdn,
.tc-ev.lesson, .tc-mev.lesson { background: var(--brand-fill); color: var(--brand-fill-ink); }
.side.dark .logo-mark { background: #FFFFFF; color: var(--night); }
.dh-dc { background: linear-gradient(135deg, var(--brand-fill), color-mix(in srgb, var(--brand-fill) 55%, #0b1020)); color: var(--brand-fill-ink); }

/* ---------- 4. White-label: teal controls follow the institute colour ---------- */
/* Teal stays where it means "done / on track" (c-done, mb-ok, sp-ok …). Selection and action states use the brand. */
.mt-view:not(.page-head .mt-view) button[aria-pressed=true] { background: #FFFFFF; color: var(--ink); box-shadow: 0 0 0 1px var(--control-line), 0 1px 3px rgba(27, 20, 40, .12); }
.as-set.on { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand-text); }
.as-set > input, .ct-grid input { accent-color: var(--brand-text); }
.as-chip.on { background: var(--brand-fill); color: var(--brand-fill-ink); }
.as-batch.on { border-color: var(--brand-text); background: var(--brand-soft); }
.btn.ghost-brand { background: #FFFFFF; color: var(--brand-text); border: 1px solid var(--brand-text); }
.mk-reason.on { border-color: var(--brand-text); color: var(--brand-text); }
.ms-filter.on { border-color: var(--brand-text); background: var(--brand-soft); color: var(--ink); }
.ms-menu button[aria-checked=true] { background: var(--brand-soft); color: var(--ink); }
.mk-selbar.on { background: var(--brand-soft); border-color: var(--brand-text); color: var(--ink); }
.mk-note { border-color: var(--brand-text); background: #FFFFFF; }
.sp-tile.on { border-color: var(--brand-text); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 18%, transparent); }
.sp-bar i { background: var(--brand-fill); }
.mk-tab[aria-selected=true] { box-shadow: inset 0 -3px 0 var(--brand-text); }

/* ---------- 5. Visible boundaries on controls (WCAG 1.4.11, 3:1) ---------- */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url],
input[type=date], input[type=datetime-local], select, textarea, input[type=color] { border-color: var(--control-line); }
.exam input, .exam select, .mb-search input, .rich .note-editable { border-color: transparent; }
.exam select.ex-scheme { border: 0; }
.chip, .rv-chip, .seg-item span, .mk-reason, .as-att-b, .qp-num, .gm-ta, .mk-search, .ms-filter,
.mb-search, .mb-segs, .tc-segs, .mt-view:not(.page-head .mt-view), .dh-nav, .mk-nav, .sp-arr, .as-x,
.dh-goal input, .gm-compose select, .mk-add select, .mk-rule-t textarea, .mk-add textarea, .qe-sec textarea { border-color: var(--control-line); }
.chip:hover, .rv-chip:hover { border-color: var(--control-line-hover); }
.dh-tick { border-color: var(--control-line); }
.gm-pill.locked { border-color: #8C84A0; }
.qp-toggle, .tc-segs { box-shadow: inset 0 0 0 1px var(--control-line); }

/* ---------- 6. Text that was too faint or too small ---------- */
.tc-md.out .tc-mdn { color: #6F6884; }
.sp-gh.grey { color: #625B78; }
.pct { color: var(--slate); }
.as-chip, .cell span, .mk-tile-s, .gm-k, .gm-pill, .sp-kind, .sp-sec, .tc-ev, .tc-mev,
.tc-hours span, .tc-allday-l, .mt-th-sub, .sp-date span, .mt-flag, .rv-tile-s, .gm-ds { font-size: 12px; }
.mt-lab, .stim-label, .qp-label, .stat-tile .label, .dh-dc-k { letter-spacing: .03em; }
.bank-table .diff { font-size: 12px; }
.prep-chart .axis, .trend .axis { font-size: 12px; }

/* ---------- 7. Hit areas (WCAG 2.5.8 minimum 24px; 32px+ where there is room) ---------- */
.icon-btn { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; }
.rail-toggle { width: 36px; height: 36px; }
.tc-mdn { min-width: 28px; min-height: 26px; }
.qp-topic input, .ct-grid input { width: 20px; height: 20px; }
.mk-x { width: 44px; height: 44px; }
.calc-close { width: 24px; height: 24px; }

/* ---------- 8. Consistent page titles ---------- */
/* Three header styles grew up page by page (dark banner, plain, dashboard). One title scale for all of them. */
.page-head h1, .tc-head h1, .mb-head h1, .gm-head h1, .bank-page .page-head.plain h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 860px) { .page-head h1, .tc-head h1, .mb-head h1, .gm-head h1, .bank-page .page-head.plain h1 { font-size: 24px; } }
/* 800 is not loaded (index.html loads Inter 400–700), so ask for what is there */
.tc-kv, .mb-v, .dh-sec-v, .dh-big, .dh-days b, .gm-ringn, .gm-big, .gm-big2, .sec-big, .ms-fig-v, .rv-tile-v, .mt-ch,
.dh-dc-t, .dh-week-h h2, .tc-cal-h h2, .ms-who h2, .as-dh h2, .gm-sec-l, .qp-big, .prep-kpi-n { font-weight: 700; }

/* ---------- 9. Status shown by more than colour ---------- */
.tc-ev.reg::after { content: " · attendance due"; font-weight: 600; }
.tc-ev.reg { box-shadow: inset 0 0 0 2px #C2410C; }

/* ---------- 9b. The figure that asks for action stands out (teacher Dashboard, My Batches) ---------- */
/* Seven equal tiles in a row; "Need attention" is the only one with something to do, so when it is above zero it is tinted. */
.tc-kpi.click:has(.tc-down) { background: #FFF4EB; border-color: #F0B48F; }
.tc-kpi.click:has(.tc-down) .tc-kl { color: #7C2D12; font-weight: 600; }
.tc-kpi.click:has(.tc-down):hover { border-color: #C2410C; }

/* ---------- 9c. One button shape: pills for actions ---------- */
.dh-dc-btn { border-radius: 999px; }

/* ---------- 10. Reduced motion everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 11. Windows high-contrast mode keeps selected states ---------- */
@media (forced-colors: active) {
  .chip[aria-pressed=true], .rv-chip[aria-pressed=true], .mt-view button[aria-pressed=true], .mb-seg.on, .tc-seg.on,
  .qp-sec.on, .as-sec[aria-selected=true], .st-tab[aria-selected=true], .ms-row.on, .bank-table tr.sel, .mini.on, .kpi.on, .rv-tile.on {
    outline: 3px solid Highlight; outline-offset: -3px; }
  .side-link[aria-current=page] { outline: 2px solid Highlight; }
  .tab[aria-selected=true] { border-bottom-color: Highlight; }
  .pill, .diff, .mb-pill, .sp-st, .rv-res, .ms-status { border: 1px solid CanvasText; }
  .dh-tick.on, .meter > span, .dh-bar i, .gm-bar i, .rv-tile-bar i { background: Highlight; forced-color-adjust: none; }
}