/* Readability and reach fixes from the UX review. Loaded last; no brand colour or identity changes here. */

/* Mixed Arabic/English: a name or title takes its direction from its own first letter, so "7° South" and
   "-20%" read correctly inside Arabic pages; alignment still follows the page. */
:where(h1, h2, h3, h4, .s-name, .tpick-body strong, .ticket-title, .rfq-title, .ev-name, .prof-company, .reel-bubble .caption, .bubble-who) {
  unicode-bidi: plaintext; text-align: match-parent;
}
/* Browsers align a plaintext line by its own first letter, so an English name would sit on the left of an Arabic page. */
:where([dir=rtl]) :where(h1, h2, h3, h4, .s-name, .tpick-body strong, .ticket-title, .rfq-title, .ev-name, .prof-company, .reel-bubble .caption, .bubble-who) { text-align: right; }
:where([dir=rtl] .hx-inner) > :where(h1) { text-align: inherit; }

/* Dark theme: text drawn in the brand navy disappears on the dark page; it uses the dark theme's own link blue. */
html[data-theme="dark"] :is(.exhib-label, .s-foot .open, .s-name .ic, .stats strong, .booth-id .s-meta a, .services .ic,
  .gen summary, .mr-confirmed, .prof-link, .prof-company, .bubble-who, .meet-date, .toast-ok) { color: var(--accent-2); }
html[data-theme="dark"] .mr-confirmed { border-color: var(--accent-2); }
html[data-theme="dark"] .chip-rail .chip.on { color: var(--bg); }

/* Nothing smaller than 12px. */
.hall-no, .tpick-kind, .tile-topic, .ts-label { font-size: .75rem; }

/* Touch: every control reachable with a thumb (44px), without moving the layout. */
@media (pointer: coarse) {
  .site-header .nav-actions .icon-btn, .contact-links .icon-btn { width: 44px; height: 44px; }
  .ts-field select, .ts-field input { min-height: 44px; }
  .exhib { min-height: 44px; }
  .post-actions .like, .post-actions .save, .post-actions > a, .post-actions summary, .post-hide .icon-btn { position: relative; }
  .post-actions .like::after, .post-actions .save::after, .post-actions > a::after, .post-actions summary::after,
  .post-hide .icon-btn::after { content: ""; position: absolute; inset: -9px; }
  .site-header .logo { min-height: 44px; }
}

/* Initials on brand-coloured avatars: darken the fill slightly so white text keeps AA contrast on every brand colour. */
.avatar:not(:has(img)):not(.brand-logo) { background: color-mix(in srgb, var(--c, var(--pine)) 76%, #000); }