/* The reading preferences panel itself.
 *
 * The other half of accessibility.css, kept apart because the two are needed
 * at different times. The preferences decide how the whole document is drawn,
 * so they block the first paint; the panel is `hidden` until the script has
 * run, so nothing here is needed to draw anything a reader sees first. It is
 * linked from the panel's own template, the way the editing bar links its
 * stylesheet, and so arrives at the end of the body rather than in the head.
 *
 * Everything is prefixed `ay-a11y`, inherits nothing from the theme and sets
 * every property it relies on, for the same reason the other half does.
 */

/* The panel's own design.
 *
 * Deliberately not the shape the commercial widgets take - a coloured brand
 * band over a grid of icon tiles, each labelled in capitals with a row of
 * dashes for the level. That layout is compact and says almost nothing: the
 * label is harder to read for being capitalised, and four dashes tell a
 * reader they are on step three of four without telling them what step three
 * is. In an accessibility panel, of all places.
 *
 * So: rows, not tiles. Every control carries its name, a line saying what it
 * actually does, and its values written out in words - "Normal, Rahat,
 * Geniş", not three dashes. A reader can see what they are choosing before
 * they choose it and what they chose afterwards, and a screen reader reads
 * the same thing rather than a different thing.
 *
 * The surface is quiet on purpose. It is drawn over somebody else's design
 * and read under the reader's own colour filters, so it commits to one accent
 * and otherwise stays out of the way.
 */

.ay-a11y {
  --ay-a11y-ink: #10161f;
  --ay-a11y-muted: #55606f;
  --ay-a11y-ground: #ffffff;
  --ay-a11y-sunken: #f4f6f9;
  --ay-a11y-line: #dde2ea;
  --ay-a11y-line-strong: #b9c2cf;
  --ay-a11y-accent: #0a4c9b;
  --ay-a11y-accent-soft: #eaf1fb;
  --ay-a11y-accent-ink: #ffffff;

  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ay-a11y-ink);
  color-scheme: light;
}

/* The panel follows the site's appearance.
 *
 * It does not borrow the theme's colours - a panel that did would look
 * different on every site and could be styled into invisibility by one. But
 * not borrowing a palette is a different thing from ignoring the dark one: a
 * white sheet dropped over a dark page is a glare bomb, and glare is the
 * complaint half the people who open this panel came to fix.
 *
 * So the panel keeps its own two palettes and switches between them on the
 * signals a reader would expect, in this order:
 *
 *   1. the theme said dark   - `html[data-theme="dark"]`, which is this
 *      platform's own hook and what the theme's pre-paint script writes
 *      (specs/features/uzem-theme-platform-addenda.md section 4.1)
 *   2. the theme said light  - the same attribute, and it wins even where the
 *      operating system says dark, because it is an explicit choice
 *   3. the system said dark  - for a theme that has no appearance of its own
 *      and therefore writes no attribute at all
 *   4. otherwise light
 *
 * `color-scheme` goes with each, so the checkbox a browser draws for itself
 * follows too. */
html[data-theme="dark"] .ay-a11y {
  --ay-a11y-ink: #eef2f7;
  --ay-a11y-muted: #a9b4c4;
  --ay-a11y-ground: #131a24;
  --ay-a11y-sunken: #1c2532;
  --ay-a11y-line: #2c3745;
  --ay-a11y-line-strong: #475466;
  --ay-a11y-accent: #82b4ff;
  --ay-a11y-accent-soft: #182a41;
  --ay-a11y-accent-ink: #0a1420;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .ay-a11y {
    --ay-a11y-ink: #eef2f7;
    --ay-a11y-muted: #a9b4c4;
    --ay-a11y-ground: #131a24;
    --ay-a11y-sunken: #1c2532;
    --ay-a11y-line: #2c3745;
    --ay-a11y-line-strong: #475466;
    --ay-a11y-accent: #82b4ff;
    --ay-a11y-accent-soft: #182a41;
    --ay-a11y-accent-ink: #0a1420;

    color-scheme: dark;
  }
}

