/*
 * Flow Family auth pages -- glue between the design system and this app.
 *
 * tokens.css and components.css are the design system copied VERBATIM from
 * the Flow Family system, so revising the system stays a file copy. Nothing
 * in those two files is edited here. This file holds only what exists
 * because the card is dropped inside flowboard.com's own markup, plus the
 * two things the system has no component for yet (an error block and a
 * phone-width adaptation).
 *
 * Load order: tokens.css, components.css, auth-page.css.
 * Every auth page sets body class "flow-auth-page" (see $body_class).
 */

/* --- Additions the design system has no token for yet. ------------------
 * Flagged on purpose: these four are NOT from tokens.json. If the system
 * gains error tokens, delete these and use those instead. */
:root {
    --fv-error-bg: #fdecec;
    --fv-error-border: #e4b4b4;
    --fv-error-ink: #8a2a2a;
    --fv-success-ink: #2b6a3f;
}

/* --- Filling the window -------------------------------------------------
 * .flow-auth is min-height:100% in the system, which needs a definite
 * height on every ancestor. #content-wrapper is an auto-height flex
 * container, so that percentage resolves to nothing here. Viewport units
 * instead: dvh where it exists, so mobile Safari's collapsing URL bar does
 * not leave the card hanging below the fold. */
html, body { height: 100%; }
body.flow-auth-page { margin: 0; background: var(--backdrop); }
body.flow-auth-page .flow-auth { flex: 1 1 auto; min-height: 100vh; }
@supports (min-height: 100dvh) {
    body.flow-auth-page .flow-auth { min-height: 100dvh; }
}

/* header.css sets #content-wrapper to width:100vw. 100vw counts the
 * vertical scrollbar, so the moment the card is taller than the window the
 * page also scrolls sideways. No auth page has a full-bleed row that needs
 * 100vw. */
body.flow-auth-page #content-wrapper {
    width: 100%;
    min-height: 100%;
}

/* /user/password/<key> contains "user", so header.php hands it
 * #content-wrapper.myflows, which header.css lays out as a row for the
 * dashboard's 100vh sidenav. There is no sidenav on an auth page, and the
 * row direction would stand the card on its side. */
body.flow-auth-page #content-wrapper.myflows { flex-direction: column; }

/* --- The card must fit the window -------------------------------------
 * .flow-auth is `display: grid; place-items: center` in the system, which
 * leaves its single implicit column sized to its CONTENT -- and .flow-card
 * carries a definite width:540px, so that track is 540px wide however
 * narrow the window is. The card's own max-width:100% then resolves
 * against the 540px track and clamps nothing. Measured in a 390px
 * viewport: card 540px at left:-87px, scrollWidth 556, rounded corners off
 * screen on both sides and the page scrolling sideways.
 *
 * A minmax(0, 1fr) track is exactly the container's width, so max-width:100%
 * finally has something real to resolve against, and the card keeps its full
 * 540px wherever there is room for it. Same family as the centring-flex-
 * parent trap: a centred item that overflows puts the overflow where it
 * cannot be reached.
 */
body.flow-auth-page .flow-auth { grid-template-columns: minmax(0, 1fr); }

/* --- Error and message blocks on the card ------------------------------- */
.flow-card__error,
.flow-card__message {
    width: var(--control-width);
    max-width: 100%;
    box-sizing: border-box;
    margin: var(--gap-link) 0 0;
    padding: 12px 14px;
    border-radius: var(--radius-field);
    font: 400 15px/21px var(--font-system);
    text-align: left;
}
.flow-card__error {
    background: var(--fv-error-bg);
    border: 1px solid var(--fv-error-border);
    color: var(--fv-error-ink);
}
.flow-card__message {
    padding: 0;
    color: var(--ink);
    text-align: center;
}
.flow-card__message strong { display: block; color: var(--fv-success-ink); }
.flow-card__message p { margin: 0 0 8px; }
.flow-card__message p:last-child { margin-bottom: 0; }
.flow-card__message a { color: var(--accent); }

/* An error pushes the fields down by gap-form on top of its own margin,
 * which breaks the card's rhythm exactly when the visitor needs to retry. */
.flow-card__error + .flow-card__form { margin-top: var(--gap-field); }

/* The system's .flow-card is center-aligned; a message page reads better
 * with its paragraphs sharing the control column. */
.flow-card__message + .flow-card__forgot { margin-top: var(--gap-form); }

/* --- Phone width --------------------------------------------------------
 * The system was drawn for iPad, Mac and desktop web. Adapted at the TOKEN
 * level rather than by overriding component rules, so the components still
 * render exactly what the system says they do. */
@media (max-width: 480px) {
    :root {
        --icon-size: 72px;
        --card-pad-top: 32px;
        --gap-form: 34px;
    }
    .flow-card { padding-left: 18px; padding-right: 18px; }
    .flow-wordmark { font-size: 32px; line-height: 38px; }
}

/* Help sits on the photo, top right. On a narrow screen there is no room
 * beside the card, so it keeps its corner but drops the label. */
@media (max-width: 560px) {
    .flow-help { top: 14px; right: 16px; }
    .flow-help span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* The photo is a dark blue; the Help link is white on it with a soft
 * shadow so it stays legible wherever the backdrop is lightest. */
.flow-help { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); cursor: pointer; text-decoration: none; }
.flow-help:hover { text-decoration: underline; }

/* The system gives the field a 1px hairline border that is 1.3:1 on white,
 * below the 3:1 floor for control borders, and says so: it is kept as the
 * reference value, which is why every field here always carries a
 * placeholder and why focus draws a 2px accent ring. Keyboard users get the
 * ring from :focus-within on the field; make sure the toggle shows one too. */
.flow-field__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }

/* Autofill paints its own background over the field fill in WebKit. */
.flow-field input:-webkit-autofill,
.flow-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
}

/* NOT in the design system. header.php loads modernize-2025.css and
   marketing-2025.css AFTER these sheets, and both style every
   input[type=email|password|text] on the site: a 1px #d1d5db border, a
   border-radius with !important, box-shadow:none !important, a focus ring and
   a focus box-shadow. At equal specificity the later sheet wins, so the inputs
   grew their own bordered pill inside the field and the icon was left sitting
   in a cell of its own (seen on beta 2026-10-22). The field draws the border;
   the input must draw nothing. Scoped to .flow-auth so the overrides reach no
   other form, and !important only where the 2025 sheets use it. */
.flow-auth .flow-field input,
.flow-auth .flow-field input:focus,
.flow-auth .flow-field input:hover {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    transition: none !important;
}
/* The autofill fill above lost to modernize's box-shadow:none !important. */
.flow-auth .flow-field input:-webkit-autofill,
.flow-auth .flow-field input:-webkit-autofill:hover,
.flow-auth .flow-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
}
/* modernize gives every button min-width/min-height 44px and a transition;
   the toggle is already 44px, but keep it from animating its color. */
.flow-auth .flow-field__toggle { transition: none; }