/* ==========================================================================
   CIPIT SuperLens: the visitor's accessibility panel
   1. Panel: self-contained. Every rule is scoped to #cipit-superlens and starts from a reset,
      so a theme's button and heading styles cannot leak in. Sized in px, so the panel
      stays put while the text-size setting rescales the page.
      It follows the CIPIT Elegante design (Arial, sentence-case labels with a hairline,
      tiles joined by 1px hairlines, pill buttons, brand-red fill for what is on) and reads
      the theme's own tokens (--el-*, then the shared --c-*), so it picks up the site's
      colours and font; other themes get the same look from the fallbacks.
   2. Adjustments: classes on <html> set by the head script (includes/panel.php).
   ========================================================================== */

/* 1. Panel ================================================================ */

#cipit-superlens {
    /* Brand colour: the theme's, unless Settings > SuperLens sets one (printed inline). */
    --cipit-superlens-accent: var(--el-brand, var(--c-brand, #c4161c));
    --cipit-superlens-accent-dark: var(--el-brand-dark, var(--c-brand-dark, #9e0f16));
    --cipit-superlens-offset: 16px;
    --cipit-superlens-left: auto;
    --cipit-superlens-right: 16px;
    --cipit-superlens-size: 56px;
    --cipit-superlens-font: var(--el-font, var(--font-sans, Arial, "Helvetica Neue", Helvetica, sans-serif));
    --cipit-superlens-ink: var(--el-ink, #1a1618);
    --cipit-superlens-ink-soft: var(--el-ink-soft, #3a3538);
    --cipit-superlens-body: var(--el-body, #55504f);
    --cipit-superlens-muted: var(--el-muted, #6f696c);
    --cipit-superlens-line: var(--el-line, rgba(0, 0, 0, .09));
    --cipit-superlens-line-strong: var(--el-line-strong, rgba(0, 0, 0, .12));
    --cipit-superlens-paper: #fff;
    --cipit-superlens-page: var(--el-paper, #fbfafa);
    --cipit-superlens-chip: var(--el-chip, #f4f1f2);
    --cipit-superlens-band: var(--el-band, #f7f1f1);
    --cipit-superlens-shadow: var(--el-shadow, 0 1px 1px rgba(20, 10, 12, .03), 0 2px 6px -2px rgba(20, 10, 12, .06));
    --cipit-superlens-y: 50vh;
    font-family: var(--cipit-superlens-font);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: left;
    text-transform: none;
}

/* Undo theme styles on the elements the panel uses; the rules below then style them. */
#cipit-superlens :is(button, h2, h3, output, kbd, section, header, footer, span, form, fieldset, legend, label, input, p, a) {
    all: revert;
    box-sizing: border-box;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

#cipit-superlens .cipit-superlens__icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    vertical-align: middle;
}

#cipit-superlens .cipit-superlens__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* One focus ring for the whole panel: the theme's 2px brand outline. */
#cipit-superlens :is(button, a, input):focus-visible {
    outline: 2px solid var(--cipit-superlens-accent);
    outline-offset: 2px;
}

/* The button ----------------------------------------------------------------- */

#cipit-superlens .cipit-superlens__toggle {
    position: fixed;
    right: var(--cipit-superlens-right);
    bottom: var(--cipit-superlens-offset);
    left: var(--cipit-superlens-left);
    z-index: 99990;
    display: grid;
    place-items: center;
    width: var(--cipit-superlens-size);
    height: var(--cipit-superlens-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cipit-superlens-accent);
    color: #fff;
    /* A white ring with a faint dark edge keeps the button visible over any background,
       including a footer in the same brand colour. */
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(20, 10, 12, .16), 0 10px 24px -10px rgba(20, 10, 12, .45);
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

#cipit-superlens .cipit-superlens__toggle .cipit-superlens__icon {
    width: calc(var(--cipit-superlens-size) * .54);
    height: calc(var(--cipit-superlens-size) * .54);
    stroke-width: 2.2;
}

#cipit-superlens .cipit-superlens__toggle:hover,
#cipit-superlens .cipit-superlens__toggle[aria-expanded="true"] {
    background: var(--cipit-superlens-accent-dark);
}

#cipit-superlens .cipit-superlens__toggle:hover {
    transform: translateY(-2px);
}

#cipit-superlens .cipit-superlens__toggle:active {
    transform: scale(.94);
}

#cipit-superlens .cipit-superlens__toggle:focus-visible {
    outline: 2px solid var(--cipit-superlens-accent);
    outline-offset: 6px;
}

/* A visitor who hid the button gets it back with Alt + A or a #superlens link. */
html[data-superlens-hidden] #cipit-superlens .cipit-superlens__toggle {
    display: none;
}

/* A small dot tells returning visitors that some adjustments are switched on. */
#cipit-superlens .cipit-superlens__toggle.is-active::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--cipit-superlens-ink);
}

/* The panel ------------------------------------------------------------------ */

#cipit-superlens .cipit-superlens__panel {
    position: fixed;
    right: var(--cipit-superlens-right);
    bottom: calc(var(--cipit-superlens-offset) + var(--cipit-superlens-size) + 13px);
    left: var(--cipit-superlens-left);
    z-index: 99991;
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    max-height: calc(100vh - var(--cipit-superlens-offset) - var(--cipit-superlens-size) - 29px);
    max-height: calc(100dvh - var(--cipit-superlens-offset) - var(--cipit-superlens-size) - 29px);
    margin: 0;
    background: var(--cipit-superlens-page);
    border: 1px solid var(--cipit-superlens-line);
    border-radius: 16px;
    box-shadow: 0 16px 40px -20px rgba(20, 10, 12, .28), 0 1px 2px rgba(20, 10, 12, .04);
    color: var(--cipit-superlens-body);
    overflow: hidden;
    animation: cipit-superlens-rise .28s cubic-bezier(.22, 1, .36, 1);
}

