/* ====================================================================
   SCREEN 38 — A BOX THE CATALOGUE LACKS: DESCRIBE THE BOX (38b) and
   25c's "Change the box" (38c), the desktop layer (desktop slice G3,
   2026-10-09). pharmacy/shelf.html only, linked after desktop/25-shelf.css.

   Frames: 38-d (38b filled), 38-d-match ("Is it this one?"), 38-d-row
   (25c of a described box), 38-d-narrow (1000 wide) and 38-d-states in
   docs/design/pharmacy/screens/38/desktop/frame.html; the sheet is
   screens/38/desktop/FACTS.md; the records are screens/desktop-35-42/
   records/Screen 38 - desktop work order.md and … design pass.md (the
   design pass wins). Brief: briefs/2026-10-09_desktop-slice-G3.md.

   Supersedes 25-shelf.css §8 (the interim centred 480 dialog): from 901
   38b is a PAGE in the add flow, like 25b and 25c — the view on the
   page's ground, no dim, no grab; its title row is 18-d's flow band
   (shared §13, the classes on the markup) with the glass exit shelf.js
   makes from 901, naming where she came from ("Add a product", or the
   row she opened "Change the box" on); the exit replaces Cancel.

   Tiers: >=901 the band, then the 1200 column (28 24 64): 901-1119 one
   column — What customers read in two halves, "Is it this one?", the
   fields' card with the act at its foot · >=1120 a grid minmax(0,1fr) 340
   (48 between): main = the match at its head, then the card of labelled
   rows (172 | the control, 28 between, hints under the labels; Form 4
   across, Shelf 3 across, the switch row, the photo row); the 340 column
   sticky at 88 = What customers read and the act at its foot, a failed
   write's line above the act. Below 901 nothing here applies.

   Hooks this file reaches by class: the page's .vm-sb-* markup and the
   wrappers stated-box.js makes from 901 (.vm-sb-main, .vm-sb-form,
   .vm-sb-side, nodes moved, never copied); the preview's 08 card
   (.vm-cat-card.vm-sb-card, written by paintPreview from 901); 25c's
   moved [data-change-wrap] in .vm-sh-top.

   Sections:
     1. The view a page; the flow band
     2. The body: one column, then two from 1120
     3. What customers read: two halves, then the column; 08-d's card
     4. "Is it this one?"
     5. The card of labelled rows: fields, chips, refusals, the switch,
        the photo
     6. The act: at the card's foot, then in the column
     7. 25c: "Change the box", the band's glass pill
   ==================================================================== */


/* ====================================================================
   1. THE VIEW A PAGE; THE FLOW BAND
   The phone's sheet (a full-height panel on the dim) unwinds: the view
   takes the page's ground, the panel draws nothing, the dim and the grab
   go, and Cancel goes (the band's exit is the way out). The band is
   25b/25c's: 18 over, 24 under; the title at 40 (36 below 1120).
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sb {
        min-height: 0;
        background: none;
    }
    #vm-sh .vm-sb-dim,
    #vm-sh .vm-sb-grab,
    #vm-sh .vm-sb-cancel { display: none; }
    #vm-sh .vm-sb-panel {
        border-radius: 0;
        background: none;
    }
    #vm-sh .vm-sb-titlerow {
        padding-top: 18px;
        padding-bottom: 24px;
    }
    #vm-sh .vm-sb-title { flex: 0 1 auto; }
    #vm-sh .vm-sb-exit {
        align-self: center;
        flex-shrink: 0;
    }
}


/* ====================================================================
   2. THE BODY: ONE COLUMN, THEN TWO FROM 1120
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sb-body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 24px 64px;
        gap: 20px;
    }
    .vm-sb-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media (min-width: 1120px) {
    #vm-sh .vm-sb-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 0 48px;
        align-items: start;
    }
    .vm-sb-side {
        position: sticky;
        top: var(--vm-dt-sticky-top, 88px);
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
}


/* ====================================================================
   3. WHAT CUSTOMERS READ
   901-1119 (38-d-narrow): the mint block above the form in two halves —
   the label over 08-d's card (centred in its half) | the white row, its
   top on the card's. From 1120 (38-d): in the column, the label, the
   card, the white row under it. The card (the design pass) is 08-d's at
   08's width, 236: the form glyph on 08's 150 ground (never her photo),
   then the name, the line and whose words they are; no price.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sb-read {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 10px;
        align-items: start;
        padding: 16px;
        border-radius: 18px;
    }
    .vm-sb-read-k {
        grid-column: 1;
        grid-row: 1;
        padding: 0;
        font-size: 11.5px;
        color: #0f6d5c;
    }
    #vm-sh .vm-sb-prev {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        border-radius: 0;
        background: none;
    }
    #vm-sh .vm-sb-read > .vm-sh-lead-row {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }
    /* The white rows (the read's and the match's). */
    #vm-sh .vm-sb .vm-sh-lead-row.vm-sb-row {
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
    }
    #vm-sh .vm-sb .vm-sh-lead-row.vm-sb-row > i {
        margin-top: 3px;
        font-size: 12px;
    }
    #vm-sh .vm-sb .vm-sh-lead-row.vm-sb-row > span {
        font-size: 13px;
        line-height: 1.45;
        color: #0f172a;
    }

    /* 08-d's card, at 236. */
    #vm-sh .vm-sb-card {
        width: 236px;
        max-width: 100%;
        display: block;
        padding: 0;
        overflow: hidden;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 6px 18px rgba(16, 24, 40, .06);
    }
    #vm-sh .vm-sb-card .vm-cat-tile {
        height: 150px;
        border-radius: 0;
        background: #f1f5f9;
    }
    #vm-sh .vm-sb-card .vm-cat-glyph {
        background: #f1f5f9;
        color: #94a3b8;
        font-size: 34px;
    }
    #vm-sh .vm-sb-card .vm-cat-info {
        display: block;
        padding: 12px 14px 14px;
    }
    #vm-sh .vm-sb-card .vm-cat-name {
        min-height: 1.3em;
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
        color: #0f172a;
        overflow-wrap: anywhere;
    }
    #vm-sh .vm-sb-card .vm-cat-meta {
        margin-top: 2px;
        font-size: 12.5px;
        line-height: 1.4;
        color: #64748b;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }
    #vm-sh .vm-sb-card .vm-cat-stated {
        margin-top: 3px;
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.4;
        color: #0f6d5c;
    }
}

