/* ==========================================================================
   Las Madrinas Accessibility Widget — all styles
   ==========================================================================

   WHAT THIS FILE IS. Two unrelated things that have to ship together:

     §1-§9   the widget's OWN user interface, every selector under `#lmaw-root`
             or prefixed `.lmaw-`, which must look the same on any host page.
     §10     HOST-PAGE ADAPTATIONS — the rules the widget turns on by adding a
             class to <html>, e.g. `html.lmaw-hc`. These deliberately reach into
             the host document. They are the only rules here that do.
     §11     the immunity block that stops §10 from reaching the widget itself.

   WHY A SEPARATE FILE AND NOT v2.css. v2.css is this site's page CSS, 63k lines
   of it, numbered by page family. The widget is meant to be liftable onto other
   sites unchanged (the brief's whole premise), so it cannot depend on a
   stylesheet that carries one client's landing pages. Nothing here uses a
   --v2-* token for the same reason; the brand colours arrive as configuration
   (see the `primaryColor` option) and land on `#lmaw-root` as inline custom
   properties at init.

   WHY `#lmaw-root` AND NOT A CLASS. Specificity, and it is load-bearing twice
   over. (a) Host pages set element rules like `.v2 button {...}` at (0,1,1); an
   ID-scoped `#lmaw-root button` is (1,0,1) and wins without a single
   !important. (b) §10's host rules are class-scoped, so §11 can neutralise them
   inside the widget by ID alone. Changing the root to a class would silently
   lose both and the panel would start inheriting the host's buttons.

   WHY NO SHADOW DOM. It would isolate styling more cleanly. It also breaks the
   one thing this widget cannot afford to break: ARIA ID references do not cross
   a shadow boundary in several shipping screen-reader/browser pairs, and the
   launcher's `aria-controls` points at the panel. An accessibility widget that
   is itself less accessible is not a trade worth making. ID scoping plus §11
   gets most of the isolation at none of that cost.

   SIZING IS ONE NUMBER. Every length below is `calc(N * var(--lmaw-u))`, where
   --lmaw-u is 1px by default. "Oversized Widget" sets it to 1.22px and the
   whole interface grows proportionally — no second set of measurements, no
   media-query fork. Add new lengths in that form or the XL toggle stops
   covering them.

   A NOTE ON px. Using px here is deliberate and is the opposite of the usual
   advice. The widget's own text must NOT scale with the page, because the page
   is exactly what the widget is resizing: if the panel grew every time someone
   pressed "Bigger Text", the control would run away from the reader. "Oversized
   Widget" is the panel's own, separate, size control, and browser zoom still
   scales px. §12 holds the zoom/reflow rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Tokens and isolation
   -------------------------------------------------------------------------- */

#lmaw-root {
  /* The unit. See the header note. */
  --lmaw-u: 1px;

  /* Brand. Overwritten inline by init() from the `primaryColor` option; the
     values here are the fallback so the file is usable on its own. */
  --lmaw-primary: #0078cd;
  --lmaw-primary-dark: #0b5fa5;
  --lmaw-on-primary: #ffffff;

  /* Surfaces. The screenshot's pale-grey panel over white tiles. */
  --lmaw-panel: #eceff3;
  --lmaw-tile: #ffffff;
  --lmaw-row: #f1f3f7;
  --lmaw-footer: #ffffff;
  --lmaw-line: #dfe3ea;

  /* Ink. #1b1f24 on #ffffff is 15.8:1; --lmaw-muted #646d78 is 4.9:1. Both AA,
     and the muted one is only ever used at 12px+ regular, never smaller. */
  --lmaw-ink: #1b1f24;
  --lmaw-ink-soft: #30363d;
  --lmaw-muted: #646d78;

  /* State. --lmaw-on is the "this setting is active" wash on a tile. */
  --lmaw-on: #e3f0fb;
  --lmaw-on-line: #0078cd;

  /* Focus ring. Two-tone so it stays visible on both the light tiles and the
     blue header — a single colour fails one or the other. */
  --lmaw-focus: #111827;
  --lmaw-focus-halo: #ffd400;

  --lmaw-radius: calc(10 * var(--lmaw-u));
  --lmaw-shadow: 0 calc(6 * var(--lmaw-u)) calc(28 * var(--lmaw-u)) rgba(10, 22, 40, .22);

  --lmaw-panel-w: calc(460 * var(--lmaw-u));

  /* Launcher placement. init() overwrites both from the `offset` option. */
  --lmaw-offset-bottom: calc(24 * var(--lmaw-u));
  --lmaw-offset-side: calc(24 * var(--lmaw-u));

  /* Above a sticky header and the cookie banner, below nothing we own.
     2147483000 leaves headroom under the 32-bit max for anything that insists
     on being last. */
  --lmaw-z: 2147483000;

  position: fixed;
  inset: auto;
  z-index: var(--lmaw-z);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(14 * var(--lmaw-u));
  line-height: 1.4;
  color: var(--lmaw-ink);
  text-align: left;
  letter-spacing: normal;
  word-spacing: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  direction: ltr;
}

/* "Oversized Widget". One declaration, because of the --lmaw-u rule above. */
#lmaw-root.lmaw--xl {
  --lmaw-u: 1.22px;
}

/* Reset. Element selectors only — the widget's own classes never need this,
   it is purely to stop the host page's element rules leaking in. ID scoping
   means none of it needs !important.

   EVERY WIDGET RULE BELOW IS WRITTEN `#lmaw-root .lmaw-thing`, NEVER BARE
   `.lmaw-thing`, AND THIS RESET IS WHY. `#lmaw-root div` is (1,0,1); a bare
   `.lmaw-head` is (0,1,0) and loses to it, so the panel header would render
   with the `padding: 0` from this block rather than its own. That is not a
   hypothetical — it is what the first build did, and the symptom was the whole
   interface overflowing the panel with its padding stripped, on every rule in
   the file at once. `#lmaw-root .lmaw-head` is (1,1,0) and wins.

   So: the reset beats the host page, the component rules beat the reset, and
   §11 beats §10 with !important. A new rule here that forgets the prefix will
   not fail loudly — it will just silently not apply. */
#lmaw-root *,
#lmaw-root *::before,
#lmaw-root *::after {
  box-sizing: border-box;
}

#lmaw-root div,
#lmaw-root span,
#lmaw-root p,
#lmaw-root h2,
#lmaw-root h3,
#lmaw-root ul,
#lmaw-root li,
#lmaw-root button,
#lmaw-root a,
#lmaw-root img,
#lmaw-root svg {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  float: none;
  max-width: none;
  min-width: 0;
  min-height: 0;
  text-indent: 0;
  text-shadow: none;
  box-shadow: none;
  transform: none;
  animation: none;
  text-transform: none;
}

#lmaw-root button,
#lmaw-root input,
#lmaw-root select {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

#lmaw-root ul {
  list-style: none;
}

#lmaw-root a {
  color: var(--lmaw-primary-dark);
  text-decoration: underline;
}

#lmaw-root svg {
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One focus style for the whole widget, used by everything below.
   :focus-visible only — a mouse user clicking tiles does not need a ring on
   every click, and the panel's own open/close focus moves are all keyboard or
   programmatic, which :focus-visible does match. */
