/*! mdc-prefs.css (generated by tools/mdc_prefs/build_prefs.py from sdk/prefs.css.tmpl; do not edit the output).
 Maccabee Design and Consulting, MDC Personal Settings. Attribute selectors ONLY: no inline style, no script needed,
 works under every CSP. The settings layer sets attributes on <html>; this sheet maps them to behaviour; a thin
 per-property bridge sheet maps them onto that property's own tokens, so the layer never sets a colour.
 Every setting names its effect, never a person: nothing here is a mode named after a condition. */

/* ---- text size (look.size): a percentage of the user's own root size; verified at 200 percent (WCAG 1.4.4) ---- */
html[data-mdc-size="90"] { font-size: 90%; }
html[data-mdc-size="95"] { font-size: 95%; }
html[data-mdc-size="100"] { font-size: 100%; }
html[data-mdc-size="105"] { font-size: 105%; }
html[data-mdc-size="110"] { font-size: 110%; }
html[data-mdc-size="115"] { font-size: 115%; }
html[data-mdc-size="120"] { font-size: 120%; }
html[data-mdc-size="125"] { font-size: 125%; }
html[data-mdc-size="130"] { font-size: 130%; }
html[data-mdc-size="135"] { font-size: 135%; }
html[data-mdc-size="140"] { font-size: 140%; }
html[data-mdc-size="145"] { font-size: 145%; }
html[data-mdc-size="150"] { font-size: 150%; }
html[data-mdc-size="155"] { font-size: 155%; }
html[data-mdc-size="160"] { font-size: 160%; }
html[data-mdc-size="165"] { font-size: 165%; }
html[data-mdc-size="170"] { font-size: 170%; }
html[data-mdc-size="175"] { font-size: 175%; }
html[data-mdc-size="180"] { font-size: 180%; }
html[data-mdc-size="185"] { font-size: 185%; }
html[data-mdc-size="190"] { font-size: 190%; }
html[data-mdc-size="195"] { font-size: 195%; }
html[data-mdc-size="200"] { font-size: 200%; }

/* ---- text spacing (read.spacing = roomy): the WCAG 1.4.12 values (line 1.5, paragraph 2, letter .12, word .16) ---- */
html[data-mdc-spacing="roomy"] :is(body, body *) { line-height: 1.5; letter-spacing: .12em; word-spacing: .16em; }
html[data-mdc-spacing="roomy"] p { margin-block-end: 2em; }

/* ---- reading column (read.line_length = narrow): about 80 characters (WCAG 1.4.8), never justified ---- */
html[data-mdc-measure="narrow"] :is(p, li, dd, blockquote, .lede) { max-inline-size: 80ch; text-align: start; }

