/* ====================================================================
   SCREEN 50 — MESSAGES, THE DESK FROM 901 (slice M50b, 2026-10-10):
   what 21 does beside the 440 panel a visit's thread docks in (the
   counter's 50-d-counter, carried to the desk).
   Contract: docs/design/pharmacy/briefs/2026-10-10_screen-50-contract.md
   (C4, C6); sheet: docs/design/pharmacy/screens/50/FACTS.md (50d,
   50-d-counter). The panel itself, the door and the phone's sheet are
   css/exams/50-thread-host.css; the thread is 50-messages.css.

   The root carries `has-mh` while the panel is docked (js/exams/desk.js):
   the band and the body take calc(100% - 440px), 24 in from the window;
   from 1120 the body is one column (the list, then the column's card and
   Coming days under it: never a hidden card); below 1120 the band is one
   column and a ledger row lays its cells under the name (whatever fits).
   The visit's row and card wear the 2px ring (`is-mh-open`).

   Every rule inside a min-width block; literal values; no sideways
   scroll; teal only.
   ==================================================================== */

@media (min-width: 901px) {

    #vm-exams-desk.has-mh > .vm-ex-dk-band,
    #vm-exams-desk.has-mh > .vm-ex-dk-body {
        box-sizing: border-box;
        width: calc(100% - 440px);
        max-width: none;
        margin: 0;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* The ring: the card, lifted; the ledger row, inside its hairlines. */
    #vm-exams-desk .vm-ex-dk-card.is-mh-open {
        box-shadow: 0 0 0 2px #0f6d5c, 0 10px 28px rgba(16, 24, 40, .08);
    }
    #vm-exams-desk .vm-ex-dk-row.is-mh-open { box-shadow: inset 0 0 0 2px #0f6d5c; }
}

@media (min-width: 901px) and (max-width: 1119.98px) {

    /* The band in one column: the right block under the state. */
    #vm-exams-desk.has-mh > .vm-ex-dk-band {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "exit"
            "title"
            "closed"
            "state"
            "reopen"
            "side";
        grid-template-rows: auto;
    }
    #vm-exams-desk.has-mh .vm-ex-dk-side { align-self: stretch; margin-top: 20px; }

    /* A ledger row in what is left: the name and the money on top, then
       "For …", the typed names, the reference, what they were told and
       the quiet line, each on its own line under the name. */
    #vm-exams-desk.has-mh .vm-ex-dk-list > .vm-ex-dk-row,
    #vm-exams-desk.has-mh .vm-dk-ask > .vm-dk-head {
        grid-template-columns: 40px minmax(0, 1fr) auto 14px;
        grid-template-areas:
            "tile name  money chev"
            "tile for   money chev"
            "tile names names chev"
            "tile ref   ref   chev"
            "tile told  told  chev"
            "tile line  line  chev";
    }
    #vm-exams-desk.has-mh :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-for { margin-left: 0; }
    #vm-exams-desk.has-mh :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-ref,
    #vm-exams-desk.has-mh :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-told { margin-top: 2px; }
}

@media (min-width: 1120px) {

    /* One column beside the panel: the list, then the column under it. */
    #vm-exams-desk.has-mh > .vm-ex-dk-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 36px;
    }
}