/* ====================================================================
   SCREEN 49 — THE PHOTO GALLERY, the laboratory's side, the desktop
   layer (desktop slice H6, 2026-10-10). exams/your-structure.html only,
   linked after desktop/31-your-structure.css.

   Frames: 49-d and 49-d-states in docs/design/pharmacy/screens/49/
   desktop/frame.html (drawn on the counter; call 2 gives the laboratory
   the same row and supersedes 31-d-states' compact rows); the sheet
   docs/design/pharmacy/screens/49/desktop/FACTS.md; brief
   briefs/2026-10-10_desktop-slice-H6.md, rules
   briefs/2026-10-10_desktop-build-rules-43-49.md.

   31a's Photos sheet from 901 is the counter's Photos dialog: 480 (shared
   §3), no padding of its own; the head (the title at 22 over its line)
   fixed at the top; the middle — the rows, the refusal line, the add act
   with "k of 8" and the helper, in that order — one box that scrolls
   (your-structure.js placePhotos makes it, .vm-ys-phscroll); the foot
   ruled and pinned under it, Cancel | Save at the right. A row: the 76
   thumbnail, the caption field of 44, then the quiet acts at the left
   and n/40 at the right; the first row's "Main photo" tag (28, mint).

   Every rule is scoped by the sheet's own hook, [data-photos-sheet] (the
   page's other sheets — About us, Close for now — keep 31's look). Every
   rule sits inside the min-width query: the phone is byte-frozen. No
   yellow, no orange, no prescription blue.
   ==================================================================== */

@media (min-width: 901px) {

    /* -- The dialog: no padding of its own; nothing scrolls but the
       middle box (the height stays shared §3's window - 96). ---------- */
    #vm-exams-ys .vm-ys-sheet.vm-dt-dialog.is-open[data-photos-sheet] {
        padding: 0;
        gap: 0;
        overflow: hidden;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phs {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0;
    }

    /* -- The head: the title at 22, its line at 13.5. ----------------- */
    #vm-exams-ys [data-photos-sheet] .vm-ys-sheet-title {
        flex: none;
        padding: 22px 24px 0;
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
        color: #0f172a;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phs-sub {
        flex: none;
        margin-top: 4px;
        padding: 0 24px 10px;
        font-size: 13.5px;
        line-height: 1.5;
        color: #475569;
    }

    /* -- The middle: one box that scrolls, 24 in, 12 between its parts
       (4 above and below, so a row's focus ring is never cut). -------- */
    #vm-exams-ys .vm-ys-phscroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 4px 24px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    #vm-exams-ys .vm-ys-phscroll > * { flex-shrink: 0; }

    /* -- A row: 8 in, radius 16, the canvas under a 1px grey rule. ----- */
    #vm-exams-ys [data-photos-sheet] .vm-ys-phlist { gap: 8px; }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phrow {
        padding: 8px;
        gap: 12px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phthumb {
        border-radius: 12px;
        background: #f1f5f9;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phmain { gap: 2px; }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phcap {
        height: 44px;
        border-radius: 12px;
        border: 1.5px solid #cbd5e1;
        padding: 0 12px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
    }

    /* The quiet acts (44) at the left, n/40 at the right; the tag. */
    #vm-exams-ys [data-photos-sheet] .vm-ys-phfoot {
        gap: 0;
        justify-content: flex-start;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phacts {
        order: 1;
        margin-left: -8px;
        gap: 0;
        justify-content: flex-start;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phcount {
        order: 2;
        margin-left: auto;
        padding: 0 2px 0 0;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phact {
        min-width: 44px;
        height: 44px;
        padding: 0 8px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        color: #475569;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phact--go { color: #0f6d5c; }

    /* On its way, and failed: the line at 13, the bar teal on grey. */
    #vm-exams-ys [data-photos-sheet] .vm-ys-phstate {
        padding: 6px 0 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        color: #475569;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phstate--fail { color: #0f172a; }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phbar {
        height: 4px;
        margin: 6px 0 2px;
        background: #e2e8f0;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phbar-in { background: #0f6d5c; }

    /* -- Under the rows: the refusal line, the add act, the helper. ---- */
    #vm-exams-ys [data-photos-sheet] .vm-ys-phs-fail {
        margin: 0;
        padding: 0 2px;
        gap: 8px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phs-fail i { margin-top: 4px; font-size: 12px; color: #475569; }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phadd { gap: 12px; }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phadd-go {
        height: 44px;
        padding: 0 20px;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
        font-weight: 700;
        gap: 8px;
        white-space: nowrap;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phadd-go i { font-size: 12.5px; }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phadd-go:disabled {
        background: #f1f5f9;
        color: #64748b;
        cursor: not-allowed;
    }
    #vm-exams-ys [data-photos-sheet] .vm-ys-phs-help {
        margin: 0;
        padding: 0 2px;
        font-size: 13px;
        line-height: 1.45;
        color: #475569;
    }

    /* -- The foot: ruled edge to edge, pinned under the middle; Cancel |
       Save at the right (31's sizes). --------------------------------- */
    #vm-exams-ys [data-photos-sheet] .vm-ys-about-acts {
        flex: none;
        margin: 10px 0 0;
        padding: 12px 24px 20px;
        border-top: 1px solid #f0f2f4;
        background: #fff;
    }
    /* Saving: the solid kept, faded, inert (the words stay Save). */
    #vm-exams-ys [data-photos-sheet] .vm-ys-about-save[aria-busy="true"] {
        background: #0f6d5c;
        color: #fff;
        opacity: .75;
        box-shadow: none;
        cursor: progress;
    }

    @media (hover: hover) {
        #vm-exams-ys [data-photos-sheet] .vm-ys-phact--go:not(:disabled):hover { background: #e3f4f0; }
        #vm-exams-ys [data-photos-sheet] .vm-ys-phact:not(.vm-ys-phact--go):not(:disabled):hover { background: #f1f5f9; }
        #vm-exams-ys [data-photos-sheet] .vm-ys-phadd-go:not(:disabled):hover { background: #d3ede6; color: #0f6d5c; }
    }
}