/* =================================================================
   header.css — Top-of-content header row.
   Current-view label, view switcher dropdown, search bar with results
   panel, user area (notifications + avatar).
   ================================================================= */

/* One glass slab for search header + library tabs so opacity cannot drift. */
.top-chrome {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--surface-app-rgb), 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Software WebKit (DMA-BUF off) cannot blur a fullscreen surface at 60fps. */
html.platform-linux .top-chrome {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 30px;
    position: relative;
    background: transparent;
    z-index: auto;
}

.current-view-label {
    flex-shrink: 0;
}

.current-view-label[hidden] {
    display: none;
}

/* Header "View: <name>" library-subview switcher. Replaces the old sidebar
   Library submenu — visible only when the active view is a library view. */
.view-switcher {
    position: relative;
    flex-shrink: 0;
}

.view-switcher[hidden] {
    display: none;
}

/* --- Horizontal tab bar below the search bar ---
   Sticks under the header so the library sub-view tabs stay visible while
   the album/track grid scrolls. `--header-height` is kept in sync from
   app.js (initStickyHeader) — fallback covers first paint before the
   ResizeObserver has measured. z-index sits one below `.header` so the
   header's blurred backdrop wins where they meet. */
.view-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    position: relative;
    z-index: auto;
}

.view-tabs[hidden] { display: none; }

.view-tabs-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    align-items: center;
    /* Centre the tabs whether they fit on one line or wrap to two —
       the previous left-aligned default left a wide blank gap on the
       right of the second row. */
    justify-content: center;
    row-gap: 6px;
}

/* Two-section layout for library views: foundational tabs first, then
   the entity tabs. The visible vertical-rule divider was retired —
   the foundational tabs already differ visually (filled background +
   accent active state) so the section break reads without a literal
   bar. Both sections still center as a single visual row. */
.view-tabs-section {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.view-tabs-divider {
    /* Hidden — kept as a no-op class so the JS render code that emits
       it doesn't have to be touched. */
    display: none;
}

.view-tabs-foundational .view-tab {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.view-tabs-foundational .view-tab.active {
    background: rgba(var(--accent-primary-rgb), 0.18);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.5);
}

.view-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.view-tab:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.view-tab.active {
    background: rgba(var(--accent-primary-rgb), 0.12);
    color: var(--accent-primary);
    border-color: rgba(var(--accent-primary-rgb), 0.35);
}

.view-settings-btn {
    margin-left: 6px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.view-settings-btn[hidden] {
    display: none;
}

.view-settings-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

/* --- View settings popover (per-depth facet config) --- */
.view-settings-popover {
    position: fixed;
    z-index: 2500;
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 16px 18px 14px;
}

.view-settings-popover .vsp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.view-settings-popover h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.view-settings-popover .vsp-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
}

.view-settings-popover .vsp-close:hover {
    color: var(--text-primary);
}

.view-settings-popover .vsp-intro {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 12px;
}

.view-settings-popover .vsp-section {
    padding: 12px 0;
    border-top: 1px solid var(--border-subtle);
}

.view-settings-popover .vsp-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.view-settings-popover .vsp-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
    margin-bottom: 8px;
}

.view-settings-popover .vsp-section-title.vsp-subtitle {
    margin-top: 12px;
    color: var(--text-muted);
}

.view-settings-popover .vsp-foundational {
    border-left: 3px solid var(--accent-primary);
    padding-left: 10px;
    margin-bottom: 8px;
}

.view-settings-popover .vsp-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 4px 8px;
}

.view-settings-popover .vsp-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.view-settings-popover .vsp-check input {
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.view-settings-popover .vsp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.view-settings-popover .vsp-reset,
.view-settings-popover .vsp-save {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.view-settings-popover .vsp-reset:hover {
    background: var(--bg-card-hover);
}

.view-settings-popover .vsp-save {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.view-settings-popover .vsp-save:hover {
    filter: brightness(1.1);
}

.view-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 22px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}

.view-switcher-btn:hover {
    background: var(--bg-card-hover);
    border-color: rgba(var(--accent-primary-rgb), 0.3);
}

.view-switcher-btn.open {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.view-switcher-prefix {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.view-switcher-name {
    font-weight: 600;
}

.view-switcher-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

.view-switcher-btn.open .view-switcher-chevron {
    transform: rotate(-90deg);
}

.view-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--shadow-md);
    z-index: 150;
}

.view-switcher-menu[hidden] {
    display: none;
}

.view-switcher-option {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}

.view-switcher-option:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.view-switcher-option.active {
    background: rgba(var(--accent-primary-rgb), 0.12);
    color: var(--accent-primary);
    font-weight: 600;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    padding: 10px 20px;
    border-radius: 25px;
    width: 400px;
    position: relative;      /* anchor for absolute result dropdown */
}

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 480px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 150;
    padding: 6px;
}

.search-section {
    padding: 4px;
}

.search-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-secondary);
    font-weight: 700;
    padding: 6px 8px 2px;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.search-row:hover {
    background: var(--bg-card-hover);
}