.ay-a11y *,
.ay-a11y *::before,
.ay-a11y *::after { box-sizing: border-box; }

/* The way in. Fixed to the inline end and vertically centred, 48 square,
 * which is the smallest target this application asks anybody to press
 * (specs/architecture/accessibility-conformance.md section 5).
 *
 * A tab shape rather than a floating circle: it is attached to the edge of
 * the window, which is where it stays, and a shape that reads as attached is
 * a shape nobody mistakes for page content. */
.ay-a11y-open {
  position: fixed;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2147481000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid var(--ay-a11y-line-strong);
  border-inline-end: 0;
  border-start-start-radius: 0.5rem;
  border-end-start-radius: 0.5rem;
  background: var(--ay-a11y-ground);
  color: var(--ay-a11y-accent);
  box-shadow: -2px 0 12px -4px rgb(16 22 31 / 0.25);
  cursor: pointer;
}

html[data-theme="dark"] .ay-a11y-open { box-shadow: -2px 0 12px -4px rgb(0 0 0 / 0.6); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .ay-a11y-open {
    box-shadow: -2px 0 12px -4px rgb(0 0 0 / 0.6);
  }
}

.ay-a11y-open:hover {
  background: var(--ay-a11y-accent);
  color: var(--ay-a11y-accent-ink);
  border-color: var(--ay-a11y-accent);
}

.ay-a11y-open svg { width: 1.75rem; height: 1.75rem; display: block; }

/* A modal dialog, so the browser gives the focus trap and the Escape key
 * rather than this having to reimplement either - and reimplement them
 * subtly wrong, in the one component where that would be least forgivable. */
.ay-a11y-sheet {
  width: min(29rem, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: var(--ay-a11y-ground);
  color: var(--ay-a11y-ink);
  overflow: hidden;
}

.ay-a11y-sheet::backdrop { background: rgb(16 22 31 / 0.4); }

.ay-a11y-inner { display: flex; flex-direction: column; height: 100%; }

/* The header says what this is and gets out of the way. No brand colour: the
 * panel is not a product being advertised, it is a set of controls. */
.ay-a11y-head {
  flex: none;
  padding: 1rem 1.125rem 0.875rem;
  border-bottom: 1px solid var(--ay-a11y-line);
}

.ay-a11y-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ay-a11y-title { margin: 0; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }

.ay-a11y-lede { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--ay-a11y-muted); }

.ay-a11y-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ay-a11y-line);
  border-radius: 0.5rem;
  background: var(--ay-a11y-ground);
  color: var(--ay-a11y-ink);
  font: inherit;
  cursor: pointer;
}

.ay-a11y-close:hover { background: var(--ay-a11y-sunken); }
.ay-a11y-close svg { width: 1.1rem; height: 1.1rem; display: block; }

/* How many answers are in force, and the one way to undo all of them. A
 * reader who has changed six things and cannot find their way back is a
 * reader this panel has trapped. */
.ay-a11y-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ay-a11y-line);
}

.ay-a11y-count { font-size: 0.8125rem; font-weight: 600; color: var(--ay-a11y-muted); }

.ay-a11y-reset {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--ay-a11y-line-strong);
  border-radius: 0.5rem;
  background: var(--ay-a11y-ground);
  color: var(--ay-a11y-ink);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.ay-a11y-reset:hover { background: var(--ay-a11y-sunken); }

.ay-a11y-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1.125rem 1.5rem;
}

/* A section: a small heading, one line about what is in it, then the rows. */
.ay-a11y-group { border: 0; margin: 0; padding: 1.125rem 0 0; }

/* A choice nested in a section: its own fieldset, because a radio group is a
 * decision and a legend is what names one - but without the section's own
 * spacing above it. */
.ay-a11y-subgroup { border: 0; margin: 0; padding: 0; }

.ay-a11y-legend {
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ay-a11y-accent);
}

.ay-a11y-group-help { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--ay-a11y-muted); }

