/* The way in, in the folio (the Sign in, Create an account, Forgot password and Reset password boards, group seven,
   2026-10-04). Paper; a field to a ruled line, its label small above it; Show at the right of a password; one ink
   button at the foot, the others framed. The deck log's sheet (02-auth.css) no longer dresses these four pages. */
.au-page.active { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--fo-paper); color: var(--fo-ink); font-family: var(--fo-sans); }
.au-page .au-form { flex: 1 0 auto; display: flex; flex-direction: column; }
.au-page .au-form[hidden] { display: none; }
.au-page .au-fill { flex: 1 0 12px; }

/* the head: the mark over the name on Sign in; elsewhere a title, an eyebrow over it on the password pages */
.au-page .au-bar { display: flex; align-items: center; box-sizing: content-box; height: 44px; padding: env(safe-area-inset-top, 0px) var(--fo-gutter) 0; }
.au-page .au-back { position: relative; min-height: 44px; padding: 0; border: none; background: none; font: inherit; font-size: 14px; color: var(--fo-ink); cursor: pointer; }
.au-page .au-head { display: flex; flex-direction: column; gap: 12px; padding: 44px var(--fo-gutter) 28px; }
#registerForm .au-head { padding: 18px var(--fo-gutter) 20px; }
.au-page .au-head.is-sign { padding-top: calc(env(safe-area-inset-top, 0px) + 48px);   /* the board's 92 less its drawn 44px status bar */ padding-bottom: 28px; }
.au-page .au-mark { display: block; margin-bottom: 14px; }
.au-page .au-title { margin: 0; font-family: var(--fo-serif); font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: -0.035em; }
.au-page .au-title i { color: var(--fo-graphite); }
.au-page .au-eyebrow { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.au-page .au-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 13px var(--fo-gutter); border-top: 1px dashed var(--fo-hair); font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.au-page .au-phases span:nth-child(2) { text-align: center; }
.au-page .au-phases span:nth-child(3) { text-align: right; }

/* the fields */
.au-page .au-fields { display: flex; flex-direction: column; border-top: 1px dashed var(--fo-hair); }
.au-page .au-field { display: flex; flex-direction: column; gap: 6px; padding: 16px var(--fo-gutter) 12px; border-bottom: 1px dashed var(--fo-hair); cursor: text; }
.au-page .au-field.has-show { flex-direction: row; align-items: center; gap: 0; padding: 0; }
.au-page .au-field.is-handle { padding: 0; gap: 0; }
.au-page .au-field__in { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px var(--fo-gutter) 12px; min-width: 0; cursor: text; }
.au-page .au-label { font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-graphite); }
.au-page .au-input { width: 100%; min-width: 0; padding: 0; border: none; border-radius: 0; background: transparent; outline: none; font-family: var(--fo-sans); font-size: 16px; letter-spacing: -0.01em; color: var(--fo-ink); -webkit-appearance: none; appearance: none; }
.au-page .au-input.is-secret[type="password"] { letter-spacing: 0.1em; }
.au-page .au-input::placeholder { color: var(--fo-pale); opacity: 1; }
.au-page .au-field:focus-within { box-shadow: inset 0 -1px 0 var(--fo-ink); }
.au-page .au-field[data-fault] .au-label { color: var(--fo-red); }
.au-page .au-field[data-fault] { box-shadow: inset 0 -1px 0 var(--fo-red); }
.au-page .au-show { align-self: stretch; min-height: 58px; padding: 0 var(--fo-gutter); border: none; background: none; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-ink); cursor: pointer; }
.au-page .au-handle { display: flex; align-items: baseline; gap: 1px; font-size: 16px; }
/* The @ is pale until the name is being written, then ink: the username's own mark of focus beside the row's rule. */
.au-page .au-handle { color: var(--fo-pale); }
.au-page .au-handle:focus-within { color: var(--fo-ink); }
.au-page .au-at { color: inherit; }
.au-page .au-note { margin: 0; padding: 0 var(--fo-gutter) 10px; font-size: 12px; line-height: 1.4; color: var(--fo-graphite); }
.au-page .au-note.is-red { color: var(--fo-red); }
.au-page .au-take { position: relative; padding: 0; border: none; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-page .au-take::after { content: ''; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }

/* under the fields */
.au-page .au-forgot { display: flex; justify-content: flex-end; padding: 12px var(--fo-gutter) 0; }
.au-page .au-forgot a, .au-page .au-prompt a, .au-page .au-agree a { position: relative; color: var(--fo-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.au-page .au-forgot a { font-size: 14px; padding: 12px 0; margin: -12px 0; }
.au-page .au-why { margin: 0; padding: 14px var(--fo-gutter) 0; font-size: 14px; line-height: 1.5; color: var(--fo-graphite); }
.au-page .au-agree { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); cursor: pointer; }
.au-page .au-agree input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0 -10px 0 0; padding: 0; border: 0; }   /* if it is laid out at all, its gap is taken back */
.au-page .au-box { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; box-sizing: border-box; border: 1.5px solid var(--fo-ink); background: #FDFCFA; }
.au-page .au-box::before { content: ''; position: absolute; left: -13px; right: -13px; top: -13px; bottom: -13px; }
.au-page .au-agree input:checked + .au-box::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--fo-ink); }
.au-page .au-agree input:focus-visible + .au-box { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
.au-page .au-human { padding: 12px var(--fo-gutter) 0; }
.au-page .au-human > div { width: 100%; }   /* the flexible check fills the column */
.au-page .au-human:empty { display: none; }
.au-page .au-checks { display: flex; gap: 16px; padding: 14px var(--fo-gutter) 0; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-pale); }
.au-page .au-check::before { content: '✓'; margin-right: 6px; visibility: hidden; }
.au-page .au-check.is-met { color: var(--fo-ink); }
.au-page .au-check.is-met::before { visibility: visible; }

