/* ============================================================
   app.css — WillBeDone global design tokens + base styles.
   This file is the sole source of truth for ALL design tokens.
   Component-specific styles live in each component's .razor.css.
   ============================================================ */

/* ============================================================
   Design tokens
   ============================================================ */
:root {
    /* --- Typography ---------------------------------------------------------- */
    --wbd-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wbd-font-weight-regular: 400;
    --wbd-font-weight-medium: 600; /* semibold — buttons, labels */
    --wbd-font-weight-strong: 700; /* bold — headings, counts  */
    /* --- Brand purple -------------------------------------------------------- */
    --wbd-purple-deep: #5b21b6; /* wordmark, primary CTA fill */
    --wbd-purple-mid: #7c3aed; /* committed state, focus     */
    --wbd-purple-light: rgba(124, 58, 237, 0.07); /* tinted surface, active pill */
    --wbd-purple-border: rgba(124, 58, 237, 0.14); /* border on tinted elements   */
    /* Canonical accent aliases ------------------------------------------------ */
    --wbd-accent: #7c3aed;
    --wbd-accent-600: #6d28d9;
    --wbd-accent-400: #8b5cf6;
    --wbd-accent-300: #a78bfa;
    /* --- Semantic colours ---------------------------------------------------- */
    --wbd-success: #059669; /* completed — never use red for NotCompleted  */
    --wbd-teal-mid: #0d9488;
    --wbd-teal-light: rgba(13, 148, 136, 0.07);
    --wbd-amber-mid: #b45309; /* exception / recovery         */
    --wbd-amber-light: rgba(180, 83, 9, 0.06);
    --wbd-amber-border: rgba(180, 83, 9, 0.14);
    /* --- Neutrals ------------------------------------------------------------ */
    --wbd-white: #ffffff;
    --wbd-card: #ffffff;
    --wbd-surface: #f6f7fb; /* page background              */
    --wbd-gray-ink: #111827; /* headings, strongest text      */
    --wbd-gray-secondary: #374151; /* body copy                     */
    --wbd-gray-muted: #6b7280; /* labels, muted text            */
    --wbd-gray-subtle: #9ca3af; /* placeholders, decorative      */
    --wbd-gray-surface: #f9fafb; /* panel / section backgrounds   */
    --wbd-gray-light: #f3f4f6; /* input backgrounds             */
    --wbd-gray-100: #f3f4f6;
    --wbd-gray-border: rgba(17, 24, 39, 0.05);
    /* Canonical aliases (used by some component CSS) */
    --wbd-text: #111827;
    --wbd-muted: #6b7280;
    /* --- Borders ------------------------------------------------------------- */
    --wbd-border: 1px solid rgba(17, 24, 39, 0.05);
    /* --- Radii --------------------------------------------------------------- */
    --wbd-radius: 10px;
    --wbd-radius-lg: 14px;
    --wbd-radius-pill: 999px;
    /* --- Spacing scale ------------------------------------------------------- */
    --wbd-space-1: 4px;
    --wbd-space-2: 8px;
    --wbd-space-3: 12px;
    --wbd-space-4: 16px;
    --wbd-space-5: 24px;
    --wbd-space-6: 32px;
    --wbd-space-7: 48px;
    --wbd-space-8: 64px;
    --wbd-gap: 1rem; /* legacy alias */
    /* --- Shadows ------------------------------------------------------------- */
    --wbd-shadow-sm: 0 2px 8px rgba(15, 14, 23, 0.05);
    --wbd-shadow: 0 6px 20px rgba(15, 14, 23, 0.07);
    --wbd-shadow-lg: 0 14px 36px rgba(15, 14, 23, 0.09);
    /* --- Motion -------------------------------------------------------------- */
    --wbd-transition: 0.14s ease;
    /* --- Layout -------------------------------------------------------------- */
    --wbd-max-width: 1100px;
    --wbd-card-max-width: 720px;
    --wbd-card-padding: 20px; /* legacy alias */
    /* --- Focus ring ---------------------------------------------------------- */
    --wbd-focus: 0 0 0 3px rgba(124, 58, 237, 0.2); /* legacy alias */
    --wbd-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2);
    /* --- Category colors ----------------------------------------------------- */
    --wbd-cat-health: #22c55e; /* green   — body, vitality      */
    --wbd-cat-focus: #8b5cf6; /* violet  — deep work, thinking */
    --wbd-cat-growth: #f59e0b; /* amber   — learning, skills    */
    --wbd-cat-creative: #ec4899; /* pink    — making, expression  */
    --wbd-cat-social: #3b82f6; /* blue    — people, connection  */
    --wbd-cat-finance: #0891b2; /* cyan-600 — money, stability    */
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}
/* Heading reset — prevents browser-default 2em/0.67em margin FOUC.
   Each component sets its own font-size/weight via scoped CSS.
   This runs from the main stylesheet so it applies before the first paint. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
html, body {
    height: 100%;
    margin: 0;
    font-family: var(--wbd-font);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--wbd-surface);
    color: var(--wbd-gray-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* prevent nav overflow from creating horizontal scroll */
    max-width: 100%;
}

