/* ============================================================================
   Mobile Unified Media Modal — content styles
   Layout is owned by MobileSheet3Panel (mobile-sheet-3panel.css). This file
   styles the content that umRender* renderers emit INTO the scaffold panels:
     top    — #umMediaPane (YouTube iframe, document preview, placeholder)
     middle — #umTitle + #umBody (title, AI description, people, KG, etc.)
     bottom — #umActions (pill action buttons + clip CTA)
   Pull-up-sheet rules retired 2026-04-18 (luminous-mapping-gizmo S2).
   ============================================================================ */

/* ── Overlay wrapper: kept for closeUnifiedMediaModal compat (state.overlay). ── */
.um-overlay.um-mobile {
    background: transparent;
    padding: 0;
}

/* realizing-mobile-modals S3 D2+D3 (Issues #9b + #9c, 2026-05-13) — UMI
   focal-shrink + info-panel-expand. Joe directive 2026-05-13 /listen:
   "Shrink the thumbnail and move it up so it sits directly below the iPhone
   header band. The information panel beneath the thumbnail should consume
   the available display area below the (smaller) thumbnail."
   .
   This INTENTIONALLY REVERSES the embracing-iphone-immersion S1 D9
   thumbnail-greedy bias from 2026-05-12 (which prioritized focal pane at
   --msp-top-flex: 12 / min-height: 55vh / middle max-height: 22vh). One
   day after that bias landed, Joe's iPhone walkthrough surfaced the
   opposite need — the AI ANALYSIS panel + KG section read as cramped
   because the focal dominated. Joe's preference has flipped: small
   thumbnail, large info panel. We honor the new directive structurally
   rather than splitting the difference; the info panel + middle KG
   section grow into ~55vh of breathing room.
   .
   New ratios target focal ~30-35% of viewport, info panel ~55-60% on
   iPhone 15 Pro Max. The .msp-bottom pill row (#umActions) remains 80px
   at the actual bottom but is hidden behind the State-4 contextual TabBar
   at z:11000 (mobile-tab-bar.css) — net visible is focal + info only.
   .
   Honest aspect-ratio letterboxing (object-fit: contain) preserved per
   prior directive — image centers in the shrunken focal panel, any
   letterbox proportional to image aspect. Face-detect overlays use
   percentage-based coords so they re-scale automatically.
   .
   Cascade order: mobile-sheet-3panel.css (canonical scaffold defaults)
   → mobile-umi.css (this file, S3 D2+D3 override) takes precedence on
   UMI-mode mounts. */
.msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) {
    --msp-top-flex: 4;
    --msp-middle-flex: 8;
}
.msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) .msp-top {
    min-height: 28vh;
    max-height: 38vh;
}
.msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) .msp-middle {
    max-height: none;
    min-height: 35vh;
    /* closing-realization-gate S3 D3 (2026-05-13 PM) — Cell F fill: pad
       the bottom of the scrollable info pane by the FFA mobile tab-bar's
       total height so the LAST content row clears the chrome tab-bar
       (z:11500) overlay. Without this, the user scrolls to the bottom of
       AI ANALYSIS + KG + people-chips content and the final row is
       occluded by the contextual TabBar State-4 controls. With this
       padding, the info pane structurally extends to the visible tab-bar
       top edge — matching Joe's "info panel consumes the available
       display area" directive (universal-pattern rule #9 — scrollable
       content fills space). */
    padding-bottom: calc(14px + var(--mobile-tab-bar-total-height, 80px));
}
/* closing-realization-gate S3 D3 (2026-05-13 PM) — Cell F fill: collapse
   the legacy `.msp-bottom` pill row for UMI mode. The pills (#umActions)
   are sourced into the State-4 contextual TabBar at z:11000 per
   mobile-tab-bar.css; the bottom pill panel renders at the actual
   viewport bottom but is fully occluded by the tab-bar. Collapsing it
   reclaims that ~80px of vertical space for the `.msp-middle` info pane
   to expand into. DOM presence is preserved (height: 0 + overflow:
   hidden) so tab-bar.js's State-4 queries can still pull pill content. */
.msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) .msp-bottom {
    flex: 0 0 0;
    height: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border-top: none;
}
/* Shorter viewports (iPhone SE / 13 mini) — tighten focal further so info
   panel preserves ≥30vh on small screens where the AI ANALYSIS + KG
   sections need every pixel. */
@media (max-height: 720px) {
    .msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) {
        --msp-top-flex: 3;
        --msp-middle-flex: 7;
    }
    .msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) .msp-top {
        min-height: 24vh;
        max-height: 32vh;
    }
    .msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) .msp-middle {
        max-height: none;
        min-height: 30vh;
    }
}

/* ── YouTube iframe inside the scaffold's focal pane ── */
#umMediaPane iframe.um-yt-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
    align-self: center;
}

/* ── Document preview, audio, placeholder inside focal pane ── */
#umMediaPane .um-doc-preview,
#umMediaPane .um-audio-player,
#umMediaPane .um-media-placeholder {
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    font-size: 2rem;
}

/* ── Navigation overlay (browse/curator mode) — floats inside focal pane ── */
.um-nav-bar.um-nav-bar-mobile {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    z-index: 8;
    pointer-events: none;
}

.um-nav-bar.um-nav-bar-mobile .um-nav-btn {
    width: 44px;
    height: 52px;
    font-size: 1.3rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.um-nav-bar.um-nav-bar-mobile .um-nav-btn:disabled {
    opacity: 0.2;
}

.um-nav-bar.um-nav-bar-mobile .um-nav-position {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4px 12px;
    border-radius: 12px;
    pointer-events: auto;
}

/* ── Title ── */
.um-title.um-title-mobile {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* truing-pocket-stagecraft S2 (#2) — the same element, now seated in the
   3-panel header row (`.msp-float-title`) instead of the middle panel. It is
   the object's NAME, so it reads as chrome, not as body copy: no bottom
   margin, sized for the row, and centred.

   It floats over the focal media, so legibility cannot rely on the panel
   background. The row already carries a top-down scrim for the buttons; the
   text gets its own shadow so a pale photograph behind it can't erase the
   name (M8 — pocket-scale legibility). */
.um-title.um-title-mobile.um-title-header {
    margin: 0;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    line-height: 40px;   /* match .msp-float-btn height — one optical row */
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.55);
}

/* ── Action pills inside bottom panel (#umActions) ── */
.um-actions.um-actions-mobile {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.um-actions.um-actions-mobile .um-action-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.2;
    white-space: nowrap;
}

.um-actions.um-actions-mobile .um-action-btn:active {
    background: rgba(255, 255, 255, 0.16);
}

.um-actions.um-actions-mobile .um-action-btn.active {
    background: rgba(110, 168, 255, 0.2);
    border-color: rgba(110, 168, 255, 0.4);
    color: #6ea8ff;
}

.um-actions.um-actions-mobile .um-action-btn span:first-child {
    font-size: 1rem;
}

.um-actions.um-actions-mobile .um-action-btn span:nth-child(2) {
    font-size: 0.75rem;
}

/* "Play with narrator" clip CTA (presentation mode videos) */
.um-actions.um-actions-mobile .um-mobile-clip-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    min-height: 36px;
    border: none;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.35);
}

.um-actions.um-actions-mobile .um-mobile-clip-cta:active {
    background: #6d28d9;
    transform: scale(0.97);
}

.um-actions.um-actions-mobile .um-mobile-clip-cta svg {
    flex-shrink: 0;
}

/* ── Body content inside middle panel (#umBody) ── */
.um-body.um-body-mobile {
    padding: 0;
    color: #fff;
}

.um-body.um-body-mobile .um-section {
    margin-bottom: 16px;
    padding: 0;
    background: transparent;
    border: none;
}

.um-body.um-body-mobile .um-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6ea8ff;
    margin-bottom: 6px;
}

