/*==============================================================================
  Registration page - layout and type
  ------------------------------------------------------------------------------
  There are no colour values in this file. Every colour is a var() resolving to
  auth-theme.css, which both this page and the sign-in page share - so the
  primary colour is changed in one place and both screens follow. Do not
  reintroduce a literal here; it would be the one thing that stops following.

  Deliberately the same page as login.css in everything but its contents: the
  same two-column split, the same brand panel, the same field, button and
  heading treatment. Registering and signing in should not feel like two
  different products, and a user who does one then the other should not have to
  re-learn where anything is.

  The differences are all content, not style:

    - five fields instead of two, so the form uses a two-column grid and the
      card is a little wider
    - a completion state that replaces the form in place once the account
      exists, rather than navigating somewhere else

  Vertical rhythm is clamp(px, vh, px), so on a short laptop screen the spacing
  compresses instead of pushing the submit button below the fold.

  Scoped under .su- prefixes. The sign-in page is login.css, same theme, same
  rules.
==============================================================================*/

.su-page {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    background: var(--auth-canvas);
    color: var(--auth-ink);
    font-family: var(--f-sans);
    -webkit-font-smoothing: antialiased;
    overflow: auto;
}

/*==================================================== left: what you get */
.su-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(22px, 4.6vh, 48px) clamp(26px, 3.4vw, 56px);
    background: var(--auth-panel);
    border-right: 1px solid var(--auth-line);
    overflow: hidden;
}

/* one faint ring, low enough in contrast to stay out of the way */
.su-aside::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -130px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid var(--auth-ring-faint);
    box-shadow: inset 0 0 0 30px var(--auth-ring-fainter);
    pointer-events: none;
}

.su-aside__top {
    position: relative;
    z-index: 1;
}

.su-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(16px, 3.4vh, 34px);
}

.su-logo__mark {
    width: clamp(38px, 5.4vh, 46px);
    height: clamp(38px, 5.4vh, 46px);
    border-radius: 12px;
    background: var(--auth-accent);
    color: var(--auth-primary-deep);
    display: grid;
    place-items: center;
    font-size: clamp(16px, 2.4vh, 19px);
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--auth-accent-shadow);
}

.su-logo__name {
    font-size: clamp(16px, 2.5vh, 19px);
    color: var(--auth-accent-display);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
}

.su-logo__sub {
    font-size: var(--fs-xs);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--auth-primary);
    font-weight: 600;
    margin-top: 3px;
}

.su-headline {
    font-size: clamp(23px, 4.1vh, 32px);
    color: var(--auth-accent-display);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 clamp(8px, 1.4vh, 13px);
    max-width: 16ch;
}

.su-headline em {
    font-style: normal;
    color: var(--auth-primary);
}

.su-intro {
    font-size: clamp(14px, 1.9vh, 15px);
    line-height: 1.6;
    color: var(--auth-ink-soft);
    max-width: 48ch;
    margin: 0 0 clamp(16px, 3vh, 28px);
}

/*----------------------------------------------------------- highlights */
.su-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.3vh, 12px);
    max-width: 540px;
}

.su-feature {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--auth-card);
    border: 1px solid var(--auth-line-soft);
    border-radius: 12px;
    padding: clamp(10px, 1.6vh, 14px) clamp(11px, 1.4vw, 15px);
}

.su-feature__icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--auth-accent-soft);
    color: var(--auth-accent-ink);
    display: grid;
    place-items: center;
    font-size: var(--fs-base);
    flex-shrink: 0;
}

.su-feature__title {
    font-size: var(--fs-base);
    font-weight: 650;
    margin-bottom: 2px;
    letter-spacing: -.005em;
}

.su-feature__text {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--auth-ink-soft);
}

/*------------------------------------------------------------ side note */
.su-note {
    position: relative;
    z-index: 1;
    border-left: 3px solid var(--auth-accent);
    background: var(--auth-card-quiet);
    border-radius: 0 10px 10px 0;
    padding: clamp(10px, 1.6vh, 14px) clamp(13px, 1.3vw, 17px);
    margin-top: clamp(14px, 2.6vh, 26px);
    max-width: 540px;
}