/* A hidden button: the panel opens from the bottom corner instead. */
html[data-superlens-hidden] #cipit-superlens .cipit-superlens__panel {
    bottom: var(--cipit-superlens-offset);
}

#cipit-superlens .cipit-superlens__panel[hidden] {
    display: none;
}

@keyframes cipit-superlens-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    #cipit-superlens .cipit-superlens__panel,
    #cipit-superlens .cipit-superlens__toggle,
    #cipit-superlens .cipit-superlens__opt,
    #cipit-superlens .cipit-superlens__btn {
        animation: none;
        transition: none;
    }
}

#cipit-superlens .cipit-superlens__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 16px 16px 26px;
    border-bottom: 1px solid var(--cipit-superlens-line);
    background: var(--cipit-superlens-paper);
}

#cipit-superlens .cipit-superlens__head h2 {
    display: block;
    flex: 1;
    margin: 0;
    color: var(--cipit-superlens-ink);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

/* Round icon buttons, as in the theme's header. */
#cipit-superlens .cipit-superlens__icon-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cipit-superlens-ink-soft);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

#cipit-superlens .cipit-superlens__icon-btn .cipit-superlens__icon {
    width: 20px;
    height: 20px;
}

#cipit-superlens .cipit-superlens__icon-btn:hover,
#cipit-superlens .cipit-superlens__icon-btn[aria-expanded="true"] {
    background: var(--cipit-superlens-chip);
    color: var(--cipit-superlens-ink);
}

#cipit-superlens .cipit-superlens__body {
    flex: 1;
    /* The theme's concentric rings, from the top corner of the options, fading into the page
       colour. They stay put while the options scroll over them. */
    background:
        radial-gradient(circle 440px at 100% 0%, transparent 0, var(--cipit-superlens-page) 100%),
        repeating-radial-gradient(circle at 100% 0%, transparent 0 20px, color-mix(in srgb, var(--cipit-superlens-accent) 7%, transparent) 20px 21px),
        var(--cipit-superlens-page);
    padding: 0 26px 26px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Group labels: sentence case with a hairline running to the edge. */
#cipit-superlens .cipit-superlens__label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 26px 0 13px;
    color: var(--cipit-superlens-muted);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.3;
}

#cipit-superlens .cipit-superlens__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cipit-superlens-line);
}

/* Options: tiles joined by 1px hairlines in one rounded card, like the focus areas. */
#cipit-superlens .cipit-superlens__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid var(--cipit-superlens-line);
    border-radius: 16px;
    background: var(--cipit-superlens-line);
    box-shadow: var(--cipit-superlens-shadow);
}

/* An odd one out (an option switched off in the settings) takes the full row. */
#cipit-superlens .cipit-superlens__grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

