/* Build 51 — readability and touch pass (applies on top of earlier styles).
   Findings from an automated audit of 4 website pages + 6 dashboard pages, desktop/phone, English/Arabic:
   ~270 text nodes under 11.5px, low-contrast notices/pills/scores, and phone links shorter than 36px. */
@font-face{font-family:TraxNaskh;src:url('/assets/fonts/TraxUrdu-Regular.woff2') format('woff2'),url('/assets/fonts/TraxUrdu-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:TraxNaskh;src:url('/assets/fonts/TraxUrdu-Bold.woff2') format('woff2'),url('/assets/fonts/TraxUrdu-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* minimum readable sizes */
.notice{font-size:13px!important;line-height:1.7;color:#4f3d7a!important}
.legalnote,.footnote{font-size:12.5px!important;color:#4d4866!important}
.pill{font-size:11.5px!important;font-weight:600;color:color-mix(in srgb,currentColor 62%,#000)!important;letter-spacing:.1px}
.columnhead,.sectionlabel,.navlabel,.eyebrow,.feature-label{font-size:12px!important}
.count{font-size:11px!important;font-weight:700}
.muted{color:#5b5672}
small{font-size:max(12px,0.85em)}
.key{font-size:10.5px!important}
.score{color:color-mix(in srgb,currentColor 70%,#000)!important}
.btn.small,.btn.sm{font-size:12.5px}
svg text{font-size:10.5px}
@media (prefers-color-scheme:dark){.notice{color:#e3dcff!important}.legalnote,.footnote{color:#c9c3e3!important}.pill{color:color-mix(in srgb,currentColor 75%,#fff)!important}.muted{color:#b8b3cf}.score{color:inherit!important}}
/* Arabic: slightly larger text and a proper Naskh face on every device */
html[lang=ar] body{font-family:"Segoe UI",TraxNaskh,Tahoma,"Noto Naskh Arabic","Geeza Pro",Arial,sans-serif;font-size:max(15.5px,1em)}
html[lang=ar] .pill,html[lang=ar] small,html[lang=ar] .count{font-size:12.5px!important}
html[lang=ar] .notice{font-size:14px!important}
html[lang=ar] h1,html[lang=ar] h2{letter-spacing:0}
/* phones: comfortable touch targets for text links and toggles */
@media (max-width:600px){
  footer a,.legalnote a,.site-footer a,a.brand,.contact-link,main p>a:only-child{display:inline-flex;align-items:center;min-height:40px;padding-block:6px}
  a.btn,button.btn,.btn{min-height:44px}
  .switch,[role=switch],input[type=checkbox]{min-width:24px;min-height:24px}
  label:has(> input[type=checkbox]){min-height:40px;display:flex;align-items:center;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* contrast: the muted grey (#7b8195, about 4:1 on white) fails WCAG AA for small text */
:root{--muted:#5d6377}
.count{color:#4f5568}
.sidebar .count{color:#e9e6f7}
.feature-label{color:#5a3fc4!important}
footer small,.site-footer small{color:#4d4866}
/* phones: no text under 12px in the dashboard (charts, glance rows, demo bar) */
@media (max-width:600px){
  .main :is(span,small,p,td,th,li,label,b,strong,div):not(.avatar):not(.workspace-avatar):not(.key):not(.source-logo):not(.pill):not(.count):not(:has(> *)){font-size:max(12px,1em)!important}
  .main svg text{font-size:11px}
}
html[lang=ar] .main :is(span,small,p,td,th,li,label):not(.avatar):not(.workspace-avatar):not(.key):not(.source-logo):not(.pill):not(.count):not(:has(> *)){font-size:max(12px,1em)!important}
.main .count{color:#3f4558!important}
.main span:not([class]){color:inherit}
/* language switcher: compact globe chip instead of a wide floating box that covered content */
.trax-language-control{padding:4px 6px 4px 10px!important;gap:6px!important;border-radius:999px!important;box-shadow:0 4px 16px rgba(24,33,64,.12)!important}
.trax-language-control::before{content:"🌐";font-size:16px;line-height:1}
.trax-language-control label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trax-language-control select{border:0!important;background:transparent!important;font-weight:600;min-height:36px;padding-inline:4px 22px!important}
@media (max-width:600px){body{padding-bottom:64px}.trax-language-control{bottom:10px!important;inset-inline-end:10px!important}}
@media (prefers-color-scheme:dark){.trax-language-control{background:#1f1c30!important;border-color:#3a3550!important;color:#ece9f8}.trax-language-control select{color:#ece9f8}}
@media (max-width:600px){[role=tab],.tabs button,.tab{min-height:40px}button[aria-pressed],.toggle,.switch{min-width:44px;min-height:32px}}
.main .source-logo,.main .source-logo *{font-size:12px!important}