/* Site policy: at least 18 CSS pixels, while honoring larger user text settings. */
:root {
    --ml-font-min: max(18px, 1.125rem);
    --ml-control-min: 44px;
}
body { overflow-wrap: anywhere; }
:where(button, input, select, textarea) { font-family: inherit; font-size: max(var(--ml-font-min), 1em); }
[role="button"] { font-size: max(var(--ml-font-min), 1em); }
:where(button, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea, summary, [role="button"]) {
    min-height: var(--ml-control-min) !important;
}
:where(button, [role="button"]) { min-width: var(--ml-control-min) !important; }
:where(small, sub, sup, kbd, samp) { font-size: var(--ml-font-min); }
/* Vendor resets may shrink code; keep nested highlighting at the surrounding size. */
:where(pre, code, pre code, pre code span) { font-size: max(var(--ml-font-min), 1em); }
[hidden] { display: none !important; }
.visually-hidden, .sr-only, .ml-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    padding: 12px 18px;
    border: 2px solid currentColor;
    border-radius: 6px;
    background: var(--surface, var(--paper, var(--cream, #fff)));
    color: var(--text, var(--ink, var(--cocoa, #202929)));
    font-size: var(--ml-font-min);
    font-weight: 700;
    line-height: 1.5;
    transform: translateY(calc(-100% - 24px));
}
.skip-link:focus { transform: translateY(0); }
.ml-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 2rem; list-style: none; }
.ml-badge { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border, var(--line, currentColor)); border-radius: 6px; background: var(--surface, transparent); color: inherit; font-size: var(--ml-font-min); font-weight: 600; line-height: 1.5; }
/* Inline prose links keep their line layout; standalone controls use 44px targets. */
:where(p, li, address) a:not([class]) { text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) {
    html:not([data-motion="on"]),
    html:not([data-motion="on"]) *,
    html:not([data-motion="on"]) *::before,
    html:not([data-motion="on"]) *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
html[data-motion="paused"] *, html[data-motion="paused"] *::before, html[data-motion="paused"] *::after {
    animation-play-state: paused !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}
@media (forced-colors: active) {
    :where(button, [role="button"], input, select, textarea) { border-color: ButtonText; }
}

/* Common arrow for native single-choice dropdowns. Kept separate for older pages
   that only need this control fix; the accessibility asset includes it automatically.
   Gradients follow currentColor and need no image request or data: CSP exception. */
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-inline-end: 2.8em !important;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: right 1.25em center, right .9em center !important;
    background-size: .35em .35em, .35em .35em !important;
    background-repeat: no-repeat !important;
}
select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):dir(rtl) {
    background-position: left .9em center, left 1.25em center !important;
}
@media (forced-colors: active) {
    select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
        -webkit-appearance: auto !important;
        appearance: auto !important;
        background-image: none !important;
    }
}

/* No outer focus frames, including browser defaults and vendor focus shadows. */
:focus { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; }
/* Keyboard focus uses a bottom line within the control, without moving layout.
   Static anchor targets remain unmarked; managed widgets remain recognizable. */
:where(a[href], button, input, select, textarea, summary, [role="button"], [role="tab"], [role="link"], [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible,
:where(label):has(input:is([type="checkbox"], [type="radio"]):focus-visible) {
    box-shadow: inset 0 -2px 0 var(--ml-focus-color, var(--ink, var(--text, var(--cocoa, currentColor)))) !important;
}
/* Text links already have their shared continuous underline. */
.ml-text-link:focus-visible { box-shadow: none !important; }

@media (forced-colors: active) {
    :where(a[href], button, input, select, textarea, summary, [role="button"], [role="tab"], [role="link"], [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible,
    :where(label):has(input:is([type="checkbox"], [type="radio"]):focus-visible) { border-block-end: 2px solid Highlight !important; }
}