#lmaw-root :focus-visible {
  outline: calc(3 * var(--lmaw-u)) solid var(--lmaw-focus);
  outline-offset: calc(2 * var(--lmaw-u));
  box-shadow: 0 0 0 calc(6 * var(--lmaw-u)) var(--lmaw-focus-halo);
  border-radius: calc(4 * var(--lmaw-u));
}

/* Visually hidden but still announced. Carries the live region and the state
   words that back up every colour-coded state (WCAG 1.4.1). */
#lmaw-root .lmaw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* --------------------------------------------------------------------------
   2. Launcher
   -------------------------------------------------------------------------- */

#lmaw-root .lmaw-launcher {
  position: fixed;
  bottom: var(--lmaw-offset-bottom);
  width: calc(56 * var(--lmaw-u));
  height: calc(56 * var(--lmaw-u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lmaw-primary);
  color: var(--lmaw-on-primary);
  box-shadow: var(--lmaw-shadow);
  transition: transform .18s ease, background-color .18s ease;
}

/* The side is a class, not a custom property, so `left` and `right` are never
   both set — a half-applied switch would stretch the launcher edge to edge. */
#lmaw-root.lmaw--left .lmaw-launcher { left: var(--lmaw-offset-side); }
#lmaw-root.lmaw--right .lmaw-launcher { right: var(--lmaw-offset-side); }

#lmaw-root .lmaw-launcher:hover { background: var(--lmaw-primary-dark); }
#lmaw-root .lmaw-launcher:active { transform: scale(.94); }

#lmaw-root .lmaw-launcher svg {
  width: calc(32 * var(--lmaw-u));
  height: calc(32 * var(--lmaw-u));
  stroke-width: 1.6;
}

/* Hidden while the panel is open rather than left behind it: on a phone the
   panel is full-height and a launcher poking out of the corner is a second,
   dead, target. `visibility`, not removal — aria-expanded lives on this element
   and it is what focus returns to on close, so it has to stay in the DOM. */
#lmaw-root.lmaw--open .lmaw-launcher {
  visibility: hidden;
}


/* --------------------------------------------------------------------------
   3. Panel shell — header / scrolling body / fixed footer
   -------------------------------------------------------------------------- */

/* The three-row grid IS the brief's scroll requirement: header and footer are
   auto rows, the body is 1fr with its own overflow. One page-level scroll would
   let the footer ride up over the tiles and cover a focused control. */
#lmaw-root .lmaw-panel {
  position: fixed;
  bottom: var(--lmaw-offset-bottom);
  width: var(--lmaw-panel-w);
  max-width: calc(100vw - (16 * var(--lmaw-u)));
  /* dvh where supported, so iOS collapsing its URL bar does not crop the
     footer. The vh line above it is the fallback and must stay. */
  max-height: calc(100vh - (32 * var(--lmaw-u)));
  max-height: calc(100dvh - (32 * var(--lmaw-u)));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: calc(14 * var(--lmaw-u));
  background: var(--lmaw-panel);
  box-shadow: var(--lmaw-shadow);
}

#lmaw-root.lmaw--left .lmaw-panel { left: var(--lmaw-offset-side); }
#lmaw-root.lmaw--right .lmaw-panel { right: var(--lmaw-offset-side); }

/* display:none, not visibility/opacity. A closed panel must be out of the tab
   order and out of the accessibility tree; hiding it any other way leaves ~60
   reachable controls behind the page. */
#lmaw-root:not(.lmaw--open) .lmaw-panel {
  display: none;
}

#lmaw-root .lmaw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--lmaw-u));
  padding: calc(14 * var(--lmaw-u)) calc(16 * var(--lmaw-u));
  background: linear-gradient(90deg, var(--lmaw-primary-dark), var(--lmaw-primary));
  color: var(--lmaw-on-primary);
}

#lmaw-root .lmaw-head__title {
  font-size: calc(15 * var(--lmaw-u));
  font-weight: 700;
  color: var(--lmaw-on-primary);
}

/* The close button's own dark disc, from the screenshot. It needs a background
   because the header is a gradient: a transparent button would sit at a
   different contrast at each end of it. */
#lmaw-root .lmaw-head__close {
  flex: 0 0 auto;
  width: calc(34 * var(--lmaw-u));
  height: calc(34 * var(--lmaw-u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  color: var(--lmaw-on-primary);
}

#lmaw-root .lmaw-head__close:hover { background: rgba(0, 0, 0, .52); }

#lmaw-root .lmaw-head__close svg {
  width: calc(15 * var(--lmaw-u));
  height: calc(15 * var(--lmaw-u));
  stroke-width: 2.6;
}

#lmaw-root .lmaw-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#lmaw-root .lmaw-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(10 * var(--lmaw-u));
  padding: calc(10 * var(--lmaw-u)) calc(16 * var(--lmaw-u));
  background: var(--lmaw-footer);
  border-top: 1px solid var(--lmaw-line);
}

#lmaw-root .lmaw-foot__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--lmaw-u));
}

#lmaw-root .lmaw-foot__statement {
  font-size: calc(12 * var(--lmaw-u));
  font-weight: 600;
  color: var(--lmaw-primary-dark);
}

#lmaw-root .lmaw-foot__manage {
  padding: calc(5 * var(--lmaw-u)) calc(14 * var(--lmaw-u));
  border-radius: calc(20 * var(--lmaw-u));
  background: var(--lmaw-primary);
  color: var(--lmaw-on-primary);
  font-size: calc(11 * var(--lmaw-u));
  font-weight: 700;
  text-align: center;
}

#lmaw-root .lmaw-foot__manage:hover { background: var(--lmaw-primary-dark); }

#lmaw-root .lmaw-foot__brand {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--lmaw-u));
  max-width: 52%;
}

#lmaw-root .lmaw-foot__brand img {
  display: block;
  height: calc(26 * var(--lmaw-u));
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Text fallback for an unconfigured brand. Deliberately plain: the brief
   forbids inventing a company mark, so with no logo the footer shows a word. */
#lmaw-root .lmaw-foot__brandname {
  font-size: calc(12 * var(--lmaw-u));
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lmaw-ink-soft);
}


/* --------------------------------------------------------------------------
   4. The three summary rows — language, profiles, oversized widget
   -------------------------------------------------------------------------- */

#lmaw-root .lmaw-rows {
  background: var(--lmaw-row);
}

/* The row is a container, never a control. The profiles row carries both a
   disclosure and its own information dot, and a <button> cannot contain
   another <button> — the parser lifts the inner one out of it. So the row is a
   <div> and the tappable part of it is `.lmaw-row__btn`. */
#lmaw-root .lmaw-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--lmaw-u));
  width: 100%;
  padding: calc(13 * var(--lmaw-u)) calc(16 * var(--lmaw-u));
  background: transparent;
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-row__btn {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lmaw-u));
  min-width: 0;
  padding: 0;
  background: transparent;
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-row + .lmaw-row {
  border-top: 1px solid var(--lmaw-line);
}

#lmaw-root .lmaw-row:hover { background: rgba(0, 0, 0, .035); }

