/*
 | Auth & entry — sign in, sign up, provisioning, invitation acceptance and the
 | platform-staff sign in.
 |
 | Source of truth: "claude design/Sign in.dc.html" (README §1) for the
 | two-column entry screens, and "claude design/Onboarding.dc.html" (README §2)
 | for the navy setup bar, its step markers and its progress treatment.
 |
 | Everything here is auth-only. Anything a screen outside this group would want
 | belongs in design.css, not in this file.
 |
 | These are the only screens in the product that need the *whole viewport*: the
 | design's sign-in is a full-bleed two-column split with a navy panel that runs
 | edge to edge. The signed-out shell (layouts/app.blade.php) wraps the page in a
 | padded `.rd-content` under a brand header, which a full-bleed panel cannot
 | live inside. That shell is shared and is not ours to edit, so the two rules
 | below neutralise it from here, for these pages only, via :has(). Browsers
 | without :has() (none current) simply keep the brand bar and the page padding —
 | the screens still work, they are just inset.
 */

.rd-guest:has(.rd-auth) .rd-guest-brand,
.rd-guest:has(.rd-setup) .rd-guest-brand { display: none; }

.rd-guest:has(.rd-auth) .rd-content,
.rd-guest:has(.rd-setup) .rd-content {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   1. The two-column entry screen — Sign in.dc.html, verbatim.
   ========================================================================== */

.rd-auth {
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    background: var(--rd-canvas);
}

/* Left column: the form, centred, on canvas. */
.rd-auth-form {
    flex: 1;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px;
}

.rd-auth-inner {
    width: 100%;
    max-width: 392px;
    margin: 0 auto;
}

/* Brand lockup — 32px navy mark, name, and what the product is. */
.rd-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.rd-auth-brand:hover { color: inherit; text-decoration: none; }

.rd-auth-mark {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--rd-radius-auth);
    background: var(--rd-navy);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-auth-brand-name { font-size: 15px; font-weight: 600; }
.rd-auth-brand-sub  { font-size: 12px; color: var(--rd-text-meta); }

.rd-auth-block { margin-top: 30px; }

.rd-auth-lede {
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--rd-text-muted);
}

/* The design's "second step" badge, reused to mark the platform console. */
.rd-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: var(--rd-radius-pill);
    background: var(--rd-info-bg);
    border: 1px solid var(--rd-info-bd);
    color: var(--rd-info-fg);
}

.rd-auth-badge i { font-size: 11px; }

/*
 | .rd-display carries margin:0 from design.css, so what sits above a title
 | sets the gap — the design's own figures: 14px after the badge, 5px after a
 | kicker line, 16px after a status icon tile.
 */
.rd-auth-badge + .rd-display { margin-top: 14px; }
.rd-setup-kicker-row + .rd-display { margin-top: 5px; }
.rd-setup-icon + .rd-display { margin-top: 16px; }

/* ---- Fields ---- */

.rd-auth-field { display: block; margin-top: 14px; }
.rd-auth-field-first { margin-top: 18px; }

.rd-auth-field > .rd-label { display: block; margin-bottom: 6px; }

.rd-auth-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rd-auth-field-head .rd-label { margin-bottom: 0; }

/*
 | 15px text, 12px/13px padding, 9px radius. Overrides .form-control, which is
 | the app's dense 13px/8px control — the auth screens are the one place the
 | design deliberately runs larger.
 */
.rd-auth-input.form-control {
    width: 100%;
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 13px;
    border: 1px solid var(--rd-border-strong);
    border-radius: var(--rd-radius-auth);
    background-color: var(--rd-surface);
    color: var(--rd-text);
}

.rd-auth-input.form-control:focus {
    outline: none;
    border-color: var(--rd-navy);
    box-shadow: var(--rd-focus-ring);
}

/*
 | Error: border only. Bootstrap's .is-invalid also paints an exclamation icon
 | into the field and reserves room for it; the design states the error in words
 | underneath instead, so the icon is removed rather than left to crowd the
 | value.
 */
.rd-auth-input.form-control.is-invalid {
    border-color: var(--rd-bad-bd);
    background-image: none;
    padding-right: 13px;
}

.rd-auth-input.form-control.is-invalid:focus {
    border-color: var(--rd-bad-bd);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}

.rd-auth-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--rd-bad-fg);
}

.rd-auth-help {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--rd-text-meta);
}

/* Password field with its eye toggle at right:6px; top:6px; 32x32. */
.rd-auth-pw { position: relative; }
.rd-auth-pw .rd-auth-input.form-control { padding-right: 44px; }
.rd-auth-pw .rd-auth-input.form-control.is-invalid { padding-right: 44px; }

