/* Hallmark · component: authentication · theme: Studio Japanese utility · critique: P4 H5 E4 S5 R5 V4 */
@import url('/tokens.css');
* { box-sizing:border-box; }
html,body { overflow-x:clip; }
body { margin:0; font-family:var(--font-body); color:var(--color-ink); background:var(--color-paper); line-height:1.6; }
.login { width:min(100%,440px); margin-inline:auto; padding:var(--space-md) max(var(--space-sm),env(safe-area-inset-left)); padding-bottom:max(var(--space-md),env(safe-area-inset-bottom)); }
.brand { display:inline-flex; align-items:center; gap:var(--space-xs); font-family:var(--font-display); font-size:var(--text-md); color:var(--color-ink); font-weight:700; text-decoration:none; min-height:44px; }
.mark { border:var(--rule-fine) solid var(--color-accent); border-radius:var(--radius-pill); color:var(--color-accent); width:36px; height:36px; display:grid; place-items:center; }
.login h1 { font-size:var(--text-md); margin:var(--space-md) 0 var(--space-2xs); font-style:normal; overflow-wrap:anywhere; }
.login p { margin-block:var(--space-xs); }
.login label { display:block; font-size:var(--text-xs); font-weight:700; margin-block:var(--space-sm); }
.login input { display:block; width:100%; margin-top:var(--space-2xs); min-height:var(--control-height); font:inherit; font-size:var(--text-sm); padding:var(--space-xs); border:var(--rule-fine) solid var(--color-rule-2); border-radius:var(--radius-input); color:var(--color-ink); background:var(--color-surface); }
.login button { font:inherit; font-size:var(--text-xs); font-weight:700; min-height:var(--control-height); width:100%; white-space:nowrap; padding:var(--space-xs) var(--space-sm); border:var(--rule-fine) solid var(--color-rule-2); border-radius:var(--radius-input); background:var(--color-surface); color:var(--color-ink); cursor:pointer; }
.login .primary { background:var(--color-ink); color:var(--color-accent-ink); border-color:var(--color-ink); margin-block:var(--space-sm); }
.login button:active { background:var(--color-paper-2); }
.login .primary:active { background:var(--color-ink-2); }
.login button:disabled,.login input:disabled { opacity:.5; cursor:not-allowed; }
.login button[aria-busy=true]::after { content:' …'; }
[aria-invalid=true] { border-color:var(--color-error); }
:focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
.login summary,#settings summary { cursor:pointer; min-height:44px; padding-block:var(--space-xs); font-size:var(--text-xs); }
.login details { border-top:var(--rule-fine) solid var(--color-rule); margin-top:var(--space-sm); }
.muted { color:var(--color-muted); font-size:var(--text-xs); }
#authMessage { min-height:1.6em; font-size:var(--text-xs); overflow-wrap:anywhere; }
#authMessage[data-state=error] { color:var(--color-error); }
#authMessage[data-state=success] { color:var(--color-accent); }
@media(hover:hover) and (pointer:fine) { .login button:not(:disabled):hover,.login input:hover { background:var(--color-paper-2); } .login .primary:not(:disabled):hover { background:var(--color-ink-2); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; } }
body[data-auth-pending] main,body[data-auth-pending] nav { display:none; }
.accountSession { padding-block:var(--space-2xs); margin-top:var(--space-xs); border-top:var(--rule-fine) solid var(--color-rule); }
.accountSession p { overflow-wrap:anywhere; }
#accountMessage { min-height:1.6em; font-size:var(--text-xs); }
#accountMessage[data-state=error] { color:var(--color-error); }
#accountMessage[data-state=success] { color:var(--color-accent); }
#accountDevices button,#settings button { width:auto; }