#lmaw-root .lmaw-row__badge {
  flex: 0 0 auto;
  width: calc(28 * var(--lmaw-u));
  height: calc(28 * var(--lmaw-u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lmaw-primary);
  color: var(--lmaw-on-primary);
  font-size: calc(10 * var(--lmaw-u));
  font-weight: 800;
  letter-spacing: .04em;
}

/* The profiles row's badge is the figure mark on a dark disc, per the
   screenshot — a different treatment from the language badge on purpose. */
#lmaw-root .lmaw-row__badge--dark {
  background: #10151c;
}

#lmaw-root .lmaw-row__badge svg {
  width: calc(18 * var(--lmaw-u));
  height: calc(18 * var(--lmaw-u));
}

/* "XL" is set as type, not an icon, exactly as in the screenshot. */
#lmaw-root .lmaw-row__xl {
  flex: 0 0 auto;
  width: calc(28 * var(--lmaw-u));
  text-align: center;
  font-size: calc(15 * var(--lmaw-u));
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-row__label {
  flex: 1 1 auto;
  font-size: calc(13.5 * var(--lmaw-u));
  font-weight: 600;
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-row__chev {
  flex: 0 0 auto;
  width: calc(13 * var(--lmaw-u));
  height: calc(13 * var(--lmaw-u));
  stroke-width: 2.4;
  color: var(--lmaw-ink);
}

/* The small information indicator. A real button, not a decorative dot: it
   toggles a plain-text explanation, so it has to be reachable by keyboard and
   must not depend on hover (WCAG 1.4.13). */
#lmaw-root .lmaw-info {
  flex: 0 0 auto;
  width: calc(18 * var(--lmaw-u));
  height: calc(18 * var(--lmaw-u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #cfe3e6;
  color: #243b3f;
  font-size: calc(11 * var(--lmaw-u));
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

#lmaw-root .lmaw-info:hover,
#lmaw-root .lmaw-info[aria-expanded="true"] {
  background: var(--lmaw-primary);
  color: var(--lmaw-on-primary);
}

/* The explanation the info button reveals. Full-width, inside the flow, so it
   pushes rather than covers — an overlay here would hide the control that
   opened it once text is enlarged. */
#lmaw-root .lmaw-note {
  padding: calc(2 * var(--lmaw-u)) calc(16 * var(--lmaw-u)) calc(12 * var(--lmaw-u));
  font-size: calc(12 * var(--lmaw-u));
  line-height: 1.45;
  color: var(--lmaw-ink-soft);
  background: var(--lmaw-row);
  border-top: 1px solid var(--lmaw-line);
}

#lmaw-root .lmaw-note[hidden] { display: none; }

/* The on/off switch. Colour is never the only signal: the knob carries a tick
   or a cross, and the button has a visually-hidden state word. */
#lmaw-root .lmaw-switch {
  flex: 0 0 auto;
  position: relative;
  width: calc(50 * var(--lmaw-u));
  height: calc(27 * var(--lmaw-u));
  border-radius: calc(20 * var(--lmaw-u));
  background: #10151c;
  transition: background-color .18s ease;
}

#lmaw-root .lmaw-switch__knob {
  position: absolute;
  top: calc(3 * var(--lmaw-u));
  left: calc(3 * var(--lmaw-u));
  width: calc(21 * var(--lmaw-u));
  height: calc(21 * var(--lmaw-u));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #10151c;
  transition: transform .18s ease;
}

#lmaw-root .lmaw-switch__knob svg {
  width: calc(11 * var(--lmaw-u));
  height: calc(11 * var(--lmaw-u));
  stroke-width: 3;
}

#lmaw-root .lmaw-switch[aria-checked="true"] {
  background: var(--lmaw-primary);
}

#lmaw-root .lmaw-switch[aria-checked="true"] .lmaw-switch__knob {
  transform: translateX(calc(23 * var(--lmaw-u)));
}


/* --------------------------------------------------------------------------
   5. Feature tile grid
   -------------------------------------------------------------------------- */

#lmaw-root .lmaw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(11 * var(--lmaw-u));
  padding: calc(14 * var(--lmaw-u)) calc(16 * var(--lmaw-u)) calc(16 * var(--lmaw-u));
}

/* One cell per tile. It exists so the information dot can be positioned over
   the tile while being its SIBLING in the DOM rather than its child — see
   infoDot() in accessibility.js for why that is not negotiable. `display:grid`
   is what makes the tile fill the cell, so every card in a row is the height
   of the tallest. */
#lmaw-root .lmaw-cell {
  position: relative;
  display: grid;
}

/* Fixed-height tiles are what give the reference design its density, but a
   fixed height is also how a label clips at 200% zoom or in Spanish, where
   several of these strings are half again as long. min-height, never height. */
#lmaw-root .lmaw-tile {
  position: relative;
  min-height: calc(104 * var(--lmaw-u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--lmaw-u));
  padding: calc(14 * var(--lmaw-u)) calc(6 * var(--lmaw-u));
  border-radius: var(--lmaw-radius);
  background: var(--lmaw-tile);
  color: var(--lmaw-ink);
  text-align: center;
  transition: background-color .15s ease, box-shadow .15s ease;
}

#lmaw-root .lmaw-tile:hover {
  box-shadow: 0 0 0 calc(2 * var(--lmaw-u)) #c9d3e0 inset;
}

#lmaw-root .lmaw-tile__icon {
  width: calc(34 * var(--lmaw-u));
  height: calc(34 * var(--lmaw-u));
  flex: 0 0 auto;
}

#lmaw-root .lmaw-tile__label {
  font-size: calc(12.5 * var(--lmaw-u));
  font-weight: 700;
  line-height: 1.2;
  color: var(--lmaw-ink);
}

/* The current step of a cycling control, e.g. "150%" under Bigger Text. Shown
   only when the control is on, and it is the non-colour signal of WHICH step
   is active — the tile wash alone cannot say that. */
#lmaw-root .lmaw-tile__value {
  font-size: calc(10.5 * var(--lmaw-u));
  font-weight: 700;
  line-height: 1;
  color: var(--lmaw-primary-dark);
}

/* Active state. Three signals, not one: wash, border, and the state word in
   the accessible name (plus the step value above for cycling controls). */
#lmaw-root .lmaw-tile[aria-pressed="true"],
#lmaw-root .lmaw-tile.lmaw-tile--on {
  background: var(--lmaw-on);
  box-shadow: 0 0 0 calc(2 * var(--lmaw-u)) var(--lmaw-on-line) inset;
}

/* A control the browser cannot support — speech recognition outside Chromium,
   say. Disabled rather than hidden, with the reason in the info note, because
   the brief requires every visible control to work or explain itself. */
#lmaw-root .lmaw-tile[disabled],
#lmaw-root .lmaw-tile[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  background: #f6f7f9;
  box-shadow: none;
}

#lmaw-root .lmaw-tile[aria-disabled="true"]:hover {
  box-shadow: none;
}

/* Per-tile info dot, pinned to the tile's top-left as in the reference. */
#lmaw-root .lmaw-cell > .lmaw-info {
  position: absolute;
  top: calc(6 * var(--lmaw-u));
  left: calc(6 * var(--lmaw-u));
  z-index: 1;
}

