/* layouts/auth.css — Member authentication surface (Portal layout).
Centered column on a soft brand wash. Coach logo sits on --surface-page;
theme color appears in the ambient background and interactive accents only.
Form control classes (.auth__input-wrap, .auth__submit, etc.) are unchanged
from the shipped scale — do not inflate typography or touch heights casually. */
/* The portal is its own scroll container. base/reset.css pins html AND body to
height:100% + overflow:hidden, so nothing above this element can ever scroll:
with `overflow: hidden` here, any content taller than the viewport was
CLIPPED with no way to reach it — and because .auth__portal centers its
column, the clipping ate the TOP (the coach logo vanished under the status
bar) as well as the bottom. That is the state a member is actually in: on a
phone with the keyboard up, the usable height roughly halves, and on the
confirmation screen the badge + heading + chip + resend + back-link stack is
simply taller than a small handset. Scrolling here costs nothing when the
content fits — .auth__portal only centers while there IS free space — and it
is the difference between "reachable" and "gone" when it doesn't.
(polish session PS-1, 2026-07-23.) */
.auth {
position: relative;
display: flex;
flex-direction: column;
/* height:100% (not min-height:100dvh) — html AND body are already pinned to
100%, so this fills the viewport exactly and can never out-grow the body
into a region body's own overflow:hidden would clip. Same pattern the
Shell uses (.shell, shell/shell.css). */
height: 100%;
background: var(--surface-page);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Ambient brand wash — atmosphere only; logo sits on white below */
.auth__wash {
pointer-events: none;
position: absolute;
inset: 0 0 55% 0;
background:
radial-gradient(
ellipse 120% 80% at 50% -20%,
color-mix(in srgb, var(--brand-100) 70%, transparent),
transparent 65%
);
}
.auth__portal {
position: relative;
z-index: var(--z-base);
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: max(env(safe-area-inset-top), var(--space-10)) var(--space-6) var(--space-10);
}
.auth__portal-inner {
width: 100%;
max-width: 25rem;
display: flex;
flex-direction: column;
}
/* Vertical rhythm: logo → stack (heading, flash, form) */
.auth__logo-zone {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: var(--space-10);
}
/* The well — the canonical zone recipe (shell/zones.css `.shell__zone--well`):
--surface-sunken fill, --radius-xl corner, no border and no lift. Its inset
is the auth column's own --space-6, which is also the stack's section gap, so
the surface breathes at exactly the rhythm the content inside it keeps. Every
auth door — member magic link, /e enrollment, Devise sign in / registration /
password reset — puts its content here and nowhere else. */
.auth__well {
background-color: var(--surface-sunken);
border-radius: 12px; /* --radius-xl, px (mode-immune) */
padding: var(--space-6);
}
/* Section (24) → field (16) → label (8). One rhythm, every view. */
.auth__stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Secondary navigation — the other door. Outside the well, centered under it:
the member "Sign in / Sign up" switch, the "use a different email" back link,
and the Devise shared links all land here. */
.auth__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2) var(--space-4);
margin-top: var(--space-6);
text-align: center;
}
/* The tenant mark is the Shell Brandplate in its brand-box form — sizing lives
with the component (shell/shell.css, "THE BRAND BOX"), never here. The rules
below dress the PLATFORM lockup only. */
.auth__logo-fallback {
display: flex;
align-items: center;
gap: var(--space-3);
}
.auth__glyph {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
flex-shrink: 0;
}
.auth__glyph-core {
width: 13px;
height: 13px;
border-radius: var(--radius-full);
border: 3px solid var(--text-inverse);
}
.auth__wordmark-text {
font-family: var(--font-display);
font-size: var(--text-2xl);
letter-spacing: var(--tracking-tight);
}
.auth__wordmark-name {
color: var(--text-primary);
font-weight: var(--weight-semibold);
}
.auth__wordmark-accent {
color: var(--brand-600);
font-weight: var(--weight-bold);
}
/* ---- Mobile welcome (Newsreader) — desktop uses .auth__header ---- */
.auth__welcome {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: center;
}
.auth__welcome-title {
margin: 0;
font-family: var(--font-serif);
font-size: var(--text-3xl);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-tighter);
line-height: var(--leading-tight);
color: var(--text-primary);
}
.auth__welcome-subtitle {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-secondary);
}
/* ---- Form-side shared building blocks (used by every view) ---- */
.auth__header {
display: none;
flex-direction: column;
gap: var(--space-2);
}
.auth__eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--text-tertiary);
}
.auth__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tighter);
color: var(--text-primary);
}
.auth__subtitle {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-secondary);
}
.auth__form-body { display: flex; flex-direction: column; gap: var(--space-6); }
.auth__fields { display: flex; flex-direction: column; gap: var(--space-4); }
.auth__field { display: flex; flex-direction: column; gap: var(--space-2); }
.auth__label-row { display: flex; align-items: center; justify-content: space-between; }
.auth__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
/* Icon-leading input shell; the real sits borderless inside. Height is
padding-derived per the DS control convention. */
.auth__input-wrap {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-xl);
background: var(--surface-base);
border: 1.5px solid var(--input-border);
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.auth__input-wrap:focus-within {
border-color: var(--brand-600);
box-shadow: 0 0 0 var(--space-1) color-mix(in srgb, var(--brand-600) 18%, transparent);
}
.auth__input-icon { color: var(--text-tertiary); font-size: var(--text-xl); transition: color var(--duration-fast) var(--ease-out); }
.auth__input-wrap:focus-within .auth__input-icon { color: var(--brand-600); }
.auth__input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
outline: 0;
font-family: var(--font-display);
/* Floored at 16px on touch so iOS doesn't zoom the page on focus and strand
the member panned off-surface (base/tokens.css). */
font-size: max(var(--control-min-font-size), var(--text-base));
color: var(--text-primary);
}
.auth__input::placeholder { color: var(--input-placeholder); }
/* Rails wraps an invalid field in