/* ============================================================================
 * La2etlak — 5I DIALOGS + PROTECTED MEDIA VIEWER
 * ============================================================================
 * Ported by 5I-DIALOGS-MEDIA-STAGE-B-FINAL-PORT-001 from the locked authority:
 *
 *   docs/design/locked/2026-08-11/phase-5i-dialogs.html   (modified Option B)
 *   docs/design/locked/2026-08-11/FINAL_DESIGN_FOUNDATION.md
 *   docs/design/locked/2026-08-11/uploads/DESIGN_RULES.md
 *
 * PORT, DO NOT INTERPRET. Every value below is copied from the locked board.
 *
 * -- WHAT THIS FILE OWNS ------------------------------------------------------
 * TWO shells, deliberately different in structure and sharing ONE accessibility
 * implementation (resources/js/dialogs-media.js):
 *
 *   SHELL 1  `.dlg-mv`   the immersive protected media viewer
 *   SHELL 2  `.dlg-cdo`  the compact, text-first consequence dialog
 *
 * -- PREFIX -------------------------------------------------------------------
 * Every member carries `dlg-`, mechanically applied to the board's own class
 * name, for the reason 5E carries `msg-`, 5F `ntf-`, 5G `dsh-` and 5H `set-`
 * (ledger 42.2): the board's short names already have owners in the ported
 * layer - `.cd` and `.card` collide with Bootstrap, `.fld` neighbours Search's
 * `.fldl`, and `.safe`, `.spin`, `.th` and `.pos` are far too general to claim.
 *
 * -- WHAT THIS FILE DELIBERATELY DOES NOT OWN ---------------------------------
 *   - tokens, type, focus ring, `.btn` and every button role - foundation.css
 *   - every icon primitive - foundation.css (`i-x`, `i-chev-l`, `i-chev-r`,
 *     `i-lock`, `i-alert`); nothing is redeclared here
 *   - the page under the overlay - its own closed family owns it
 *   - the board's `.attlink` unsupported-attachment treatment. 5E Messages is
 *     CLOSED and owns the attachment card; an unsupported type keeps that card
 *     and stays an ordinary authorized link, which is exactly what the board's
 *     own contract summary requires. Declared in tests/Design/maps/dialogs.json,
 *     never re-drawn here.
 *   - the board's `.safe` / `.mvsafe` LABELLED strips. Those are annotation
 *     apparatus ("safe-area inset" printed as text) under DESIGN_AUTHORITY 3.
 *     Production honours the real `env(safe-area-inset-bottom)` instead.
 *
 * -- SCOPE --------------------------------------------------------------------
 *   proof                     production
 *   .pg                    ->  .la2-pg
 *   .pg.dark               ->  [data-bs-theme="dark"] .la2-pg
 *   .pg[dir=rtl]           ->  [dir="rtl"] .la2-pg
 *   .pg.m                  ->  @media (max-width: 767.98px)
 *
 * The board draws both shells as `position:absolute` inside a fixed-height
 * specimen frame, which is how a board contains an overlay in a column. A
 * production overlay covers the VIEWPORT, so both roots are `position: fixed`.
 * Declared in the map; the box is otherwise the board's.
 *
 * No `!important` anywhere in the ported layer.
 * ========================================================================== */


/* ============================================================================
   0 - SHARED: the isolation both shells depend on
   ========================================================================== */

/* The scroll lock. Set by dialogs-media.js while either shell is open, and
   removed when it closes; without it the page behind the overlay still scrolls
   under a wheel, a trackpad and an iOS rubber-band. */
.la2-pg.dlg-locked { overflow: hidden; }

/* A live region that announces load failure, a server failure and a completed
   destructive outcome. One per page, never painted. */
.la2-pg .dlg-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A form that exists only to be FORWARDED by a dialog. It renders no control of
   its own and takes no space; the visible trigger is a link that still works
   without JavaScript. */
.la2-pg .dlg-vhform { display: none; }

/* The invisible full-bleed trigger the report gallery's main plate carries.
   It changes no existing box: `.galmain` is already `position:relative` with
   `overflow:hidden`, so this lies over the photograph and paints nothing. */
.la2-pg .dlg-zoom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}


/* ============================================================================
   1 - SHELL 1: the immersive protected media viewer   (board 02-08)
   ============================================================================
   Chrome that has nothing to do is ABSENT, never disabled: with one image the
   viewer renders no chevrons, no position indicator and no thumbnail strip.
   That is done by the module removing the nodes, not by a rule here.
   ========================================================================== */