/* An explanation opened from a tile spans the row it belongs to. The inline
   grid-column is set in JS; this is the rest of the treatment. */
#lmaw-root .lmaw-grid > .lmaw-note {
  margin: calc(-2 * var(--lmaw-u)) 0 calc(2 * var(--lmaw-u));
  padding: calc(10 * var(--lmaw-u)) calc(12 * var(--lmaw-u));
  border: 1px solid var(--lmaw-line);
  border-radius: calc(8 * var(--lmaw-u));
  background: #ffffff;
}


/* --------------------------------------------------------------------------
   6. Sub-views — language, profiles, page structure, manage
   --------------------------------------------------------------------------
   All four replace the body's contents rather than stacking over it. A stacked
   view would need its own focus trap and its own scroll container; swapping the
   contents keeps one of each, which is the whole reason the panel's focus
   handling stays small enough to reason about. */

#lmaw-root .lmaw-view__head {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--lmaw-u));
  padding: calc(10 * var(--lmaw-u)) calc(14 * var(--lmaw-u));
  background: var(--lmaw-row);
  border-bottom: 1px solid var(--lmaw-line);
}

#lmaw-root .lmaw-back {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--lmaw-u));
  padding: calc(6 * var(--lmaw-u)) calc(10 * var(--lmaw-u));
  border-radius: calc(8 * var(--lmaw-u));
  background: #ffffff;
  font-size: calc(12 * var(--lmaw-u));
  font-weight: 700;
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-back:hover { background: #e4e9f0; }

#lmaw-root .lmaw-back svg {
  width: calc(12 * var(--lmaw-u));
  height: calc(12 * var(--lmaw-u));
  stroke-width: 2.4;
}

#lmaw-root .lmaw-view__title {
  font-size: calc(13.5 * var(--lmaw-u));
  font-weight: 700;
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-list {
  padding: calc(10 * var(--lmaw-u)) calc(14 * var(--lmaw-u)) calc(16 * var(--lmaw-u));
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--lmaw-u));
}

#lmaw-root .lmaw-opt {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--lmaw-u));
  width: 100%;
  padding: calc(11 * var(--lmaw-u)) calc(12 * var(--lmaw-u));
  border-radius: var(--lmaw-radius);
  background: var(--lmaw-tile);
  color: var(--lmaw-ink);
  text-align: left;
}

#lmaw-root .lmaw-opt:hover { background: #e8eef6; }

#lmaw-root .lmaw-opt[aria-pressed="true"],
#lmaw-root .lmaw-opt[aria-checked="true"] {
  background: var(--lmaw-on);
  box-shadow: 0 0 0 calc(2 * var(--lmaw-u)) var(--lmaw-on-line) inset;
}

#lmaw-root .lmaw-opt__icon {
  flex: 0 0 auto;
  width: calc(22 * var(--lmaw-u));
  height: calc(22 * var(--lmaw-u));
}

#lmaw-root .lmaw-opt__text {
  flex: 1 1 auto;
  min-width: 0;
}

#lmaw-root .lmaw-opt__title {
  display: block;
  font-size: calc(13 * var(--lmaw-u));
  font-weight: 700;
}

#lmaw-root .lmaw-opt__desc {
  display: block;
  margin-top: calc(2 * var(--lmaw-u));
  font-size: calc(11.5 * var(--lmaw-u));
  line-height: 1.4;
  font-weight: 400;
  color: var(--lmaw-muted);
}

/* The tick that marks the chosen option. Paired with aria-pressed/aria-checked
   so the state is never carried by the tile wash alone. */
#lmaw-root .lmaw-opt__tick {
  flex: 0 0 auto;
  width: calc(16 * var(--lmaw-u));
  height: calc(16 * var(--lmaw-u));
  stroke-width: 3;
  color: var(--lmaw-primary-dark);
  visibility: hidden;
}

#lmaw-root .lmaw-opt[aria-pressed="true"] .lmaw-opt__tick,
#lmaw-root .lmaw-opt[aria-checked="true"] .lmaw-opt__tick {
  visibility: visible;
}

/* The Manage view's "switch this off" mark. Same box as the tick above, but
   always shown — see the note by its markup in manageView(). */
#lmaw-root .lmaw-opt__x {
  flex: 0 0 auto;
  width: calc(16 * var(--lmaw-u));
  height: calc(16 * var(--lmaw-u));
  stroke-width: 3;
  color: #b3261e;
}

/* Page-structure view: headings indented by level, so the outline reads as an
   outline. The indent is the only thing level adds — the list never invents a
   heading the page does not have. */
#lmaw-root .lmaw-struct__group {
  margin-top: calc(10 * var(--lmaw-u));
  font-size: calc(11 * var(--lmaw-u));
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lmaw-muted);
}

/* NO `width: 100%` HERE. The indent that makes the outline read as an outline
   is a margin-left, and 100% plus a margin is wider than the box — the deeper
   headings ran off the right edge of the panel. `.lmaw-list` is a flex column,
   so stretching to the available width is the default and the margin correctly
   takes its space out of that. */
#lmaw-root .lmaw-struct__item {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--lmaw-u));
  padding: calc(8 * var(--lmaw-u)) calc(10 * var(--lmaw-u));
  border-radius: calc(8 * var(--lmaw-u));
  background: var(--lmaw-tile);
  font-size: calc(12.5 * var(--lmaw-u));
  color: var(--lmaw-ink);
}

#lmaw-root .lmaw-struct__item:hover { background: #e8eef6; }

#lmaw-root .lmaw-struct__tag {
  flex: 0 0 auto;
  font-size: calc(10 * var(--lmaw-u));
  font-weight: 800;
  color: var(--lmaw-primary-dark);
}

#lmaw-root .lmaw-struct__text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lmaw-root .lmaw-struct__item[data-level="2"] { margin-left: calc(12 * var(--lmaw-u)); }
#lmaw-root .lmaw-struct__item[data-level="3"] { margin-left: calc(24 * var(--lmaw-u)); }
#lmaw-root .lmaw-struct__item[data-level="4"] { margin-left: calc(36 * var(--lmaw-u)); }
#lmaw-root .lmaw-struct__item[data-level="5"] { margin-left: calc(44 * var(--lmaw-u)); }
#lmaw-root .lmaw-struct__item[data-level="6"] { margin-left: calc(52 * var(--lmaw-u)); }

#lmaw-root .lmaw-empty {
  padding: calc(14 * var(--lmaw-u));
  font-size: calc(12.5 * var(--lmaw-u));
  color: var(--lmaw-muted);
}

/* Manage view: the reset control, and anything else destructive. Red, but the
   word "Reset" carries it too. */
#lmaw-root .lmaw-danger {
  width: 100%;
  padding: calc(11 * var(--lmaw-u));
  border-radius: var(--lmaw-radius);
  background: #b3261e;
  color: #ffffff;
  font-size: calc(13 * var(--lmaw-u));
  font-weight: 700;
  text-align: center;
}

#lmaw-root .lmaw-danger:hover { background: #8c1d18; }


/* --------------------------------------------------------------------------
   7. Read-aloud transport, tooltips, and the live region
   -------------------------------------------------------------------------- */

/* The stop/pause bar for speech. It sits in the panel footer area rather than
   floating over the page: a floating transport would be one more thing to
   collide with the chat bubble and the cookie banner. */