/* what the page says back: a refusal in the red, a thing to check in the ink, done in the graphite */
.au-page .au-status { margin: 12px var(--fo-gutter) 0; font-size: 12px; line-height: 1.5; color: var(--fo-ink); }
.au-page .au-status:empty { display: none; }
.au-page .au-status[data-kind="error"] { color: var(--fo-red); }
.au-page .au-status[data-kind="done"] { color: var(--fo-graphite); }

/* the foot: one ink button, or, Google, the framed way elsewhere */
.au-page .au-foot { display: flex; flex-direction: column; gap: 12px; padding: 10px var(--fo-gutter) calc(env(safe-area-inset-bottom, 0px) + 34px); }
.au-page .au-go { height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: 0; background: var(--fo-ink); color: #FDFCFA; font-family: var(--fo-sans); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; }
.au-page .au-go i { font-family: var(--fo-serif); }
.au-page .au-go[disabled] { opacity: .6; cursor: default; }
.au-page .au-or { display: flex; align-items: center; gap: 14px; font-family: var(--fo-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fo-pale); }
.au-page .au-or::before, .au-page .au-or::after { content: ''; flex: 1; border-top: 1px dashed var(--fo-hair); }
.au-page .au-google { min-height: 44px; display: flex; justify-content: center; }
.au-page .au-alt { height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fo-ink); background: transparent; font-family: var(--fo-sans); font-size: 14px; font-weight: 500; color: var(--fo-ink); cursor: pointer; }
.au-page .au-alt[disabled] { opacity: .6; cursor: default; }
.au-page .au-prompt { margin: 2px 0 0; text-align: center; font-size: 14px; color: var(--fo-graphite); }

/* check your email */
.au-page .au-said { display: flex; flex-direction: column; gap: 16px; padding: 40px var(--fo-gutter) 0; }
.au-page .au-envelope { color: var(--fo-ink); }
.au-page .au-said .au-title { line-height: 1.02; outline: none; }
.au-page .au-line { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.au-page .au-line b { font-weight: 500; }
.au-page .au-quiet { margin: 0; font-size: 12px; line-height: 1.5; color: var(--fo-graphite); }
.au-page .au-said .au-status { margin: 0; }

.au-page :focus-visible { outline: 2px solid var(--fo-ink); outline-offset: 2px; }
/* The field being written says so with its own rule turning ink, and nothing more (owner, 2026-10-05: a second, heavier
   line under the typing read as a fault). Where Show shares the row, the half holding the input draws the same line on
   the same pixel, so the focus is seen beside the input and the row still shows one rule. */
.au-page .au-input:focus-visible { outline: none; }
.au-page .au-field__in:focus-within { box-shadow: inset 0 -1px 0 var(--fo-ink); }
/* Review, 2026-10-05: a refused field keeps its red rule under the focus (the half holding the input drew ink over it),
   and the username, whose note sits under the input, draws its focus once, at the foot of the row, not above the note. */
.au-page .au-field[data-fault] .au-field__in:focus-within { box-shadow: inset 0 -1px 0 var(--fo-red); }
.au-page .au-field.is-handle .au-field__in:focus-within { box-shadow: none; }
.au-page .au-show:focus-visible, .au-page .au-back:focus-visible { outline-offset: -4px; }