/* Chalkmate — accessibility fixes (1.7). WCAG 2.2 AA layer, loaded after app.css; overrides only. */

/* ---------- Contrast tokens (text-3 / sidebar muted were below 4.5:1) ---------- */
:root{--text-3:#5f716c;--side-muted:#829590;--brand-strong:color-mix(in srgb,var(--brand) 78%,#000);--a11y-ring:color-mix(in srgb,var(--brand) 70%,#000)}
:root[data-theme="dark"]{--text-3:#869c95;--a11y-ring:#5eead4}
.side .me .av{color:#fff}

/* Primary actions: white on the raw brand teal is 3.7:1 — use a deeper shade of the same hue. */
.btn.primary,button.primary{background:var(--brand-strong);border-color:var(--brand-strong)}
.btn.primary:hover{background:color-mix(in srgb,var(--brand) 66%,#000)}
.pl-today{background:var(--brand-strong)}
:root[data-theme="dark"] .st-tab-out{color:#f87171}
:root[data-theme="dark"] .tk-group.over h4{color:#f87171}

/* ---------- Skip link ---------- */
.skip-link{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--panel);color:var(--text);border:2px solid var(--a11y-ring);border-radius:10px;padding:10px 16px;font-weight:600;text-decoration:none;box-shadow:var(--sh-2)}
.skip-link:focus{top:12px}

/* ---------- Visible focus everywhere (keyboard only) ---------- */
:focus-visible{outline:3px solid var(--a11y-ring);outline-offset:2px}
.btn:focus-visible,.iconbtn:focus-visible,.chip:focus-visible,a:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible,.menu button:focus-visible{outline:3px solid var(--a11y-ring);outline-offset:2px}
.side :focus-visible{outline-color:#5eead4}
.input:focus-visible,.select:focus-visible,textarea:focus-visible,.ed:focus-visible{outline:2px solid var(--a11y-ring);outline-offset:1px}
#title:focus,#title:focus-visible{outline:none}
/* Controls that only appear on hover must also appear on keyboard focus. */
.iconbtn:focus-visible,.iconbtn:focus{opacity:1!important}
.menu button:focus{background:var(--hover)}

/* ---------- Target size ≥24px (WCAG 2.5.8) ---------- */
.iconbtn{min-width:24px;min-height:24px}
.chip{min-height:24px}
.tabs a{min-height:44px}
input[type="checkbox"],input[type="radio"]{min-width:18px;min-height:18px}

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

/* ---------- Forced colours (Windows high contrast) ---------- */
@media (forced-colors:active){
  .btn,.iconbtn,.chip,.input,.select{border:1px solid CanvasText}
  :focus-visible{outline:3px solid Highlight}
}

/* ---------- Sign-in page: heading levels swapped for a correct outline; keep the original look ---------- */
.auth-card h1.auth-h{font-size:24px;margin:26px 0 18px;letter-spacing:-.015em}
.auth-side h2{font-size:34px;margin:0 0 28px;max-width:460px;letter-spacing:-.025em;line-height:1.25}
.auth:focus{outline:none}
.content:focus{outline:none}

/* ---------- Brand used as text / as a fill behind white text (shared components) ---------- */
:root{--brand-text:color-mix(in srgb,var(--brand) 72%,#000)}
:root[data-theme="dark"]{--brand-text:color-mix(in srgb,var(--brand) 55%,#fff)}
.linkbtn,.cv-plan summary,.wb-pct,.cpd-h,.hp-cldone,.fr-saved,.sh-on,.ap-st-on_track,.cs-card .pill.on,.tr-tb,.tr-now,.ac-ts,.ls-planned,.pl-unitlink,.ib-reply{color:var(--brand-text)}
.chip.on,.badge,.qx-num,.cp-res-ic,.pl-today{background:var(--brand-strong);border-color:var(--brand-strong)}
.pl-today,.pl-today *{color:#fff}
/* Avatars keep their own hue, just deep enough for white initials. */
.av{background:color-mix(in srgb,var(--c) 78%,#000)}
.ib-av{background:color-mix(in srgb,var(--c) 70%,#000)}
:root[data-theme="dark"] .tk-over,:root[data-theme="dark"] .pill.prio-high,:root[data-theme="dark"] [data-ac-delete],:root[data-theme="dark"] .ac-danger h3{color:#f87171}
.tk-group.over h4,.st-tab-out{color:#b91c1c}

/* ---------- Status colours used as small text (1.10): raw --warn/--crit are 3.2:1 / 4.1:1 on light panels ---------- */
:root{--warn-text:color-mix(in srgb,var(--warn) 75%,#000);--crit-text:#b91c1c}
:root[data-theme="dark"]{--warn-text:var(--warn);--crit-text:#f87171}
.pill.prio-high{color:var(--crit-text)}