/* ============================================================
   Authenticated page shell
   ============================================================ */
.page-content {
    min-height: calc(100vh - 56px); /* 56px = nav height */
    padding: var(--wbd-space-6) var(--wbd-space-4);
}

/* ============================================================
   Today page — centred single-card layout
   ============================================================ */
.today {
    display: block;
    min-height: calc(100vh - 56px);
    background: linear-gradient( 155deg, rgba(124, 58, 237, 0.04) 0%, rgba(124, 58, 237, 0.01) 40%, var(--wbd-surface) 100% );
}

    .today .today-card {
        max-width: var(--wbd-card-max-width);
        margin: 0 auto;
        background: var(--wbd-card);
        border-radius: var(--wbd-radius-lg);
        box-shadow: var(--wbd-shadow);
        border: var(--wbd-border);
        border-top: 2px solid var(--wbd-purple-border);
        padding: var(--wbd-space-5);
        display: flex;
        flex-direction: column;
        gap: var(--wbd-space-4);
    }

/* Top strip — stats bar + arc carousel in a tinted panel */
.today-top {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-3);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    background: var(--wbd-purple-light);
    border: 1px solid var(--wbd-purple-border);
    border-radius: var(--wbd-radius);
}

.day-stats-bar {
    width: 100%;
}

.arc-today-strip {
    width: 100%;
}

/* State messages */
.today-loading {
    text-align: center;
    padding: var(--wbd-space-7);
    color: var(--wbd-gray-muted);
    font-size: 0.9375rem;
}

.today-error {
    text-align: center;
    padding: var(--wbd-space-5);
    color: #dc2626;
    font-size: 0.9375rem;
}

/* ============================================================
   Focus — keyboard users
   ============================================================ */
button:focus,
a:focus,
[role="button"]:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--wbd-focus-ring);
    border-radius: var(--wbd-radius);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 900px) {
    .today .today-card {
        padding: var(--wbd-space-6);
    }
}

@media (max-width: 640px) {
    .page-content {
        padding: var(--wbd-space-4) var(--wbd-space-3);
    }

    .today .today-card {
        border-radius: var(--wbd-radius);
        padding: var(--wbd-space-4);
    }

    .arc-today-strip {
        display: none;
    }
}
/* ============================================================
   Global nav-link styles
   NavLink (Blazor component) renders its own <a> tag internally,
   placing it outside NavMenu's scoped CSS boundary. All .nav-link
   rules must live here in app.css to take effect.
   ============================================================ */

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--wbd-space-3);
    height: 100%;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.875rem;
    color: var(--wbd-gray-muted);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    transition: color var(--wbd-transition), border-bottom-color var(--wbd-transition);
}

    .nav-link:hover {
        color: var(--wbd-gray-secondary);
        background: transparent;
    }

    /* Blazor adds .active when route matches */
    .nav-link.active {
        color: var(--wbd-purple-deep);
        border-bottom-color: var(--wbd-purple-mid);
        font-weight: var(--wbd-font-weight-medium);
    }

/* SVG icon inside NavLink child content */
.nav-link-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    pointer-events: none;
}

