/* Percentages preserve the reader's browser font preference. */
:root[data-text-size="100"] { font-size: 100%; --reading-text-scale: 1; }
:root[data-text-size="125"] { font-size: 125%; --reading-text-scale: 1.25; }
:root[data-text-size="150"] { font-size: 150%; --reading-text-scale: 1.5; }
:root[data-text-size="200"] { font-size: 200%; --reading-text-scale: 2; }

/* Scale the viewport term too: a vw-only heading would resist text resizing. */
:root[data-text-size] h1 { font-size: clamp(1.75rem, calc(4vw * var(--reading-text-scale)), 2.6rem); }
:root[data-text-size] .public-hero h1 { font-size: clamp(2rem, calc(4.2vw * var(--reading-text-scale)), 3rem); }

.session-nav { max-inline-size: 100%; }
.reading-controls {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    justify-content: flex-end;
    align-items: center;
    gap: clamp(4px, 1vw, 8px);
    inline-size: min(100%, 12.5rem);
    min-width: 0;
    max-width: 100%;
}
.reading-controls > * { min-width: 0; max-width: 100%; }
.session-nav .icon-control {
    flex: 0 0 auto;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding: 0;
    line-height: 1;
}
.icon-control .ui-icon { width: min(1.4rem, 65%); height: auto; aspect-ratio: 1; }
.theme-toggle .ui-icon { width: min(1.6rem, 72%); }
.text-size-control { position: static; flex: 0 0 auto; }
.text-size-toggle { display: flex; list-style: none; }
.text-size-toggle::-webkit-details-marker { display: none; }
.text-size-control[open] > .text-size-toggle { background: var(--color-notice); }
.text-size-popover {
    position: absolute;
    inset-block-start: calc(100% + .5rem);
    inset-inline-end: 0;
    z-index: 30;
    width: 14rem;
    max-width: 100%;
    padding: .8rem;
    border: 1px solid var(--color-border-strong);
    border-radius: .7rem;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--surface-shadow);
}
.text-size-popover label { display: block; margin-bottom: .5rem; overflow-wrap: anywhere; }
.text-size-popover select { max-width: 100%; padding-inline: .5rem; }

/* High contrast is independent of the day/night preference. System forced
   colors take precedence; never opt out of their automatic adjustment. */
