/* Minimal signup page (Phase 3 of Simplified Signup and Trial Lockdown).
   Mobile-first card layout, brand indigo (#3B3F7A) primary, generous touch
   targets on chip controls so the role + MFA pickers feel native on phones. */

.signup-container {
    /* Local indigo aliases resolve to the global tokens in _tokens.css.
       See login.css for the full rationale on the indirection layer. */
    --signup-indigo: var(--gpc-indigo);
    --signup-indigo-soft: var(--gpc-indigo-soft);
    --signup-indigo-line: var(--gpc-indigo-line);
    --signup-text: var(--gpc-text);
    --signup-text-muted: var(--gpc-text-muted);
    /* Hold the card to a comfortable width and centre it in the visible
       viewport on both axes. MainLayout's MudMainContent contributes a
       64px top padding for the public AppBar, so we subtract that here —
       otherwise the flex container extends past the viewport and the
       computed centre falls below the visual centre. `safe center` falls
       back to `flex-start` when the card is taller than the viewport,
       preventing the top from clipping offscreen on short windows. */
    display: flex;
    align-items: safe center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding-top: 16px;
    padding-bottom: 16px;
}

.signup-card-wrap {
    width: 100%;
    max-width: 760px;
}

.signup-card {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    border-top: 4px solid var(--signup-indigo);
}

/* Eyebrow pill — full-width soft indigo strip with centred uppercase text,
   matching the Home hero "AUTOMATED MBS …" chip. Stretches to fill the
   card's content width so it reads as a status banner, not a label.
   Top + bottom margin gives it breathing room from the title above and
   the first form field below. */
.signup-eyebrow {
    display: block;
    width: 100%;
    background: var(--signup-indigo-soft);
    color: var(--signup-indigo);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 20px;
    margin: 24px 0 28px;
    border-radius: 999px;
    line-height: 1.3;
    border: 1px solid var(--signup-indigo-line);
}

.signup-title {
    font-weight: 700;
    color: var(--signup-indigo);
    letter-spacing: 0.01em;
    text-align: center;
}

.signup-section-label {
    font-weight: 600;
    color: var(--signup-text);
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.signup-section-hint {
    color: var(--signup-text-muted);
    display: block;
    font-size: 0.875rem !important;
}

/* Single source of truth for typography inside the signup card. Every
   interactive control (text input, masked input, select trigger, MFA
   placeholder, submit button) is forced to 0.875rem so the form scans as
   one consistent typographic set — Mud's per-control defaults vary (text
   inputs ~1rem, selects ~1rem, button ~1rem, captions ~0.75rem) which
   reads as a chaotic mix on a small one-screen form like signup.

   We need this many selectors because MudBlazor renders different
   underlying elements depending on the control type:
   - MudTextField → `<input class="mud-input-slot mud-input-root …">`
   - MudTextField with Mask → an inner `.mud-input-input` span overlays the input
   - MudSelect → `<input class="mud-input-slot mud-select-input …" readonly>`
   - Mud also wraps in `.mud-input-control` containers
   The shotgun approach below catches every variant, including the
   placeholder pseudo on each, so empty + filled + masked all match. */
.signup-card .mud-input-control input,
.signup-card .mud-input-control input::placeholder,
.signup-card .mud-input-slot,
.signup-card .mud-input-slot input,
.signup-card .mud-input-slot input::placeholder,
.signup-card .mud-input-input,
.signup-card .mud-input-root,
.signup-card .mud-input > input,
.signup-card .mud-select .mud-input-slot,
.signup-card .mud-select .mud-select-input,
.signup-card .mud-select-input {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

/* Popover items rendered for the role / software selects — match the
   trigger's font size so the closed and open states look like one control.
   The `.signup-select-popover` class is applied via PopoverClass on the
   MudSelect markup. */
.signup-select-popover .mud-list-item,
.signup-select-popover .mud-list-item-text {
    font-size: 0.875rem !important;
}

.signup-card .signup-submit {
    font-size: 0.875rem !important;
}

/* Field labels stay in MudBlazor's default top-left position (no override).
   Field icons live on the *right* (Adornment.End) — see Signup.razor — so
   the label has the whole left side of the outline to occupy without
   crowding the icon. Password fields use the same right-side adornment as
   the visibility toggle (clickable eye), so no bespoke overlay is needed. */

.signup-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Equal-width variant — chips share the row evenly (e.g. role: Doctor /
   PM / GPM, MFA: Email / SMS). Below 480px we still wrap so labels never
   crowd the icon. */
.signup-chip-row--equal {
    flex-wrap: nowrap;
}

.signup-chip-row--equal .signup-chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
}

.signup-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--signup-indigo-line);
    background: #fff;
    color: var(--signup-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-height: 40px;
}

/* Email field renders typed text in lowercase so what the user sees matches
   what /api/auth/signup persists (it lowercases server-side). The cast itself
   doesn't transform the bound value — purely visual — but it removes the
   "did I type it correctly?" beat at email-entry time. */
.signup-input-lowercase input {
    text-transform: lowercase;
}

/* Mirror of the lowercase rule for fields whose canonical form is uppercase
   (currently the optional "Practice group code" — generated from the
   "ABCDEFGHJKLMNPQRSTUVWXYZ23456789" alphabet, so uppercase is the natural
   shape). The bound value is uppercased at submit time in the page code,
   but visualising it as the user types removes the "did I get the case
   right?" beat. */
.signup-input-uppercase input {
    text-transform: uppercase;
}

