/* Auth base (kit-spec-1): house tokens only. */
.top{padding-block:var(--s-7) var(--s-4)}
.brand{margin:var(--s-2) 0 0;font:600 var(--t-lg)/1 var(--serif)}
.auth{max-width:26rem;padding-bottom:var(--s-8)}
.demo{margin:0 0 var(--s-6);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--sunk);font-size:var(--t-sm);color:var(--ink-2)}
[data-screen]{display:grid;gap:var(--s-4)}
[data-screen] h1{margin:0;outline:none}
form{display:grid;gap:var(--s-3)}
.field{display:grid;gap:6px}
.pw{position:relative;display:flex;gap:var(--s-2)}
.pw input{flex:1}
.show{white-space:nowrap;min-width:64px}
.chk{display:flex;align-items:center;gap:6px;font-size:var(--t-sm)}
.rules{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:var(--t-xs);color:var(--ink-2)}
.rules .ok{color:var(--good)}
.error{display:flex;gap:6px;margin:0}
.error::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;margin-top:2px;border:1.5px solid;border-radius:50%;font:700 11px/1 var(--sans)}
.note{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.links{margin:0;font-size:var(--t-sm);color:var(--ink-2)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0}
.acts{margin-top:var(--s-2)}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
  .links a, .chk { display: inline-flex; align-items: center; min-height: 44px; }
}