/* CTA pill — unauthenticated visitors only */
.nav-link--cta {
    align-self: center;
    height: auto;
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: 2px solid transparent;
    border-radius: var(--wbd-radius);
    padding: 6px var(--wbd-space-4);
    font-weight: var(--wbd-font-weight-medium);
    margin-bottom: 0;
}

    .nav-link--cta:hover {
        background: var(--wbd-purple-mid);
        color: var(--wbd-white);
    }

    .nav-link--cta.active {
        background: var(--wbd-purple-deep);
        color: var(--wbd-white);
        border-bottom-color: transparent;
    }

@media (max-width: 480px) {
    .nav-link {
        padding: 0 var(--wbd-space-2);
        gap: 4px;
        font-size: 0.8125rem;
    }
}
/* ============================================================
   Global auth form styles
   AuthLayout is the shell; Login/Register/Manage pages are children.
   Scoped CSS from AuthLayout.razor.css does NOT reach child component
   elements — these rules must be global.
   ============================================================ */

.auth-title {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--wbd-gray-ink);
    margin: 0 0 var(--wbd-space-5);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-1);
    margin-bottom: var(--wbd-space-4);
}

.auth-field-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.auth-label {
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-secondary);
}

.auth-label-action {
    font-size: 0.8rem;
    color: var(--wbd-purple-mid);
    text-decoration: none;
}

    .auth-label-action:hover {
        text-decoration: underline;
    }

.auth-input {
    width: 100%;
    border: var(--wbd-border);
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3);
    font-size: 1rem;
    font-family: var(--wbd-font);
    background: var(--wbd-white);
    color: var(--wbd-gray-ink);
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .auth-input::placeholder {
        color: var(--wbd-gray-muted);
    }

    .auth-input:focus {
        border-color: var(--wbd-purple-mid);
        box-shadow: 0 0 0 3px var(--wbd-purple-light);
        outline: none;
    }

.auth-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--wbd-space-2);
    margin-bottom: var(--wbd-space-5);
}

.auth-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--wbd-purple-mid);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-checkbox-label {
    font-size: 0.875rem;
    color: var(--wbd-gray-secondary);
    cursor: pointer;
}

.auth-btn {
    display: block;
    width: 100%;
    padding: var(--wbd-space-3) var(--wbd-space-4);
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border: none;
    border-radius: var(--wbd-radius);
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--wbd-font);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity var(--wbd-transition);
}

    .auth-btn:hover {
        opacity: 0.9;
        color: var(--wbd-white);
        text-decoration: none;
    }

.auth-btn--outline {
    background: transparent;
    color: var(--wbd-purple-mid);
    border: 1px solid var(--wbd-purple-border);
    margin-top: var(--wbd-space-3);
}

    .auth-btn--outline:hover {
        opacity: 1;
        background: var(--wbd-purple-light);
        color: var(--wbd-purple-mid);
    }

.auth-divider {
    position: relative;
    text-align: center;
    margin: var(--wbd-space-4) 0 0;
    font-size: 0.8rem;
    color: var(--wbd-gray-muted);
}

    .auth-divider::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--wbd-gray-border);
    }

    .auth-divider span {
        position: relative;
        background: var(--wbd-white);
        padding: 0 var(--wbd-space-3);
    }

.auth-switch {
    text-align: center;
    font-size: 0.875rem;
    color: var(--wbd-gray-secondary);
    margin: var(--wbd-space-4) 0 0;
}

.auth-switch-link {
    color: var(--wbd-purple-mid);
    font-weight: var(--wbd-font-weight-medium);
    text-decoration: none;
}

    .auth-switch-link:hover {
        text-decoration: underline;
    }

.auth-errors {
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    font-size: 0.875rem;
    color: #b91c1c;
    margin-bottom: var(--wbd-space-4);
}

.auth-error {
    font-size: 0.8125rem;
    color: #b91c1c;
    margin: 2px 0 0;
}
/* ============================================================
   Bootstrap-compat — Identity manage pages
   These pages use Bootstrap class names from the scaffold template.
   Bootstrap CSS is not loaded — these rules provide WBD-styled
   equivalents for the exact classes used in Account/Manage/*.razor.
   ============================================================ */

/* Layout */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wbd-space-4);
}

.col-xl-6 {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 560px;
}

