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

   Frames: 15-d (the night before, at 1280), 15-d-narrow (1000),
   15-d-states, in docs/design/pharmacy/screens/15/desktop/frame.html,
   the design pass approved and folded (Oct 8); records screens/
   desktop-15-25/records/Screen 15 - desktop work order.md and design
   pass.md (the pass wins where it changed a call). Brief:
   briefs/2026-10-09_desktop-slice-D10.md.

   Tiers: >=901 the layer: the glass header over the bar (js/exams/
   desktop.js, D8), the bar in the 1200 column with the title alone at
   40; the body one column in the phone's order; the cards in the pass's
   one grammar (the when on the left, what to do before in a 340 column
   on the right, then one row: what | say | pay) · >=1120 the body main |
   a 340 column, not sticky: Coming up (and the empty or failed card)
   in main, Earlier (heading 17) then Results in the column; with
   nothing coming up Earlier takes main and Results keeps the column.
   No device word on this page; no new string.

   Shared since D14 (shared.css): the bar's light from the top left
   (§13's .vm-dt-band--customer), the section heads (§18's .vm-dt-sec-h),
   the date tiles (§18's .vm-dt-date-tile and its small form), the
   skeleton (§9's .vm-dt-skel) and the mint pills' ring under the pointer
   (§9's .vm-dt-ring-hover). This file keeps the geometry.

   Sections, in the frame's order:
     1. The bar
     2. The body: one column (901-1119), the section heads
     3. The cards: the grid, the top row, the lifted card's two halves
        (the night strip at the foot of the left one), the bordered
        card's when | terms, the last row (what | say | pay)
     4. Requests (34d) in Coming up and in Earlier
     5. Earlier: the rows and the question
     6. Results
     7. States: the empty and failed card, the skeleton
     8. Hover (a pointer that can hover)
     9. Main | the column (>=1120)
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE BAR (15-d): the band material lit top-left (§13), the glass
       header over it (65), 18 more; the title alone at 40 in the 1200
       column. No exit, no sentence, no count.
       ================================================================ */
    #vm-exams-visits .vm-ex-mv-bar {
        padding: 83px max(24px, calc((100% - 1152px) / 2)) 34px;
        border: 0;
    }
    #vm-exams-visits .vm-ex-mv-title {
        margin: 0;
        font-size: 40px;
        letter-spacing: -1px;
        line-height: 1.15;
    }

    /* ================================================================
       2. THE BODY (15-d-narrow, 901-1119: one column in the phone's
       order, Coming up, Earlier, Results). Section heads at 21 (§18).
       ================================================================ */
    #vm-exams-visits .vm-ex-mv-body {
        padding: 32px max(24px, calc((100% - 1152px) / 2)) 64px;
        gap: 32px;
    }
    #vm-exams-visits .vm-ex-mv-sec { gap: 14px; }
    #vm-exams-visits .vm-ex-mv-cards { gap: 16px; }

    /* ================================================================
       3. THE CARDS (the pass, from 901: the 1000 column is wider than
       main). One grid for both kinds: the top row across; the lifted
       card's mint block across, or the bordered card's when | its
       terms; then the last row, what | say | pay. Column 2 is as wide as
       the foot needs (auto); the terms keep 340 at the card's right,
       40 in, level with the lifted card's right half.
       ================================================================ */
    #vm-exams-visits .vm-ex-mv-card:not(.vm-ex-mv-reqcard) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto auto;
        border-color: #e2e8f0;
        border-radius: 18px;
    }
    #vm-exams-visits .vm-ex-mv-card.is-lifted {
        border-color: transparent;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }

    /* -- The top row: the 48 date tile (§18), the name at 19, the area. */
    #vm-exams-visits .vm-ex-mv-card-top {
        grid-column: 1 / -1;
        grid-row: 1;
        gap: 16px;
        padding: 20px 20px 0;
    }
    #vm-exams-visits .vm-ex-mv-name { font-size: 19px; letter-spacing: -.3px; line-height: 1.25; overflow-wrap: normal; }
    #vm-exams-visits .vm-ex-mv-where { margin-top: 3px; font-size: 13.5px; color: #64748b; }
    #vm-exams-visits .vm-ex-mv-card-top .vm-ex-mv-chev { font-size: 14px; color: #0f6d5c; }

    /* -- The lifted card's mint block in two halves (the pass): the
       label (14.5, one line), the window at 44, the nature row under it
       and the night strip pinned to the foot | the rules, white, radius
       12, in the 340 column. The inner is unwound (display: contents)
       so the nature row joins the left half and the rule rows the right.
       Rows: 1 label, 2 figure, 3 nature, 4 the room above the strip
       (flexible: a tall rule column pushes the strip down, never the
       label apart), 5 the paper's row when the fast sits above it. */
    #vm-exams-visits .vm-ex-mv-head {
        grid-column: 1 / -1;
        grid-row: 2 / 4;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto auto auto 1fr auto;
        column-gap: 24px;
        margin: 18px 20px 20px;
        padding: 20px;
        border-radius: 16px;
    }
    #vm-exams-visits .vm-ex-mv-head:not(:has([data-fast], [data-paper])) { grid-template-columns: minmax(0, 1fr); }
    #vm-exams-visits .vm-ex-mv-head-l {
        grid-column: 1;
        grid-row: 1;
        font-size: 14.5px;
        font-weight: 600;
        color: #0f6d5c;
        white-space: nowrap;
        overflow-wrap: normal;
    }
    #vm-exams-visits .vm-ex-mv-head-fig {
        grid-column: 1;
        grid-row: 2;
        margin-top: 6px;
        font-size: 44px;
        letter-spacing: -1.4px;
        line-height: 1.05;
    }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-inner { display: contents; }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-in-row {
        gap: 12px;
        padding: 14px 16px;
        border-top: 0;
        background: #fff;
    }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-in-g {
        width: 16px;
        margin-top: 4px;
        font-size: 13px;
        color: #0f6d5c;
    }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-in-t { font-size: 15px; line-height: 1.45; }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-in-s { margin-top: 3px; font-size: 14px; line-height: 1.55; color: #334155; }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-in-plain { font-size: 14.5px; line-height: 1.5; color: #0f172a; text-wrap: pretty; }

    /* The nature row: the left half, under the window, no tile. */
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-in-row:has([data-nature]) {
        grid-column: 1;
        grid-row: 3;
        margin-top: 12px;
        padding: 0;
        gap: 10px;
        background: transparent;
    }

    /* The rules: the right half. One alone is a white block of its own
       height at the top; the fast over the paper is one white block
       (the fast's row runs down to the paper's, a hairline between). */
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-inner > [data-fast],
    #vm-exams-visits .vm-ex-mv-head .vm-ex-mv-inner > [data-paper] {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        border-radius: 12px;
    }
    #vm-exams-visits .vm-ex-mv-head:has([data-paper]) .vm-ex-mv-inner > [data-fast] {
        grid-row: 1 / 5;
        align-self: stretch;
        border-radius: 12px 12px 0 0;
    }
    #vm-exams-visits .vm-ex-mv-head:has([data-fast]) .vm-ex-mv-inner > [data-paper] {
        grid-row: 5;
        border-top: 1px solid #f0f2f4;
        border-radius: 0 0 12px 12px;
    }

    /* The night strip, at the foot of the left half (STRIP_W stays 280
       in visits.js: a wider track only adds room). 12px labels, the dot
       16 with its ring. */
    #vm-exams-visits .vm-ex-mv-head .vm-ex-ns {
        grid-column: 1;
        grid-row: 4 / -1;
        align-self: end;
        height: 40px;
        margin-top: 22px;
    }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-ns-l { font-size: 12px; }
    #vm-exams-visits .vm-ex-mv-head .vm-ex-ns-now { cx: 8px; r: 6.5px; }

    /* -- The bordered card: the when on the left, indented to the name
       (20 + 48 + 16 = 84), the terms stacked in the 340 column on the
       right behind a hairline; a lone term spans both rows, no term at
       all leaves the when alone across the card. */
    #vm-exams-visits .vm-ex-mv-when {
        grid-column: 1;
        grid-row: 2 / 4;
        padding: 12px 24px 20px 84px;
    }
    #vm-exams-visits .vm-ex-mv-card:not(:has(.vm-ex-mv-term)) .vm-ex-mv-when {
        grid-column: 1 / -1;
        padding-right: 40px;
    }
    #vm-exams-visits .vm-ex-mv-when-row { column-gap: 10px; }
    #vm-exams-visits .vm-ex-mv-day { font-size: 14px; font-weight: 600; color: #475569; }
    #vm-exams-visits .vm-ex-mv-fig {
        font-size: 22px;
        letter-spacing: -.5px;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-visits .vm-ex-mv-nature { font-size: 14px; line-height: 1.5; color: #475569; text-wrap: pretty; }
    #vm-exams-visits .vm-ex-mv-when-row + .vm-ex-mv-nature { margin-top: 4px; }

    #vm-exams-visits .vm-ex-mv-term {
        grid-column: 2;
        justify-self: end;
        width: 340px;
        margin: 0 40px 0 0;
        gap: 12px;
        padding: 4px 0 6px 16px;
        border-top: 0;
        border-left: 1px solid #f0f2f4;
    }
    #vm-exams-visits .vm-ex-mv-term[data-fast] { grid-row: 2; margin-top: 12px; }
    #vm-exams-visits .vm-ex-mv-term[data-paper] { grid-row: 3; padding: 6px 0 4px 16px; margin-bottom: 20px; }
    #vm-exams-visits .vm-ex-mv-card:not(:has(.vm-ex-mv-term[data-paper])) .vm-ex-mv-term[data-fast] {
        grid-row: 2 / 4;
        align-self: start;
        padding-bottom: 4px;
        margin-bottom: 20px;
    }
    #vm-exams-visits .vm-ex-mv-card:not(:has(.vm-ex-mv-term[data-fast])) .vm-ex-mv-term[data-paper] {
        grid-row: 2 / 4;
        align-self: start;
        padding-top: 4px;
        margin-top: 12px;
    }
    #vm-exams-visits .vm-ex-mv-term-g {
        width: 16px;
        margin-top: 4px;
        font-size: 13px;
        color: #64748b;
    }
    #vm-exams-visits .vm-ex-mv-term-t { font-size: 14px; line-height: 1.5; color: #334155; }

    /* -- The last row (the pass): the exams on the left, their names
       over the concept's (several, or "for Paul Ngo", grow the row
       down) | the #f8fafc foot, say beside pay, at the card's end. */
    #vm-exams-visits .vm-ex-mv-items {
        grid-column: 1;
        grid-row: 4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        min-width: 0;
        padding: 16px 20px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-exams-visits .vm-ex-mv-item { padding: 0; }
    #vm-exams-visits .vm-ex-mv-item + .vm-ex-mv-item { border-top: 0; }
    #vm-exams-visits .vm-ex-mv-item-name { font-size: 16px; line-height: 1.3; }
    #vm-exams-visits .vm-ex-mv-item-sub { margin-top: 3px; font-size: 13.5px; color: #64748b; }
    #vm-exams-visits .vm-ex-mv-for { margin-top: -4px; padding: 0; font-size: 13.5px; color: #475569; }

    #vm-exams-visits .vm-ex-mv-foot {
        grid-column: 2;
        grid-row: 4;
        border-top: 1px solid #f0f2f4;
        border-left: 1px solid #f0f2f4;
        background: #f8fafc;
    }
    #vm-exams-visits .vm-ex-mv-say {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: none;
        padding: 14px 20px;
        border-right: 1px solid #e2e8f0;
    }
    #vm-exams-visits .vm-ex-mv-say-k { font-size: 13px; line-height: 1.3; color: #475569; white-space: nowrap; }
    #vm-exams-visits .vm-ex-mv-say-v {
        margin-top: 4px;
        font-size: 20px;
        letter-spacing: .08em;
        line-height: 1.2;
        overflow-wrap: normal;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-visits .vm-ex-mv-pay {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        padding: 14px 20px;
    }
    #vm-exams-visits .vm-ex-mv-pay:only-child { align-items: flex-start; }
    #vm-exams-visits .vm-ex-mv-pay-l { font-size: 13px; line-height: 1.3; color: #475569; white-space: nowrap; }
    #vm-exams-visits .vm-ex-mv-amount { margin-top: 4px; column-gap: 5px; white-space: nowrap; }
    #vm-exams-visits .vm-ex-mv-amount-fig {
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-visits .vm-ex-mv-amount-from,
    #vm-exams-visits .vm-ex-mv-amount-cur { font-size: 12px; color: #64748b; }
    #vm-exams-visits .vm-ex-mv-amount-ask { font-size: 13px; color: #64748b; font-variant-numeric: tabular-nums; }

    /* ================================================================
       4. REQUESTS (34d, 15-d-states): in Coming up a bordered row-card
       80 tall (the 44 tinted tile, the structure, where its answer
       stands; an offer in 600 ink); in Earlier, one nobody answered in
       time is a row of the Earlier box, still a door to 14.
       ================================================================ */
    #vm-exams-visits .vm-ex-mv-reqcard { border-color: #e2e8f0; border-radius: 18px; }
    #vm-exams-visits .vm-ex-mv-reqcard .vm-ex-mv-reqrow {
        min-height: 80px;
        padding: 16px 20px;
        gap: 16px;
    }
    #vm-exams-visits .vm-ex-mv-reqcard .vm-ex-mv-rtile { width: 44px; height: 44px; }
    #vm-exams-visits .vm-ex-mv-req-t { font-size: 14.5px; line-height: 1.3; }
    #vm-exams-visits .vm-ex-mv-reqcard .vm-ex-mv-req-t { font-size: 15.5px; }
    #vm-exams-visits .vm-ex-mv-req-s { margin-top: 3px; font-size: 13px; color: #475569; }
    #vm-exams-visits .vm-ex-mv-reqcard .vm-ex-mv-req-s { font-size: 13.5px; }
    #vm-exams-visits .vm-ex-mv-req-s.is-offer { font-weight: 600; color: #0f172a; }
    #vm-exams-visits .vm-ex-mv-reqrow .vm-ex-mv-chev { font-size: 14px; color: #0f6d5c; }
    #vm-exams-visits .vm-ex-mv-row.vm-ex-mv-reqrow {
        min-height: 68px;
        padding: 12px 16px;
        gap: 12px;
    }

    /* ================================================================
       5. EARLIER (15-d's column): passed days behind a grey date column,
       not doors; the booked money at 14, the smallest money on the
       page; the one question in its inset with two equal 44 answers,
       420 at most where the column is wide.
       ================================================================ */
    #vm-exams-visits .vm-ex-mv-rows { border-color: #e2e8f0; border-radius: 16px; }
    #vm-exams-visits .vm-ex-mv-rows > * + .vm-ex-mv-row { border-top: 1px solid #f0f2f4; }
    #vm-exams-visits .vm-ex-mv-row { padding: 14px 16px; gap: 12px; }
    #vm-exams-visits .vm-ex-mv-date { width: 40px; }
    #vm-exams-visits .vm-ex-mv-date-wk { font-size: 10.5px; letter-spacing: .06em; color: #64748b; }
    #vm-exams-visits .vm-ex-mv-date-d { margin-top: 3px; font-size: 18px; color: #334155; font-variant-numeric: tabular-nums; }
    #vm-exams-visits .vm-ex-mv-row-t { font-size: 14.5px; line-height: 1.3; }
    #vm-exams-visits .vm-ex-mv-row-s { margin-top: 3px; font-size: 13px; color: #64748b; }
    #vm-exams-visits .vm-ex-mv-row-m { font-size: 14px; color: #475569; font-variant-numeric: tabular-nums; }

    #vm-exams-visits .vm-ex-mv-ask { margin: 0 16px 16px; padding: 16px; border-radius: 14px; }
    #vm-exams-visits .vm-ex-mv-ask-t { font-size: 17px; letter-spacing: -.2px; line-height: 1.3; }
    #vm-exams-visits .vm-ex-mv-ask-s { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #334155; }
    #vm-exams-visits .vm-ex-mv-ask-fault { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #0f172a; }
    #vm-exams-visits .vm-ex-mv-answers { max-width: 420px; margin-top: 14px; gap: 8px; }
    #vm-exams-visits .vm-ex-mv-answer { font-size: 14px; }

    /* ================================================================
       6. RESULTS (15-d's column): the file tile, the two lines, the door
       that knows the login (52 tall).
       ================================================================ */
    #vm-exams-visits .vm-ex-mv-results { border-color: #e2e8f0; border-radius: 16px; }
    #vm-exams-visits .vm-ex-mv-results-row { padding: 16px; gap: 12px; }
    #vm-exams-visits .vm-ex-mv-results-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        color: #475569;
        font-size: 15px;
    }
    #vm-exams-visits .vm-ex-mv-results-copy { padding-top: 1px; }
    #vm-exams-visits .vm-ex-mv-results-t { font-size: 15px; line-height: 1.35; }
    #vm-exams-visits .vm-ex-mv-results-s { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #334155; }
    #vm-exams-visits .vm-ex-mv-door {
        min-height: 52px;
        padding: 0 16px;
        gap: 10px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-exams-visits .vm-ex-mv-door-l { font-size: 14.5px; }
    #vm-exams-visits .vm-ex-mv-door-note { font-size: 13px; color: #64748b; }
    #vm-exams-visits .vm-ex-mv-door i { font-size: 13px; }

    /* ================================================================
       7. STATES (15-d-states): the code's empty and failed card (its
       door or Try again a 44 mint pill), the quiet skeleton.
       ================================================================ */
    #vm-exams-visits .vm-ex-none {
        align-items: flex-start;
        gap: 4px;
        padding: 18px 20px;
        border-color: #e2e8f0;
        border-radius: 16px;
    }
    #vm-exams-visits .vm-ex-none-title { font-size: 15px; line-height: 1.35; }
    #vm-exams-visits .vm-ex-none-sub { font-size: 14px; color: #475569; }
    #vm-exams-visits .vm-ex-none .vm-ex-mv-statedoor {
        margin-top: 10px;
        padding: 0 16px;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 13.5px;
    }
    #vm-exams-visits .vm-ex-mv-skel-card { height: 196px; }
    #vm-exams-visits .vm-ex-mv-skel-card--short { height: 128px; }

    /* ================================================================
       8. HOVER: the whole card is the door to 14, and its hover deepens
       the lift or darkens the border, nothing more.
       ================================================================ */
    @media (hover: hover) {
        #vm-exams-visits .vm-ex-mv-card:hover { border-color: #b6c2cf; }
        #vm-exams-visits .vm-ex-mv-card.is-lifted:hover {
            border-color: transparent;
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 36px rgba(16, 24, 40, .12);
        }
        #vm-exams-visits .vm-ex-mv-row.vm-ex-mv-reqrow:hover { background: #f8fafc; }
        #vm-exams-visits .vm-ex-mv-door:hover { background: #e3f4f0; }
    }
}

