/* 0-LOGIN (2026-08-04) -- shared shell for Login.razor and VerifyEmail.razor, adapted from
   docs/for-claude-code/design/login.html (LOGIN-SPEC.md's reference mockup) per its own §10 build
   notes: .gal-* gallery wrapper deleted (existed only to show every state on one page), @container
   converted to @media at the identical thresholds (900px, 560px). A dedicated file rather than
   folded into kernel.css -- these .lg-* classes are specific to the auth shell (shared by two
   screens, not the whole app the way kernel.css's classes are) and a component-scoped
   Login.razor.css would not be visible to VerifyEmail.razor at all (Blazor CSS isolation is
   per-component, the same reason .kernel-card was promoted out of AccountSettings.razor.css
   earlier). Token-only throughout, --st- names, per the tokens-only rule. */

.lg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--st-surface);
}

/* --- brand panel (the dark-chrome signature) ----------------------------- */
.lg-brand {
    position: relative;
    overflow: hidden;
    background: var(--st-surface-chrome);
    color: var(--st-text-on-chrome);
    padding: var(--st-space-6) var(--st-space-6) var(--st-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--st-space-6);
    justify-content: space-between;
}

/* Ledger rules: CSS-only, zero assets. Faded out toward the bottom so the legal row stays quiet. */
.lg-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 39px, var(--st-border-on-chrome) 39px 40px);
    opacity: 0.35;
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 62%, transparent 96%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 62%, transparent 96%);
    pointer-events: none;
}

.lg-brand > * {
    position: relative;
}

.lg-mark {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
    font-family: var(--st-font-ui);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Brand mark -- the primary green tile, at brand-moment scale. LOGIN-SPEC.md §3.3: the tile's own
   green sits at 2.25:1 against the chrome, which WCAG exempts (logotypes, 1.4.3 + 1.4.11) but which
   leaves the tile edge indistinct, so a hairline in --st-border-on-chrome defines it. */
.lg-mark__logo {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    display: block;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--st-border-on-chrome);
}

.lg-pitch {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-4);
}

.lg-pitch__rule {
    width: 44px;
    height: 3px;
    border-radius: var(--st-radius-pill);
    background: var(--st-accent-on-chrome);
}

.lg-pitch__head {
    margin: 0;
    font-family: var(--st-font-ui);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--st-text-on-chrome);
    text-wrap: balance;
    /* 0-LOGIN-3 (2026-08-05): the ORIGINAL bug -- carried over faithfully from the design mockup
       itself (docs/for-claude-code/design/login.html), not introduced in this port. .lg-pitch used
       to cap itself at max-width: 20ch, but `ch` is relative to the element's OWN font-size, and
       .lg-pitch never set one of its own -- it inherited the page's base size (~16px), giving ~20 x
       ~9px =~ 180px, nowhere near enough for THIS 34px headline. At any viewport wide enough for the
       20ch limit to actually bind (900px+, i.e. every desktop width, not just ultra-wide monitors --
       the <=900px breakpoint below already reset it to `none`) the headline was forced into a ~180px
       column regardless of its own font size, producing one word per line. Fixed by moving the width
       constraint here, in the headline's own font context, where `ch` means what it's supposed to. */
    max-width: 16ch;
}

.lg-pitch__sub {
    margin: 0;
    font-size: var(--st-text-base);
    line-height: 1.55;
    color: var(--st-text-on-chrome-muted);
    max-width: 34ch;
    text-wrap: pretty;
}

.lg-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--st-space-4) var(--st-space-5);
    border-top: 1px solid var(--st-border-on-chrome);
    padding-top: var(--st-space-5);
    margin: 0;
}

.lg-proof__item {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-1);
}

.lg-proof__n {
    font-family: var(--st-font-num);
    font-size: var(--st-text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--st-text-on-chrome);
}

.lg-proof__k {
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 500;
    line-height: var(--st-leading-xs);
    color: var(--st-text-on-chrome-muted);
}

.lg-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-space-1) var(--st-space-4);
    align-items: center;
    font-size: var(--st-text-xs);
    color: var(--st-text-on-chrome-muted);
}

.lg-legal a {
    color: var(--st-text-on-chrome-muted);
    text-decoration: underline;
}