.mb-3 {
    margin-bottom: var(--wbd-space-4);
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.font-weight-bold {
    font-weight: var(--wbd-font-weight-strong);
}

/* Text utilities */
.text-danger {
    color: #b91c1c;
    font-size: 0.8125rem;
}

.text-success {
    color: var(--wbd-success);
}

/* Form fields */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--wbd-font-weight-medium);
    color: var(--wbd-gray-secondary);
    margin-bottom: var(--wbd-space-1);
}

.form-control {
    display: block;
    width: 100%;
    padding: var(--wbd-space-3);
    font-size: 1rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-ink);
    background: var(--wbd-white);
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: var(--wbd-radius);
    transition: border-color var(--wbd-transition), box-shadow var(--wbd-transition);
}

    .form-control::placeholder {
        color: var(--wbd-gray-subtle);
    }

    .form-control:focus {
        outline: none;
        border-color: var(--wbd-purple-mid);
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
    }

    .form-control:disabled,
    .form-control[readonly] {
        background: var(--wbd-gray-100);
        color: var(--wbd-gray-muted);
        cursor: not-allowed;
    }

/* Floating label — simplified (non-animated; avoids JS dependency) */
.form-floating {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-1);
}

    .form-floating .form-label {
        order: -1; /* label above input */
    }

/* Input group (email page: input + verified badge) */
.input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}

    .input-group .form-control {
        flex: 1 1 auto;
        border-radius: var(--wbd-radius) 0 0 var(--wbd-radius);
    }

.input-group-append {
    display: flex;
    align-items: stretch;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    font-size: 0.875rem;
    background: var(--wbd-gray-100);
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-left: none;
    border-radius: 0 var(--wbd-radius) var(--wbd-radius) 0;
    color: var(--wbd-gray-secondary);
    white-space: nowrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--wbd-space-2) var(--wbd-space-4);
    font-size: 0.9375rem;
    font-weight: var(--wbd-font-weight-medium);
    font-family: var(--wbd-font);
    border-radius: var(--wbd-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: opacity var(--wbd-transition), background var(--wbd-transition);
    white-space: nowrap;
}

    .btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.btn-lg {
    padding: var(--wbd-space-3) var(--wbd-space-5);
    font-size: 1rem;
}

.btn-primary {
    background: var(--wbd-purple-deep);
    color: var(--wbd-white);
    border-color: var(--wbd-purple-deep);
}

    .btn-primary:hover:not(:disabled) {
        background: var(--wbd-purple-mid);
        border-color: var(--wbd-purple-mid);
        color: var(--wbd-white);
        text-decoration: none;
    }

.btn-danger {
    background: #dc2626;
    color: var(--wbd-white);
    border-color: #dc2626;
}

    .btn-danger:hover:not(:disabled) {
        background: #b91c1c;
        color: var(--wbd-white);
        text-decoration: none;
    }

.btn-secondary {
    background: var(--wbd-gray-100);
    color: var(--wbd-gray-secondary);
    border-color: rgba(17, 24, 39, 0.12);
}

    .btn-secondary:hover:not(:disabled) {
        background: #e5e7eb;
        color: var(--wbd-gray-ink);
    }

.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--wbd-purple-mid);
    padding-left: 0;
    padding-right: 0;
    font-weight: var(--wbd-font-weight-regular);
}

    .btn-link:hover:not(:disabled) {
        text-decoration: underline;
        color: var(--wbd-purple-deep);
    }

/* Validation */
.validation-errors {
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: var(--wbd-radius);
    padding: var(--wbd-space-3) var(--wbd-space-4);
    font-size: 0.875rem;
    color: #b91c1c;
    margin-bottom: var(--wbd-space-4);
}

.validation-message {
    display: block;
    font-size: 0.8125rem;
    color: #b91c1c;
    margin-top: 4px;
}
/* Manage page h3 titles (Profile, Email, Password, etc.) */
.page-content h3 {
    font-size: 1.2rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    margin: 0 0 var(--wbd-space-5);
    padding-bottom: var(--wbd-space-3);
    border-bottom: var(--wbd-border);
    letter-spacing: -0.01em;
}

