/* Sign-in (E01) and the signed-in account page of the API mode: one centred column on the cabinet ground, the panel and controls
   of the UI Kit. No demo shell here — the cabinet sidebar belongs to modules that are not connected yet. */
.ui-auth-page {min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);}
.ui-auth-main {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(24px,6vh,64px) 16px;gap:var(--space-6);}
.ui-auth-brand {display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;}
.ui-auth-brand img {width:32px;height:32px;}
.ui-auth-brand-text {display:flex;flex-direction:column;line-height:1.2;}
.ui-auth-brand-name {font-weight:600;font-size:var(--text-15);letter-spacing:-.01em;}
.ui-auth-brand-caption {color:var(--muted);font-size:var(--text-12);}
.ui-auth-card {width:100%;max-width:440px;box-sizing:border-box;padding:32px;border-radius:var(--dialog-radius);background:var(--panel);display:grid;gap:var(--space-5);container-type:inline-size;}
.ui-auth-card h1 {margin:0;font-size:var(--text-22);font-weight:600;letter-spacing:-.01em;text-wrap:balance;}
.ui-auth-card p {margin:0;color:var(--muted);font-size:var(--text-13);line-height:1.65;}
.ui-auth-step {display:grid;gap:var(--space-4);}
.ui-auth-step[hidden] {display:none;}
.ui-auth-actions {display:flex;flex-wrap:wrap;gap:var(--space-3);}
.ui-auth-actions .button {flex:1 1 auto;min-width:0;}
.ui-auth-card .button-primary {min-height:44px;font-size:var(--text-13);}
.ui-auth-card .button .icon {width:16px;height:16px;}
/* The code form breathes like the rest of the card: the label sits close to its field, the button stands apart from it. */
.ui-auth-code {display:grid;gap:var(--space-2);}
.ui-auth-code .ui-auth-actions {margin-top:var(--space-3);}
.ui-auth-code label {display:block;margin:0;font-size:var(--text-12);color:var(--text-soft);}
.ui-auth-code .form-input {margin:0;font-size:var(--text-18);letter-spacing:.32em;font-variant-numeric:tabular-nums;text-align:center;padding:12px;}
.ui-auth-code .form-input::placeholder {letter-spacing:.32em;}
.ui-auth-status {min-height:20px;}
.ui-auth-card p.ui-auth-status[data-tone=success] {color:var(--color-accent);}
.ui-auth-card p.ui-auth-status[data-tone=error] {color:var(--negative);}
.ui-auth-status[hidden] {display:none;}
.ui-auth-error {margin:0;color:var(--negative);font-size:var(--text-12);line-height:1.6;}
.ui-auth-error[hidden] {display:none;}
.ui-auth-note {font-size:var(--text-12)!important;color:var(--quiet)!important;}
.ui-auth-card .ui-notice {padding:var(--space-4);}
.ui-auth-card .ui-notice .button {justify-self:start;margin-top:var(--space-2);}
.ui-auth-signed-out {display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--text-12);}
.ui-auth-signed-out .icon {width:14px;height:14px;color:var(--color-accent);}

/* Account page: a slim top bar instead of the cabinet shell, then the profile block. */
.ui-auth-topbar {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,36px);--ui-divider-bottom:var(--line-soft);}
.ui-auth-topbar .button {flex-shrink:0;}
.ui-account-page {width:100%;max-width:1040px;margin:0 auto;padding:clamp(20px,4vh,40px) 16px 40px;box-sizing:border-box;display:grid;gap:var(--space-5);}
.ui-account-page h1 {margin:0;font-size:var(--text-22);font-weight:600;letter-spacing:-.01em;}
.ui-account-page .ui-section-block-body {gap:var(--space-5);}
.ui-account-facts {margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5);}
.ui-account-facts>div {display:grid;gap:4px;min-width:0;}
.ui-account-facts dt {font-size:var(--text-12);color:var(--muted);}
.ui-account-facts dd {margin:0;font-size:var(--text-13);overflow-wrap:anywhere;}
.ui-account-facts dd[data-empty] {color:var(--quiet);}
.ui-account-role {display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--surface-raised);font-size:var(--text-12);color:var(--text-soft);}
.ui-account-state {display:grid;gap:var(--space-3);justify-items:start;}
.ui-account-state h2 {margin:0;font-size:var(--text-16);font-weight:600;}
.ui-account-state p {margin:0;color:var(--muted);line-height:1.65;}
.ui-auth-loading {display:grid;gap:var(--space-4);}
/* The name form of the account page: one field, the shared form actions under a divider, the draft notice above. */
.ui-account-name-form {display:grid;gap:var(--space-3);max-width:420px;}
.ui-account-name-form .form-label {margin-top:0;}
.ui-account-name-form .form-input {margin-top:0;}
.ui-account-name-form .ui-form-actions {margin-top:var(--space-2);}
.ui-account-name-form .ui-status[hidden],.ui-account-name-form .ui-auth-error[hidden] {display:none;}
@media(max-width:480px){
 .ui-auth-card {padding:24px 20px;}
 .ui-account-facts {grid-template-columns:minmax(0,1fr);}
 .ui-auth-topbar .ui-auth-brand-caption {display:none;}
}
@container (max-width:340px){.ui-auth-actions .button {flex-basis:100%;}}