.lg-legal a:hover {
    color: var(--st-text-on-chrome);
}

/* --- form panel ---------------------------------------------------------- */
.lg-panel {
    background: var(--st-surface);
    display: grid;
    place-items: center;
    padding: var(--st-space-6);
}

.lg-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-5);
}

.lg-card__head {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.lg-card__title {
    margin: 0;
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--st-text-primary);
}

.lg-card__sub {
    margin: 0;
    font-size: var(--st-text-sm);
    color: var(--st-text-secondary);
    text-wrap: pretty;
}

.lg-form {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-4);
}

/* --- field --------------------------------------------------------------- */
.lg-field {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-1);
}

.lg-field__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--st-space-3);
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 500;
    color: var(--st-text-secondary);
}

.lg-field__req {
    color: var(--st-danger);
}

.lg-field__link {
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 500;
    color: var(--st-accent-on-subtle);
}

.lg-control {
    position: relative;
    display: flex;
}

.lg-input {
    width: 100%;
    height: var(--st-control-h);
    padding: 0 10px;
    border: 1px solid var(--st-border-input);
    border-radius: var(--st-radius-sm);
    background: var(--st-surface);
    color: var(--st-text-primary);
    font-family: var(--st-font-text);
    font-size: var(--st-text-sm);
    transition: border-color var(--st-duration-fast) var(--st-ease);
}

[data-theme="dark"] .lg-input {
    background: var(--st-surface-alt);
}

.lg-input::placeholder {
    color: var(--st-text-muted);
}

.lg-input:hover {
    border-color: var(--st-text-secondary);
}

.lg-input:focus-visible {
    outline: 2px solid var(--st-focus-ring);
    outline-offset: 1px;
    border-color: var(--st-accent);
}

.lg-input[aria-invalid="true"] {
    border-color: var(--st-danger);
}

.lg-input:disabled {
    background: var(--st-surface-alt);
    opacity: var(--st-disabled-opacity);
    cursor: not-allowed;
}

.lg-input--pw {
    padding-right: 56px;
}

.lg-reveal {
    position: absolute;
    top: 50%;
    right: var(--st-space-1);
    transform: translateY(-50%);
    height: var(--st-icon-btn);
    min-width: var(--st-icon-btn);
    padding: 0 var(--st-space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--st-radius-sm);
    background: transparent;
    color: var(--st-text-secondary);
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--st-duration-fast) var(--st-ease);
}

.lg-reveal:hover {
    background: var(--st-surface-hover);
    color: var(--st-text-primary);
}

.lg-help {
    font-size: var(--st-text-xs);
    color: var(--st-text-muted);
}

.lg-error {
    display: flex;
    gap: var(--st-space-1);
    font-size: var(--st-text-xs);
    color: var(--st-danger-on-subtle);
}

/* --- buttons --------------------------------------------------------------
   Deliberately its own class family (not .kernel-btn) -- COMPONENT-SPECS.md's buttons assume a
   min-width of 132px standalone; this screen's buttons are full-width block elements in a 400px
   card, a different context the shared kernel class doesn't need to carry. */
.lg-btn {
    height: var(--st-control-h);
    min-width: 132px;
    padding: 0 var(--st-space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--st-space-2);
    border: 1px solid transparent;
    border-radius: var(--st-radius-sm);
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--st-duration-fast) var(--st-ease), border-color var(--st-duration-fast) var(--st-ease);
}

.lg-btn--block {
    width: 100%;
    min-width: 0;
}

.lg-btn--primary {
    background: var(--st-accent-fill);
    border-color: var(--st-accent-fill);
    color: var(--st-text-on-fill);
}

.lg-btn--primary:hover {
    background: var(--st-accent-fill-hover);
    border-color: var(--st-accent-fill-hover);
}

.lg-btn--primary:active {
    background: var(--st-accent-fill-active);
    border-color: var(--st-accent-fill-active);
}

.lg-btn--secondary {
    background: var(--st-surface);
    border-color: var(--st-border-input);
    color: var(--st-text-primary);
}

[data-theme="dark"] .lg-btn--secondary {
    background: transparent;
}

