/* ====================================================================
   SCREEN 48 — A PHARMACY AND ITS LABORATORY, the desktop layer (desktop
   slice H5, 2026-10-10). pharmacy/counter.html only, linked after
   desktop/43-close.css.

   Frames: 48-d (Link your laboratory over de la Paix's counter, the one
   free listing chosen, the preview), 48-d-linked (Your laboratory /
   Laboratoire de la Paix · linked, the Unlink pill, the chevron kept) and
   48-d-states (two free listings, nothing chosen, the commit held; one
   linked elsewhere, grey; the server's refusal under the commit; Unlink
   busy) in docs/design/pharmacy/screens/48/desktop/frame.html; the sheet
   docs/design/pharmacy/screens/48/desktop/FACTS.md; brief
   briefs/2026-10-10_desktop-slice-H5.md, rules
   briefs/2026-10-10_desktop-build-rules-43-49.md.

   48d from 901 is a 480 dialog (shared §3's modifier, 29-counter §12's
   radius 20), centred: Cancel BESIDE the title (counter.js's placeFoot
   leaves this sheet alone), the listings one radio group of 60 rows, the
   helper, the preview (08-d's door: "Our laboratory" over a white card
   naming the laboratory), then a foot ruled edge to edge with the commit
   full width and the server's refusal under it. Each section pads itself
   (24 in), so the dialog itself carries no padding.

   The sheet's rules are scoped by its own hook, [data-link-sheet] (the
   head; the rest are its siblings), and the host by :has() of it: the
   counter's one sheet host also carries 29c, the landmark, About us,
   Photos, 43b and 49. The linked row's rules by .vm-ct-door--link. 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; its body without a gap. ---- */
    #vm-ct .vm-sheet--ct.is-open:has([data-link-sheet]) {
        padding: 0 0 22px;
        gap: 0;
    }
    #vm-ct .vm-ct-sheet:has(> [data-link-sheet]) { gap: 0; }

    /* -- The head: the title at 22, Cancel beside it (a 44 pill). ------ */
    #vm-ct [data-link-sheet] {
        padding: 18px 18px 0 24px;
        gap: 10px;
    }
    #vm-ct [data-link-sheet] .vm-ct-stitle {
        font-size: 22px;
        letter-spacing: -.4px;
        color: #0f172a;
    }
    #vm-ct [data-link-sheet] .vm-ct-lk-cancel {
        height: 44px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
        color: #0f6d5c;
    }

    /* -- The listings: one radio group of 60 rows, then the helper. ---- */
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick {
        padding: 12px 24px 0;
        gap: 8px;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-rows { gap: 6px; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row {
        min-height: 60px;
        padding: 8px 14px 8px 8px;
        border-radius: 14px;
        background: #f8fafc;
        gap: 12px;
        color: #0f172a;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row.is-on {
        background: #e3f4f0;
        box-shadow: inset 0 0 0 1.5px #0f6d5c;
    }
    /* Linked to another pharmacy: grey, not choosable. */
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row.is-taken {
        background: #f1f5f9;
        cursor: not-allowed;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row.is-taken .vm-ct-lk-tile { opacity: .55; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-name {
        font-size: 15px;
        color: #0f172a;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row.is-taken .vm-ct-lk-name { color: #64748b; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-meta {
        margin-top: 2px;
        font-size: 12.5px;
        color: #475569;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-sep { color: #94a3b8; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-taken {
        margin-top: 2px;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-check { border-color: #94a3b8; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row.is-on .vm-ct-lk-check { color: #0f6d5c; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row.is-taken .vm-ct-lk-check { border-color: #e2e8f0; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-help {
        padding: 0 4px;
        font-size: 12.5px;
        color: #475569;
        line-height: 1.45;
    }

    /* -- The preview: what customers see on the page, 08-d's door. ----- */
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev {
        margin: 14px 24px 0;
        padding: 12px;
        border-radius: 16px;
        background: #e3f4f0;
        gap: 9px;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-k {
        font-size: 12px;
        font-weight: 600;
        color: #0f6d5c;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-h {
        padding: 0 2px;
        font-size: 15px;
        color: #0f172a;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-card {
        padding: 10px 12px;
        border-radius: 12px;
        background: #fff;
        gap: 10px;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-tile--sm { border-radius: 11px; }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-t {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14.5px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.4;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-s {
        margin-top: 1px;
        font-size: 12.5px;
        color: #475569;
        line-height: 1.5;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-line {
        padding: 0 2px;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: #0f172a;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-prev .vm-ct-lk-prev-line i { color: #0f6d5c; }

    /* -- Not saved (29g's card): in the column, over the foot. --------- */
    #vm-ct [data-link-sheet] ~ [data-sheet-fail] { margin: 14px 24px 0; }

    /* -- The foot: ruled edge to edge, the commit full width; held grey
       until a laboratory is chosen (and while it saves). A failure hides
       the commit, and the empty foot goes with it. -------------------- */
    #vm-ct [data-link-sheet] ~ .vm-ct-sacts {
        margin-top: 20px;
        padding: 16px 24px 0;
        border-top: 1px solid #f0f2f4;
        gap: 10px;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-sacts:not(:has(> :not([hidden]))) { display: none; }
    #vm-ct [data-link-sheet] ~ .vm-ct-sacts > .vm-ct-lk-go {
        width: 100%;
        min-height: 52px;
        padding: 6px 20px;
        border-radius: 999px;
        background: #0f6d5c;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        gap: 8px;
        box-shadow: 0 8px 20px rgba(15, 109, 92, .28);
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-sacts > .vm-ct-lk-go:disabled {
        background: #e2e8f0;
        color: #64748b;
        box-shadow: none;
    }
    #vm-ct [data-link-sheet] ~ .vm-ct-sacts > .vm-ct-lk-go i { font-size: 13px; }
    /* The server's own sentence, under the commit. */
    #vm-ct [data-link-sheet] ~ .vm-ct-lk-fielderr {
        margin: 10px 0 0;
        padding: 0 26px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
    }

    /* -- 48-d-linked: the row opens the lab's page; the Unlink pill,
       then the chevron, a door like the others. Busy, the pill fades. -- */
    #vm-ct [data-doors] .vm-ct-door--link > .vm-ct-chev {
        width: 16px;
        flex-shrink: 0;
        text-align: right;
    }
    #vm-ct [data-doors] .vm-ct-door--link > .vm-ct-unlink:disabled {
        opacity: .6;
        cursor: default;
    }

    @media (hover: hover) {
        #vm-ct [data-link-sheet] .vm-ct-lk-cancel:hover { background: #e3f4f0; }
        #vm-ct [data-link-sheet] ~ .vm-ct-lk-pick .vm-ct-lk-row:not(.is-taken):hover { background: #e3f4f0; }
        #vm-ct [data-link-sheet] ~ .vm-ct-sacts > .vm-ct-lk-go:not(:disabled):hover { background: #0c5b4c; }
        #vm-ct [data-doors] .vm-ct-door--link > .vm-ct-unlink:not(:disabled):hover { background: #e2e8f0; }
    }
}