.signup-chip:hover {
    border-color: var(--signup-indigo);
    background: var(--signup-indigo-soft);
}

.signup-chip--selected {
    background: var(--signup-indigo);
    border-color: var(--signup-indigo);
    color: #fff;
}

.signup-chip--selected:hover {
    background: var(--signup-indigo);
    color: #fff;
}

/* Gated state — used while the chip's underlying field is still invalid
   (Email chip waits on a well-formed email, SMS chip waits on a 9-digit
   AU mobile). Browsers honour the `disabled` attribute on the underlying
   <button>, so clicks are no-ops; this rule is purely visual. The
   `pointer-events: none` belt+braces prevents hover flicker on the chip
   if a parent stylesheet ever undisables it. */
.signup-chip--disabled,
.signup-chip--disabled:hover {
    background: #f5f5f7;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--signup-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.signup-chip--disabled:hover {
    /* Override the .signup-chip:hover indigo border so the disabled chip
       doesn't visually "respond" to a hover that does nothing. */
    border-color: rgba(0, 0, 0, 0.08);
}

/* The selector is .signup-terms-row.mud-grid-item (not just
   .signup-terms-row) deliberately. MudGrid Spacing="2" on the
   parent form generates the rule
       .mud-grid-spacing-2 > .mud-grid-item { padding: 8px; }
   which has specificity (0,2,0). A bare .signup-terms-row rule is
   only (0,1,0), so MudBlazor wins on specificity and our padding
   is silently overridden (the historical 36px padding-top was
   never actually rendering — the gap on screen was MudBlazor's
   Spacing="2" all along). Compounding the class with .mud-grid-item
   gets us to (0,2,0); cascade order then breaks the tie in our
   favour because signup.css loads after MudBlazor.min.css. */
.signup-terms-row.mud-grid-item {
    display: flex;
    /* Centred horizontally so the acknowledgement reads as a deliberate
       legal opt-in step rather than a left-aligned form field. The
       padding-block opens up breathing room above (separating it from
       the MFA chip row) and below (separating it from the submit CTA),
       so the acknowledgement reads as its own logical section.

       padding-top 24px gives a clear separation from the MFA chip row
       without overshooting now that the compounded selector actually
       applies. The historical 36px in this rule never rendered (lost
       to MudBlazor's spacing on specificity), and bumping it through
       the new selector to 56px was too generous — 24px is the value
       that visually reads as "deliberate gap" without feeling airy. */
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 24px;
    padding-bottom: 18px;
}

.signup-terms-text {
    color: var(--signup-text);
    font-size: 0.875rem;
    line-height: 1.4;
    /* No padding-top needed any more — align-items: center on
       .signup-terms-row vertically aligns the text with the checkbox
       glyph. The previous 9px top-padding was a manual baseline shim
       for the old align-items: flex-start layout. */
    /* Justify the multi-line consent paragraph so the right edge
       reads as a clean rectangle alongside the form fields above
       and the submit button below, rather than a ragged-right
       legal blurb. text-align-last: left keeps the trailing line
       naturally left-aligned (no wide-spaced last line); hyphens:
       auto lets the browser break long words at syllable points
       so we don't get big rivers of whitespace between words on
       narrower viewports. */
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}

.signup-terms-text a {
    color: var(--signup-indigo);
    text-decoration: underline;
}

/* Reserves the vertical footprint the old "I agree to…" checkbox row used to
   occupy so the gap between the MFA chips and the submit button doesn't
   collapse now that the visible copy has been removed. The height matches the
   dense MudCheckBox + single-line text row it replaced. */
.signup-terms-spacer {
    height: 30px;
    pointer-events: none;
}

.signup-footer {
    text-align: center;
    margin-top: auto;
    padding: 8px 0 4px;
    color: var(--signup-text-muted);
}

@media (max-width: 600px) {
    .signup-container {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .signup-card {
        border-radius: 10px;
    }
}

/* Below 480px the role row's three chips wrap to two lines (Doctor + PM
   on top, GPM full-width below) so labels stay readable on narrow phones.
   We also tighten the eyebrow + terms-row at this width to mirror the
   compression rules in login.css / welcome.css. */
@media (max-width: 480px) {
    .signup-chip-row--equal {
        flex-wrap: wrap;
    }

    .signup-chip-row--equal .signup-chip {
        flex: 1 1 calc(50% - 8px);
    }

    /* The lone third chip (GPM) takes the whole second row. */
    .signup-chip-row--equal .signup-chip:nth-child(3):last-child {
        flex: 1 1 100%;
    }

    .signup-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        padding: 8px 14px;
    }

    .signup-terms-text {
        font-size: 0.8rem;
        line-height: 1.45;
    }
}

/* Legacy keyframe kept in case anything outside the page still references
   the .tick-pulse class. Remove once we confirm no other code uses it. */
@keyframes tick-pulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 180, 30, 0); }
    50%       { box-shadow: inset 0 0 5px 3px rgba(255, 180, 30, 0.55); }
}

.tick-pulse {
    border-radius: 50%;
    animation: tick-pulse 1.8s ease-in-out infinite;
}

/* Reserve a fixed minimum height for the password and confirm-password
   grid cells so the form layout doesn't jump up/down by ~22px every time
   the "Passwords do not match" helper-text line renders or clears. The
   height is set to "input row + helper-text line" so the worst-case
   (error showing) state defines the row height for both states. */
.signup-password-cell {
    min-height: 84px;
}