.um-body.um-body-mobile .um-section p,
.um-body.um-body-mobile .um-analysis,
.um-body.um-body-mobile .um-doc-summary {
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* Desktop .um-analysis/.um-doc-summary set background:#ffffff + padding + border-left
   + box-shadow. On mobile's dark theme those leak through: a white box with white
   text reads as an empty white panel. Reset them here so the content renders
   transparently on the dark middle-panel background. */
.um-body.um-body-mobile .um-analysis,
.um-body.um-body-mobile .um-doc-summary {
    background: transparent;
    padding: 0;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
}

/* Rendered family prose on the mobile skin (coaching-enrichment-prose S3).
   The `.um-section p { margin: 0 }` rule above outranks `.um-prose > p` on
   specificity, so without this the paragraph spacing the S3 upgrade exists to
   deliver would land on desktop and silently collapse on the phone — where
   most of the family actually reads. Same reason it needs its own rule for
   the lists. */
.um-body.um-body-mobile .um-prose > p {
    margin: 0 0 0.7em;
}
.um-body.um-body-mobile .um-prose > p:last-child {
    margin-bottom: 0;
}
.um-body.um-body-mobile .um-prose .ffa-prose-list {
    margin: 0 0 0.7em;
    padding-left: 1.35em;
}
.um-body.um-body-mobile .um-prose .ffa-prose-list:last-child {
    margin-bottom: 0;
}

.um-body.um-body-mobile .um-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.um-body.um-body-mobile .um-type-badge,
.um-body.um-body-mobile .um-doc-type-badge {
    padding: 3px 10px;
    background: rgba(110, 168, 255, 0.15);
    color: #6ea8ff;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.um-body.um-body-mobile .um-date {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.um-body.um-body-mobile .um-doc-author {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    margin-top: 4px;
}

/* ── Chips ── */
.um-body.um-body-mobile .um-chips,
.um-body.um-body-mobile .um-people {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.um-body.um-body-mobile .um-person-chip,
.um-body.um-body-mobile .um-concept-chip,
.um-body.um-body-mobile .um-institution-chip {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 16px;
    font-size: 0.82rem;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-tap-highlight-color: transparent;
}

.um-body.um-body-mobile .um-person-tappable {
    background: rgba(110, 168, 255, 0.12);
    border-color: rgba(110, 168, 255, 0.25);
    cursor: pointer;
}

.um-body.um-body-mobile .um-person-tappable:active {
    background: rgba(110, 168, 255, 0.25);
}

.um-body.um-body-mobile .um-chip-role {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
}

.um-body.um-body-mobile .um-more-chip {
    padding: 6px 12px;
    background: transparent;
    color: #6ea8ff;
    border-radius: 16px;
    font-size: 0.82rem;
    border: 1px dashed rgba(110, 168, 255, 0.35);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.um-body.um-body-mobile .um-hidden-chip {
    display: none;
}

/* ── Quotes ── */
.um-body.um-body-mobile .um-quote {
    padding: 10px 14px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid #6ea8ff;
    border-radius: 0 10px 10px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
}

/* ── Collapsible sections ── */
.um-body.um-body-mobile .um-collapsible .um-collapsible-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
    padding: 8px 0;
}

.um-body.um-body-mobile .um-toggle-arrow {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
}

.um-body.um-body-mobile .um-collapsible.open .um-toggle-arrow {
    transform: rotate(90deg);
}

.um-body.um-body-mobile .um-collapsible .um-collapsible-body {
    display: none;
    padding-top: 6px;
}

.um-body.um-body-mobile .um-collapsible.open .um-collapsible-body {
    display: block;
}

/* ── Knowledge graph ── */
.um-body.um-body-mobile .um-kg-group {
    margin-top: 10px;
}

.um-body.um-body-mobile .um-kg-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 6px;
    text-transform: capitalize;
}

.um-body.um-body-mobile .um-kg-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 4px;
    font-size: 0.84rem;
    line-height: 1.4;
}

