/* ====================================================================
   SCREEN 16 — ORDERS, the desktop layer (desktop slice D9, 2026-10-09)

   Frames: docs/design/pharmacy/screens/16/desktop/frame.html — 16-d (the
   page at 1280, Wednesday 15:44), 16-d-narrow (1000 wide), 16-d-states
   (the band's other forms, the pickup variants, the delivery lead, the
   ledger's other rows, Visits' requests, 16b, logged out, a failed read,
   the skeleton). Records: screens/desktop-15-25/records/Screen 16 (work
   order + design pass, folded). Brief: briefs/2026-10-09_desktop-slice-
   D9.md, section 16.

   Tiers: >=901 the page leaves the 480 column (.vm-dt-shell on #vm-or);
   the glass header over the band (D8 wired glassBand); the band in the
   1200 column, one row: the title at 40 | the date eyebrow over the
   sentence (1fr auto); the cards' desktop forms (the tint in two halves,
   one-line heads, the foot as one row with the money last); Earlier and
   today's settled rows as a ledger (shared.css's .vm-dt-ledger); the
   states in the column · >=1120 the body a grid: the orders (764) | Visits
   in the 340 column, NOT sticky (it scrolls with the page), with its
   footed "See my visits"; the band's right block 340. 901-1119: one
   column, the phone's order. The bottom bar hides from 901 (N5).

   Loaded after app.css, not-filled.css and desktop/shared.css. Every rule
   sits inside a min-width query, so the phone (<=900px) is untouched.
   Class prefix .vm-or- (the page's own); .vm-or-rxtile is not-filled.css's
   row tile on this page. The two nodes orders.js writes for 901 only
   (.vm-or-cta--in, .vm-or-shelf--in) are .vm-dt-only, hidden below 901 by
   app.css. Literal values only.

   Shared since D14 (shared.css): the band is §13's one-row band in the
   customer's light (.vm-dt-row-band, .vm-dt-band--customer) with the
   date in the right block's eyebrow form (.vm-dt-row-band-side--eyebrow);
   the section heads (§18), the skeleton, Try again and its ring (§9);
   the ledger's radius and hairline (§14). This file keeps the geometry.

   Sections (the frame's order):
     1. The band
     2. The body: one column (901-1119), orders | Visits (>=1120)
     3. The live card: head, the tint in two halves, a lead with no tint,
        the strip, the foot as one row
     4. The ledger: Earlier and today's settled rows
     5. Visits (the 340 column from 1120) and its footed door
     6. States: 16b, logged out, a failed read, Show more's line, the
        skeleton
     7. Hover
   ==================================================================== */


/* ====================================================================
   1. THE BAND (16-d, the design pass's change 1)
   15-d's bar: the title alone at the left at 40, spanning both rows; the
   date eyebrow (#8ff08b, the server's label, 24 high) over the sentence
   (17/600) in the right block, its foot on the title's baseline. The
   glass header sits over the band, so the band starts at the window's top
   and clears the header's 65 before its own 18.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-or-band {
        padding: 83px max(24px, calc((100% - 1152px) / 2)) 34px;
        border: 0;
    }
    .vm-or-band::before { display: none; }
    .vm-or-title {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0;
        font-size: 40px;
        letter-spacing: -1px;
        line-height: 1.15;
    }
    .vm-or-orient { height: 24px; }
    .vm-or-news {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        margin: 6px 0 4px;
        font-size: 17px;
        line-height: 1.45;
        color: #fff;
        text-wrap: pretty;
    }
    .vm-or-news-t { font-weight: 600; }
    /* Over 16b, logged out or a failed read the date stands alone: its
       foot takes the sentence's place on the title's baseline. */
    .vm-or-band:has(> .vm-or-news[hidden]) .vm-or-orient { margin-bottom: 4px; }
}