.rd-auth-pw-toggle {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 32px;
    height: 32px;
    border-radius: var(--rd-radius-tile);
    border: none;
    background: none;
    color: var(--rd-text-meta);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.rd-auth-pw-toggle:hover { color: var(--rd-text-3); background: var(--rd-n-100); }
.rd-auth-pw-toggle:focus-visible { outline: 2px solid var(--rd-navy); outline-offset: 1px; }
.rd-auth-pw-toggle i { font-size: 13px; }

/* Keep me signed in. */
.rd-auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--rd-text-3);
    cursor: pointer;
}

.rd-auth-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    flex: none;
    margin: 0;
    accent-color: var(--rd-navy);
    cursor: pointer;
}

/* Primary button: full width, navy, 9px radius, 13px padding, 15px/600. */
.rd-auth-submit.btn {
    --bs-btn-font-size: 15px;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 13px;
    --bs-btn-padding-x: 13px;
    --bs-btn-border-radius: var(--rd-radius-auth);
    width: 100%;
    margin-top: 18px;
}

/* Secondary full-width action, same metrics on a white field. */
.rd-auth-secondary.btn {
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 12px;
    --bs-btn-padding-x: 13px;
    --bs-btn-border-radius: var(--rd-radius-auth);
    --bs-btn-color: var(--rd-text-3);
    --bs-btn-bg: var(--rd-surface);
    --bs-btn-border-color: var(--rd-border-strong);
    --bs-btn-hover-color: var(--rd-text-3);
    --bs-btn-hover-bg: var(--rd-surface-alt);
    --bs-btn-hover-border-color: var(--rd-border-strong);
    width: 100%;
    margin-top: 9px;
}

/* The rule-off note at the bottom of the form column. */
.rd-auth-foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--rd-border);
    font-size: 12px;
    line-height: 1.6;
    color: var(--rd-text-meta);
}

.rd-auth-foot p { margin: 0; }
.rd-auth-foot p + p { margin-top: 7px; }

/* ==========================================================================
   2. The navy panel.
   ========================================================================== */

.rd-auth-panel {
    flex: 1;
    min-width: 340px;
    background: var(--rd-navy);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 36px;
}

.rd-auth-panel-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.rd-auth-panel-headline {
    margin: 16px 0 0;
    max-width: 34ch;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.rd-auth-panel-sub {
    margin: 14px 0 0;
    max-width: 44ch;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .72);
}

.rd-auth-stats {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rd-auth-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.rd-auth-stat-value {
    font-size: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    width: 112px;
    flex: none;
}

.rd-auth-stat-label {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
}

/* The slot the design pins to the bottom of the panel. */
.rd-auth-panel-note {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   3. The setup shell — Onboarding.dc.html's 52px navy bar and its rail copy,
   used by provisioning and by invitation acceptance.
   ========================================================================== */

.rd-setup {
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rd-canvas);
}

.rd-setup-bar {
    flex: none;
    height: 52px;
    background: var(--rd-navy);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    color: #FFFFFF;
}

.rd-setup-bar-brand { display: flex; align-items: center; gap: 8px; }

.rd-setup-bar-mark {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--rd-navy);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-setup-bar-name { font-size: 14px; font-weight: 600; }

.rd-setup-bar-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}

.rd-setup-bar-spacer { flex: 1; }

.rd-setup-bar-state {
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
    font-variant-numeric: tabular-nums;
}

.rd-setup-body {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 40px 24px 56px;
}

.rd-setup-col { width: 100%; max-width: 560px; }
.rd-setup-col-wide { max-width: 640px; }

.rd-setup-kicker-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.rd-setup-lede {
    margin: 8px 0 0;
    max-width: 64ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--rd-text-muted);
}

.rd-setup-card {
    margin-top: 22px;
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    box-shadow: var(--rd-shadow-card);
    padding: 18px;
}

.rd-setup-card-bad {
    background: var(--rd-red-inset);
    border-color: var(--rd-bad-bd);
}

.rd-setup-card-bad .rd-setup-lede { margin-top: 7px; color: var(--rd-text-3); }

/*
 | Step markers. .rd-steps / .rd-steps-item / .rd-steps-marker come from
 | design.css; the design's onboarding rail draws a 1px ring on every marker and
 | puts an icon inside it (check / dot / dash), which the shared strip does not.
 | Those two details are added here because they are the marker as this flow
 | draws it, not a change to the shared component.
 */
.rd-setup-steps.rd-steps { gap: 8px; margin-bottom: 0; }

.rd-setup-steps .rd-steps-marker {
    border: 1px solid var(--rd-border-strong);
}

.rd-setup-steps .rd-steps-item.is-done .rd-steps-marker { border-color: var(--rd-ok-bd); }
.rd-setup-steps .rd-steps-item.is-current .rd-steps-marker { border-color: var(--rd-navy); }
.rd-setup-steps .rd-steps-marker i { font-size: 10px; }

.rd-setup-progress { margin-top: 18px; }

