/*
 * Panel visual — rebuilt from the approved design mockup
 * ("Панель для слабовидящих", 2026-07-25). Palette, radii, sizes and icon
 * scale follow the mockup; the widget logic and class names are unchanged,
 * so a rollback to backup/panel-v0.15.0/ stays a pure file swap.
 *
 * Fonts: the mockup loads PT Sans/PT Serif from Google Fonts. The module
 * never makes external requests, so the families are named first and fall
 * back to system fonts — no @font-face, no network.
 */

.topman-a11y {
    /* normal theme (mockup THEMES.normal) */
    --ta-bg: #fff;
    --ta-text: #1a1a1a;
    --ta-muted: #4c5967;
    --ta-border: #c9c9c9;
    --ta-line: #dcdcdc;
    --ta-hover: #f0f0f0;
    --ta-surface: #f5f5f5;
    --ta-accent: #1a1a1a;
    --ta-accent-text: #fff;
    --ta-focus: #ffb400;
    --ta-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    /* Mockup geometry (updated revision): 80px controls above 1600px,
       48px on compact desktops, 52px on tablets, 62px on phones. */
    --ta-btn: 80px;
    --ta-icon: 32px;
    --ta-label: 16px;
    --ta-radius: 16px;
    --ta-radius-group: 18px;
    --ta-gap-outer: 16px;
    --ta-gap-inner: 9px;
    --ta-group-pad: 10px 14px 12px;
    --ta-bar-pad: 14px 16px 16px;
    --ta-exit-size: 20px;
    --ta-exit-pad: 0 18px;
    --ta-exit-width: auto;

    --topman-a11y-admin-offset: 0px;
    position: relative;
    z-index: 2147482000;
    color: var(--ta-text);
    font: 400 16px/1.45 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
    text-align: left;
}

.topman-a11y[data-ui-theme="white"] {
    --ta-bg: #fff;
    --ta-text: #000;
    --ta-muted: #3a3a3a;
    --ta-border: #bdbdbd;
    --ta-line: #d6d6d6;
    --ta-hover: #efefef;
    --ta-surface: #f4f4f4;
    --ta-accent: #1a1a1a;
    --ta-accent-text: #fff;
}

.topman-a11y[data-ui-theme="black"] {
    --ta-bg: #000;
    --ta-text: #fff;
    --ta-muted: #e0e0e0;
    --ta-border: #5a5a5a;
    --ta-line: #4a4a4a;
    --ta-hover: #262626;
    --ta-surface: #171717;
    --ta-accent: #ffd84d;
    --ta-accent-text: #000;
    --ta-focus: #00e5ff;
}

.topman-a11y[data-ui-theme="blue"] {
    --ta-bg: #cfe8ff;
    --ta-text: #08306b;
    --ta-muted: #244d73;
    --ta-border: #8dbfe8;
    --ta-line: #a8d0f2;
    --ta-hover: #b9daf8;
    --ta-surface: #c2e0fb;
    --ta-accent: #08306b;
    --ta-accent-text: #cfe8ff;
}

.topman-a11y[data-ui-theme="beige"] {
    --ta-bg: #f7f0dc;
    --ta-text: #4a2c0f;
    --ta-muted: #5b4935;
    --ta-border: #cdb48a;
    --ta-line: #ddc9a4;
    --ta-hover: #eee0bf;
    --ta-surface: #f1e6cb;
    --ta-accent: #4a2c0f;
    --ta-accent-text: #f7f0dc;
}

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

.topman-a11y [hidden] {
    display: none !important;
}

/* Inherit the family and weight only: the "font" shorthand also sets
   font-size, and at (0,1,1) it would outrank every component class that
   defines its own icon or label size. */
.topman-a11y button,
.topman-a11y input {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
}

/* No color reset here on purpose: ".topman-a11y button" would outrank the
   state modifiers (--primary, aria-pressed) and swallow their colors. Every
   panel button gets its color from its component class instead. */

