/* Layout only for the public account pages. Component looks (panel, fields, buttons, notices) come from
   aegis-components.css; colours are aegis tokens. */

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.account {
    box-sizing: border-box;
    min-height: 100vh;
    max-width: 440px;
    margin: 0 auto;
    padding: 40px 16px 24px;
    display: grid;
    align-content: start;
    gap: 16px;
}

.account-brand {
    font-weight: 600;
    font-size: 15px;
    color: var(--foreground);
    text-decoration: none;
    justify-self: center;
}

.account-title { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.account-lead { margin: 0 0 16px; color: var(--muted-foreground); font-size: 14px; line-height: 1.5; }

.account form { display: grid; gap: 14px; }
.account .aegis-notice { margin-bottom: 14px; }
.account form .aegis-btn { width: 100%; justify-content: center; }
/* Same aegis gap as the dashboard: the .aegis-btn recipe doesn't reset the underline on links. */
a.aegis-btn { text-decoration: none; }

.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.check input { margin-top: 2px; }
.check-error { color: var(--destructive-foreground); font-size: 12px; }

.account-alt { margin: 4px 0 0; font-size: 14px; color: var(--muted-foreground); text-align: center; }
/* Foreground ink with an underline: --primary is too dark to read as text on the dark surface. */
.account-alt a, .account-foot a, .account-row a, .check a { color: var(--foreground); text-underline-offset: 2px; }
.account-row { display: flex; justify-content: flex-end; font-size: 13px; margin-top: -6px; }

.account-foot {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: var(--muted-foreground);
}

.link-button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.terms h2 { font-size: 15px; margin: 18px 0 6px; }
.terms p, .terms li { font-size: 14px; line-height: 1.55; }
.terms ul { padding-left: 20px; margin: 0; }