#lmaw-root .lmaw-transport {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--lmaw-u));
  padding: calc(8 * var(--lmaw-u)) calc(16 * var(--lmaw-u));
  background: #10151c;
  color: #ffffff;
}

#lmaw-root .lmaw-transport[hidden] { display: none; }

#lmaw-root .lmaw-transport__label {
  flex: 1 1 auto;
  font-size: calc(11.5 * var(--lmaw-u));
  font-weight: 600;
  color: #ffffff;
}

#lmaw-root .lmaw-transport button {
  padding: calc(5 * var(--lmaw-u)) calc(11 * var(--lmaw-u));
  border-radius: calc(16 * var(--lmaw-u));
  background: #ffffff;
  color: #10151c;
  font-size: calc(11 * var(--lmaw-u));
  font-weight: 700;
}

#lmaw-root .lmaw-transport button:hover { background: #d8dde4; }

/* The widget's own tooltip layer, used by the Tooltips feature. Rendered into
   #lmaw-root so §11 protects it, positioned by JS, and never interactive:
   pointer-events:none means it can never swallow a click meant for the page. */
#lmaw-root .lmaw-tip {
  position: fixed;
  z-index: calc(var(--lmaw-z) + 1);
  max-width: calc(280 * var(--lmaw-u));
  padding: calc(6 * var(--lmaw-u)) calc(10 * var(--lmaw-u));
  border-radius: calc(6 * var(--lmaw-u));
  background: #10151c;
  color: #ffffff;
  font-size: calc(12.5 * var(--lmaw-u));
  line-height: 1.35;
  pointer-events: none;
  box-shadow: var(--lmaw-shadow);
}

#lmaw-root .lmaw-tip[hidden] { display: none; }


/* --------------------------------------------------------------------------
   8. Reading guide and reading mask
   --------------------------------------------------------------------------
   Both are pointer-transparent by rule, not by accident. They cover the whole
   viewport; without pointer-events:none the page underneath would become
   unclickable the moment either is switched on, which is the single worst thing
   an accessibility tool can do. */

#lmaw-root .lmaw-guide,
#lmaw-root .lmaw-mask {
  position: fixed;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: calc(var(--lmaw-z) - 1);
}

#lmaw-root .lmaw-guide {
  height: calc(5 * var(--lmaw-u));
  background: var(--lmaw-primary);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
  border-radius: calc(3 * var(--lmaw-u));
}

#lmaw-root .lmaw-mask {
  background: rgba(8, 12, 20, .72);
}


/* --------------------------------------------------------------------------
   9. Alt-text stand-ins for Hide Images
   --------------------------------------------------------------------------
   Hide Images fades the picture but leaves the <img> in the tree with its alt
   intact, so assistive technology loses nothing. This span is the SIGHTED
   half — the alt text made visible — and is therefore aria-hidden, or a screen
   reader would read the same alt twice. */

.lmaw-altbox {
  display: inline-block;
  max-width: 100%;
  padding: calc(4 * var(--lmaw-u)) calc(8 * var(--lmaw-u));
  border: 1px dashed #6b7280;
  border-radius: calc(6 * var(--lmaw-u));
  background: #f3f4f6;
  color: #111827;
  font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  vertical-align: middle;
}


/* ==========================================================================
   10. HOST-PAGE ADAPTATIONS
   ==========================================================================
   Everything below this line reaches into the host document. It is switched on
   and off by a class on <html> and nothing else, which is what makes it
   reversible: removing the class removes the treatment completely, with no
   inline styles to unwind. The two features that CANNOT work that way — text
   size, which must read each element's computed px because this site sizes type
   in vw, and the alt-text stand-ins — record their originals in JS and restore
   them there. See `restore()` in accessibility.js.

   `!important` is used throughout this section and only in this section. Host
   pages routinely carry !important of their own, and a contrast mode that loses
   to a page's own colours is worse than no contrast mode. §11 is what keeps it
   from reaching the widget.
   ========================================================================== */

/* --- 10.1 Reduced motion ---------------------------------------------------
   Deliberately not `animation: none`: removing an animation outright can leave
   an element stuck at frame 0, which for a fade-in means permanently invisible.
   Running it once, instantly, to its end state leaves the page in the position
   it was animating towards. The 0.01ms duration (rather than 0s) is what keeps
   `animationend` firing, so scripts waiting on it still run. */
html.lmaw-nomotion *,
html.lmaw-nomotion *::before,
html.lmaw-nomotion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: .01ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

/* --- 10.2 Link highlighting ----------------------------------------------- */
html.lmaw-links a[href] {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 2px !important;
  background-color: #fff6a8 !important;
  color: #0b1b3a !important;
  outline: 1px solid #0b1b3a !important;
}

/* --- 10.3 Focus highlighting ---------------------------------------------- */
html.lmaw-focusring :focus {
  outline: 3px solid #111827 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px #ffd400 !important;
}

/* --- 10.4 Grayscale -------------------------------------------------------
   This is the one filter in the file, and it is scoped to <body>, never <html>.
   On <html> it would also desaturate the widget (filters create a containing
   block and apply to every descendant), and the panel would lose the colour
   it uses to show which settings are on. §11.1 lifts the widget back out. */
html.lmaw-gray body {
  filter: grayscale(100%) !important;
}

/* --- 10.5 / 10.6 / 10.7  Recolouring the page -----------------------------
   Three treatments, one shape: high contrast, dark and light. They are
   mutually exclusive in JavaScript (see set()'s `colour` group), not here.

   AN ENUMERATED SELECTOR LIST, NOT `body *`. Listing the elements means a
   background photograph keeps its own colours underneath text that has been
   given a solid ground, instead of every box on the page flattening to one
   colour. It also means this cannot touch an element type nobody checked.

   THE THREE LISTS BELOW ARE IDENTICAL AND MUST STAY THAT WAY. CSS has no way
   to name a selector list once, so they are written out three times. An element
   added to one and not the others is not a cosmetic inconsistency: it is an
   element that keeps the page's own colour against the new background, which is
   how `<b>` inside a review footer ended up navy-on-near-black in dark mode —
   #0a2f5f on #11161d, a contrast ratio of 1.37:1, invisible. Found by axe, not
   by looking, because it is one word in a citation line.

   NO invert() AND NO DOCUMENT-LEVEL FILTER, deliberately: inverting would turn
   every logo, photograph and video on these pages into a negative, and would
   catch the widget with them.

   LINKS GET A BACKGROUND, NOT JUST A COLOUR, and that is the other thing axe
   found. These pages style their calls to action as `<a class="v2-btn">` — a
   link with the brand yellow behind it. Recolouring the text without touching
   the background left #ffff00 on #ffeb00: 1.14:1, invisible, on every CTA on
   the page. A rule for `button` does not help, because these are not buttons
   and carry no role either. There is no way to ask CSS whether a link "looks
   like a button", so every link is given the page's new ground. In running
   prose that ground is the same colour as the paragraph behind it and cannot
   be seen; on a CTA it is what makes the label legible at all. */

html.lmaw-hc body {
  background-color: #000000 !important;
  color: #ffffff !important;
}

