@import 'EvictionFiler.Client.myrfls9url.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */

.app-container[b-jpcoc9kkyh] {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.main-content[b-jpcoc9kkyh] {
    flex-grow: 1;
    min-height: 100vh;
    overflow: auto;
}

.custom-title[b-jpcoc9kkyh] {
    position: absolute;
    top: 33px;
    width: 186px;
    height: 27px;
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

/* Top-navigation shell: header + navbar stack above a scrolling body, so the
   dashboard's sticky toolbar keeps resolving against .main-content. */
.app-container--top[b-jpcoc9kkyh] {
    flex-direction: column;
    background-color: var(--cd-bg);
}

.app-container--top .main-content[b-jpcoc9kkyh] {
    min-height: 0;
    flex: 1 1 auto;
}
/* /Components/Layout/MobileHeaderLayout.razor.rz.scp.css */
/* ==========================================================================
   CaseDesk — mobile top bar (< md)
   Tokens come from casedesk-tokens.css; custom properties inherit through
   the DOM so they work inside this scoped sheet.
   ========================================================================== */

.cd-mobile-bar[b-wt9ohdiu17] {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    background-color: var(--cd-surface);
    border-bottom: 1px solid var(--cd-border);
    box-shadow: var(--cd-shadow-sm);
}

.cd-mobile-menu[b-wt9ohdiu17] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--cd-radius-sm);
    background: none;
    color: var(--cd-text);
    font-size: 1.125rem;
    cursor: pointer;
}

.cd-mobile-menu:hover[b-wt9ohdiu17] {
    background-color: var(--cd-surface-alt);
}

.cd-mobile-menu:focus-visible[b-wt9ohdiu17] {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: -2px;
}

.cd-mobile-brand[b-wt9ohdiu17] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.cd-mobile-brand-text[b-wt9ohdiu17] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.cd-mobile-firm[b-wt9ohdiu17] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--cd-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-mobile-user[b-wt9ohdiu17] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cd-primary-100);
    color: var(--cd-primary-700);
    font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Off-canvas drawer
   App.razor carries a global `.offcanvas-menu .sidebar { display:block }`
   that un-hides the sidebar inside this drawer below md — keep the class
   names in step with it.
   -------------------------------------------------------------------------- */

.offcanvas-menu[b-wt9ohdiu17] {
    position: fixed;
    top: 0;
    left: -290px;
    width: 280px;
    height: 100vh;
    background-color: var(--cd-surface);
    box-shadow: var(--cd-shadow-lg);
    transition: left 240ms ease;
    z-index: 2000;
    overflow: hidden;
}

.offcanvas-menu.open[b-wt9ohdiu17] {
    left: 0;
}

.overlay[b-wt9ohdiu17] {
    position: fixed;
    inset: 0;
    background: var(--cd-overlay);
    backdrop-filter: blur(2px);
    z-index: 1500;
}

@media (min-width: 768px) {
    .overlay[b-wt9ohdiu17] {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .offcanvas-menu[b-wt9ohdiu17] {
        transition: none;
    }
}
/* /Components/Layout/SideMenu.razor.rz.scp.css */
/* ==========================================================================
   CaseDesk — sidebar
   Colours come from wwwroot/css/casedesk-tokens.css, which App.razor loads
   globally. Custom properties pierce CSS isolation (they inherit through the
   DOM), so tokens work here even though these rules are scoped.
   ========================================================================== */

/* No :root block here. CSS isolation rewrites selectors to carry this
   component's scope attribute, so `:root` becomes `:root[b-xxxxxxxxxx]` and
   never matches <html> — any custom property declared here is dead. The
   original file had exactly that, which is why its
   `width: var(--sidebar-width-collapsed)` resolved to nothing. Tokens from
   casedesk-tokens.css work fine, because they are declared on the real :root
   globally and inherit down. */

.sidebar[b-arpsi8lcew] {
    width: 256px;
    min-height: 100vh;
    background-color: var(--cd-surface);
    border-right: 1px solid var(--cd-border);
    color: var(--cd-text);
    position: relative;
    transition: width 200ms ease;
}

.sidebar.collapsed[b-arpsi8lcew] {
    width: 80px;
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

.brand[b-arpsi8lcew] {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 12px 20px 8px;
    margin-bottom: 8px;
}

.brand--collapsed[b-arpsi8lcew] {
    flex-direction: column;
    gap: 14px;
    padding: 14px 8px 8px;
}

.logo-link[b-arpsi8lcew] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.logo-link:focus-visible[b-arpsi8lcew] {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 4px;
    border-radius: 8px;
}

.nav-container[b-arpsi8lcew] {
    padding: 0 12px 12px;
}

.sidebar.collapsed .nav-container[b-arpsi8lcew] {
    padding: 0 8px 12px;
}

/* --------------------------------------------------------------------------
   Group headings
   The menu used to be fourteen flat entries with no hierarchy; these label
   the sections. Hidden along with every other label when collapsed, where a
   divider carries the grouping instead.
   -------------------------------------------------------------------------- */

.cd-nav-group[b-arpsi8lcew] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 18px;
}

.cd-nav-group-label[b-arpsi8lcew] {
    padding: 0 12px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
}

.sidebar.collapsed .cd-nav-group[b-arpsi8lcew] {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cd-border);
}

