/* "Select an account" (.client-picker-overlay > .client-picker-panel: app.js's account picker at sign-in, and
   Switch account), reimagined in the buoy modal's language (buoy_modal.css). Look only: what it shows and does is
   app.js's, unchanged. Every rule is scoped by .client-picker-overlay, over the base rules in app.css, which stay as
   they were.

   - One family, as the Areas of Interest modals (aoi_modals.css) and Configure Alert (alert_config.css): the panels'
     glass (app.css --bc-glass-*) at the buoy modal's 18 px corners and shadow, rising in over the loading screen's
     backdrop (app.css, as before); a header ruled off: the account glyph in a tinted icon chip, an Oxanium title over
     a quiet meta line; a foot ruled off, Log out a quiet text button at its right.
   - The current account: a reading tile, led by its building in an icon chip, its name in Oxanium, Continue at its
     right in the brand's blue (buoy_modal.css .blue-pill-button.alarms-add); the whole tile continues. A long name
     wraps beside them; on a phone Continue keeps only its arrow.
   - The others: "or", between hairlines, then the menu as a dark trough (the Profile tab's), its switch glyph blue at
     its left, its chevron slate at its right (lighting blue on hover and focus). Picking one enters it, as before.
   Focus shows a 2 px brand-blue ring; motion stops for prefers-reduced-motion. */

/* ── The panel ─────────────────────────────────────────────────────────────────────────────────────────── */
.client-picker-overlay { color-scheme: dark; }   /* the menu's own list dark too */
.client-picker-overlay .client-picker-panel {
    width: 440px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 18px 20px 0;
    border-radius: 18px;
    background: var(--bc-glass-bg);
    -webkit-backdrop-filter: var(--bc-glass-blur);
    backdrop-filter: var(--bc-glass-blur);
    border: var(--bc-glass-border);
    box-shadow: var(--bc-glass-edge), 0 18px 44px rgba(0, 8, 22, 0.55);
    color: #e2e8f0;
    font-family: Manrope, system-ui, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    animation: cp-panel-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes cp-panel-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
/* Every control takes the panel's font (a button or select otherwise keeps the browser's). */
.client-picker-overlay :where(button, select) { font-family: inherit; }
/* None of app.css's global button (navy fill, 18 px padding, clipped): each is set out below. */
.client-picker-overlay :where(button) { isolation: auto; overflow: visible; line-height: 1.2; text-shadow: none; }
.client-picker-overlay :where(button):focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }

/* ── The header: the glyph in its chip, the title over its meta line ───────────────────────────────────── */
.client-picker-overlay .client-picker-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    text-align: left;
}
.client-picker-overlay .client-picker-icon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 16px;
}
.client-picker-overlay .client-picker-title {
    grid-column: 2;
    margin: 0;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.2;
    color: #f8fafc;
}
.client-picker-overlay .client-picker-sub {
    grid-column: 2;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.72);
    text-wrap: balance;   /* two even lines, not a word left on its own */
}

/* ── The current account: a reading tile, Continue at its right ────────────────────────────────────────── */
.client-picker-overlay .client-picker-grid { display: block; }
.client-picker-overlay .client-picker-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 62px;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
    text-align: left;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.client-picker-overlay .client-picker-card:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4);
}
/* Its chip: the account, as a building. */
.client-picker-overlay .client-picker-card-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(46, 142, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.22);
    color: #60a5fa;
    font-size: 14px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.client-picker-overlay .client-picker-card:hover .client-picker-card-icon { background: rgba(46, 142, 255, 0.22); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45); }
/* Its name: Oxanium, wrapping (never cut short: it is what is being chosen). */
.client-picker-overlay .client-picker-name {
    min-width: 0;
    font-family: Oxanium, Manrope, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.25;
    color: #f8fafc;
    text-align: left;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}