.search-thumb {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background-color: var(--overlay-hover);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    border: 1px solid var(--border-subtle);
}

.search-thumb-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.12);
    border-color: rgba(var(--accent-primary-rgb), 0.3);
}

.search-main {
    flex: 1;
    min-width: 0;
}

.search-title {
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-sub {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.search-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 13px;
}

.search-bar input {
    background: none;
    border: none;
    outline: none;
    color: var(--text-primary);
    width: 100%;
    font-size: 14px;
}

.search-bar input::placeholder {
    color: var(--text-muted);
}

.search-icon {
    color: var(--text-muted);
}

.user-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Library scope pill — segmented toggle between All and Favorites. Lives
   next to the notification bell so it's in the user's peripheral vision
   whenever they're in a library view. Hidden on Home. */
.scope-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    gap: 2px;
    background: var(--overlay-selected);
    border: 1px solid var(--overlay-active);
    border-radius: 20px;
    font-size: 12px;
}
.scope-pill[hidden] { display: none; }
.scope-pill-opt {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.15s, color 0.15s;
}
.scope-pill-opt:hover {
    color: var(--text-primary);
    background: var(--overlay-selected);
}
.scope-pill-opt.active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

/* Sync status pill — lives next to the scope pill in the header.
   Phase D multi-machine replication (see src-tauri/src/sync/). The
   dot changes colour based on `data-phase`:
     disabled → grey (hidden by JS)
     idle     → green (up to date)
     syncing  → blue (pushing/pulling)
     offline  → amber (last cycle failed) */
.sync-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--overlay-selected);
    border: 1px solid var(--overlay-active);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sync-pill[hidden] { display: none; }