.lg-btn--secondary:hover {
    background: var(--st-surface-hover);
    border-color: var(--st-text-secondary);
}

.lg-btn:disabled,
.lg-btn[aria-disabled="true"] {
    opacity: var(--st-disabled-opacity);
    cursor: not-allowed;
}

.lg-btn[aria-busy="true"] {
    cursor: progress;
}

.lg-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: var(--st-radius-pill);
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: lg-spin 700ms linear infinite;
}

@keyframes lg-spin {
    to { transform: rotate(360deg); }
}

/* --- divider + alt action ------------------------------------------------ */
.lg-or {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--st-text-muted);
}

.lg-or::before,
.lg-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--st-border);
}

.lg-alt {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.lg-alt__note {
    font-size: var(--st-text-xs);
    color: var(--st-text-muted);
    text-align: center;
    text-wrap: pretty;
}

/* NIGHT-QUEUE full-unpark (2026-08-06): Login's "View a live demo" link -- a plain centered text
   link, not another bordered .lg-btn (would visually compete with Sign in/Create an account for
   primary attention on what's genuinely a low-frequency secondary action). */
/* Item 2 (2026-08-07 pen, unreadable button): this class is applied to a <button> element
   (Login.razor's "Email me a sign-in link instead" toggle), and without an explicit reset a
   <button> keeps its native chrome -- background/border/padding all come from the browser's own
   default button rendering (a mid-gray fill in most UAs), with only the TEXT color overridden by
   the rule below. That's exactly Mazhar's screenshot: link-blue text sitting on a gray button fill,
   unreadable in both themes. Reset to match the intent already stated above ("a plain centered text
   link, not another bordered .lg-btn"). */
.lg-link-block {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
    font-size: var(--st-text-sm);
    color: var(--st-accent);
    text-decoration: none;
}

.lg-link-block:disabled {
    color: var(--st-text-disabled, var(--st-text-secondary));
    cursor: default;
}

.lg-link-block:hover {
    text-decoration: underline;
}

/* --- banner -------------------------------------------------------------- */
.lg-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--st-space-3);
    padding: var(--st-space-3);
    border-radius: var(--st-radius-sm);
    font-size: var(--st-text-sm);
    line-height: var(--st-leading-sm);
}

.lg-banner__icon {
    flex: 0 0 auto;
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 700;
    line-height: 1.6;
}

.lg-banner__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.lg-banner__msg {
    text-wrap: pretty;
}

.lg-banner__action {
    align-self: flex-start;
    height: var(--st-control-h-sm);
    padding: 0 var(--st-space-3);
    display: inline-flex;
    align-items: center;
    border: 1px solid currentColor;
    border-radius: var(--st-radius-sm);
    background: transparent;
    color: inherit;
    font-family: var(--st-font-ui);
    font-size: var(--st-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.lg-banner--danger {
    background: var(--st-danger-subtle);
    color: var(--st-danger-on-subtle);
    box-shadow: inset 3px 0 0 var(--st-danger);
}

.lg-banner--warning {
    background: var(--st-warning-subtle);
    color: var(--st-warning-on-subtle);
    box-shadow: inset 3px 0 0 var(--st-warning);
}

.lg-banner--info {
    background: var(--st-accent-subtle);
    color: var(--st-accent-on-subtle);
    box-shadow: inset 3px 0 0 var(--st-accent);
}

.lg-banner--success {
    background: var(--st-success-subtle);
    color: var(--st-success-on-subtle);
    box-shadow: inset 3px 0 0 var(--st-success);
}

/* --- signup terms checkbox ------------------------------------------------ */
.su-terms-box {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.su-terms-scroll {
    max-height: 140px;
    overflow-y: auto;
    white-space: pre-wrap;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-surface);
    padding: var(--st-space-3);
    font-size: var(--st-text-xs);
    color: var(--st-text-secondary);
}

.su-terms-check {
    display: flex;
    align-items: flex-start;
    gap: var(--st-space-2);
    font-size: var(--st-text-sm);
    color: var(--st-text-primary);
    cursor: pointer;
}

.su-terms-check input {
    margin-top: 3px;
    flex-shrink: 0;
}

/* --- account-setup store picker ------------------------------------------- */
.as-store-list {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.as-store-option {
    display: flex;
    align-items: center;
    gap: var(--st-space-3);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    padding: var(--st-space-3);
    font-size: var(--st-text-sm);
    color: var(--st-text-primary);
    cursor: pointer;
}

.as-store-option:has(input:checked) {
    border-color: var(--st-accent);
    background: var(--st-accent-subtle);
}

.as-store-option:has(input:focus-visible) {
    outline: 2px solid var(--st-focus-ring);
    outline-offset: 2px;
}

.as-store-option input {
    flex-shrink: 0;
}

/* --- plan selection -------------------------------------------------------- */
.ps-card {
    /* Wider than the standard .lg-card 400px cap -- needs to fit 3 plan cards side by side. */
    max-width: 900px;
}

.ps-toggle {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-pill);
    padding: 2px;
    gap: 2px;
}

.ps-toggle__btn {
    border: none;
    background: none;
    border-radius: var(--st-radius-pill);
    padding: var(--st-space-2) var(--st-space-4);
    font-family: var(--st-font-ui);
    font-size: var(--st-text-sm);
    font-weight: 600;
    color: var(--st-text-secondary);
    cursor: pointer;
}

.ps-toggle__btn--active {
    background: var(--st-accent-fill);
    color: var(--st-text-on-fill);
}

.ps-toggle__save {
    font-weight: 500;
    opacity: 0.85;
}

.ps-plan-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--st-space-4);
}

