/* ====================================================================
   SCREEN 22 — MY LISTING, the desktop layer (desktop slice D13,
   2026-10-09). exams/listing.html only, linked after desktop/shared.css;
   every rule is scoped to #vm-exams-listing.

   Frames: 22-d (22a), 22-d-pick (22b), 22-d-publish (22c), 22-d-narrow
   (1000), 22-d-states, in docs/design/pharmacy/screens/22/desktop/
   frame.html; records screens/desktop-15-25/records/Screen 22 - desktop
   work order.md and design pass.md (approved and folded, both calls with
   it). Brief: briefs/2026-10-09_desktop-slice-D13.md.

   Tiers: >=901 the layer (the 901-1119 block: one column at 908, Your
   page in two halves, Publish in the foot bar) · >=1120 main | the 340
   column (22a: Your page, scrolling with the page; 22b: "The exam you
   pick decides"; 22c: the says card with Publish at its foot, sticky).

   Uses desktop/shared.css: §12 the owner header (js/exams/owner-head.js,
   filled by listing.js), §13 the one-row band (22a) and the flow band
   (22b, 22c), §14 the ledger in its mint form (22a's rows: the list
   .vm-dt-ledger.vm-dt-ledger--mint, each row .vm-dt-ledger-row with its
   tile, main, name and chevron; D14: the mint tile, the name at 700, the
   teal chevron, the 18 radius and the #f0f2f4 hairline are shared; this
   file sets the four columns, the name at 16, the grey line and the 17
   figure, whose FCFA keeps its own face), §15 the quiet act (Remove) and
   the dialog acts
   in a row (the landmark dialog), §17 the labelled rows (22c's card and
   its field blocks, every control in the control column; 22-d-publish's
   rows sit 22 in, not §17's 20), §3 the 480 dialog, §2's owner bar (the
   publish bar's 860 column, 901-1119), §9's state cards and Try again,
   §13's identity read but not drawn (.vm-dt-band-id--hidden). All
   shared since D14 save the ledger's columns and the labelled rows'
   insets.
   listing.js moves 22c's match into a labelled row of its own from 901,
   and from 1120 the decides block (22b) and the says card with the
   publish bar's content (22c) into a column; this file lays them out.

   Sections, in the frame's order:
     1. The header and the bands
     2. 22a: the body, Exams and services (the ledger), Your page
     3. 22b: the field, the suggestions, the decides block
     4. 22c: the labelled rows, the says card, the publish bar
     5. The landmark dialog
     6. States
     7. Hover
     8. The narrow window (901-1119)
     9. The side tier (1120 and up)
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE HEADER AND THE BANDS
       The owner header is shared.css §12 (the page fills it). Emptied
       (no structure: 404 / 403), it is not drawn even when the tier
       changes under it. The phone's tab bar and its spacer give way to
       the header's tabs.
       ================================================================ */
    #vm-exams-listing > .vm-dt-ohead:empty { display: none; }
    /* (The tab bar and its spacer: shared §2, since E10.) */

    /* -- 22a: the one-row band (§13). The state sentence is the
       headline, the compared line under it; the identity is the
       header's, kept for the reader of the page (the h1) but not drawn
       while a state sentence stands (§13's .vm-dt-band-id--hidden). With
       none (a failed read, no structure) the band reads "My listing" at
       the headline's size. */
    #vm-exams-listing .vm-ex-ls-band { row-gap: 0; }
    #vm-exams-listing .vm-ex-ls-band > * { grid-column: 1; }
    #vm-exams-listing .vm-ex-ls-id { min-height: 0; }
    #vm-exams-listing .vm-ex-ls-name {
        font-size: 36px;
        letter-spacing: -1.2px;
        line-height: 1.1;
    }
    #vm-exams-listing .vm-ex-ls-stateblock { max-width: 780px; gap: 0; }

    /* -- 22b / 22c: the flow band (§13): the glass exit "My listing" |
       the title; the name line under it is the header's. */
    #vm-exams-listing .vm-ex-ls-top {
        overflow: visible;
        border-top: 0;
        border-bottom: 0;
    }
    #vm-exams-listing .vm-ex-ls-toprow { flex-shrink: 0; }
    #vm-exams-listing .vm-ex-ls-title { margin-top: 0; }
    #vm-exams-listing .vm-ex-ls-sname { display: none; }

    /* ================================================================
       2. 22a — THE BODY, EXAMS AND SERVICES, YOUR PAGE (22-d)
       ================================================================ */
    #vm-exams-listing .vm-ex-ls-body,
    #vm-exams-listing .vm-ex-ls-pbody,
    #vm-exams-listing .vm-ex-ls-ebody {
        width: 100%;
        max-width: 908px;
        margin-left: auto;
        margin-right: auto;
        padding: 28px 24px 64px;
    }
    #vm-exams-listing .vm-ex-ls-body { gap: 36px; }
    #vm-exams-listing .vm-ex-ls-body > .vm-loading {
        padding: 4px 2px;
        font-size: 14px;
        color: #64748b;
    }

    /* -- The section: heading + sub | the solid Add pill on one row,
       then the two groups, each head on one line (the pass, change 1). */
    #vm-exams-listing .vm-ex-ls-sec {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 24px;
        row-gap: 24px;
        align-items: end;
    }
    #vm-exams-listing .vm-ex-ls-head {
        grid-column: 1;
        min-width: 0;
        gap: 4px;
        padding: 0;
    }
    #vm-exams-listing .vm-ex-ls-h {
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 1.25;
    }
    #vm-exams-listing .vm-ex-ls-headsub {
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    #vm-exams-listing .vm-ex-ls-add {
        grid-column: 2;
        width: auto;
        height: 52px;
        padding: 0 26px 0 22px;
        white-space: nowrap;
    }
    #vm-exams-listing .vm-ex-ls-group {
        grid-column: 1 / -1;
        min-width: 0;
        gap: 10px;
        margin-top: 0;
    }
    #vm-exams-listing .vm-ex-ls-ghead {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        padding: 0 2px;
    }
    #vm-exams-listing .vm-ex-ls-gtitle { font-size: 15px; line-height: 1.35; }
    #vm-exams-listing .vm-ex-ls-gsub {
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
    }

    /* -- The ledger (§14's mint form): tile | the typed name over the
       grey line | the figure, 112 | the chevron; rows 64. */
    #vm-exams-listing .vm-ex-ls-row {
        grid-template-columns: 40px minmax(0, 1fr) 112px 14px;
        line-height: normal;
    }
    #vm-exams-listing .vm-ex-ls-door .vm-ex-ls-tile,
    #vm-exams-listing .vm-ex-ls-srow .vm-ex-ls-tile,
    #vm-exams-listing .vm-ex-ls-none .vm-ex-ls-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    #vm-exams-listing .vm-ex-ls-row-name { font-size: 16px; }
    #vm-exams-listing .vm-ex-ls-row-sub {
        margin-top: 2px;
        font-size: 13.5px;
        line-height: 1.4;
        color: #64748b;
    }
    #vm-exams-listing .vm-ex-ls-price { justify-content: flex-end; }
    #vm-exams-listing .vm-ex-ls-price-num {
        font-size: 17px;
        letter-spacing: -.3px;
        color: #0f172a;
    }
    #vm-exams-listing .vm-ex-ls-price-cur {
        font-size: 10.5px;
        color: #64748b;
    }
    #vm-exams-listing .vm-ex-ls-ask {
        text-align: right;
        font-size: 13.5px;
        color: #475569;
    }

    /* -- Your page: the photograph 200 (its own ground when there is
       none), how people find the door, the hours door. */
    #vm-exams-listing .vm-ex-ls-photo { height: 200px; }
    #vm-exams-listing .vm-ex-ls-photo-go {
        right: 12px;
        bottom: 12px;
        padding: 0 16px;
        font-size: 13.5px;
    }
    #vm-exams-listing .vm-ex-ls-photo-fault {
        padding: 12px 16px 0;
        font-size: 13px;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-findwrap { padding: 16px 16px 0; }
    #vm-exams-listing .vm-ex-ls-find { padding: 14px 16px 16px; }
    #vm-exams-listing .vm-ex-ls-find-k { font-size: 12px; }
    #vm-exams-listing .vm-ex-ls-landmark {
        margin-top: 5px;
        font-size: 19px;
    }
    #vm-exams-listing .vm-ex-ls-address {
        margin-top: 6px;
        font-size: 13px;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-landmark-go { margin-top: 14px; }
    #vm-exams-listing .vm-ex-ls-door {
        margin-top: 16px;
        min-height: 64px;
        padding: 10px 16px;
        border-top-color: #f0f2f4;
    }
    #vm-exams-listing .vm-ex-ls-door-t { font-size: 14.5px; }
    #vm-exams-listing .vm-ex-ls-door-s {
        font-size: 13px;
        color: #64748b;
    }

    /* ================================================================
       3. 22b — WHICH EXAM IS IT (22-d-pick)
       The field at 60; "Which exam is it?" at 21 over one card of
       ledger rows, each the exam | its preparation in its own column, so
       "No fasting" and "Nothing to eat for 8 hours before" read down one
       line of sight; "None of these" always last.
       ================================================================ */
    #vm-exams-listing .vm-ex-ls-pbody { gap: 32px; }
    #vm-exams-listing .vm-ex-ls-pbody > .vm-ex-ls-fblock { gap: 8px; }
    #vm-exams-listing .vm-ex-ls-flabel--pad {
        font-size: 13.5px;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-qbox {
        height: 60px;
        border-radius: 16px;
        padding: 0 8px 0 18px;
    }
    #vm-exams-listing .vm-ex-ls-qbox:focus-within { box-shadow: 0 0 0 4px rgba(22, 160, 133, .12); }
    #vm-exams-listing .vm-ex-ls-q { font-size: 17px; }

    #vm-exams-listing .vm-ex-ls-pcard {
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #vm-exams-listing .vm-ex-ls-pcard-top { padding: 0; }
    #vm-exams-listing .vm-ex-ls-which {
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 1.25;
    }

    /* -- The decides block, flat mint (in the column from 1120). */
    #vm-exams-listing .vm-ex-ls-decides {
        margin-top: 14px;
        padding: 16px 16px 18px;
        border-radius: 18px;
    }
    #vm-exams-listing .vm-ex-ls-decides-k { font-size: 12px; }
    #vm-exams-listing .vm-ex-ls-decides-rows { margin-top: 10px; gap: 8px; }
    #vm-exams-listing .vm-ex-ls-decides-row {
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
    }
    #vm-exams-listing .vm-ex-ls-decides-row i {
        width: 13px;
        margin-top: 4px;
        text-align: center;
    }
    #vm-exams-listing .vm-ex-ls-decides-row span {
        font-size: 13.5px;
        line-height: 1.45;
        text-wrap: pretty;
    }

    /* -- The suggestions: one lifted card. */
    #vm-exams-listing .vm-ex-ls-slist {
        margin-top: 14px;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-listing .vm-ex-ls-srow,
    #vm-exams-listing .vm-ex-ls-none,
    #vm-exams-listing .vm-ex-ls-sfail { border-top-color: #f0f2f4; }
    #vm-exams-listing .vm-ex-ls-sugg > :first-child,
    #vm-exams-listing .vm-ex-ls-sugg:empty + .vm-ex-ls-sfail,
    #vm-exams-listing .vm-ex-ls-sugg:empty + .vm-ex-ls-sfail[hidden] + .vm-ex-ls-none { border-top: 0; }

    /* A suggestion: tile | the exam (name, its plain words, "Already on
       your page") | the preparation, 230 | the chevron. The row's own
       words are the grid's cells (its main block is let go). */
    #vm-exams-listing .vm-ex-ls-srow {
        min-height: 76px;
        padding: 14px 18px 14px 16px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 230px 14px;
        grid-template-rows: auto auto auto;
        align-content: center;
        align-items: center;
        gap: 0 16px;
    }
    #vm-exams-listing .vm-ex-ls-srow-main { display: contents; }
    #vm-exams-listing .vm-ex-ls-srow > .vm-ex-ls-tile { grid-column: 1; grid-row: 1 / 4; }
    #vm-exams-listing .vm-ex-ls-srow-name {
        grid-column: 2;
        grid-row: 1;
        font-size: 16px;
        line-height: 1.3;
    }
    #vm-exams-listing .vm-ex-ls-srow-sub {
        grid-column: 2;
        grid-row: 2;
        margin-top: 3px;
        font-size: 13.5px;
        line-height: 1.4;
        color: #475569;
    }
    #vm-exams-listing .vm-ex-ls-srow-have {
        grid-column: 2;
        grid-row: 3;
        margin-top: 4px;
        font-size: 13px;
    }
    #vm-exams-listing .vm-ex-ls-srow-prep {
        grid-column: 3;
        grid-row: 1 / 4;
        margin-top: 0;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
        text-wrap: pretty;
    }
    #vm-exams-listing .vm-ex-ls-srow > .vm-ex-ls-chev {
        grid-column: 4;
        grid-row: 1 / 4;
        justify-self: center;
    }
    #vm-exams-listing .vm-ex-ls-none {
        min-height: 68px;
        padding: 12px 18px 12px 16px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 14px;
        column-gap: 16px;
    }
    #vm-exams-listing .vm-ex-ls-none > .vm-ex-ls-chev { justify-self: center; }
    #vm-exams-listing .vm-ex-ls-none-t { font-size: 15px; }
    #vm-exams-listing .vm-ex-ls-none-s {
        font-size: 13.5px;
        color: #475569;
    }
    #vm-exams-listing .vm-ex-ls-sfail {
        padding: 16px 18px;
        font-size: 14px;
        color: #0f172a;
    }

    /* ================================================================
       4. 22c — READY TO PUBLISH, and the row view (22-d-publish)
       One card of labelled rows (shared §17: the card .vm-dt-labelled is
       22c's own card, each field block a .vm-dt-labelled-row, its label
       .vm-dt-labelled-label): label 172 | the control column, 460 at
       most, every control and line of the block in it (the code's blocks
       carry several, with no wrapper). The match is a row of its own
       (listing.js moves it), labelled with 22b's heading.
       ================================================================ */
    #vm-exams-listing .vm-ex-ls-ebody { gap: 0; }
    #vm-exams-listing .vm-ex-ls-fields {
        padding: 0;
        gap: 0;
    }
    #vm-exams-listing .vm-ex-ls-fields > .vm-dt-labelled-row {
        row-gap: 12px;
        padding: 22px 24px;
    }
    #vm-exams-listing .vm-ex-ls-fields > .vm-ex-ls-fblock--match > .vm-dt-labelled-label { padding-top: 11px; }

    #vm-exams-listing .vm-ex-ls-fields .vm-ex-ls-input {
        height: 52px;
        padding: 0 16px;
        border-radius: 13px;
        font-size: 16px;
    }
    #vm-exams-listing .vm-ex-ls-input[aria-invalid="true"],
    #vm-exams-listing .vm-ex-ls-money.is-invalid { border-color: #0f172a; }
    #vm-exams-listing .vm-ex-ls-err {
        padding: 0;
        font-size: 13.5px;
        color: #0f172a;
    }

    /* -- The match row: the line and Change | the package tickbox. */
    #vm-exams-listing .vm-ex-ls-match {
        min-height: 44px;
        margin-top: 0;
        gap: 12px;
    }
    #vm-exams-listing .vm-ex-ls-match-t {
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
    }
    #vm-exams-listing .vm-ex-ls-match-t strong { color: #0f172a; }
    #vm-exams-listing .vm-ex-ls-change {
        padding: 0 18px;
        font-size: 13.5px;
    }
    #vm-exams-listing .vm-ex-ls-pkg {
        width: auto;
        justify-self: start;
        gap: 11px;
        font-size: 14px;
        font-weight: 400;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-pkg-box {
        width: 22px;
        height: 22px;
    }

    /* -- The price: three modes, then the figure (220) or the range. */
    #vm-exams-listing .vm-ex-ls-modes { gap: 8px; }
    #vm-exams-listing .vm-ex-ls-mode {
        font-size: 14px;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-mode[aria-pressed="true"] { color: #0f6d5c; }
    #vm-exams-listing .vm-ex-ls-money {
        height: 52px;
        margin-top: 0;
        padding: 0 16px;
        border-radius: 13px;
    }
    #vm-exams-listing .vm-ex-ls-fields > .vm-dt-labelled-row > .vm-ex-ls-money { max-width: 220px; }
    #vm-exams-listing .vm-ex-ls-range { margin-top: 0; }
    #vm-exams-listing .vm-ex-ls-money-in { font-size: 18px; }
    #vm-exams-listing .vm-ex-ls-cur {
        font-size: 12.5px;
        color: #64748b;
    }

    /* -- When the result is ready. */
    #vm-exams-listing .vm-ex-ls-resbox {
        height: 52px;
        padding: 0 16px;
        border-radius: 13px;
        gap: 8px;
        font-size: 15px;
    }
    #vm-exams-listing .vm-ex-ls-res-in { font-size: 15px; }

    /* -- The says card (in the card's head below 1120, the column's
       head from 1120): the name 18, the figure 38, the consequences. */
    #vm-exams-listing .vm-ex-ls-sayswrap + .vm-ex-ls-fields { border-top: 1px solid #f0f2f4; }
    #vm-exams-listing .vm-ex-ls-says { padding: 14px 16px 16px; }
    #vm-exams-listing .vm-ex-ls-says-k { font-size: 12px; }
    #vm-exams-listing .vm-ex-ls-says-name { font-size: 18px; line-height: 1.3; }
    #vm-exams-listing .vm-ex-ls-says-fig { margin-top: 4px; gap: 6px; }
    #vm-exams-listing .vm-ex-ls-says-num {
        font-size: 38px;
        letter-spacing: -1.2px;
        line-height: 1.05;
    }
    #vm-exams-listing .vm-ex-ls-says-cur {
        font-size: 13px;
        color: #475569;
    }
    #vm-exams-listing .vm-ex-ls-says-ask { font-size: 24px; }
    #vm-exams-listing .vm-ex-ls-says-result {
        margin-top: 6px;
        font-size: 13.5px;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-cons { margin-top: 14px; gap: 8px; }
    #vm-exams-listing .vm-ex-ls-cons-row {
        gap: 10px;
        padding: 10px 12px;
    }
    #vm-exams-listing .vm-ex-ls-cons-row > i {
        width: 13px;
        margin-top: 4px;
        text-align: center;
    }
    #vm-exams-listing .vm-ex-ls-cons-row > span {
        font-size: 13.5px;
        line-height: 1.45;
        text-wrap: pretty;
    }

    /* -- The publish bar's acts: the solid pill naming its effect; the
       quiet "Remove from your page" (shared §15, never red). */
    #vm-exams-listing .vm-ex-ls-publish { font-variant-numeric: tabular-nums; }
    #vm-exams-listing .vm-ex-ls-fault {
        font-size: 13.5px;
        line-height: 1.4;
        color: #0f172a;
    }
    #vm-exams-listing .vm-ex-ls-remove.vm-dt-act-quiet {
        width: auto;
        align-self: center;
        flex-shrink: 0;
    }

    /* ================================================================
       5. THE LANDMARK DIALOG (kept in the code, unreachable since 31:
       "Change the landmark" opens 31c). From 901 a centred 480 dialog
       (shared §3), its acts in a row (§15): Cancel, then the commit.
       ================================================================ */
    #vm-exams-listing .vm-ex-ls-sheet.is-open {
        padding: 28px 28px 24px;
        gap: 16px;
    }
    #vm-exams-listing .vm-ex-ls-sheet-head { padding: 0; }
    #vm-exams-listing .vm-ex-ls-sheet-title {
        font-size: 22px;
        letter-spacing: -.5px;
        line-height: 1.2;
    }
    #vm-exams-listing .vm-ex-ls-sheet-sub {
        margin-top: 10px;
        font-size: 15px;
        line-height: 1.55;
        color: #334155;
    }
    #vm-exams-listing .vm-ex-ls-sheet-acts { margin-top: 6px; }

    /* ================================================================
       6. STATES (22-d-states): a failed read and no structure on this
       account (404) or not this one (403) are §9's state cards (Try
       again; the glyph on a mint tile and the three ways out in a row).
       ================================================================ */
    #vm-exams-listing .vm-ex-ls-retry { margin-top: 12px; }

    /* ================================================================
       7. HOVER (a pointer that can hover)
       ================================================================ */
    @media (hover: hover) {
        #vm-exams-listing .vm-ex-ls-srow:hover,
        #vm-exams-listing .vm-ex-ls-none:hover,
        #vm-exams-listing .vm-ex-ls-door:hover { background: #f4fbf9; }
        #vm-exams-listing .vm-ex-ls-add:hover,
        #vm-exams-listing .vm-ex-ls-commit:hover,
        #vm-exams-listing .vm-ex-ls-publish:not([aria-disabled="true"]):hover { background: #0c5b4c; }
        #vm-exams-listing .vm-ex-ls-mode:not([aria-pressed="true"]):hover { background: #e2e8f0; }
    }
}

