:root[data-theme="light"] {
    --bg: #f5f7fb; --panel: #ffffff; --panel-2: #eef2f7; --border: #dde1e8;
    --text: #1a1d24; --muted: #5b6472; --accent: #3b6fe0;
    --good: #268042; --warn: #94690f; --bad: #cb4036;
    --header-bg: rgba(255,255,255,.86);
    --shadow: 0 18px 44px rgba(20,26,40,.10);
    --tint: rgba(20,26,40,.022); --ghost-bg: rgba(20,26,40,.015); --dot: #cbd2de;
    --thumb-a: #e7ebf2; --thumb-b: #f3f6fa; --thumb-line: #c8d0dd; --thumb-block: #dae0ea;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #0f1115; --panel: #181b22; --panel-2: #1f232c; --border: #2a2f3a;
    --text: #e7eaf0; --muted: #9aa3b2; --accent: #4f8cff;
    --good: #57ab5a; --warn: #d4a72c; --bad: #e5534b;
    --header-bg: rgba(15,17,21,.84);
    --shadow: 0 20px 50px rgba(0,0,0,.45);
    --tint: rgba(255,255,255,.02); --ghost-bg: rgba(255,255,255,.022); --dot: #39404e;
    --thumb-a: #232a36; --thumb-b: #1a1f29; --thumb-line: #333c4c; --thumb-block: #2b3341;
    color-scheme: dark;
}
:root[data-theme="dark"] { --accent-text: var(--accent); }
@supports (color: color-mix(in srgb, red, blue)) {
  :root[data-theme="light"] { --accent-text: color-mix(in srgb, var(--accent) 70%, #000);
                               --accent-btn: color-mix(in srgb, var(--accent) 80%, #000); }
  /* Light 80%: the raw accent under white text was 3.1:1 on Sunset and 3.4:1 on Forest
     Green; 80% is the least darkening that clears 4.5:1 on all five (Sunset, 4.6:1). */
  /* 70% accent: dark enough for white text to clear 4.5:1 on every admin theme's dark
     accent (Sunset is closest, 4.6:1; at the old 78%, Sunset and Forest Green fell short). */
  :root[data-theme="dark"] { --accent-btn: color-mix(in srgb, var(--accent) 70%, #000); }
}

  /* ---------- theme control ---------- */
  .theme-menu { position: relative; }
  /* padding:0 is load-bearing, not tidiness: /app sets a blanket `button { padding: 9px
     20px }`, and against a fixed 38px border-box that leaves the icon a negative content
     width, so the control renders as an empty square. */
  #themeBtn { display: inline-flex; align-items: center; justify-content: center;
               width: 38px; height: 38px; padding: 0; border-radius: 9px; cursor: pointer;
               background: transparent; border: 1px solid var(--border); color: var(--muted); }
  #themeBtn:hover, #themeBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
  #themeBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  #themeBtn .ico { display: none; flex: 0 0 auto; }
  :root[data-theme="light"] #themeBtn .ico-sun { display: block; }
  :root[data-theme="dark"] #themeBtn .ico-moon { display: block; }
  .theme-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; min-width: 168px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 6px; z-index: 1300; box-shadow: var(--shadow);
  }
  .theme-dropdown button {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
    background: transparent; border: 0; color: var(--text); padding: 8px 10px;
    border-radius: 7px; font-weight: 500; font-size: 14px; cursor: pointer;
    font-family: inherit;
  }
  .theme-dropdown button:hover { background: var(--bg); }
  .theme-dropdown button .tick { margin-left: auto; opacity: 0; color: var(--accent); }
  .theme-dropdown button[aria-checked="true"] .tick { opacity: 1; }

  /* ---------- skip link: off-screen until focused, like /app's ---------- */
  .skip-link { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 16px;
               border-radius: 8px; background: var(--accent-btn, var(--accent)); color: #fff;
               font-weight: 600; text-decoration: none; }
  .skip-link:focus { top: 12px; outline: 2px solid var(--text); outline-offset: 2px; }
  /* Focused only by the skip link; a ring round the whole page says nothing useful. */
  #main:focus { outline: none; }

  /* ---------- tap targets (WCAG 2.2 SC 2.5.8) ---------- */
  /* Footer links are a row of short words with little space between them; each page's
     own footer CSS sets their colour and spacing, this only makes every one 24px tall. */
  footer a { display: inline-block; min-height: 24px; padding-top: 3px; padding-bottom: 3px; }

  /* ---------- shared public header (app/nav.py) ---------- */
  header.top { position: sticky; top: 0; z-index: 1000; background: var(--header-bg);
               backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
  header.top .inner { max-width: 1140px; margin: 0 auto; padding: 11px 22px;
                      display: flex; align-items: center; gap: 10px; position: relative;
                      flex-wrap: wrap; }
  header.top .brand { display: flex; align-items: center; gap: 9px; font-weight: 700;
                      font-size: 19px; color: var(--text); text-decoration: none;
                      flex-shrink: 0; min-width: 0; }
  header.top .brand-logo { display: none; height: 40px; }
  header.top .brand-mark { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
                           background: linear-gradient(135deg, var(--accent), var(--accent-2));
                           display: flex; align-items: center; justify-content: center; }
  header.top #siteSubheading { font-size: 13px; font-weight: 500; color: var(--muted); }

  .nav { display: flex; align-items: center; gap: 1px; margin-right: auto; margin-left: 14px; }
  .nav-item { position: relative; }
  .nav-link, .nav-btn {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500;
    padding: 8px 12px; border-radius: 8px; background: transparent; border: 0;
    font-family: inherit; cursor: pointer;
  }
  .nav-link:hover, .nav-btn:hover,
  .nav-btn[aria-expanded="true"] { color: var(--text); background: var(--tint); }
  .nav-link.on, .nav-btn.on { color: var(--text); }
  .nav-btn .caret { transition: transform .15s ease; opacity: .7; }
  .nav-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
  .nav-link:focus-visible, .nav-btn:focus-visible, .nav-toggle:focus-visible,
  .nav-menu a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .nav-menu {
    display: none; position: absolute; top: calc(100% + 9px); left: 0; min-width: 286px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 7px; box-shadow: var(--shadow); z-index: 1200;
  }
  .nav-item.open > .nav-menu { display: block; }
  .nav-menu a { display: block; padding: 9px 11px; border-radius: 8px;
                text-decoration: none; color: var(--text); }
  .nav-menu a:hover { background: var(--bg); }
  .nav-menu a .t { display: block; font-size: 14px; font-weight: 600; }
  .nav-menu a .d { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

  /* wraps rather than overflows: this cluster is the CTA or account button plus three
     38px controls and the burger, and at the top of the text-size range on a 320px
     screen they no longer fit one line. They never wrap at any ordinary size. */
  .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
               flex-wrap: wrap; }
  header.top .cta {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    padding: 9px 18px; border-radius: 9px; font-weight: 600; font-size: 14.5px;
    text-decoration: none; box-shadow: 0 6px 18px var(--accent-30); white-space: nowrap;
  }
  /* Sign in sits beside the primary Start free as a quiet text link; on a phone it moves
     into the menu panel (.nav-auth) so the bar keeps one button that fits at 320px. */
  header.top .nav-signin { color: var(--text); text-decoration: none; font-weight: 600;
                           font-size: 14.5px; padding: 9px 10px; border-radius: 9px; white-space: nowrap; }
  header.top .nav-signin:hover { color: var(--accent-text, var(--accent)); }
  .nav-auth { display: none; }
  .nav-toggle { display: none; align-items: center; justify-content: center;
                width: 38px; height: 38px; border-radius: 9px; cursor: pointer;
                background: transparent; border: 1px solid var(--border); color: var(--text); }
  .nav-toggle:hover { border-color: var(--accent); }

  /* account menu (replaces Sign in once the visitor is signed in) */
  .account-menu { position: relative; }
  #accountBtn { display: flex; align-items: center; gap: 8px; background: transparent;
                border: 1px solid var(--border); color: var(--text); padding: 5px 10px 5px 5px;
                border-radius: 100px; font-weight: 500; cursor: pointer; font-size: 14px;
                font-family: inherit; }
  #accountBtn:hover, #accountBtn[aria-expanded="true"] { border-color: var(--accent); }
  .account-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--accent);
                    color: #fff; display: flex; align-items: center; justify-content: center;
                    font-size: 11px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; }
  .account-menu .account-email { max-width: 150px; overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap; }
  .account-menu .chev { font-size: 10px; color: var(--muted); }
  .account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px;
                      background: var(--panel); border: 1px solid var(--border);
                      border-radius: 10px; padding: 6px; z-index: 1200; box-shadow: var(--shadow); }
  .account-dropdown a, .account-dropdown button {
    display: block; width: 100%; text-align: left; background: transparent; border: none;
    color: var(--text); padding: 9px 12px; border-radius: 6px; font-weight: 500;
    font-size: 14px; text-decoration: none; box-sizing: border-box; cursor: pointer;
    font-family: inherit;
  }
  .account-dropdown a:hover, .account-dropdown button:hover { background: var(--bg); }

  /* Below this width the row cannot hold four groups plus the CTA, so the nav moves
     into a panel under the bar with every group expanded - one tap to anything,
     rather than a dropdown inside a dropdown. */
  @media (max-width: 920px) {
    .nav-toggle { display: inline-flex; }
    .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
           flex-direction: column; align-items: stretch; gap: 0;
           background: var(--panel); border-bottom: 1px solid var(--border);
           padding: 8px 16px 20px; box-shadow: var(--shadow);
           max-height: calc(100dvh - 62px); overflow-y: auto; }
    .nav.open { display: flex; }
    .nav-item { position: static; }
    .nav-btn { pointer-events: none; color: var(--muted); font-size: 11.5px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .08em; padding: 16px 11px 4px; }
    .nav-btn .caret { display: none; }
    .nav-menu { display: block; position: static; min-width: 0; border: 0; padding: 0;
                background: transparent; box-shadow: none; }
    .nav-link { padding: 13px 11px; font-size: 15px; border-top: 1px solid var(--border);
                margin-top: 14px; }
    .nav-menu a { padding: 10px 11px; }
  }
  @media (max-width: 920px) {
    header.top .nav-signin { display: none; }
    .nav-auth { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .nav-auth .nav-link { margin-top: 0; }
    .nav-auth .cta { text-align: center; }
  }
  @media (max-width: 420px) {
    header.top .brand { font-size: 17px; }
    header.top #siteSubheading { display: none; }
    header.top .cta { padding: 9px 12px; }
    /* Brand + Start free + three 38px controls on one line at 375px: the room comes from
       the gutters and the logo, not from shrinking the touch targets. */
    header.top .inner { padding: 10px 16px; gap: 8px; }
    .nav-right { gap: 4px; }
    header.top .brand-logo { height: 32px; }
  }
  /* The rules above are keyed to the real viewport, which `zoom` does not move - so an
     enlarged page on a phone keeps the full-width brand in a fraction of the room. These
     drop the same things again on the measurement that is actually true there. */
  @media (max-width: 720px) {
    :root[data-a11y-zoom="1"] header.top #siteSubheading { display: none; }
    :root[data-a11y-zoom="1"] header.top .brand-logo { max-width: 100%; object-fit: contain; }
    :root[data-a11y-zoom="1"] header.top .cta { padding: 9px 12px; }
  }

  /* ---------- accessibility controls (app/a11y.py) ---------- */
  .a11y-menu { position: relative; }
  /* padding:0 for the same reason theme.py spells out: /app sets a blanket
     `button { padding: 9px 20px }`, which against a fixed 38px border-box leaves the icon
     a negative content width. Every button inside the panel restates its own box for that
     same reason - inheriting from a page's generic button rule is not survivable here. */
  #a11yBtn { display: inline-flex; align-items: center; justify-content: center;
             width: 38px; height: 38px; padding: 0; border-radius: 9px; cursor: pointer;
             background: transparent; border: 1px solid var(--border); color: var(--muted);
             font-family: inherit; }
  #a11yBtn:hover, #a11yBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--text); }
  #a11yBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Anchored right and clamped to the viewport: at the top of the zoom range on a 360px
     phone an unclamped 288px panel is wider than the screen it is pinned inside, and the
     overhang falls off the left edge where it cannot be reached or scrolled to.
     The clamp cannot be plain `vw`/`vh`, because those resolve against the unzoomed
     viewport just as the media queries do - at 175% they would allow a panel nearly twice
     the room there is. --a11y-vw/--a11y-vh are the real figures, published by the script
     below; the plain units remain as the fallback for before it runs. */
  .a11y-panel {
    position: absolute; top: calc(100% + 8px); right: 0; width: 288px;
    max-width: calc(var(--a11y-vw, 100vw) - 24px); box-sizing: border-box;
    max-height: calc(var(--a11y-vh, 100vh) * 0.76); overflow-y: auto;
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px; z-index: 1310; box-shadow: 0 18px 44px rgba(0,0,0,.45);
    text-align: left; font-size: 14px; color: var(--text);
  }
  /* Hanging the panel off the button only works while there is room to its left. On a
     phone - and sooner still with the text enlarged - there is not, and the overhang goes
     off the left edge of the screen where nothing can scroll to it. Past that point the
     panel stops being a dropdown and spans the viewport instead, pinned under the bar.
     `position: fixed` is measured in the zoomed page's own pixels, so this needs no
     arithmetic; only `top` is set by the script, from where the button actually sits. */
  .a11y-panel.a11y-loose {
    position: fixed; left: 12px; right: 12px; width: auto; max-width: none;
  }
  .a11y-head { display: flex; align-items: center; justify-content: space-between;
               gap: 10px; margin-bottom: 10px; }
  .a11y-head strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
                      color: var(--muted); font-weight: 700; }
  #a11yReset { background: transparent; border: 0; color: var(--accent); cursor: pointer;
               font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 6px;
               border-radius: 6px; width: auto; }
  #a11yReset:hover { background: var(--bg); }

  .a11y-field { margin-bottom: 12px; }
  .a11y-name { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }

  .a11y-step { display: flex; align-items: center; gap: 8px; }
  .a11y-step button {
    width: 38px; height: 34px; padding: 0; flex: 0 0 auto; border-radius: 8px;
    background: transparent; border: 1px solid var(--border); color: var(--text);
    font: inherit; font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
  }
  .a11y-step button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  .a11y-step button:disabled { opacity: .4; cursor: default; }
  #a11yZoomNow { flex: 1; text-align: center; font-variant-numeric: tabular-nums;
                 font-weight: 600; font-size: 13.5px; }

  .a11y-seg { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 8px;
              overflow: hidden; }
  .a11y-seg button {
    flex: 1 1 0; min-width: 0; padding: 8px 4px; background: transparent; border: 0;
    border-right: 1px solid var(--border); color: var(--muted); font: inherit;
    font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 0;
  }
  .a11y-seg button:last-child { border-right: 0; }
  .a11y-seg button:hover { color: var(--text); background: var(--bg); }
  .a11y-seg button[aria-checked="true"] { background: var(--accent); color: #fff; }

  .a11y-switch {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; text-align: left; padding: 8px 6px; margin: 0; border: 0;
    border-radius: 8px; background: transparent; color: var(--text); font: inherit;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
  }
  .a11y-switch:hover { background: var(--bg); }
  .a11y-sw-text { display: block; min-width: 0; }
  .a11y-sw-text em { display: block; font-style: normal; font-size: 11.5px;
                     font-weight: 400; color: var(--muted); margin-top: 1px; }
  .a11y-sw { flex: 0 0 auto; width: 34px; height: 20px; border-radius: 999px;
             background: var(--border); position: relative; transition: background .15s ease; }
  .a11y-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px;
                    height: 14px; border-radius: 50%; background: var(--panel);
                    transition: transform .15s ease; }
  .a11y-switch[aria-pressed="true"] .a11y-sw { background: var(--accent); }
  .a11y-switch[aria-pressed="true"] .a11y-sw::after { transform: translateX(14px); }

  /* ---------- what the preferences actually do ---------- */

  /* Contrast, both directions. !important throughout because branding.js writes the
     palette as inline styles on :root, which a normal declaration cannot outrank. */
  :root[data-a11y-contrast="high"][data-theme="dark"] {
    --bg: #000000 !important; --panel: #0b0c0e !important; --panel-2: #16181c !important;
    --border: #8d97a6 !important; --text: #ffffff !important; --muted: #e3e7ee !important;
    --accent: #84b6ff !important; --accent-text: #9cc6ff !important; --accent-btn: #1a4fa8 !important;
    --good: #72efa0 !important; --warn: #ffd75e !important; --bad: #ff9a90 !important;
    --header-bg: #000000 !important; --tint: rgba(255,255,255,.10) !important;
  }
  :root[data-a11y-contrast="high"][data-theme="light"] {
    --bg: #ffffff !important; --panel: #ffffff !important; --panel-2: #eef0f3 !important;
    --border: #1d222a !important; --text: #000000 !important; --muted: #1d222a !important;
    --accent: #0b3fae !important; --accent-text: #0b3fae !important; --accent-btn: #0b3fae !important;
    --good: #0a5527 !important; --warn: #6a4600 !important; --bad: #9e1006 !important;
    --header-bg: #ffffff !important; --tint: rgba(0,0,0,.07) !important;
  }
  /* Colour is never the only signal once contrast is turned up. */
  :root[data-a11y-contrast="high"] a { text-decoration: underline; }

  :root[data-a11y-contrast="soft"][data-theme="dark"] {
    --bg: #171a20 !important; --panel: #1e222a !important; --panel-2: #242933 !important;
    --border: #2e3440 !important; --text: #c3c9d4 !important; --muted: #868f9e !important;
    --header-bg: rgba(23,26,32,.9) !important;
  }
  :root[data-a11y-contrast="soft"][data-theme="light"] {
    --bg: #eceef3 !important; --panel: #f7f8fb !important; --panel-2: #e6e9ef !important;
    --border: #d7dbe3 !important; --text: #3f4650 !important; --muted: #757d8a !important;
    --header-bg: rgba(247,248,251,.9) !important;
  }

  /* Invert. The counter-filter puts photographs, screenshots and map tiles back the right
     way round, so only the interface flips - which is the point of it over the theme
     toggle, which would take the pictures with it.

     A logo is the exception to the exception: it is drawn to sit on the interface, not to
     be looked at as a picture, so a mark with white lettering for a dark page would be
     counter-inverted to white-on-white and vanish. Logos flip with the interface they
     belong to, and anything else that should can say so with data-a11y-flip. */
  :root[data-a11y-invert="1"] { filter: invert(1) hue-rotate(180deg); }
  :root[data-a11y-invert="1"] img:not(.brand-logo):not([data-a11y-flip]),
  :root[data-a11y-invert="1"] video:not([data-a11y-flip]),
  :root[data-a11y-invert="1"] canvas:not([data-a11y-flip]),
  :root[data-a11y-invert="1"] .leaflet-tile { filter: invert(1) hue-rotate(180deg); }

  /* Readable text. Verdana and Tahoma ship with every desktop OS and have noticeably
     wider apertures than the system UI face; no webfont is fetched for this. The spacing
     is loosened toward WCAG 1.4.12 without going all the way to its values, which are a
     robustness test for a layout rather than a comfortable setting to read at. */
  :root[data-a11y-readable="1"] body,
  :root[data-a11y-readable="1"] button,
  :root[data-a11y-readable="1"] input,
  :root[data-a11y-readable="1"] select,
  :root[data-a11y-readable="1"] textarea {
    font-family: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif !important;
  }
  :root[data-a11y-readable="1"] body { line-height: 1.75 !important; letter-spacing: .022em;
                                       word-spacing: .07em; }
  :root[data-a11y-readable="1"] p, :root[data-a11y-readable="1"] li { line-height: 1.8 !important; }

  :root[data-a11y-links="1"] a { text-decoration: underline !important; text-underline-offset: 2px; }

  /* Near-zero rather than `none`: a zero-length transition still fires transitionend, so
     anything waiting on one to tidy up after itself keeps working. */
  :root[data-a11y-motion="1"] *,
  :root[data-a11y-motion="1"] *::before,
  :root[data-a11y-motion="1"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }

  :root[data-a11y-focus="1"] :focus-visible {
    outline: 3px solid var(--accent) !important; outline-offset: 2px !important;
    border-radius: 3px;
  }

  /* Zoom does not move the media-query breakpoints, so a magnified phone keeps the phone
     layout in less room than it was measured for. These two are what actually ran out of
     it: the form controls' 160px floor, and the header row. */
  @media (max-width: 720px) {
    /* `min-width: auto` is the initial value, and for a flex or grid item it resolves to
       that item's min-content width - measured in unzoomed pixels, while the track it has
       to fit shrank with the zoom. Pinning it to 0 changes nothing anywhere else, because
       for every other box `auto` already resolves to 0, so this is far narrower in effect
       than it looks. `table` is the deliberate exception: `.table-wrap` gives tables a
       min-width on purpose and scrolls them sideways inside their own box. */
    :root[data-a11y-zoom="1"] *:not(table) { min-width: 0 !important; }
    /* A flex item that refuses to shrink keeps its whole label on one line, and the line
       is measured in unzoomed pixels while the room for it is not. */
    :root[data-a11y-zoom="1"] label { flex-shrink: 1 !important; }
    /* The other half of the same problem: a grid or flex track cannot go narrower than its
       content's min-content width, which is the longest single word - unchanged by zoom,
       while the track it has to fit shrank. `anywhere` rather than `break-word` because
       only `anywhere` actually lowers that figure; `static/index.html` leans on the same
       distinction for lead URLs. Mid-word breaks are the lesser evil against a page that
       scrolls sideways. */
    :root[data-a11y-zoom="1"] h1, :root[data-a11y-zoom="1"] h2,
    :root[data-a11y-zoom="1"] h3, :root[data-a11y-zoom="1"] h4,
    :root[data-a11y-zoom="1"] p, :root[data-a11y-zoom="1"] li,
    :root[data-a11y-zoom="1"] td, :root[data-a11y-zoom="1"] th,
    :root[data-a11y-zoom="1"] label { overflow-wrap: anywhere; }
  }