/* ============================================================================
 * mobile-dressing-room.css — THE DRESSING ROOM ON THE PHONE.
 *
 * surfacing-desktop-rooms-mobile S2 (2026-09-21), Joe 2026-09-18: "Dressing,
 * and Browse and probably face training all need mobile surfaces."
 *
 * The desktop room (dressing-room.css) is a workshop laid out across a wide
 * window — vanity, rail and drawer side by side. This sheet is NOT that sheet
 * narrowed; it dresses a different shape: a fixed mirror, then one candidate
 * per screen in a vertical scroll-snap pager.
 *
 * It keeps the room's SOUL — the warm rose/brass of `.ffv-theme-dressing`, the
 * bulb-lit mirror — because a member who opens the Dressing Room on a phone and
 * on a laptop must be in the same room. What changes is the furniture, not the
 * light.
 *
 * ── TWO LOAD-BEARING MEASUREMENTS ─────────────────────────────────────────
 *  1. `--mobile-control-panel-height` is RESERVED at the bottom (the universal
 *     reservation declared in mobile-tab-bar.css). This room OWNS that bar while
 *     it is on top — Say It lives in it — so covering it would hide its own one
 *     door.
 *  2. Every verdict control is ≥44 px tall AND ≥44 px of effective target (C6,
 *     Greg cycle 1). The census reads the EFFECTIVE target, not the declared
 *     height, so the buttons are given real box, not a tall line-height.
 * ========================================================================== */

/* ⚠️ The anchors (top / bottom / left / right / width) come from
   `.ffa-mobile-modal-chrome` in mobile.css and are `!important` there — this
   rule deliberately does NOT restate the calc() math, which is the whole point
   of that class. What IS restated here is the one thing the contract gets wrong
   for this room: the class sets `overflow-y: auto`, which is right for a
   scrollable modal BODY and wrong for a viewport-LOCKED room whose scrolling
   belongs to an inner pager. */
.mdr-overlay {
    /* 10300 — the MOBILE FULL-SCREEN ROOM band (Z_INDEX_HIERARCHY.md), shared with
       Mobile Face Training, Mobile Voice Training and mobile photo face tagging.
       Below Fergi AI's universal child z-cap at 10350 ON PURPOSE (the Native-Modal
       Delegation Principle: on mobile a delegated surface presents BEHIND Fergi),
       and below the universal control panel at 11000, which this room owns while
       it is on top and must never paint over. */
    z-index: 10300;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(217, 138, 156, 0.16), transparent 60%),
        linear-gradient(180deg, #1a0d13 0%, #120a10 60%, #0d070c 100%);
    color: #f3e7e0;
    font-family: var(--ffv-body-font, 'Source Sans 3', sans-serif);
    /* The room owns the universal control panel and must never draw over it —
       the chrome contract's `bottom` anchor already reserves that band, so this
       room needs no padding of its own. */
    overflow-y: hidden !important;
    overscroll-behavior: contain;
}

/* ── The mirror: fixed, always in view ─────────────────────────────────── */
/* It is the comparison. A candidate is only ever "better than" something, and
   on a phone the something has to stay on the screen to be compared with. */
.mdr-mirror {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
    border-bottom: 1px solid rgba(217, 179, 106, 0.22);
    background: linear-gradient(90deg,
        rgba(217, 138, 156, 0.16), rgba(255, 217, 160, 0.09), rgba(239, 63, 165, 0.13));
}
.mdr-mirror-frame {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    background: radial-gradient(circle at 50% 30%,
        rgba(255, 217, 160, 0.55), rgba(217, 138, 156, 0.30) 60%, rgba(255, 217, 160, 0.10));
    box-shadow: 0 0 18px rgba(255, 217, 160, 0.28);
}
.mdr-mirror-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 14, 22, 0.9);
    font-family: var(--ffv-display-font, Georgia, serif);
    font-size: 22px;
    color: #ffd9a0;
}
.mdr-mirror-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdr-mirror-text { flex: 1 1 auto; min-width: 0; }
.mdr-mirror-name {
    font-family: var(--ffv-display-font, Georgia, serif);
    font-size: 17px;
    font-weight: 600;
    color: #ffeede;
    /* No ellipsis-by-accident: C7 fails a clipped string, and a member's own
       name is the last thing that should be cut. It wraps. */
    overflow-wrap: anywhere;
}
.mdr-mirror-sub { font-size: 12.5px; color: rgba(243, 231, 224, 0.72); }

.mdr-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(217, 179, 106, 0.28);
    background: rgba(40, 18, 28, 0.6);
    color: #ffd9a0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.mdr-close:active { background: rgba(217, 138, 156, 0.30); }

/* ── The undo bar — the one-action rollback, where the eye already is ───── */
.mdr-undo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 217, 160, 0.12);
    border-bottom: 1px solid rgba(217, 179, 106, 0.22);
    font-size: 13px;
}
.mdr-undo[hidden] { display: none; }
.mdr-undo-btn {
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(217, 179, 106, 0.45);
    background: rgba(40, 18, 28, 0.7);
    color: #ffd9a0;
    font-size: 14px;
    cursor: pointer;
}

