/* ====================================================================
   SCREEN 07 — SEND A PRESCRIPTION, THE DESKTOP LAYER (desktop slice D3,
   2026-10-08)

   Frames built: 07-d (7b, two pages, 1280), 07-d-start (no page yet),
   07-d-sent (7c), 07-d-pick (the Change dialog), 07-d-viewer (a page full
   size), 07-d-narrow (1000), 07-d-states. Source: docs/design/pharmacy/
   screens/07/desktop/{README.md,frame.html} and the two Screen 07 records
   in screens/desktop-01-14/records/ (work order + design pass, folded;
   user decisions 1 and 2 settled).

   Tiers: >=901 ONE page (no camera page: js shows 7b's card from the
   start), the head (the route's exit, "Send a prescription", the
   attached line as its thread), the pages card (the 340 frame beside the
   rail), the details card, the 480 Change dialog, the full-window viewer;
   901-1119 the counter band, the paper fact last, Send in D0's fixed foot
   bar; >=1120 the sticky 340 card (who reads it, the paper fact, Send) and
   7c's side card (D0's head + the call). The phone (<=900) is untouched:
   every rule sits inside a min-width query and the frame is built by
   js/pharmacy/task-frame.js only from 901.

   Load order: app.css -> desktop/shared.css -> this file. Class prefix
   .vm-sp- (and .vm-sw- for the picker rows 07 borrows from 04b). Since
   slice D7 the side card's shell, the band head (7c, 901-1119), the store
   tile, the failure line and the number under Call are shared.css's
   (.vm-dt-side-shell, .vm-dt-side-head--band, .vm-dt-cover-tile,
   .vm-dt-card-fail, .vm-dt-callnum), set by prescription.js; the closed
   sheet too.

   Sections: 1 page frame + head · 2 the pages card · 3 the details card ·
   4 the 901-1119 tier (band, paper, foot bar) · 5 the side card (7b) ·
   6 7c and the read view · 7 the Change dialog · 8 the viewer · 9 states.
   ==================================================================== */