/* Mockup focus ring: thick amber, well clear of the control. */
.topman-a11y button:focus-visible,
.topman-a11y input:focus-visible + label,
.topman-a11y [tabindex]:focus-visible,
.topman-a11y-rep-button:focus-visible {
    outline: 5px solid var(--ta-focus) !important;
    outline-offset: 4px !important;
}

.topman-a11y__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- trigger ---------- */

.topman-a11y__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 76px;
    padding: 0 30px;
    border: 2px solid var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-bg);
    color: var(--ta-text);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

.topman-a11y[data-position="header"] > .topman-a11y__trigger {
    margin: 12px;
}

.topman-a11y__trigger:hover,
.topman-a11y__button:hover,
.topman-a11y__icon-button:hover {
    background: var(--ta-hover);
}

.topman-a11y[data-position="fixedTopRight"] > .topman-a11y__trigger,
.topman-a11y[data-position="fixedBottomRight"] > .topman-a11y__trigger {
    position: fixed;
    right: 16px;
    z-index: 2147482001;
}

.topman-a11y[data-position="fixedTopRight"] > .topman-a11y__trigger {
    top: calc(var(--topman-a11y-admin-offset) + 16px);
}

.topman-a11y[data-position="fixedBottomRight"] > .topman-a11y__trigger {
    bottom: 16px;
}

/*
 * Иконка триггера — SVG, а не эмодзи: цветной глиф остаётся цветным в
 * чёрно-белых схемах, чем бы его ни красили, и рисуется по-разному в
 * разных системах. Штрих наследует currentColor и следует схеме.
 */
.topman-a11y__trigger-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    color: currentColor;
}

.topman-a11y__trigger-icon svg {
    width: 100%;
    height: 100%;
}

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

.topman-a11y__panel {
    width: 100%;
    border-bottom: 1px solid var(--ta-line);
    background: var(--ta-bg);
    color: var(--ta-text);
    box-shadow: var(--ta-shadow);
}

.topman-a11y__panel-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.topman-a11y__bar {
    display: flex;
    flex-wrap: wrap;
    /* stretch keeps every card the same height, so the button rows share one
       baseline instead of stepping up and down */
    align-items: stretch;
    gap: var(--ta-gap-outer);
    padding: var(--ta-bar-pad);
}

/* Each control group is a rounded card on the subtle surface. */
.topman-a11y__bar-group {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    flex-direction: column;
    gap: var(--ta-gap-inner);
    margin: 0;
    padding: var(--ta-group-pad);
    border: 1px solid var(--ta-line);
    border-radius: var(--ta-radius-group);
    background: var(--ta-surface);
}

.topman-a11y__bar-group .topman-a11y__bar-buttons {
    margin-top: auto;
}

.topman-a11y__bar-group--plain {
    justify-content: flex-end;
    border-color: transparent;
    background: none;
    padding: 0;
}

.topman-a11y__bar-label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 0 0 2px;
    font-size: var(--ta-label);
    font-weight: 700;
    opacity: 0.85;
    text-align: left;
}

/* Bar groups use role="group" + a span label: a <legend> would be painted on
   the card border by the browser and escape the box. */

.topman-a11y__bar-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ta-gap-inner);
}

/* Mockup: the settings group hugs the right edge only when the bar fits
   on one line (>=1400px); otherwise the auto margin would tear a gap. */
@media (min-width: 1601px) {
    .topman-a11y__bar-group:last-child {
        margin-left: auto;
    }
}

/* ---------- controls ---------- */

.topman-a11y__choice-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.topman-a11y__choice,
.topman-a11y__button,
.topman-a11y__icon-button {
    border: 2px solid var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-bg);
    color: var(--ta-text);
    cursor: pointer;
}

.topman-a11y__choice {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 8px 9px;
    font-weight: 700;
    text-align: center;
}

.topman-a11y__choice:hover {
    background: var(--ta-hover);
}

.topman-a11y__choice-input:checked + .topman-a11y__choice {
    border-color: var(--ta-accent);
    background: var(--ta-accent);
    color: var(--ta-accent-text);
}

/* Square icon control — the mockup's primary button shape. */
.topman-a11y__choice--compact {
    width: var(--ta-btn);
    min-width: var(--ta-btn);
    height: var(--ta-btn);
    padding: 6px;
    font-size: var(--ta-icon);
    line-height: 1;
}

