/* ==========================================================================
   Full Diary Ops — fdo-register.css
   Stage 1 consolidation
   Purpose: registration / clinic-test-line shell only.
   Scope: .registration-bridge-shell
   Extracted from the registration block previously living inside fdo.css.
   ========================================================================== */

.reg.registration-bridge-shell {
    --reg-accent: #5e35b1;
    --reg-accent-rgb: 94, 53, 177;
    --reg-accent-dark: #4527a0;
    --reg-border: rgba(83, 56, 158, 0.14);
    --reg-border-strong: rgba(83, 56, 158, 0.26);
    --reg-soft: #f8f6ff;
    --reg-soft-strong: #eee9ff;
    --reg-ink: #1f1d2b;
    --reg-muted: #6f6b7d;
    --reg-success: #198754;
    --reg-card-shadow: 0 0.75rem 2.25rem rgba(31, 29, 43, 0.08);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--reg-ink);
    background:
        radial-gradient(circle at top right, rgba(var(--reg-accent-rgb), 0.14), transparent 34rem),
        linear-gradient(135deg, #ffffff 0%, var(--reg-soft) 100%);
}

.registration-bridge-shell .btn--primary {
    min-height: 52px;
    border-radius: 999px;
    background: linear-gradient(180deg, #6f45c8 0%, var(--reg-accent) 54%, var(--reg-accent-dark) 100%);
    border-color: rgba(var(--reg-accent-rgb), 0.28);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(var(--reg-accent-rgb), 0.22), 0 1px 0 rgba(255,255,255,0.16) inset;
}

.registration-bridge-shell .btn--primary:hover:not(:disabled) {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #7b55d0 0%, #633dbd 54%, #3f2193 100%);
    border-color: rgba(var(--reg-accent-rgb), 0.42);
    box-shadow: 0 18px 34px rgba(var(--reg-accent-rgb), 0.26), 0 0 0 4px rgba(var(--reg-accent-rgb), 0.12);
}

.registration-bridge-shell .btn--primary:disabled,
.registration-bridge-shell .btn--primary[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

.reg__logoWrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 6vh, 70px);
    margin-bottom: 1.5rem;
    padding: 0 24px;
}

.reg__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 58px;
}

.reg__wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 24px 32px;
}

.reg__card {
    width: min(92vw, 1180px);
    min-height: min(760px, calc(100vh - 150px));
    height: auto;
    display: flex;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: var(--reg-card-shadow);
}

