/**
 * Browse Media Modal - Story Seed Assembly Tool
 * Styles for the media discovery and profile curation interface
 * Created: January 25, 2026
 */

/* ============================================================================
   GLOBAL BODY SCROLL LOCK
   Applied by BrowseMediaState.open(); also used by any modal that adds the
   .modal-open class to <body>. quiet-pinning-keystone S2 (2026-04-21).
   ============================================================================ */

body.modal-open {
    overflow: hidden;
}

/* On mobile, also pin the body so the address-bar collapse and rubber-band
   scroll don't leak the page behind the modal. fluffy-puzzling-dongarra S1 D3:
   replace pair `top:0; left:0` with `inset: 0` shorthand for four-edge pinning
   — the bidirectional rubber-band in Joe's 2026-05-10 walkthrough Issue #3
   showed body off-anchor on the right + bottom axes too, not just left+top.
   Iron-Law fix: pin every edge, not just two of four. */
@media (max-width: 767px) {
    body.modal-open {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
}

/* ============================================================================
   MODAL CONTAINER
   Respects FFA Window Frame: positioned in App Panel (right of Control Panel)
   ============================================================================ */

.browse-media-modal {
    display: none;
    position: fixed;
    /* Position in App Panel: below header (60px), right of sidebar (220px) */
    top: 60px;
    left: var(--side-nav-width, 60px);
    right: 0;
    bottom: 0;
    background: var(--surface-dark, #1a1a2e);
    z-index: 9500;
    overflow: hidden;
}

.browse-media-modal.is-open {
    /* modal-integrity-scan S4: state driven by ModalManager `.is-open` (was .active) */
    display: flex;
    flex-direction: column;
}

.browse-media-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--surface-dark, #1a1a2e);
    overflow: hidden;
}

/* Mobile: full screen overlay */
@media (max-width: 767px) {
    .browse-media-modal {
        top: 0;
        left: 0;
        z-index: 10000;
        /* Match the UMI .msp-root safe-area pattern so the header flushes
           under the iPhone status bar cleanly. quiet-pinning-keystone S2. */
        padding-top: env(safe-area-inset-top);
    }
}

/* ============================================================================
   HEADER
   ============================================================================ */

.bm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    flex-shrink: 0;
}

.bm-done-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bm-done-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* crisp-anchoring-cradle S2 D2-B (2026-05-11) — cross-modal Back affordance.
   When Browse Media is launched from another modal (Family stats chip, etc.),
   the left header button replaces the Done × with a Back ‹ to communicate
   "this returns to the launching surface" rather than "this closes the
   modal." Same dimensions/click behavior (closeBrowseMediaModal); the
   launching modal stays mounted underneath. */
.bm-back-btn .bm-done-icon {
    font-size: calc(22px * var(--type-scale, 1));
    line-height: 1;
    margin-right: 1px;
    transform: translateY(-1px);
}

.bm-title {
    font-size: calc(18px * var(--type-scale, 1));
    font-weight: 600;
    margin: 0;
    flex-grow: 0;
}

.bm-readiness {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: calc(13px * var(--type-scale, 1));
    font-weight: 500;
    margin-left: auto;
}