#cipit-superlens .cipit-superlens__opt {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 54px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background: var(--cipit-superlens-paper);
    color: var(--cipit-superlens-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

#cipit-superlens .cipit-superlens__opt .cipit-superlens__icon {
    color: var(--cipit-superlens-muted);
    transition: color .18s ease;
}

#cipit-superlens .cipit-superlens__opt:hover {
    background: var(--cipit-superlens-page);
}

#cipit-superlens .cipit-superlens__opt[aria-pressed="true"] {
    background: var(--cipit-superlens-accent);
    color: #fff;
}

#cipit-superlens .cipit-superlens__opt[aria-pressed="true"]:hover {
    background: var(--cipit-superlens-accent-dark);
}

#cipit-superlens .cipit-superlens__opt[aria-pressed="true"] .cipit-superlens__icon {
    color: currentColor;
}

/* The card clips its tiles, so their ring sits inside. */
#cipit-superlens .cipit-superlens__opt:focus-visible {
    outline-offset: -5px;
}

#cipit-superlens .cipit-superlens__opt[aria-pressed="true"]:focus-visible {
    outline-color: #fff;
}

/* Text steppers: rows in one card. */
#cipit-superlens .cipit-superlens__steppers {
    overflow: hidden;
    border: 1px solid var(--cipit-superlens-line);
    border-radius: 16px;
    background: var(--cipit-superlens-paper);
    box-shadow: var(--cipit-superlens-shadow);
}

#cipit-superlens .cipit-superlens__stepper {
    display: grid;
    grid-template-columns: 1fr 36px 68px 36px;
    align-items: center;
    gap: 4px;
    padding: 9px 12px 9px 16px;
}

#cipit-superlens .cipit-superlens__stepper + .cipit-superlens__stepper {
    border-top: 1px solid var(--cipit-superlens-line);
}

#cipit-superlens .cipit-superlens__stepper-label {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--cipit-superlens-ink);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
}

#cipit-superlens .cipit-superlens__stepper-label .cipit-superlens__icon {
    color: var(--cipit-superlens-muted);
}

#cipit-superlens .cipit-superlens__stepper button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cipit-superlens-line-strong);
    border-radius: 50%;
    background: var(--cipit-superlens-paper);
    color: var(--cipit-superlens-ink-soft);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#cipit-superlens .cipit-superlens__stepper button .cipit-superlens__icon {
    width: 14px;
    height: 14px;
}

#cipit-superlens .cipit-superlens__stepper button:hover:not(:disabled) {
    border-color: var(--cipit-superlens-accent);
    background: var(--cipit-superlens-accent);
    color: #fff;
}

#cipit-superlens .cipit-superlens__stepper button:disabled {
    border-color: var(--cipit-superlens-line);
    color: var(--cipit-superlens-line-strong);
    cursor: default;
}

#cipit-superlens .cipit-superlens__stepper output {
    display: block;
    color: var(--cipit-superlens-muted);
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

#cipit-superlens .cipit-superlens__stepper.is-changed output {
    color: var(--cipit-superlens-accent);
}

/* Pill buttons: outline (Reset, Cancel, Jump to) and primary. */
#cipit-superlens .cipit-superlens__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid color-mix(in srgb, var(--cipit-superlens-accent) 30%, transparent);
    border-radius: 20px;
    background: transparent;
    color: var(--cipit-superlens-accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

#cipit-superlens .cipit-superlens__btn[hidden] {
    display: none;
}

#cipit-superlens .cipit-superlens__btn .cipit-superlens__icon {
    width: 16px;
    height: 16px;
}

#cipit-superlens .cipit-superlens__btn:hover,
#cipit-superlens .cipit-superlens__btn--primary {
    border-color: var(--cipit-superlens-accent);
    background: var(--cipit-superlens-accent);
    color: #fff;
}

#cipit-superlens .cipit-superlens__btn--primary:hover {
    border-color: var(--cipit-superlens-accent-dark);
    background: var(--cipit-superlens-accent-dark);
}

/* Jump to: small neutral pills, like the theme's filter pills. */
#cipit-superlens .cipit-superlens__jump[hidden] {
    display: none;
}

