/* Site preferences (Settings > Site Preferences, Components/Pages/Admin/SitePreferences.razor).
   The display switches are stored in localStorage as "chipin.a11y" and applied as data-a11y-* attributes on <html>:
   by the inline bootstrap in App.razor before first paint, and by js/site-preferences.js whenever a switch changes.
   Grid borders live in admin-grid.css (the --ag-rule token); the other three preferences are here, then the page
   itself, including the accent color slider (js/accent-tint.js owns the --ci-accent-shift property it drives). */

/* Larger text: scales every rem-based size (Bootstrap, the admin skin, grid cells) by ~12%. */
html[data-a11y-large-text="on"] { font-size: 112.5%; }

/* Reduce motion: stops decorative animation and transitions (the OS "reduce motion" setting is honoured automatically). */
html[data-a11y-reduce-motion="on"] *,
html[data-a11y-reduce-motion="on"] *::before,
html[data-a11y-reduce-motion="on"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

/* High contrast: darker secondary text, stronger borders, always-visible focus rings, underlined links. */
html[data-a11y-high-contrast="on"] { --ag-muted: #3b4160; --ag-line: #b9bfd3; --ag-line-strong: #9aa2bd; --ag-head: #eef0f8; --ag-hover: #e6e8f7; --ag-focus: hsl(calc(247.01deg + var(--ci-accent-shift, 0deg)) 68.84% 39.02%); }
html[data-a11y-high-contrast="on"][data-bs-theme="dark"] { --ag-muted: #d3d8ee; --ag-line: rgba(255, 255, 255, .28); --ag-line-strong: rgba(255, 255, 255, .42); --ag-head: #1b2236; --ag-hover: hsl(calc(247.94deg + var(--ci-accent-shift, 0deg)) 83.95% 68.24% / .22); --ag-focus: hsl(calc(248.75deg + var(--ci-accent-shift, 0deg)) 100% 90.59%); }
html[data-a11y-high-contrast="on"] .admin-shell .text-muted,
html[data-a11y-high-contrast="on"] .admin-shell .admin-nav-section,
html[data-a11y-high-contrast="on"] .admin-shell .admin-user-label { color: var(--ag-muted) !important; }
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-headercelldiv { color: var(--ag-text); }
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-numericitem,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-first,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-prev,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-next,
html[data-a11y-high-contrast="on"] .admin-shell .e-grid .e-pager .e-last { border-color: var(--ag-line-strong); }
html[data-a11y-high-contrast="on"] .admin-shell a:not(.btn):not(.nav-link):not(.navbar-brand):not(.e-link):not(.admin-nav-link) { text-decoration: underline; }
html[data-a11y-high-contrast="on"] .admin-shell :focus-visible { outline: 3px solid var(--ag-focus) !important; outline-offset: 2px; }
html[data-a11y-high-contrast="on"] .admin-shell .admin-nav-link { color: #14172b !important; }
html[data-a11y-high-contrast="on"][data-bs-theme="dark"] .admin-shell .admin-nav-link { color: #fff !important; }

/* ---------- The settings page itself ---------- */
.a11y-list { display: grid; }
.a11y-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem; margin: 0; border-top: 1px solid var(--ag-line); cursor: pointer; }
.a11y-row:first-child { border-top: 0; }
.a11y-row:hover { background: var(--ag-hover); }
.a11y-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--ag-accent-soft); color: var(--ag-accent); font-size: 1.35rem; }
.a11y-copy { display: grid; gap: .2rem; min-width: 0; }
.a11y-title { color: var(--ag-text); font-size: 1rem; font-weight: 700; }
.a11y-desc { color: var(--ag-muted); font-size: .88rem; line-height: 1.5; }
.a11y-state { display: inline-block; margin-left: .5rem; padding: .12rem .5rem; border-radius: 999px; background: var(--ag-head); color: var(--ag-muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: .1rem; }
.a11y-row .form-check-input { width: 2.9rem; height: 1.55rem; margin: 0; cursor: pointer; }
.a11y-row .form-check-input:checked { background-color: var(--ag-accent); border-color: var(--ag-accent); }
.a11y-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: .9rem; background: var(--ag-accent-soft); color: var(--ag-text); font-size: .88rem; }
.a11y-note i { flex: none; font-size: 1.2rem; color: var(--ag-accent); }
/* Live sample: a three-row grid that uses the same tokens as the real grids, so the Grid borders switch shows its effect here. */
.a11y-preview { margin-top: 1.25rem; border: 1px solid var(--ag-rule); border-radius: var(--ag-radius); background: var(--ag-surface); box-shadow: var(--ag-frame-shadow); overflow: hidden; font-variant-numeric: tabular-nums; }
.a11y-preview table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.a11y-preview th { padding: .55rem .9rem; border-bottom: 1px solid var(--ag-rule); background: var(--ag-head); color: var(--ag-muted); font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
.a11y-preview td { padding: .6rem .9rem; border-bottom: 1px solid var(--ag-rule); color: var(--ag-text); }
.a11y-preview tr:last-child td { border-bottom-color: transparent; }
.a11y-preview th.is-num, .a11y-preview td.is-num { text-align: right; font-weight: 600; }
.a11y-preview .is-pos { color: #16a34a; font-weight: 700; }
[data-bs-theme="dark"] .a11y-preview .is-pos { color: #4ade80; }
.a11y-preview-label { margin: 1.25rem 0 -.75rem; color: var(--ag-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Accent color row ----------
   Two rows of the card grid: icon | copy | swatch, then the slider under the copy and swatch. The track is a STATIC
   violet-to-sky gradient (the full range, never retinted); the thumb and the swatch paint var(--bs-primary), which
   app.css already maps per theme and which follows --ci-accent-shift live while the thumb moves. */
.a11y-row-accent { grid-template-rows: auto auto; row-gap: .35rem; cursor: default; }
.a11y-row-accent:hover { background: transparent; }
.a11y-row-accent .a11y-title { display: flex; align-items: center; gap: .6rem; }
.a11y-row-accent .a11y-title label { cursor: pointer; }
.a11y-reset-link { padding: 0; border: 0; background: none; color: var(--bs-link-color); font-size: .8rem; font-weight: 700; cursor: pointer; }
.a11y-reset-link:hover { text-decoration: underline; }
.a11y-accent-swatch { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bs-primary); box-shadow: 0 0 0 2px var(--ag-surface), 0 0 0 3px var(--ag-line-strong); transition: background-color .15s ease; }
.a11y-accent-slider { grid-column: 2 / 4; position: relative; height: 2.25rem; display: grid; align-items: center; }
.a11y-accent-track { position: absolute; left: .7rem; right: .7rem; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: linear-gradient(90deg, #5A45E6 0%, #4565E6 50%, #4599E6 100%); pointer-events: none; }
[data-bs-theme="dark"] .a11y-accent-track { background: linear-gradient(90deg, #7C6AF2 0%, #6A84F2 50%, #6AB1F2 100%); }
.a11y-accent-range { position: relative; width: 100%; height: 2.25rem; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.a11y-accent-range:focus { outline: none; }
.a11y-accent-range::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: 3px; }
.a11y-accent-range::-moz-range-track { height: 6px; background: transparent; border-radius: 3px; }
.a11y-accent-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--bs-primary); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: background-color .1s ease, transform .1s ease; }
.a11y-accent-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--bs-primary); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: background-color .1s ease, transform .1s ease; }
.a11y-accent-range:active::-webkit-slider-thumb, .a11y-accent-range:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 28%, transparent), 0 2px 6px rgba(0, 0, 0, .25); }
.a11y-accent-range:active::-moz-range-thumb, .a11y-accent-range:focus-visible::-moz-range-thumb { transform: scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bs-primary) 28%, transparent), 0 2px 6px rgba(0, 0, 0, .25); }
.ask-a11y-range { display: block; height: 6px; border-radius: 3px; margin: 0 .7rem; }
@media (max-width: 575.98px) {
    .a11y-row { grid-template-columns: minmax(0, 1fr) auto; }
    .a11y-icon { display: none; }
    .a11y-accent-slider { grid-column: 1 / 3; }
}