.sync-pill:hover {
    color: var(--text-primary);
    background: var(--overlay-active);
}
.sync-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: background 0.3s;
    flex-shrink: 0;
}
.sync-pill[data-phase="idle"]     .sync-pill-dot { background: #4ade80; }
.sync-pill[data-phase="syncing"]  .sync-pill-dot {
    background: #60a5fa;
    animation: sync-pulse 1.4s infinite;
}
.sync-pill[data-phase="offline"]  .sync-pill-dot { background: #fbbf24; }
.sync-pill[data-phase="disabled"] .sync-pill-dot { background: var(--text-muted); }

@keyframes sync-pulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

.notifications {
    font-size: 20px;
    cursor: pointer;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s, box-shadow 0.12s;
}
.user-avatar:hover  { transform: scale(1.06); box-shadow: 0 0 0 2px var(--overlay-active); }
.user-avatar:focus  { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* A stored picture is injected as `<img>` INSIDE this 40px box
 * (`_paintWebAvatar` in profile.js). Without a rule for that image it renders
 * at its natural size — a 2000px photo became a full-screen picture that
 * covered the album grid, because a flex child with no size of its own
 * overflows the box and the box never clipped it.
 *
 * `overflow: hidden` clips the circle; the `img` rule makes the picture fill it
 * and stay undistorted. `contain`, like the account card, so a wide logo is not
 * cut up at this size either. */
.user-avatar {
    overflow: hidden;
}
.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ---- Profile dropdown menu (anchored under the avatar) -------------- */
.profile-menu {
    position: fixed;
    z-index: 1500;
    min-width: 280px;
    max-width: 360px;
    background: var(--bg-card, #1a1a24);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: fadeIn 0.12s ease-out;
}
.profile-menu-current {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

/* ---- Web account panel (avatar + description editing) -------------------
   Only drawn for a signed-in web session. The desktop profile menu has no
   equivalent, so these rules never apply there. */

/* The avatar plus its "remove" affordance. The button sits on the corner
   and only appears once a picture exists, so the initials version stays
   completely clean. */
.web-avatar-edit {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}
.web-avatar-edit img,
.web-avatar-edit .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.web-avatar-clear {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-elevated, #1c1c1f);
    background: var(--text-primary);
    color: var(--bg-primary, #0d0d10);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.12s ease-out;
}
.web-avatar-edit:hover .web-avatar-clear,
.web-avatar-clear:focus-visible {
    opacity: 1;
}

/* The description field. Full width, resizes vertically, and never exceeds
   two lines of height before it starts scrolling — a 200 character bio is
   meant to be a glance, not a wall of text in a corner menu. */
.web-account-edit {
    padding: 10px 12px 4px;
}
.web-account-label {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.web-bio-input {
    width: 100%;
    min-height: 40px;
    max-height: 72px;
    padding: 7px 9px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-primary, #0d0d10);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
}
.web-bio-input:focus {
    outline: none;
    border-color: var(--accent, #7c6cf0);
}
.web-bio-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.web-bio-count {
    color: var(--text-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.web-bio-save {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--accent, #7c6cf0);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.web-bio-save:disabled {
    opacity: 0.4;
    cursor: default;
}
/* Screen-reader status text, plus a visible error state. Kept in the layout
   (rather than display:none) so an error does not shift the menu around. */
.web-bio-note {
    min-height: 14px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.web-bio-note.is-error { color: #e5534b; }
.profile-menu-current-empty {
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}
.profile-menu-current-info { min-width: 0; flex: 1; }
.profile-menu-current-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-menu-current-path {
    color: var(--text-muted);
    font-size: 11.5px;
    font-family: Consolas, "SF Mono", monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-menu-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 6px 12px 4px 12px;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.profile-menu-item:hover { background: var(--overlay-selected); }
.profile-menu-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-item-icon { width: 18px; text-align: center; color: var(--text-muted); }
.profile-menu-item-lock { color: var(--text-muted); font-size: 14px; }
.profile-menu-item-danger { color: var(--state-danger); }
.profile-menu-item-danger:hover { background: rgba(var(--state-danger-rgb), 0.10); }
.profile-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 6px 4px;
}

/* Mini avatar used in the menu rows + the current-profile banner. */
.profile-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-purple, #7e57c2), var(--accent-cyan, #00bcd4));
    background-size: cover;
    background-position: center;
    font-weight: 600;
    color: var(--text-on-accent);
    flex: 0 0 auto;
    user-select: none;
}
.profile-mini-sm { width: 22px; height: 22px; font-size: 10px; }
.profile-mini-lg { width: 40px; height: 40px; font-size: 14px; }

/* ---- Add/Edit profile modal ---------------------------------------- */
.profile-form-content { width: min(520px, 92vw); }

.current-view-label {
    background: var(--bg-card);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
}

#view-label {
    /* Single-accent gradient — same lighter→primary shape as
       --accent-gradient, but rotated to 90deg for the text effect. */
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent-primary) 100%, white 18%),
        var(--accent-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    position: sticky;
    top: 0;
    background: rgba(var(--surface-app-rgb), 0.95);
    backdrop-filter: blur(10px);
    z-index: 100;
}

/* ============================================================================
   Signed-in account card (web player)
   ============================================================================
   Deliberately the same shape as the desktop app's server-account modal: a
   large picture, the name, and the description. One account, one card, either
   side — so switching between the app and the browser is not a visual
   whiplash. This one is READ-ONLY; editing belongs to whoever owns the
   library, in the desktop app. */

.web-card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    /* Above the header and the player bar, which are the tallest layers. */
    z-index: 120000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: webCardFade 0.14s ease-out;
}
@keyframes webCardFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.web-card {
    position: relative;
    width: 400px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 28px 22px;
    border-radius: 16px;
    border: 1px solid var(--border-strong, #3a3a44);
    background: var(--bg-elevated, #1c1c22);
    color: var(--text-primary, #eee);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    text-align: center;
    box-sizing: border-box;
}

/* The large picture — or the initial, at exactly the same size, so the card
   never changes height when a picture is added or removed. */
.web-card-pic {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #0d0d10);
    border: 2px solid var(--border-subtle, #333);
    color: var(--text-secondary, #aaa);
    font-size: 50px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.web-card-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.web-card-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #eee);
    word-break: break-word;
}
.web-card-sub {
    font-size: 12.5px;
    color: var(--text-secondary, #aaa);
    margin-top: 2px;
}

/* The description. Left-aligned and given room, because it is a sentence the
   owner wrote, not a label. */
.web-card-bio {
    align-self: stretch;
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-primary, #0d0d10);
    border: 1px solid var(--border-subtle, #2a2a33);
    color: var(--text-primary, #eee);
    font-size: 13.5px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}
.web-card-bio.is-empty {
    color: var(--text-secondary, #888);
    font-style: italic;
    text-align: center;
}

/* Says out loud WHY this cannot be edited here, so a guest is not left
   hunting for a Save button that is deliberately not there. */
.web-card-note {
    align-self: stretch;
    margin-top: 10px;
    color: var(--text-muted, #777);
    font-size: 11.5px;
    line-height: 1.45;
    text-align: center;
}

.web-card-signout {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px 16px;
    border-radius: 9px;
    border: 1px solid var(--border-subtle, #333);
    background: var(--bg-light, #26262e);
    color: var(--text-primary, #eee);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.web-card-signout:hover { background: var(--bg-lighter, #33333d); }

.web-card-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-secondary, #aaa);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.web-card-close:hover {
    background: var(--bg-light, #26262e);
    color: var(--text-primary, #eee);
}
.web-card-close:focus-visible {
    outline: 2px solid var(--accent, #7c6cf0);
    outline-offset: 2px;
}