#cipit-superlens .cipit-superlens__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#cipit-superlens .cipit-superlens__chips .cipit-superlens__btn {
    height: 36px;
    padding: 0 16px;
    border-color: var(--cipit-superlens-line-strong);
    background: var(--cipit-superlens-paper);
    color: var(--cipit-superlens-ink-soft);
    font-size: 13.5px;
    box-shadow: 0 1px 2px rgba(20, 10, 12, .05);
}

#cipit-superlens .cipit-superlens__chips .cipit-superlens__btn:hover {
    border-color: var(--cipit-superlens-accent);
    background: var(--cipit-superlens-accent);
    color: #fff;
}

/* How-to line above an option group, shown while that option is on. */
#cipit-superlens .cipit-superlens__note {
    display: flex;
    gap: 8px;
    margin: 0 0 13px;
    padding: 11px 13px;
    border-radius: 10px;
    background: var(--cipit-superlens-chip);
    color: var(--cipit-superlens-body);
    font-size: 13.5px;
    line-height: 1.5;
}

#cipit-superlens .cipit-superlens__note[hidden] {
    display: none;
}

/* Just switched on: blinks so it is noticed (a steady outline when motion is reduced). */
#cipit-superlens .cipit-superlens__note.is-flash {
    outline: 2px solid var(--cipit-superlens-accent);
    outline-offset: 2px;
    animation: cipit-superlens-blink 0.6s ease-in-out 3;
}

@keyframes cipit-superlens-blink {
    50% {
        outline-color: transparent;
        background: color-mix(in srgb, var(--cipit-superlens-accent) 14%, var(--cipit-superlens-chip));
    }
}

@media (prefers-reduced-motion: reduce) {
    #cipit-superlens .cipit-superlens__note.is-flash {
        animation: none;
    }
}

#cipit-superlens .cipit-superlens__note .cipit-superlens__icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--cipit-superlens-muted);
}

/* Hide the button: asks for how long, in place of the options. */
#cipit-superlens .cipit-superlens__hide {
    display: block;
    padding: 21px 26px 26px;
    background:
        radial-gradient(circle 440px at 100% 0%, transparent 0, var(--cipit-superlens-band) 100%),
        repeating-radial-gradient(circle at 100% 0%, transparent 0 20px, color-mix(in srgb, var(--cipit-superlens-accent) 7%, transparent) 20px 21px),
        var(--cipit-superlens-band);
}

#cipit-superlens .cipit-superlens__hide[hidden],
#cipit-superlens .cipit-superlens__hide:not([hidden]) ~ .cipit-superlens__body,
#cipit-superlens .cipit-superlens__hide:not([hidden]) ~ .cipit-superlens__foot {
    display: none;
}

#cipit-superlens .cipit-superlens__hide fieldset {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    border: 0;
}

#cipit-superlens .cipit-superlens__hide legend {
    margin: 0 0 4px;
    padding: 0;
    color: var(--cipit-superlens-ink);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.015em;
}

#cipit-superlens .cipit-superlens__hide label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cipit-superlens-ink);
    font-size: 14.5px;
    cursor: pointer;
}

#cipit-superlens .cipit-superlens__hide input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cipit-superlens-accent);
}

#cipit-superlens .cipit-superlens__hide p {
    display: block;
    margin: 16px 0 21px;
    color: var(--cipit-superlens-body);
    font-size: 13.5px;
    line-height: 1.55;
}

#cipit-superlens .cipit-superlens__hide-actions {
    display: flex;
    gap: 8px;
}

#cipit-superlens .cipit-superlens__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 13px;
    padding: 13px 26px;
    border-top: 1px solid var(--cipit-superlens-line);
    background: var(--cipit-superlens-paper);
}

#cipit-superlens .cipit-superlens__statement {
    color: var(--cipit-superlens-accent);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}

#cipit-superlens .cipit-superlens__statement:hover {
    color: var(--cipit-superlens-accent-dark);
}

#cipit-superlens .cipit-superlens__hint {
    color: var(--cipit-superlens-muted);
    font-size: 12.5px;
    font-weight: 600;
}

#cipit-superlens .cipit-superlens__hint kbd {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--cipit-superlens-chip);
    color: var(--cipit-superlens-ink-soft);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