.rd-setup-progress-label {
    margin-top: 9px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--rd-text-muted);
}

.rd-setup-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.rd-setup-note {
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--rd-text-meta);
}

/* The editorial callout the onboarding design uses to carry real advice. */
.rd-setup-callout {
    margin-top: 14px;
    padding: 13px 15px;
    background: var(--rd-info-bg);
    border: 1px solid var(--rd-info-bd);
    border-radius: var(--rd-radius-inset);
    font-size: 13px;
    line-height: 1.55;
    color: var(--rd-info-fg);
}

/* A status icon tile — the design's 38px rounded square. */
.rd-setup-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--rd-radius-block);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rd-setup-icon-ok  { background: var(--rd-ok-bg);  border: 1px solid var(--rd-ok-bd);  color: var(--rd-ok-fg); }
.rd-setup-icon-bad { background: var(--rd-bad-bg); border: 1px solid var(--rd-bad-bd); color: var(--rd-bad-fg); }

/* Two-up field grid on the wider setup forms. */
.rd-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.rd-setup-grid .rd-auth-field,
.rd-setup-grid .rd-auth-field-first { margin-top: 0; }

.rd-setup-span { grid-column: 1 / -1; }

/*
 | Fields inside an onboarding card are the design's onboarding fields —
 | 14px text, 10px/11px padding, 8px radius — not the larger 15px/9px control
 | the sign-in column uses. Two different treatments on purpose: the sign-in is
 | two fields on an empty canvas, this is four inside a card.
 */
.rd-setup-input.form-control {
    width: 100%;
    font-size: 14px;
    padding: 10px 11px;
    border: 1px solid var(--rd-border-strong);
    border-radius: var(--rd-radius-control);
    background-color: var(--rd-surface);
    color: var(--rd-text);
}

.rd-setup-input.form-control:focus {
    outline: none;
    border-color: var(--rd-navy);
    box-shadow: var(--rd-focus-ring);
}

.rd-setup-input.form-control.is-invalid {
    border-color: var(--rd-bad-bd);
    background-image: none;
    padding-right: 11px;
}

.rd-setup-input.form-control.is-invalid:focus {
    border-color: var(--rd-bad-bd);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}

/*
 | design.css styles the required asterisk only under .form-label. These
 | screens label with .rd-label, so it is repeated here — see the note in
 | v2-planning/wave5-design/auth.md; the rule belongs in design.css.
 */
.rd-auth-field .rd-label .rd-req { color: var(--rd-bad-dot); }

/* ==========================================================================
   4. When these screens land inside the signed-in shell.
   ========================================================================== */

/*
 | Two of them can. /login is reachable while signed in, and the invitation
 | screen resolves a tenant in mount(), which lets a remember-me cookie for that
 | same workspace authenticate before the layout chooses its shell — so the
 | invitee is shown the app bar and someone else's navigation around their own
 | sign-up form. That is the shared layout's call, not this stylesheet's; see
 | v2-planning/wave5-design/auth.md. What is fixed here is the look: inside the
 | shell these must not claim the viewport or sit edge to edge against a sidebar.
 */
.rd-main .rd-auth,
.rd-main .rd-setup {
    min-height: 0;
    border: 1px solid var(--rd-border);
    border-radius: var(--rd-radius-card);
    overflow: hidden;
}

.rd-main .rd-setup-body { padding: 26px 20px 32px; }

.rd-main .rd-auth-form,
.rd-main .rd-auth-panel { padding: 32px 28px; }

/* ==========================================================================
   5. Narrow screens.
   ========================================================================== */

/*
 | The design stacks at 680px via min-width:340px on both columns and relies on
 | nothing below that. At 390px its 32px/36px column padding leaves 276px of
 | usable width, so the padding is eased here. This is the only departure from
 | the design's own numbers on these screens.
 */
@media (max-width: 575.98px) {
    .rd-auth-form { padding: 32px 20px 36px; }
    .rd-auth-panel { padding: 32px 20px 36px; }
    .rd-auth-panel-headline { font-size: 22px; }
    .rd-auth-stats { margin-top: 26px; gap: 14px; }
    .rd-auth-stat { gap: 10px; }
    .rd-auth-stat-value { width: 88px; font-size: 21px; }
    .rd-auth-panel-note { margin-top: 22px; }

    .rd-setup-body { padding: 26px 16px 40px; }
    .rd-setup-card { padding: 15px; }
    .rd-setup-bar-meta { display: none; }
}

/* Sign-up — builder or broker, chosen first because it decides the product. */
.rd-auth-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; padding: 0; border: 0; }
.rd-auth-kind legend { grid-column: 1 / -1; margin-bottom: 6px; float: none; width: auto; }

.rd-auth-kind-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--rd-border);
    border-radius: 10px;
    background: var(--rd-surface);
    cursor: pointer;
}