/* ====================================================================
   1. PAGE FRAME + HEAD (>=901)
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-cols { padding-top: 12px; padding-bottom: 120px; }
    .vm-sp-main { display: flex; flex-direction: column; min-width: 0; }
    .vm-sp-rev,
    .vm-sp-done { flex: none; }
    .vm-sp-top { position: static; z-index: auto; background: transparent; }
    .vm-sp-head {
        background: transparent;
        border-bottom: 0;
        padding: 0;
        gap: 0;
    }
    /* The route's exit replaces "Photograph": there is no camera page. */
    .vm-sp-rev [data-to-capture] { display: none; }
    .vm-sp-back { font-size: 13.5px; gap: 7px; }
    .vm-sp-back i { font-size: 14px; }
    .vm-sp-title {
        margin-top: 8px;
        font-size: 36px;
        letter-spacing: -1.1px;
        line-height: 1.08;
    }
    /* The sub line goes from 901 (design pass 2); 7c keeps its reference. */
    .vm-sp-rev [data-rev-sub] { display: none; }
    .vm-sp-done .vm-sp-sub { margin-top: 8px; font-size: 14px; color: #64748b; }
    .vm-sp-done .vm-sp-reflink { color: #0f6d5c; font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* The attached line, the head's thread. */
    .vm-sp-dtattach { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
    .vm-sp-dtattach[hidden] { display: none; }
    .vm-sp-dtattach-tile {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        box-shadow: inset 0 0 0 1px #e2e8f0;
        color: #94a3b8;
        font-size: 17px;
    }
    .vm-sp-dtattach-main { min-width: 0; }
    .vm-sp-dtattach-lead {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12.5px;
        font-weight: 700;
        color: #1b6fa8;
    }
    .vm-sp-dtattach-lead i { font-size: 11px; }
    .vm-sp-dtattach-name {
        margin-top: 2px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.25;
        color: #0f172a;
    }

    .vm-sp-body { flex: none; padding: 0; margin-top: 18px; gap: 16px; }
    .vm-sp-none { padding: 0; font-size: 14px; color: #475569; }
    #vm-sp > .vm-sp-cols .vm-loading { padding: 0; font-size: 14px; color: #64748b; }
}

@media (min-width: 1120px) {
    .vm-sp-cols { padding-bottom: 64px; }
    .vm-sp-title { margin-top: 12px; font-size: 40px; letter-spacing: -1.2px; }
    .vm-sp-body { margin-top: 24px; }
}


/* ====================================================================
   2. THE PAGES CARD (design pass 1): the chosen page in a 340 frame,
   "Page N of M" + Retake · Remove under it; the pages + Add page three
   across beside it. Empty (07-d-start): 7a's two lines and "Choose a
   photo". A photo held over the card lights it.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-pagescard { padding: 22px 28px 24px; transition: box-shadow .16s ease, background-color .16s ease; }
    .vm-sp-pagescard .vm-sp-cardtitle { font-size: 20px; letter-spacing: -.4px; }
    .vm-sp-pagescard .vm-sp-cardmeta { font-size: 13px; color: #64748b; }

    .vm-sp-dtpages {
        margin-top: 18px;
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 28px;
        align-items: start;
    }
    .vm-sp-look { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .vm-sp-lookframe {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 440px;
        padding: 0;
        overflow: hidden;
        border-radius: 14px;
        background: #f7f6f2;
        box-shadow: inset 0 0 0 1px #e2e8f0;
    }
    .vm-sp-lookimg { width: 100%; height: 100%; object-fit: contain; display: block; }
    .vm-sp-lookframe .vm-sp-tileblank i { font-size: 28px; }
    .vm-sp-lookframe .vm-sp-ring { width: 64px; height: 64px; }
    .vm-sp-lookframe .vm-sp-tileover { font-size: 14px; }
    .vm-sp-lookframe:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    .vm-sp-lookfoot { display: flex; align-items: center; gap: 8px; }
    .vm-sp-lookcount {
        flex: 1;
        min-width: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        color: #0f172a;
        white-space: nowrap;
    }
    .vm-sp-lookact {
        height: 44px;
        padding: 0 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #334155;
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
    }
    .vm-sp-lookact i { font-size: 12px; }

    /* The rail: every page + Add page, three across (no scroll). */
    .vm-sp-dtrail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 12px;
        align-content: start;
    }
    .vm-sp-dtrail .vm-sp-page { width: auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    .vm-sp-dtrail .vm-sp-tile,
    .vm-sp-dtrail .vm-sp-add {
        width: 100%;
        height: 138px;
        border: 0;
        border-radius: 10px;
    }
    .vm-sp-dtrail .vm-sp-tile { box-shadow: inset 0 0 0 1px #e2e8f0; }
    .vm-sp-dtrail .vm-sp-tile.is-look { box-shadow: 0 0 0 2px #16a085, 0 0 0 6px #e3f4f0; }
    .vm-sp-dtrail .vm-sp-pagecap { margin-top: 0; font-size: 12.5px; color: #475569; }
    .vm-sp-dtrail .vm-sp-tile.is-look + .vm-sp-pagecap { font-weight: 700; color: #0f6d5c; }
    /* Add page: a solid 1.5 edge (no dashes), the image glyph. */
    .vm-sp-dtrail .vm-sp-add {
        gap: 8px;
        background: #f8fafc;
        box-shadow: inset 0 0 0 1.5px #cbd5e1;
        color: #0f6d5c;
        font-size: 13px;
    }
    .vm-sp-pagesnote { margin-top: 14px; }

    /* Empty: 07-d-start. */
    .vm-sp-dtempty {
        margin-top: 18px;
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 36px;
        align-items: center;
        padding: 28px 36px;
        border-radius: 16px;
        background: #f8fafc;
        box-shadow: inset 0 0 0 1.5px #cbd5e1;
        transition: box-shadow .16s ease, background-color .16s ease;
    }
    /* The paper, drawn: a sheet with ruled lines (no asset). */
    .vm-sp-dtpaper {
        display: block;
        height: 184px;
        border-radius: 4px;
        transform: rotate(-2deg);
        background:
            linear-gradient(#d8d4cb, #d8d4cb) 16px 20px / 58% 8px no-repeat,
            repeating-linear-gradient(180deg, #dcd8cf 0 2px, transparent 2px 13px) 16px 52px / calc(100% - 32px) 62px no-repeat,
            repeating-linear-gradient(180deg, #dcd8cf 0 2px, transparent 2px 13px) 16px 128px / 60% 26px no-repeat,
            #f7f6f2;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
    }
    .vm-sp-dtempty-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
    .vm-sp-dtempty-why {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -.4px;
        line-height: 1.25;
        color: #0f172a;
    }
    .vm-sp-dtempty-hint { margin-top: 6px; font-size: 14px; line-height: 1.5; color: #475569; }
    .vm-sp-dtchoose {
        margin-top: 20px;
        height: 48px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        gap: 9px;
        border-radius: 999px;
        background: #1b6fa8;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 6px 16px rgba(27, 111, 168, .24);
    }
    .vm-sp-dtchoose i { font-size: 13px; }
    .vm-sp-dtchoose:focus-visible { outline: 2px solid #1b6fa8; outline-offset: 2px; }

    /* A photo held over the card: it lights (07-d-states). */
    .vm-sp-pagescard.is-over .vm-sp-dtempty,
    .vm-sp-pagescard.is-over .vm-sp-dtpages {
        background: #e3f4f0;
        box-shadow: inset 0 0 0 1.5px #16a085;
        border-radius: 16px;
    }

    @media (hover: hover) {
        .vm-sp-lookframe:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 2px #16a085; }
        .vm-sp-dtrail .vm-sp-tile:not(.is-look):hover { box-shadow: inset 0 0 0 2px #16a085; }
        .vm-sp-dtrail .vm-sp-add:hover { background: #e3f4f0; box-shadow: inset 0 0 0 1.5px #16a085; }
        .vm-sp-lookact:hover { box-shadow: inset 0 0 0 1.5px #cbd5e1; color: #0f172a; }
        .vm-sp-dtchoose:hover { box-shadow: 0 8px 22px rgba(27, 111, 168, .34); }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-sp-pagescard,
        .vm-sp-dtempty { transition: none; }
    }
}


/* ====================================================================
   3. THE DETAILS CARD: three labelled rows (This prescription is for ·
   Phone number · Note for the pharmacy (optional)), 05-d's idiom.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-details { padding: 2px 28px; }
    .vm-sp-drow {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 24px;
        padding: 22px 0;
    }
    .vm-sp-drow + .vm-sp-drow { border-top: 1px solid #eef1f5; }
    .vm-sp-dlabel {
        padding-top: 3px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.3;
        color: #0f172a;
    }
    .vm-sp-dlabel span {
        display: block;
        margin-top: 2px;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        color: #64748b;
    }
    .vm-sp-dbody { min-width: 0; }
    .vm-sp-details .vm-sp-pills {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        max-width: 360px;
        margin-top: 0;
    }
    .vm-sp-details .vm-sp-pill { font-size: 14px; color: #334155; }
    .vm-sp-details .vm-sp-pill.is-on { color: #fff; }
    /* Someone else: the name and age side by side, labels shown. */
    .vm-sp-details .vm-sp-dbody > .vm-sp-form {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 6px 12px;
        margin-top: 16px;
    }
    .vm-sp-details .vm-sp-dbody > .vm-sp-form > .vm-sp-req { grid-column: 1 / -1; }
    .vm-sp-details .vm-sp-fieldlabel { font-size: 12.5px; color: #334155; margin-bottom: 6px; }
    .vm-sp-details .vm-sp-input {
        min-height: 48px;
        border-radius: 12px;
        border-color: #e2e8f0;
        background: #f8fafc;
        font-size: 14.5px;
    }
    .vm-sp-details .vm-sp-input:focus,
    .vm-sp-details .vm-sp-textarea:focus { outline: 0; border-color: #16a085; background: #fff; }
    /* The phone row: the number, its line, Change (mint); no tile. */
    .vm-sp-dbody--phone .vm-sp-row { gap: 14px; }
    .vm-sp-dbody--phone .vm-sp-row > i { display: none; }
    .vm-sp-dbody--phone .vm-sp-rowtitle { font-size: 15px; line-height: 1.35; white-space: nowrap; }
    .vm-sp-dbody--phone .vm-sp-rowsub { font-size: 13px; color: #64748b; line-height: 1.4; }
    .vm-sp-details .vm-sp-change { padding: 0 18px; background: #e3f4f0; color: #0f6d5c; font-size: 13.5px; }
    /* The phone form: the row's label names it; the field keeps its own
       label for the reader, visually hidden. */
    .vm-sp-dbody--phone .vm-sp-form { margin-top: 0; max-width: 360px; gap: 6px; }
    .vm-sp-dbody--phone .vm-sp-fieldlabel {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .vm-sp-dbody--phone .vm-sp-hint { font-size: 13px; color: #64748b; }
    .vm-sp-details .vm-sp-req { font-size: 12.5px; }
    .vm-sp-details .vm-sp-textarea {
        min-height: 88px;
        border-radius: 12px;
        border-color: #e2e8f0;
        background: #f8fafc;
        padding: 12px 14px;
    }

    @media (hover: hover) {
        .vm-sp-details .vm-sp-pill:not(.is-on):hover,
        .vm-sp-details .vm-sp-change:hover { box-shadow: inset 0 0 0 1.5px #16a085; }
    }
}

@media (min-width: 1120px) {
    .vm-sp-drow { grid-template-columns: 190px minmax(0, 1fr); }
}


/* ====================================================================
   4. 901-1119 (07-d-narrow): the counter band under the title, the page's
   cards in the phone's order, the paper fact last, Send in D0's fixed
   foot bar ("No payment now…" left, Send right).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-dtcounter {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 12px;
        align-items: center;
        padding: 12px 14px 14px;
        border-radius: 16px;
        background: #e3f4f0;
    }
    .vm-sp-dtcounter-top { display: contents; }
    .vm-sp-dtcounter-top .vm-sp-hllabel {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
    }
    .vm-sp-dtcounter-top .vm-sp-change { grid-column: 3; grid-row: 1 / span 2; }
    .vm-sp-dtcounter-id { display: contents; }
    .vm-sp-dtcounter-cover {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        object-fit: cover;
        box-shadow: 0 0 0 2px #fff;
    }
    .vm-sp-dtcounter-name { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; }
    .vm-sp-dtcounter-name .vm-sp-counter {
        display: inline;
        font-size: 16px;
        letter-spacing: -.3px;
    }
    .vm-sp-dtcounter-name .vm-sp-facts { display: inline; font-size: 12.5px; color: #0f6d5c; }
    .vm-sp-dtcounter-name .vm-sp-facts::before { content: " \00B7  "; }
    .vm-sp-change--hl { height: 44px; padding: 0 16px; background: #fff; color: #0f6d5c; font-size: 13.5px; }
    .vm-sp-dtprivacy {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: hidden;
        border-radius: 12px;
        background: #fff;
    }
    .vm-sp-dtprivacy .vm-sp-cardfoot { padding: 11px 12px; border-radius: 0; font-size: 13px; gap: 10px; }
    .vm-sp-dtprivacy .vm-sp-privacy {
        margin: 0;
        min-height: 44px;
        padding: 0 12px;
        border-left: 1px solid #eef1f5;
        border-radius: 0;
        background: transparent;
    }

    .vm-sp-body > .vm-sp-fact { padding: 13px 16px; }
    .vm-sp-fact p { font-size: 13px; font-weight: 600; line-height: 1.45; }

    /* The foot bar. */
    .vm-sp-foot.vm-dt-foot-bar {
        position: fixed;
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 16px;
    }
    .vm-sp-foot.vm-dt-foot-bar .vm-sp-send { width: auto; padding: 0 26px; flex-shrink: 0; }
    .vm-sp-foot.vm-dt-foot-bar .vm-sp-footsub { text-align: left; font-size: 13px; color: #475569; }

    /* Send: 52 blue; a Send with something missing is the grey pill; the
       busy one stays blue and dim (07-d-start, 07-d-states). */
    .vm-sp-send { white-space: nowrap; }
    .vm-sp-send[aria-disabled="true"]:not(.is-busy) {
        opacity: 1;
        background: #e2e8f0;
        color: #64748b;
        box-shadow: none;
    }
    .vm-sp-send.is-busy { opacity: .65; }
    @media (hover: hover) {
        .vm-sp-send:not([aria-disabled="true"]):hover { box-shadow: 0 8px 22px rgba(27, 111, 168, .34); }
    }
}


/* ====================================================================
   5. THE SIDE CARD (>=1120, 7b): "Read by" + Change on one row, the cover
   48 + name + counterFacts(), the privacy group, the paper fact above
   Send, Send 52 blue, "No payment now…". A failed send writes here.
   ==================================================================== */
@media (min-width: 1120px) {
    .vm-sp-side { margin-top: 56px; }
    .vm-sp-sidetop > .vm-sp-dtcounter {
        display: block;
        padding: 10px 14px 14px;
        border-radius: 0;
    }
    .vm-sp-sidetop .vm-sp-dtcounter-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .vm-sp-sidetop .vm-sp-dtcounter-top .vm-sp-hllabel { align-self: auto; font-size: 12.5px; }
    .vm-sp-sidetop .vm-sp-dtcounter-id { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
    .vm-sp-sidetop .vm-sp-dtcounter-name { min-width: 0; }
    .vm-sp-sidetop .vm-sp-dtcounter-name .vm-sp-counter { display: block; font-size: 17px; line-height: 1.25; }
    .vm-sp-sidetop .vm-sp-dtcounter-name .vm-sp-facts { display: block; margin-top: 2px; line-height: 1.35; }
    .vm-sp-sidetop .vm-sp-dtcounter-name .vm-sp-facts::before { content: none; }
    .vm-sp-sidetop .vm-sp-dtprivacy { display: block; margin-top: 14px; }
    .vm-sp-sidetop .vm-sp-dtprivacy .vm-sp-cardfoot { align-items: flex-start; line-height: 1.4; }
    .vm-sp-sidetop .vm-sp-dtprivacy .vm-sp-cardfoot i { margin-top: 3px; }
    .vm-sp-sidetop .vm-sp-dtprivacy .vm-sp-privacy { border-left: 0; border-top: 1px solid #eef1f5; }
    .vm-sp-sidetop > .vm-sp-req { padding: 12px 14px; border-bottom: 1px solid #eef1f5; font-size: 13px; }

    .vm-sp-sidepay { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
    .vm-sp-sidepay[hidden] { display: none; }
    .vm-sp-sidepaper .vm-sp-fact { border-radius: 12px; padding: 11px 13px; }
    #vm-sp .vm-sp-sidepay .vm-sp-foot {
        position: static;
        z-index: auto;
        padding: 0;
        border: 0;
        background: transparent;
        gap: 12px;
    }
    .vm-sp-sidepay .vm-sp-footsub { font-size: 12.5px; color: #475569; line-height: 1.45; }
    /* The failed line (D0's .vm-dt-card-fail) sits under Send (07-d-states). */
    .vm-sp-sidepay .vm-sp-sidefail { order: 2; }
    .vm-sp-sidepay .vm-sp-foot { order: 1; }

    /* 7c's side card: D0's head + the call as door rows. */
    .vm-sp-sidecalls { padding: 2px 18px 4px; }
    .vm-sp-sidecalls .vm-sp-door { padding: 14px 0; }
    .vm-sp-sidecalls .vm-sp-door + .vm-sp-door { border-top-color: #eef1f5; }
}


/* ====================================================================
   6. 7c AND THE READ VIEW (07-d-sent): one card in 06-d's idiom.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-sentcard { padding: 0; overflow: hidden; }
    .vm-sp-sentmain { padding: 22px 28px 26px; }
    .vm-sp-sentcard .vm-sp-hllabel { font-size: 12.5px; font-weight: 700; color: #0f6d5c; }
    .vm-sp-sentcard .vm-sp-with { margin-top: 4px; font-size: 26px; letter-spacing: -.6px; }
    .vm-sp-sentcard .vm-sp-withmeta { margin-top: 4px; font-size: 13px; color: #64748b; }
    .vm-sp-sentcard .vm-sp-sign {
        margin-top: 14px;
        max-width: 520px;
        padding: 10px 14px;
        gap: 10px;
        background: #f8fafc;
    }
    .vm-sp-sentcard .vm-sp-signwords { font-size: 13px; line-height: 1.45; }
    /* "What happens next": a strip of three (06's strip). */
    .vm-sp-sentcard .vm-sp-card {
        margin-top: 22px;
        padding: 20px 0 0;
        border-top: 1px solid #f0f2f4;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .vm-sp-sentcard .vm-sp-cardtitle { font-size: 15px; }
    .vm-sp-sentcard .vm-sp-steps {
        margin-top: 16px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .vm-sp-sentcard .vm-sp-step { min-width: 0; flex-direction: column; gap: 12px; }
    .vm-sp-sentcard .vm-sp-steprail { width: auto; flex-direction: row; align-items: center; }
    .vm-sp-sentcard .vm-sp-stepdot {
        width: 24px;
        height: 24px;
        font-size: 11.5px;
        color: #475569;
        background: #f1f5f9;
        box-shadow: inset 0 0 0 1.5px #e2e8f0;
    }
    .vm-sp-sentcard .vm-sp-stepdot--now { background: #1b6fa8; color: #fff; box-shadow: 0 0 0 4px #eef6fc; }
    .vm-sp-sentcard .vm-sp-steplink {
        flex: 1;
        width: auto;
        min-height: 0;
        height: 2px;
        margin: 0 10px;
        border-radius: 2px;
        background: #e2e8f0;
    }
    .vm-sp-sentcard .vm-sp-stepmain { padding: 0 16px 0 0; }
    .vm-sp-sentcard .vm-sp-step:last-child .vm-sp-stepmain { padding: 0 8px 0 0; }
    .vm-sp-sentcard .vm-sp-steptitle { font-size: 14px; line-height: 1.35; text-wrap: balance; }
    .vm-sp-sentcard .vm-sp-step:first-child .vm-sp-steptitle { font-weight: 700; }
    .vm-sp-sentcard .vm-sp-stepsub { margin-top: 3px; font-size: 13px; color: #64748b; line-height: 1.4; text-wrap: balance; }
    .vm-sp-sentcard .vm-sp-closing { margin-top: 16px; font-size: 13.5px; color: #334155; }
    /* Past `read`: where it is, one bordered row. */
    .vm-sp-sentcard .vm-sp-state {
        margin-top: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 18px;
        border-color: #e2e8f0;
        border-radius: 14px;
    }
    .vm-sp-sentcard .vm-sp-statetitle { font-size: 14px; }
    .vm-sp-sentcard .vm-sp-statelink { font-size: 13.5px; color: #0f6d5c; }

    /* The footed doors, side by side. */
    .vm-sp-sentdoors {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid #f0f2f4;
    }
    .vm-sp-sentdoors > .vm-sp-door:only-child { grid-column: 1 / -1; }
    .vm-sp-sentdoors .vm-sp-door { min-height: 60px; padding: 8px 28px; }
    .vm-sp-sentdoors .vm-sp-door + .vm-sp-door { border-top: 0; border-left: 1px solid #f0f2f4; }
    .vm-sp-sentdoors .vm-sp-doortile {
        width: 16px;
        height: auto;
        background: transparent;
        color: #475569;
    }
    .vm-sp-sentdoors [data-open-viewer] .vm-sp-doortile,
    .vm-sp-sentdoors [data-open-viewer] .vm-sp-doortitle,
    .vm-sp-sentdoors [data-open-viewer] > i { color: #1b6fa8; }
    .vm-sp-sentdoors .vm-sp-doorsub { font-size: 12px; color: #475569; }

    /* 901-1119: the band (D0's head in its band form) leads, the call
       cards sit under the card. */
    .vm-sp-dtcalls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .vm-sp-dtcalls > .vm-sp-door:only-child { grid-column: 1 / -1; }
    .vm-sp-dtcalls .vm-sp-door {
        padding: 14px 18px;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-sp-dtcalls .vm-sp-door + .vm-sp-door { border-top: 0; }

    /* The number under Call (approved: a laptop cannot dial): D0's
       .vm-dt-callnum, on its own line. */
    .vm-sp-doornum { display: block; margin-top: 3px; }
    .vm-sp-sidecalls .vm-sp-doortile,
    .vm-sp-dtcalls .vm-sp-doortile { width: 40px; height: 40px; border-radius: 12px; }
    .vm-sp-sidecalls .vm-sp-doortitle,
    .vm-sp-dtcalls .vm-sp-doortitle { font-size: 14px; }
    .vm-sp-sidecalls .vm-sp-doorsub,
    .vm-sp-dtcalls .vm-sp-doorsub { font-size: 12.5px; color: #64748b; }

    @media (hover: hover) {
        .vm-sp-sentdoors .vm-sp-door:hover { background: #f8fafc; }
    }
}


/* ====================================================================
   7. THE CHANGE DIALOG (07-d-pick): D0's 480 dialog (js sets
   .vm-sheet--dt-480 from 901), 04-d-pick's rows with covers. No X;
   Escape and the scrim close it, as on the phone.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sp .vm-sheet--bk.is-open { padding-top: 0; }
    #vm-sp .vm-sheet .vm-sw-head { padding: 26px 24px 0; }
    #vm-sp .vm-sheet .vm-sw-name { font-size: 22px; letter-spacing: -.4px; }
    #vm-sp .vm-sheet .vm-sw-meta { font-size: 14px; color: #475569; max-width: 380px; }
    #vm-sp .vm-sheet .vm-sw-body { padding: 16px 20px 20px; }
    #vm-sp .vm-sw-box--picks { border-radius: 14px; overflow: hidden; }
    #vm-sp .vm-sw-pick {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 2px;
        align-items: center;
        min-height: 64px;
        padding: 10px 14px;
    }
    #vm-sp .vm-sw-pick-cover {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        object-fit: cover;
    }
    #vm-sp .vm-sw-pick-cover.vm-dt-cover-tile { background: #f1f5f9; color: #94a3b8; font-size: 15px; }
    #vm-sp .vm-sw-pick-name { grid-column: 2; align-self: end; font-size: 14.5px; }
    #vm-sp .vm-sw-pick-meta { grid-column: 2; align-self: start; font-size: 12.5px; color: #475569; }
    #vm-sp .vm-sw-pick-chev { grid-column: 3; grid-row: 1 / span 2; font-size: 13px; color: #0f6d5c; }
    #vm-sp .vm-sw-none { padding: 12px 14px; border-radius: 12px; background: #f8fafc; font-size: 13.5px; font-weight: 600; color: #0f172a; }
    @media (hover: hover) {
        #vm-sp .vm-sw-pick:not(.is-closed):hover { background: #f4fbf9; }
    }
}


/* ====================================================================
   8. THE VIEWER (07-d-viewer): the dark full window, the page large, the
   arrows at the sides (the keys already page it), Retake · Remove at the
   foot while reviewing.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-viewer { background: #0b1220; }
    .vm-sp-vhead { padding: 16px 24px; }
    .vm-sp-vcount { font-size: 14px; font-weight: 700; color: #fff; }
    .vm-sp-vstage { padding: 8px 120px; }
    .vm-sp-vimg { box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
    .vm-sp-vnav {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 32px;
        pointer-events: none;
    }
    .vm-sp-vstep {
        width: 52px;
        height: 52px;
        border-radius: 999px;
        pointer-events: auto;
    }
    .vm-sp-vacts { justify-content: center; padding: 14px 24px 24px; }
    .vm-sp-vact { flex: 0 0 auto; padding: 0 20px; }
    .vm-sp-vclose:focus-visible,
    .vm-sp-vstep:focus-visible,
    .vm-sp-vact:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    @media (hover: hover) {
        .vm-sp-vstep:hover,
        .vm-sp-vact:hover,
        .vm-sp-vclose:hover { background: rgba(255, 255, 255, .2); }
    }
}


/* ====================================================================
   9. STATES — the pages card's quiet line, the required lines.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sp-pagesnote { font-size: 13px; font-weight: 600; color: #0f172a; }
}