.topman-a11y__choice--compact:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.topman-a11y__choice--compact[aria-pressed="true"] {
    border-color: var(--ta-accent);
    background: var(--ta-accent);
    color: var(--ta-accent-text);
}

.topman-a11y__choice--compact svg {
    width: calc(var(--ta-icon) - 4px);
    height: calc(var(--ta-icon) - 4px);
}

/* Current font scale: dashed frame, live-updated. */
.topman-a11y__scale-value {
    display: flex;
    min-width: var(--ta-btn);
    height: var(--ta-btn);
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px dashed var(--ta-border);
    border-radius: var(--ta-radius);
    background: var(--ta-bg);
    font-size: 26px;
    font-weight: 700;
}

/* Color swatches keep their own scheme; selection is a thick accent ring. */
.topman-a11y__choice--swatch {
    font-size: 30px;
}

.topman-a11y__choice--swatch[data-theme="white"] {
    background: #fff;
    color: #000;
    border-color: #bdbdbd;
}

.topman-a11y__choice--swatch[data-theme="black"] {
    background: #000;
    color: #fff;
    border-color: #5a5a5a;
}

.topman-a11y__choice--swatch[data-theme="blue"] {
    background: #cfe8ff;
    color: #08306b;
    border-color: #8dbfe8;
}

.topman-a11y__choice--swatch[data-theme="beige"] {
    background: #f7f0dc;
    color: #4a2c0f;
    border-color: #cdb48a;
}

.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch {
    border-color: var(--ta-accent);
    box-shadow: 0 0 0 5px var(--ta-accent);
}

.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="white"] {
    background: #fff;
    color: #000;
}

.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="black"] {
    background: #000;
    color: #fff;
}

.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="blue"] {
    background: #cfe8ff;
    color: #08306b;
}

.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="beige"] {
    background: #f7f0dc;
    color: #4a2c0f;
}

.topman-a11y__choice-text {
    overflow-wrap: normal;
    word-break: normal;
}

.topman-a11y__choice[data-font-family="serif"] {
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif;
}

.topman-a11y__button {
    display: inline-flex;
    min-height: var(--ta-btn);
    align-items: center;
    justify-content: center;
    padding: var(--ta-exit-pad);
    font-size: var(--ta-exit-size);
    font-weight: 700;
    white-space: nowrap;
}

.topman-a11y__bar .topman-a11y__button {
    min-width: var(--ta-exit-width);
}

/* The mockup collapses this button to a ↺ glyph on narrow screens; by
   request the full wording stays at every width — "leave the special
   version" is the one control users scan for by text, not by icon. */
.topman-a11y__exit-icon {
    display: none;
}

.topman-a11y__button--primary {
    border-color: var(--ta-accent);
    background: var(--ta-accent);
    color: var(--ta-accent-text);
}

.topman-a11y__icon-button {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* ---------- modal dialogs ---------- */

.topman-a11y__dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 2147482100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.topman-a11y__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.topman-a11y__dialog {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1120px;
    max-height: 92vh;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--ta-line);
    border-radius: 28px;
    background: var(--ta-bg);
    color: var(--ta-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.topman-a11y__dialog--braille {
    max-width: 960px;
}

.topman-a11y__dialog-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ta-line);
}

.topman-a11y__title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
}

.topman-a11y__dialog-header .topman-a11y__icon-button {
    margin-left: auto;
    flex: 0 0 auto;
}

.topman-a11y__dialog-content {
    display: grid;
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px 24px;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}

.topman-a11y__group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--ta-line);
    border-radius: 22px;
    background: var(--ta-surface);
}

.topman-a11y__group--speech {
    grid-column: 1 / -1;
}

.topman-a11y__legend {
    padding: 0 0 0 2px;
    font-size: 18px;
    font-weight: 700;
    opacity: 0.85;
}

.topman-a11y__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Dialog choices stretch to fill the row, per the mockup. */
.topman-a11y__dialog-content .topman-a11y__choice {
    min-width: 96px;
    height: 66px;
    flex: 1 1 auto;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 21px;
    line-height: 1.2;
}