.la2-pg .dlg-mv {
    position: fixed;
    inset: 0;
    /* The board declares `z-index: 30`, which is a SPECIMEN-LOCAL value: inside a
       board frame an overlay only has to beat the skeleton page drawn behind it.
       Production has to beat the whole application's stacking layers — Bootstrap's
       own modal (1055) and offcanvas (1045), and the settled Public Shell drawer,
       which public-shell.css already fixes at 1080 / 1081. 1090 is one step above
       the highest of them, so a shell opened while the drawer is open is still on
       top. Declared in tests/Design/maps/dialogs.json; the box is the board's. */
    z-index: 1090;
    background: rgba(7, 10, 17, .94);
    display: flex;
    flex-direction: column;
    color: #E9EFF9;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

[dir="rtl"] .la2-pg .dlg-mv {
    font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
}

.la2-pg .dlg-mv[hidden] { display: none; }

/* --- the thin top bar ---------------------------------------------------- */

.la2-pg .dlg-mvbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .11);
    background: rgba(11, 15, 24, .72);
}

/* The identity block is the viewer's INITIAL FOCUS target (board 10: focus
   entry is the title for a viewer, so the destructive verb and Close never
   receive it). Programmatically focusable only. */
.la2-pg .dlg-mvid { min-width: 0; }
.la2-pg .dlg-mvid:focus { outline: none; }
.la2-pg .dlg-mvid:focus-visible { outline: 3px solid #8FA6F2; outline-offset: 2px; border-radius: 4px; }

.la2-pg .dlg-mvttl {
    min-width: 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #F2F6FC;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la2-pg .dlg-mvwho {
    font-size: 12.5px;
    color: #9FB0CB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.la2-pg .dlg-mvpos {
    flex: none;
    font: 600 12.5px/1 'IBM Plex Sans', sans-serif;
    color: #C7D5EC;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    padding: 7px 11px;
}

[dir="rtl"] .la2-pg .dlg-mvpos { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg .dlg-mvx {
    margin-inline-start: auto;
    flex: none;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .05);
    color: #E9EFF9;
    font: 600 14px/1 'IBM Plex Sans', sans-serif;
    cursor: pointer;
}

[dir="rtl"] .la2-pg .dlg-mvx { font-family: 'IBM Plex Sans Arabic', sans-serif; }

.la2-pg .dlg-mvx .ico { background: currentColor; }

/* --- the stage, and the evidence context panel beside it ------------------ */

.la2-pg .dlg-mvmain {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.la2-pg .dlg-mvmain.dlg-ctxsplit { grid-template-columns: minmax(0, 1fr) 312px; }

.la2-pg .dlg-mvstage {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 74px;
}

/* The image is CONTAINED at any orientation and never cropped: the stage is
   fixed, only the image changes shape, so nothing jumps between photographs. */
.la2-pg .dlg-mvimg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.la2-pg .dlg-mvnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .24);
    background: rgba(17, 23, 36, .88);
    color: #EDF2FA;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.la2-pg .dlg-mvnav.dlg-p { inset-inline-start: 12px; }
.la2-pg .dlg-mvnav.dlg-n { inset-inline-end: 12px; }
.la2-pg .dlg-mvnav .ico { width: 20px; height: 20px; background: currentColor; }

/* --- the foot: thumbnails, or the caption --------------------------------- */

.la2-pg .dlg-mvfoot {
    border-top: 1px solid rgba(255, 255, 255, .11);
    background: rgba(11, 15, 24, .72);
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* The real safe-area inset the board's labelled strip stands for. */
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
}

.la2-pg .dlg-mvthumbs { display: flex; gap: 8px; overflow: auto; }

.la2-pg .dlg-mvth {
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.la2-pg .dlg-mvth img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.la2-pg .dlg-mvth[aria-current="true"] {
    border-color: #8FA6F2;
    background: rgba(143, 166, 242, .16);
}

.la2-pg .dlg-mvcap {
    font-size: 12.5px;
    color: #9FB0CB;
    margin-inline-start: auto;
    max-width: 52ch;
}

/* --- the claim context panel (Option C, borrowed into Option B) ------------ */

.la2-pg .dlg-mvctx {
    border-inline-start: 1px solid rgba(255, 255, 255, .11);
    background: rgba(13, 18, 29, .82);
    padding: 16px;
    overflow: auto;
    font-size: 13px;
    color: #B7C5DC;
}

.la2-pg .dlg-mvctx h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 16px;
    color: #F2F6FC;
    margin: 12px 0 4px;
}

[dir="rtl"] .la2-pg .dlg-mvctx h3 { font-family: 'Noto Naskh Arabic', serif; }

.la2-pg .dlg-mvsub { margin: 2px 0 0; font-size: 12.5px; color: #8496B2; }

.la2-pg .dlg-mvctx dl {
    margin: 12px 0 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 12px;
    font-size: 12.5px;
}

.la2-pg .dlg-mvctx dt {
    color: #8496B2;
    /* BOOTSTRAP NEUTRALISATION, not a design value. Reboot sets `dt { font-weight:
       700 }`; the board declares no weight on `dt` at all, so its label inherits
       the panel's 400. This restores the board's own computed value and is the
       same documented kind of collision foundation.css records for `.btn`. */
    font-weight: 400;
}
.la2-pg .dlg-mvctx dd { margin: 0; color: #DCE5F3; min-width: 0; overflow-wrap: anywhere; }

.la2-pg .dlg-mvquote {
    margin-top: 14px;
    border-inline-start: 3px solid rgba(143, 166, 242, .6);
    padding: 2px 0 2px 11px;
    color: #C6D3E7;
    font-size: 12.5px;
}

[dir="rtl"] .la2-pg .dlg-mvquote { padding: 2px 11px 2px 0; }

.la2-pg .dlg-mvpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    padding: 4px 10px;
    color: #C7D5EC;
}

.la2-pg .dlg-mvnote { margin-top: 14px; font-size: 12px; color: #8496B2; }

/* The compact block the context becomes below the breakpoint (board 06). */
.la2-pg .dlg-mvctxm {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(13, 18, 29, .8);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12px;
    color: #B7C5DC;
}

/* --- the media states: loading, failed, unavailable ----------------------- */

.la2-pg .dlg-mvstate {
    max-width: 44ch;
    text-align: center;
    color: #C3D0E4;
    font-size: 13.5px;
}

.la2-pg .dlg-mvstate .dlg-big {
    display: block;
    color: #F2F6FC;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

.la2-pg .dlg-spin {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: #8FA6F2;
    margin: 0 auto 12px;
    animation: la2-dlg-spin 1s linear infinite;
}

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


/* ============================================================================
   2 - SHELL 2: the compact consequence dialog   (board 02, 04-09)
   ============================================================================
   Question first, consequence second, optional truthful summary, action pair at
   the foot. No header bar. Complete verbs only, never "Yes", "OK", "Confirm".
   ========================================================================== */

.la2-pg .dlg-cdo {
    position: fixed;
    inset: 0;
    /* Same authority as `.dlg-mv` above: the board's 30 is specimen-local, and
       production sits one step above the settled drawer at 1081. */
    z-index: 1090;
    background: rgba(9, 13, 22, .52);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

[data-bs-theme="dark"] .la2-pg .dlg-cdo { background: rgba(4, 7, 13, .62); }

.la2-pg .dlg-cdo[hidden] { display: none; }

.la2-pg .dlg-cd {
    width: 100%;
    max-width: 452px;
    background: var(--bg);
    border: 1px solid var(--edge);
    border-radius: 14px;
    box-shadow: var(--sh);
    padding: 20px 22px 18px;
    max-height: 100%;
    overflow-y: auto;
}

/* The board's wider card, drawn for the long Arabic consequence at 900. */
.la2-pg .dlg-cd.dlg-wide { max-width: 512px; }

/* A destructive confirmation carries a red top edge - one of three cues, never
   the only one: the verb and the "Cannot be undone" mark carry it in WORDS. */
.la2-pg .dlg-cd.dlg-dstr { border-top: 3px solid var(--erI); }

.la2-pg .dlg-dmark {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--erI);
    border: 1px solid var(--erEd);
    background: var(--erBg);
    border-radius: 6px;
    padding: 4px 9px;
    margin-bottom: 10px;
}

.la2-pg .dlg-dmark::before { content: "\25B2"; font-size: 9px; }

[dir="rtl"] .la2-pg .dlg-dmark { letter-spacing: 0; text-transform: none; font-size: 12px; }

.la2-pg .dlg-dttl {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 19.5px;
    font-weight: 600;
    color: var(--head);
    margin: 0 0 8px;
    line-height: 1.25;
}

[dir="rtl"] .la2-pg .dlg-dttl {
    font-family: 'Noto Naskh Arabic', serif;
    line-height: 1.5;
    font-size: 19px;
}

.la2-pg .dlg-dcs { margin: 0; font-size: 14px; color: var(--body); }

.la2-pg .dlg-dsum {
    margin-top: 13px;
    border: 1px solid var(--line);
    background: var(--band2);
    border-radius: 10px;
    padding: 10px 12px;
}

.la2-pg .dlg-dsum dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 5px 12px;
    font-size: 12.5px;
}

.la2-pg .dlg-dsum dt {
    color: var(--muted);
    /* BOOTSTRAP NEUTRALISATION — see `.dlg-mvctx dt` above. Reboot's
       `dt { font-weight: 700 }` also made the label WIDER than the board's,
       which moved the value column with it. */
    font-weight: 400;
}

.la2-pg .dlg-dsum dd {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The failure state: a validation message the server really returned, or a
   server failure that changed nothing. Never colour alone - it carries an
   icon, a heavier edge and the words. */
.la2-pg .dlg-derr {
    margin-top: 13px;
    border: 1px solid var(--erEd);
    border-inline-start: 4px solid var(--erI);
    background: var(--erBg);
    color: var(--erI);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    gap: 8px;
}

.la2-pg .dlg-derr::before {
    content: "!";
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--erI);
    font: 700 12px/15px 'IBM Plex Sans', sans-serif;
    text-align: center;
}

.la2-pg .dlg-derr:focus { outline: none; }
.la2-pg .dlg-derr:focus-visible { outline: 3px solid var(--act); outline-offset: 2px; }

.la2-pg .dlg-dft {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 18px;
    flex-wrap: wrap;
}

.la2-pg .dlg-prog {
    margin-inline-end: auto;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.la2-pg .dlg-prog .dlg-spin { width: 16px; height: 16px; border-width: 2px; margin: 0; }


/* ============================================================================
   3 - NARROW: the mobile recomposition   (board 05, 06, 07)
   ============================================================================
   ONE tree at every width. Nothing is duplicated for a narrow frame; the same
   nodes recompose (FOUNDATION 7 / ledger 10.1).
   ========================================================================== */

@media (max-width: 767.98px) {

    /* The dialog becomes a bottom sheet: actions stack full width with the SAFE
       action on top - nearest the reading order, furthest from a thumb. */
    .la2-pg .dlg-cdo { align-items: flex-end; padding: 0; }

    .la2-pg .dlg-cdo .dlg-cd {
        max-width: none;
        border-radius: 16px 16px 0 0;
        border-bottom: 0;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .la2-pg .dlg-dft { flex-direction: column; align-items: stretch; }
    .la2-pg .dlg-dft .btn { width: 100%; }
    .la2-pg .dlg-prog { margin: 0 0 4px; justify-content: center; }

    /* The viewer: the stage loses its chevron gutters, the chevrons leave the
       image edges and become the two 44px foot buttons. */
    .la2-pg .dlg-mvstage { padding: 12px; }
    .la2-pg .dlg-mvnav { display: none; }

    /* The stage becomes a COLUMN only where there is a claim context to put
       above the media — the board's own 360 evidence frame — because that is the
       only narrow state with two things to stack. Its 390 photograph frame keeps
       a single centred row, and so does this. */
    .la2-pg .dlg-mvmain.dlg-ctxsplit .dlg-mvstage {
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }

    .la2-pg .dlg-mvfoot { gap: 8px; flex-direction: column; align-items: stretch; }
    .la2-pg .dlg-mvnavrow { display: flex; gap: 8px; }

    .la2-pg .dlg-mvnavrow .btn {
        flex: 1;
        min-height: 44px;
        background: rgba(255, 255, 255, .07);
        color: #E9EFF9;
        border-color: rgba(255, 255, 255, .24);
    }

    .la2-pg .dlg-mvth img { width: 44px; height: 44px; }
    .la2-pg .dlg-mvcap { margin-inline-start: 0; }

    /* The context panel becomes a compact block above the media. */
    .la2-pg .dlg-mvmain.dlg-ctxsplit { grid-template-columns: minmax(0, 1fr); }
    .la2-pg .dlg-mvctx { display: none; }
}

/* Above the breakpoint the foot's nav row has nothing to do: the chevrons are
   on the stage. Absent, not disabled. */
@media (min-width: 768px) {
    .la2-pg .dlg-mvnavrow { display: none; }
    .la2-pg .dlg-mvctxm { display: none; }
}


/* ============================================================================
   4 - REDUCED MOTION   (board 10)
   ============================================================================
   The fade, the sheet slide and the spinner animation are all dropped; the
   loading state stays a static ring plus its text.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .la2-pg .dlg-spin { animation: none; border-top-color: rgba(255, 255, 255, .5); }
    .la2-pg .dlg-cd,
    .la2-pg .dlg-cdo,
    .la2-pg .dlg-mv { animation: none; transition: none; }
}