/* ---- typeface (read.face): ordinary system stacks named by look; none is named for a condition ---- */
html[data-mdc-face="plain"] body :where(*:not(code, pre, kbd, samp, svg, svg *)) { font-family: Arial, Helvetica, "Segoe UI", sans-serif; }
html[data-mdc-face="humanist"] body :where(*:not(code, pre, kbd, samp, svg, svg *)) { font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", "Source Sans Pro", sans-serif; }
html[data-mdc-face="serif"] body :where(*:not(code, pre, kbd, samp, svg, svg *)) { font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; }
html[data-mdc-face="mono"] body :where(*:not(svg, svg *)) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* ---- quiet motion (look.motion): auto follows the device; an explicit value wins either way ---- */
html[data-mdc-motion="none"] :is(*, *::before, *::after) { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-mdc-motion="reduced"] :is(*, *::before, *::after) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-mdc-motion="auto"] :is(*, *::before, *::after) { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- flat finish (look.depth): the mandatory flat variant of every material: solid fills, no specular, no sheen,
        strong borders. auto resolves to flat when the device asks for forced colours or more contrast. This sheet
        flattens the library's raised surfaces; a property's own bridge flattens anything it textured itself. ---- */
html[data-mdc-depth="flat"] :is([class^="mdc-"], [class*=" mdc-"], [class^="ps-"], [class*=" ps-"]) {
  box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; }
html[data-mdc-depth="flat"] :is(.mdc-btn, .mdc-card, .mdc-chip, .mdc-badge, .mdc-frame, .ps-card) {
  background-image: none !important; background-color: var(--mdc-surf-2, Canvas) !important;
  color: var(--mdc-ink, CanvasText) !important; border: 2px solid var(--mdc-ink, CanvasText) !important; }
@media (forced-colors: active), (prefers-contrast: more) {
  html[data-mdc-depth="auto"] :is([class^="mdc-"], [class*=" mdc-"], [class^="ps-"], [class*=" ps-"]) {
    box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; }
  html[data-mdc-depth="auto"] :is(.mdc-btn, .mdc-card, .mdc-chip, .mdc-badge, .mdc-frame, .ps-card) {
    background-image: none !important; background-color: var(--mdc-surf-2, Canvas) !important;
    color: var(--mdc-ink, CanvasText) !important; border: 2px solid var(--mdc-ink, CanvasText) !important; }
}

/* ---- contrast (look.contrast): tokens the design system already reads; bridges map the rest ---- */
html[data-mdc-contrast="more"] { --mdc-ink-2: var(--mdc-ink); --mdc-field-edge: var(--mdc-ink); --mdc-keyline: var(--mdc-ink); }
@media (prefers-contrast: more) {
  html[data-mdc-contrast="auto"] { --mdc-ink-2: var(--mdc-ink); --mdc-field-edge: var(--mdc-ink); --mdc-keyline: var(--mdc-ink); }
}

/* ---- target size (input.targets = large): 56px minimum, the firm floor is 44px, WCAG 2.5.8 floor is 24px ---- */
html[data-mdc-targets="large"] :is(button, [role="button"], select, summary, .btn, .mdc-btn,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"])) { min-block-size: 3.5rem; }

/* ---- density (look.density): one multiplier any property's bridge may read ---- */
html[data-mdc-density="compact"] { --mdc-density: .8; }
html[data-mdc-density="comfortable"] { --mdc-density: 1; }
html[data-mdc-density="spacious"] { --mdc-density: 1.25; }

/* ---- focus (focus.mode, focus.one_thing): hooks a page opts into by marking elements ---- */
html[data-mdc-focus="quiet"] [data-mdc-noise], html[data-mdc-focus="deep"] [data-mdc-noise],
html[data-mdc-focus="deep"] [data-mdc-secondary] { display: none !important; }
html[data-mdc-onething="on"] [data-mdc-step]:not([aria-current="step"]) { display: none !important; }

/* ---- reading ruler (read.ruler): an overlay the SDK positions; it never takes a pointer event ---- */
.mdc-ruler { position: fixed; inset-inline: 0; inset-block-start: 0; block-size: 1.9em; pointer-events: none; z-index: 2147483000; display: none; }
html[data-mdc-ruler="bar"] .mdc-ruler, html[data-mdc-ruler="shade"] .mdc-ruler,
html[data-mdc-ruler="spotlight"] .mdc-ruler, html[data-mdc-ruler="underline"] .mdc-ruler { display: block; }
html[data-mdc-ruler="bar"] .mdc-ruler { background: rgb(0 229 255 / .16); border-block: 1px solid rgb(0 229 255 / .6); }
html[data-mdc-ruler="shade"] .mdc-ruler { box-shadow: 0 0 0 100vmax rgb(0 0 0 / .38); }
html[data-mdc-ruler="spotlight"] .mdc-ruler { box-shadow: 0 0 0 100vmax rgb(0 0 0 / .5); border-radius: .5em; }
html[data-mdc-ruler="underline"] .mdc-ruler { block-size: 0; border-block-end: 3px solid #00e5ff; }
@media print { .mdc-ruler { display: none !important; } }