html.lmaw-hc :is(header, footer, main, section, article, aside, nav, div,
                 p, span, li, ul, ol, dl, dt, dd, blockquote, figure, figcaption,
                 h1, h2, h3, h4, h5, h6, label, legend, fieldset, form, table,
                 thead, tbody, tr, th, td, caption, summary, details, address,
                 small, strong, em, b, i, u, s, mark, sub, sup, q, cite, abbr,
                 data, output, time, code, pre, kbd, samp, var) {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  text-shadow: none !important;
}

/* Text needs a ground of its own where it sits on a photograph. Applied to the
   page's own sectioning roots only, so individual words do not each get a box. */
html.lmaw-hc :is(body > *, main > *, section, article, header, footer, nav) {
  background-color: #000000 !important;
}

html.lmaw-hc a[href] {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffff00 !important;
  text-decoration: underline !important;
}

html.lmaw-hc :is(button, input, select, textarea, [role="button"]) {
  background-color: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

html.lmaw-hc :is(img, picture, video, svg, canvas, iframe) {
  background-color: transparent !important;
}

/* --- 10.6 Dark display preference ----------------------------------------
   Softer than high contrast and a different intent: this is for someone who
   finds a white page painful, not someone who needs maximum separation. */
html.lmaw-dark {
  color-scheme: dark;
}

html.lmaw-dark body {
  background-color: #11161d !important;
  color: #e8ecf1 !important;
}

html.lmaw-dark :is(header, footer, main, section, article, aside, nav, div,
                   p, span, li, ul, ol, dl, dt, dd, blockquote, figure, figcaption,
                   h1, h2, h3, h4, h5, h6, label, legend, fieldset, form, table,
                   thead, tbody, tr, th, td, caption, summary, details, address,
                   small, strong, em, b, i, u, s, mark, sub, sup, q, cite, abbr,
                   data, output, time, code, pre, kbd, samp, var) {
  background-color: transparent !important;
  background-image: none !important;
  color: #e8ecf1 !important;
  border-color: #39424e !important;
  text-shadow: none !important;
}

html.lmaw-dark :is(body > *, main > *, section, article, header, footer, nav) {
  background-color: #11161d !important;
}

html.lmaw-dark a[href] {
  background-color: #11161d !important;
  background-image: none !important;
  color: #7cc4ff !important;
}

html.lmaw-dark :is(button, input, select, textarea, [role="button"]) {
  background-color: #1b222c !important;
  background-image: none !important;
  color: #e8ecf1 !important;
  border-color: #39424e !important;
}

/* --- 10.7 Light display preference ---------------------------------------
   The counterpart for a site that ships dark, and the reason "Smart Contrast"
   is a three-step cycle rather than a single dark toggle. */
html.lmaw-light {
  color-scheme: light;
}

html.lmaw-light body {
  background-color: #ffffff !important;
  color: #16202b !important;
}

html.lmaw-light :is(header, footer, main, section, article, aside, nav, div,
                    p, span, li, ul, ol, dl, dt, dd, blockquote, figure, figcaption,
                    h1, h2, h3, h4, h5, h6, label, legend, fieldset, form, table,
                    thead, tbody, tr, th, td, caption, summary, details, address,
                    small, strong, em, b, i, u, s, mark, sub, sup, q, cite, abbr,
                    data, output, time, code, pre, kbd, samp, var) {
  background-color: transparent !important;
  background-image: none !important;
  color: #16202b !important;
  border-color: #c7ced8 !important;
  text-shadow: none !important;
}

html.lmaw-light :is(body > *, main > *, section, article, header, footer, nav) {
  background-color: #ffffff !important;
}

html.lmaw-light a[href] {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0b5fa5 !important;
}

html.lmaw-light :is(button, input, select, textarea, [role="button"]) {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #16202b !important;
  border-color: #c7ced8 !important;
}

/* --- 10.8 Saturation -------------------------------------------------------
   The low/high saturation steps of the colour-vision support profile. Same
   body-scoping rule as grayscale, for the same reason. */
html.lmaw-sat-low body { filter: saturate(50%) !important; }
html.lmaw-sat-high body { filter: saturate(175%) !important; }

/* --- 10.9 Line height -----------------------------------------------------
   Unitless, so it multiplies each element's own font-size rather than replacing
   it. That is what lets this coexist with the Bigger Text feature, which
   rewrites font-size in px. */
html.lmaw-lh-1 :is(p, li, dd, dt, blockquote, figcaption, label, td, th,
                   h1, h2, h3, h4, h5, h6, a, span, div) {
  line-height: 1.5 !important;
}

html.lmaw-lh-2 :is(p, li, dd, dt, blockquote, figcaption, label, td, th,
                   h1, h2, h3, h4, h5, h6, a, span, div) {
  line-height: 1.8 !important;
}

html.lmaw-lh-3 :is(p, li, dd, dt, blockquote, figcaption, label, td, th,
                   h1, h2, h3, h4, h5, h6, a, span, div) {
  line-height: 2.2 !important;
}

/* --- 10.10 Text spacing ---------------------------------------------------
   em, not px, for the same reason line-height is unitless: the spacing has to
   track whatever size the text ends up at. The top step matches the WCAG 1.4.12
   author requirement (0.12em letter, 0.16em word), which is a useful thing for
   a site owner to be able to switch on and look at. */
html.lmaw-ls-1 :is(p, li, dd, dt, blockquote, figcaption, label, td, th,
                   h1, h2, h3, h4, h5, h6, a, span) {
  letter-spacing: .06em !important;
  word-spacing: .1em !important;
}

html.lmaw-ls-2 :is(p, li, dd, dt, blockquote, figcaption, label, td, th,
                   h1, h2, h3, h4, h5, h6, a, span) {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}

html.lmaw-ls-3 :is(p, li, dd, dt, blockquote, figcaption, label, td, th,
                   h1, h2, h3, h4, h5, h6, a, span) {
  letter-spacing: .2em !important;
  word-spacing: .3em !important;
}

/* --- 10.11 Text alignment -------------------------------------------------
   Block containers are excluded on purpose: aligning a flex or grid container
   is how a centred layout turns into a stack of misaligned boxes. Only the
   elements that actually hold running text are touched. */
html.lmaw-align-left :is(p, li, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: left !important;
}

html.lmaw-align-center :is(p, li, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: center !important;
}

html.lmaw-align-right :is(p, li, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6) {
  text-align: right !important;
}

/* Justified text is offered because some readers prefer it, and is listed last
   because for many it is worse: uneven word spacing creates "rivers" that are
   hard to track. Hyphenation is forced on to keep the gaps small. */
html.lmaw-align-justify :is(p, li, dd, blockquote) {
  text-align: justify !important;
  hyphens: auto !important;
}

/* --- 10.12 Readable font --------------------------------------------------
   A font stack, not a bundled face: shipping a webfont would add a download to
   every page for a setting most visitors never turn on, and the faces usually
   sold for this purpose are licensed per-domain. These are the families most
   commonly installed locally that have unambiguous letterforms, with a generic
   last so there is always a result.

   Named "Readable Font" in the UI, never "dyslexia font". The evidence that any
   typeface improves reading for dyslexic readers is weak and contested; what is
   not contested is that some people read some faces more comfortably, which is
   all this claims. */
html.lmaw-readable :is(body, p, li, dd, dt, blockquote, figcaption, label, td, th,
                       h1, h2, h3, h4, h5, h6, a, span, div, button, input,
                       select, textarea) {
  font-family: "Atkinson Hyperlegible", Verdana, Tahoma, "Trebuchet MS",
               "Segoe UI", system-ui, sans-serif !important;
}

/* --- 10.13 Hide images ----------------------------------------------------
   opacity, NOT display:none or visibility:hidden. Both of those take the <img>
   out of the accessibility tree, which would destroy the alt text — the exact
   thing the brief says not to do. opacity:0 leaves the element, its alt, and
   its box intact, so the page does not reflow either. */
html.lmaw-noimg :is(img, picture, video, canvas, svg):not(#lmaw-root svg) {
  opacity: 0 !important;
}

/* DECORATIVE BACKGROUND IMAGES ARE REMOVED IN JAVASCRIPT, NOT HERE, and that
   is the one place in this file where mechanism (b) beats mechanism (a). The
   obvious rule —

       html.lmaw-noimg body * { background-image: none !important; }

   — was here first, and it is a trap. A hero band on these pages is white text
   over a photograph set as a CSS background image. Take the image away and the
   white text is left on whatever background-color happened to be underneath it,
   which is a pale tint: axe measured #ffffff on #e9f3fc, 1.12:1, across seven
   blocks of one page. The text does not fade — it vanishes.

   Flattening the whole page to dark-on-white instead was worse: it also repaints
   the elements whose background is a solid brand colour and whose white text was
   never in any danger, so the pink help banner and the blue county list went from
   correct to 3.58:1.

   Neither can be expressed in CSS, because the fix depends on a measurement:
   what colour is this element's text, and what is left behind it once the image
   is gone. setBackdrops() in accessibility.js does exactly that — it removes
   each background image and, only where the remaining ground fails against that
   element's own text colour, substitutes black or white, whichever the text
   reads better on. Originals are recorded per element and restored on reset.

   So there is no background-image rule here on purpose. Adding one back would
   run before the measurement and blind it.

   TEXT SHADOWS ARE LEFT ALONE for the same reason. A headline set over a
   photograph usually carries one as a legibility crutch, and since the
   photograph stays, so must the crutch. An earlier version stripped shadows
   here; that only made sense while the images were going too. */

/* --- 10.14 Enlarged cursor ------------------------------------------------
   Two original SVG arrows as data URIs. The hotspot coordinates (the two
   numbers after the url) must stay at 0 0 — the tip of both arrows is drawn at
   the origin, and a mismatched hotspot makes every click land a few pixels from
   where the pointer appears to be. */
html.lmaw-cursor-lg,
html.lmaw-cursor-lg body,
html.lmaw-cursor-lg :is(a, button, input, select, textarea, label, [role="button"]) {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M3 1 L3 19 L8 14.5 L11 21.5 L14 20 L11 13.5 L18 13 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E") 0 0, auto !important;
}

html.lmaw-cursor-xl,
html.lmaw-cursor-xl body,
html.lmaw-cursor-xl :is(a, button, input, select, textarea, label, [role="button"]) {
  cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24'%3E%3Cpath d='M3 1 L3 19 L8 14.5 L11 21.5 L14 20 L11 13.5 L18 13 Z' fill='%23ffffff' stroke='%23000000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* --- 10.15 Read-aloud highlight -------------------------------------------
   Marks the block currently being spoken. A class, so it disappears with the
   class list on reset and leaves no inline style behind. */
.lmaw-speaking {
  background-color: #fff07a !important;
  color: #111827 !important;
  box-shadow: 0 0 0 3px #fff07a !important;
  border-radius: 3px;
}


/* ==========================================================================
   11. Widget immunity
   ==========================================================================
   §10 deliberately reaches into the document, and the widget is in the
   document. Without this block, switching on high contrast would repaint the
   panel black-on-black and switching on Hide Images would blank its icons.

   ID specificity does most of the work — `#lmaw-root p` (1,0,1) beats
   `html.lmaw-hc :is(p, ...)` (0,2,1). The !important declarations are here only
   to beat §10's own !important, which it needs for the host page's sake.

   TEST FOR THIS. Switch on every mode in §10 in turn with the panel open; the
   panel must look identical in all of them. It is the fastest check in the
   whole QA list and the one thing most likely to regress when a rule is added
   above.
   ========================================================================== */

/* 11.1 Filters. grayscale/saturate are scoped to <body> in §10, and a filter on
   an ancestor cannot be cancelled by a descendant — the only escape is to leave
   the filtered subtree. The widget is appended to <html>, outside <body>, which
   is why mount() does that and why moving it into <body> would break this. */

#lmaw-root,
#lmaw-root * {
  filter: none !important;
  cursor: auto !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-shadow: none !important;
  opacity: 1 !important;
  text-align: inherit !important;
}

#lmaw-root button,
#lmaw-root a {
  cursor: pointer !important;
}

