/**
 * Display and accessibility (UX2) — what each choice in appjs/common/ux2/display.js does, as classes on <html>
 * (set before the page draws, from what the person chose on this device):
 *   ux2-text-l / ux2-text-xl   larger text (the whole page scales, so px and rem sizes keep their proportions)
 *   ux2-contrast               high contrast: darker text and lines, clear focus, underlined links
 *   ux2-calm                   reduce motion: no animations or transitions
 *   ux2-easy-font              an easier-to-read font (Atkinson Hyperlegible, Google Fonts, loaded when chosen)
 *   ux2-dyslexic-font          OpenDyslexic (ours: assets/fonts/opendyslexic, OFL-1.1; downloaded only when used)
 *   ux2-links-under            every link underlined
 *   ux2-spacing                wider letter, word and line spacing (WCAG 1.4.12 text spacing values)
 *   ux2-short-lines            long text kept to about 70 characters a line
 *   ux2-soft                   a warm cream background instead of bright white
 *   ux2-guide                  the reading guide band (.ux2-guide-band, drawn by display.js)
 * The panel itself is a UX2 drawer (assets/ux2/drawer.css) with the shared chips and choices (components.css).
 */

/* ---------- Text size ---------- */
html.ux2-text-l body {
    zoom: 1.12;
}

html.ux2-text-xl body {
    zoom: 1.25;
}

/* ---------- High contrast ---------- */
html.ux2-contrast {
    --ux2k-ink: #000;
    --ux2k-ink-2: #111;
    --ux2k-muted: #2b2e3a;
    --ux2k-line: #6b7280;
    --ux2k-line-2: #9aa0ab;
    --hj-muted: #2b2e3a;
    --hj-quiet: #2b2e3a;
    --hj-line: #6b7280;
}

html.ux2-contrast body,
html.ux2-contrast .text-muted,
html.ux2-contrast .text-gray-400,
html.ux2-contrast .text-gray-500,
html.ux2-contrast .text-gray-600,
html.ux2-contrast small {
    color: #111 !important;
}

html.ux2-contrast .form-control,
html.ux2-contrast .form-select,
html.ux2-contrast .ux2-picker-box,
html.ux2-contrast .card,
html.ux2-contrast .ux2-panel {
    border-color: #6b7280 !important;
}

html.ux2-contrast a:not(.btn):not(.ux2-btn):not(.hj-btn):not(.menu-link) {
    color: #0b3d91 !important;   /* 9:1 on white, 8:1 on the soft background */
    text-decoration: underline;
}

html.ux2-contrast :focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
}

/* ---------- Reduce motion ---------- */
html.ux2-calm *,
html.ux2-calm *::before,
html.ux2-calm *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
}

/* ---------- Fonts: easier to read, OpenDyslexic (icons keep their own font) ---------- */
@font-face {
    font-family: "OpenDyslexic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/opendyslexic/opendyslexic-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "OpenDyslexic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/opendyslexic/opendyslexic-latin-700-normal.woff2") format("woff2");
}

html.ux2-easy-font body,
html.ux2-easy-font body :is(p, span, a, li, td, th, label, input, select, textarea, button, h1, h2, h3, h4, h5, h6, b, strong, small, div, legend, dd, dt):not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
    font-family: "Atkinson Hyperlegible", var(--ux2k-font, "IBM Plex Sans"), system-ui, sans-serif !important;
}

html.ux2-dyslexic-font body,
html.ux2-dyslexic-font body :is(p, span, a, li, td, th, label, input, select, textarea, button, h1, h2, h3, h4, h5, h6, b, strong, small, div, legend, dd, dt):not(.bi):not([class^="bi-"]):not([class*=" bi-"]) {
    font-family: "OpenDyslexic", var(--ux2k-font, "IBM Plex Sans"), system-ui, sans-serif !important;
}

/* No italics with either reading font: slanted letters are harder to tell apart */
html:is(.ux2-easy-font, .ux2-dyslexic-font) body :is(em, i:not(.bi), cite) {
    font-style: normal;
}