@media (min-width: 1120px) {
    #vm-sh .vm-sb-side > .vm-sb-read {
        display: block;
        padding: 14px;
        border-radius: 14px;
    }
    #vm-sh .vm-sb-side .vm-sb-prev { margin-top: 10px; }
    #vm-sh .vm-sb-side .vm-sb-read > .vm-sh-lead-row { margin-top: 8px; }
}


/* ====================================================================
   4. "IS IT THIS ONE?"
   At main's head, above the form (the code's order): a lifted white card,
   its mint top (the label, the catalogue box as a white 64 row, the white
   row) and "Not this box?…" under it. It arrives without a ring (fixed
   first, the design pass); the act's first press focuses it (stated-box
   .js) and the focus is the 2px ring. The pick is a row, never a solid act.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sb-match {
        gap: 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-sh .vm-sb-match:focus {
        outline: 2px solid #0f6d5c;
        outline-offset: 2px;
    }
    #vm-sh .vm-sb-match-in {
        padding: 16px 16px 14px;
        border-radius: 0;
    }
    #vm-sh .vm-sb-mrow {
        margin-top: 10px;
        min-height: 64px;
        padding: 10px 14px 10px 12px;
        gap: 12px;
        border-radius: 12px;
    }
    #vm-sh .vm-sb-mrow .vm-sh-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    #vm-sh .vm-sb-mrow .vm-sh-hname {
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 15px;
        letter-spacing: 0;
        line-height: 1.3;
    }
    #vm-sh .vm-sb-msub {
        margin-top: 2px;
        font-size: 13px;
        color: #475569;
        font-variant-numeric: tabular-nums;
    }
    #vm-sh .vm-sb-match-in > .vm-sh-lead-row { margin-top: 8px; }
    #vm-sh .vm-sb-match-p {
        padding: 12px 16px 14px;
        font-size: 13.5px;
        line-height: 1.45;
        color: #334155;
    }
    #vm-sh .vm-sb-mrow:focus-visible {
        outline: 2px solid #0f6d5c;
        outline-offset: 2px;
    }
    @media (hover: hover) {
        #vm-sh .vm-sb-mrow:hover { box-shadow: inset 0 0 0 1.5px #0f6d5c; }
    }
}


/* ====================================================================
   5. THE CARD OF LABELLED ROWS
   One lifted card (25c's labelled rows): each field a row of 172 | the
   control (28 between), 20 24 in, #f0f2f4 hairlines; the label 14/600 12
   down, its hint under it at 12.5; the control's column holds its
   refusal 8 under it. Name 460 wide at most, Strength and Pack 220; the
   fields 52 high (16/600, #cbd5e1, #16a085 and its glow in focus, ink
   when refused). Form 4 across, Shelf 3 across: 44 chips, 8 apart, 460
   at most, the pressed one mint with its teal edge. The prescription
   switch: its label | the switch | its sentence. The photo: its own row,
   the door 460 at most.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sb-form {
        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-sb-form > * + * { border-top: 1px solid #f0f2f4; }

    #vm-sh .vm-sb-form > .vm-sb-field {
        display: grid;
        grid-template-columns: 172px minmax(0, 1fr);
        column-gap: 28px;
        row-gap: 8px;
        align-items: start;
        padding: 20px 24px;
    }
    .vm-sb-form > .vm-sb-field > :first-child {
        grid-column: 1;
        grid-row: 1;
    }
    .vm-sb-form > .vm-sb-field > :not(:first-child) { grid-column: 2; }
    #vm-sh .vm-sb-form .vm-sb-k {
        flex: none;
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        color: #334155;
    }
    #vm-sh .vm-sb-form .vm-sb-field > .vm-sb-k,
    #vm-sh .vm-sb-form .vm-sb-khead { padding: 12px 0 0; }
    #vm-sh .vm-sb-khead {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    #vm-sh .vm-sb-hint {
        font-size: 12.5px;
        line-height: 1.4;
        color: #64748b;
        text-align: left;
    }

    #vm-sh .vm-sb-in {
        height: 52px;
        padding: 0 16px;
        border-radius: 12px;
        border-color: #cbd5e1;
        font-size: 16px;
        font-variant-numeric: tabular-nums;
    }
    #vm-sh #sb-name { max-width: 460px; }
    #vm-sh #sb-strength,
    #vm-sh #sb-pack { max-width: 220px; }
    #vm-sh .vm-sb-in:focus {
        border-color: #16a085;
        box-shadow: 0 0 0 4px rgba(22, 160, 133, .12);
    }
    #vm-sh .vm-sb-in[aria-invalid="true"] {
        border-color: #0f172a;
        box-shadow: none;
    }

    /* The refusals: in ink under the control, never a toast. */
    #vm-sh .vm-sb-errs { gap: 8px; }
    #vm-sh .vm-sb-err {
        gap: 8px;
        padding: 0;
        font-size: 12.5px;
        line-height: 1.45;
        font-variant-numeric: tabular-nums;
    }
    /* 38e's duplicate: the mint door to her own row, its own width. */
    #vm-sh .vm-sb-open {
        align-self: flex-start;
        width: auto;
        min-height: 44px;
        padding: 0 18px;
        font-size: 13.5px;
    }

    #vm-sh .vm-sb-chips {
        max-width: 460px;
        gap: 8px;
    }
    #vm-sh .vm-sb-chip {
        min-height: 44px;
        padding: 0 8px;
        border-radius: 12px;
        background: #f1f5f9;
        color: #334155;
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
    }
    #vm-sh .vm-sb-chip[aria-pressed="true"] {
        background: #e3f4f0;
        color: #0f6d5c;
        box-shadow: inset 0 0 0 1.5px #0f6d5c;
    }
    #vm-sh .vm-sb-chips.is-refused .vm-sb-chip { box-shadow: inset 0 0 0 1.5px #0f172a; }
    #vm-sh .vm-sb-chip:focus-visible {
        outline: 2px solid #0f6d5c;
        outline-offset: 2px;
    }

    /* The shelves still reading, or unreadable (the mint Try again). */
    #vm-sh .vm-sb-wait {
        max-width: 460px;
        min-height: 44px;
        padding: 0;
        font-size: 14px;
        color: #64748b;
    }
    #vm-sh .vm-sb-catfail {
        max-width: 460px;
        min-height: 44px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    #vm-sh .vm-sb-catfail-t {
        flex: 1;
        min-width: 0;
        padding: 0;
        font-size: 14px;
        color: #0f172a;
    }
    #vm-sh .vm-sb-catfail .vm-sh-retry {
        flex-shrink: 0;
        width: auto;
        margin: 0;
    }

    /* The switch and the photo: the phone's grey group unwinds into two
       rows of the card. */
    #vm-sh .vm-sb-form > .vm-sb-group {
        display: block;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    #vm-sh .vm-sb-rxrow {
        display: grid;
        grid-template-columns: 186px 56px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        min-height: 0;
        padding: 20px 24px;
        border-radius: 0;
        background: none;
    }
    #vm-sh .vm-sb-rxmain { display: contents; }
    #vm-sh .vm-sb-rxt {
        grid-column: 1;
        grid-row: 1;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
    }
    #vm-sh .vm-sb-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 56px;
        justify-content: flex-start;
    }
    #vm-sh .vm-sb-rxs {
        grid-column: 3;
        grid-row: 1;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
    }
    #vm-sh .vm-sb-errs--rx { padding: 0 24px 16px 224px; }
    #vm-sh .vm-sb-photo {
        padding: 16px 24px 20px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-sh .vm-sb-door {
        max-width: 460px;
        min-height: 64px;
        padding: 10px 14px 10px 12px;
        border-radius: 14px;
        background: #fff;
        box-shadow: inset 0 0 0 1px #e2e8f0;
    }
    #vm-sh .vm-sb-door-tile i { font-size: 13px; }
    #vm-sh .vm-sb-door-s {
        font-size: 12.5px;
        color: #475569;
    }
    #vm-sh .vm-sb-door.vm-sb-door--fail { padding: 10px 10px 10px 12px; }
    #vm-sh .vm-sb-door--fail .vm-sb-door-tile {
        background: #f1f5f9;
        color: #475569;
    }
    #vm-sh .vm-sb-again {
        height: 44px;
        padding: 0 16px;
        border: 0;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 13.5px;
    }
    #vm-sh .vm-sb-door:focus-visible,
    #vm-sh .vm-sb-again:focus-visible,
    #vm-sh .vm-sb-open:focus-visible {
        outline: 2px solid #0f6d5c;
        outline-offset: 2px;
    }

    @media (hover: hover) {
        #vm-sh button.vm-sb-door:not(:disabled):hover { background: #f8fafc; }
        /* The mint pills take the teal ring under the pointer (shared §9). */
        #vm-sh .vm-sb-again:hover,
        #vm-sh .vm-sb-open:hover { box-shadow: inset 0 0 0 1.5px #0f6d5c; }
    }
}