/* 11.2 Colour. Re-stated rather than inherited, because §10 sets `color` on
   `span`, `div` and friends directly and inheritance would never reach these.

   `button` is in the list for a reason that is not obvious: every tile icon is
   an inline <svg stroke="currentColor"> inside its tile button, so §10.5's
   `:is(button, ...) { color: #fff !important }` does not merely whiten a label
   — it turns all 21 icons white on a white tile and the grid goes blank. The
   per-class rules in 11.2b override this again where the button really is
   meant to carry light text. */
#lmaw-root,
#lmaw-root div,
#lmaw-root span,
#lmaw-root p,
#lmaw-root li,
#lmaw-root ul,
#lmaw-root button {
  background-image: none !important;
  color: var(--lmaw-ink) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border-width: 0 !important;
}

/* The widget's own links — the Accessibility Statement, mainly. §10.2 gives
   every `a[href]` on the page a yellow ground, an outline and an underline, all
   !important, and the footer link is an `a[href]`. */
#lmaw-root a {
  background-color: transparent !important;
  color: var(--lmaw-primary-dark) !important;
  outline-color: var(--lmaw-focus) !important;
  text-decoration: underline !important;
  text-decoration-thickness: auto !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
}

/* 11.2b The buttons that genuinely do carry light text, re-asserted after the
   blanket ink rule above. Each is (1,1,0) or better, so it beats the (1,0,1)
   `#lmaw-root button`. */
#lmaw-root .lmaw-head,
#lmaw-root .lmaw-head * {
  color: var(--lmaw-on-primary) !important;
}

#lmaw-root .lmaw-transport,
#lmaw-root .lmaw-transport .lmaw-transport__label,
#lmaw-root .lmaw-tip {
  color: #ffffff !important;
}

#lmaw-root .lmaw-transport button {
  color: #10151c !important;
  background: #ffffff !important;
}

#lmaw-root .lmaw-foot__statement,
#lmaw-root .lmaw-tile__value,
#lmaw-root .lmaw-struct__tag {
  color: var(--lmaw-primary-dark) !important;
}

#lmaw-root .lmaw-opt__desc,
#lmaw-root .lmaw-struct__group {
  color: var(--lmaw-muted) !important;
}

