/* ====================================================================
   THE HEALTH HUB'S DESKTOP LAYER — shared chrome and idioms
   (desktop slice D0, 2026-10-08)

   BYTE-IDENTICAL in css/pharmacy/desktop/shared.css and
   css/exams/desktop/shared.css: each hub links only its own copy, and
   tests/e2e/desktop-css-layer.spec.js diffs the two. Literal values only
   (never a hub's own --vph-* / --vex-* property); the layer's own tokens
   are the --vm-dt-* declared on :root in the 901 block below.

   Source: docs/design/pharmacy/screens/desktop-01-14/ (README lines
   1-95, the ground rules and tokens), briefs/2026-10-08_desktop-slice-D0.md
   and briefs/2026-10-08_desktop-build-rules.md. Frames read for values:
   01-d (the glass header over the band), 01-d-head (the solid header,
   scrolled, with the compact search), 02-d-pick (popovers), 04-d-switch
   (the decision dialog), 08-d-pick (the 720 dialog), 02-d / 05-d (the
   side card's head and its read-only lines), 04-d-narrow (the foot bar).

   Tiers: <=900 the phone, byte-frozen (nothing here reaches it: every
   rule sits inside a min-width query) · >=901 the desktop layer ·
   >=1120 side cards, rails, two columns · >=1240 secondary pieces (the
   compact header search). Hover-only rules nest @media (hover: hover).
   No !important anywhere: load order does the work (app.css -> the
   page's own css -> this file -> desktop/NN-page.css).

   Sections, in order:
     1. The header's desktop form (over app.css's N5 block, untouched)
     2. The page frame (and the fixed foot bar, with its two-layer forms)
     3. Dialogs (the phone's sheets, centred; the decision dialog)
     4. Popovers
     5. Paged rails
     6. The round add, and the tooltip from aria-label
     7. The side card: its shell, its head (and the head's band form),
        read-only basket lines, the failure line, the number under Call
     8. Hover lift
     9. States
    10. The band material (the exams bands, their glass)
    11. The hub footer
    12. The owner header (the counter's and the structure side's)
    13. The bands: the flow band and the one-row band
    14. Ledger rows
    15. Dialog acts side by side, and the quiet act
    16. The column that scrolls
    17. Settings sections and labelled rows
    18. Section heads and date tiles
    19. The lead band on an owner's home
    20. Take-back acts on the mat
    21. The open flow (23 and 27: listing a structure, opening a pharmacy)
    22. The city dialog (41b on 01 and 26)

   Desktop slice D7 (2026-10-08, the consolidation pass) brought the idioms
   the screen slices had each written in their own file here: the dialog
   fade's specificity, the closed sheet, the phone-only words, the side
   card's shell, the band head, the store tile, the failure line, the
   number under Call, the two-layer foot bar, the decision dialog, the band
   material and the footer. A screen file keeps only its own geometry.
   Never prescription blue here: this file is the exams side's too (the
   prescription door's round control, .vm-dt-presc, stays in 01, 02, 08).

   Desktop slice D8 (2026-10-09, the 15-25 foundation) added sections 12-17
   from docs/design/pharmacy/screens/desktop-15-25/ (README lines 1-118),
   briefs/2026-10-09_desktop-build-rules-15-25.md §3 and
   briefs/2026-10-09_desktop-slice-D8.md. Frames read for values: 18-d
   (the structure side's header, the flow band, the 480 dialog with its
   acts in a row), 25-d (the counter's header with the Queue badge, the
   one-row band with a door), 21-d (the one-row band with a right column;
   21-d-found, the band folded), 16-d (the ledger), 23-d and 22-d-publish
   (labelled rows). Where §3 of the rules names a value it is the one
   written here; the frames give the rest. The screen slices D9-D13 use
   these and never edit this file.

   Desktop slice D14 (2026-10-09, the 15-25 consolidation) brought here
   what D9-D13 had each written in their own file: the ledger's real
   values (radius 18, the #f0f2f4 hairline, the #f8fafc hover) and its
   lifted and mint forms (section 14), the 18-25 dialog's chrome
   (section 3), the owner pages' foot bar (section 2), the state cards,
   Try again, the ring under the pointer and the skeleton (section 9), the
   customer bands' light, the eyebrow form, the fold that keeps the h1 and
   the identity read but not drawn (section 13), the empty owner header
   (section 12), the quiet act inside an acts row (section 15), the
   labelled rows' control column (section 17), and section 18. Brief:
   briefs/2026-10-09_desktop-slice-D14-consolidation.md.

   Desktop slice E0 (2026-10-09, the 26-34 phase) added sections 19-20
   (briefs/2026-10-09_desktop-build-rules-26-34.md §4): the lead band on
   an owner's home (29-d, 31-d, 32-d) and the quiet act's glass form on
   a band (32-d).

   Desktop slice E10 (2026-10-09, the 26-34 consolidation) brought here
   what E0-E9 had each written in their own file: the lifted state card
   (section 9: 31, 32), the identity read but not drawn on a band folded
   to its field (26, 30) and on a lead band holding its lead (29, 31,
   32), and the flow band with its line under the title (section 13:
   23a, 27a, 29b-29h, 31b-31e), the door rows (section 14: 29a, 31a),
   the teal Cancel as the dialogs' default and its own class (section 15:
   31, 32, 34), the lead band's headline at 40 at both tiers (section 19:
   29, 31, 32), the owner bars hidden from 901 (section 2: 09, 21, 22, 23,
   25, 27), and section 21, the open flow 23 and 27 share. Brief:
   briefs/2026-10-09_desktop-slice-E10-consolidation.md.

   Desktop slice G6 (2026-10-09, screen 41) moved section 22 here from
   26-pharmacies.css, unchanged: Home's chip opens the same 480 dialog.
   ==================================================================== */


/* ====================================================================
   1. THE HEADER'S DESKTOP FORM
   app.css's N5 block (inside the "Slice N shared chrome" fence) draws
   the header and stays byte-identical. This section restyles it to the
   handoff's header: the lockup, then the five links as 44px pills right
   after it (the lit one a mint pill, which replaces N5's underline on
   the same aria-current="page" hook), the compact search (>=1240, only
   while the header carries data-dt-search="on"), Basket at the right on
   the pharmacy side with its count pill. The glass form sits over a
   band and turns solid once the band has scrolled past (js/<hub>/
   desktop.js sets .vm-dt-header--glass and .is-solid).
   ==================================================================== */
