/* HOUSE RULES: THE FOOTER AND THE SIGNED-OUT PAGE, the same in every Wildcard app. Source: wildcardsvc/house-rules (web/frame.css).
   Apps carry a copy made by `house-rules sync`: never edit the copy. It needs tokens.css, and takes the app's colour through
   --accent, --on-accent and --focus. The portal's pages are the reference; the markup is in menu/render.js (`footer()`,
   `signedOut()`, `authMain()`). The slim top bar above the signed-out card is the menu's own (sidebar.css).

   Signed-out page:  topbar, then  main.authmain > .authwrap > .card.authcard > ( h1, p.authlede, form.authform, p.authfine ),
   then the footer. In a form (controls.css): label, input, input.input--code (a six-digit code), label.check, button.btn.btn--block,
   p.authstatus; a button that looks like a link is button.authlink. It needs controls.css and components.css too (the card is .card). */

/* ---------- the footer: the last thing on every page, signed in or out */
.foot { margin-top: auto; border-top: 1px solid var(--line); color: var(--fog); font-size: var(--fs-small); line-height: 1.65; }
.foot__in { width: min(100% - 48px, 1100px); margin-inline: auto; padding: 22px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.foot p { margin: 0; }
.foot b { font-weight: var(--fw-bold); }
.foot a { color: var(--lilac); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .foot__in { width: min(100% - 32px, 1100px); } }
@media (max-width: 640px) { .foot__in { justify-content: center; text-align: center; } }

/* ---------- the signed-out page: a slim bar, one card, the footer */
body.auth { min-height: 100vh; display: flex; flex-direction: column; }
.authmain { flex: 1; width: 100%; max-width: none; margin: 0; padding: 56px 0 96px; } /* explicit: an app's own `main { max-width; margin: 0 auto }` must not shrink the card */
.authwrap { width: min(100% - 48px, 1100px); margin-inline: auto; display: grid; place-items: start center; }
.authcard { max-width: 460px; font-size: var(--fs-body); line-height: 1.65; } /* on top of the shared .card (components.css) */
.authcard h1 { margin: 0; font: var(--fw-bold) var(--fs-title)/1.1 var(--font-display); letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.authlede { margin: 12px 0 0; max-width: 40rem; color: var(--text-2); }
.authform { display: grid; gap: 10px; margin-top: 24px; }
.authform label:not(.check) { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.authform .btn { margin-top: 8px; }
.authstatus { margin: 0; min-height: 1.5em; font-size: var(--fs-body); color: var(--text-2); text-align: center; }
.authstatus p { margin: 0; }
.authstatus.is-error { color: var(--text); font-weight: var(--fw-bold); }
.authfine { margin: 18px 0 0; font-size: var(--fs-small); color: var(--fog); }
.authfine a, .authlink { color: var(--lilac); }
.authlink { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.authlink:disabled { color: var(--fog); text-decoration: none; cursor: default; }
form.authfine { display: block; margin-top: 18px; }
@media (max-width: 640px) {
  .authmain { padding: 36px 0 72px; }
  .authwrap { width: min(100% - 32px, 1100px); }
}