.topman-a11y__switches {
    display: grid;
    grid-column: 1 / -1;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

/* Toggle rows: 84x48 track with a 34px knob. */
.topman-a11y__switch {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--ta-line);
    border-radius: 22px;
    background: var(--ta-surface);
    font-size: 21px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.topman-a11y__switch-control {
    display: flex;
    width: 84px;
    height: 48px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    border: 2px solid var(--ta-border);
    border-radius: 24px;
    background: var(--ta-hover);
    transition: background 0.15s ease;
}

.topman-a11y__switch-control::after {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ta-text);
    transition: transform 0.15s ease;
}

.topman-a11y__switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.topman-a11y__switch-input:checked + .topman-a11y__switch-control {
    border-color: var(--ta-accent);
    background: var(--ta-accent);
}

.topman-a11y__switch-input:checked + .topman-a11y__switch-control::after {
    background: var(--ta-accent-text);
    transform: translateX(30px);
}

.topman-a11y__switch-input:focus-visible + .topman-a11y__switch-control {
    outline: 5px solid var(--ta-focus);
    outline-offset: 4px;
}

.topman-a11y__dialog-footer,
.topman-a11y__panel-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--ta-line);
    background: var(--ta-surface);
}

.topman-a11y__dialog-footer .topman-a11y__button {
    min-width: 180px;
    height: 70px;
}

/* ---------- speech dock ---------- */

.topman-a11y__speech-dock {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2147482001;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 18px;
    border: 2px solid var(--ta-accent);
    border-radius: var(--ta-radius);
    background: var(--ta-accent);
    color: var(--ta-accent-text);
    box-shadow: 0 8px 28px rgba(16, 24, 32, 0.24);
}

.topman-a11y__speech-dock[hidden] {
    display: none !important;
}

.topman-a11y__speech-dock-label {
    font-size: 22px;
    font-weight: 700;
}

.topman-a11y__speech-dock .topman-a11y__choice--compact {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-color: var(--ta-accent-text);
    background: transparent;
    color: var(--ta-accent-text);
    font-size: 26px;
}

.topman-a11y__speech-dock .topman-a11y__choice--compact:hover {
    background: rgba(255, 255, 255, 0.18);
}

.topman-a11y__speech-dock .topman-a11y__choice--compact[aria-pressed="true"] {
    background: var(--ta-accent-text);
    color: var(--ta-accent);
}

.topman-a11y__speech-dock .topman-a11y__choice--compact svg {
    width: 30px;
    height: 30px;
}

.topman-a11y__speech-progress {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.topman-a11y__speech-progress-count {
    min-width: 78px;
    font-size: 19px;
    font-weight: 700;
    text-align: center;
}

.topman-a11y__speech-progress-bar {
    display: inline-block;
    width: 120px;
    height: 12px;
    overflow: hidden;
    border: 2px solid var(--ta-accent-text);
    border-radius: 8px;
    background: transparent;
}

.topman-a11y__speech-progress-fill {
    display: block;
    width: 0%;
    height: 100%;
    background: var(--ta-accent-text);
    transition: width 0.3s ease;
}

/* ---------- braille + representation views ---------- */

.topman-a11y__braille-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 0;
}

.topman-a11y__braille-toolbar .topman-a11y__choice--compact {
    width: 66px;
    min-width: 66px;
    height: 66px;
    font-size: 26px;
}

.topman-a11y__braille-toolbar .topman-a11y__button {
    min-height: 66px;
    font-size: 20px;
}

.topman-a11y__braille-content,
.topman-a11y__rep-content {
    max-height: 58vh;
    overflow: auto;
    padding: 16px 24px 24px;
    overscroll-behavior: contain;
}

.topman-a11y__braille-content[data-braille-size="s"] {
    font-size: 32px;
}

.topman-a11y__braille-content[data-braille-size="m"] {
    font-size: 48px;
}

.topman-a11y__braille-content[data-braille-size="l"] {
    font-size: 64px;
}

.topman-a11y__braille-block {
    margin: 0 0 0.6em;
}