.ps-plan-card {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-3);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    padding: var(--st-space-4);
}

.ps-plan-card__name {
    margin: 0;
    font-family: var(--st-font-ui);
    font-size: var(--st-text-lg);
    font-weight: 600;
    color: var(--st-text-primary);
}

.ps-plan-card__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--st-space-1);
}

.ps-plan-card__amount {
    font-size: var(--st-text-xl);
    font-weight: 700;
    color: var(--st-text-primary);
}

.ps-plan-card__period {
    font-size: var(--st-text-xs);
    color: var(--st-text-secondary);
}

.ps-plan-card__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-1);
    font-size: var(--st-text-sm);
    color: var(--st-text-secondary);
    flex: 1;
}

.ps-plan-card__features li::before {
    content: "✓ ";
    color: var(--st-success);
}

@media (max-width: 720px) {
    .ps-plan-list {
        grid-template-columns: 1fr;
    }
}

/* --- payment (Stripe Elements) --------------------------------------------- */
.pay-stripe-fields {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-4);
}

.pay-stripe-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--st-space-4);
}

/* Stripe Elements mounts an iframe into this node -- same visual treatment as .lg-input so the
   card-number/expiry/cvc fields read as part of the same form, not a foreign embedded widget. */
.pay-stripe-element {
    width: 100%;
    height: var(--st-control-h);
    padding: 0 10px;
    display: flex;
    align-items: center;
    border: 1px solid var(--st-border-input);
    border-radius: var(--st-radius-sm);
    background: var(--st-surface);
}

[data-theme="dark"] .pay-stripe-element {
    background: var(--st-surface-alt);
}

/* --- verify-email state -------------------------------------------------- */
.lg-verify {
    display: flex;
    flex-direction: column;
    gap: var(--st-space-4);
}

.lg-verify__well {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--st-radius-pill);
    background: var(--st-accent-subtle);
    color: var(--st-accent-on-subtle);
    font-size: 17px;
}

/* W156: the address now sits INSIDE the sentence rather than on its own line, so this is styled as
   an inline emphasis. Vertical padding is deliberately 0 -- on an inline box it paints over the
   neighbouring lines instead of pushing them apart. */
.lg-verify__addr {
    font-family: var(--st-font-num);
    color: var(--st-text-primary);
    background: var(--st-surface-alt);
    border-radius: var(--st-radius-sm);
    padding: 0 var(--st-space-1);
    overflow-wrap: anywhere;
}

.lg-verify__steps {
    margin: 0;
    padding-left: var(--st-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--st-space-1);
    font-size: var(--st-text-sm);
    color: var(--st-text-secondary);
}