.su-note__label {
    font-size: var(--fs-xs);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--auth-accent-ink);
    font-weight: 700;
    margin-bottom: 4px;
}

.su-note__text {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--auth-ink-soft);
}

.su-note__text strong { color: var(--auth-ink); font-weight: 650; }

.su-aside__foot {
    position: relative;
    z-index: 1;
    font-size: var(--fs-xs);
    color: var(--auth-ink-soft);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: clamp(12px, 2.4vh, 24px);
}

.su-aside__foot a {
    color: var(--auth-primary);
    text-decoration: none;
}

.su-aside__foot a:hover { text-decoration: underline; }

/*======================================================== right: the form */
.su-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vh, 44px) clamp(22px, 3vw, 48px);
}

/* Wider than the sign-in card: five fields in two columns need the room. */
.su-card {
    width: 100%;
    max-width: 460px;
}

.su-head {
    margin-bottom: clamp(14px, 2.8vh, 26px);
}

.su-head h1 {
    font-size: clamp(20px, 3.2vh, 25px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--auth-accent-display);
    margin: 0 0 5px;
}

.su-head p {
    font-size: var(--fs-base);
    color: var(--auth-ink-soft);
    margin: 0;
}

/*------------------------------------------------- chosen plan (from ?plan=)
  A receipt, not a control: it confirms the choice made on the pricing page
  survived the trip here. Quiet enough that it never competes with the form,
  which is the actual job of this screen.
--------------------------------------------------------------------------*/
.su-plan {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    margin-bottom: clamp(12px, 2.4vh, 20px);
    border: 1px solid var(--auth-line);
    border-radius: 9px;
    background: var(--auth-accent-soft);
}

.su-plan__tick {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--auth-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.su-plan__text {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-sm);
    color: var(--auth-ink);
}

.su-plan__unit { color: var(--auth-ink-soft); }

.su-plan__change {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--auth-ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.su-plan__change:hover { color: var(--auth-primary); }

/*--------------------------------------------------------------- fields */
.su-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.su-field {
    margin-bottom: clamp(10px, 1.9vh, 16px);
}

.su-field--wide { grid-column: 1 / -1; }

.su-field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--auth-ink);
    margin-bottom: 6px;
    letter-spacing: -.005em;
}

/*
  A plain, modern textbox: one hairline border, generous radius, and a focus
  state that reads as a soft accent ring rather than a hard browser outline.

  Blazor's own .valid.modified / .invalid rules in app.css paint a green or red
  outline on every touched input. They are more specific than a bare element
  selector, so they have to be switched off explicitly here - otherwise a green
  outline appears the moment the user types their restaurant's name.
*/
.su-page .su-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--auth-line);
    border-radius: 10px;
    background: var(--auth-surface);
    padding: clamp(9px, 1.5vh, 12px) 13px;
    font: inherit;
    font-size: var(--fs-md);
    line-height: 1.35;
    color: var(--auth-ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.su-page .su-input::placeholder { color: var(--auth-ink-faint); }

.su-page .su-input:hover:not(:focus) { border-color: var(--auth-line-hover); }

.su-page .su-input:focus,
.su-page .su-input.valid.modified:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px var(--auth-ring);
    outline: none;
}

/* Blazor's template outlines, neutralised inside this page only. */
.su-page .su-input.valid.modified:not([type=checkbox]) { outline: none; }

.su-page .su-input.invalid {
    outline: none;
    border-color: var(--auth-danger-line);
}

.su-page .su-input.invalid:focus {
    border-color: var(--auth-danger);
    box-shadow: 0 0 0 3px var(--auth-danger-ring);
}

.su-input-wrap { position: relative; }
.su-input-wrap .su-input { padding-right: 42px; }

.su-reveal {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--auth-ink-soft);
    cursor: pointer;
    padding: 6px 8px;
    font-size: var(--fs-base);
    line-height: 1;
    border-radius: 7px;
}

.su-reveal:hover { color: var(--auth-primary); }