/* ── The pager: one candidate per screen, vertical snap ────────────────── */
.mdr-pager {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;          /* C7: nothing may scroll sideways */
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.mdr-loading {
    padding: 40px 20px;
    text-align: center;
    color: rgba(243, 231, 224, 0.6);
}

.mdr-page {
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;    /* one swipe = one candidate, never three */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 14px;
    box-sizing: border-box;
}

/* The portrait. `min-height: 0` + `flex: 1` is what lets the frame give its
   space to the controls on a short screen instead of pushing them off it — the
   phone-landscape case, where the viewport is 390 px tall. */
.mdr-frame {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(24, 11, 18, 0.75);
    border: 1px solid rgba(217, 138, 156, 0.28);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}
/* Fill the frame rather than float in it: the candidate IS the screen. `contain`
   keeps a portrait crop's aspect and never crops a face a second time. */
.mdr-face-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* The whole-photo fallback means "we don't know where they are in this one" —
   it is shown differently on purpose, not silently substituted. */
.mdr-face-img--whole { opacity: 0.92; }
.mdr-frame--missing::after {
    content: 'This photo could not be loaded.';
    padding: 20px;
    font-size: 13px;
    color: rgba(243, 231, 224, 0.55);
    text-align: center;
}

.mdr-standing {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
}
.mdr-chip {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(217, 179, 106, 0.30);
    background: rgba(40, 18, 28, 0.6);
    color: rgba(243, 231, 224, 0.9);
}
.mdr-chip--official {
    border-color: rgba(255, 217, 160, 0.65);
    background: rgba(255, 217, 160, 0.16);
    color: #ffe9c4;
}
.mdr-chip--proof { border-color: rgba(138, 217, 180, 0.35); color: #cfeede; }
.mdr-count { color: rgba(243, 231, 224, 0.55); white-space: nowrap; }

/* ── The verdict controls ──────────────────────────────────────────────── */
.mdr-acts {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mdr-act {
    flex: 1 1 auto;
    min-width: 46%;              /* two per row at 390 px; one per row when a label wraps */
    min-height: 48px;            /* ≥44 with room for a two-line label (C6) */
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(217, 179, 106, 0.32);
    background: rgba(40, 18, 28, 0.66);
    color: #f3e7e0;
    font-size: 14.5px;
    font-family: inherit;
    cursor: pointer;
}
.mdr-act:active { background: rgba(217, 138, 156, 0.28); }
/* The one verb this room exists for gets the brass. */
.mdr-act--wear {
    flex: 1 1 100%;
    border-color: rgba(255, 217, 160, 0.7);
    background: linear-gradient(180deg, rgba(255, 217, 160, 0.26), rgba(217, 138, 156, 0.22));
    color: #fff3e0;
    font-weight: 600;
}
.mdr-act--whole { color: rgba(243, 231, 224, 0.82); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.mdr-page--empty { justify-content: center; text-align: center; gap: 12px; }
.mdr-empty-h {
    font-family: var(--ffv-display-font, Georgia, serif);
    font-size: 19px;
    color: #ffeede;
}
.mdr-empty-p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(243, 231, 224, 0.72);
}

/* ── The desktop never sees this room ──────────────────────────────────── */
/* The gate is the same 767 px breakpoint FFAMobile.isMobile() reads, so the
   sheet and the presenter can never disagree about which shell they are on. */
@media (min-width: 768px) {
    .mdr-overlay { display: none; }
}

/* ── The header band, while this room is on top ────────────────────────────
   The palette KEY is registered in mobile-shell.js's THEME_COLORS (setPalette
   throws on an unknown key); these are the band rules that key selects. They
   live in this sheet rather than in mobile.css's palette block deliberately:
   the vocabulary entry is shared, the room's own paint is not, and a room that
   carries its own band rules can be removed in one file. */
@media (max-width: 767px) {
    /* ⚠️ THE BOTTOM BAND MUST MOVE WITH THE TOP ONE. mobile-tab-bar.css declares
       a `--mobile-tab-bar-*` block per palette, and a palette with no block falls
       to the bar's bare default — measured 2026-09-21 on the first run of this
       palette: the top band went rose and the universal control panel went WHITE,
       under a dark room, with the vault's own Say It glyph on it. Registering a
       palette key is three declarations, not one: THEME_COLORS (mobile-shell.js),
       the top band, and the bar. */
    body[data-modal-palette="dressing"] {
        --mobile-tab-bar-bg: #3a1520;
        --mobile-tab-bar-border-top: rgba(217, 179, 106, 0.22);
        --mobile-tab-bar-fg-inactive: rgba(255, 238, 222, 0.65);
        --mobile-tab-bar-fg-active: #fde68a;
        --mobile-tab-bar-shadow: 0 -2px 8px rgba(58, 21, 32, 0.45);
    }
    body[data-modal-palette="dressing"] .top-nav {
        background: #3a1520;
        border-bottom-color: rgba(217, 179, 106, 0.22);
        color: #ffeede;
    }
    body[data-modal-palette="dressing"] .mobile-hamburger-btn,
    body[data-modal-palette="dressing"] .mobile-fergi-ai-launcher {
        color: #ffeede;
    }
}