/* ====================================================================
   8. THE NARROW WINDOW (901-1119): one column at 908 in the code's
   order. Your page in two halves (the photograph 340 | how people find
   the door over the hours door); 22c's says card first in the card,
   Publish in the foot bar at the window's foot (the phone's own bar,
   §2's owner bar: the 860 column; the pill at the right, the line and
   Remove beside it).
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    #vm-exams-listing .vm-ex-ls-card {
        display: grid;
        grid-template-columns: 340px minmax(0, 1fr);
    }
    #vm-exams-listing .vm-ex-ls-photo {
        grid-column: 1;
        grid-row: 1 / 4;
        height: auto;
        min-height: 262px;
    }
    #vm-exams-listing .vm-ex-ls-photo-fault,
    #vm-exams-listing .vm-ex-ls-findwrap { grid-column: 2; }
    #vm-exams-listing .vm-ex-ls-door {
        grid-column: 2;
        align-self: end;
        margin-top: 14px;
    }

    #vm-exams-listing .vm-ex-ls-bar-in {
        padding: 0;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
    }
    #vm-exams-listing .vm-ex-ls-bar-in > .vm-ex-ls-publish {
        width: auto;
        flex-shrink: 0;
        padding: 0 28px;
    }
    #vm-exams-listing .vm-ex-ls-bar-in > .vm-ex-ls-fault { text-align: right; }
}

/* ====================================================================
   9. THE SIDE TIER (1120 and up): main | the 340 column, gap 48.
   ==================================================================== */