.bm-readiness-empty {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.bm-readiness-building {
    background: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    animation: pulse-amber 2s ease-in-out infinite;
}

.bm-readiness-ready {
    background: rgba(52, 211, 153, 0.3);
    color: #34d399;
    box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

@keyframes pulse-amber {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Consolidated header layout (v13.2.52)

   ⛔ NO CHILD OF THIS HEADER MAY BE PUSHED OUT OF THE SHELL.
   unsilencing-vault-surfaces S2 / D2.1 (2026-08-05). This was a `space-between`
   row with NO flex-wrap, NO min-width:0 and NO shrink control on either child,
   so the left group — Done, title, mode toggle, sort, and the whole filter bar —
   sized to its content and simply pushed `.bm-header-right` past the shell
   boundary. Measured on shipped v1.0.216 in a 1240px shell:

       header    scrollWidth 1360 vs clientWidth 1096   (264px of spill)
       .bm-header-left    88 →1021   (933px, un-shrinkable)
       .bm-header-right 1037 →1432   (right edge 192px OUTSIDE the shell)

   The shell is `overflow: hidden`, so everything past 1240 was invisible: the
   grid-size cycle, the selection indicator, Save as Profile, the host's own ✕
   — AND the fleet step pair the window layer injects. Joe reported it as
   "the sizing controls are missing"; they were never missing, they were
   off-screen, and so was the close button beside them.

   Three declarations make the spill impossible rather than unlikely:
     · flex:1 1 auto + min-width:0 on the left group — `min-width:0` is the
       load-bearing half, because a flex item's default `min-width:auto` is
       what refuses to shrink below content size in the first place;
     · flex:0 0 auto on the right group — the controls keep their intrinsic
       size and the left group yields, which is the correct priority: a filter
       chip may wrap, a close button may not disappear.

   ⛔ THE HEADER ITSELF STAYS `nowrap`, AND THAT IS THE MEASURED CHOICE.
   `flex-wrap: wrap` here was tried first and read live on v1.0.217: it does
   stop the spill, but a wrapping flex container assigns items to lines by their
   CONTENT size BEFORE any shrinking happens, so the left group claimed the
   whole first line and `.bm-header-right` — carrying the universal ✕ — dropped
   to a second line at x=289, the header's LEFT half. That cures the overflow
   and breaks the ratified placement in the same stroke, which is a trade, not
   a fix. With `nowrap` all three items share one line, flex-shrink actually
   engages on the left group, its filter bar wraps INSIDE it, and the ✕ stays
   upper-right where the standard puts it.
   Verified by `logs/unsilencing-vault-surfaces/fixtures/s2-repro-10.mjs`,
   which asserts header scrollWidth <= clientWidth AND which half of the header
   the sizing pair and the ✕ each occupy, in shell-relative coords. */
.bm-header.bm-header-consolidated {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 10px 16px;
}

.bm-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.bm-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* The filter bar is the widest thing inside the left group, so it has to be
   able to give: without this it stays one rigid row and hands its parent a
   content width that `min-width: 0` above can shrink the BOX to but not the
   CONTENT of. */
.bm-header-filters {
    flex-wrap: wrap;
    min-width: 0;
}

.bm-header-consolidated .bm-title {
    font-size: calc(16px * var(--type-scale, 1));
    margin-right: 8px;
}

/* Selection indicator in header */
.bm-selection-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    font-size: calc(12px * var(--type-scale, 1));
    color: rgba(255, 255, 255, 0.7);
}

.bm-selection-indicator.has-selection {
    background: rgba(52, 211, 153, 0.25);
    color: #34d399;
}

.bm-selection-dot {
    font-size: calc(10px * var(--type-scale, 1));
}

/* Grid size cycle button */
.bm-size-cycle-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: white;
    font-size: calc(16px * var(--type-scale, 1));
    cursor: pointer;
    transition: all 0.2s;
}

.bm-size-cycle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.bm-header-actions {
    display: flex;
    gap: 8px;
}

.bm-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: calc(18px * var(--type-scale, 1));
    cursor: pointer;
    transition: all 0.2s;
}

.bm-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.bm-save-btn {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    font-size: calc(14px * var(--type-scale, 1));
}

.bm-save-label {
    font-size: calc(13px * var(--type-scale, 1));
    white-space: nowrap;
}

@media (max-width: 600px) {
    .bm-save-label { display: none; }
    .bm-save-btn { width: 40px; padding: 0; }
}

/* ============================================================================
   FILTER TOOLBAR
   ============================================================================ */

.bm-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface-elevated, #252538);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.bm-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(13px * var(--type-scale, 1));
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bm-filter-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.bm-filter-btn.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

.bm-family-focus-btn {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

.bm-family-focus-btn.active {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

.bm-filter-icon {
    font-size: calc(14px * var(--type-scale, 1));
}

.bm-filter-arrow {
    font-size: calc(10px * var(--type-scale, 1));
    opacity: 0.6;
}

/* Search */
.bm-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 300px;
    min-width: 150px;
}

.bm-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(14px * var(--type-scale, 1));
    opacity: 0.5;
}

.bm-search-input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: white;
    font-size: calc(13px * var(--type-scale, 1));
}

.bm-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.bm-search-input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.bm-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: calc(14px * var(--type-scale, 1));
    padding: 4px;
}

.bm-search-clear:hover {
    color: white;
}

/* Dropdowns */
.bm-filter-dropdown {
    position: relative;
}

.bm-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--surface-elevated, #2a2a40);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.bm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(13px * var(--type-scale, 1));
    cursor: pointer;
}

.bm-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.bm-dropdown-item.active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.bm-dropdown-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #10b981;
}

.bm-dropdown-item select {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    font-size: calc(12px * var(--type-scale, 1));
}

/* Date filter */
.bm-date-inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.bm-date-inputs label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: calc(12px * var(--type-scale, 1));
    color: rgba(255, 255, 255, 0.7);
}

.bm-date-inputs input[type="date"] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: white;
    padding: 6px 8px;
    font-size: calc(12px * var(--type-scale, 1));
}