.sidebar.collapsed .cd-nav-group:last-of-type[b-arpsi8lcew] {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Nav items
   -------------------------------------------------------------------------- */

.sidebar-link[b-arpsi8lcew] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    /* 44px is the minimum comfortable touch target. */
    min-height: 44px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--cd-radius-sm);
    background: none;
    color: var(--cd-text);
    text-align: left;
    cursor: pointer !important;
    position: relative;
    transition: background-color var(--cd-transition), color var(--cd-transition);
}

.sidebar-link:hover[b-arpsi8lcew] {
    background-color: var(--cd-surface-alt);
    color: var(--cd-text-heading);
}

.sidebar-link:focus-visible[b-arpsi8lcew] {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: -2px;
}

.sidebar-link.active[b-arpsi8lcew] {
    background-color: var(--cd-primary-050);
    color: var(--cd-primary-700);
    font-weight: 500;
}

.sidebar-link.active .menu-icon[b-arpsi8lcew] {
    color: var(--cd-primary-700);
}

/* Primary marker on the active row. */
.sidebar-link.active[b-arpsi8lcew]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background-color: var(--cd-primary-700);
}

.sidebar.collapsed .sidebar-link.active[b-arpsi8lcew]::before {
    display: none;
}

.menu-icon[b-arpsi8lcew] {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 15px;
    color: var(--cd-text-muted);
    transition: color var(--cd-transition);
}

.sidebar-link:hover .menu-icon[b-arpsi8lcew] {
    color: var(--cd-text-heading);
}

.menu-label[b-arpsi8lcew] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-caret[b-arpsi8lcew] {
    flex: 0 0 auto;
    font-size: 0.625rem;
    color: currentColor;
    opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Collapsed state
   -------------------------------------------------------------------------- */

.sidebar.collapsed .hide-on-collapse[b-arpsi8lcew] {
    display: none;
}

.sidebar.collapsed .sidebar-link[b-arpsi8lcew] {
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 auto;
}

.sidebar.collapsed .menu-icon[b-arpsi8lcew] {
    width: auto;
    font-size: 18px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Submenus
   -------------------------------------------------------------------------- */

.submenu-container[b-arpsi8lcew] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 6px 20px;
    padding: 0 0 0 12px;
    border-left: 1px solid var(--cd-border);
}

.submenu-link[b-arpsi8lcew] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--cd-radius-sm);
    color: var(--cd-text);
    line-height: 1.35;
    cursor: pointer !important;
    transition: background-color var(--cd-transition), color var(--cd-transition);
}

.submenu-link:hover[b-arpsi8lcew] {
    background-color: var(--cd-surface-alt);
    color: var(--cd-text-heading);
    text-decoration: none;
}

.submenu-link:focus-visible[b-arpsi8lcew] {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: -2px;
}

.submenu-icon[b-arpsi8lcew] {
    min-width: 18px;
    text-align: center;
    font-size: 13px;
    margin-top: 2px;
    color: var(--cd-text-muted);
}

.submenu-text[b-arpsi8lcew] {
    flex: 1;
    font-size: 0.8125rem;
    white-space: normal;
    word-break: break-word;
}