.topman-a11y__braille-text {
    line-height: 1.5;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

.topman-a11y__rep-content {
    white-space: pre-wrap;
    font-size: 20px;
    line-height: 1.6;
}

.topman-a11y__rep-content--braille {
    letter-spacing: 0.08em;
    font-size: 32px;
}

.topman-a11y__rep-note {
    margin: 16px 24px 0;
    padding: 12px 16px;
    border-left: 5px solid var(--ta-accent);
    border-radius: 12px;
    background: var(--ta-surface);
    font-size: 18px;
}

/* Buttons injected next to file links on the page. */
.topman-a11y-rep-button {
    display: inline-block;
    margin: 0 0 0 8px;
    padding: 4px 12px;
    border: 2px solid currentColor;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
}

/* ---------- misc ---------- */

.topman-a11y__status {
    position: fixed;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.topman-a11y-dialog-open {
    overflow: hidden !important;
}

/* ---------- responsive (mockup breakpoints: 1120 / 720) ---------- */

/*
 * One-line budget: 17 square controls + the exit button + card paddings and
 * gaps. Each step below keeps the whole bar on a single row; 1200px lands on
 * 48px controls, still above the 44px minimum touch target.
 */
/* compact desktop */
@media (max-width: 1600px) {
    .topman-a11y {
        --ta-btn: 48px;
        --ta-icon: 21px;
        --ta-label: 13px;
        --ta-gap-outer: 8px;
        --ta-gap-inner: 4px;
        --ta-group-pad: 6px 8px 8px;
        --ta-bar-pad: 10px 12px 12px;
        --ta-exit-size: 16px;
        --ta-exit-pad: 0 14px;
    }
}

/* tablet */
@media (max-width: 1119px) {
    .topman-a11y {
        --ta-btn: 52px;
        --ta-icon: 22px;
    }
}
@media (max-width: 900px) {
    .topman-a11y__dialog-content,
    .topman-a11y__switches {
        grid-template-columns: 1fr;
    }
}

/* phone */
@media (max-width: 719px) {
    .topman-a11y {
        --ta-btn: 62px;
        --ta-icon: 26px;
        --ta-label: 15px;
        --ta-gap-outer: 10px;
        --ta-gap-inner: 8px;
        --ta-group-pad: 10px 12px 12px;
        --ta-bar-pad: 12px 14px 14px;
        --ta-exit-size: 18px;
        --ta-exit-width: auto;
    }

    .topman-a11y__bar {
        padding: 12px;
    }

    .topman-a11y__bar-group {
        flex: 1 1 100%;
    }

    .topman-a11y__bar-group:last-child {
        margin-left: 0;
    }

    .topman-a11y__button {
        flex: 1 1 100%;
        font-size: 19px;
    }

    .topman-a11y__dialog {
        max-height: 96vh;
        border-radius: 20px;
    }

    .topman-a11y__title {
        font-size: 24px;
    }

    .topman-a11y__speech-dock {
        right: 8px;
        bottom: 8px;
        left: 8px;
        justify-content: space-between;
    }

    .topman-a11y__speech-progress-bar {
        width: 80px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topman-a11y__switch-control,
    .topman-a11y__switch-control::after,
    .topman-a11y__speech-progress-fill {
        transition: none;
    }
}

/* Mockup speaking indicator: full-width accent strip under the controls. */
.topman-a11y__speaking {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 12px 24px;
    background: var(--ta-accent);
    color: var(--ta-accent-text);
    font-size: 24px;
    font-weight: 700;
}

.topman-a11y__speaking[hidden] {
    display: none !important;
}

/* Dialog chrome keeps the mockup's larger radii while bar controls use 16px. */
.topman-a11y__dialog-header .topman-a11y__icon-button,
.topman-a11y__dialog-footer .topman-a11y__button {
    border-radius: 18px;
}

/* ------------------------------------------------------------------ */
/* ТЗ A1: палитра панели для четырёх новых схем + сетка свотчей 4x2     */
/* ------------------------------------------------------------------ */

.topman-a11y[data-ui-theme="blackYellow"] {
    --ta-bg: #ffff00;
    --ta-text: #000000;
    --ta-muted: #262600;
    --ta-border: #4d4d00;
    --ta-line: #b3b300;
    --ta-hover: #f2e600;
    --ta-surface: #fff7a0;
    --ta-accent: #000000;
    --ta-accent-text: #ffff00;
    --ta-focus: #b22222;
}

.topman-a11y[data-ui-theme="yellowBlack"] {
    --ta-bg: #000000;
    --ta-text: #ffff00;
    --ta-muted: #e6e600;
    --ta-border: #7a7a00;
    --ta-line: #4d4d00;
    --ta-hover: #262600;
    --ta-surface: #141400;
    --ta-accent: #ffff00;
    --ta-accent-text: #000000;
    --ta-focus: #00e5ff;
}

.topman-a11y[data-ui-theme="navyYellow"] {
    --ta-bg: #ffff00;
    --ta-text: #00008b;
    --ta-muted: #000066;
    --ta-border: #00006b;
    --ta-line: #b3b300;
    --ta-hover: #f2e600;
    --ta-surface: #fff7a0;
    --ta-accent: #00008b;
    --ta-accent-text: #ffff00;
    --ta-focus: #b22222;
}

.topman-a11y[data-ui-theme="greenBlack"] {
    --ta-bg: #000000;
    --ta-text: #00ff00;
    --ta-muted: #7cfc7c;
    --ta-border: #007a00;
    --ta-line: #004d00;
    --ta-hover: #002600;
    --ta-surface: #001400;
    --ta-accent: #00ff00;
    --ta-accent-text: #000000;
    --ta-focus: #ffff00;
}

/* Свотчи показывают собственные цвета схемы. */
.topman-a11y__choice--swatch[data-theme="blackYellow"],
.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="blackYellow"] {
    background: #ffff00;
    color: #000000;
}

.topman-a11y__choice--swatch[data-theme="yellowBlack"],
.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="yellowBlack"] {
    background: #000000;
    color: #ffff00;
}

.topman-a11y__choice--swatch[data-theme="navyYellow"],
.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="navyYellow"] {
    background: #ffff00;
    color: #00008b;
}