/* ====================================================================
   2. THE BODY
   The 1200 column. 901-1119: one column, the phone's order (Today,
   Earlier, the states, then Visits), 32 between groups. From 1120 a grid:
   every orders block in column 1 (764), Visits in column 2 rows 1 / span
   9, so it starts level with Today and scrolls with the page (not
   sticky). No visits: no group, and column 1 keeps its width.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-or-body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 24px 64px;
        gap: 32px;
        line-height: 1.5;
    }
    .vm-or-body.is-none { padding: 32px 24px 64px; }
    .vm-or-group,
    .vm-or-group--past { gap: 14px; }
    .vm-or-list { gap: 16px; }
}

@media (min-width: 1120px) {
    .vm-or-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 0;
        align-items: start;
        align-content: start;
        padding-top: 36px;
    }
    .vm-or-body > * { grid-column: 1; min-width: 0; }
    .vm-or-body > [data-visits] {
        grid-column: 2;
        grid-row: 1 / span 9;
    }
    /* 36 between Today and Earlier, as the frame's main column. */
    .vm-or-body > [data-today]:not([hidden]) ~ [data-earlier] { margin-top: 36px; }
}


/* ====================================================================
   3. THE LIVE CARD
   Head one line (the design pass's change 3): the name at 19, the place
   on its baseline 12 after it, the teal chevron. The tint (16-d): two
   halves — the news on the left (label, the figure at 44 for a price or
   30 for a deadline, the For line or the shelf sentence under its clock),
   the code's white row on the right (rows 1 / span 3), the quote's pill
   under it (orders.js's .vm-or-cta--in; the phone's pill and the shelf
   sentence under the tint are not drawn here). A lead with no tint (a
   delivery, a prescription alone): the title at 18 on the left, the four
   steps on the right. The grey foot is one row: the other half | say |
   pay, the money last and right-aligned.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-or-card { border-radius: 18px; }

    /* -- The head */
    .vm-or-id {
        align-items: center;
        gap: 16px;
        padding: 20px 20px 0;
    }
    .vm-or-id-main {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        row-gap: 2px;
    }
    .vm-or-name {
        font-size: 19px;
        letter-spacing: -.3px;
        line-height: 1.25;
    }
    .vm-or-place {
        margin: 0 0 0 12px;
        font-size: 13.5px;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    .vm-or-chev { margin-top: 0; font-size: 14px; color: #0f6d5c; }

    /* -- The body of the card */
    .vm-or-main,
    .vm-or-main.has-cta { padding: 18px 20px 20px; }
    .vm-or-cta-wrap,
    .vm-or-shelf { display: none; }

    /* -- The tint, in two halves */
    .vm-or-tint {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto auto 1fr;
        column-gap: 24px;
        align-items: start;
        padding: 20px;
        border-radius: 16px;
    }
    .vm-or-tint > * { grid-column: 1; min-width: 0; }
    .vm-or-tint > .vm-or-note {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
    .vm-or-tint > .vm-or-cta--in { grid-column: 2; grid-row: 4; }
    /* A price with no hold to state: the pill heads the right half. */
    .vm-or-tint:not(:has(> .vm-or-note)) > .vm-or-cta--in { grid-row: 1 / span 3; }
    .vm-or-tint .vm-or-label {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f6d5c;
        font-variant-numeric: tabular-nums;
    }
    .vm-or-quote { gap: 6px; margin-top: 6px; }
    .vm-or-quote-n {
        font-size: 44px;
        letter-spacing: -1.4px;
        line-height: 1.05;
    }
    .vm-or-quote-c { font-size: 15px; color: #475569; }
    .vm-or-for {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.45;
        color: #334155;
    }
    .vm-or-when {
        margin-top: 6px;
        font-size: 30px;
        letter-spacing: -.8px;
        line-height: 1.1;
    }
    /* "After that" under its clock (the design pass's change 2). */
    .vm-or-shelf--in {
        display: block;
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.45;
        color: #334155;
        text-wrap: pretty;
    }
    .vm-or-note,
    .vm-or-note--own {
        margin-top: 0;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 12px;
    }
    .vm-or-note i {
        width: 16px;
        margin-top: 4px;
        font-size: 13px;
        text-align: center;
    }
    .vm-or-note-t {
        font-size: 14.5px;
        line-height: 1.5;
        text-wrap: pretty;
        font-variant-numeric: tabular-nums;
    }
    .vm-or-cta--in {
        height: 48px;
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 999px;
        background: #0f6d5c;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
    }
    .vm-or-cta--in i { font-size: 12px; }

    /* -- A lead with no tint: the title at 18, the steps on the right */
    .vm-or-main:not(:has(> .vm-or-tint)) { padding: 14px 20px 20px; }
    .vm-or-main > .vm-or-label {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.3;
        color: #0f172a;
    }
    .vm-or-main > .vm-or-line {
        margin-top: 4px;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    .vm-or-main:has(> .vm-or-steps) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 24px;
        align-items: center;
    }
    .vm-or-main:has(> .vm-or-steps) > * { grid-column: 1; min-width: 0; }
    .vm-or-main > .vm-or-steps {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin-top: 0;
    }

    /* -- The four steps (the lead's, and a fact's in the foot) */
    .vm-or-steps-bars,
    .vm-or-steps-l { gap: 6px; }
    .vm-or-step { height: 6px; }
    .vm-or-steps-l {
        margin-top: 8px;
        font-size: 12.5px;
        line-height: 1.3;
    }
    .vm-or-step-l { color: #64748b; }
    .vm-or-step-l.is-done { color: #475569; }
    .vm-or-fact .vm-or-steps { margin-top: 10px; }

    /* -- The foot, one row: the money last, on the right */
    .vm-or-foot {
        display: flex;
        align-items: stretch;
        background: #f8fafc;
        border-top-color: #f0f2f4;
    }
    .vm-or-foot > * + * { border-top: 0; }
    .vm-or-foot > * { border-left: 1px solid #e2e8f0; }
    /* No rule left of the block drawn first (only the pay row moves). */
    .vm-or-foot > :first-child:not(.vm-or-pay),
    .vm-or-foot > .vm-or-pay:first-child + *,
    .vm-or-foot > .vm-or-pay:only-child { border-left: 0; }
    .vm-or-fact {
        flex: 1 1 0;
        min-width: 0;
        padding: 14px 20px;
    }
    .vm-or-fact-row { gap: 16px; }
    .vm-or-fact-t {
        font-size: 14.5px;
        line-height: 1.4;
        font-variant-numeric: tabular-nums;
    }
    .vm-or-fact-s {
        margin-top: 3px;
        font-size: 13.5px;
        line-height: 1.45;
        color: #64748b;
        text-wrap: pretty;
    }
    .vm-or-fact-fig {
        font-size: 16px;
        letter-spacing: 0;
        color: #334155;
    }
    .vm-or-fact-use { margin-top: 2px; font-size: 12.5px; color: #64748b; }
    .vm-or-say {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding: 14px 20px;
    }
    .vm-or-say-k {
        font-size: 13px;
        line-height: 1.3;
        color: #475569;
        white-space: nowrap;
    }
    .vm-or-say-v {
        margin-top: 4px;
        font-size: 20px;
        letter-spacing: .08em;
        line-height: 1.2;
    }
    .vm-or-pay {
        order: 9;
        flex: 1 0 auto;
        margin-left: auto;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0;
        padding: 14px 20px;
        text-align: right;
    }
    .vm-or-pay-k {
        font-size: 13px;
        line-height: 1.3;
        color: #475569;
        white-space: nowrap;
    }
    .vm-or-pay-v { gap: 5px; margin-top: 4px; white-space: nowrap; }
    .vm-or-pay-n {
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }
    .vm-or-pay-c { font-size: 12px; color: #64748b; }
}


/* ====================================================================
   4. THE LEDGER (Earlier, and today's settled rows)
   shared.css's .vm-dt-ledger on the container (its radius 18 and its
   #f0f2f4 hairline are 16-d's since D14). Rows 64: the date tile 40 |
   the counter (260) and the act on one baseline | the money (15,
   #334155) | the grey chevron 14. 40d's and 45g's prescription rows keep the code's weight:
   the answer in ink in the act column, counter · day grey in the 260 one
   (the design pass's change 3).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-or-row,
    .vm-or-row.vm-or-row--rx {
        min-height: 64px;
        gap: 14px;
        padding: 12px 20px;
    }
    .vm-or-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #f1f5f9;
        color: #334155;
    }
    .vm-or-tile-d { font-size: 10px; }
    .vm-or-tile-n { margin-top: 3px; font-size: 16px; }
    .vm-or-rxtile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        color: #475569;
    }
    .vm-or-rxtile i { font-size: 15px; }
    .vm-or-row:not(.vm-or-vrow) .vm-or-row-main {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 24px;
        align-items: baseline;
    }
    .vm-or-row-t {
        font-size: 15px;
        line-height: 1.3;
    }
    .vm-or-row-s {
        margin-top: 0;
        font-size: 14px;
        line-height: 1.4;
        color: #475569;
        font-variant-numeric: tabular-nums;
    }
    .vm-or-row--rx .vm-or-row-t {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
    }
    .vm-or-row--rx .vm-or-row-s {
        order: -1;
        font-size: 13.5px;
        line-height: 1.4;
        color: #64748b;
    }
    .vm-or-row-m { font-size: 15px; color: #334155; }
    .vm-or-row-chev { font-size: 14px; color: #64748b; }

    /* Show more, footed, and the line its failure writes above it. */
    .vm-or-more {
        height: 52px;
        font-size: 14px;
        color: #334155;
    }
    .vm-or-more-fault {
        padding: 12px 20px;
        font-size: 13.5px;
        color: #475569;
    }
}


/* ====================================================================
   5. VISITS (16-d's call 1 and call 2)
   901-1119: after the orders, heading at 21. From 1120: the 340 column,
   heading at 17, rows 72 (the date tile, the structure at 14.5, the exam
   at 13 grey, the visit's own words at 13), the container at 16, and the
   footed "See my visits" door to 15 (orders.js draws it from 901 only).
   ==================================================================== */
@media (min-width: 901px) {
    [data-visits-list] { border-radius: 16px; }
    .vm-or-vrow {
        min-height: 72px;
        gap: 12px;
        padding: 14px 16px;
    }
    .vm-or-vrow .vm-or-row-t { font-size: 14.5px; }
    .vm-or-vrow .vm-or-row-s {
        margin-top: 3px;
        font-size: 13px;
        color: #64748b;
    }
    .vm-or-vrow .vm-or-row-s.vm-num { margin-top: 2px; color: #475569; }
    .vm-or-vdoor {
        min-height: 52px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: #0f6d5c;
        text-decoration: none;
    }
    .vm-or-vdoor-t {
        flex: 1;
        min-width: 0;
        font-size: 14.5px;
        font-weight: 700;
    }
    .vm-or-vdoor i { font-size: 13px; }
    .vm-or-vdoor:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
}

@media (min-width: 1120px) {
    [data-visits] .vm-or-h { font-size: 17px; letter-spacing: -.3px; }
}


/* ====================================================================
   6. STATES (16-d-states)
   In column 1 at 764. 16b and R14's logged-out twin: type on the ground,
   top-aligned, no card, the one solid pill naming the act (its own width,
   at the left). A failed read: one bordered card, Try again as a mint
   pill. The skeleton: the heading's bar and two quiet cards, never a
   sentence or a duration.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-or-none {
        align-items: flex-start;
        padding-top: 20px;
    }
    .vm-or-none-t {
        font-size: 30px;
        letter-spacing: -.7px;
        line-height: 1.2;
    }
    .vm-or-none-s {
        max-width: 420px;
        margin-top: 12px;
        font-size: 16px;
        line-height: 1.6;
        color: #475569;
    }
    .vm-or-none-go {
        align-self: flex-start;
        margin-top: 28px;
        padding: 0 28px;
    }
    .vm-or-none-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    .vm-or-fail {
        align-items: flex-start;
        gap: 12px;
        padding: 18px 20px;
    }
    .vm-or-fail-t { font-size: 15px; }

    .vm-or-skel-h { margin: 0; }
    .vm-or-skel-card { height: 236px; background: #f1f5f9; }
    .vm-or-skel-card--short { height: 168px; }
}


/* ====================================================================
   7. HOVER
   A lifted card deepens its shadow, a bordered one darkens its edge; a
   ledger row and Visits' rows take the quiet fill; the doors their mint.
   ==================================================================== */
@media (min-width: 901px) {
    @media (hover: hover) {
        .vm-or-card.is-lifted:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 36px rgba(16, 24, 40, .12); }
        .vm-or-card:not(.is-lifted):not([disabled]):hover { border-color: #b6c2cf; }
        .vm-or-row:not([disabled]):hover { background: #f8fafc; }
        .vm-or-more:hover { background: #f8fafc; }
        .vm-or-vdoor:hover { background: #e3f4f0; color: #0f6d5c; }
        .vm-or-none-go:hover { background: #0c5b4c; color: #fff; }
    }
}