.active-submenu[b-arpsi8lcew] {
    background-color: var(--cd-primary-050) !important;
    font-weight: 500;
    color: var(--cd-primary-700) !important;
}

.active-submenu .submenu-icon[b-arpsi8lcew] {
    color: var(--cd-primary-700);
}

/* Flyout used when the sidebar is collapsed to icons. */
.parent-flymenu[b-arpsi8lcew] {
    position: relative;
}

.flyout-menu[b-arpsi8lcew] {
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    min-width: 232px;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-lg);
    z-index: 2000;
}

.dropdown-item[b-arpsi8lcew] {
    display: flex;
    padding: 8px 12px;
    color: var(--cd-text);
    text-decoration: none;
    background-color: transparent;
    font-weight: 500;
    font-size: 0.8125rem;
}

.dropdown-item:hover[b-arpsi8lcew] {
    background-color: var(--cd-surface-alt);
    color: var(--cd-text-heading);
}

/* --------------------------------------------------------------------------
   Create-case button
   -------------------------------------------------------------------------- */

.create-case-btn[b-arpsi8lcew] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin: 4px 0 18px;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--cd-radius-sm);
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse) !important;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--cd-shadow-sm);
    cursor: pointer;
    transition: background-color var(--cd-transition), box-shadow var(--cd-transition);
}

.create-case-btn:hover[b-arpsi8lcew] {
    background-color: var(--cd-primary-800);
    box-shadow: var(--cd-shadow-primary);
}

.create-case-btn:focus-visible[b-arpsi8lcew] {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

.create-case-btn .icon-plus[b-arpsi8lcew] {
    font-size: 13px;
}

.collapsed .create-case-btn[b-arpsi8lcew] {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 4px auto 14px;
    border-radius: var(--cd-radius-sm);
}

.collapsed .create-case-btn span[b-arpsi8lcew] {
    display: none;
}

/* --------------------------------------------------------------------------
   Collapse toggle
   -------------------------------------------------------------------------- */

.toggle-btns[b-arpsi8lcew] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    color: var(--cd-text-muted);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: background-color var(--cd-transition), color var(--cd-transition);
}

.toggle-btns:hover[b-arpsi8lcew] {
    background-color: var(--cd-surface-alt);
    color: var(--cd-primary-700);
}

.toggle-btns:focus-visible[b-arpsi8lcew] {
    outline: 2px solid var(--cd-primary-700);
    outline-offset: 2px;
}

.sidebar:not(.collapsed) .toggle-btns[b-arpsi8lcew] {
    position: absolute;
    top: 26px;
    right: -13px;
    z-index: 30;
}

.sidebar.collapsed .toggle-btns[b-arpsi8lcew] {
    margin: 0 auto;
}

.sidebar.collapsed .toggle-btns i[b-arpsi8lcew] {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Scroll area
   -------------------------------------------------------------------------- */

.v-scroll-auto[b-arpsi8lcew] {
    overflow-y: auto;
}

.scroll-hidden[b-arpsi8lcew] {
    overflow-x: hidden;
}

.v-scroll-auto.scroll-hidden[b-arpsi8lcew]::-webkit-scrollbar {
    width: 6px;
}

.v-scroll-auto.scroll-hidden[b-arpsi8lcew]::-webkit-scrollbar-thumb {
    background-color: var(--cd-border);
    border-radius: var(--cd-radius-pill);
}

.v-scroll-auto.scroll-hidden[b-arpsi8lcew]::-webkit-scrollbar-thumb:hover {
    background-color: var(--cd-border-hover);
}

/* --------------------------------------------------------------------------
   Profile / footer
   -------------------------------------------------------------------------- */

.line[b-arpsi8lcew] {
    margin: 0 12px;
    border-top: 1px solid var(--cd-border);
    opacity: 1;
}

.profile-section[b-arpsi8lcew] {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background-color: var(--cd-surface);
    padding: 10px 12px 12px;
}

.profile-section .inside[b-arpsi8lcew] {
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-sm);
    padding: 4px;
}

.sidebar.collapsed .profile-section[b-arpsi8lcew] {
    padding: 10px 8px 12px;
}

.sidebar.collapsed .profile-section .inside[b-arpsi8lcew] {
    padding: 4px 0;
}