@media (min-width: 901px) {
    /* The layer's own tokens, for the screen files (desktop/NN-page.css).
       This file writes its values literally, so it reads on its own. */
    :root {
        --vm-dt-col: 1200px;
        --vm-dt-gutter: 24px;
        --vm-dt-head-h: 65px;
        --vm-dt-sticky-top: 88px;
        --vm-dt-side-w: 340px;
        --vm-dt-rail-w: 260px;
        --vm-dt-wash: linear-gradient(180deg, #f4fbf9 0%, #f8fafc 420px);
        --vm-dt-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
        --vm-dt-shadow-lift: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px rgba(16, 24, 40, .12);
        --vm-dt-shadow-dialog: 0 24px 64px rgba(2, 12, 27, .35);
    }

    /* -- The row: lockup, then the five right after it (01-d-head). */
    .vm-dt-header-in { gap: 28px; }
    .vm-dt-brand { gap: 9px; margin-right: 0; flex-shrink: 0; }
    .vm-dt-nav { gap: 2px; }

    /* -- The five: 44px pills, 13.5px; the lit one mint with teal ink. */
    .vm-dt-link {
        height: 44px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 500;
        color: #475569;
    }
    .vm-dt-link[aria-current="page"] {
        background: #e3f4f0;
        color: #0f6d5c;
        font-weight: 600;
        text-decoration: none;
    }
    .vm-dt-link:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* -- 08's and 12's hairline + "About" after the five (outside the nav
       landmark: About is a place on this page, not one of the five). The
       28px row gap less 18px leaves 10px each side, the frame's spacing. */
    .vm-dt-header-sep {
        display: block;
        width: 1px;
        height: 22px;
        margin: 0 -18px;
        background: #e2e8f0;
        flex-shrink: 0;
    }

    /* -- Basket: an act, not a place, so it stands at the far right with
       its count. Lit (aria-current) on the basket's own pages. */
    .vm-dt-link--basket {
        margin-left: auto;
        height: 44px;
        padding: 0 10px 0 14px;
        gap: 9px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        color: #0f172a;
        font-weight: 700;
        flex-shrink: 0;
    }
    .vm-dt-link--basket i { font-size: 14px; color: inherit; }
    .vm-dt-link--basket[aria-current="page"] {
        background: #e3f4f0;
        border-color: #cfe7e0;
        color: #0f6d5c;
        font-weight: 700;
    }
    /* The count is text on a teal fill: #0f6d5c, never #16a085 (3.3:1). */
    .vm-dt-basket-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #0f6d5c;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }

    /* -- The compact search: drawn only from 1240 (section 1, 1240 block). */
    .vm-dt-search {
        display: none;
        margin-left: auto;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 320px;
        height: 44px;
        align-items: center;
        gap: 8px;
        padding: 0 0 0 15px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
    }
    .vm-dt-search > i { flex-shrink: 0; font-size: 12.5px; color: #64748b; }
    .vm-dt-search-field {
        flex: 1 1 auto;
        min-width: 0;
        height: 42px;
        padding: 0;
        border: 0;
        background: transparent;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 13.5px;
        color: #0f172a;
    }
    .vm-dt-search-field::placeholder { color: #64748b; opacity: 1; }
    .vm-dt-search-field:focus { outline: none; }
    .vm-dt-search:focus-within { border-color: #0f6d5c; box-shadow: 0 0 0 1px #0f6d5c; }
    /* A 44px hit area around the frame's 34px disc (the fill clipped to
       the content box), overlapping the field's 1px edge. */
    .vm-dt-search-go {
        width: 44px;
        height: 44px;
        margin: -1px -1px -1px 0;
        padding: 5px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #16a085;
        background-clip: content-box;
        color: #fff;
        font-size: 12px;
    }
    .vm-dt-search-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    @media (hover: hover) {
        .vm-dt-link:hover { background: #e3f4f0; color: #0f6d5c; }
        .vm-dt-link--basket:hover { background: #fff; border-color: #16a085; color: #0f6d5c; }
        .vm-dt-link--basket[aria-current="page"]:hover { background: #e3f4f0; }
        .vm-dt-search:hover { border-color: #16a085; }
        .vm-dt-search-go:hover { background-color: #11806a; }
    }

    /* -- Glass: transparent over a band, no hairline. The header stays
       sticky and the band slides under it (the negative margin is the
       header's own height), so the band starts at the window's top. */
    .vm-dt-header--glass {
        margin-bottom: -65px;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .vm-dt-header--glass .vm-dt-link,
    .vm-dt-header--glass .vm-dt-brand-word,
    .vm-dt-header--glass .vm-dt-brand-word span,
    .vm-dt-header--glass .vm-dt-brand-strap {
        transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    }
    .vm-dt-header--glass:not(.is-solid) {
        background: transparent;
        border-bottom-color: transparent;
    }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-brand-logo {
        background: #fff;
        padding: 3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-brand-word { color: #fff; }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-brand-word span { color: #8ff08b; }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-brand-strap { color: #e2e8f0; }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-link { color: rgba(255, 255, 255, .9); }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-link[aria-current="page"] {
        background: rgba(255, 255, 255, .18);
        color: #fff;
    }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-link--basket {
        background: rgba(255, 255, 255, .18);
        border-color: rgba(255, 255, 255, .3);
        color: #fff;
    }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-basket-count { background: #fff; color: #0f6d5c; }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-header-sep { background: rgba(255, 255, 255, .28); }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-brand:focus-visible,
    .vm-dt-header--glass:not(.is-solid) .vm-dt-link:focus-visible { outline-color: #fff; }
    /* Solid again once the band has gone: the white header, lifted. */
    .vm-dt-header--glass.is-solid { box-shadow: 0 4px 20px rgba(16, 24, 40, .06); }

    @media (hover: hover) {
        .vm-dt-header--glass:not(.is-solid) .vm-dt-link:hover {
            background: rgba(255, 255, 255, .18);
            color: #fff;
        }
        .vm-dt-header--glass:not(.is-solid) .vm-dt-link--basket:hover {
            background: rgba(255, 255, 255, .28);
            border-color: rgba(255, 255, 255, .3);
            color: #fff;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .vm-dt-header--glass,
        .vm-dt-header--glass .vm-dt-link,
        .vm-dt-header--glass .vm-dt-brand-word,
        .vm-dt-header--glass .vm-dt-brand-word span,
        .vm-dt-header--glass .vm-dt-brand-strap { transition: none; }
    }
}

@media (min-width: 1240px) {
    /* The compact search, only where the page asked for it. The Basket
       then follows it directly; the search carries the auto margin. */
    .vm-dt-header[data-dt-search="on"] .vm-dt-search { display: flex; }
    .vm-dt-header[data-dt-search="on"] .vm-dt-link--basket { margin-left: 0; }
    /* Never over the band: the band has the page's own field. */
    .vm-dt-header--glass:not(.is-solid) .vm-dt-search { display: none; }
    .vm-dt-header--glass:not(.is-solid) .vm-dt-link--basket { margin-left: auto; }
}


/* ====================================================================
   2. THE PAGE FRAME
   .vm-dt-shell is app.css's inert unwind hook (no max-width, no column
   shadow); each screen's slice adds it to its own page. Content sits in
   the 1200 column with 24px gutters. Task screens put main | the 340
   side card (sticky under the header) from 1120; shops put the 260 rail
   | main. Between 901 and 1119 there is one column, and a task screen's
   act sits in the fixed white foot bar instead of the side card.
   The owner bars (app.css's N6 group: the counter's .vm-q-nav on 09, 25
   and 27b, the structure side's tab bars on 21, 22 and 23b) and their
   spacers are not drawn from 901: the owner header carries the tabs
   (E10: one rule for the six pages that each hid their own).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-app.vm-dt-shell {
        max-width: none;
        box-shadow: none;
        background: linear-gradient(180deg, #f4fbf9 0%, #f8fafc 420px);
    }
    .vm-dt-wrap {
        width: 100%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    .vm-dt-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }
    .vm-dt-cols > * { min-width: 0; }

    /* The foot bar (04-d-narrow): full width, a hairline over it, its
       content in the 1200 column (the padding does the column, so the
       bar's own markup needs no wrapper). */
    .vm-dt-foot-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        width: auto;
        max-width: none;
        transform: none;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 12px max(24px, calc((100% - 1152px) / 2)) 14px;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    }

    /* The two-layer bars (D7): the fixed frame above, its rows carrying
       the 1200 column themselves. --rail (12's visit bar): one row, and
       from 1120 the page's rail takes the bar, so it is not hidden there.
       --strip (13's commit bar): the wallet strip (8 above and below) over
       the row; from 1120 the page's card takes it. The frame is a block,
       so the bar's own flex settings go with its padding. */
    .vm-dt-foot-bar--rail,
    .vm-dt-foot-bar--strip {
        display: block;
        align-items: normal;
        gap: normal;
        margin: 0;
        padding: 0;
    }
    .vm-dt-foot-bar--rail > :last-child,
    .vm-dt-foot-bar--strip > :last-child {
        gap: 16px;
        padding: 12px max(24px, calc((100% - 1152px) / 2)) 14px;
    }
    .vm-dt-foot-bar--strip > :first-child { padding: 8px max(24px, calc((100% - 1152px) / 2)); }

    /* Phone-only words and glyphs (the pair of app.css's .vm-dt-only). */
    .vm-mb-only { display: none; }

    /* The owner bars and their spacers (see the head of this section). */
    .vm-q-nav,
    .vm-q-clear,
    .vm-ex-ls-tabs,
    .vm-ex-dk-tabs,
    .vm-ex-ly-tabs,
    .vm-ex-tabs-clear { display: none; }
}

@media (min-width: 1120px) {
    .vm-dt-cols {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        align-items: start;
    }
    .vm-dt-cols--rail {
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 40px;
    }
    .vm-dt-aside {
        position: sticky;
        top: 88px;
        align-self: start;
    }
    /* The side card is on: its act lives there, not in a foot bar. */
    .vm-dt-foot-bar { display: none; }
    /* ...except a two-layer bar, which its page moves into the rail or
       the card and lays out there. */
    .vm-dt-foot-bar--rail,
    .vm-dt-foot-bar--strip { display: block; }
}

/* The owner pages' bar (D14: 18's Publish, 22c's Publish, 23a's commit;
   18-d-narrow and its kin): the page's own bar wherever the page keeps it
   (fixed or sticky at the window's foot), white on a hairline with the
   deeper shadow, its content in the 860 column (24 at least each side).
   It is drawn so from 901 to 1119: from 1120 each page moves the bar, or
   its content, into its column's card and lays it out there. */
@media (min-width: 901px) {
    .vm-dt-foot-bar--owner {
        padding: 12px max(24px, calc((100% - 860px) / 2));
        background: #fff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
    }
}


/* ====================================================================
   3. DIALOGS
   From 901 an open .vm-sheet is a centred dialog: 440 wide by default,
   400 / 480 / 720 by modifier, radius 18, the dialog shadow, at most the
   window less 96px tall with its own scroll, no grab bar. The backdrop,
   the open/close code, Escape and the scrim (the safe choice) are the
   phone's, unchanged. Two named buttons end a decision dialog, stacked,
   solid first and grey second (.vm-dt-dialog-acts); their colours stay
   the phone's own button classes. No X is added. The sheet does not
   slide on a desktop: it appears in place (a 160ms fade, none under
   reduced motion). The open sheet's `transition: none` sits on
   `.vm-sheet.is-open` itself, the weight of the phone's open-sheet rule
   (the exams side's carries a transition and would otherwise slide it
   up). A closed sheet is not drawn at all: on the phone the bottom bar
   hid its shadow along the window's foot; there is no bar here.
   The 18-25 dialog (D14, from 18-d-sheet, 20-d-sheets, 21-d and
   24-d-sheets): .vm-dt-dialog on the open sheet (with its width
   modifier): radius 20 and the frames' softer shadow. Since desktop
   slice G9 the counter's sheet on 09 and 09b carries it too (09e, 35,
   36c, 39, 40b and "What is missing?": 09-d-sheets' family, the same
   radius and shadow), as does the desk's 36c; the counter's Cancel in
   their heads (.vm-q-kp-cancel on 09's sheets and 09b's keypad,
   .vm-sf-cancel on 39, .vm-q-nf-cancel on 40b) is one 44 pill, teal, its
   own width, mint under a pointer. Inside, by class: the sheet's insets where
   its rows sit straight in it (.vm-dt-dialog--inset: 22 at the top, 24
   at the sides, 14 between), the title (.vm-dt-dialog-h, 20) over its
   line (.vm-dt-dialog-sub, 13), and the foot (.vm-dt-dialog-foot: a
   hairline across the dialog, 16 24 20, holding §15's acts row).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sheet { transition: none; }
    .vm-sheet:not(.is-open) { visibility: hidden; box-shadow: none; }
    .vm-sheet.is-open {
        transition: none;
        top: 50%;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 440px;
        max-width: calc(100vw - 48px);
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        border-radius: 18px;
        box-shadow: 0 24px 64px rgba(2, 12, 27, .35);
        animation: vm-dt-dialog-in .16s ease-out;
    }
    .vm-sheet.is-open .vm-sheet-grab { display: none; }
    /* The modifiers carry one class more than the base rule, so they also
       win over the exams bar pages' 480px column cap on sheets. */
    .vm-sheet.vm-sheet--dt-400.is-open { width: 400px; max-width: calc(100vw - 48px); }
    .vm-sheet.vm-sheet--dt-480.is-open { width: 480px; max-width: calc(100vw - 48px); }
    .vm-sheet.vm-sheet--dt-720.is-open { width: 720px; max-width: calc(100vw - 48px); }

    .vm-dt-dialog-acts {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .vm-dt-dialog-acts > * { width: 100%; min-height: 48px; margin: 0; }
    .vm-dt-dialog-acts > :first-child { min-height: 52px; }

    /* The decision dialog (12's switch, 14's give-up: 12-d-pick,
       14-d-states), on the sheet: its body 28 in, the title at 22, the
       words at 15, the two named buttons both 52 — the solid act, then
       the grey way out. */
    .vm-dt-dialog--decision .vm-dt-dialog-body { padding: 28px 28px 24px; gap: 0; }
    .vm-dt-dialog--decision .vm-dt-dialog-title { font-size: 22px; letter-spacing: -.5px; line-height: 1.2; }
    .vm-dt-dialog--decision .vm-dt-dialog-text { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #334155; }
    .vm-dt-dialog--decision .vm-dt-dialog-acts { margin-top: 22px; gap: 10px; }
    .vm-dt-dialog--decision .vm-dt-dialog-acts > * {
        min-height: 52px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 700;
    }
    .vm-dt-dialog--decision .vm-dt-dialog-acts > :last-child { background: #f1f5f9; color: #0f172a; }
    .vm-dt-dialog--decision .vm-dt-dialog-acts > :focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    @media (hover: hover) {
        .vm-dt-dialog--decision .vm-dt-dialog-acts > :first-child:hover { background: #0c5b4c; }
        .vm-dt-dialog--decision .vm-dt-dialog-acts > :last-child:hover { background: #e2e8f0; }
    }

    /* The 18-25 dialog (see the head of this section). */
    .vm-sheet.vm-dt-dialog.is-open {
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
    }
    .vm-sheet.vm-dt-dialog :is(.vm-q-kp-cancel, .vm-sf-cancel, .vm-q-nf-cancel) {
        height: 44px;
        padding: 0 14px;
        border-radius: 999px;
        color: #0f6d5c;
        font-size: 14px;
    }
    .vm-sheet.vm-dt-dialog :is(.vm-q-kp-cancel, .vm-sf-cancel, .vm-q-nf-cancel):focus-visible {
        outline: 2px solid #0f6d5c;
        outline-offset: 2px;
    }
    @media (hover: hover) {
        .vm-sheet.vm-dt-dialog :is(.vm-q-kp-cancel, .vm-sf-cancel, .vm-q-nf-cancel):not([disabled]):hover { background: #e3f4f0; }
    }
    .vm-sheet.vm-dt-dialog--inset { padding: 22px 24px 0; gap: 14px; }
    .vm-dt-dialog-h {
        font-size: 20px;
        letter-spacing: -.4px;
        line-height: 1.25;
    }
    .vm-dt-dialog-sub { font-size: 13px; color: #475569; }
    .vm-dt-dialog-foot {
        padding: 16px 24px 20px;
        border-top: 1px solid #f0f2f4;
    }
    .vm-dt-dialog--inset .vm-dt-dialog-foot { margin: 8px -24px 0; }

    @keyframes vm-dt-dialog-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-sheet.is-open { animation: none; }
    }
}


/* ====================================================================
   4. POPOVERS
   From 901 a picker opens under its chip, not as a bottom sheet: white,
   radius 14, the house shadow, 280-320 wide. The page toggles `hidden`
   and positions the chip's wrapper (position: relative). Rows are 48
   tall (02-d-pick, 08-d-pick), the pressed one mint.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-pop {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 45;
        width: max-content;
        min-width: 280px;
        max-width: 320px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-dt-pop--end { left: auto; right: 0; }
    .vm-dt-pop-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 12px;
        background: transparent;
        color: #0f172a;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
    }
    .vm-dt-pop-row[aria-pressed="true"] {
        background: #e3f4f0;
        color: #0f6d5c;
        font-weight: 700;
    }
    .vm-dt-pop-row:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    @media (hover: hover) {
        .vm-dt-pop-row:hover { background: #f8fafc; }
        .vm-dt-pop-row[aria-pressed="true"]:hover { background: #e3f4f0; }
    }
}


/* ====================================================================
   5. PAGED RAILS
   A mouse cannot swipe: from 901 a rail is one full row with no
   scrollbar and no drag, paged by two 44px round arrows beside the
   section's See all. The page's JS pages the row (scrollBy on the same
   rail node; it snaps to a card). Arrows show only while more waits;
   the first one is greyed (disabled) on the first page.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-rail {
        overflow: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        scroll-padding-left: 0;
    }
    .vm-dt-rail::-webkit-scrollbar { display: none; }
    .vm-dt-rail > * { scroll-snap-align: start; }
    .vm-dt-rail-arrows { display: flex; align-items: center; gap: 8px; }
    .vm-dt-rail-arrow {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        background: #fff;
        color: #0f172a;
        font-size: 12px;
    }
    .vm-dt-rail-arrow[disabled] { color: #cbd5e1; cursor: default; }
    .vm-dt-rail-arrow:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    @media (hover: hover) {
        .vm-dt-rail-arrow:not([disabled]):hover { border-color: #16a085; color: #0f6d5c; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-dt-rail { scroll-behavior: auto; }
    }
}


/* ====================================================================
   6. THE ROUND ADD, AND THE TOOLTIP FROM ARIA-LABEL
   Pharmacy: a 44px white disc, a 1.5px #cfe7e0 ring, a teal plus; solid
   #16a085 with a white glyph under the pointer and on keyboard focus
   (a glyph, not text: the brand teal is allowed). Exams: the ring is
   #cbd5e1, the solid is #0f6d5c (never white on #16a085 there), and an
   exam already in the visit (aria-pressed="true") is the solid disc
   with the page's check glyph.
   .vm-dt-tip shows a control's own aria-label on hover and on keyboard
   focus: 12.5px ink on white, the house shadow. No new words.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-add {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #cfe7e0;
        color: #0f6d5c;
        font-size: 14px;
    }
    .vm-dt-add i { font-size: 14px; }
    .vm-dt-add:focus-visible {
        background: #16a085;
        box-shadow: none;
        color: #fff;
        outline: 2px solid #0f6d5c;
        outline-offset: 2px;
    }
    .vm-dt-add--exams { box-shadow: inset 0 0 0 1.5px #cbd5e1; }
    .vm-dt-add--exams:focus-visible { background: #0f6d5c; }
    .vm-dt-add--exams[aria-pressed="true"] {
        background: #0f6d5c;
        box-shadow: none;
        color: #fff;
    }
    /* A control's word (.vm-act-word), still its accessible name, is drawn
       on the phone only: from 901 the control is the round glyph. */
    .vm-act-word {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    @media (hover: hover) {
        .vm-dt-add:hover { background: #16a085; box-shadow: none; color: #fff; }
        .vm-dt-add--exams:hover { background: #0f6d5c; }
        .vm-dt-add--exams[aria-pressed="true"]:hover { background: #0c5b4c; }
    }

    .vm-dt-tip[aria-label] { position: relative; }
    .vm-dt-tip[aria-label]::after {
        content: attr(aria-label);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        z-index: 30;
        transform: translateX(-50%);
        padding: 6px 10px;
        border-radius: 8px;
        background: #fff;
        color: #0f172a;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .vm-dt-tip[aria-label]:focus-visible::after { opacity: 1; visibility: visible; }
    @media (hover: hover) {
        .vm-dt-tip[aria-label]:hover::after { opacity: 1; visibility: visible; }
    }
}


/* ====================================================================
   7. THE SIDE CARD'S HEAD, AND READ-ONLY BASKET LINES
   The head (02-d, 03-d to 07-d): a mint bar, the counter's cover as a
   48px tile with a 2px white ring, its name (Space Grotesk 16/700) over
   one teal sub-line. The lines (02-d, 05-d): a 44px tile, a dark x N
   badge on its corner, name + pack, the line's price at the right,
   tabular; four rows at most (the page renders the cap; the fifth row
   on is never drawn here either).
   And (D7): the head's band form (.vm-dt-side-head--band: the same head
   standing alone under a title, rounded 16, at 901-1119), the store tile
   where a counter has no cover (.vm-dt-cover-tile), the number printed
   under a Call door (.vm-dt-callnum: a laptop cannot dial; the page
   places it), and from 1120 the card's shell (.vm-dt-side-shell: white,
   radius 18, the house shadow) and the line a failed act writes in it
   (.vm-dt-card-fail).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-side-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        background: #e3f4f0;
    }
    .vm-dt-side-cover {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 12px;
        object-fit: cover;
        background: #f1f5f9;
        box-shadow: 0 0 0 2px #fff;
    }
    .vm-dt-side-id { flex: 1 1 auto; min-width: 0; }
    .vm-dt-side-name {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.25;
        color: #0f172a;
    }
    .vm-dt-side-sub {
        margin: 2px 0 0;
        font-size: 12.5px;
        line-height: 1.35;
        color: #0f6d5c;
    }
    .vm-dt-side-head--band { padding: 12px 14px; border-radius: 16px; }
    .vm-dt-cover-tile {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        color: #0f6d5c;
        font-size: 17px;
    }
    .vm-dt-callnum {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .02em;
        color: #0f172a;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .vm-dt-lines { margin: 0; padding: 4px 18px; list-style: none; }
    .vm-dt-line {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
    }
    .vm-dt-line + .vm-dt-line { border-top: 1px solid #eef1f5; }
    .vm-dt-line:nth-child(n+5) { display: none; }
    .vm-dt-line-thumb {
        position: relative;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: #f1f5f9;
        color: #94a3b8;
    }
    .vm-dt-line-thumb img {
        width: 100%;
        height: 100%;
        border-radius: 11px;
        object-fit: cover;
    }
    .vm-dt-line-qty {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #0f172a;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 0 0 2px #fff;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-line-body { flex: 1 1 auto; min-width: 0; }
    .vm-dt-line-name {
        margin: 0;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.3;
        color: #0f172a;
    }
    .vm-dt-line-pack {
        margin: 2px 0 0;
        font-size: 12px;
        line-height: 1.35;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-line-price {
        margin: 0;
        flex-shrink: 0;
        display: flex;
        align-items: baseline;
        gap: 3px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14.5px;
        font-weight: 700;
        color: #0f172a;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-line-cur {
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 10.5px;
        font-weight: 600;
        color: #64748b;
    }
}

@media (min-width: 1120px) {
    .vm-dt-side-shell {
        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);
    }
    /* A band head moved into the card is the card's head again. */
    .vm-dt-side-shell .vm-dt-side-head--band { padding: 14px; border-radius: 0; }
    .vm-dt-card-fail {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 10px 12px;
        border-radius: 10px;
        background: #fff;
        box-shadow: inset 0 0 0 1px #e2e8f0;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
    }
    .vm-dt-card-fail i { flex-shrink: 0; margin-top: 2px; font-size: 13px; color: #e74c3c; }
}


/* ====================================================================
   8. HOVER LIFT
   An actionable card rises 2px with the deeper house shadow and its
   name (.vm-dt-lift-name) turns teal. Under reduced motion the card does
   not move; the shadow and the name still answer the pointer.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-lift { transition: transform .16s ease, box-shadow .16s ease; }
    .vm-dt-lift-name { transition: color .16s ease; }
    @media (hover: hover) {
        .vm-dt-lift:hover {
            transform: translateY(-2px);
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px rgba(16, 24, 40, .12);
        }
        .vm-dt-lift:hover .vm-dt-lift-name { color: #0f6d5c; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-dt-lift,
        .vm-dt-lift-name { transition: none; }
        .vm-dt-lift:hover { transform: none; }
    }
}


/* ====================================================================
   9. STATES
   .vm-dt-dim: an act that cannot be taken yet (its reason is said
   beside it by the page), at .45, and it takes no pointer.
   And (D14, from 18-d-states, 21-d-states, 22-d-states, 23-d-states and
   the Try again of 15-25): a state that is a fact about the account (no
   structure on it, already listed) is one bordered white card,
   left-aligned (.vm-dt-state-card): its glyph on a 44 mint tile (the
   card's own <i>), the sentence at 21 (.vm-dt-state-card-t), its line
   (.vm-dt-state-card-b), and its ways out as mint pills in a row
   (.vm-dt-state-card-doors). A failed read is the same card at 18 20
   (.vm-dt-state-card--read: its sentence at 15, its line at 13.5) ending
   in Try again (.vm-dt-retry), the mint pill at 13.5. Every mint pill
   takes a 1.5px teal ring under the pointer, never a fill (the frames'
   style-hover; .vm-dt-ring-hover lends that ring to the pages' other
   mint and white pills). While a list is first read: a quiet skeleton
   (.vm-dt-skel: a heading's bar, .vm-dt-skel-h, over the cards'
   blocks, .vm-dt-skel-card, each page giving their heights), never a
   sentence and never a duration.
   The owner's home states (E10, from 31-d-states and 32-d-states: the
   read failed, no structure or counter on the account, not yours) are
   the lifted form (.vm-dt-state-card--lifted): no edge, the house
   shadow, 28 in, 10 between, the sentence in Space Grotesk at 22, its
   line at 15; the page's own acts under them.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-dim {
        opacity: .45;
        pointer-events: none;
    }

    .vm-dt-state-card {
        align-items: flex-start;
        gap: 0;
        padding: 26px 28px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
        text-align: left;
    }
    .vm-dt-state-card > i {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 17px;
    }
    .vm-dt-state-card-t {
        margin-top: 14px;
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 1.25;
        text-wrap: pretty;
    }
    .vm-dt-state-card-b {
        max-width: none;
        margin-top: 6px;
        font-size: 14.5px;
        color: #475569;
    }
    .vm-dt-state-card-doors {
        width: auto;
        max-width: none;
        margin-top: 18px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .vm-dt-state-card--read {
        align-items: normal;
        padding: 18px 20px;
        text-align: start;
    }
    .vm-dt-state-card--read .vm-dt-state-card-t {
        margin-top: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: normal;
        line-height: 1.35;
        color: #0f172a;
        text-wrap: wrap;
    }
    .vm-dt-state-card--read .vm-dt-state-card-b {
        margin-top: 4px;
        font-size: 13.5px;
    }
    .vm-dt-state-card--lifted {
        padding: 28px;
        gap: 10px;
        border: 0;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-dt-state-card--lifted .vm-dt-state-card-t {
        margin-top: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #0f172a;
    }
    .vm-dt-state-card--lifted .vm-dt-state-card-b {
        margin-top: 0;
        font-size: 15px;
        font-weight: 400;
        color: #475569;
    }
    .vm-dt-state-card .vm-dt-state-card-doors > a,
    .vm-dt-retry {
        height: 44px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
        font-weight: 700;
    }
    .vm-dt-retry { font-size: 13.5px; }
    .vm-dt-state-card .vm-dt-state-card-doors > a:focus-visible,
    .vm-dt-retry:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    @media (hover: hover) {
        .vm-dt-state-card .vm-dt-state-card-doors > a:hover,
        .vm-dt-retry:not(:disabled):hover,
        .vm-dt-ring-hover:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px #0f6d5c; color: #0f6d5c; }
    }

    .vm-dt-skel { gap: 12px; }
    .vm-dt-skel-h {
        width: 96px;
        height: 14px;
        border-radius: 7px;
        background: #e2e8f0;
    }
    .vm-dt-skel-card { border-radius: 18px; background: #eef2f6; }
}


/* ====================================================================
   10. THE BAND MATERIAL
   The exams side's band under the glass header (10a, 10b, 11, 14): the
   vertical's teal lit from the top right, a light edge above and a dark
   one below (.vm-dt-band; a page whose light falls elsewhere keeps its
   own background, 14). On it, the labelled glass exit (.vm-dt-band-exit,
   10b, 11, 14) and the ringed glass of 12's hero controls (.vm-dt-glass:
   Share and Directions; 12's exit wears the same glass from 12's own
   file, its markup being pinned). The page keeps its geometry. 09's
   counter band and 12's no-photo ground keep their own (another light,
   no edges).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-band {
        background:
            radial-gradient(70% 120% at 88% 0%, rgba(143, 240, 139, .14) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #0c5b4c 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(3, 32, 26, .55);
    }
    .vm-dt-band-exit {
        height: 44px;
        margin: 0;
        padding: 0 14px 0 12px;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 13px;
        background: rgba(255, 255, 255, .14);
        font-size: 13.5px;
        font-weight: 700;
    }
    .vm-dt-band-exit i { font-size: 14px; }
    .vm-dt-glass {
        height: 44px;
        border: 0;
        border-radius: 13px;
        background: rgba(255, 255, 255, .16);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    }
    @media (hover: hover) {
        .vm-dt-band-exit:hover { background: rgba(255, 255, 255, .2); color: #fff; }
        .vm-dt-glass:hover { background: rgba(255, 255, 255, .26); color: #fff; }
    }
}


/* ====================================================================
   11. THE HUB FOOTER
   From 901 the hub footer (01, 08, 11, 12; 03 hides it) is full-width
   navy with its content in the 1200 column: "Open your pharmacy" on its
   own row where the page carries it (01: words left, Get started right),
   four columns (the brand · Pharmacy · Support · Get in touch with
   Accepted payments under it), the bottom bar on one line (© left,
   Privacy · Terms, the locale chips right). Every string unchanged.
   The columns sit 44 under what is above them: the card, or the
   footer's top 4 (11-d, 12-d). The footer's own rule outweighs the
   exams side's 24px clearance for a page with no bar (it sits on the
   bottom bar's own 14 here).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-app.vm-dt-shell > .vm-foot {
        margin-top: 56px;
        padding: 4px max(24px, calc((100% - 1152px) / 2)) 0;
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
        column-gap: 40px;
        align-items: start;
    }
    .vm-app.vm-dt-shell > .vm-foot:has(> .vm-foot-open) { padding-top: 40px; }
    .vm-foot h5 { margin: 0 0 6px; font-size: 14px; }
    .vm-foot-open {
        grid-column: 1 / -1;
        grid-row: 1;
        margin: 0;
        padding: 28px 32px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 32px;
        align-items: center;
        text-align: left;
    }
    .vm-foot-open-glow {
        top: -170px;
        left: -60px;
        transform: none;
        width: 420px;
        height: 420px;
    }
    .vm-foot-open-title {
        grid-column: 1;
        grid-row: 1;
        font-size: 21px;
        letter-spacing: -.4px;
    }
    .vm-foot-open-sub { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: 14px; }
    .vm-foot-open-btn {
        grid-column: 2;
        grid-row: 1 / 3;
        width: auto;
        height: 48px;
        margin: 0;
        padding: 0 26px;
        font-size: 14px;
        white-space: nowrap;
    }
    .vm-foot-brand { grid-column: 1; grid-row: 2 / 4; padding: 44px 0 8px; }
    .vm-foot-blurb { max-width: 300px; margin-top: 14px; font-size: 13.5px; }
    .vm-foot-cols { display: contents; }
    .vm-foot-cols > div:nth-child(1) { grid-column: 2; grid-row: 2 / 4; padding-top: 44px; }
    .vm-foot-cols > div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; padding-top: 44px; }
    .vm-foot-links a { gap: 8px; font-size: 13.5px; }
    .vm-foot-links a i { margin-right: 0; }
    .vm-foot-touch { grid-column: 4; grid-row: 2; padding: 44px 0 0; }
    .vm-foot-touch h5 { margin-bottom: 12px; }
    .vm-foot-touch-row strong { font-size: 13px; }
    .vm-foot-touch-row span,
    .vm-foot-touch-row a { font-size: 12.5px; }
    .vm-foot-pay { grid-column: 4; grid-row: 3; padding: 26px 0 8px; text-align: left; }
    .vm-foot-pay h5 { margin-bottom: 10px; }
    .vm-foot-pay-pills { justify-content: flex-start; }
    .vm-foot-pill { font-size: 12.5px; }
    .vm-foot-bottom {
        grid-column: 1 / -1;
        grid-row: 4;
        position: relative;
        margin-top: 32px;
        padding: 12px 0 14px;
        border-top: 0;
        display: flex;
        align-items: center;
        gap: 24px;
        text-align: left;
    }
    /* The bottom bar's hairline runs the window's width (the footer clips). */
    .vm-foot-bottom::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100vmax;
        right: -100vmax;
        height: 1px;
        background: rgba(148, 163, 184, .2);
    }
    .vm-foot-copy { order: 1; margin: 0; font-size: 12.5px; }
    .vm-foot-legal { order: 2; justify-content: flex-start; gap: 4px 20px; }
    .vm-foot-legal a { font-size: 12.5px; }
    .vm-foot-locale { order: 3; margin: 0 0 0 auto; }
    @media (hover: hover) {
        .vm-foot a.vm-foot-open-btn:hover { background: #0c5b4c; }
    }
}


/* ====================================================================
   12. THE OWNER HEADER
   The supply side's own header (README "Three headers"): the counter's
   (25, 09-d's) and the structure side's (18, 21, 22, 23b, 18-d's) are
   one class set, the same material and geometry; only the tile and the
   tab words differ. Never the customer's header. Each owner page carries
   an empty, hidden placeholder (<div class="vm-dt-ohead vm-dt-only"
   data-dt-ohead hidden>) as the first child of its root; the page's own
   slice fills it (js/<hub>/owner-head.js) and shows it from 901 only.
   The row, sticky at the window's top, 64 tall plus its hairline (the
   customer header's 65): the identity at its left (.vm-dt-ohead-id: a 34
   tile, the cross on the counter side, the initials on the structure
   side, then the name over its line), an optional centre slot
   (.vm-dt-ohead-mid: the queue's find pill; absent elsewhere), and the
   three tabs at its right as the glass header's pills (white at 90%, the
   lit one rgba(255,255,255,.18) with aria-current="page"). Queue's count
   (.vm-dt-ohead-badge) is drawn here in its shape only: its fill is
   prescription blue, which this file never carries (it is the exams
   side's too), so the counter's own screen file paints it.
   The material is the band's (section 10), its top slice: the band that
   follows the header starts where this ends, so the two read as one
   piece, the frame's hairline between them. The queue draws this header
   too since D14 (its find pill in the centre slot). A placeholder left
   empty (no counter or no structure on the account) is not drawn, even
   when the window crosses 901px under it.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-ohead:empty { display: none; }
    .vm-dt-ohead {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background:
            radial-gradient(70% 120% at 88% 0%, rgba(143, 240, 139, .14) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #11735d 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    }
    .vm-dt-ohead-in {
        max-width: 1200px;
        height: 64px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    /* -- The identity: the tile, then the name over its line. */
    .vm-dt-ohead-id {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .vm-dt-ohead-id > div { min-width: 0; }
    .vm-dt-ohead-tile {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 12px;
        background: rgba(255, 255, 255, .11);
        color: #8ff08b;
        line-height: 1;
    }
    .vm-dt-ohead-tile--cross i { font-size: 16px; }
    .vm-dt-ohead-tile--initials {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px;
        font-weight: 700;
    }
    .vm-dt-ohead-name {
        margin: 0;
        overflow: hidden;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.2;
        color: #fff;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .vm-dt-ohead-line {
        margin: 2px 0 0;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.35;
        color: #e2e8f0;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-variant-numeric: tabular-nums;
    }

    /* -- The centre slot, and the three tabs at the right. */
    .vm-dt-ohead-mid {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
    }
    .vm-dt-ohead-tabs {
        margin-left: auto;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .vm-dt-ohead-tab {
        height: 44px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border-radius: 999px;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1;
        color: rgba(255, 255, 255, .9);
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .16s ease, color .16s ease;
    }
    .vm-dt-ohead-tab[aria-current="page"] {
        background: rgba(255, 255, 255, .18);
        color: #fff;
        font-weight: 600;
    }
    .vm-dt-ohead-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .vm-dt-ohead-badge {
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }
    @media (hover: hover) {
        .vm-dt-ohead-tab:hover { background: rgba(255, 255, 255, .18); color: #fff; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-dt-ohead-tab { transition: none; }
    }
}


/* ====================================================================
   13. THE BANDS
   Both in the band material (section 10's, whole), each laying its own
   content in the 1200 column (the padding does the column).
   The flow band (.vm-dt-flow-band, 18-d's: pushed task pages): one row,
   the glass exit naming where she came from (.vm-dt-band-exit, section
   10) | the title (.vm-dt-flow-band-title) at 40, 36 below 1120. The
   name line the phone prints under the title is the page's to hide from
   901: the header says it.
   The one-row band (.vm-dt-row-band, 16-d's, 21-d's, 22-d's, 25-d's:
   lists): the state block (.vm-dt-row-band-state: the sentence as the
   headline, .vm-dt-row-band-headline 40 / 36, and its second line under
   it, .vm-dt-row-band-sub) | a right block (.vm-dt-row-band-side, 340
   from 1120, its content's width below) for a door, or an eyebrow and a
   sentence. While a query is held the band folds away (.is-folded): the
   matches sit under the header.
   Since D14: the fold draws nothing and takes no room, but keeps the
   band's identity (the page's h1, in .vm-dt-band-id) and any live region
   of its own in the tree, so assistive tech still has the page's name.
   The identity of a row band holding a state sentence is read, not
   drawn (.vm-dt-band-id--hidden: the header carries the name; 22, 23b).
   The eyebrow form of the right block (.vm-dt-row-band-side--eyebrow,
   16-d's date and 20-d's account line): on the node holding the eyebrow,
   the right column's first row, the eyebrow 24 high in 12px mint on one
   line; the page places what stands under it. Bands under the customer's
   glass header (15, 16, 20, 24) take the frames' light from the top left
   (.vm-dt-band--customer); bands under the owner header keep section
   10's from the top right. A flow band whose page swaps the headers (23a)
   takes that light, and clears the header (65 + its own 20), only while
   the glass header is over it (.vm-dt-flow-band--under-glass).
   Since E10: the flow band with a line under its title
   (.vm-dt-flow-band--sub, 23a, 27a, 29b-29h, 31b-31e): the exit row (the
   band's first child) across two rows | the title over its line
   (.vm-dt-flow-band-sub: 15, slate light, 6 under the title; the line's
   own height is its phone class's). The identity is read, not drawn
   (.vm-dt-band-id--hidden) also on a band folded to its field while a
   search is held (26, 30: the page's .has-q on the band) and on a lead
   band showing its lead (a child not hidden holding section 19's
   .vm-dt-lead-band-main: 29a, 31a, 32a).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-flow-band,
    .vm-dt-row-band {
        background:
            radial-gradient(70% 120% at 88% 0%, rgba(143, 240, 139, .14) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #0c5b4c 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(3, 32, 26, .55);
        color: #fff;
    }

    .vm-dt-flow-band {
        padding: 20px max(24px, calc((100% - 1152px) / 2)) 28px;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .vm-dt-flow-band > .vm-dt-band-exit { flex-shrink: 0; }
    .vm-dt-flow-band-title {
        min-width: 0;
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: -1.2px;
        line-height: 1.1;
        color: #fff;
        text-wrap: balance;
    }
    .vm-dt-flow-band.vm-dt-flow-band--sub {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 0;
        align-items: center;
    }
    .vm-dt-flow-band--sub.vm-dt-flow-band > :first-child { grid-column: 1; grid-row: 1 / span 2; }
    .vm-dt-flow-band--sub.vm-dt-flow-band > .vm-dt-flow-band-title { grid-column: 2; grid-row: 1; margin: 0; }
    .vm-dt-flow-band--sub.vm-dt-flow-band > .vm-dt-flow-band-sub {
        grid-column: 2;
        grid-row: 2;
        margin: 6px 0 0;
        font-size: 15px;
        color: #e2e8f0;
    }

    .vm-dt-row-band {
        padding: 26px max(24px, calc((100% - 1152px) / 2)) 30px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 48px;
        align-items: end;
    }
    .vm-dt-row-band.is-folded {
        display: block;
        height: 0;
        padding: 0;
        overflow: hidden;
        background: none;
        box-shadow: none;
    }
    .vm-dt-row-band.is-folded > :not(.vm-dt-band-id):not([aria-live]) { display: none; }
    .vm-dt-row-band-state { min-width: 0; }
    .vm-dt-row-band-headline {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: -1.2px;
        line-height: 1.1;
        color: #fff;
        text-wrap: balance;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-row-band-sub {
        margin: 10px 0 0;
        font-size: 16px;
        line-height: 1.5;
        color: #e2e8f0;
        text-wrap: pretty;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-row-band-sub strong { color: #fff; font-weight: 600; }
    .vm-dt-row-band-side {
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 4px;
    }
    .vm-dt-row-band-side--eyebrow { grid-column: 2; grid-row: 1; min-width: 0; }
    .vm-dt-row-band-side--eyebrow > * {
        height: 24px;
        gap: 8px;
        font-size: 12px;
        color: #8ff08b;
        white-space: nowrap;
    }
    .vm-dt-row-band-side--eyebrow i { font-size: 12px; }
    .vm-dt-row-band:has(> .vm-dt-row-band-state:not([hidden])) > .vm-dt-band-id--hidden,
    .has-q > .vm-dt-band-id--hidden,
    .vm-dt-lead-band:has(> :not([hidden]) > .vm-dt-lead-band-main) > .vm-dt-band-id--hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* -- Under the customer's glass header (after the material above). */
    .vm-dt-band--customer {
        background:
            radial-gradient(70% 120% at 10% 0%, rgba(143, 240, 139, .16) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #0c5b4c 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(3, 32, 26, .55);
    }
    body:has(> .vm-dt-header--glass:not([hidden])) .vm-dt-flow-band--under-glass {
        padding-top: 85px;
        background:
            radial-gradient(70% 120% at 10% 0%, rgba(143, 240, 139, .16) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #0c5b4c 100%);
    }
}

@media (min-width: 1120px) {
    .vm-dt-flow-band-title,
    .vm-dt-row-band-headline { font-size: 40px; }
    .vm-dt-row-band { grid-template-columns: minmax(0, 1fr) 340px; }
}


/* ====================================================================
   14. LEDGER ROWS
   Lists are ledgers (16-d's): one bordered container (.vm-dt-ledger,
   radius 18, #f0f2f4 hairlines between rows) of rows (.vm-dt-ledger-row,
   64 at least): a 40 tile (.vm-dt-ledger-tile) | the name over its line
   (.vm-dt-ledger-main > .vm-dt-ledger-name + .vm-dt-ledger-line) | the
   page's aligned columns (.vm-dt-ledger-col; money, .vm-dt-ledger-money,
   tabular and right-aligned) | the chevron (.vm-dt-ledger-chev, 14). No
   column headers. The grid here is tile | main | chevron: each page sets
   its own columns (grid-template-columns) in its screen file. A row is a
   link or a button (or the list item holding one); it answers the
   pointer in #f8fafc.
   Two forms (D14, from the screens that drew them): .vm-dt-ledger--lifted
   (17-d's medicines: no edge, the house shadow) and .vm-dt-ledger--mint
   (21-d's, 22-d's and 25-d's: the rows 16 in and 18 at the right, 16
   between columns, a mint tile, the name at 700 and the money at 17,
   both in ink, the chevron teal at 13). The mint form names the rows'
   container, which need not be a .vm-dt-ledger (25's group draws its
   own edges).
   The door row (.vm-dt-ledger-row--door, E10, from 29-d and 31-d: an
   owner's "Your page" ledger, each row the door to one of its views):
   tile 40 | the label 196 | the code's lines | the chevron 16, 16
   between, 64 at least; the page's own markup in it (its main a
   contents box), the page's own hairline colour where its phone rule
   draws one.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-ledger {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
    }
    .vm-dt-ledger--lifted {
        border: 0;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-dt-ledger-row {
        width: 100%;
        min-height: 64px;
        margin: 0;
        padding: 12px 20px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 14px;
        column-gap: 14px;
        align-items: center;
        border: 0;
        border-radius: 0;
        background: #fff;
        color: #0f172a;
        font: inherit;
        text-align: left;
        text-decoration: none;
    }
    /* The hairline between rows, after the row's own border reset. */
    .vm-dt-ledger > * + * { border-top: 1px solid #f0f2f4; }
    .vm-dt-ledger-row:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    .vm-dt-ledger-row--door {
        min-height: 64px;
        padding: 11px 20px;
        display: grid;
        grid-template-columns: 40px 196px minmax(0, 1fr) 16px;
        column-gap: 16px;
        align-items: center;
        text-decoration: none;
    }
    .vm-dt-ledger-tile {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #f1f5f9;
        color: #334155;
        font-size: 14px;
        line-height: 1;
    }
    .vm-dt-ledger-main { min-width: 0; }
    .vm-dt-ledger-name {
        display: block;
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: #0f172a;
    }
    .vm-dt-ledger-line {
        display: block;
        margin: 2px 0 0;
        font-size: 13.5px;
        line-height: 1.4;
        color: #475569;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-ledger-col {
        min-width: 0;
        font-size: 13.5px;
        line-height: 1.4;
        color: #334155;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-ledger-money {
        min-width: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #334155;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-ledger-chev {
        justify-self: center;
        font-size: 14px;
        color: #64748b;
    }

    .vm-dt-ledger--mint .vm-dt-ledger-row { padding: 10px 18px 10px 16px; column-gap: 16px; }
    .vm-dt-ledger--mint .vm-dt-ledger-tile { background: #e3f4f0; color: #0f6d5c; }
    .vm-dt-ledger--mint .vm-dt-ledger-name { font-weight: 700; color: #0f172a; }
    .vm-dt-ledger--mint .vm-dt-ledger-money { font-size: 17px; color: #0f172a; }
    .vm-dt-ledger--mint .vm-dt-ledger-chev { font-size: 13px; color: #0f6d5c; }
    @media (hover: hover) {
        .vm-dt-ledger-row:hover,
        .vm-dt-ledger-row--door:hover { background: #f8fafc; }
    }
}


/* ====================================================================
   15. DIALOG ACTS SIDE BY SIDE, AND THE QUIET ACT
   On 18-25 a dialog ends with its two named buttons in a row at its
   right (18-d's): Cancel, then the solid commit. The phone writes them
   stacked, the commit first (section 3's .vm-dt-dialog-acts); the row
   (.vm-dt-dialog-acts--row on the same node) reverses them on screen, so
   no markup moves. Both 48 tall pills; the commit keeps the page's own
   solid colours, Cancel is teal words that take a mint fill under the
   pointer (E10: 31, 32 and 34 drew it so; it was grey words). A Cancel
   outside the row (31's, 32's, 34's dialogs lay their own foot) wears
   the same words by its own class, .vm-dt-act-cancel: 48 tall, 18 in.
   A quiet act (.vm-dt-act-quiet: Remove, Take it off) is a white pill
   ringed 1.5px #cbd5e1 in ink, never red; in a dialog's acts row it keeps
   the row's size (D14: 20's ticked "Remove my account"), and one that
   cannot be taken (disabled, or aria-disabled while busy) does not answer
   the pointer.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-dialog-acts--row {
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
    }
    .vm-dt-dialog-acts--row > * {
        width: auto;
        min-height: 48px;
        margin: 0;
        padding: 0 28px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
    }
    .vm-dt-dialog-acts--row > :first-child { min-height: 48px; }
    .vm-dt-dialog-acts--row > :last-child:not(:first-child),
    .vm-dt-act-cancel {
        padding: 0 20px;
        background: transparent;
        box-shadow: none;
        color: #0f6d5c;
        font-size: 14.5px;
    }
    .vm-dt-act-cancel {
        height: 48px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        font-weight: 700;
        white-space: nowrap;
    }
    .vm-dt-act-cancel:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    .vm-dt-dialog-acts--row > :focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* In a dialog's acts row the quiet act also outweighs a page's own
       state rule on the same button (20's .vm-ac-rm-go.is-armed). */
    .vm-dt-act-quiet,
    .vm-dt-dialog-acts--row > .vm-dt-act-quiet {
        min-height: 44px;
        padding: 0 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #cbd5e1;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
    }
    .vm-dt-act-quiet:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    .vm-dt-dialog-acts--row > .vm-dt-act-quiet {
        min-height: 48px;
        padding: 0 28px;
        font-size: 15px;
    }
    @media (hover: hover) {
        .vm-dt-dialog-acts--row > :last-child:not(:first-child):hover,
        .vm-dt-act-cancel:not(:disabled):hover { background: #e3f4f0; color: #0f6d5c; }
        .vm-dt-act-quiet:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 1.5px #475569; color: #0f172a; }
    }
}


/* ====================================================================
   16. THE COLUMN THAT SCROLLS
   From 1120 the 340 column is sticky (section 2's .vm-dt-aside) only
   when it holds the screen's act (18, 22c, 23a, 24b). Where it does not
   (15, 16, 19, 20, 21, 22a, 24a, 25a) it scrolls with the page:
   .vm-dt-aside--flow on the same node.
   ==================================================================== */
@media (min-width: 1120px) {
    .vm-dt-aside.vm-dt-aside--flow,
    .vm-dt-aside--flow {
        position: static;
        top: auto;
    }
}


/* ====================================================================
   17. SETTINGS SECTIONS AND LABELLED ROWS
   A settings section (.vm-dt-settings): its heading block
   (.vm-dt-settings-head: .vm-dt-settings-h at 21, .vm-dt-settings-sub
   under it) beside its card (.vm-dt-settings-card) from 1120, in a 232
   column; one column, the heading over the card, from 901 to 1119.
   Labelled rows (.vm-dt-labelled, 23-d's and 22-d-publish's): a card of
   rows (.vm-dt-labelled-row), each its label (.vm-dt-labelled-label,
   172) | its control (.vm-dt-labelled-control, 460 at most), hairlines
   between them. Every child of a row but its label goes in the control
   column, 460 at most, top-aligned (D14: the code's fields carry several
   controls and lines with no wrapper; 22c, 23a).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-settings {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
        align-items: start;
    }
    .vm-dt-settings-head { min-width: 0; }
    .vm-dt-settings-h {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -.4px;
        line-height: 1.25;
        color: #0f172a;
    }
    .vm-dt-settings-sub {
        margin: 6px 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
        text-wrap: pretty;
    }
    .vm-dt-settings-card,
    .vm-dt-labelled {
        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-dt-labelled-row {
        display: grid;
        grid-template-columns: 172px minmax(0, 1fr);
        column-gap: 28px;
        align-items: start;
        padding: 20px 24px;
    }
    .vm-dt-labelled-row > * {
        grid-column: 2;
        min-width: 0;
        max-width: 460px;
    }
    .vm-dt-labelled-row > .vm-dt-labelled-label {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
    }
    .vm-dt-labelled-row + .vm-dt-labelled-row { border-top: 1px solid #f0f2f4; }
    .vm-dt-labelled-label {
        margin: 0;
        padding-top: 14px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        color: #334155;
    }
    .vm-dt-labelled-control {
        min-width: 0;
        max-width: 460px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

@media (min-width: 1120px) {
    .vm-dt-settings {
        grid-template-columns: 232px minmax(0, 1fr);
        column-gap: 32px;
        row-gap: 0;
    }
}


/* ====================================================================
   18. SECTION HEADS AND DATE TILES
   (D14, from 15-d, 16-d and 24-d.) A list page's section head
   (.vm-dt-sec-h: "Coming up", "Today", "Newest"): Space Grotesk 21/700
   in ink on a 32 line. Where a page moves a section into its 340 column
   it sets the head there at 17 itself (the move is the page's). A visit's
   date tile (.vm-dt-date-tile: 48, radius 14, the weekday at 11 over the
   date at 19) and its small form (.vm-dt-date-tile--sm: 40, radius 12,
   10.5 over 17), its two lines the tile's own first and last child
   (render.js `dateTileHtml`).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-sec-h {
        padding: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -.4px;
        line-height: 32px;
        color: #0f172a;
    }
    .vm-dt-date-tile {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
    .vm-dt-date-tile > :first-child { font-size: 11px; letter-spacing: .06em; }
    .vm-dt-date-tile > :last-child {
        margin-top: 3px;
        font-size: 19px;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-date-tile--sm {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .vm-dt-date-tile--sm > :first-child { font-size: 10.5px; }
    .vm-dt-date-tile--sm > :last-child { font-size: 17px; }
}


/* ====================================================================
   19. THE LEAD BAND ON AN OWNER'S HOME
   (Desktop slice E0, 2026-10-09; briefs/2026-10-09_desktop-build-rules-
   26-34.md §4. Frames read for values: 29-d, 31-d, 32-d.) The home of an
   owner's page (29a, 31a, 32a) has no flow band: its lead card is the
   band, under the owner header, in the band material (section 10's,
   whole), its content in the 1200 column (the padding does the column),
   one row: the glass exit (.vm-dt-band-exit) naming where she came from,
   then the lead (.vm-dt-lead-band-main: the key line
   .vm-dt-lead-band-k at 13.5, the headline .vm-dt-lead-band-headline at
   40 at both tiers (E10: 29-d, 31-d and 32-d draw 40 at 1000 too; the
   flow band keeps 36 below 1120), its line .vm-dt-lead-band-sub under
   it with its mint glyph, then the code's own sentence,
   .vm-dt-lead-band-say), and
   at the right the page's act(s) (.vm-dt-lead-band-acts): the solid
   white pill on the mat (.vm-dt-lead-band-solid) and the glass second
   (.vm-dt-lead-band-glass), both 48 tall. A page that already writes its
   own button classes lays them in the acts slot and takes the forms by
   the two act classes on the same node.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-lead-band {
        padding: 22px max(24px, calc((100% - 1152px) / 2)) 30px;
        display: flex;
        align-items: center;
        gap: 24px;
        background:
            radial-gradient(70% 120% at 88% 0%, rgba(143, 240, 139, .14) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #0c5b4c 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(3, 32, 26, .55);
        color: #fff;
    }
    .vm-dt-lead-band > .vm-dt-band-exit { flex-shrink: 0; }
    .vm-dt-lead-band-main {
        flex: 1 1 auto;
        min-width: 0;
    }
    .vm-dt-lead-band-k {
        margin: 0;
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: .01em;
        line-height: 1.4;
        color: #e2e8f0;
    }
    .vm-dt-lead-band-headline {
        margin: 4px 0 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 40px;
        font-weight: 700;
        letter-spacing: -1px;
        line-height: 1.1;
        color: #fff;
        text-wrap: balance;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-lead-band-sub,
    .vm-dt-lead-band-say {
        margin: 8px 0 0;
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 15px;
        line-height: 1.5;
        color: #e2e8f0;
        text-wrap: pretty;
        font-variant-numeric: tabular-nums;
    }
    .vm-dt-lead-band-sub > i,
    .vm-dt-lead-band-say > i {
        width: 14px;
        flex-shrink: 0;
        margin-top: 4px;
        font-size: 14px;
        text-align: center;
        color: #8ff08b;
    }
    .vm-dt-lead-band-sub strong,
    .vm-dt-lead-band-say strong { color: #fff; font-weight: 600; }
    .vm-dt-lead-band-acts {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .vm-dt-lead-band-solid,
    .vm-dt-lead-band-glass {
        min-height: 48px;
        margin: 0;
        padding: 0 22px 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        flex-shrink: 0;
        border: 0;
        border-radius: 999px;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color .16s ease, color .16s ease;
    }
    .vm-dt-lead-band-solid i,
    .vm-dt-lead-band-glass i { font-size: 13px; }
    .vm-dt-lead-band-solid {
        background: #fff;
        box-shadow: 0 6px 16px rgba(3, 32, 26, .28);
        color: #0f6d5c;
    }
    .vm-dt-lead-band-glass {
        background: rgba(255, 255, 255, .12);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
        color: #fff;
    }
    .vm-dt-lead-band-solid:focus-visible,
    .vm-dt-lead-band-glass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    @media (hover: hover) {
        .vm-dt-lead-band-solid:hover { background: #f4fbf9; color: #0f6d5c; }
        .vm-dt-lead-band-glass:hover { background: rgba(255, 255, 255, .2); color: #fff; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-dt-lead-band-solid,
        .vm-dt-lead-band-glass { transition: none; }
    }
}



/* ====================================================================
   20. TAKE-BACK ACTS ON THE MAT
   (Desktop slice E0, 2026-10-09; rules §4, 32-d's Remove this night and
   Stop tonight's duty.) On a band the quiet act (section 15's
   .vm-dt-act-quiet) takes its glass outline form,
   .vm-dt-act-quiet--glass on the same node: a 44-tall pill, no fill, a
   1.5px white ring at 45%, white words, a faint glass fill under the
   pointer. On white, .vm-dt-act-quiet as before. Never underlined text,
   never red.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-act-quiet.vm-dt-act-quiet--glass {
        min-height: 44px;
        padding: 0 18px;
        background: transparent;
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .vm-dt-act-quiet.vm-dt-act-quiet--glass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    @media (hover: hover) {
        .vm-dt-act-quiet.vm-dt-act-quiet--glass:not(:disabled):not([aria-disabled="true"]):hover {
            background: rgba(255, 255, 255, .1);
            box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
            color: #fff;
        }
    }
}


/* ====================================================================
   21. THE OPEN FLOW (23, 27)
   (Desktop slice E10, 2026-10-09: the rules 23-list-your-structure.css
   and 27-open.css each wrote, value for value, brought here; frames
   23-d and 27-d, their -narrow and -states, read through each screen's
   FACTS.) Listing a structure (23) and opening a pharmacy (27) are one
   flow on two hubs: the page (.vm-dt-open-page, the form's
   .vm-dt-open-page--form; one 908 column, 28 under the band; from 1120
   the 1200 column, the form | the sticky 340 column .vm-dt-open-col, the
   column not drawn over a state card), its sections
   (.vm-dt-open-form, -sec, the head -h at 21) of section 17's labelled
   rows (.vm-dt-open-fields; 10 between a field's lines), the controls 52
   tall (-input, -textarea, the select's box -selectbox), the lines under
   a control (-help, and what is wrong in ink, -err; -err--tuck under a
   row, 224 in), the pin's row (-pin, its tile -tile 40, -pin-t over
   -pin-s, Remove -pin-x, -err--pin under it), the lead card (-lead,
   -lead-in, the key -lead-k at 12, -lead-h at 28, -lead-rows of
   -lead-row) and the commit bar (-bar, -bar-in, the refusal -fault):
   from 901 to 1119 the lead card in two halves (each
   page gives its columns) and the bar a grid, its lines right-aligned
   beside the pill; from 1120 both in the column. Once the page is made,
   what it needs (-needs: -needs-head, -needs-h at 21, -needs-sub, then
   -needs-list, one bordered card of door rows -door: tile 40 | -door-t
   over -door-s | the chevron -chev; the act's row -door--act ends in its
   solid -add). Each screen file keeps what is its own: the select, the
   address rows' order, the field widths, its colours where the frames
   differ, the terms line under the commit (its class is pinned by
   site-legal.spec.js), the pills (23), the delivery rows and the draft
   line (27).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dt-open-page {
        width: 100%;
        max-width: 908px;
        margin-left: auto;
        margin-right: auto;
        padding: 28px 24px 64px;
    }
    .vm-dt-open-page--form { gap: 32px; }
    .vm-dt-open-page > .vm-loading {
        padding: 4px 2px;
        font-size: 14px;
        color: #64748b;
    }
    .vm-dt-open-form { gap: 32px; }
    .vm-dt-open-sec { gap: 14px; }
    .vm-dt-open-h {
        padding: 0;
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 1.25;
    }

    /* The cards of labelled rows (section 17) and their controls. */
    .vm-dt-open-fields {
        padding: 0;
        gap: 0;
    }
    .vm-dt-open-page .vm-dt-labelled-row { row-gap: 10px; }
    .vm-dt-open-input {
        height: 52px;
        padding: 0 16px;
        border-radius: 13px;
        font-size: 16px;
    }
    .vm-dt-open-textarea {
        min-height: 52px;
        padding: 13px 16px;
        border-radius: 13px;
        font-size: 16px;
        line-height: 1.45;
    }
    .vm-dt-open-selectbox > i { right: 16px; font-size: 13px; color: #475569; }
    .vm-dt-open-help {
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
        text-wrap: pretty;
    }
    .vm-dt-open-err {
        padding: 0;
        font-size: 13.5px;
        line-height: 1.4;
        color: #0f172a;
    }
    .vm-dt-open-err--tuck {
        margin: -10px 0 0;
        padding: 0 24px 18px 224px;
    }

    /* The pin's row, across the card. */
    .vm-dt-open-pin {
        min-height: 72px;
        padding: 12px 18px 12px 24px;
        gap: 14px;
        border-top-color: #f0f2f4;
    }
    .vm-dt-open-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .vm-dt-open-pin-t {
        font-size: 15px;
        font-weight: 700;
    }
    .vm-dt-open-pin-s {
        font-size: 13.5px;
        font-weight: 400;
        color: #64748b;
        text-wrap: pretty;
    }
    .vm-dt-open-pin-x {
        padding: 0 16px;
        font-size: 13.5px;
    }
    .vm-dt-open-err--pin { padding: 0 24px 16px 78px; }

    /* The lead card and the commit bar's refusal. */
    .vm-dt-open-lead { padding: 14px; }
    .vm-dt-open-lead-k { font-size: 12px; }
    .vm-dt-open-lead-h {
        margin-top: 6px;
        font-size: 28px;
        letter-spacing: -.7px;
        line-height: 1.15;
    }
    .vm-dt-open-lead-rows { margin-top: 14px; gap: 8px; }
    .vm-dt-open-lead-row {
        gap: 10px;
        padding: 10px 12px;
    }
    .vm-dt-open-lead-row > i {
        width: 13px;
        margin-top: 4px;
        text-align: center;
    }
    .vm-dt-open-lead-row > span {
        font-size: 13.5px;
        line-height: 1.45;
        text-wrap: pretty;
    }
    .vm-dt-open-fault {
        font-size: 13.5px;
        line-height: 1.4;
        color: #0f172a;
    }

    /* What the new page needs: one bordered card of door rows. */
    .vm-dt-open-needs {
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .vm-dt-open-needs-head { padding: 0; }
    .vm-dt-open-needs-h {
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 1.25;
    }
    .vm-dt-open-needs-sub {
        margin-top: 4px;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    .vm-dt-open-needs-list {
        margin-top: 16px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
    }
    .vm-dt-open-door {
        min-height: 72px;
        padding: 12px 18px 12px 16px;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 14px;
        column-gap: 16px;
        align-items: center;
        border-top-color: #f0f2f4;
    }
    .vm-dt-open-needs-list > :first-child { border-top: 0; }
    .vm-dt-open-door > .vm-dt-open-chev { justify-self: center; }
    .vm-dt-open-door-t {
        font-size: 15.5px;
        font-weight: 700;
    }
    .vm-dt-open-door-s {
        margin-top: 3px;
        font-size: 14px;
        line-height: 1.45;
        color: #475569;
    }
    .vm-dt-open-door--act {
        min-height: 76px;
        padding: 12px 16px;
        grid-template-columns: 40px minmax(0, 1fr) auto;
    }
    .vm-dt-open-door--act > .vm-dt-open-add {
        width: auto;
        height: 48px;
        padding: 0 22px 0 18px;
        font-size: 14.5px;
        white-space: nowrap;
    }
    .vm-dt-open-door--act > .vm-dt-open-add i { font-size: 12px; }
    @media (hover: hover) {
        .vm-dt-open-door--act > .vm-dt-open-add:hover { background: #0c5b4c; color: #fff; }
    }
}

/* 901 to 1119: one column; the lead card first, in two halves (the
   headline | its rows; each page gives the halves' widths); the commit
   bar at the window's foot (section 2's owner bar), its lines
   right-aligned beside the pill. */
@media (min-width: 901px) and (max-width: 1119px) {
    .vm-dt-open-lead-in {
        display: grid;
        column-gap: 24px;
        align-items: center;
        padding: 18px 20px;
    }
    .vm-dt-open-lead-k { grid-column: 1; grid-row: 1; align-self: end; }
    .vm-dt-open-lead-h { grid-column: 1; grid-row: 2; align-self: start; }
    .vm-dt-open-lead-rows {
        grid-column: 2;
        grid-row: 1 / 3;
        margin-top: 0;
    }
    .vm-dt-open-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 20px;
        row-gap: 2px;
        align-items: center;
    }
    .vm-dt-open-bar > * {
        grid-column: 1;
        padding: 0;
        text-align: right;
    }
    .vm-dt-open-bar > .vm-dt-open-bar-in {
        grid-column: 2;
        grid-row: 1 / 4;
    }
}

/* 1120 and up: the form | the sticky column (the lead card, the commit
   its foot with the terms under it); the column belongs to the form, so
   it is not drawn over a state card. */
@media (min-width: 1120px) {
    .vm-dt-open-page {
        max-width: 1200px;
        padding: 32px 24px 64px;
    }
    .vm-dt-open-page--form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        align-items: start;
    }
    .vm-dt-open-page--form > * { grid-column: 1; }
    .vm-dt-open-col {
        grid-column: 2;
        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-dt-open-page--form:has(> [data-form][hidden]) > .vm-dt-open-col { display: none; }
    .vm-dt-open-col > .vm-dt-open-lead {
        border-radius: 0;
        box-shadow: none;
    }
    .vm-dt-open-col .vm-dt-open-lead-in { padding: 16px 16px 18px; }
    .vm-dt-open-col > .vm-dt-open-bar {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px 18px;
        border-top: 1px solid #eef1f5;
        box-shadow: none;
    }
    .vm-dt-open-col .vm-dt-open-fault,
    .vm-dt-open-col .vm-dt-open-bar-in { padding: 0; }
    .vm-dt-open-col .vm-dt-open-fault { text-align: center; }
}


/* ====================================================================
   22. THE CITY DIALOG (41b on 01 and 26)
   (Desktop slice G6, 2026-10-09: moved here from 26-pharmacies.css
   section 7 unchanged, frames 26-d-city and 41-d.) The phone's sheet and
   code (city-sheet.js), centred by section 3, 480 wide (section 3's
   .vm-sheet--dt-480, which pharmacies.js and home.js set from 901: the
   phone's markup states no figure): radius 20, the head 20 / 24 in, the
   title at 20 over its line at 13, Cancel at 14. Pharmacy pages only
   carry the sheet; the rules are inert on the exams side.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sheet.vm-cy-sheet.is-open {
        padding: 20px 12px 14px;
        gap: 0;
        border-radius: 20px;
    }
    .vm-cy-sheet .vm-cy-grab { display: none; }
    .vm-cy-sheet .vm-cy-head {
        align-items: flex-start;
        gap: 12px;
        padding: 0 2px 14px 12px;
    }
    .vm-cy-sheet .vm-cy-title { font-size: 20px; }
    .vm-cy-sheet .vm-cy-sub { margin-top: 4px; font-size: 13px; color: #64748b; }
    .vm-cy-sheet .vm-cy-cancel { padding: 0 14px; border-radius: 999px; font-size: 14px; }
    .vm-cy-sheet .vm-cy-fail { padding: 0 2px 0 12px; }
}