/* Phones: a bottom sheet above the button. */
@media (max-width: 520px) {
    #cipit-superlens .cipit-superlens__panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100dvh - var(--cipit-superlens-offset) - var(--cipit-superlens-size) - 21px);
    }

    #cipit-superlens .cipit-superlens__head {
        padding-left: 21px;
    }

    #cipit-superlens .cipit-superlens__body {
        padding-inline: 16px;
    }

    #cipit-superlens .cipit-superlens__hide,
    #cipit-superlens .cipit-superlens__foot {
        padding-inline: 21px;
    }

    #cipit-superlens .cipit-superlens__opt {
        padding-inline: 13px;
        font-size: 13.5px;
    }

    #cipit-superlens .cipit-superlens__hint {
        display: none;
    }
}

@media print {
    #cipit-superlens {
        display: none !important;
    }
}

/* 2. Adjustments ========================================================== */

/* Everything on the page except the panel. */

/* Text size: zoom the page's content, like the browser's own zoom. Unlike scaling the root
   font size, this also enlarges themes sized in px, and the layout reflows to fit. */
html.cipit-superlens-text-1 body > :not(#cipit-superlens) { zoom: 1.12; }
html.cipit-superlens-text-2 body > :not(#cipit-superlens) { zoom: 1.25; }
html.cipit-superlens-text-3 body > :not(#cipit-superlens) { zoom: 1.4; }
html.cipit-superlens-text-4 body > :not(#cipit-superlens) { zoom: 1.6; }

/* Line height and letter spacing on running text only, not buttons or icons. */
html.cipit-superlens-lh-1 body :is(p, li, dd, dt, blockquote, td, th, figcaption, label):not(#cipit-superlens *) {
    line-height: 1.9 !important;
}

html.cipit-superlens-lh-2 body :is(p, li, dd, dt, blockquote, td, th, figcaption, label):not(#cipit-superlens *) {
    line-height: 2.2 !important;
}

html.cipit-superlens-ls-1 body :is(p, li, dd, dt, blockquote, td, th, figcaption, label, h1, h2, h3, h4, h5, h6):not(#cipit-superlens *) {
    letter-spacing: .05em !important;
    word-spacing: .12em !important;
}

html.cipit-superlens-ls-2 body :is(p, li, dd, dt, blockquote, td, th, figcaption, label, h1, h2, h3, h4, h5, h6):not(#cipit-superlens *) {
    letter-spacing: .1em !important;
    word-spacing: .2em !important;
}

html.cipit-superlens-align body :is(p, li, dd, blockquote, td, figcaption, h1, h2, h3, h4, h5, h6):not(#cipit-superlens *) {
    text-align: left !important;
}

html.cipit-superlens-links body a:not(#cipit-superlens *) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em !important;
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

html.cipit-superlens-headings body :is(h1, h2, h3, h4, h5, h6):not(#cipit-superlens *) {
    outline: 2px solid var(--cipit-superlens-headings, var(--el-brand, var(--c-brand, #c4161c)));
    outline-offset: 4px;
    border-radius: 2px;
}

/* High contrast: a contrast filter on the colour overlay (works with any theme), underlined
   links, and darker colour tokens on the CIPIT themes, which use these names. */
html.cipit-superlens-contrast {
    --c-ink: #000;
    --c-body: #000;
    --c-muted: #1b1d22;
    --c-line: #6b6d73;
    --c-line-strong: #000;
    --cipit-superlens-contrast: 1.3;
}

html.cipit-superlens-contrast body a:not(#cipit-superlens *) {
    text-decoration: underline;
}

/* Colour filters sit on an overlay rather than on <html>, since a filter on the page would
   break sticky headers and every fixed element. One overlay combines them. */
#cipit-superlens .cipit-superlens__filter {
    position: fixed;
    inset: 0;
    z-index: 99980;
    display: none;
    pointer-events: none;
    -webkit-backdrop-filter: contrast(var(--cipit-superlens-contrast, 1)) saturate(var(--cipit-superlens-saturate, 1));
    backdrop-filter: contrast(var(--cipit-superlens-contrast, 1)) saturate(var(--cipit-superlens-saturate, 1));
}

html.cipit-superlens-mono { --cipit-superlens-saturate: 0; }
html.cipit-superlens-desat { --cipit-superlens-saturate: .35; }

html:is(.cipit-superlens-mono, .cipit-superlens-desat, .cipit-superlens-contrast) #cipit-superlens .cipit-superlens__filter {
    display: block;
}

html.cipit-superlens-images body :is(img, picture, video, svg image):not(#cipit-superlens *) {
    visibility: hidden !important;
}

html.cipit-superlens-images body [style*="background-image"]:not(#cipit-superlens *) {
    background-image: none !important;
}

/* Reading guide: a bar under the pointer. Reading mask: dims all but a band around it. */
#cipit-superlens .cipit-superlens__guide,
#cipit-superlens .cipit-superlens__mask {
    display: none;
    pointer-events: none;
}

html.cipit-superlens-guide #cipit-superlens .cipit-superlens__guide {
    position: fixed;
    top: calc(var(--cipit-superlens-y) + 14px);
    right: 0;
    left: 0;
    z-index: 99985;
    display: block;
    height: 6px;
    background: #1b1d22;
    border-block: 2px solid #ffdd00;
}

html.cipit-superlens-mask #cipit-superlens .cipit-superlens__mask {
    display: block;
}

#cipit-superlens .cipit-superlens__mask div {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 99985;
    background: rgba(22, 23, 27, .6);
}

#cipit-superlens .cipit-superlens__mask div:first-child {
    top: 0;
    height: max(0px, calc(var(--cipit-superlens-y) - 60px));
}

#cipit-superlens .cipit-superlens__mask div:last-child {
    top: calc(var(--cipit-superlens-y) + 60px);
    bottom: 0;
}