.ay-a11y-rows { margin-top: 0.5rem; border-top: 1px solid var(--ay-a11y-line); }

.ay-a11y-row { padding: 0.875rem 0; border-bottom: 1px solid var(--ay-a11y-line); }

.ay-a11y-row-name { display: block; font-size: 0.875rem; font-weight: 600; }

/* The hint. Always drawn, never behind a question mark: what a control does
 * is the first thing somebody needs and the last thing they should have to
 * hunt for. */
.ay-a11y-hint {
  margin: 0.1875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ay-a11y-muted);
}

/* A choice is a row of radio buttons, drawn as segments and labelled with
 * the value's own name. Real radios, because a group of them is what tells a
 * screen reader these four options are one decision; the input is hidden
 * from sight only, never from the accessibility tree. */
.ay-a11y-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.ay-a11y-choice { position: relative; }

.ay-a11y-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ay-a11y-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.7rem;
  border: 1px solid var(--ay-a11y-line-strong);
  border-radius: 0.5rem;
  background: var(--ay-a11y-ground);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.ay-a11y-choice input:hover + span { background: var(--ay-a11y-sunken); }

.ay-a11y-choice input:checked + span {
  border-color: var(--ay-a11y-accent);
  background: var(--ay-a11y-accent);
  color: var(--ay-a11y-accent-ink);
}

.ay-a11y-choice input:focus-visible + span {
  outline: 3px solid var(--ay-a11y-accent);
  outline-offset: 2px;
}

/* A switch: the name and its hint on one side, the control on the other, and
 * the whole row is the label so the whole row is the target. */
.ay-a11y-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  cursor: pointer;
}

.ay-a11y-switch-text { flex: 1 1 auto; min-width: 0; }

.ay-a11y-switch input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  accent-color: var(--ay-a11y-accent);
  cursor: pointer;
}

/* A preset. A radio rather than a switch, because two presets at once is not
 * a state anybody wants: they contradict each other, and a panel that lets a
 * reader turn on two and then wonder why is a panel that has misled them.
 *
 * The hint is what it changes, in words, so pressing it is not a surprise. */
.ay-a11y-preset { position: relative; display: block; }

.ay-a11y-preset input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.ay-a11y-preset-body {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--ay-a11y-line);
  border-radius: 0.625rem;
  background: var(--ay-a11y-ground);
}

.ay-a11y-preset + .ay-a11y-preset { margin-top: 0.375rem; }
.ay-a11y-preset input:hover + .ay-a11y-preset-body { background: var(--ay-a11y-sunken); }

.ay-a11y-preset input:checked + .ay-a11y-preset-body {
  border-color: var(--ay-a11y-accent);
  background: var(--ay-a11y-accent-soft);
  box-shadow: inset 3px 0 0 var(--ay-a11y-accent);
}

.ay-a11y-preset input:focus-visible + .ay-a11y-preset-body {
  outline: 3px solid var(--ay-a11y-accent);
  outline-offset: 2px;
}

/* One glyph per preset, drawn here rather than borrowed: a small anchor for
 * scanning a list of five, and the only place in the panel where an icon
 * earns its space. */
.ay-a11y-preset-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: var(--ay-a11y-sunken);
  color: var(--ay-a11y-accent);
}

.ay-a11y-preset input:checked + .ay-a11y-preset-body .ay-a11y-preset-mark {
  background: var(--ay-a11y-accent);
  color: var(--ay-a11y-accent-ink);
}

.ay-a11y-preset-mark svg { width: 1.25rem; height: 1.25rem; display: block; }

.ay-a11y-preset-text { min-width: 0; }
.ay-a11y-preset-name { display: block; font-size: 0.875rem; font-weight: 600; }

.ay-a11y :is(button, input):focus-visible {
  outline: 3px solid var(--ay-a11y-accent);
  outline-offset: 2px;
}

/* Said to a screen reader and to nobody else: which preference changed, so
 * somebody who cannot see the page change is still told it did. */
.ay-a11y-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nothing about this belongs on paper. */
@media print { .ay-a11y { display: none; } }