.profile-trigger[b-arpsi8lcew] {
    min-height: 52px;
}

.profile-avatar[b-arpsi8lcew] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--cd-primary-700);
    color: var(--cd-text-inverse);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.profile-text[b-arpsi8lcew] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.profile-name[b-arpsi8lcew] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cd-text);
}

.profile-role[b-arpsi8lcew] {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cd-text-muted);
}

.sidebar.collapsed .profile-trigger[b-arpsi8lcew] {
    width: 44px;
    height: 44px;
    min-height: 44px;
}

.ellipse-email[b-arpsi8lcew] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.profile-section .submenu-container[b-arpsi8lcew] {
    margin: 4px 0;
}

.profile-section .submenu-flyout[b-arpsi8lcew] {
    position: absolute;
    left: calc(100% + 6px);
    bottom: 0;
    min-width: 200px;
    margin: 0;
    background-color: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-lg);
    z-index: 2000;
}

.sidebar-bottom .sidebar-link[b-arpsi8lcew] {
    min-height: 40px;
    font-size: 0.8125rem;
}

.offcanvas-header[b-arpsi8lcew] {
    position: absolute;
    right: 10px;
    top: 14px;
    z-index: 100;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--cd-radius-sm);
    background: none;
    color: var(--cd-text-muted);
    font-size: 1.125rem;
    cursor: pointer;
}

.offcanvas-header:hover[b-arpsi8lcew] {
    background-color: var(--cd-surface-alt);
    color: var(--cd-primary-700);
}

.flex-grow-1[b-arpsi8lcew] {
    flex-grow: 1;
}

.flex-column[b-arpsi8lcew] {
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .sidebar[b-arpsi8lcew] {
        width: 224px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-arpsi8lcew],
    .sidebar-link[b-arpsi8lcew],
    .create-case-btn[b-arpsi8lcew],
    .toggle-btns[b-arpsi8lcew] {
        transition: none;
    }
}
/* /Pages/Register.razor.rz.scp.css */
/* ==========================================================================
   Signup-specific chrome: stepper buttons, live password feedback, back link.
   The shared Tabler-based auth layout lives in wwwroot/css/auth.css — it must
   be global, because scoped styles never reach elements a child component
   (ValidationMessage, BrandLogo) renders.
   ========================================================================== */

/* Tabler `.steps` expects plain list items; ours are buttons so each step is
   keyboard-reachable. Strip the button chrome and leave Tabler's dots/lines. */
.signup-steps[b-othbx7ynez] {
    --tblr-steps-color: var(--cd-primary-700);
    /* Tabler 1.4 ships a second, later `.steps` rule (the docs-style numbered
       list) that adds a left border and 2rem padding. Undo it. */
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

    .signup-steps .step-item[b-othbx7ynez] {
        appearance: none;
        background: none;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: calc(var(--tblr-steps-dot-size) + 0.5rem);
        font: inherit;
        font-size: 0.875rem;
        color: var(--cd-text);
    }

        .signup-steps .step-item:disabled[b-othbx7ynez] {
            cursor: default;
        }

        .signup-steps .step-item:focus-visible[b-othbx7ynez] {
            outline: 2px solid var(--cd-primary-700);
            outline-offset: 2px;
            border-radius: var(--cd-radius-sm);
        }

/* --------------------------------------------------------------------------
   Live field feedback
   -------------------------------------------------------------------------- */

/* Password strength meter -------------------------------------------------- */

.pw-meter[b-othbx7ynez] {
    display: flex;
    align-items: center;
    gap: var(--cd-space-3);
    margin-top: 10px;
}

.pw-meter-track[b-othbx7ynez] {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
}

.pw-seg[b-othbx7ynez] {
    height: 4px;
    flex: 1 1 0;
    border-radius: var(--cd-radius-pill);
    background-color: var(--cd-primary-100);
    transition: background-color var(--cd-transition);
}

.pw-meter-label[b-othbx7ynez] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    min-width: 46px;
    text-align: right;
}

.pw-meter.is-weak .pw-seg.is-on[b-othbx7ynez] {
    background-color: var(--cd-danger);
}

.pw-meter.is-weak .pw-meter-label[b-othbx7ynez] {
    color: var(--cd-danger);
}