.su-error {
    display: block;
    color: var(--auth-danger);
    font-size: var(--fs-xs);
    margin-top: 4px;
}

/*-------------------------------------------------------- primary action */
.su-submit {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: clamp(10px, 1.7vh, 13px) 18px;
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--auth-on-primary);
    background: var(--auth-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(4px, 1vh, 8px);
    box-shadow: 0 2px 8px var(--auth-primary-shadow);
    transition: background-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

.su-submit:hover:not(:disabled) {
    background: var(--auth-primary-strong);
    box-shadow: 0 4px 14px var(--auth-primary-shadow-lift);
}

.su-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--auth-ring), 0 2px 8px var(--auth-primary-shadow);
}

.su-submit:active:not(:disabled) { transform: translateY(1px); }

.su-submit:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.su-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--auth-on-primary-faint);
    border-top-color: var(--auth-on-primary);
    border-radius: 50%;
    animation: su-spin .7s linear infinite;
}

@keyframes su-spin { to { transform: rotate(360deg); } }

/*--------------------------------------------------- registration complete */

/*
  Replaces the form in place once the account exists. Same card width and the
  same colour as the button the user just pressed, so the page reads as the
  next state of what they did rather than as a different screen.
*/
.su-done { text-align: center; }

.su-done__badge {
    width: clamp(46px, 7vh, 58px);
    height: clamp(46px, 7vh, 58px);
    margin: 0 auto clamp(12px, 2.2vh, 20px);
    border-radius: 50%;
    background: var(--auth-primary-soft);
    color: var(--auth-primary);
    display: grid;
    place-items: center;
}

.su-done__title {
    font-size: clamp(19px, 3vh, 24px);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--auth-accent-display);
    margin: 0 0 6px;
    line-height: 1.25;
}

.su-done__lede {
    font-size: var(--fs-md);
    color: var(--auth-ink-soft);
    margin: 0 0 clamp(14px, 2.4vh, 22px);
}

.su-done__note {
    background: var(--auth-surface);
    border: 1px solid var(--auth-line-soft);
    border-radius: 10px;
    padding: clamp(11px, 1.8vh, 15px) 16px;
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--auth-ink-soft);
    text-align: left;
    margin-bottom: clamp(12px, 2vh, 18px);
}

.su-done__note p { margin: 0; }
.su-done__note strong { color: var(--auth-ink); font-weight: 600; word-break: break-all; }

.su-done__hint {
    margin-top: 7px !important;
    font-size: var(--fs-sm);
    color: var(--auth-ink-soft);
}

.su-done__countdown {
    margin-top: clamp(10px, 1.8vh, 16px);
    font-size: var(--fs-sm);
    color: var(--auth-ink-soft);
}

.su-done__countdown strong {
    color: var(--auth-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*------------------------------------------------------------------ foot */
.su-foot {
    text-align: center;
    font-size: var(--fs-base);
    color: var(--auth-ink-soft);
    margin-top: clamp(12px, 2.2vh, 20px);
    padding-top: clamp(11px, 2vh, 18px);
    border-top: 1px solid var(--auth-line-soft);
}

.su-foot a {
    color: var(--auth-primary);
    font-weight: 600;
    text-decoration: none;
}

.su-foot a:hover { text-decoration: underline; }

/*==================================================== verify-email notice

  /account/verify-email - the page registration ends on. Same card, same
  colours, same type as the form the user just left, because it is the next
  step of the same job; the only structural difference is that there is no
  second column. The sales panel has done its work by this point, and the one
  thing this page has to say ("go and open your inbox") should not have to
  share the screen with an invitation to get started.

  So the card centres in the full width instead, and carries the brand mark
  itself - otherwise the page loses the logo along with the aside.
==============================================================================*/

.su-page--solo {
    grid-template-columns: 1fr;
}

.su-page--solo .su-card {
    max-width: 520px;
}

/* Centred here only. In the aside it sits left, flush with the copy below. */
.su-logo--center {
    justify-content: center;
    text-align: left;
    margin-bottom: clamp(14px, 2.8vh, 26px);
}

/* The consequence of not verifying, set apart from the instruction above it
   so it is not read as more of the same sentence. */
.su-done__warn {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid var(--auth-line-soft);
    color: var(--auth-ink);
}

.su-done__warn i {
    color: var(--auth-primary);
    margin-right: 5px;
}

/* Confirmation that a fresh link went out - quiet, since the instruction is
   unchanged and this only tells the user their click did something. */
.su-done__resend {
    margin: 0 0 clamp(10px, 1.8vh, 14px);
    padding: 9px 13px;
    border-radius: 9px;
    background: var(--auth-primary-soft);
    border: 1px solid var(--auth-line-soft);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--auth-ink);
    text-align: left;
}

.su-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* .su-submit's twin, outlined rather than filled: on this page the primary
   action is in the user's email client, not on the screen, so nothing here
   should shout louder than the instruction. */
.su-secondary {
    width: 100%;
    border: 1px solid var(--auth-line-hover);
    border-radius: 10px;
    padding: clamp(10px, 1.7vh, 13px) 18px;
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--auth-primary);
    background: var(--auth-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: border-color .15s ease, background-color .15s ease, transform .06s ease;
}

.su-secondary:hover:not(:disabled) {
    background: var(--auth-primary-soft);
    border-color: var(--auth-primary);
}

.su-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--auth-ring);
}

