/* Sign-in pages. Colours and fonts come from /data/brand.css. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--surface); color: var(--text); font: 16px/1.55 var(--font-text); }
.stripe { height: 4px; background: linear-gradient(90deg, var(--stripe-1) 0 34%, var(--stripe-2, var(--stripe-1)) 34% 67%, var(--stripe-3, var(--stripe-1)) 67%); }
.auth { max-width: 420px; margin: 56px auto; padding: 32px 28px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 3px rgb(16 24 40 / 8%); }
.logo { height: 40px; width: auto; display: block; margin-bottom: 22px; }
h1 { font: 600 1.6rem/1.2 var(--font-display); margin: 0 0 8px; }
.intro { color: var(--muted); margin: 0 0 18px; }
label { display: block; font-weight: 600; font-size: .9rem; margin: 14px 0 4px; }
input { width: 100%; font: inherit; color: var(--text); background: var(--card); padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; }
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.hint { font-size: .82rem; color: var(--muted); margin: 4px 0 0; }
button { margin-top: 20px; width: 100%; font: 600 1rem var(--font-text); color: var(--card); background: var(--primary); border: 0; border-radius: 6px; padding: 11px; cursor: pointer; }
button:hover { background: color-mix(in srgb, var(--primary) 85%, black); }
button:disabled { opacity: .6; cursor: default; }
.status { min-height: 1.4em; margin: 12px 0 0; font-size: .92rem; }
.status.error { color: #b42318; }
a { color: var(--primary); }
.muted { color: var(--muted); font-size: .88rem; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
@media (max-width: 480px) { .auth { margin: 0; border-radius: 0; border-width: 0 0 1px; min-height: calc(100vh - 4px); } }