/* ease of use (ui-ux-pro-max pass): keyboard focus, press feedback, text contrast, larger tap areas, calmer text wrapping */

/* contrast: small orange / grey / red text was below 4.5:1 on cards and tinted buttons (light theme only, dark is fine) */
:root:not([data-theme="dark"]){--org:#9c5a0a;--muted:#5f584f;--bad:#b5392a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--org:#eaa560;--muted:#b5a594;--bad:#f08e7b}}
.goal .gf{color:var(--tm)}

/* keyboard focus: a clear ring only when moving with Tab (mouse clicks show nothing new) */
:where(button,a[href],[role=button],[role=tab],summary,[tabindex]:not([tabindex="-1"]),input[type=range],input[type=checkbox],input[type=radio]):focus-visible{outline:3px solid var(--acc);outline-offset:2px}
:where(input:not([type=range]):not([type=checkbox]):not([type=radio]),textarea,select):focus-visible{border-color:var(--acc)!important;box-shadow:0 0 0 4px var(--acc-w)!important}
.top :where(button,a[href]):focus-visible,.cam-bar :where(button,a[href]):focus-visible{outline-color:#fff}

/* press feedback: a short darkening on tap, no movement, so the layout never jumps */
button,a,[role=button],label{-webkit-tap-highlight-color:transparent}
:where(button,[role=button]):not(:disabled):active{filter:brightness(.93)}
:where(button,[role=button]):disabled,[aria-disabled="true"]{cursor:not-allowed}
summary,label[for]{cursor:pointer}

/* text links that act as buttons were 20–26px tall: a taller invisible tap area, same look */
.cta .ghost,.gh-l{position:relative}
.cta .ghost::after,.gh-l::after{content:"";position:absolute;inset:-10px -6px}

/* anchors and jumps land below the sticky top bar, not under it */
[id]{scroll-margin-top:calc(var(--toph,64px) + 16px)}

/* headings break in balanced lines, paragraphs avoid a lone last word */
h1,h2,h3,.hb-t{text-wrap:balance}
p{text-wrap:pretty}

::selection{background:var(--acc-l);color:var(--ink)}

/* phones: every tap target at least 40–44px */
@media (max-width:700px){
  .top .ph-start.btn-acc,.acct.out .acct-in{position:relative}
  .top .ph-start.btn-acc::after,.acct.out .acct-in::after{content:"";position:absolute;inset:-5px}
  .exsw button{min-height:40px;padding:6px 14px}
  .ts-y,.ts-pp{min-height:40px}
  .gt-sq{min-height:44px}
  .lnk{display:inline-flex;align-items:center;min-height:40px}
}