/* ── Polish layer ───────────────────────────────────────────────────────────
   Base sheet, so this covers terms, admin, recover and the status pages.
   Motion is disabled under prefers-reduced-motion at the end of the block. */

p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}

/* Controls should acknowledge hover and press everywhere, not only on the
   marketing pages. */
.btn{transition:transform .14s cubic-bezier(.2,.9,.3,1.2),box-shadow .2s ease,
     background .2s ease,border-color .2s ease,filter .2s ease}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.97)}
.btn-primary{box-shadow:0 4px 14px rgba(47,128,237,.28)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(47,128,237,.4)}

/* Focus was invisible here, so keyboard users had nothing to follow. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,.btn:focus-visible{
  outline:2px solid var(--yellow);outline-offset:3px;border-radius:10px;
}
.form-input{transition:border-color .18s ease,box-shadow .18s ease}
.form-input:focus{box-shadow:0 0 0 3px rgba(47,128,237,.16)}

/* Admin tables: rows should track under the cursor on a dense data screen. */
.data-table tbody tr{transition:background .15s ease}
.data-table tbody tr:hover{background:rgba(255,255,255,.03)}

::selection{background:rgba(47,128,237,.35);color:#fff}

html{scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}
body::-webkit-scrollbar{width:10px}
body::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:99px}
body::-webkit-scrollbar-thumb:hover{background:#3a3a3a}

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