/* FusionRE — create an account. Landscape.
 *
 * 2026-09-04 — Claude Opus 5 — D7.1.
 *
 * First attempt was a 880px portrait column: the details form on top and
 * nineteen verticals stacked underneath, so the page ran off the bottom of the
 * screen and you could never see the whole thing at once. Rebuilt landscape —
 * credentials on the left, the picker on the right, both in view together.
 *
 * Sits on top of gate.css so sign-in and sign-up are visibly one product: same
 * glass panel, same well inputs, same pill buttons, same Cormorant heading over
 * Manrope body.
 *
 * Owner rule, from desk.css: no inline CSS, every language in its own file in
 * its own folder. Every selector is prefixed `su-` so nothing can reach the
 * header, the drawers, the composer or the Look dialog — locked chrome under
 * the theme contract.
 *
 * Colour is never the only signal. A chosen card carries a tick as well as a
 * tint; an unavailable one carries the words "Not open yet" as well as the
 * dimming — roughly 1 in 12 men cannot separate red from green.
 */

@import url("gate.css");

/* ---- the page ----------------------------------------------------------
 * gate.css centres a 440px card in a full-height grid. Signup needs the width,
 * so the card is widened and the vertical padding relaxed. */

.su-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 20px;
}

.su-card {
  width: min(1180px, 100%);
  padding: 30px 34px 26px;
}

.su-head {
  max-width: 74ch;
}

/* A signup page must always offer an obvious way out. Burying "Sign in" in the
   footer, below a nineteen-card picker, means a returning user cannot find it —
   which is exactly what happened. It sits at the top now, beside the wordmark,
   as a real button rather than a muted line of text. */
.su-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
}

.su-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.su-alt .button {
  min-height: 40px;
  padding: 0 18px;
}

.su-card h1 {
  margin: 6px 0 6px;
  font-size: 2.5rem;
  line-height: 1.05;
}

/* ---- landscape: credentials left, picker right ------------------------- */

.su-body {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 26px 34px;
  align-items: start;
  margin-top: 20px;
}

/* The left column keeps gate.css's form rhythm so the fields are identical to
   the ones on the sign-in page. */
/* Sticky so it stays beside the picker while that scrolls. The divider moved
   to .su-pick because a border on this column stopped at the submit button and
   left the two halves visually unseparated for the rest of the page. */
.su-form {
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 0;
  padding-right: 26px;
}

.su-form .gate-submit {
  margin-top: 14px;
}

.su-hint {
  margin: -2px 0 0;
  font-size: 0.86rem;
}

/* ---- the picker --------------------------------------------------------- */

/* Nineteen options is a lot of page. Bounded and scrolled so the whole form —
   including the submit button — stays in view, which was the point of going
   landscape in the first place. */
.su-pick {
  align-content: start;
  min-width: 0;
  padding-left: 30px;
  border-left: 1px solid rgba(35, 49, 13, 0.14);
  max-height: min(64vh, 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A hairline so it is obvious the list continues below the fold. */
.su-pick::after {
  content: "";
  display: block;
  height: 2px;
}

.su-ask-note {
  max-width: 70ch;
  margin: 0 0 6px;
}

.su-tier {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(35, 49, 13, 0.12);
}

.su-tier:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 12px;
}

.su-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 10px;
}

/* Each option is a card you click, not a radio you hunt for. The native input
   stays in the DOM, positioned rather than hidden, so keyboard focus and
   screen readers still find it. */
.su-opt {
  position: relative;
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 13px 15px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
    rgba(255, 255, 255, 0.42);
  box-shadow:
    0 8px 0 rgba(20, 28, 12, 0.05),
    0 14px 26px rgba(10, 16, 6, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.su-opt:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 0 rgba(20, 28, 12, 0.07),
    0 20px 34px rgba(10, 16, 6, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.su-opt input {
  position: absolute;
  inset: 12px auto auto 12px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.su-opt-name {
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--ink-deep);
  padding-right: 22px;
}

.su-opt-why {
  font-size: 0.84rem;
  line-height: 1.4;
}

/* Chosen. A tick as well as a tint. */
.su-opt:has(input:checked) {
  border-color: var(--green-mid);
  background:
    linear-gradient(145deg, rgba(201, 239, 98, 0.52), rgba(148, 191, 39, 0.24)),
    rgba(255, 255, 255, 0.5);
}

.su-opt:has(input:checked) .su-opt-name::after {
  content: " \2713";
  color: var(--green);
  font-weight: 900;
}

.su-opt:has(input:focus-visible) {
  outline: 3px solid var(--green-mid);
  outline-offset: 3px;
}

/* ---- not open yet -------------------------------------------------------
 * The /sieve rule turned on ourselves: a control we cannot honestly offer is
 * shown, disabled, with the reason on its face. Hiding these would misrepresent
 * where the product is going; offering them would be a button that does nothing.
 */

.su-opt.is-off {
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(35, 49, 13, 0.2);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  opacity: 0.7;
}

.su-opt.is-off:hover {
  transform: none;
  box-shadow: none;
}

.su-soon {
  justify-self: start;
  margin-top: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(35, 49, 13, 0.1);
  color: var(--lead);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- footer ------------------------------------------------------------- */

.su-foot {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(35, 49, 13, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
}

.su-foot a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- portrait / narrow -------------------------------------------------
 * Below the landscape threshold the two columns stack and the divider becomes
 * a rule under the form instead of beside it. */

@media (max-width: 900px) {
  .su-card {
    width: 100%;
    padding: 24px 20px 20px;
  }
  .su-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .su-form {
    position: static;
    padding-right: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(35, 49, 13, 0.14);
  }
  .su-pick {
    padding-left: 0;
    border-left: 0;
    max-height: none;
    overflow-y: visible;
  }
  .su-card h1 {
    font-size: 2.1rem;
  }
}

@media (max-width: 520px) {
  .su-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .su-opt,
  .su-opt:hover {
    transition: none;
    transform: none;
  }
}