html.cipit-superlens-cursor,
html.cipit-superlens-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11.5-6.6.9 3.9 7.3-3 1.6-3.9-7.4L4 20.5z' fill='%23000' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}

html.cipit-superlens-cursor :is(a, button, [role="button"], label, summary, select),
html.cipit-superlens-cursor :is(a, button, [role="button"], label, summary, select) * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10l.1-1.4a1.5 1.5 0 0 1 3 .2V11l.2-.9a1.5 1.5 0 0 1 2.9.6V12l.3-.5a1.4 1.4 0 0 1 2.5 1V16a6 6 0 0 1-6 6h-1.5a6 6 0 0 1-4.8-2.4l-3.4-4.5a1.5 1.5 0 0 1 2.3-1.9L9 13z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 16 4, pointer !important;
}

/* Strong focus: the GOV.UK-style yellow and black ring, visible on any background. */
html.cipit-superlens-focus :focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 6px #ffdd00 !important;
}

html.cipit-superlens-motion *,
html.cipit-superlens-motion *::before,
html.cipit-superlens-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Scroll-reveal effects start content hidden; show it straight away (the CIPIT themes'
   .reveal and the common AOS library's data-aos). */
html.cipit-superlens-motion :is(.reveal, [data-aos]) {
    opacity: 1 !important;
    transform: none !important;
}

/* Readable and dyslexia fonts (bundled, declared in includes/panel.php). Icon fonts are left
   alone: they draw icons from letters, and a text font would turn them into gibberish. */
html:is(.cipit-superlens-readable, .cipit-superlens-dyslexic) body :not(#cipit-superlens, #cipit-superlens *, i, svg, svg *, code, pre, kbd, samp, .dashicons, .fa, .fas, .far, .fab, .fal, [class*="fa-"], [class*="icon"], [class*="material-symbols"], [class*="material-icons"], [aria-hidden="true"]) {
    font-family: var(--cipit-superlens-font) !important;
}

html.cipit-superlens-readable {
    --cipit-superlens-font: "CIPIT SuperLens Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
}

html.cipit-superlens-dyslexic {
    --cipit-superlens-font: "CIPIT SuperLens OpenDyslexic", "Comic Sans MS", Verdana, sans-serif;
}

html.cipit-superlens-bold body :is(p, li, dd, dt, blockquote, td, th, figcaption, label, span, a, em, small, div):not(#cipit-superlens, #cipit-superlens *) {
    font-weight: 700 !important;
}

/* Highlight on hover: an outline on whatever the pointer or keyboard is on. */
html.cipit-superlens-hover body :is(p, li, h1, h2, h3, h4, h5, h6, a, button, img, figure, td, th, input, select, textarea, label, blockquote, summary, [role="button"]):not(#cipit-superlens *):is(:hover, :focus-visible) {
    outline: 3px dashed var(--cipit-superlens-headings, var(--el-brand, var(--c-brand, #c4161c))) !important;
    outline-offset: 3px !important;
}

/* Dark and light contrast: one background and text colour for the whole page, with links and
   buttons picked out. Pictures, video and icons keep their own colours. */
html.cipit-superlens-dark {
    color-scheme: dark;
    --cipit-superlens-bg: #121212;
    --cipit-superlens-fg: #f2f2f2;
    --cipit-superlens-link: #ffd84d;
    --cipit-superlens-edge: #8a8a8a;
}

html.cipit-superlens-light {
    color-scheme: light;
    --cipit-superlens-bg: #fff;
    --cipit-superlens-fg: #000;
    --cipit-superlens-link: #0645ad;
    --cipit-superlens-edge: #555;
}

html:is(.cipit-superlens-dark, .cipit-superlens-light),
html:is(.cipit-superlens-dark, .cipit-superlens-light) body,
html:is(.cipit-superlens-dark, .cipit-superlens-light) body :not(#cipit-superlens, #cipit-superlens *, img, picture, video, canvas, iframe, svg, svg *) {
    background-color: var(--cipit-superlens-bg) !important;
    color: var(--cipit-superlens-fg) !important;
    border-color: var(--cipit-superlens-edge) !important;
    text-shadow: none !important;
}

/* Set by superlens.js on elements that had no background of their own. */
html:is(.cipit-superlens-dark, .cipit-superlens-light) body [data-superlens-clear]:not(#cipit-superlens *) {
    background-color: transparent !important;
}

/* Set by superlens.js on gradient-only backgrounds (no picture), which would fade into the
   contrast background. */
html:is(.cipit-superlens-dark, .cipit-superlens-light) body [data-superlens-flat]:not(#cipit-superlens *) {
    background-image: none !important;
}

html:is(.cipit-superlens-dark, .cipit-superlens-light) body :is(a, a *):not(#cipit-superlens *) {
    color: var(--cipit-superlens-link) !important;
}

html:is(.cipit-superlens-dark, .cipit-superlens-light) body a:not(#cipit-superlens *) {
    text-decoration: underline !important;
}

/* Buttons and fields that had a fill of their own lose it, so an outline keeps their shape. */
html:is(.cipit-superlens-dark, .cipit-superlens-light) body :is(button, input, select, textarea, [role="button"]):not(:empty, [data-superlens-clear], [type="checkbox"], [type="radio"], #cipit-superlens *),
html:is(.cipit-superlens-dark, .cipit-superlens-light) body :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [data-superlens-bare], #cipit-superlens *),
html:is(.cipit-superlens-dark, .cipit-superlens-light) body [data-superlens-frame]:not(#cipit-superlens *) {
    border: 1px solid var(--cipit-superlens-fg) !important;
}

/* A borderless field inside a bordered wrapper (set by superlens.js): the wrapper stays its
   outline rather than a square box appearing inside a rounded one, and shows focus for it. */
html:is(.cipit-superlens-dark, .cipit-superlens-light) body [data-superlens-frame]:not(#cipit-superlens *):has(> [data-superlens-bare]:focus) {
    outline: 2px solid var(--cipit-superlens-link) !important;
    outline-offset: 2px !important;
}

/* Read aloud: the passage being read. */
html.cipit-superlens-speak .cipit-superlens-speaking {
    outline: 3px solid #ffdd00 !important;
    outline-offset: 2px !important;
    background-color: rgba(255, 221, 0, .18) !important;
}

html.cipit-superlens-speak body :is(p, li, h1, h2, h3, h4, h5, h6, td, th, dt, dd, figcaption, blockquote):not(#cipit-superlens *):hover {
    cursor: pointer;
}

/* Keyboard navigation: whatever the H, L, M, F, B and G keys land on. */
html.cipit-superlens-kbnav [data-superlens-nav]:focus {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #ffdd00 !important;
}

/* Text magnifier bubble. */
#cipit-superlens .cipit-superlens__magnifier {
    position: fixed;
    z-index: 99995;
    max-width: min(520px, calc(100vw - 16px));
    padding: 13px 18px;
    border-radius: 10px;
    background: var(--el-dark-deep, #1a1618);
    box-shadow: 0 16px 40px -20px rgba(20, 10, 12, .45);
    color: #fff;
    font-family: var(--cipit-superlens-font);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    pointer-events: none;
    overflow-wrap: anywhere;
}

#cipit-superlens .cipit-superlens__magnifier[hidden] {
    display: none;
}