/* UX batch 2026-10-26, area: ux (one file per area so parallel work does not collide) */

/* Small text that used --faint (#8b919b on paper, 3.0:1) gets a text token with at least 4.5:1 on paper,
   surface and sunken. --faint itself stays for borders, icons and diagram strokes. */
:root { --faint-text: #686e78; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --faint-text: #8f96a0; }
}
:root[data-theme="dark"] { --faint-text: #8f96a0; }
.th-map p, .th-links, .th-section .kicker, .crumbs .sep,
.cm-s-default .cm-comment, .CodeMirror-linenumber { color: var(--faint-text); }

/* Chat button (SPEC D41): text on the accent uses --accent-ink (white on dark blue in light mode, near-black
   on light blue in dark mode: 8.3:1 instead of 2.2:1). */
.chat-fab, .chat-user { color: var(--accent-ink); }
.chat-fab { transition: transform 0.18s ease, opacity 0.18s ease; }
.chat-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* ux-ux.js tucks it away while an answer table, a writing pad, a result or a main button lies beneath it;
   scrolling on brings it back, and keyboard focus always shows it. */
.chat.is-tucked .chat-fab { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
.chat.is-tucked .chat-fab:focus-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } }
@media (max-width: 560px) {
  /* icon only (base.css), 44 px tap target, closer to the corner */
  .chat-fab { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}