/* The three sign-in screens: Flodesk's sign-in and sign-up, and the address
 * Flodesk Team's old sign-in now redirects to.
 *
 * All three are snapshots. The artboard renders once, at 1440, with the
 * runtime stripped, so anything that depends on the size of the window or on
 * what the visitor prefers cannot be decided in the design and has to be
 * stated here. That is the whole of what this file is: the phone breakpoint,
 * the widths the form steps through, and the two states a role card can be in.
 *
 * The photograph beside the form is gone, and the rules that framed it, faded
 * it and dotted it went with it. build/prerender.mjs cuts the column itself.
 */

/* ---------------------------------------------------------------- the split */

/* Drawn at the same scale as the pane inside the portal rather than at the
   rail's. Seventy-five percent is the density a navigation column wants and it
   is not what a page holding one form in the middle of a desktop wants: the
   fields were 33 real pixels tall on a 1440 screen. The root is at the rail's
   scale, so this multiplies back up to the pane's, and the height above
   divides by the same property.

   On the whole element rather than on its children, which is what <main> could
   not do: this is not a flex item being sized by a row, it is the page. */
[data-fz-split] { zoom: calc(var(--cp-main) / var(--cp-zoom)); }

/* One column now, and the form sits in the middle of it. */
[data-fz-split] {
  width: 100%;
  margin: 0;
  justify-content: center;
}

/* ----------------------------------------------------------- the form, larger */

@media (min-width: 1280px) {
  [data-fz-formwrap] { width: 400px !important; }
  [data-fz-formwrap] form { padding: 24px !important; }
  [data-fz-formwrap] input { height: 44px !important; }
  [data-fz-formwrap] button[type="submit"],
  [data-fz-formwrap] [data-fz-rolenext] { height: 46px !important; }
  /* The eye that reveals a password is centred in a taller field. */
  [data-fz-formwrap] label > div > button { top: 7px !important; }
}

/* ----------------------------------------------------------- the role cards */

[data-fz-role] { transition: border-color .15s ease, background .15s ease; }
[data-fz-role]:hover { border-color: var(--border-default); background: var(--bg-page); }
[data-fz-role]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Unselected cards carry no tick. The tick is the part of the selected state
   that survives being unable to tell the two borders apart. */
[data-fz-role][aria-checked="false"] [data-fz-tick] { visibility: hidden; }
[data-fz-role][aria-checked="true"] {
  border-color: var(--accent);
  background: var(--bg-page);
  box-shadow: inset 0 0 0 1px var(--accent);
}

[data-fz-rolenext]:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------- the phone */

@media (max-width: 759px) {
  [data-fz-split] {
    flex-direction: column !important;
    padding: 12px !important;
    gap: 12px !important;
  }
}