/* Accessibility and onboarding consent. Loaded after app.css so these win; tokens only, so dark mode keeps working. */

/* Text contrast: light-mode amber was 3.96:1 on its soft background and 4.12:1 on the page; now >= 4.97:1 (WCAG AA 4.5:1). */
:root:not([data-theme="dark"]){--amber:#935b0a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--amber:#e3a64b}}

/* Visible keyboard focus everywhere, including inputs that hide their own outline inside a styled box. */
:focus-visible{outline:2px solid var(--lake);outline-offset:2px}
.search:focus-within,.crm-search:focus-within,.pf-hsearch:focus-within,.tx-search:focus-within{outline:2px solid var(--lake);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lake);outline-offset:1px}
.who select:focus-visible{outline:2px solid var(--lake)}

/* White text on the red badge failed in dark mode (3.0:1); use the surface color, which passes in both themes. */
.p2-badge{color:var(--surface)}

/* Touch screens (pointer: coarse). Checked by scripts/qa/mobile-check.mjs (npm run verify:mobile) and tests/mobile-css.test.ts.
   1. Text fields at 16px or more: iOS Safari zooms the whole page when a field under 16px gets focus. rem keeps them growing
      with the person's text size. !important because view styles set smaller sizes with higher specificity.
   2. Every control at least 44x44 (Apple HIG). Small visual controls keep their look and get a larger hit area instead. */
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea{font-size:max(16px,1rem)!important}
  .paper input{font-size:1.25rem!important}
  /* !important: views set smaller min-heights (32 to 40px) with more specific selectors. */
  .btn,.iconbtn,.who,.search,.chips button,.chan button,.tiers button,.tabs button,.mn-switch button,.aichat .sugg button,.ai-recs .chip,.au-op button,.au-token,
  .pf-toc button,.crm-path button,.p2-link,.crm-mvsel,.p2-actbtn,summary,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),
  label:has(>input[type=checkbox]),label:has(>input[type=radio]),.ob-check label,.sec-switch{min-height:44px!important}
  .p2-big,.crm-actlist .btn{min-height:48px!important}
  .pf-hsearch input{min-height:46px!important}
  .btn,.iconbtn,.who,.chips button,.tabs button{min-width:44px!important;justify-content:center}
  label:has(>input[type=checkbox]),label:has(>input[type=radio]),.ob-check label,.sec-switch{align-items:center}
  /* Small switches and check circles: the visible part stays small, the tappable part is 44x44. */
  .sw,.check{position:relative}
  .sw::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%);z-index:1}
  .check::before{content:"";position:absolute;inset:-15px;z-index:1}   /* from the padding box: 15 + 2x15 = 45 */
  .row:has(>.check){min-height:48px}
  a.btn,a.tx-num{display:inline-flex;align-items:center}
  a.tx-num{min-height:44px}
  .hbar .hr2[tabindex],.hbar .hr2[role=button]{min-height:44px}
}

/* Onboarding: age statement and Terms checkboxes. */
.ob-check label{display:flex;gap:10px;align-items:flex-start;font-size:.8438rem;font-weight:500;color:var(--ink);line-height:1.45;cursor:pointer}
.ob-check input[type=checkbox]{width:20px;height:20px;min-height:0;flex:none;margin:1px 0 0;accent-color:var(--lake)}
.ob-check a{color:var(--lake);font-weight:600}
.ob-check .hint{margin-left:30px}

/* Settings, Security. */
.sec-row{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}
.sec-switch{display:flex;gap:10px;align-items:flex-start;cursor:pointer;color:var(--ink);font-weight:500}
.sec-switch input{width:20px;height:20px;flex:none;margin:2px 0 0;accent-color:var(--lake)}

/* Screen-reader-only text. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}