/* Login and register: one narrow column, the form is the page. */
.auth { min-height: 100dvh; display: flex; flex-direction: column; }
.auth-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--gutter); max-width: 520px; width: 100%; margin-inline: auto; }
.auth-top img { height: 34px; width: auto; }
.auth-main { width: 100%; max-width: 440px; margin-inline: auto; padding: var(--space-5) var(--gutter) var(--space-8); display: grid; gap: var(--space-4); align-content: start; }
.auth-main h1 { font-size: var(--step-5); color: var(--brand); }
.pw { position: relative; display: block; }
.pw .input { padding-inline-end: calc(var(--tap) + var(--space-2)); }
.pw .icon-btn { position: absolute; inset-block-start: 0; inset-inline-end: 0; color: var(--text-muted); }
.pw .icon-btn[aria-pressed="true"] { color: var(--brand); }
.auth-alt { text-align: center; }
.auth-alt a, .check a { font-weight: var(--weight-strong); color: var(--brand); }
.auth-help { text-align: center; font-size: var(--step-0); }
.done { display: grid; gap: var(--space-4); justify-items: start; }
.legal { max-width: 680px; }
.legal article { display: grid; gap: var(--space-3); }
.legal h2 { font-size: var(--step-3); margin-block-start: var(--space-3); }
.legal ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: var(--space-2); }
[data-only="ar"] { order: -1; }
.inapp-note { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); font-size: var(--step-0); }
[dir="rtl"] .inapp-note { box-shadow: inset -4px 0 0 var(--accent); }
.field .id-note:empty { display: none; }
.field .id-note.bad { color: var(--danger); font-weight: var(--weight-strong); }