.topman-a11y__choice--swatch[data-theme="greenBlack"],
.topman-a11y__choice-input:checked + .topman-a11y__choice--swatch[data-theme="greenBlack"] {
    background: #000000;
    color: #00ff00;
}

.topman-a11y__choice--swatch[data-theme="blackYellow"] {
    border-color: #4d4d00;
}

.topman-a11y__choice--swatch[data-theme="yellowBlack"] {
    border-color: #7a7a00;
}

.topman-a11y__choice--swatch[data-theme="navyYellow"] {
    border-color: #00006b;
}

.topman-a11y__choice--swatch[data-theme="greenBlack"] {
    border-color: #007a00;
}

/* Восемь свотчей в одну строку не помещаются — раскладываем 4x2,
   высота группы при этом не выходит за габариты соседних. */
.topman-a11y__bar-buttons--grid4 {
    display: grid;
    grid-template-columns: repeat(4, var(--ta-btn));
}

@media (max-width: 719px) {
    .topman-a11y__bar-buttons--grid4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* Узкие экраны: панель не должна закрывать сайт целиком                */
/* ------------------------------------------------------------------ */

@media (max-width: 719px) {
    /*
     * Шесть групп настроек на телефоне выше экрана. Ограничиваем высоту и
     * прокручиваем содержимое внутри: посетитель сразу видит, что панель
     * относится к сайту, а не заменяет его.
     */
    .topman-a11y__panel {
        max-block-size: 68vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/*
 * topman-a11y-fixed-panel
 *
 * Панель прижата к верхнему краю окна и остаётся на месте при прокрутке: она
 * нужна ровно тогда, когда посетитель читает страницу, а не только в её
 * начале. Раньше панель ехала вместе с содержимым и уходила из виду.
 *
 * Содержимое опускается на её высоту отступом body, а не полями самой панели:
 * высота меняется (тулбар переносится на две строки, экран поворачивается), и
 * переменная пересчитывается сама в publishFlowOffset().
 *
 * Ограничение по высоте с прокруткой внутри — страховка для узких экранов: без
 * него развёрнутый тулбар на телефоне занял бы почти весь экран.
 */
html[data-a11y-active="true"][data-a11y-panel-floating="true"] .topman-a11y {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/*
 * Ограничение высоты — на самой панели, а не на корне: в корне лежат ещё
 * триггер, пульт речи и слои диалогов, и делать прокручиваемым его целиком
 * незачем. Страховка для узких экранов: развёрнутый тулбар на телефоне
 * иначе занял бы почти весь экран.
 */
html[data-a11y-active="true"][data-a11y-panel-floating="true"] .topman-a11y__panel {
    max-height: 60vh;
    overflow-y: auto;
}

html[data-a11y-active="true"][data-a11y-panel-floating="true"] body {
    padding-top: var(--topman-a11y-flow-offset, 0px) !important;
}

/*
 * topman-a11y-icon-size
 *
 * Размер SVG-иконок берётся из размерного тира панели, а не из атрибутов
 * width/height у самого рисунка: тиров четыре (база, 1600, 1119, 719), и
 * зашитый в разметке размер сломал бы их на узких экранах.
 *
 * display: block убирает зазор под строкой, из-за которого иконка в кнопке
 * выглядит съехавшей вверх.
 */
.topman-a11y__choice svg,
.topman-a11y__button svg,
.topman-a11y__speaking svg {
    width: var(--ta-icon);
    height: var(--ta-icon);
    display: block;
    flex: 0 0 auto;
}

/*
 * Кнопка «Озвучить выделенное» у самого выделения.
 *
 * Размер цели не меньше 44 px: кнопкой пользуется человек с плохим зрением, и
 * попасть по мелкой он не сможет (WCAG 2.5.8). По той же причине рядом с
 * значком стоит подпись словами, а не только иконка.
 *
 * z-index ниже панели: панель прижата к верху окна и всегда должна оставаться
 * доступной, даже если выделение оказалось прямо под ней.
 */
.topman-a11y__selection-speak {
    /* Единственное число, от которого считается вся кнопка. */
    --ta-sel-font: 20px;

    position: fixed;
    z-index: 2147481000;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 2.6em;
    width: max-content;
    max-width: 22em;
    padding: 0.55em 1.1em;
    border: 2px solid var(--ta-accent);
    border-radius: 999px;
    background: var(--ta-accent);
    color: var(--ta-accent-text);
    font-family: inherit;
    font-size: var(--ta-sel-font);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

/*
 * Кнопка растёт вместе с текстом страницы: человек, поставивший 200 %, не
 * должен потом искать глазами мелкую кнопку. Ступени те же, что у шкалы
 * размера текста.
 */
html[data-a11y-font-scale="150"] .topman-a11y__selection-speak {
    --ta-sel-font: 24px;
}

html[data-a11y-font-scale="175"] .topman-a11y__selection-speak {
    --ta-sel-font: 27px;
}

html[data-a11y-font-scale="200"] .topman-a11y__selection-speak {
    --ta-sel-font: 30px;
}

html[data-a11y-font-scale="250"] .topman-a11y__selection-speak {
    --ta-sel-font: 36px;
}

.topman-a11y__selection-speak[hidden] {
    display: none;
}

.topman-a11y__selection-speak svg {
    width: 1.2em;
    height: 1.2em;
    flex: 0 0 auto;
}

/*
 * Подпись переносится по пробелу, но не рвётся внутри слова: разорванное
 * слово нечитаемо ровно для той аудитории, ради которой кнопка и сделана.
 * Прятать подпись тоже нельзя — один значок без слов непонятен.
 */
.topman-a11y__selection-speak span {
    overflow-wrap: normal;
    word-break: normal;
}

.topman-a11y__selection-speak:hover,
.topman-a11y__selection-speak:focus-visible {
    background: var(--ta-bg);
    color: var(--ta-text);
}

.topman-a11y__selection-speak:focus-visible {
    outline: 5px solid var(--ta-focus);
    outline-offset: 3px;
}