.um-body.um-body-mobile .um-kg-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.um-body.um-body-mobile .um-kg-label {
    color: #fff;
    flex: 1;
    font-weight: 500;
}

.um-body.um-body-mobile .um-kg-claim {
    display: block;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    margin-top: 2px;
    font-style: italic;
}

.um-body.um-body-mobile .um-kg-overflow {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.76rem;
    background: transparent;
    padding: 4px;
}

/* ── Extracted text ── */
.um-body.um-body-mobile .um-extracted-text {
    font-family: ui-monospace, monospace;
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 12px;
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.um-body.um-body-mobile .um-expand-link {
    display: inline-block;
    margin-top: 6px;
    color: #6ea8ff;
    font-size: 0.82rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Details ── */
.um-body.um-body-mobile .um-details {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Loading ── */
.um-body.um-body-mobile .um-loading {
    padding: 32px 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.um-body.um-body-mobile .um-spinner {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(110, 168, 255, 0.2);
    border-top-color: #6ea8ff;
    border-radius: 50%;
    animation: um-mobile-spin 0.8s linear infinite;
}

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

/* ── Commentary ── */
.um-body.um-body-mobile .um-commentary-input {
    background: rgba(110, 168, 255, 0.06);
    border: 1px solid rgba(110, 168, 255, 0.2);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 16px;
}

.um-body.um-body-mobile .um-commentary-input textarea#umCommentaryText {
    width: 100%;
    min-height: 80px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
    -webkit-appearance: none;
}

.um-body.um-body-mobile .um-commentary-input textarea#umCommentaryText:focus {
    outline: none;
    border-color: #6ea8ff;
}

.um-body.um-body-mobile .um-commentary-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.um-body.um-body-mobile .um-commentary-actions .um-action-btn {
    flex: 1;
    margin: 0;
    padding: 12px;
    font-size: 0.88rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
}

.um-body.um-body-mobile .um-commentary-actions .um-commentary-send {
    background: #6ea8ff;
    color: #fff;
    border-color: #6ea8ff;
    font-weight: 600;
}

.um-body.um-body-mobile .um-commentary-actions .um-commentary-send:disabled {
    opacity: 0.6;
}

/* (The narration mini-sheet's rules retired with it — enhancing-trio-biographies S3.) */

/* ══════════════════════════════════════════════════════════════════════════
   THE FAMILY PANEL on the phone — hardening-vault-faculties S6
   ──────────────────────────────────────────────────────────────────────────
   Designed at 320px first (iPhone SE), checked at 390px. Two constraints ran
   the layout: no rendered date may break across two lines, and every
   connection line must clear a 44px touch target. The mobile UMI middle panel
   is dark, so every S6 surface is re-dressed here rather than inheriting the
   desktop panel's light treatment.
   ════════════════════════════════════════════════════════════════════════ */

.um-body.um-body-mobile .um-section-label--family {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.8rem;
    color: #6ea8ff;
}

/* ── In this photo ── */
.um-body.um-body-mobile .um-avatar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.um-body.um-body-mobile .um-avatar-chip {
    padding: 5px 14px 5px 5px;
    gap: 8px;
    min-height: 44px;
    background: rgba(110, 168, 255, 0.12);
    border: 1px solid rgba(110, 168, 255, 0.25);
    color: #fff;
    font-size: 0.86rem;
    -webkit-tap-highlight-color: transparent;
}
.um-body.um-body-mobile .um-avatar-chip:active {
    background: rgba(110, 168, 255, 0.25);
}
.um-body.um-body-mobile .um-avatar {
    width: 32px;
    height: 32px;
    background: rgba(110, 168, 255, 0.4);
}
/* A long "Firstname Lastname" is allowed to wrap the CHIP to a new row, but
   never to break inside the name. At 320px two chips fit per row; a third
   wraps whole. */
.um-body.um-body-mobile .um-avatar-name {
    white-space: nowrap;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Where and when ── */
.um-body.um-body-mobile .um-where-when {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}
.um-body.um-body-mobile .um-ww-sep {
    color: rgba(255, 255, 255, 0.35);
}

/* ── Connected to ── */
.um-body.um-body-mobile .um-connection {
    min-height: 44px;               /* the touch-target floor */
    padding: 10px 12px;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
    box-sizing: border-box;
}
.um-body.um-body-mobile .um-connection.um-person-tappable {
    background: rgba(110, 168, 255, 0.10);
    color: #cfe2ff;
    -webkit-tap-highlight-color: transparent;
}
.um-body.um-body-mobile .um-connection.um-person-tappable:active {
    background: rgba(110, 168, 255, 0.22);
}
.um-body.um-body-mobile .um-show-more {
    min-height: 44px;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed rgba(110, 168, 255, 0.35);
    color: #6ea8ff;
    font-size: 0.84rem;
    -webkit-tap-highlight-color: transparent;
}

/* ── The collection sentence ── */
.um-body.um-body-mobile .um-collection-line {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}
.um-body.um-body-mobile .um-collection-name {
    color: #6ea8ff;
}

/* ── See all connections ── */
.um-body.um-body-mobile .um-see-all-btn {
    min-height: 48px;
    border-radius: 12px;
    background: rgba(110, 168, 255, 0.10);
    border-color: rgba(110, 168, 255, 0.35);
    color: #6ea8ff;
    font-size: 0.88rem;
    -webkit-tap-highlight-color: transparent;
}
.um-body.um-body-mobile .um-see-all-btn:active {
    background: rgba(110, 168, 255, 0.22);
}

/* ── About this file ── */
.um-body.um-body-mobile .um-file-row {
    padding: 7px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* 88px of key column against a 320px viewport leaves too little for the value,
   so the phone stacks key over value instead of shrinking the type. */
@media (max-width: 400px) {
    .um-body.um-body-mobile .um-file-row {
        flex-direction: column;
        gap: 2px;
    }
    .um-body.um-body-mobile .um-file-key {
        flex: none;
    }
}
.um-body.um-body-mobile .um-file-key {
    color: rgba(255, 255, 255, 0.45);
}
.um-body.um-body-mobile .um-file-val {
    color: rgba(255, 255, 255, 0.8);
}
.um-body.um-body-mobile .um-file-note {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.74rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE NAME — the app-shell title steps back while the UMI names the object
   truing-pocket-stagecraft S9 · Joe ruling ① (2026-08-27)
   ───────────────────────────────────────────────────────────────────────────
   Joe: "Suppress the shell title when the UMI is open." One name on screen,
   and it is the object's.

   S2 flagged this and correctly declined to fix it: moving #umTitle up into
   the float-controls row put the modal's name 66px under the app shell's on
   the BROWSE path (over-story is unaffected — the shell is not painted there).
   Measured on live production before this rule, browse path, 390x844:

     .mobile-view-title  y=15 h=26  "Laura Updegrove toasts her mother Trudi…"
     #umTitle            y=72 h=40  "Laura Updegrove's Toast — Trudi's 80th…"

   Two names for ONE object, 31px apart — and the shell was showing the item's
   DESCRIPTION while the modal showed its NAME, so it read as two objects.

   ⚠️ WHY THIS IS NOT THE CLASS S1 REPAIRED IN #9. That defect was a hide list
   that ENUMERATED shell classes (`.header, .top-bar, .sidebar, …`) — five of
   its six names had stopped matching anything, and it failed SILENTLY: the
   shell painted over the modal and nobody could tell the rule had rotted.
   The direction of rot is the whole difference:

     · The condition is STRUCTURAL and SELF-HEALING. It requires the UMI
       scaffold to be IN THE DOM carrying its own title. No JS lifecycle hook
       is involved, so there is no close path to miss — ESC, the backdrop, the
       float-control ×, the ModalManager's sweep and MobileUMI.teardown() all
       remove the scaffold, and the shell title returns because the selector
       simply stops matching. Nothing has to remember to undo it.
     · SCOPED TO UMI, never globally: [data-msp-mode="umi"] excludes the story
       presentation that shares this scaffold.
     · IF IT ROTS IT FAILS LOUD, not dark. Rename .msp-root, the mode token or
       #umTitle and this rule stops matching — which restores TODAY's behaviour
       (a visible doubled name, the thing Joe noticed unprompted in one walk),
       never a headerless or unnamed surface. An enumeration is only dangerous
       when its failure mode is silence; this one's failure mode is the visible
       status quo ante.

   ⛔ NOT the `display:none` on .nav-center that stories.css:4429 forbids. That
   invariant protects the title SLOT. Here the slot survives and keeps its
   layout; one CHILD steps back while a full-bleed sheet names the same object
   57px below it — the same child-level governance mobile.css already applies
   to .focus-chips-container. Unconditionally hiding .mobile-view-title WOULD
   violate it; this is conditional on the replacement being on screen. */
@media (max-width: 767px) {
    body:has(.msp-root[data-msp-mode="umi"] #umTitle) .mobile-view-title {
        display: none !important;
    }
}

/* ==========================================================================
   THE CHROME BAND — the UMI's controls never sit on the media
   (streamlining-sayit-stories S2, 2026-10-26).

   Joe, Say It in the UMI over the About story: "The controls, the exit and the
   label and the maximize screen control and the download control are all stepping
   on the image of the document we're trying to view, and that's true generally in
   the UMI mobile version."

   ROOT CAUSE (measured, not guessed): the scaffold draws `.msp-float-controls` as
   an ABSOLUTE overlay inside `.msp-top`, and `.msp-focal-content` is `inset: 0` —
   the media fills the whole panel and NOTHING reserves the controls' band
   (unified-media-modal.css said so in a comment and darkened the title chip
   instead). On top of that the docked overlay's `top` adds the safe-area inset a
   second time (`.msp-frame` already pads by it), pushing the row ~62px INTO the
   media on a Dynamic Island phone. Documents are top-anchored, so their first lines
   (letterhead, title) sat under the row; centred photos lost faces.

   THE FIX IS LAYOUT, NOT PAINT: in UMI mode the controls are an ordinary FLOW row
   at the top of `.msp-top`, and the media takes the remaining height below it. The
   row can therefore never overlap the media, in any mode, for any media type.
   The notch inset is spent exactly once: the frame already spends it (docked and
   over-story), EXCEPT maximized over a story, where the frame is flush to the top
   of the screen — there the row pads itself by it (the 2026-08-29 "x under the
   clock" trap stays closed).

   Scoped to `[data-msp-mode="umi"]`: story mode shares the scaffold and is cdf's.
   Guard: tests/mobile/scenarios/umi-chrome-band.spec.js (390 + 430 px, WebKit +
   Chromium, an image, a PDF and a long text document; red on the pre-S2 CSS).
   ========================================================================== */
.msp-root[data-msp-mode="umi"] .msp-top {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.msp-root[data-msp-mode="umi"] .msp-top > .msp-float-controls {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    padding: 6px 12px;
    background: #000;
}
.msp-root[data-msp-mode="umi"].msp-maximized .msp-top > .msp-float-controls {
    padding-bottom: 6px;
    background: #000;
}
.msp-root[data-msp-mode="umi"].msp-over-story.msp-maximized .msp-top > .msp-float-controls {
    padding-top: max(6px, env(safe-area-inset-top));
}
.msp-root[data-msp-mode="umi"] .msp-top > .msp-focal-content {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}
/* The band costs the docked media ~56px; hand most of it back so photos do not shrink
   (tall phones only — the ≤720px rule above keeps its tighter budget for the info pane). */
@media (min-height: 721px) {
    .msp-root[data-msp-mode="umi"]:not(.msp-over-story):not(.msp-maximized) .msp-top {
        min-height: 34vh;
        max-height: 44vh;
    }
}