/* ====================================================================
   6. THE ACT
   901-1119: at the card's foot (the hairline #eef1f5, 16 24), right,
   "Put it on my shelf" / "Save the box" 52 high; a failed write's line
   beside it. From 1120: in the column under What customers read, the
   width of the column, the line above it (13.5/600 ink). Never fixed.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sb-foot {
        position: static;
        z-index: auto;
        margin: 0;
        border-top: 0;
        background: none;
        box-shadow: none;
    }
    #vm-sh .vm-sb-foot .vm-sh-fault {
        padding: 0;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
    }
    #vm-sh .vm-sb-foot .vm-sh-commit {
        min-height: 52px;
        white-space: nowrap;
    }
    #vm-sh .vm-sb-form > .vm-sb-foot {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        padding: 16px 24px;
        border-top: 1px solid #eef1f5;
    }
    #vm-sh .vm-sb-form > .vm-sb-foot .vm-sh-fault {
        flex: 1;
        min-width: 0;
    }
    #vm-sh .vm-sb-form > .vm-sb-foot .vm-sh-commit {
        flex-shrink: 0;
        width: auto;
        padding: 0 28px;
    }
    @media (hover: hover) {
        #vm-sh .vm-sb-foot .vm-sh-commit:not(:disabled):hover { background: #0c5b4c; color: #fff; }
    }
}

@media (min-width: 1120px) {
    #vm-sh .vm-sb-side > .vm-sb-foot {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 0;
    }
    #vm-sh .vm-sb-side > .vm-sb-foot .vm-sh-commit {
        width: 100%;
        padding: 0 18px;
    }
}


/* ====================================================================
   7. 25c: "CHANGE THE BOX", THE BAND'S GLASS PILL
   38-d-row (the design pass): a described box's door moves from under
   the price card to 25c's flow band (shelf.js moves [data-change-wrap]
   into it), a 44 glass pill at its right, its foot on the title block's
   foot, beside "… · as you describe it". The pen in mint; the stated facts
   (#sh-change-s) stay its description, read, not drawn; no chevron.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sh-top.vm-dt-flow-band:has(> .vm-sh-changewrap:not([hidden])) {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }
    .vm-sh-top > .vm-sh-changewrap {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: end;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    .vm-sh-top .vm-sh-change {
        width: auto;
        min-height: 44px;
        height: 44px;
        padding: 0 18px 0 14px;
        gap: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
        color: #fff;
        white-space: nowrap;
    }
    .vm-sh-top .vm-sh-change:active { background: rgba(255, 255, 255, .2); }
    .vm-sh-top .vm-sh-change .vm-sh-tile {
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        color: #8ff08b;
    }
    .vm-sh-top .vm-sh-change .vm-sh-tile i { font-size: 12px; }
    .vm-sh-top .vm-sh-change .vm-sh-main { flex: 0 0 auto; }
    .vm-sh-top .vm-sh-change .vm-sh-nname {
        font-size: 13.5px;
        font-weight: 700;
        line-height: normal;
        color: #fff;
    }
    .vm-sh-top .vm-sh-change .vm-sh-nsub {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .vm-sh-top .vm-sh-change .vm-sh-chev { display: none; }
    .vm-sh-top .vm-sh-change:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }
    @media (hover: hover) {
        .vm-sh-top .vm-sh-change:hover { background: rgba(255, 255, 255, .2); color: #fff; }
    }
}