.reg__col {
    flex: 1 1 50%;
    padding: clamp(1.5rem, 3vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reg__col--left {
    border-right: 1px solid var(--reg-border);
    background:
        radial-gradient(circle at top left, rgba(var(--reg-accent-rgb), 0.16), transparent 28rem),
        linear-gradient(135deg, #ffffff 0%, var(--reg-soft) 100%);
}

.reg__col--right {
    background: #ffffff;
    justify-content: center;
}

/* Progress */

.regProgress {
    display: grid;
    gap: 10px;
}

.regProgress__top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.regProgress__text {
    color: var(--reg-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.regProgress__track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--reg-border);
    border-radius: 999px;
    background: rgba(var(--reg-accent-rgb), 0.10);
}

.regProgress__fill {
    width: var(--progress, 20%);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--reg-accent), #7e57c2);
    transition: width 260ms ease;
}

.regProgress--mobile {
    display: none;
}

/* Left panels */

.regLeft__headline,
.regPanel__headline {
    margin: 0 0 1rem;
    color: var(--reg-ink);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.regLeft__headline {
    font-size: clamp(2rem, 3vw, 3.15rem);
}

.regPanel__headline {
    font-size: clamp(1.85rem, 3vw, 2.85rem);
}

.regLeft__subtext,
.regPanel__subtext,
.regPanel__note {
    margin: 0 0 1.5rem;
    color: var(--reg-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.regLeft__subtext {
    max-width: 60ch;
    font-size: 1.05rem;
    line-height: 1.6;
}

.regPanel__subtext--start {
    max-width: 48rem;
}

.regLeft__list {
    margin-top: 0;
    display: grid;
    gap: 0.85rem;
}

.regLeft__list li {
    align-items: flex-start;
}

.regLeft__liIcon {
    color: var(--reg-accent);
    margin-top: 0.1rem;
}

.regLeft__proof {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--reg-border);
    border-radius: 1.25rem;
    background: rgba(255,255,255,0.74);
}

.regLeft__proof p,
.regLeft__reassure {
    margin-bottom: 0;
}

.regLeft__reassure {
    margin-top: 1rem;
    color: var(--reg-accent);
    font-weight: 700;
}

.regLeft__panel,
.regPanel {
    display: none;
}

.regLeft__panel.is-active,
.regPanel.is-active {
    display: block;
    animation: regFadeUp 220ms ease both;
}

/* Right panels and cards */

.regPanel__kicker,
.regStartCard__eyebrow {
    color: var(--reg-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.regPanel__kicker {
    margin-bottom: 0.65rem;
}

.regStartCard {
    margin-top: 1.35rem;
    padding: clamp(1.15rem, 2vw, 1.5rem);
    border: 1px solid var(--reg-border-strong);
    border-radius: 1.5rem;
    background: #ffffff;
    box-shadow: 0 0.75rem 2rem rgba(31, 29, 43, 0.08);
}

.regStartCard__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.regStartCard__eyebrow {
    display: block;
    font-size: 0.75rem;
}

.regStartCard__title {
    margin: 0.2rem 0 0;
    color: var(--reg-ink);
    font-size: 1.15rem;
    font-weight: 800;
}

.regStartCard__badge {
    flex: 0 0 auto;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: var(--reg-soft-strong);
    color: var(--reg-accent-dark);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.regLookupField {
    margin-bottom: 0;
}

.regLookupField__label {
    color: var(--reg-ink);
    font-weight: 800;
}

.regLookupField__help {
    margin-top: 0.7rem;
}

.regActions {
    display: grid;
    gap: 12px;
    margin-top: 1.5rem;
}

.regActions--start {
    margin-top: 1rem;
}

.regTrustStrip {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--reg-border);
    border-radius: 1rem;
    background: var(--reg-soft);
    color: var(--reg-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.regTrustStrip__dot {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    margin-top: 0.32rem;
    border-radius: 999px;
    background: var(--reg-success);
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12);
}

/* Registration links and autocomplete */

.regLinkBtn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 0;
    text-align: left;
    color: var(--reg-muted);
    cursor: pointer;
    font-weight: 800;
}

.regLinkBtn:hover {
    color: var(--reg-accent);
}

.regLinkBtn:focus-visible,
.regLinkInline:focus-visible {
    outline: 3px solid rgba(var(--reg-accent-rgb), 0.26);
    outline-offset: 3px;
}

.regLinkBtn__icon {
    margin-right: 10px;
    vertical-align: -0.325em;
}

.regLinkInline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--reg-accent);
    font-weight: 800;
    text-decoration: none;
}

.regLinkInline:hover {
    color: var(--reg-accent-dark);
}

.regAutoWrap {
    position: relative;
}

.regAutoWrap--hero .input--hero {
    min-height: 64px;
    padding-left: 3.2rem;
    border: 2px solid var(--reg-border-strong);
    border-radius: 1.15rem;
    background: #ffffff;
    color: var(--reg-ink);
    font-size: 1.05rem;
    font-weight: 650;
    box-shadow: 0 0.35rem 1.2rem rgba(31,29,43,0.05);
}

.regAutoWrap--hero .input--hero:focus {
    border-color: rgba(var(--reg-accent-rgb), 0.72);
    box-shadow: 0 0 0 4px rgba(var(--reg-accent-rgb), 0.13), 0 0.65rem 1.65rem rgba(31,29,43,0.08);
}

.regAutoWrap__icon {
    position: absolute;
    z-index: 2;
    left: 1rem;
    top: 50%;
    width: 1.45rem;
    height: 1.45rem;
    color: var(--reg-accent);
    pointer-events: none;
    transform: translateY(-50%);
}

.regAutocomplete {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    display: none;
    max-height: 340px;
    overflow: auto;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    border: 1px solid var(--reg-border-strong);
    border-radius: 1.15rem;
    background: #ffffff;
    box-shadow: 0 1rem 2.5rem rgba(31,29,43,0.14);
}

.regAutocomplete.show {
    display: grid;
    gap: 0.4rem;
}

.regAutocomplete__option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.78rem 0.85rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.regAutocomplete__option:hover,
.regAutocomplete__option:focus {
    background: var(--reg-soft);
    border-color: var(--reg-border);
    outline: none;
    transform: translateY(-1px);
}

.regAutocomplete__pin {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--reg-soft-strong);
    color: var(--reg-accent);
    font-weight: 900;
}

.regAutocomplete__copy {
    display: grid;
    gap: 0.15rem;
}

.regAutocomplete__main {
    color: var(--reg-ink);
    font-weight: 800;
    line-height: 1.25;
}

.regAutocomplete__meta {
    color: var(--reg-muted);
    font-size: 0.9rem;
    line-height: 1.35;
}

/* Checklist steps */

.regSteps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.regSteps__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.95rem 1rem;
    border: 1px solid var(--reg-border);
    border-radius: 1.15rem;
    background: #ffffff;
    color: var(--reg-muted);
    box-shadow: 0 0.5rem 1.5rem rgba(31,29,43,0.04);
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.regSteps__item.is-active {
    border-color: rgba(var(--reg-accent-rgb), 0.34);
    background: var(--reg-soft);
    color: var(--reg-ink);
    box-shadow: 0 0.75rem 1.75rem rgba(var(--reg-accent-rgb), 0.08);
}

.regSteps__item.is-active .regSteps__icon {
    animation: regPulse 900ms ease-in-out infinite;
}

.regSteps__item.is-done {
    border-color: rgba(25, 135, 84, 0.24);
    background: #f1fbf6;
    color: var(--reg-ink);
    transform: translateY(-1px);
}

.regSteps__item.is-soft {
    border-color: rgba(var(--reg-accent-rgb), 0.20);
    background: var(--reg-soft);
}

.regSteps__icon {
    flex: 0 0 auto;
    width: 1.75em;
    height: 1.75em;
    margin-top: 2px;
    position: relative;
    color: var(--reg-accent);
}

.regSteps__pending {
    opacity: 0.5;
}

.regSteps__done {
    display: none;
    color: var(--reg-success);
}

.regSteps__item.is-done .regSteps__pending {
    display: none;
}

.regSteps__item.is-done .regSteps__done {
    display: inline-block;
    animation: regCheckPop 180ms ease both;
}

.regDynamic {
    font-weight: 800;
    color: var(--reg-accent);
}

.regFallbackLink {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--reg-border);
    border-radius: 1rem;
    background: var(--reg-soft);
}

.regLegal {
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Animation */

@keyframes regFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes regCheckPop {
    from {
        opacity: 0;
        transform: scale(0.84);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes regPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* Responsive */

@media (min-width: 1200px) {
    .reg.registration-bridge-shell .reg__col--right {
        flex-basis: 52%;
    }

    .reg.registration-bridge-shell .reg__col--left {
        flex-basis: 48%;
    }
}

@media (max-width: 991px) {
    .reg__card {
        width: min(100%, 760px);
        flex-direction: column;
    }

    .reg__col--left {
        border-right: 0;
        border-bottom: 1px solid var(--reg-border);
    }

    .regLeft__headline {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }
}

@media (max-width: 767px) {
    .reg__logoWrap {
        margin-top: 32px;
        margin-bottom: 1rem;
        padding: 0 16px;
    }

    .reg__logo {
        height: 48px;
    }

    .reg__wrap {
        padding: 0 16px 16px;
    }

    .reg__card {
        width: 100%;
        min-height: auto;
        border-radius: 1rem;
    }

    .reg__col {
        padding: 1.2rem;
    }

    .reg__col--left {
        display: none;
    }

    .regProgress--mobile {
        display: grid;
        margin-bottom: 1.35rem;
    }

    .regPanel__headline {
        font-size: clamp(1.7rem, 8vw, 2.25rem);
    }

    .regStartCard {
        border-radius: 1.1rem;
    }

    .regStartCard__header {
        flex-direction: column;
    }

    .regStartCard__badge {
        align-self: flex-start;
    }

    .regAutoWrap--hero .input--hero {
        min-height: 58px;
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .registration-bridge-shell *,
    .registration-bridge-shell *::before,
    .registration-bridge-shell *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}