.bm-date-shortcuts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bm-date-shortcuts button {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(11px * var(--type-scale, 1));
    cursor: pointer;
    transition: all 0.2s;
}

.bm-date-shortcuts button:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
}

/* Size toggle */
.bm-size-toggle {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.bm-size-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: calc(12px * var(--type-scale, 1));
    cursor: pointer;
    transition: all 0.2s;
}

.bm-size-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.bm-size-btn.active {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

/* ============================================================================
   ACTIVE FILTERS
   ============================================================================ */

.bm-active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--surface-dark, #1a1a2e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    min-height: 40px;
    flex-shrink: 0;
}

.bm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: calc(12px * var(--type-scale, 1));
    font-weight: 500;
}

.bm-filter-chip button {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: calc(12px * var(--type-scale, 1));
    padding: 0;
    margin-left: 2px;
}

.bm-filter-chip button:hover {
    opacity: 1;
}

.bm-chip-family {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.bm-chip-type {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.bm-chip-date {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.bm-chip-search {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

/* Media Profile chip — Joe /listen 2026-08-02. Rose, deliberately the one hue
   not already spoken for (family blue, type green, date amber, search violet):
   the profile is a different KIND of filter from the other four. They narrow
   within a collection; it chooses which collection. */
.bm-chip-profile {
    background: rgba(244, 114, 182, 0.2);
    color: #f472b6;
}

.bm-chip-profile .bm-chip-icon {
    font-size: calc(11px * var(--type-scale, 1));
}

/* ============================================================================
   MEDIA PROFILE PICKER (toolbar) — Joe /listen 2026-08-02
   ============================================================================ */

.bm-profile-dropdown .bm-filter-btn-active {
    background: rgba(244, 114, 182, 0.18);
    border-color: rgba(244, 114, 182, 0.4);
    color: #f472b6;
}

.bm-profile-dropdown .bm-filter-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-profile-menu {
    min-width: 320px;
    max-width: 380px;
    padding: 8px;
}

.bm-profile-search-wrapper {
    padding: 2px 2px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
}

.bm-profile-search {
    width: 100%;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(13px * var(--type-scale, 1));
}

.bm-profile-search:focus {
    outline: none;
    border-color: rgba(244, 114, 182, 0.5);
    background: rgba(255, 255, 255, 0.09);
}

/* 71 profiles today and the list only grows — it scrolls rather than running
   off the modal. */
.bm-profile-list {
    max-height: 340px;
    overflow-y: auto;
}

.bm-profile-option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 7px 9px;
    background: none;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: calc(13px * var(--type-scale, 1));
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.bm-profile-option:hover {
    background: rgba(255, 255, 255, 0.09);
}

.bm-profile-option:focus-visible {
    outline: 2px solid rgba(244, 114, 182, 0.7);
    outline-offset: -2px;
}

.bm-profile-option.is-active {
    background: rgba(244, 114, 182, 0.16);
    color: #f9a8d4;
}

.bm-profile-option-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The count is the honest signal that a profile is non-empty — it is what
   would have told Joe at a glance that "Falsification Cohort" held 400 items,
   not 1. It never wraps and never truncates. */
.bm-profile-option-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.45);
    font-size: calc(11px * var(--type-scale, 1));
    white-space: nowrap;
}

.bm-profile-empty {
    padding: 12px 9px;
    color: rgba(255, 255, 255, 0.5);
    font-size: calc(12px * var(--type-scale, 1));
    text-align: center;
}

.bm-result-count {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: calc(12px * var(--type-scale, 1));
}

/* ============================================================================
   MEDIA GRID
   ============================================================================ */

.bm-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.bm-grid {
    display: grid;
    gap: 12px;
}

/* Tiny - for maximum overview */
.bm-grid-tiny {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
}

.bm-grid-tiny .bm-card-info {
    display: none;  /* Hide labels in tiny mode */
}

.bm-grid-tiny .bm-thumb-placeholder {
    font-size: calc(18px * var(--type-scale, 1));
}

.bm-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.bm-grid-medium {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.bm-grid-large {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Continuous grid - no pagination, load all */
.bm-grid-continuous {
    max-height: none;
}

/* Slim filter toolbar */
.bm-filter-toolbar-slim {
    padding: 8px 16px;
}

/* Media card */
.bm-card {
    position: relative;
    background: var(--surface-elevated, #252538);
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.bm-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.bm-card.selected {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.bm-card.in-profile {
    border-color: rgba(251, 191, 36, 0.5);
}

.bm-card-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bm-card-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: #10b981;
    cursor: pointer;
}
/* A fingertip's target on a tablet (Greg G-157, FergiPAD sweep: 16 x 16 checkboxes inside a 22 px chip, 16 per
   screen, unnamed). The chip keeps its look; on touch an invisible 44 px band around it takes the tap. */
@media (pointer: coarse) {
    .bm-card-checkbox::after { content: ''; position: absolute; left: -8px; top: -8px; width: 44px; height: 44px; z-index: -1; }
}

.bm-story-rich-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    font-size: calc(14px * var(--type-scale, 1));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.bm-in-profile-badge {
    position: absolute;
    top: 8px;
    right: 30px;
    z-index: 10;
    font-size: calc(12px * var(--type-scale, 1));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.bm-card-thumb {
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bm-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bm-thumb-placeholder {
    font-size: calc(32px * var(--type-scale, 1));
    opacity: 0.5;
}

.bm-grid-compact .bm-thumb-placeholder {
    font-size: calc(24px * var(--type-scale, 1));
}

.bm-card-info {
    padding: 8px 10px;
}

.bm-card-title {
    display: block;
    font-size: calc(11px * var(--type-scale, 1));
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bm-grid-compact .bm-card-info {
    padding: 6px 8px;
}

.bm-grid-compact .bm-card-title {
    font-size: calc(10px * var(--type-scale, 1));
}

/* Load more */
.bm-load-more {
    text-align: center;
    padding: 20px;
}

.bm-load-more-btn {
    padding: 12px 32px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 8px;
    color: #10b981;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bm-load-more-btn:hover {
    background: rgba(16, 185, 129, 0.25);
}

/* Empty state */
.bm-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.bm-empty-icon {
    font-size: calc(48px * var(--type-scale, 1));
    display: block;
    margin-bottom: 16px;
    opacity: 0.5;
}

.bm-empty-state h3 {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.8);
}

.bm-empty-state p {
    margin: 0;
    font-size: calc(14px * var(--type-scale, 1));
}

/* Loading state */
.bm-loading {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.bm-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

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

/* ============================================================================
   SELECTION BAR
   ============================================================================ */

.bm-selection-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    flex-shrink: 0;
}

.bm-select-all {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: calc(13px * var(--type-scale, 1));
    cursor: pointer;
}

.bm-select-all input {
    width: 16px;
    height: 16px;
    accent-color: white;
}

.bm-selection-count {
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
}

.bm-selection-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.bm-selection-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: white;
    font-size: calc(13px * var(--type-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bm-selection-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bm-add-btn {
    background: rgba(16, 185, 129, 0.8);
    border-color: rgba(16, 185, 129, 1);
}

.bm-add-btn:hover {
    background: rgba(16, 185, 129, 1);
}

.bm-create-btn {
    background: rgba(139, 92, 246, 0.8);
    border-color: rgba(139, 92, 246, 1);
}

.bm-create-btn:hover {
    background: rgba(139, 92, 246, 1);
}

.bm-clear-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 767px) {
    .bm-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .bm-done-label {
        display: none;
    }

    .bm-title {
        font-size: calc(16px * var(--type-scale, 1));
    }

    .bm-readiness {
        order: 10;
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .bm-filter-toolbar {
        gap: 8px;
    }

    .bm-search-wrapper {
        order: -1;
        width: 100%;
        max-width: none;
    }

    .bm-filter-btn .bm-filter-label {
        display: none;
    }

    .bm-filter-btn {
        padding: 8px 10px;
    }

    .bm-filter-btn .bm-filter-icon {
        font-size: calc(16px * var(--type-scale, 1));
    }

    .bm-size-toggle {
        display: none;
    }

    /* binary-hatching-pearl D5 (2026-05-09): mobile 3-button thumbnail-size
       toggle. Replaces the single .bm-size-cycle-btn on mobile; renders
       alongside Filter+Search in .bm-header-right. Apple HIG 44pt min tap
       target per button — three 44px buttons + 2px gaps = 134px, fits the
       header row beside the close button. */
    .bm-size-mobile-toggle {
        display: inline-flex;
        gap: 2px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 10px;
        padding: 2px;
        margin-right: 4px;
    }

    .bm-size-mobile-btn {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
        border-radius: 8px;
        font-size: calc(14px * var(--type-scale, 1));
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s, color 0.15s;
    }

    .bm-size-mobile-btn:active {
        background: rgba(255, 255, 255, 0.1);
    }

    .bm-size-mobile-btn.is-active {
        background: rgba(16, 185, 129, 0.22);
        color: #6dd4d4;
        box-shadow: inset 0 0 0 1px rgba(109, 212, 212, 0.3);
    }

    .bm-grid-container {
        padding: 10px;
    }

    .bm-grid {
        gap: 8px;
    }

    /* quiet-pinning-keystone S2: distinct minmax rungs on mobile so Tiny /
       Compact / Medium / Large produce visibly different grids. Previously all
       three non-Tiny sizes collapsed to repeat(3, 1fr) — the size toggle felt
       broken. Auto-fill + minmax lets the grid breathe on different viewports. */
    .bm-grid-tiny {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
    .bm-grid-compact {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }
    .bm-grid-medium {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .bm-grid-large {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .bm-selection-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .bm-selection-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 480px-and-below: narrower minmax so the small rungs still fit ≥1 column on
   the smallest phones without squeezing Large. */
@media (max-width: 480px) {
    .bm-grid-tiny {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }
    .bm-grid-compact {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    .bm-grid-medium {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .bm-grid-large {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
}

/* ============================================================================
   MODE TOGGLE (Phase 1)
   ============================================================================ */

.bm-mode-toggle {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 8px;
}

.bm-mode-btn {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: calc(14px * var(--type-scale, 1));
    cursor: pointer;
    transition: all 0.2s;
}

.bm-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.bm-mode-btn.active {
    background: rgba(16, 185, 129, 0.25);
    border-color: rgba(16, 185, 129, 0.4);
    color: #10b981;
}

/* Mode-specific grid styling */
.bm-grid.bm-mode-select .bm-card-checkbox {
    opacity: 1;
    transform: scale(1);
}

.bm-grid.bm-mode-browse .bm-card-checkbox {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s;
}

.bm-grid.bm-mode-browse .bm-card:hover .bm-card-checkbox {
    opacity: 1;
    transform: scale(1);
}

.bm-grid.bm-mode-reorder .bm-card {
    cursor: grab;
}

.bm-grid.bm-mode-reorder .bm-card:active {
    cursor: grabbing;
}

.bm-grid.bm-mode-reorder .bm-card::before {
    content: '≡';
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: calc(16px * var(--type-scale, 1));
    font-weight: bold;
}

.bm-grid.bm-mode-reorder .bm-card-checkbox {
    display: none;
}

/* Reorder controls bar */
.bm-reorder-controls {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    flex-shrink: 0;
}

.bm-reorder-hint {
    font-size: calc(13px * var(--type-scale, 1));
    font-weight: 500;
    flex-grow: 1;
}

.bm-reorder-cancel,
.bm-reorder-save {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: calc(13px * var(--type-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bm-reorder-cancel {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.bm-reorder-cancel:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bm-reorder-save {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid white;
    color: #d97706;
}

.bm-reorder-save:hover {
    background: white;
}

/* D5 (Greg 2026-10-18): the reorder bar is reachable again; on a touch screen (the iPad's desktop
   shell) its buttons meet the 44 px floor. */
@media (pointer: coarse) {
    .bm-reorder-controls .bm-reorder-cancel,
    .bm-reorder-controls .bm-reorder-save { min-height: 44px; min-width: 44px; }
    /* G-157 (FergiPAD sweep): the header row — Done 35, All Media 31, Filters / Select 29, Save as Profile 40 px
       tall — the same floor on the same screen. */
    .bm-done-btn,
    .bm-filter-btn,
    .bm-action-btn { min-height: 44px; }
}

/* Range selection visual feedback */
.bm-card.range-selecting {
    border-color: rgba(59, 130, 246, 0.5) !important;
    background: rgba(59, 130, 246, 0.1);
}

/* Drag-drop reordering states */
.bm-card.bm-dragging {
    opacity: 0.5;
    transform: scale(0.95);
    border-color: #f59e0b !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
}

.bm-card.bm-drag-over {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
    transform: translateY(-4px);
}

.bm-grid.bm-mode-reorder .bm-card {
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

/* Single Media Curator — REMOVED: now uses Unified Media Modal (.um-*) */

/* ============================================================================
   PROFILE FACTORY MODAL (Phase 2)
   ============================================================================ */

.profile-factory-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.profile-factory-overlay.open {
    display: flex;
}

.profile-factory-modal {
    background: var(--surface-elevated, #252538);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.pf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.pf-title {
    font-size: calc(18px * var(--type-scale, 1));
    font-weight: 600;
    margin: 0;
}

.pf-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: calc(18px * var(--type-scale, 1));
    cursor: pointer;
}

.pf-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.pf-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.pf-field {
    margin-bottom: 20px;
}

.pf-label {
    display: block;
    font-size: calc(12px * var(--type-scale, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.pf-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: white;
    font-size: calc(14px * var(--type-scale, 1));
}

.pf-input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.pf-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.pf-textarea {
    min-height: 80px;
    resize: vertical;
}

.pf-cover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.pf-cover-item {
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.pf-cover-item:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.pf-cover-item.selected {
    border-color: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}

.pf-cover-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pf-item-count {
    text-align: center;
    padding: 12px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    color: #10b981;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
}

.pf-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pf-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.pf-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.pf-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.pf-btn-create {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white;
}

.pf-btn-create:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.pf-btn-create:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================================
   BULK DELETE CONFIRMATION MODAL (v13.2.52)
   ============================================================================ */

.bulk-delete-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bulk-delete-confirm-overlay.open {
    display: flex;
}

.bulk-delete-confirm-modal {
    background: var(--surface-elevated, #252538);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.bdc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.bdc-icon {
    font-size: calc(24px * var(--type-scale, 1));
}

.bdc-title {
    font-size: calc(18px * var(--type-scale, 1));
    font-weight: 600;
    margin: 0;
}

.bdc-content {
    padding: 20px;
}

.bdc-warning {
    color: #f87171;
    font-size: calc(14px * var(--type-scale, 1));
    margin: 0 0 12px 0;
}

.bdc-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(14px * var(--type-scale, 1));
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.bdc-effects {
    margin: 0 0 20px 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-size: calc(13px * var(--type-scale, 1));
    line-height: 1.6;
}

.bdc-effects li {
    margin-bottom: 4px;
}

.bdc-confirm-input {
    margin-top: 16px;
}

.bdc-confirm-input label {
    display: block;
    font-size: calc(13px * var(--type-scale, 1));
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}

.bdc-confirm-input input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: white;
    font-size: calc(14px * var(--type-scale, 1));
    font-family: monospace;
    letter-spacing: 2px;
}

.bdc-confirm-input input:focus {
    outline: none;
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.bdc-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bdc-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bdc-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.bdc-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.bdc-btn-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: white;
}

.bdc-btn-delete:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.bdc-btn-delete:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Selection bar delete button styling */
.bm-delete-btn {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #f87171;
}

.bm-delete-btn:hover {
    background: rgba(239, 68, 68, 0.4);
}

/* Remove from profile button styling */
.bm-remove-profile-btn {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.4);
    color: #fbbf24;
}

.bm-remove-profile-btn:hover {
    background: rgba(251, 191, 36, 0.4);
}

/* ============================================================================
   MARQUEE SELECTION (v13.2.53)
   ============================================================================ */

.bm-marquee {
    position: fixed;
    border: 2px dashed #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    pointer-events: none;
    z-index: 10300;
    display: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

/* Cards being selected by marquee */
.bm-card.marquee-selecting {
    border-color: rgba(59, 130, 246, 0.7) !important;
    background: rgba(59, 130, 246, 0.15);
    transform: scale(1.02);
}

/* Select mode cursor hint */
.bm-grid.bm-mode-select {
    cursor: crosshair;
}

.bm-grid.bm-mode-select .bm-card {
    cursor: pointer;
}

/* Media Detail Modal — REMOVED: now uses Unified Media Modal (.um-*) */

/* ============================================================================
   HEADER-INTEGRATED FILTERS (v13.2.58)
   ============================================================================ */

.bm-header-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
}

.bm-search-compact {
    width: 180px;
}

.bm-search-compact .bm-search-input {
    padding: 6px 8px 6px 28px;
    font-size: calc(13px * var(--type-scale, 1));
}

.bm-filter-btn-compact {
    padding: 6px 10px;
    font-size: calc(12px * var(--type-scale, 1));
}

/* ============================================================================
   MARQUEE (LASSO) SELECTION (v13.2.58)
   ============================================================================ */

.bm-grid-container {
    position: relative;
    user-select: none;
}

.bm-marquee {
    position: absolute;
    border: 2px dashed rgba(99, 102, 241, 0.8);
    background: rgba(99, 102, 241, 0.15);
    pointer-events: none;
    z-index: 100;
    border-radius: 4px;
}

/* Highlight cards during marquee selection */
.bm-card.selected {
    outline: 3px solid #6366f1;
    outline-offset: -3px;
}

/* ============================================================================
   MCP POPUP — GRID SIZE PICKER (abundant-hopping-sifakis S2 D1, 2026-04-23)
   Rendered inside .mcp-popup by the popup-mode slot in mobile-control-panel.js
   ============================================================================ */

.bm-mcp-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

.bm-mcp-popup-title {
    margin: 0 0 12px;
    font-size: calc(16px * var(--type-scale, 1));
    font-weight: 700;
    color: #1f2937;
    text-align: center;
}

.bm-mcp-size-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bm-mcp-size-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #f3f4f6;
    color: #1f2937;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 500;
    text-align: left;
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
    -webkit-tap-highlight-color: transparent;
}

.bm-mcp-size-choice:active {
    transform: scale(0.97);
}

.bm-mcp-size-choice.is-active {
    background: rgba(99, 102, 241, 0.12);
    border-color: #6366f1;
    color: #1e1b4b;
}

.bm-mcp-size-choice-icon {
    font-size: calc(20px * var(--type-scale, 1));
    line-height: 1;
    display: inline-block;
    width: 22px;
    text-align: center;
}

.bm-mcp-size-choice-label {
    font-size: calc(14px * var(--type-scale, 1));
    font-weight: 600;
}

/* ═══ Simplified header (Greg, Joe directive 2026-10-01) ═══
   Row 1: Done · title · profile · Filters · Select … selection/save · ✕.
   Row 2 (the Filters row, closed by default): sort · search · Type · Date · More · grid size.
   The Ask-Fergi rail mounts right after .bm-header, so it is the next thing the eye meets. */
.bm-header.bm-header-consolidated { flex-wrap: wrap; row-gap: 10px; }
.bm-refine-row {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bm-refine-row[hidden] { display: none; }
/* converging-desktop-fleet S182: inside Browse Media, `hidden` ALWAYS means hidden. Controls are
   hidden with the attribute (Save as Profile, this Filters row) and also given a display by class
   (.bm-action-btn is display:flex), and an author display beats the browser's own [hidden] rule:
   Save as Profile stayed on screen while the code hid it, in the app and in a story room (measured
   2026-10-28). One rule for every control; pinned by js/features/browse-media-hidden.smoke.cjs. */
#browseMediaModal [hidden] { display: none !important; }
.bm-refine-toggle.has-active { border-color: rgba(250, 204, 21, 0.7); }
.bm-select-toggle.is-on { background: rgba(94, 234, 212, 0.18); border-color: rgba(94, 234, 212, 0.7); }

/* ============================================================================
   THE STORY ROOM — Browse Media as a child room of a story
   converging-desktop-fleet S181 (Life in Pictures, Joe 2026-10-27: "media profiles (presented in
   the Browse Media Modal as child rooms of the life-in-pictures stories from which they are
   invoked)"). Opened by js/features/story-room.js from a scene's door; the story is paused and
   still mounted underneath.

   The room is the SAME Browse Media the app shell opens, in the same Light Table dress: every
   colour below is the browse-media entry of app/data/ffa-launcher-design-manifest.json
   (modalChrome: frame #1B1109 / border #8A5A2E / ink #F2E8D8 / rule #C97B4A, header
   #2E1B10→#3E2415, the irregular 22/18/26/20 radius), and room-light-table.css dresses the
   interior through its own marker classes, stamped by the room host.

   Two parts:
   1. .bm-room-band — on every surface where a room is open (story page or app shell): the one way
      back, where the member is (story › scene), and the fact that the story waits.
   2. The vessel — ONLY on a produced story page (body.presentation-root): a framed window over a
      dimmed, paused story instead of the app pane's takeover geometry (top:60px /
      left:var(--side-nav-width) belong to an app frame a story page does not have). The phone gets
      the whole screen, clear of the Pocket's control panel. In the app shell the room keeps Browse
      Media's own pane and dress, untouched.
   ============================================================================ */

.bm-room-band {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 16px;
    background: #1B1109;
    border-bottom: 1px solid rgba(201, 123, 74, 0.45);
    color: #F2E8D8;
    flex-shrink: 0;
}

.bm-room-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px 0 12px;
    border: 1px solid #C97B4A;
    border-radius: 22px 18px 22px 18px;
    background: rgba(201, 123, 74, 0.16);
    color: #F2E8D8;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: calc(15px * var(--type-scale, 1));
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.bm-room-back:hover { background: rgba(201, 123, 74, 0.30); }
.bm-room-back:focus-visible { outline: 2px solid #F2E8D8; outline-offset: 2px; }
.bm-room-back-icon {
    font-size: calc(24px * var(--type-scale, 1));
    line-height: 1;
    transform: translateY(-1px);
    color: #E7A77A;
}

.bm-room-crumbs {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: calc(14px * var(--type-scale, 1));
    line-height: 1.35;
}
.bm-room-crumb { color: #C5BBAC; min-width: 0; overflow-wrap: anywhere; }
.bm-room-crumb + .bm-room-crumb::before {
    content: '\203A';
    margin-right: 8px;
    color: #C97B4A;
    font-weight: 600;
}
.bm-room-crumb-scene {
    color: #F2E8D8;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: calc(17px * var(--type-scale, 1));
    font-weight: 600;
}

.bm-room-paused {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(242, 232, 216, 0.22);
    border-radius: 12px;
    color: #C5BBAC;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: calc(13px * var(--type-scale, 1));
    white-space: nowrap;
}
.bm-room-paused::before {
    content: '';
    width: 8px;
    height: 10px;
    border-left: 3px solid #C97B4A;
    border-right: 3px solid #C97B4A;
    box-sizing: border-box;
}

/* A message inside the room where the app's toast does not exist (a produced story page). */
.bm-room-status {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    max-width: min(560px, calc(100% - 32px));
    margin: 0;
    padding: 10px 16px;
    border: 1px solid rgba(201, 123, 74, 0.6);
    border-radius: 14px;
    background: rgba(27, 17, 9, 0.96);
    color: #F2E8D8;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: calc(14px * var(--type-scale, 1));
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.bm-room-status.is-shown { opacity: 1; }
.bm-room-status[data-kind="error"] { border-color: #E07A6A; }

/* ── The vessel, on a produced story page only ── */
/* The paused story is dimmed by the page itself while a room is open (the host toggles the class):
   one DOM surface for the room, never a second body-appended one. The story underneath is inert, so
   the dimming takes no pointer. */
body.presentation-root.story-room-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 10190;
    background: rgba(9, 5, 3, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

body.presentation-root .browse-media-modal.bm-room {
    top: 4vh;
    left: 3.2vw;
    right: 3.2vw;
    bottom: 4vh;
    z-index: 10200;              /* above the stage and its chrome, below the UMI (--z-modal-umi 10400) */
    background: #1B1109;
    border: 1px solid #8A5A2E;
    border-radius: 22px 18px 26px 20px;
    box-shadow: 0 26px 84px rgba(28, 13, 4, 0.64), inset 0 0 0 1px rgba(242, 232, 216, 0.06);
    overflow: hidden;
}
body.presentation-root .browse-media-modal.bm-room .browse-media-content { background: #1B1109; }
body.presentation-root .browse-media-modal.bm-room .bm-header {
    background: linear-gradient(90deg, #2E1B10, #3E2415);
    border-bottom: 1px solid #C97B4A;
    color: #F2E8D8;
}
body.presentation-root .browse-media-modal.bm-room .bm-title { color: #F2E8D8; }

@media (max-width: 767px) {
    body.presentation-root .browse-media-modal.bm-room {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        /* The same rung as the desktop vessel: above the Pocket's floating pills (z 10000 — equal z
           would leave it to DOM order), BELOW the media viewer a room item opens (the UMI, which on a
           story page stacks at --z-modal-umi 10400 on the phone as on the desktop: at 10600 the room's
           band covered the phone viewer's ✕, measured S181) and the control panel (11000, which
           carries Browse Media's own slots and its Done while the room is open). */
        z-index: 10200;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: calc(var(--mobile-tab-bar-height, 48px) + env(safe-area-inset-bottom, 0px));
    }
    .bm-room-band { padding: 8px 12px; gap: 8px 10px; }
    /* Both names stay on the phone (the room is the STORY's child; its parent is named) — on ONE line
       under Back, the story's title giving way first (ellipsis) so the scene is read whole: Browse
       Media's own header already takes three rows on a phone, and the grid is what the member came for. */
    .bm-room-crumbs { flex: 1 1 100%; order: 3; flex-wrap: nowrap; min-width: 0; }
    .bm-room-crumb-story {
        flex: 0 1 auto; min-width: 2.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        overflow-wrap: normal; font-size: calc(13px * var(--type-scale, 1));
    }
    .bm-room-crumb-scene { flex: 0 1 auto; min-width: 0; font-size: calc(16px * var(--type-scale, 1)); }
    .bm-room-crumb + .bm-room-crumb::before { margin-right: 6px; }
    /* converging-desktop-fleet S182 (independent review): in a room the band above already names
       the place (story › scene; the dialog's own name says "Pictures from <scene>"), so on the phone
       Browse Media's title gives its row back to the grid. With it, Select and ✕ wrapped onto two
       more rows and the first picture started at 367 of 874 px (WebKit 402, measured 2026-10-28);
       without it every control sits on one row. The app shell's Browse Media is unchanged. */
    .browse-media-modal.bm-room .bm-title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bm-room-back, .bm-room-status { transition: none; }
}