#lmaw-root .lmaw-foot__manage,
#lmaw-root .lmaw-launcher,
#lmaw-root .lmaw-danger {
  color: #ffffff !important;
}

#lmaw-root .lmaw-row__badge:not(.lmaw-row__badge--dark) {
  color: var(--lmaw-on-primary) !important;
}

/* 11.3 Backgrounds and borders, against §10's `background-color: transparent`
   and `border-color: #fff` sweeps. */
#lmaw-root .lmaw-panel { background-color: var(--lmaw-panel) !important; }
#lmaw-root .lmaw-rows { background-color: var(--lmaw-row) !important; }
#lmaw-root .lmaw-row__btn { background-color: transparent !important; }
#lmaw-root .lmaw-grid > .lmaw-note { background-color: var(--lmaw-tile) !important; }
#lmaw-root .lmaw-note { background-color: var(--lmaw-row) !important; }
#lmaw-root .lmaw-view__head { background-color: var(--lmaw-row) !important; }
#lmaw-root .lmaw-foot { background-color: var(--lmaw-footer) !important; }
#lmaw-root .lmaw-tile,
#lmaw-root .lmaw-opt,
#lmaw-root .lmaw-back,
#lmaw-root .lmaw-struct__item { background-color: var(--lmaw-tile) !important; }
#lmaw-root .lmaw-tile[aria-pressed="true"],
#lmaw-root .lmaw-tile.lmaw-tile--on,
#lmaw-root .lmaw-opt[aria-pressed="true"],
#lmaw-root .lmaw-opt[aria-checked="true"] { background-color: var(--lmaw-on) !important; }
#lmaw-root .lmaw-launcher,
#lmaw-root .lmaw-foot__manage,
#lmaw-root .lmaw-switch[aria-checked="true"],
#lmaw-root .lmaw-info[aria-expanded="true"] { background-color: var(--lmaw-primary) !important; }
#lmaw-root .lmaw-switch:not([aria-checked="true"]),
#lmaw-root .lmaw-transport { background-color: #10151c !important; }
#lmaw-root .lmaw-switch__knob { background-color: #ffffff !important; color: #10151c !important; }
#lmaw-root .lmaw-danger { background-color: #b3261e !important; }
#lmaw-root .lmaw-tip { background-color: #10151c !important; }
#lmaw-root .lmaw-info:not([aria-expanded="true"]) {
  background-color: #cfe3e6 !important;
  color: #243b3f !important;
}

#lmaw-root .lmaw-head {
  background-image: linear-gradient(90deg, var(--lmaw-primary-dark), var(--lmaw-primary)) !important;
}

#lmaw-root .lmaw-row + .lmaw-row,
#lmaw-root .lmaw-foot,
#lmaw-root .lmaw-note,
#lmaw-root .lmaw-view__head {
  border-color: var(--lmaw-line) !important;
}

/* 11.4 Images and SVG, against §10.13. The widget's icons are the UI — fading
   them leaves a panel of unlabelled empty boxes.

   OPACITY ONLY. This also carried `visibility: visible !important` once, which
   was both unnecessary and actively wrong. Unnecessary because §10.13 fades
   images with `opacity` and nothing in §10 touches `visibility` at all. Wrong
   because an ID-plus-element selector with !important outranks every one of the
   widget's own class rules, so it forced visible the two things the widget
   deliberately hides: the tick on an unselected option — all six profiles
   showed as chosen at once — and the launcher icon, which is a child of a
   `visibility: hidden` launcher while the panel is open and would have gone on
   showing through it. Do not put it back. */
#lmaw-root img,
#lmaw-root svg,
#lmaw-root svg * {
  opacity: 1 !important;
}

/* 11.5 Motion. §10.1's sweep would also freeze the switch knob and the panel
   transitions. They are short, they are not decorative — the knob sliding is
   how a sighted user sees the toggle took — and the OS-level
   prefers-reduced-motion block in §12 turns them off for anyone who asked. */
#lmaw-root .lmaw-switch,
#lmaw-root .lmaw-switch__knob,
#lmaw-root .lmaw-launcher,
#lmaw-root .lmaw-tile {
  transition-duration: .18s !important;
}


/* ==========================================================================
   12. Zoom, reflow, narrow screens, and OS preferences
   ========================================================================== */

/* Phones, and any viewport too narrow for a 460px panel plus its offsets. The
   panel goes edge to edge and full height; the grid stays at three columns down
   to 360px, below which two is the only way the labels stay legible. */
@media (max-width: 520px) {
  #lmaw-root .lmaw-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #lmaw-root .lmaw-grid {
    gap: calc(9 * var(--lmaw-u));
    padding: calc(12 * var(--lmaw-u));
  }

  #lmaw-root .lmaw-tile {
    min-height: calc(96 * var(--lmaw-u));
  }
}

@media (max-width: 359px) {
  #lmaw-root .lmaw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Short viewports: a landscape phone, and the 400px-tall band WCAG 1.4.10 asks
   about. The tiles lose their fixed proportion and the panel leans on its own
   scroll, which is why §3 made the body the only scrolling element. */
@media (max-height: 560px) {
  #lmaw-root .lmaw-panel {
    top: 0;
    bottom: 0;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  #lmaw-root .lmaw-tile {
    min-height: calc(84 * var(--lmaw-u));
    gap: calc(6 * var(--lmaw-u));
  }

  #lmaw-root .lmaw-tile__icon {
    width: calc(26 * var(--lmaw-u));
    height: calc(26 * var(--lmaw-u));
  }
}

/* Touch. 44x44 CSS px is the WCAG 2.5.8 target size; the tiles clear it easily
   but the close button, the info dots and the switch do not at --lmaw-u: 1px.
   Padding alone would change the layout, so the target is grown with a
   pseudo-element that extends the hit area without moving anything. */
@media (pointer: coarse) {
  #lmaw-root .lmaw-info,
  #lmaw-root .lmaw-head__close,
  #lmaw-root .lmaw-switch {
    position: relative;
  }

  #lmaw-root .lmaw-info::after,
  #lmaw-root .lmaw-head__close::after,
  #lmaw-root .lmaw-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* Someone who has asked the OS for less motion gets it here too, including for
   the widget's own transitions that §11.5 protects from the page-level sweep. */
@media (prefers-reduced-motion: reduce) {
  #lmaw-root *,
  #lmaw-root *::before,
  #lmaw-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Windows High Contrast / forced-colors. The system palette wins by design;
   all this does is keep the borders that carry structure from disappearing,
   since forced-colors drops background-color and box-shadow. */
@media (forced-colors: active) {
  #lmaw-root .lmaw-tile,
  #lmaw-root .lmaw-opt,
  #lmaw-root .lmaw-switch,
  #lmaw-root .lmaw-info,
  #lmaw-root .lmaw-head__close {
    border: 1px solid ButtonBorder !important;
  }

  #lmaw-root .lmaw-tile[aria-pressed="true"],
  #lmaw-root .lmaw-opt[aria-pressed="true"],
  #lmaw-root .lmaw-opt[aria-checked="true"] {
    border: 3px solid Highlight !important;
  }

  #lmaw-root svg {
    stroke: CanvasText !important;
  }
}