.client-picker-overlay .client-picker-card:hover .client-picker-name { color: #ffffff; }
/* Continue: the brand's blue, an arrow after it nudging on with the hover. */
.client-picker-overlay .client-picker-go {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 0%, #5aa8ff, #2e8eff 60%, #1f6fd6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(46, 142, 255, 0.3);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.client-picker-overlay .client-picker-go::after {
    content: "\f061" / "";
    margin-left: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    transition: transform 0.15s ease;
}
.client-picker-overlay .client-picker-card:hover .client-picker-go {
    background: radial-gradient(circle at 50% 0%, #74b6ff, #4b9dff 60%, #2e8eff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 8px 22px rgba(46, 142, 255, 0.4);
}
.client-picker-overlay .client-picker-card:hover .client-picker-go::after { transform: translateX(2px); }
.client-picker-overlay .client-picker-card:active .client-picker-go {
    background: radial-gradient(circle at 50% 0%, #4b9dff, #2380f0 60%, #1a62c2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 3px 10px rgba(46, 142, 255, 0.3);
}

/* ── The others: "or", then the menu ───────────────────────────────────────────────────────────────────── */
.client-picker-overlay .client-picker-switch { margin: 0; }
.client-picker-overlay .client-picker-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    color: rgba(203, 213, 225, 0.55);
}
.client-picker-overlay .client-picker-or::before,
.client-picker-overlay .client-picker-or::after { content: ""; flex: 1 1 0; height: 1px; background: rgba(148, 163, 184, 0.14); }
/* The menu: a trough, ringed brighter on hover and focus; its glyph and chevron laid over it. */
.client-picker-overlay .client-picker-select-wrap { position: relative; }
.client-picker-overlay .client-picker-select {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 36px 0 40px;
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 10px;
    background: rgba(2, 10, 24, 0.5);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.client-picker-overlay .client-picker-select:hover { background: rgba(2, 10, 24, 0.5); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); }
.client-picker-overlay .client-picker-select:focus {
    outline: none;
    background: rgba(2, 10, 24, 0.6);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5), 0 0 0 3px rgba(46, 142, 255, 0.12);
}
.client-picker-overlay .client-picker-select:focus-visible { outline: 2px solid #2e8eff; outline-offset: 2px; }
.client-picker-overlay .client-picker-select option { background: #0b1626; color: #e2e8f0; }
.client-picker-overlay .client-picker-select option:disabled { color: rgba(203, 213, 225, 0.55); }
.client-picker-overlay :is(.client-picker-select-icon, .client-picker-select-chevron) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.client-picker-overlay .client-picker-select-icon { left: 15px; font-size: 12px; color: #60a5fa; }
.client-picker-overlay .client-picker-select-chevron { right: 14px; font-size: 11px; color: rgba(148, 163, 184, 0.8); transition: color 0.15s ease; }
.client-picker-overlay .client-picker-select:is(:hover, :focus) ~ .client-picker-select-chevron { color: #93c5fd; }

/* ── The foot: ruled off, Log out a quiet text button at its right ─────────────────────────────────────── */
.client-picker-overlay .client-picker-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 20px -20px 0;
    padding: 12px 20px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(2, 10, 24, 0.18);
}
.client-picker-overlay .client-picker-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(203, 213, 225, 0.72);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.client-picker-overlay .client-picker-logout:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; text-decoration: none; }
.client-picker-overlay .client-picker-logout i { font-size: 11px; }

/* ── A phone: tighter in; Continue keeps only its arrow, so a long name keeps its room ─────────────────── */
@media (max-width: 480px) {
    .client-picker-overlay { padding: 12px; }
    .client-picker-overlay .client-picker-panel { padding: 16px 16px 0; }
    .client-picker-overlay .client-picker-foot { margin: 18px -16px 0; padding: 10px 16px 12px; }
    .client-picker-overlay .client-picker-go { width: 36px; padding: 0; justify-content: center; font-size: 0; }
    .client-picker-overlay .client-picker-go::after { margin-left: 0; font-size: 12px; }
    .client-picker-overlay .client-picker-select { height: 44px; }
    .client-picker-overlay .client-picker-logout { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .client-picker-overlay,
    .client-picker-overlay .client-picker-panel { animation: none; }
    .client-picker-overlay.is-dismissing,
    .client-picker-overlay :is(.client-picker-card, .client-picker-card-icon, .client-picker-go, .client-picker-go::after,
        .client-picker-select, .client-picker-select-chevron, .client-picker-logout) { transition: none; }
}