.su-secondary:active:not(:disabled) { transform: translateY(1px); }
.su-secondary:disabled { opacity: .6; cursor: not-allowed; }

/* .su-submit is a <button> on the form; here it is an <a> to Gmail, which
   brings a default underline and link colour with it. */
a.su-submit {
    text-decoration: none;
    box-sizing: border-box;
}

a.su-submit:hover { color: var(--auth-on-primary); }

/* Same, for the outlined button when it is a link ("Back to Login"). */
a.su-secondary {
    text-decoration: none;
    box-sizing: border-box;
}

a.su-secondary:hover { color: var(--auth-primary); }

.su-spinner--dark {
    border-color: var(--auth-line-hover);
    border-top-color: var(--auth-primary);
}

/* Large enough to sit in a badge in place of an icon, while it verifies. */
.su-spinner--lg {
    width: 22px;
    height: 22px;
    border-width: 3px;
}

/* Badge variants for the verification outcome pages. The plain badge is the
   neutral one (an envelope, a spinner); these two say which way it went. */
.su-done__badge--go {
    background: var(--auth-accent-soft);
    color: var(--auth-accent-ink);
}

.su-done__badge--bad {
    background: var(--auth-danger-ring);
    color: var(--auth-danger);
}

/* The countdown reads as a status line, not an instruction - the button above
   it is the thing to press. */
.su-page--solo .su-done__countdown {
    margin-top: clamp(12px, 2vh, 18px);
}

/*============================================================= responsive */

/* Two columns need the room; below this the page stacks and scrolls
   normally, which is the right behaviour on a phone. */
@media (max-width: 900px) {
    .su-page {
        position: static;
        min-height: 100vh;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .su-aside { padding: 28px 24px; }
    .su-aside::after { display: none; }
    .su-headline { font-size: var(--fs-2xl); max-width: none; }
    .su-features { max-width: none; }
    .su-main { padding: 30px 24px 48px; }
    .su-card { max-width: 460px; }

    /* The supporting prose is what stands between a phone user and the form,
       so it goes - the four cards say the same thing in a quarter of the
       height. */
    .su-intro { display: none; }
    .su-note { display: none; }
    .su-aside__foot { display: none; }
}

@media (max-width: 560px) {
    .su-aside { padding: 24px 18px; }
    .su-headline { font-size: var(--fs-2xl); }
    .su-features { grid-template-columns: 1fr; }
    .su-grid { grid-template-columns: 1fr; }
    .su-main { padding: 26px 18px 40px; }
}

/* Wide but very short (a laptop with a lot of browser chrome): drop the
   supporting copy rather than let the form scroll. */
@media (min-width: 901px) and (max-height: 600px) {
    .su-intro { display: none; }
    .su-note { display: none; }
    .su-aside__foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .su-page * { transition: none !important; animation: none !important; }
}