/* #29 / #30 accessibility layer (loaded last). Spec: docs/specs/a11y.md
   - Tap targets >= 44x44 px on the phone layout (layout-neutral ::after hit areas for inline chips).
   - Secondary text tokens raised to WCAG AA (>= 4.5:1 for small text) in dark and light. */
html:not(.desk){--text-2:rgba(235,235,245,.74);--text-3:rgba(235,235,245,.6)}
@media (prefers-color-scheme:light){html:not(.desk){--text-2:#4A4A50;--text-3:#636369}}
html.desk.dk-light{--text-2:#48484D;--text-3:#6A6A70}
html:not(.desk) .icon-btn{min-width:44px;min-height:44px}
html:not(.desk) #viewTitle,html:not(.desk) .hy-seg button,html:not(.desk) .hy-pri,html:not(.desk) .hy-more,
html:not(.desk) .pg-sess,html:not(.desk) .pg-main,html:not(.desk) .dr-bb{min-height:44px}
html:not(.desk) .hy-pri,html:not(.desk) .hy-more{display:inline-flex;align-items:center}
/* layout-neutral hit areas: the visible chip stays small, the touch target reaches 44 px */
html:not(.desk) .c-prof,html:not(.desk) .pg-sess,html:not(.desk) .pg-main,html:not(.desk) .c-full{position:relative}
html:not(.desk) .c-prof::after,html:not(.desk) .pg-sess::after,html:not(.desk) .pg-main::after,html:not(.desk) .c-full::after{content:"";position:absolute;inset:-11px -2px}
html:not(.desk) .fc.fk-dr:not(.on) .fn{background:#D70015}
html:not(.desk) .t1{font-size:11px}
@media (prefers-color-scheme:light){html:not(.desk){
  --accent:#1A7A49;--accent-hover:#166A3F;--accent-text:#16683E;
  .pp-urg{color:#B3000D;background:rgba(255,59,48,.12)}
  .pp-wait{color:#4A4A50;background:rgba(120,120,128,.14)}
  .pp-alta{color:#8A4B00;background:rgba(255,149,0,.14)}
  .pp-fam{color:#7A2DA8;background:rgba(175,82,222,.12)}
  .more-menu .mm-r.warn{color:#9A5B00}
  .c-wait.ready,.c-wait.ready svg{color:#16683E}
  .c-wait.late,.c-wait.late svg{color:#8A4B00}
}}
/* Visual QA (#50) */
@media (max-width:360px){html:not(.desk) .tabbar .tab .t1{font-size:10px;letter-spacing:-.3px;text-overflow:clip}}
html:not(.desk) .tabbar .tab{min-width:0}
/* #170: the 44px tap target made the title sit at the top of its button, above the logo's center.
   Center the title (and its chevron/subtitle) inside the target so it lines up with the logo on every screen. */
html:not(.desk) #viewTitle{align-items:center}
html:not(.desk) .top .brand h1{display:flex;align-items:center}
html:not(.desk) #viewTitle b{line-height:1.2}