/* ============================================================
   Manage account layout + sidebar navigation
   ManageLayout.razor uses WBD classes — no Bootstrap dependency.
   ============================================================ */

.manage-layout {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-5);
}

.manage-layout-header {
    display: flex;
    flex-direction: column;
    gap: var(--wbd-space-1);
}

.manage-layout-title {
    font-size: 1.5rem;
    font-weight: var(--wbd-font-weight-strong);
    color: var(--wbd-gray-ink);
    letter-spacing: -0.02em;
}

.manage-layout-subtitle {
    font-size: 0.9375rem;
    color: var(--wbd-gray-muted);
}

.manage-layout-rule {
    border: none;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    margin: var(--wbd-space-3) 0 0;
}

.manage-layout-body {
    display: flex;
    gap: var(--wbd-space-6);
    align-items: flex-start;
}

.manage-layout-sidebar {
    flex: 0 0 180px;
    min-width: 0;
}

.manage-layout-content {
    flex: 1 1 0;
    min-width: 0;
}

/* ---- Sidebar nav ---- */
.manage-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.manage-nav-item {
    margin: 0;
    padding: 0;
}

/* NavLink renders <a class="manage-nav-link [active]">.
   Rules live here (global) so they reach Blazor's generated <a>. */
.manage-nav-link {
    display: block;
    padding: var(--wbd-space-2) var(--wbd-space-3);
    border-radius: var(--wbd-radius);
    font-size: 0.875rem;
    font-family: var(--wbd-font);
    color: var(--wbd-gray-secondary);
    text-decoration: none;
    line-height: 1.4;
    /* Override the global top-nav .nav-link rules */
    height: auto;
    border-bottom: none;
    margin-bottom: 0;
    transition: background var(--wbd-transition), color var(--wbd-transition);
}

    .manage-nav-link:hover {
        background: var(--wbd-gray-100);
        color: var(--wbd-gray-ink);
    }

    /* Blazor NavLink adds .active when the route matches */
    .manage-nav-link.active {
        background: var(--wbd-purple-light);
        color: var(--wbd-purple-deep);
        font-weight: var(--wbd-font-weight-medium);
        border-bottom-color: transparent;
    }

/* ---- Mobile: sidebar becomes horizontal pill row ---- */
@media (max-width: 640px) {
    .manage-layout-body {
        flex-direction: column;
        gap: var(--wbd-space-4);
    }

    .manage-layout-sidebar {
        flex: none;
        width: 100%;
    }

    .manage-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--wbd-space-1);
    }

    .manage-nav-link {
        font-size: 0.8125rem;
        padding: var(--wbd-space-1) var(--wbd-space-3);
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: var(--wbd-radius-pill);
    }

        .manage-nav-link.active {
            background: var(--wbd-purple-light);
            border-color: var(--wbd-purple-border);
        }
}

@media (max-width: 520px) {
    .nav-link {
        padding: 0 var(--wbd-space-2); /* 8px — was 12px; tight but fits 4 tabs */
        gap: 4px;
        font-size: 0.8125rem;
    }
}
/* ---- Enable Authenticator — QR code container ---- */
.enable-auth-qr {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.75rem;
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}

/* ---- Enable Authenticator — server-side QR image ---- */
.enable-auth-qr-wrap {
    display: inline-block;
    margin: 1rem 0;
    padding: 0.625rem;
    background: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    line-height: 0; /* remove gap under inline-block img */
}

.enable-auth-qr-img {
    display: block;
    image-rendering: pixelated; /* keep QR crisp at exact size */
}
/* ============================================================
   Auth info / confirmation pages
   Used by ForgotPasswordConfirmation, ResetPasswordConfirmation,
   ConfirmEmail, RegisterConfirmation, AccessDenied.
   ============================================================ */

.auth-notice {
    font-size: 0.9rem;
    color: var(--wbd-gray-secondary);
    line-height: 1.65;
    margin: 0 0 var(--wbd-space-5);
}

    .auth-notice a {
        color: var(--wbd-purple-mid);
        text-decoration: none;
    }

        .auth-notice a:hover {
            text-decoration: underline;
        }

.auth-notice--muted {
    font-size: 0.825rem;
    color: var(--wbd-gray-muted);
}