/* ---------- Wider spacing: comfortable, not WCAG 1.4.12's stress-test values (pages must still survive those) ---------- */
html.ux2-spacing body :is(p, li, td, dd, label, small, blockquote) {
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.16em !important;
}

html.ux2-spacing body p {
    margin-bottom: 1.6em;
}

/* ---------- Shorter lines: long text a comfortable width ---------- */
html.ux2-short-lines body :is(p, li, blockquote, dd) {
    max-width: 72ch;
}

/* ---------- Soft background: warm cream instead of bright white ---------- */
html.ux2-soft body,
html.ux2-soft #kt_content,
html.ux2-soft #kt_wrapper {
    background-color: #f6f1e4 !important;
}

html.ux2-soft :is(.card, .ux2-panel, .hj-card, .ux2-drawer-panel, .ux2-choice, .form-control, .form-select, .ux2-picker-box, .menu-sub-dropdown, .modal-content, .dd-menu) {
    background-color: #fffbf0 !important;
}

/* ---------- Reading guide ---------- */
.ux2-guide-band {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 2050;
    background: rgba(30, 95, 105, 0.08);
    border-top: 1px solid rgba(30, 95, 105, 0.25);
    border-bottom: 1px solid rgba(30, 95, 105, 0.25);
    pointer-events: none;
    transition: top 0.08s linear, height 0.08s linear;
}

html.ux2-calm .ux2-guide-band {
    transition: none;
}

html.ux2-contrast .ux2-guide-band {
    background: transparent;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

/* ---------- Underline links ---------- */
html.ux2-links-under a:not(.btn):not(.ux2-btn):not(.hj-btn):not(.menu-link) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------- The panel (itself accessible: grouped, labelled, 44 px targets, a clear focus ring) ---------- */
.ux2-display .ux2-drawer-body {
    display: grid;
    align-content: start;
    gap: 22px;
}

.ux2-display .ux2-drawer-head h2 :is(i, svg) {
    color: var(--ux2k-brand, #1e5f69);
}

.ux2-display-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ux2-display-group legend {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 4px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ux2k-ink, #181c32);
}

.ux2-display-group legend :is(i, svg) {
    color: var(--ux2k-brand, #1e5f69);
}

.ux2-display-group .ux2-choices + .ux2-choices,
.ux2-display-fonts + .ux2-choices {
    margin-top: 8px;
}

.ux2-display-ico {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    font-size: 17px;
    color: var(--ux2k-brand, #1e5f69);
    background: var(--ux2k-tint, #e9f0f1);
    border-radius: 9px;
}

.ux2-display .ux2-choice,
.ux2-display .ux2-chip {
    min-height: 44px;
}

.ux2-display .ux2-choice:has(input:focus-visible),
.ux2-display .ux2-chip:has(input:focus-visible) {
    outline: 3px solid var(--ux2k-ring, rgba(30, 95, 105, 0.35));
    outline-offset: 2px;
}

.ux2-display-fonts {
    display: grid;
    gap: 8px;
}

.ux2-display-sample {
    flex: 0 0 auto;
    font-size: 17px;
    color: var(--ux2k-ink, #181c32);
}

/* Each sample always shows its own font, whatever font the page is in, so they can be compared */
.ux2-display-font .ux2-display-sample {
    font-family: var(--ux2k-font, "IBM Plex Sans"), system-ui, sans-serif !important;
    letter-spacing: normal !important;
}

.ux2-display-font.is-easy .ux2-display-sample {
    font-family: "Atkinson Hyperlegible", sans-serif !important;
}

.ux2-display-font.is-dyslexic .ux2-display-sample {
    font-family: "OpenDyslexic", sans-serif !important;
}

.ux2-display-group > p {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--ux2k-muted, #6b6f85);
}

.ux2-display-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ux2-display-sizes .ux2-chip span.is-l {
    font-size: 15px;
}

.ux2-display-sizes .ux2-chip span.is-xl {
    font-size: 17px;
}

.ux2-display .ux2-choice {
    align-items: center;
}

.ux2-display-text {
    flex: 1;
    min-width: 0;
}

.ux2-display-note {
    margin: 0;
    font-size: 12.5px;
    color: var(--ux2k-muted, #6b6f85);
}