.display-settings-wrap { padding-top: 12px; }
.display-settings { font-size: calc(14px * var(--text-scale, 1)); }
.display-settings summary { cursor: pointer; width: fit-content; padding: 10px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.display-settings-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.display-settings-panel select, .display-settings-panel button { font: inherit; color: inherit; background: var(--paper); border: 1px solid var(--ink); border-radius: 6px; padding: 10px 12px; min-height: 44px; max-width: 100%; }
.display-settings-panel button { cursor: pointer; }
.display-settings-panel a { text-decoration: underline; text-underline-offset: 4px; }
.display-contrast { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.display-contrast input { width: 22px; height: 22px; flex: none; }
.display-settings-status { flex-basis: 100%; margin: 0; }
.display-settings-status:empty { display: none; }
.display-settings :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
html:not([data-text-size="100"]) body { overflow-wrap: anywhere; }
html:not([data-text-size="100"]) .pill, html:not([data-text-size="100"]) .section-top a { white-space: normal; }
html:not([data-text-size="100"]) .header nav { min-width: 0; }
html:not([data-text-size="100"]) .books-heading, html:not([data-text-size="100"]) .books-bottom { flex-wrap: wrap; }

html[data-contrast="high"] { color-scheme: dark; }
html[data-contrast="high"] body,
html[data-contrast="high"] body * { color: #fff !important; background-color: #000 !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; }
html[data-contrast="high"] a,
html[data-contrast="high"] a * { color: #ff0 !important; }
html[data-contrast="high"] a { text-decoration: underline !important; text-underline-offset: 4px; }
html[data-contrast="high"] button,
html[data-contrast="high"] select,
html[data-contrast="high"] input,
html[data-contrast="high"] textarea { border: 1px solid #fff !important; accent-color: #ff0; }
html[data-contrast="high"] :focus-visible { outline: 3px solid #ff0 !important; outline-offset: 4px; }
html[data-contrast="high"] .logo,
html[data-contrast="high"] .partner-item img { background-color: #fff !important; mix-blend-mode: normal; }
@media (forced-colors: active) {
    .display-settings-panel, .display-settings-panel button { border: 1px solid ButtonText; }
}