/* ====================================================================
   9. MAIN | THE COLUMN (>=1120, the approved call): main 764 holds
   Coming up (or the empty or failed card, or the skeleton), spanning
   every row; the 340 column holds Earlier (heading 17) then Results,
   level with Coming up and NOT sticky (it scrolls with the page). With
   nothing coming up Earlier takes main (heading 21, the answers 420)
   and Results keeps the column, its card level with Earlier's box.
   ==================================================================== */
@media (min-width: 1120px) {
    #vm-exams-visits .vm-ex-mv-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto auto 1fr;
        column-gap: 48px;
        row-gap: 24px;
        align-items: start;
        padding-top: 36px;
    }
    #vm-exams-visits .vm-ex-mv-body > [data-loading],
    #vm-exams-visits .vm-ex-mv-body > [data-coming],
    #vm-exams-visits .vm-ex-mv-body > [data-none] {
        grid-column: 1;
        grid-row: 1 / -1;
        min-width: 0;
    }
    #vm-exams-visits .vm-ex-mv-body > [data-earlier],
    #vm-exams-visits .vm-ex-mv-body > [data-results] {
        grid-column: 2;
        min-width: 0;
    }
    #vm-exams-visits .vm-ex-mv-body > [data-earlier] .vm-ex-mv-h { font-size: 17px; letter-spacing: -.3px; }

    /* Nothing coming up: Earlier takes main. */
    #vm-exams-visits .vm-ex-mv-body:has(> [data-coming][hidden]) > [data-earlier] {
        grid-column: 1;
        grid-row: 1 / -1;
    }
    #vm-exams-visits .vm-ex-mv-body:has(> [data-coming][hidden]) > [data-earlier] .vm-ex-mv-h {
        font-size: 21px;
        letter-spacing: -.4px;
    }
    /* ...and Results' card sits level with Earlier's box (its head, 32,
       and the section's gap, 14, above it). */
    #vm-exams-visits .vm-ex-mv-body:has(> [data-coming][hidden]):has(> [data-earlier]:not([hidden])) > [data-results] {
        margin-top: 46px;
    }
}