/* The Accessibility settings (a11y-prefs.js). Each one is an attribute or custom property on <html>, applied before the
   first paint by theme-boot.js, so the rules here only switch on when the person has chosen them. */

/* ---------- reduce motion: chosen here, or the system setting while "Follow system" is picked (the media query blocks
   elsewhere are guarded by :root:not([data-motion="full"])) ---------- */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}

/* ---------- chat text size: the message list scales its own text, nothing else on the page ---------- */
.messages { font-size: calc(0.9375rem * var(--chat-scale, 1)); }
.welcome h2 { font-size: calc(1.625rem * var(--chat-scale, 1)); }
.loading-more { font-size: calc(0.8125rem * var(--chat-scale, 1)); }
.messages .divider { font-size: calc(0.75rem * var(--chat-scale, 1)); }
.msg .gutter time { font-size: calc(0.6562rem * var(--chat-scale, 1)); }
.msg .meta .author { font-size: calc(0.9062rem * var(--chat-scale, 1)); }
.msg .meta time { font-size: calc(0.75rem * var(--chat-scale, 1)); }
.msg .text .edited { font-size: calc(0.6875rem * var(--chat-scale, 1)); }
.msg .text.jumbo { font-size: calc(2.25rem * var(--chat-scale, 1)); }
.msg .reply-ref { font-size: calc(0.8125rem * var(--chat-scale, 1)); }
.messages .reaction { font-size: calc(0.8125rem * var(--chat-scale, 1)); }
.reaction .e { font-size: calc(0.9375rem * var(--chat-scale, 1)); }
.edit-box small { font-size: calc(0.75rem * var(--chat-scale, 1)); }
.messages .text code { font-size: calc(0.8125rem * var(--chat-scale, 1)); }

/* ---------- message spacing: compact ---------- */
:root[data-spacing="compact"] .msg { padding-top: 1px; padding-bottom: 1px; }
:root[data-spacing="compact"] .msg.first { margin-top: 6px; }
:root[data-spacing="compact"] .messages .divider { margin-top: 10px; margin-bottom: 2px; }
:root[data-spacing="compact"] .msg .reactions, :root[data-spacing="compact"] .msg .attachments { margin-top: 3px; }

/* ---------- higher contrast: stronger text, edges and focus, in the same colours. The !important lets these win over a
   theme's colours, which are set inline on <html>. Every value passes 4.5:1 on every theme surface (test/contrast.test.js). */
:root[data-contrast="more"] {
  --text: #ffffff !important;
  --soft: #e6eaf6 !important;
  --muted: #d0d6ea !important;
  --faint: #b4bcd8 !important;
  --accent-2: #b8c5ff !important;
  --offline: #8f99bd !important;
  --line: rgba(160, 180, 255, 0.22) !important;
  --line-strong: rgba(160, 180, 255, 0.36) !important;
  --field-line: rgba(160, 180, 255, 0.85) !important;
}
:root[data-contrast="more"] :focus-visible { outline-width: 3px; outline-offset: 3px; }
:root[data-contrast="more"] .msg:focus-visible { outline-width: 3px; outline-offset: -3px; }
:root[data-contrast="more"] .popover, :root[data-contrast="more"] .modal { border-color: var(--field-line); }
:root[data-contrast="more"] .popover .item:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- always show message actions: the bar sits on its own line under the message instead of floating above it ---------- */
:root[data-actions="always"] .msg > .tools {
  display: flex; position: static; grid-column: 2; justify-self: start; margin: 2px 0 2px -4px;
  background: none; border: 0; box-shadow: none; padding: 0;
}
:root[data-actions="always"] .msg > .tools button { min-width: 28px; height: 28px; }

/* ---------- underline links ---------- */
:root[data-links="underline"] a, :root[data-links="underline"] .link-btn, :root[data-links="underline"] .result .r-foot button { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- animated pictures that wait (animated-media.js) ---------- */
.gif-frame { display: block; max-width: 100%; height: auto; }
.attachments .gif-frame { max-width: min(400px, 100%); max-height: 300px; width: auto; height: auto; object-fit: cover; }
.attachments.multi .gif-frame { max-width: 240px; max-height: 240px; }
img.gif-paused { display: none; }
.gif-wrap { position: relative; display: block; }
.gif-wrap .gif-tag { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(5, 8, 20, 0.75); color: #fff; font: 700 0.6875rem/1.4 var(--font); letter-spacing: .04em; pointer-events: none; }
:root:not([data-motion="reduce"]) .gif-wrap.can-play:hover .gif-frame, :root:not([data-motion="reduce"]) .gif-wrap.can-play:focus-within .gif-frame { display: none; }
:root:not([data-motion="reduce"]) .gif-wrap.can-play:hover img.gif-paused, :root:not([data-motion="reduce"]) .gif-wrap.can-play:focus-within img.gif-paused { display: block; }
:root:not([data-motion="reduce"]) .gif-wrap.can-play:hover .gif-tag, :root:not([data-motion="reduce"]) .gif-wrap.can-play:focus-within .gif-tag { display: none; }

/* ---------- sound alerts on screen (sound-cues.js) ---------- */
#soundCues { position: fixed; z-index: 85; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.sound-cue {
  display: flex; align-items: center; gap: 8px; max-width: min(360px, calc(100vw - 32px)); padding: 7px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--field-line); color: var(--text); font-size: 0.8438rem; font-weight: 600; box-shadow: var(--shadow);
  animation: pop .14s ease-out;
}
.sound-cue svg { color: var(--accent-2); }
.sound-cue.leaving { opacity: 0; transition: opacity .3s; }

/* ---------- the settings section itself ---------- */
.a11y-set fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.a11y-set legend { font-size: 0.8125rem; font-weight: 600; color: var(--soft); margin-bottom: 8px; padding: 0; }
.a11y-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--field-line); }
.a11y-seg label { position: relative; display: block; }
.a11y-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.a11y-seg span { display: block; padding: 6px 12px; border-radius: 6px; font-size: 0.8438rem; font-weight: 600; color: var(--muted); }
.a11y-seg input:checked + span { background: var(--accent-strong); color: #fff; }
.a11y-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.a11y-size { display: flex; align-items: center; gap: 12px; }
.a11y-set .hint { display: block; margin-top: 6px; }
.a11y-size input[type=range] { flex: 1; margin: 0; }
.a11y-size output { min-width: 3.5em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.a11y-preview { margin: 4px 0 18px; padding: 6px 0; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--line-strong); overflow: hidden; }
.a11y-preview .msg { padding-right: 16px; }
.a11y-preview .msg:hover { background: none; }