@media (forced-colors: none) {
    :root[data-contrast="high"] {
        --hc-foreground: #000;
        --hc-background: #fff;
        --color-text: var(--hc-foreground);
        --color-bg: var(--hc-background);
        --color-surface: var(--hc-background);
        --color-surface-muted: var(--hc-background);
        --color-muted: var(--hc-foreground);
        --color-link: var(--hc-foreground);
        --color-primary: var(--hc-foreground);
        --color-primary-hover: var(--hc-foreground);
        --color-primary-text: var(--hc-background);
        --color-border: var(--hc-foreground);
        --color-border-strong: var(--hc-foreground);
        --color-notice: var(--hc-background);
        --color-error-bg: var(--hc-background);
        --color-error-text: var(--hc-foreground);
        --color-danger: var(--hc-foreground);
        --color-danger-hover: var(--hc-foreground);
        --color-danger-text: var(--hc-background);
        --color-focus: var(--hc-foreground);
        --surface-shadow: none;
    }
    :root[data-contrast="high"][data-theme="dark"] {
        --hc-foreground: #fff;
        --hc-background: #000;
    }
    @media (prefers-color-scheme: dark) {
        :root[data-contrast="high"]:not([data-theme]) {
            --hc-foreground: #fff;
            --hc-background: #000;
        }
    }
    :root[data-contrast="high"] a { text-decoration: underline; text-decoration-thickness: .1em; }
    :root[data-contrast="high"] a:hover { text-decoration-thickness: .18em; }
    :root[data-contrast="high"] .public-hero {
        background-image: none;
        background-color: var(--hc-background);
        color: var(--hc-foreground);
        border: 2px solid var(--hc-foreground);
    }
    :root[data-contrast="high"] .public-card-communication { border-left-color: var(--hc-foreground); }
    :root[data-contrast="high"] .public-card-communication .public-kind {
        color: var(--hc-foreground);
        background: var(--hc-background);
    }
    :root[data-contrast="high"] .public-kind,
    :root[data-contrast="high"] .board-status { border: 1px solid var(--hc-foreground); }
    :root[data-contrast="high"] .public-urgent-label {
        color: var(--hc-background);
        background: var(--hc-foreground);
        border: 3px double var(--hc-background);
        outline: 1px solid var(--hc-foreground);
    }
    :root[data-contrast="high"] .urgent-communication {
        color: var(--hc-background);
        background: var(--hc-foreground);
        border-block: 2px solid var(--hc-foreground);
    }
    :root[data-contrast="high"] .urgent-communication-link { color: inherit; }
    :root[data-contrast="high"] .notice-error,
    :root[data-contrast="high"] .announcement-withdraw { border-style: dashed; border-width: 2px; }
    :root[data-contrast="high"] .field-error { text-decoration: underline; text-underline-offset: .2em; }
    :root[data-contrast="high"] .account-locked td { border-bottom-style: dashed; }
    :root[data-contrast="high"] .account-lock-label { text-decoration: underline; }
    :root[data-contrast="high"] .button-danger { border: 3px double var(--hc-background); outline: 1px solid var(--hc-foreground); }
    :root[data-contrast="high"] .contrast-toggle[aria-pressed="true"] { border-style: double; border-width: 3px; }
    :root[data-contrast="high"] .panel-nav a[aria-current="page"],
    :root[data-contrast="high"] .public-section-link.is-current,
    :root[data-contrast="high"] .public-sort-link.is-current { text-decoration-thickness: .18em; }
    :root[data-contrast="high"] .public-sort-link.is-current { border-width: 2px; }
    :root[data-contrast="high"] button:disabled { opacity: 1; border-style: dashed; }
    :root[data-contrast="high"] .author-display .author-display-button {
        background: transparent;
        color: inherit;
        border: 0;
        outline-offset: 3px;
    }
    :root[data-contrast="high"] .author-display-text {
        mask-image: none;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
    }
    :root[data-contrast="high"] :focus-visible {
        outline: 3px solid var(--hc-foreground);
        outline-offset: 3px;
        box-shadow: 0 0 0 6px var(--hc-background);
    }
    :root[data-contrast="high"] .session-timeout-dialog::backdrop { background: rgb(0 0 0 / 80%); }
}

/* Text enlargement must leave room for reading, including long Polish labels.
   Uploaded pictures retain their original colors and remain on the right. */
@media (max-width: 68rem) {
    :root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) .list-card-with-thumbnail { grid-template-columns: minmax(0, 1fr); }
    :root:is([data-text-size="125"], [data-text-size="150"], [data-text-size="200"]) .list-thumbnail { max-width: 18rem; justify-self: end; }
}
@media (max-width: 40rem) {
    :root:is([data-text-size="150"], [data-text-size="200"]) .public-search-field { flex-basis: 100%; }
    :root:is([data-text-size="150"], [data-text-size="200"]) .public-section-link { flex-basis: 100%; }
    :root:is([data-text-size="150"], [data-text-size="200"]) .upcoming-list li,
    :root:is([data-text-size="150"], [data-text-size="200"]) .announcement-coordinate-fields,
    :root:is([data-text-size="150"], [data-text-size="200"]) .board-coordinate-fields { grid-template-columns: minmax(0, 1fr); }
    :root:is([data-text-size="150"], [data-text-size="200"]) .upcoming-date { width: 3.5rem; max-width: 100%; }
}
@media (max-width: 35rem) {
    .site-header { row-gap: .65rem; padding-block: .85rem; }
    .session-nav { width: auto; margin-left: auto; }
}
@media (forced-colors: active) {
    .contrast-toggle[aria-pressed="true"] { border: 3px double ButtonText; }
}