@media (min-width: 1120px) {
    /* The band's "My listing" (no state sentence) at the headline's 40. */
    #vm-exams-listing .vm-ex-ls-name { font-size: 40px; }

    #vm-exams-listing .vm-ex-ls-body,
    #vm-exams-listing .vm-ex-ls-pbody,
    #vm-exams-listing .vm-ex-ls-ebody {
        max-width: 1200px;
        padding: 32px 24px 64px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 32px;
        align-items: start;
    }

    /* -- 22a (call 1): Exams and services | Your page, which scrolls
       with the page (not sticky: it holds no act). */
    #vm-exams-listing .vm-ex-ls-body > * { grid-column: 1; }
    #vm-exams-listing .vm-ex-ls-body > [data-services-sec] { grid-row: 1; }
    #vm-exams-listing .vm-ex-ls-body > [data-pagecard] {
        grid-column: 2;
        grid-row: 1;
        position: static;
    }

    /* -- 22b (call 2): the field and the suggestions | the decides
       block. */
    /* The column spans the field's row and the card's; the card's row
       takes what the column needs past the field (so the field's row
       keeps its own height). */
    #vm-exams-listing .vm-ex-ls-pbody { grid-template-rows: auto 1fr; }
    #vm-exams-listing .vm-ex-ls-pbody > .vm-ex-ls-fblock,
    #vm-exams-listing .vm-ex-ls-pbody > .vm-ex-ls-pcard { grid-column: 1; }
    #vm-exams-listing .vm-ex-ls-pcol {
        grid-column: 2;
        grid-row: 1 / 3;
        min-width: 0;
    }
    #vm-exams-listing .vm-ex-ls-pcol > .vm-ex-ls-decides { margin-top: 0; }

    /* -- 22c (call 2): the labelled rows | the says card, sticky, with
       Publish at its foot and Remove under it. The phone's bar is empty
       here: its content is the column's foot. */
    #vm-exams-listing .vm-ex-ls-ebody > .vm-ex-ls-ecard { grid-column: 1; }
    #vm-exams-listing .vm-ex-ls-ecol {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 88px;
        align-self: start;
        min-width: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-listing .vm-ex-ls-bar { display: none; }
    #vm-exams-listing .vm-ex-ls-ecol > .vm-ex-ls-bar-in {
        padding: 16px 18px 18px;
        gap: 8px;
        border-top: 1px solid #eef1f5;
    }
    #vm-exams-listing .vm-ex-ls-ecol .vm-ex-ls-publish { padding: 8px 20px; }
    /* Remove chosen: the card dims (the fields) and so does what it
       says; the pill and Keep it stay whole. */
    #vm-exams-listing .vm-ex-ls-ebody:has(.vm-ex-ls-ecard.is-dim) .vm-ex-ls-ecol > .vm-ex-ls-sayswrap { opacity: .5; }
}