.pw-meter.is-fair .pw-seg.is-on[b-othbx7ynez] {
    background-color: var(--cd-warning);
}

.pw-meter.is-fair .pw-meter-label[b-othbx7ynez] {
    color: var(--cd-warning);
}

.pw-meter.is-good .pw-seg.is-on[b-othbx7ynez] {
    background-color: var(--cd-primary-500);
}

.pw-meter.is-good .pw-meter-label[b-othbx7ynez] {
    color: var(--cd-primary-500);
}

.pw-meter.is-strong .pw-seg.is-on[b-othbx7ynez] {
    background-color: var(--cd-success);
}

.pw-meter.is-strong .pw-meter-label[b-othbx7ynez] {
    color: var(--cd-success);
}

/* Requirement checklist — lives in a popover on the info icon beside the
   label. Opens on hover/focus of the icon, and (via .pw-field.is-open, set
   by the component) while the field is focused with a rule still unmet. */

.pw-help[b-othbx7ynez] {
    position: relative;
    display: inline-flex;
}

.pw-help-btn[b-othbx7ynez] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cd-text-muted);
    font-size: 1.0625rem;
    cursor: help;
}

    .pw-help-btn:hover[b-othbx7ynez] {
        color: var(--cd-primary-700);
    }

    .pw-help-btn:focus-visible[b-othbx7ynez] {
        outline: none;
        box-shadow: var(--cd-focus-ring);
    }

.pw-help-pop[b-othbx7ynez] {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px); /* phones: above the label, clear of the field */
    right: 0;
    z-index: 20;
    width: 14.5rem;
    padding: 10px 12px;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    box-shadow: var(--cd-shadow-lg);
    text-align: left;
}

    .pw-help-pop[b-othbx7ynez]::before {
        content: "";
        position: absolute;
        bottom: -5px;
        right: 8px;
        width: 8px;
        height: 8px;
        background: var(--cd-surface);
        border-right: 1px solid var(--cd-border);
        border-bottom: 1px solid var(--cd-border);
        transform: rotate(45deg);
    }

/* Room beside the card: dock the popover to the right of the field so it
   never covers the input while the user types. */
@media (min-width: 768px) {
    .pw-help-pop[b-othbx7ynez] {
        bottom: auto;
        right: auto;
        top: -6px;
        left: calc(100% + 12px);
    }

        .pw-help-pop[b-othbx7ynez]::before {
            bottom: auto;
            right: auto;
            top: 12px;
            left: -5px;
            border-right: 0;
            border-left: 1px solid var(--cd-border);
            border-bottom: 1px solid var(--cd-border);
        }
}

.pw-help:hover .pw-help-pop[b-othbx7ynez],
.pw-help:focus-within .pw-help-pop[b-othbx7ynez],
.pw-field.is-open .pw-help-pop[b-othbx7ynez] {
    display: block;
}

.pw-help-title[b-othbx7ynez] {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--cd-text-heading);
    margin-bottom: 4px;
}

.pw-rules[b-othbx7ynez] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.pw-rule[b-othbx7ynez] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    line-height: 1.4;
    color: var(--cd-text-muted);
    transition: color var(--cd-transition);
}

    .pw-rule i[b-othbx7ynez] {
        font-size: 0.5rem;
        color: var(--cd-border-hover);
        transition: color var(--cd-transition), font-size var(--cd-transition);
    }

    .pw-rule.is-met[b-othbx7ynez] {
        color: var(--cd-text);
    }

        .pw-rule.is-met i[b-othbx7ynez] {
            font-size: 0.8125rem;
            color: var(--cd-success);
        }

/* Password match indicator ------------------------------------------------- */

.pw-match[b-othbx7ynez] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 8px 0 0;
}

    .pw-match.is-ok[b-othbx7ynez] {
        color: var(--cd-success);
    }

    .pw-match.is-bad[b-othbx7ynez] {
        color: var(--cd-text-muted);
    }

/* --------------------------------------------------------------------------
   Optional-field chips (step 2)
   -------------------------------------------------------------------------- */

.chip[b-othbx7ynez] {
    border-style: dashed;
}

    .chip:hover[b-othbx7ynez] {
        border-style: solid;
    }

/* Back link ---------------------------------------------------------------- */

.signup-back[b-othbx7ynez] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}