.rd-auth-kind-opt .bi { font-size: 20px; color: var(--rd-text-meta); }
.rd-auth-kind-opt b { display: block; font-size: 13px; color: var(--rd-text); }
.rd-auth-kind-opt small { display: block; font-size: 11.5px; line-height: 1.4; color: var(--rd-text-muted); }
.rd-auth-kind-opt.is-on { border-color: var(--rd-navy); background: var(--rd-navy-tint); }
.rd-auth-kind-opt.is-on .bi, .rd-auth-kind-opt.is-on b { color: var(--rd-navy); }
.rd-auth-kind-opt:has(input:focus-visible) { outline: 2px solid var(--rd-navy); outline-offset: 2px; }
.rd-auth-kind-text { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--rd-text-muted); }

@media (max-width: 575.98px) { .rd-auth-kind { grid-template-columns: 1fr; } }

/* Sign-in method toggle and the one-time-code steps. */
.rd-auth-methods { display: flex; gap: 4px; margin: 0 0 16px; padding: 3px; border-radius: 10px; background: var(--rd-surface-alt); }
.rd-auth-method { flex: 1; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--rd-text-muted); }
.rd-auth-method.is-on { background: var(--rd-surface); color: var(--rd-navy); box-shadow: 0 1px 3px rgba(20, 24, 31, .1); }
.rd-auth-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 5px; }
.rd-auth-channel { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 9px; border: 1px solid var(--rd-border); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--rd-text-3); cursor: pointer; }
.rd-auth-channel.is-on { border-color: var(--rd-navy); background: var(--rd-navy-tint); color: var(--rd-navy); }
.rd-auth-channel:has(input:focus-visible) { outline: 2px solid var(--rd-navy); outline-offset: 2px; }
.rd-auth-code { font-family: var(--bs-font-monospace); font-size: 22px; letter-spacing: .5em; text-align: center; }
.rd-auth-code-foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; }

/* ==========================================================================
   v2 — Login.dc.html: the brand panel on the LEFT in heroBg (a dark tone
   built to carry white), floating decoration, the form on the right. The
   same classes serve sign-up and the invitation screen.
   ========================================================================== */
.rd-auth { background: var(--rd-bg); font-family: var(--rd-body-font); }
.rd-auth-panel { position: relative; overflow: hidden; order: -1; flex: 0 0 46%; min-width: 380px; padding: 44px 48px; background: var(--rd-hero-bg); isolation: isolate; }
.rd-auth-panel::before, .rd-auth-panel::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: rgba(255,255,255,.12); animation: rdFloat 8s ease-in-out infinite; }
.rd-auth-panel::before { right: -90px; top: -70px; width: 320px; height: 320px; }
.rd-auth-panel::after { right: 90px; bottom: 80px; width: 200px; height: 200px; background: rgba(255,255,255,.08); animation-duration: 11s; }
.rd-auth-panel-kicker { color: rgba(255,255,255,.85); font-weight: 800; }
.rd-auth-panel-headline { font-family: var(--rd-heading-font); font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; max-width: 16ch; }
.rd-auth-panel-sub { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); }
.rd-auth-stat { border-bottom-color: rgba(255,255,255,.18); }
.rd-auth-stat-value { font-family: var(--rd-heading-font); font-weight: 800; }
.rd-auth-stat-label, .rd-auth-panel-note { color: rgba(255,255,255,.78); }

.rd-auth-form { padding: 44px 32px; }
.rd-auth-inner { max-width: 396px; animation: rdRise .5s ease both .1s; }
.rd-auth-mark { border-radius: 12px; background: var(--rd-action-bg); color: #fff; font-family: var(--rd-heading-font); font-weight: 800; }
.rd-auth-brand-name { font-family: var(--rd-heading-font); font-weight: 800; letter-spacing: -.02em; }
.rd-auth-block .rd-display { font-size: 27px; }
.rd-auth-lede { color: var(--rd-text-meta); }
.rd-auth-methods { padding: 4px; border-radius: 12px; background: var(--rd-surface-alt); border: 1px solid var(--rd-border); }
.rd-auth-method { border-radius: 9px; font-weight: 700; color: var(--rd-text-meta); }
.rd-auth-method.is-on { background: var(--rd-surface); color: var(--rd-primary-ink); font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.rd-auth-input { height: 46px; border-radius: 11px; border-color: var(--rd-border); background: var(--rd-surface); font-size: 14px; }
.rd-auth-input:focus { border-color: var(--rd-primary); box-shadow: var(--rd-focus-ring); }
.rd-auth .btn-primary { min-height: 46px; border-radius: 11px; font-size: 14px; }

@media (max-width: 900px) {
    .rd-auth-panel { flex-basis: 100%; min-width: 0; order: 2; padding: 32px 24px; }
    .rd-auth-panel-headline { font-size: 26px; }
}