/* TRA Reading Tools 0.4.2 */

/* ==========================================================================
   Bundled fonts (SIL Open Font Licence, see assets/fonts). Browsers only
   download these when a reader picks the typeface, so they cost nothing
   otherwise. A locally installed copy is preferred where one exists.
   ========================================================================== */
@font-face { font-family: "TRA Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TRA Atkinson Hyperlegible"; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TRA OpenDyslexic"; src: url("../fonts/opendyslexic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TRA OpenDyslexic"; src: url("../fonts/opendyslexic-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ==========================================================================
   Article width
   ========================================================================== */
.tra-reader-root {
    box-sizing: border-box;
    margin-inline: auto !important;
    transition: width 160ms ease, max-width 160ms ease;
}
.tra-reader-root.tra-width-narrow { width: 42rem !important; max-width: calc(100vw - 2rem) !important; }
.tra-reader-root.tra-width-default { width: 54rem !important; max-width: calc(100vw - 2rem) !important; }
.tra-reader-root.tra-width-wide { width: 66rem !important; max-width: calc(100vw - 2rem) !important; }

/* Typography and spacing are written as inline !important styles on article
   text nodes by reader.js, because the theme sets its own with !important. */

/* ==========================================================================
   Colour schemes
   Each scheme defines the same tokens. The same rule also paints the preview
   swatches in the panel, so swatches can never drift from the real scheme.
   All values are checked for WCAG contrast by tests/check_palettes.py.
   ========================================================================== */
html[data-tra-scheme="light"], .tra-swatch[data-scheme="light"] {
    --tra-bg: #ffffff; --tra-fg: #1b1b1b; --tra-surface: #f1f1f1; --tra-border: #767676; --tra-muted: #5e5e5e;
    --tra-link: #0b57b8; --tra-visited: #6a3d9a; --tra-mark-bg: #fff176; --tra-mark-fg: #000000; --tra-focus: #0b57b8;
}
html[data-tra-scheme="cream"], .tra-swatch[data-scheme="cream"] {
    --tra-bg: #f8f1e3; --tra-fg: #2b2418; --tra-surface: #eee4d0; --tra-border: #85755c; --tra-muted: #62553f;
    --tra-link: #1d4f91; --tra-visited: #7a3b69; --tra-mark-bg: #f2d46b; --tra-mark-fg: #000000; --tra-focus: #1d4f91;
}
html[data-tra-scheme="dark"], .tra-swatch[data-scheme="dark"] {
    --tra-bg: #16181c; --tra-fg: #e6e3dd; --tra-surface: #22252b; --tra-border: #737b87; --tra-muted: #a4a8af;
    --tra-link: #8cb8ff; --tra-visited: #d2a8ff; --tra-mark-bg: #6b5a00; --tra-mark-fg: #fff4c2; --tra-focus: #8cb8ff;
}
/* Dim: lower luminance and lower (still AAA) contrast for glare and light sensitivity */
html[data-tra-scheme="dim"], .tra-swatch[data-scheme="dim"] {
    --tra-bg: #2a2926; --tra-fg: #cfc9bd; --tra-surface: #34332f; --tra-border: #7f7a71; --tra-muted: #a39d91;
    --tra-link: #9fbbdc; --tra-visited: #c9a8cf; --tra-mark-bg: #5a4f1e; --tra-mark-fg: #f1e7c4; --tra-focus: #9fbbdc;
}
html[data-tra-scheme="hc-light"], .tra-swatch[data-scheme="hc-light"] {
    --tra-bg: #ffffff; --tra-fg: #000000; --tra-surface: #ffffff; --tra-border: #000000; --tra-muted: #3b3b3b;
    --tra-link: #0000b8; --tra-visited: #8a1a00; --tra-mark-bg: #ffff00; --tra-mark-fg: #000000; --tra-focus: #0000b8;
}
html[data-tra-scheme="hc-dark"], .tra-swatch[data-scheme="hc-dark"] {
    --tra-bg: #000000; --tra-fg: #ffffff; --tra-surface: #000000; --tra-border: #ffffff; --tra-muted: #c8c8c8;
    --tra-link: #ffe14d; --tra-visited: #d9b8ff; --tra-mark-bg: #ffff00; --tra-mark-fg: #000000; --tra-focus: #ffe14d;
}
/* Nightscape: deep indigo sky, lilac text, soft violet and pink links */
html[data-tra-scheme="nightscape"], .tra-swatch[data-scheme="nightscape"] {
    --tra-bg: #17132b; --tra-fg: #e6e0f5; --tra-surface: #221c3d; --tra-border: #7a6fa3; --tra-muted: #b3a9d1;
    --tra-link: #b9a3ff; --tra-visited: #f29bd0; --tra-mark-bg: #5c3f9e; --tra-mark-fg: #ffffff; --tra-focus: #b9a3ff;
}
/* Blossom: pale pink paper, plum text, raspberry links */
html[data-tra-scheme="blossom"], .tra-swatch[data-scheme="blossom"] {
    --tra-bg: #fff1f6; --tra-fg: #3b1d2c; --tra-surface: #fbe1ec; --tra-border: #a86d88; --tra-muted: #7a4a61;
    --tra-link: #b0226a; --tra-visited: #6b3fa0; --tra-mark-bg: #ffc2dc; --tra-mark-fg: #000000; --tra-focus: #b0226a;
}
/* Matrix: green phosphor on black. Links differ from text by brightness
   only, so they are always underlined in this scheme (see early.js). */
html[data-tra-scheme="matrix"], .tra-swatch[data-scheme="matrix"] {
    --tra-bg: #020a04; --tra-fg: #4dff7a; --tra-surface: #06170b; --tra-border: #1f8a3f; --tra-muted: #2fbf5a;
    --tra-link: #d4ffe0; --tra-visited: #3fae62; --tra-mark-bg: #0f5c28; --tra-mark-fg: #d4ffe0; --tra-focus: #d4ffe0;
}
html[data-tra-scheme="matrix"] body :not(#tra-x):not(.tra-reader-toolbar *) { text-shadow: 0 0 0.35em rgb(77 255 122 / 25%) !important; }

/* ==========================================================================
   Colour vision palettes
   These replace link, visited-link, highlight and focus colours only, so they
   work on top of any scheme, including the site's own colours. Custom colours
   set by the reader are inline on <html> and take precedence.

   rg (protan/deutan): the default blue/purple link pair is close to identical
   without red cones, so links use blue and visited links use orange-brown.
   by (tritan): blue and green merge and yellow fades, so links use crimson
   and visited links teal, with a pink highlight instead of yellow.
   mono: no reliance on hue at all. Links take the text colour and are marked
   by underline; visited links get a lighter underline; highlights are outlined.
   ========================================================================== */
html[data-tra-vision="rg"][data-tra-tone="light"] {
    --tra-link: #005a9c; --tra-visited: #8a3a00; --tra-mark-bg: #ffe066; --tra-mark-fg: #000000; --tra-focus: #005a9c;
}
html[data-tra-vision="rg"][data-tra-tone="dark"] {
    --tra-link: #62aef0; --tra-visited: #f5a65b; --tra-mark-bg: #ffe066; --tra-mark-fg: #000000; --tra-focus: #62aef0;
}
html[data-tra-vision="by"][data-tra-tone="light"] {
    --tra-link: #b0004a; --tra-visited: #005c66; --tra-mark-bg: #ffc4d2; --tra-mark-fg: #000000; --tra-focus: #b0004a;
}
html[data-tra-vision="by"][data-tra-tone="dark"] {
    --tra-link: #ff86ae; --tra-visited: #52cfd8; --tra-mark-bg: #8a2848; --tra-mark-fg: #ffffff; --tra-focus: #ff86ae;
}
html[data-tra-vision="mono"] {
    --tra-link: var(--tra-fg, currentColor);
    --tra-visited: var(--tra-fg, currentColor);
    --tra-focus: var(--tra-fg, currentColor);
}

html[data-tra-tone="light"][data-tra-paint] { color-scheme: light; }
html[data-tra-tone="dark"][data-tra-paint] { color-scheme: dark; }

/* ==========================================================================
   Painting the page
   data-tra-paint is "page" (whole page) or "article" (article only), set by
   early.js. :not(#tra-x) adds ID-level specificity so these rules beat theme
   rules, including theme rules marked !important. Media, SVG graphics, the
   admin bar, the reading panel and anything the site owner lists under
   "Keep original colours" are left alone.
   ========================================================================== */
html[data-tra-paint="page"] {
    background-color: var(--tra-bg) !important;
}
html[data-tra-paint="page"] body:not(#tra-x),
html[data-tra-paint="article"] .tra-reader-root:not(#tra-x) {
    background-color: var(--tra-bg) !important;
    color: var(--tra-fg) !important;
}
html[data-tra-paint="article"] .tra-reader-root:not(#tra-x) {
    padding: 1rem 1.25rem !important;
    border-radius: 0.5rem;
}
html[data-tra-paint="page"] body :not(#tra-x):not(img, picture, video, audio, canvas, iframe, object, embed, svg, svg *, mark, #wpadminbar, #wpadminbar *, .tra-keep-colours, .tra-keep-colours *, .tra-reader-toolbar, .tra-reader-toolbar *, .tra-ruler, .tra-ruler *),
html[data-tra-paint="article"] .tra-reader-root :not(#tra-x):not(img, picture, video, audio, canvas, iframe, object, embed, svg, svg *, mark, .tra-keep-colours, .tra-keep-colours *, .tra-reader-toolbar, .tra-reader-toolbar *) {
    background-color: transparent !important;
    color: inherit !important;
    border-color: var(--tra-border) !important;
    text-shadow: none !important;
}

/* Form controls need a visible surface once their theme background is removed */
html[data-tra-paint="page"] body :is(button, input, select, textarea):not(#tra-x):not(.tra-keep-colours *, .tra-reader-toolbar *, #wpadminbar *),
html[data-tra-paint="article"] .tra-reader-root :is(button, input, select, textarea):not(#tra-x):not(.tra-keep-colours *, .tra-reader-toolbar *) {
    background-color: var(--tra-surface) !important;
    color: var(--tra-fg) !important;
    border: 1px solid var(--tra-border) !important;
}
html[data-tra-paint="page"] body :is(pre, code, kbd, samp):not(#tra-x):not(.tra-keep-colours *),
html[data-tra-paint="article"] .tra-reader-root :is(pre, code, kbd, samp):not(#tra-x):not(.tra-keep-colours *) {
    background-color: var(--tra-surface) !important;
}
html[data-tra-paint] ::placeholder { color: var(--tra-muted) !important; opacity: 1; }
html[data-tra-paint] ::selection { background-color: var(--tra-mark-bg, var(--tra-fg)); color: var(--tra-mark-fg, var(--tra-bg)); }

/* ==========================================================================
   Links, highlights and focus
   ========================================================================== */
html[data-tra-linkcolour="page"] body a[href]:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *, #wpadminbar *),
html[data-tra-linkcolour="article"] .tra-reader-root a[href]:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *) {
    color: var(--tra-link) !important;
    text-decoration-color: currentColor !important;
}
html[data-tra-linkcolour="page"] body a[href]:visited:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *, #wpadminbar *),
html[data-tra-linkcolour="article"] .tra-reader-root a[href]:visited:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *) {
    color: var(--tra-visited) !important;
    text-decoration-color: currentColor !important;
}
html[data-tra-vision="mono"][data-tra-linkcolour="page"] body a[href]:visited:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *, #wpadminbar *),
html[data-tra-vision="mono"][data-tra-linkcolour="article"] .tra-reader-root a[href]:visited:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *) {
    text-decoration-color: var(--tra-muted, GrayText) !important;
}

html[data-tra-underline="page"] body a[href]:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *, #wpadminbar *),
html[data-tra-underline="article"] .tra-reader-root a[href]:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *) {
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-thickness: max(1px, 0.08em) !important;
    text-underline-offset: 0.18em !important;
}
html[data-tra-vision="mono"][data-tra-underline] a[href]:not(#tra-x):not(.tra-paragraph-link, .tra-keep-colours *, #wpadminbar *) {
    text-decoration-thickness: max(2px, 0.12em) !important;
}

html[data-tra-linkcolour="page"] body mark:not(#tra-x):not(.tra-keep-colours *),
html[data-tra-linkcolour="article"] .tra-reader-root mark:not(#tra-x):not(.tra-keep-colours *) {
    background-color: var(--tra-mark-bg) !important;
    color: var(--tra-mark-fg) !important;
}
html[data-tra-vision="mono"] body mark:not(#tra-x):not(.tra-keep-colours *) {
    background-color: transparent !important;
    color: inherit !important;
    outline: 2px solid currentColor;
    outline-offset: 1px;
    font-weight: 700;
}

html[data-tra-linkcolour="page"] body :focus-visible:not(#tra-x):not(.tra-reader-toolbar *, #wpadminbar *),
html[data-tra-linkcolour="article"] .tra-reader-root :focus-visible:not(#tra-x):not(.tra-reader-toolbar *) {
    outline: 3px solid var(--tra-focus) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   Reduced motion (reader choice). The plugin's own transitions also respect
   the operating-system setting below.
   ========================================================================== */
html[data-tra-motion="reduce"] *,
html[data-tra-motion="reduce"] *::before,
html[data-tra-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}
html[data-tra-motion="reduce"] { scroll-behavior: auto !important; }

/* ==========================================================================
   Reading settings panel
   Uses the reader's colours when a scheme is active, otherwise system colours.
   ========================================================================== */
.tra-reader-toolbar.tra-reader-toolbar {
    --p-bg: var(--tra-bg, Canvas);
    --p-fg: var(--tra-fg, CanvasText);
    --p-surface: var(--tra-surface, Canvas);
    --p-border: var(--tra-border, #767676);
    --p-muted: var(--tra-muted, GrayText);
    --p-accent: var(--tra-focus, CanvasText);
    --p-accent-fg: var(--tra-bg, Canvas);
    position: relative;
    margin: 0 0 1rem;
    font: 400 0.9375rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    text-align: left;
}
.tra-reader-toolbar *, .tra-reader-toolbar *::before, .tra-reader-toolbar *::after { box-sizing: border-box; }

/* Panel text is not selectable, so selecting in the panel cannot trigger
   article quote-sharing tools. Colour codes and the settings code stay
   selectable because they are form fields. */
.tra-reader-toolbar { -webkit-user-select: none; user-select: none; }
.tra-reader-toolbar input,
.tra-reader-toolbar textarea { -webkit-user-select: text; user-select: text; }

/* The panel sits inside the article, so theme rules such as
   ".entry-content p { color: … !important }" would otherwise reach it. */
.tra-reader-toolbar .tra-reader-panel :is(p, span:not(.tra-swatch), label, summary, caption, th, td) {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-align: left !important;
    text-transform: none !important;
}
.tra-reader-toolbar .tra-reader-panel p.tra-panel-title { font-size: 1rem !important; }
.tra-reader-toolbar .tra-reader-panel p.tra-hint,
.tra-reader-toolbar .tra-reader-panel p.tra-status { font-size: 0.8125rem !important; }
.tra-reader-toolbar .tra-reader-panel p.tra-hint { color: var(--p-muted) !important; }

.tra-reader-toolbar .tra-reader-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}
.tra-reader-toolbar .tra-reader-toggle strong { font-weight: 700; }

.tra-reader-toolbar .tra-reader-panel {
    position: absolute;
    z-index: 100000;
    top: calc(100% + 0.5rem);
    left: 0;
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(80vh, 44rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 1rem 1rem;
    border: 1px solid var(--p-border);
    border-radius: 0.6rem;
    color: var(--p-fg) !important;
    background: var(--p-bg) !important;
    box-shadow: 0 0.6rem 2rem rgb(0 0 0 / 30%);
}
.tra-reader-toolbar .tra-reader-panel[hidden] { display: none; }

.tra-reader-panel .tra-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0 0.5rem;
}
.tra-reader-panel .tra-panel-title { margin: 0; font-size: 1rem; font-weight: 700; color: inherit; }
.tra-reader-panel .tra-panel-close {
    border: 1px solid var(--p-border);
    border-radius: 0.3rem;
    padding: 0.2rem 0.55rem;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.tra-reader-panel details { border-top: 1px solid var(--p-border); }
.tra-reader-toolbar .tra-reader-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.tra-reader-panel summary::-webkit-details-marker { display: none; }
/* Chevron points down when closed, up when open */
.tra-reader-panel summary::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.3rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 120ms ease;
}
.tra-reader-panel details[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
.tra-reader-panel details > div { padding-bottom: 0.9rem; }

.tra-reader-group { margin: 0 0 0.9rem; border: 0; padding: 0; min-width: 0; }
.tra-reader-group:last-child { margin-bottom: 0; }
.tra-reader-group-label { display: block; margin-bottom: 0.4rem; font-weight: 600; }
.tra-reader-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tra-reader-panel button,
.tra-reader-panel input,
.tra-reader-panel textarea { font: inherit; letter-spacing: normal; }

/* Options: quiet outline when not chosen, filled with the site's accent
   colour and ticked when chosen. !important because themes style buttons. */
.tra-reader-toolbar .tra-reader-options button,
.tra-reader-toolbar .tra-panel-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    margin: 0;
    border: 1px solid var(--p-border) !important;
    border-radius: 0.4rem;
    padding: 0.35rem 0.7rem;
    color: var(--p-fg) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
    text-transform: none;
    cursor: pointer;
}
.tra-reader-toolbar .tra-panel-button { background: var(--p-surface) !important; }
.tra-reader-toolbar .tra-reader-options button:hover,
.tra-reader-toolbar .tra-panel-button:hover { background: var(--p-hover, var(--p-surface)) !important; }
.tra-reader-toolbar .tra-reader-options button[aria-pressed="true"] {
    color: var(--p-accent-fg, var(--p-bg)) !important;
    background: var(--p-accent) !important;
    border-color: var(--p-accent) !important;
    font-weight: 700;
}
.tra-reader-toolbar .tra-reader-options button[aria-pressed="true"]::before { content: "\2713"; }
.tra-reader-toolbar button:focus-visible,
.tra-reader-toolbar input:focus-visible,
.tra-reader-toolbar textarea:focus-visible,
.tra-reader-toolbar summary:focus-visible {
    outline: 3px solid var(--p-accent);
    outline-offset: 2px;
}

.tra-reader-panel .tra-hint { margin: 0.35rem 0 0.75rem; color: var(--p-muted); font-size: 0.8125rem; }

/* Scheme swatches */
.tra-reader-options.tra-schemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.tra-schemes button { justify-content: flex-start; }
.tra-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.9rem;
    height: 1.5rem;
    border: 1px solid var(--p-border);
    border-radius: 0.25rem;
    color: var(--tra-fg) !important;
    background-color: var(--tra-bg) !important;
    font: 700 0.75rem/1 Georgia, serif;
}
.tra-swatch[data-scheme="site"],
.tra-swatch[data-scheme="auto"],
.tra-swatch[data-scheme="custom"] { color: var(--p-fg) !important; background-color: transparent !important; }
.tra-swatch[data-scheme="auto"] { background-image: linear-gradient(135deg, #ffffff 50%, #16181c 50%); color: transparent !important; }

/* Custom colours */
.tra-custom { margin-top: 0.25rem; }
.tra-colour-row {
    display: grid;
    grid-template-columns: 1fr auto 5.5rem;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.tra-colour-row label { font-size: 0.875rem; }
.tra-reader-panel input[type="color"] {
    width: 2.75rem;
    height: 2rem;
    padding: 0.1rem;
    border: 1px solid var(--p-border);
    border-radius: 0.3rem;
    background: var(--p-surface);
    cursor: pointer;
}
.tra-reader-panel .tra-hex {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--p-border);
    border-radius: 0.3rem;
    color: var(--p-fg);
    background: var(--p-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}
.tra-reader-panel .tra-hex[aria-invalid="true"] { border-width: 2px; border-style: dashed; }
.tra-tints { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.6rem; }
.tra-reader-toolbar .tra-tints button {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid var(--p-border);
    border-radius: 50%;
    cursor: pointer;
}
.tra-custom-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }

/* Contrast report */
.tra-contrast { width: 100%; margin: 0.5rem 0 0; border-collapse: collapse; font-size: 0.8125rem; }
.tra-contrast caption { text-align: left; font-weight: 600; padding-bottom: 0.25rem; color: inherit; }
.tra-contrast th, .tra-contrast td { padding: 0.25rem 0.3rem; border-top: 1px solid var(--p-border); text-align: left; vertical-align: top; color: inherit; background: transparent; }
.tra-contrast td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tra-contrast .tra-rating::before { display: inline-block; width: 1.1em; }
.tra-contrast .tra-rating[data-level="pass"]::before { content: "\2713"; }
.tra-contrast .tra-rating[data-level="warn"]::before { content: "!"; font-weight: 700; }
.tra-contrast .tra-rating[data-level="fail"]::before { content: "\2715"; }

/* Settings code */
.tra-reader-panel textarea.tra-code {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    margin: 0.35rem 0;
    padding: 0.4rem;
    border: 1px solid var(--p-border);
    border-radius: 0.3rem;
    color: var(--p-fg);
    background: var(--p-surface);
    font: 0.75rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
    resize: vertical;
}
.tra-status { min-height: 1.3em; margin: 0.3rem 0 0; font-size: 0.8125rem; }

.tra-visually-hidden {
    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;
}

/* ==========================================================================
   Paragraph permalinks
   ========================================================================== */
.tra-show-paragraphs .tra-reader-paragraph { position: relative; }
.tra-paragraph-link {
    position: absolute;
    right: calc(100% + 0.45rem);
    top: 0.15em;
    border: 0;
    padding: 0.1em;
    color: inherit;
    background: transparent;
    opacity: 0.62;
    font: 400 0.75rem/1 system-ui, sans-serif !important;
    letter-spacing: normal !important;
    cursor: pointer;
    text-decoration: none;
    /* keeps paragraph numbers out of selected and quoted text */
    -webkit-user-select: none;
    user-select: none;
}
.tra-paragraph-link[hidden] { display: none !important; }
.tra-paragraph-link:hover, .tra-paragraph-link:focus { opacity: 1; }

/* ==========================================================================
   Focus mode
   ========================================================================== */
.tra-focus-mode .tra-reader-excluded:not(.tra-reader-toolbar) { opacity: 0.28; }
body.tra-reader-focus-active .site-header,
body.tra-reader-focus-active .site-footer,
body.tra-reader-focus-active #sidebar,
body.tra-reader-focus-active .sidebar,
body.tra-reader-focus-active .widget-area,
body.tra-reader-focus-active .more-from-category,
body.tra-reader-focus-active #comments { opacity: 0.18; transition: opacity 160ms ease; }
body.tra-reader-focus-active .site-header:hover,
body.tra-reader-focus-active .site-footer:hover,
body.tra-reader-focus-active #sidebar:hover,
body.tra-reader-focus-active .sidebar:hover,
body.tra-reader-focus-active .widget-area:hover,
body.tra-reader-focus-active .more-from-category:hover,
body.tra-reader-focus-active #comments:hover,
body.tra-reader-focus-active .site-header:focus-within,
body.tra-reader-focus-active .site-footer:focus-within,
body.tra-reader-focus-active #sidebar:focus-within,
body.tra-reader-focus-active .sidebar:focus-within,
body.tra-reader-focus-active .widget-area:focus-within,
body.tra-reader-focus-active .more-from-category:focus-within,
body.tra-reader-focus-active #comments:focus-within { opacity: 1; }

/* ==========================================================================
   Reading guide: shades the page above and below a band that follows the
   pointer (or sits at a fixed height for keyboard and touch scrolling).
   ========================================================================== */
.tra-ruler { position: fixed; inset: 0; z-index: 99999; pointer-events: none; }
.tra-ruler[hidden] { display: none; }
.tra-ruler-shade { position: absolute; left: 0; right: 0; background: rgb(0 0 0 / 42%); }
.tra-ruler-top { top: 0; }
.tra-ruler-bottom { bottom: 0; }
html[data-tra-tone="dark"] .tra-ruler-shade { background: rgb(0 0 0 / 60%); }

@media (prefers-reduced-motion: reduce) {
    .tra-reader-root { transition: none; }
    body.tra-reader-focus-active .site-header,
    body.tra-reader-focus-active .site-footer { transition: none; }
}

@media (max-width: 760px) {
    .tra-reader-root.tra-width-narrow,
    .tra-reader-root.tra-width-default,
    .tra-reader-root.tra-width-wide { width: 100% !important; max-width: 100% !important; }
    .tra-paragraph-link { position: static; float: left; margin: 0.35em 0.5em 0 0; }
    /* On phones the panel becomes a sheet pinned to the bottom of the screen */
    .tra-reader-toolbar .tra-reader-panel {
        position: fixed;
        top: auto;
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        width: auto;
        max-height: 78vh;
    }
}

@media print {
    .tra-reader-toolbar, .tra-ruler, .tra-paragraph-link { display: none !important; }
}