/* ====================================================================
   SCREEN 49 — THE PHOTO GALLERY, the desktop layer (desktop slice H6,
   2026-10-10). pharmacy/counter.html only, linked after
   desktop/48-link.css.

   Frames: 49-d (Photos open over Your counter, de la Paix's five photos,
   the list scrolling, the foot pinned) and 49-d-states (none, 0 of 8;
   uploading and failed; unreadable; refused; full, 8 of 8; saving) in
   docs/design/pharmacy/screens/49/desktop/frame.html; 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.

   The Photos sheet from 901 is a 480 dialog in 29-d-day's family (shared
   §3's modifier, 29-counter §12's radius 20 and window - 96): 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 — one box that scrolls (counter.js placeGallery makes
   it, .vm-ct-gl-scroll); the foot (.vm-ct-gl-foot) ruled and pinned
   under it, Cancel | Save at the right. A row is the code's row: the 76
   thumbnail, the caption field of 44, then the quiet acts and n/40 at
   the right; the first row's "Main photo" tag (28, mint) where the
   others offer "Make it the main photo".

   Every rule is scoped by the gallery's own hooks: the host and its body
   by :has(.vm-ct-gl-foot) (the counter's one sheet host also carries 29c,
   the landmark, About us, 43b and 48d), the parts by their .vm-ct-gl-*
   classes. 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 29 §12's window - 96). ------------- */
    #vm-ct .vm-sheet--ct.is-open:has(.vm-ct-gl-foot) {
        padding: 0;
        gap: 0;
        overflow: hidden;
    }
    #vm-ct .vm-ct-sheet:has(> .vm-ct-gl-foot) {
        flex: 1 1 auto;
        min-height: 0;
        gap: 0;
    }

    /* -- The head: the title at 22 (29 §12), its line at 13.5. -------- */
    #vm-ct .vm-ct-sheet:has(> .vm-ct-gl-foot) > .vm-ct-shead {
        flex-shrink: 0;
        padding: 22px 24px 0;
    }
    #vm-ct .vm-ct-gl-sub {
        flex-shrink: 0;
        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-ct .vm-ct-gl-scroll {
        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-ct .vm-ct-gl-scroll > * { flex-shrink: 0; }

    /* -- A row: 8 in, radius 16, the canvas under a 1px grey rule. ----- */
    #vm-ct .vm-ct-gl-row {
        padding: 8px;
        gap: 12px;
        border-radius: 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }
    #vm-ct .vm-ct-gl-row:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-ct .vm-ct-gl-thumb {
        width: 76px;
        height: 76px;
        border-radius: 12px;
        background: #f1f5f9;
    }
    #vm-ct .vm-ct-gl-cap {
        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), then n/40 at the right; the first row's tag. */
    #vm-ct .vm-ct-gl-acts { column-gap: 0; margin-left: -8px; }
    #vm-ct .vm-ct-gl-act {
        min-width: 44px;
        height: 44px;
        padding: 0 8px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 700;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-gl-act--rm { color: #475569; }
    #vm-ct .vm-ct-gl-act:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    #vm-ct .vm-ct-gl-n {
        margin-left: auto;
        padding-right: 2px;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
    }

    /* On its way, and failed: the line at 13, the bar teal on grey. */
    #vm-ct .vm-ct-gl-say {
        padding-top: 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
        color: #475569;
    }
    #vm-ct .vm-ct-gl-say.is-failed { color: #0f172a; }
    #vm-ct .vm-ct-gl-bar { height: 4px; margin: 6px 0 2px; background: #e2e8f0; }
    #vm-ct .vm-ct-gl-barfill { background: #0f6d5c; }

    /* -- Under the rows: the refusal line, the add act, the helper. ---- */
    #vm-ct .vm-ct-gl-err {
        margin: 0;
        padding: 0 2px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
    }
    #vm-ct .vm-ct-gl-err:not([hidden]) { display: flex; align-items: flex-start; gap: 8px; }
    #vm-ct .vm-ct-gl-err > i { flex-shrink: 0; margin-top: 4px; font-size: 12px; color: #475569; }
    #vm-ct .vm-ct-gl-add { gap: 12px; }
    #vm-ct .vm-ct-gl-addbtn {
        width: auto;
        height: 44px;
        min-height: 44px;
        padding: 0 20px;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
        font-weight: 700;
        gap: 8px;
        white-space: nowrap;
    }
    #vm-ct .vm-ct-gl-addbtn i { font-size: 12.5px; }
    /* The device's file picker, not the camera: the picture glyph. */
    #vm-ct .vm-ct-gl-addbtn .fa-camera::before { content: "\f03e"; }
    #vm-ct .vm-ct-gl-addbtn:disabled {
        background: #f1f5f9;
        color: #64748b;
        cursor: not-allowed;
    }
    #vm-ct .vm-ct-gl-addbtn:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-ct .vm-ct-gl-count {
        font-size: 13px;
        font-weight: 400;
        color: #475569;
    }
    #vm-ct .vm-ct-gl-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; 29g's
       failure over Cancel | Save at the right. ------------------------- */
    #vm-ct .vm-ct-gl-foot {
        position: static;
        flex-shrink: 0;
        margin: 10px 0 0;
        padding: 12px 24px 20px;
        gap: 10px;
        border-top: 1px solid #f0f2f4;
        background: #fff;
    }
    #vm-ct .vm-ct-gl-foot > .vm-ct-sacts--row { margin-top: 0; }
    /* Cancel: the quiet teal word, 29-counter.css §12's foot Cancel. */
    #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-set {
        height: 48px;
        min-height: 48px;
        padding: 0 24px;
        font-size: 14.5px;
    }
    /* Held until something changed (49-d-states): grey on grey. */
    #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-set:disabled {
        background: #e2e8f0;
        color: #64748b;
        box-shadow: none;
    }
    /* Saving: the solid kept, faded, inert (the words stay Save). */
    #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-set[aria-busy="true"] {
        background: #0f6d5c;
        color: #fff;
        opacity: .75;
        box-shadow: none;
        cursor: progress;
    }
    #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-set:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    @media (hover: hover) {
        #vm-ct .vm-ct-gl-act:not(:disabled):hover { background: #e3f4f0; }
        #vm-ct .vm-ct-gl-act--rm:not(:disabled):hover { background: #f1f5f9; }
        #vm-ct .vm-ct-gl-addbtn:not(:disabled):hover { background: #d3ede6; }
        #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-set:not(:disabled):hover { background: #0c5b4c; }
    }
}