.lg-countdown {
    display: flex;
    align-items: center;
    gap: var(--st-space-2);
    font-size: var(--st-text-xs);
    color: var(--st-text-muted);
}

.lg-countdown__t {
    font-family: var(--st-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--st-text-secondary);
    background: var(--st-surface-alt);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    padding: 1px var(--st-space-2);
}

.lg-footlinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--st-space-1) var(--st-space-4);
    font-size: var(--st-text-xs);
    color: var(--st-text-muted);
}

.lg-footlinks a {
    color: var(--st-text-muted);
    text-decoration: underline;
}

.lg-footlinks a:hover {
    color: var(--st-text-primary);
}

/* ==========================================================================
   RESPONSIVE -- converted from login.html's @container to @media at the
   identical thresholds, per LOGIN-SPEC.md §2.3 / §10 build notes.
   ========================================================================== */
@media (max-width: 900px) {
    .lg-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .lg-brand {
        padding: var(--st-space-5);
        gap: var(--st-space-5);
        justify-content: flex-start;
    }

    .lg-pitch {
        max-width: none;
    }

    .lg-pitch__head {
        font-size: 26px;
        /* Single-column layout below 900px has the full device width to work with -- the desktop-only
           16ch cap above would just be a second, unrelated narrow column here. */
        max-width: none;
    }

    .lg-pitch__sub {
        max-width: 52ch;
    }

    .lg-proof {
        padding-top: var(--st-space-4);
    }

    .lg-legal {
        order: 99;
    }

    .lg-panel {
        padding: var(--st-space-5);
    }

    .lg-card {
        max-width: 460px;
    }
}

@media (max-width: 560px) {
    .lg-brand {
        padding: var(--st-space-4) var(--st-space-4) var(--st-space-5);
        gap: var(--st-space-4);
    }

    .lg-brand::before {
        mask-image: linear-gradient(to bottom, transparent 0, #000 30%, transparent 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, transparent 100%);
    }

    .lg-mark {
        font-size: 22px;
        gap: var(--st-space-2);
    }

    .lg-mark__logo {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 10px;
    }

    .lg-pitch__head {
        font-size: 22px;
    }

    .lg-pitch__sub {
        font-size: var(--st-text-sm);
    }

    .lg-pitch__rule {
        width: 32px;
    }

    .lg-proof {
        display: none;
    }

    .lg-legal {
        font-size: var(--st-text-xs);
        gap: var(--st-space-1) var(--st-space-3);
    }

    .lg-panel {
        padding: var(--st-space-4);
        align-items: start;
    }

    .lg-card {
        max-width: none;
        gap: var(--st-space-4);
    }

    .lg-card__title {
        font-size: var(--st-text-lg);
    }

    .lg-input,
    .lg-btn {
        height: var(--st-tap-min);
    }

    .lg-input {
        font-size: var(--st-text-base);
    }

    .lg-reveal {
        min-width: var(--st-tap-min);
        height: var(--st-tap-min);
        padding: 0 var(--st-space-3);
    }

    .lg-input--pw {
        padding-right: 68px;
    }

    .lg-banner__action {
        height: var(--st-tap-min);
    }
}

/* Bug 20 Part A -- the sign-in account picker (AccountPickerList.razor).
   Mazhar 2026-08-12: "Grey them with a reason and sort them at the end." An expired account stays on
   screen, visibly unavailable and visibly explained -- an account that simply vanishes is the failure
   this styling exists to prevent, so nothing here hides a row. */

.account-picker {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--st-space-2);
}

.account-picker-row {
    display: flex;
    align-items: center;
    gap: var(--st-space-2);
}

.account-picker-choose {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--st-space-1);
    padding: var(--st-space-3);
    text-align: left;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    cursor: pointer;
}

.account-picker-name {
    font-weight: 600;
}

/* The reason is the point of the greyed row, so it must stay legible -- greying the NAME while the
   explanation fades out would leave the customer with the bad news and none of the sentence. */
.account-picker-reason {
    font-size: var(--st-text-sm);
    color: var(--st-text-muted);
}

.account-picker-row.is-unavailable .account-picker-choose {
    opacity: 0.55;
    cursor: not-allowed;
}

.account-picker-empty {
    color: var(--st-text-muted);
}