/* ===================================================================
   PHARMACY HUB — SHARED APP SHELL (app.css)
   ===================================================================
   Screen 01 (the hub home) is the mobile-first shell every later
   pharmacy screen reuses. Pixel truth:
     docs/design/pharmacy/screens/01/{spec.md,annotations.md,screen01.html}
   Contract: apps/frontend/docs/PHARMACY_HUB.md (§7 frontend map, §7.4
   tokens).

   The DECLARATIONS below are copied from css/rentals/app.css (the blocks
   named in PHARMACY_HUB §7.2) and re-tinted teal. Rentals' mobile base is
   byte-frozen, so nothing here <link>s or @imports a rentals file — the
   class NAMES are kept (.vm-*) so the two shells stay legible side by
   side, and only the values move.

   Sections:
      1. Tokens (PHARMACY_HUB §7.4)
      2. Base block (reset, form-control typography, [hidden] guard)
      3. App frame (.vm-app)
      4. Bottom nav (Home · Pharmacies · Exams · Orders · Account; the FAB went in the Oct 2026 pass)
      5. Hero (frame, top bar, location line, headline, search pill)
      6. Chips (the four hub filter chips)
      7. Cards (prescription card, category tiles, symptom pills, the
         three rails, pharmacy cards, emergency card; the exams door
         went with Home's Oct 2026 lab-tests section)
      8. Bottom sheet chrome
      9. Empty / loading states
     10. Toast
     11. Screen 02 — category / symptom / search product list
     12. Screen 03 — product detail
     13. Site footer: moved to 30b, the Slice N shared chrome
     14. Screen 04 — basket
     15. Screen 04b — the switch sheet
     16. Screen 05 — checkout (05a delivery + 05b pickup)
     17. Screen 06 — order tracking (06a in progress + 06b quote ready)
     18. Screen 07 — send a prescription (7a capture + 7b review + 7c
         sent + the read view), its page viewer and its Change sheet
     19. Screen 09 — the pharmacy's queue (09a queue, 09b pricing,
         09c reading, 09d keypad, 09e handover confirm, 09f handed
         over today) and the three-slot owner bar
     20. Screen 08 — the store page (.vm-st-*)
     21. Screen 16 — Orders, the bottom nav's fourth tab (.vm-or-*)
     22. Screen 17 — search results, the shared search (.vm-sr-*)
     23. Screen 19 — kept for later (.vm-kp-*), and 19b's rows at the
         foot of the basket
     24. Screen 20 — account (.vm-ac-*): the name-and-number card, 20c's
         counter door, the log-out group, 20b and the edit sheet
     25. Screen 25 — my shelf, the counter's stock manager (.vm-sh-*):
         25a the shelf, 25b which box, 25c the row, 25e the states
     26. Screen 27 — open your pharmacy (.vm-oyp-*): 27a the form,
         27b opened, 27c the states (23's twin, ported)
     27. Screen 26 — pharmacies, the directory (.vm-dir-*): 26a the
         list, 26b no position, 26c nothing delivers, 26d tonight
     28. Screen 29 — your counter (.vm-ct-*): 29a the counter, 29b–29h
         hours, day sheet, numbers, delivery, photo, landmark, map pin
     29. Screen 32 — duty nights (.vm-dn-*): 32a the nights, 32b the
         add sheet, 32c the remove sheet, 32d the states (29's parts
         reused)
    29d. Screen 38 — a box the catalogue lacks (.vm-sb-*): 38a the door,
         38b state the box, and its rows on 25 (.vm-sh-stlabel,
         .vm-sh-change), 08 (.vm-cat-stated) and 03 plain (.vm-pd-*)
    29e. Screens 41 + 43, the customer side (.vm-cy-*, .vm-cz-*): 41b
         choose a city, 41c/41f's lines, 41d's Town select, and the
         close as 01, 08, 04 and 07 read it
    29g. Screens 45 + 47, the counter side (.vm-q-tb*, .vm-tb-*,
         .vm-st-gone*): 45d/45g on 09b, 47i on 29 and on 08
     30. Desktop (>=901px): .vm-dt-only + the unwind hook
    30b. Slice N shared chrome (identical in css/exams/app.css): the bar's
         height, the tails, the toast, the owner bars, the back control,
         the footer and the desktop header (nav-footer-contract.md N1-N11)
     31. Mobile overrides — ALWAYS LAST (cascade-order trap: a @media
         block adds no specificity, so it must come after base rules).
   =================================================================== */

/* ----------------------------------------------------------------
   1. TOKENS — PHARMACY_HUB §7.4, verbatim.
   Banned and swept by the specs: #eef2f6, #94a3b8 on functional text
   OUTSIDE the navy footer, any yellow or orange. The two stray
   Tailwind values the frame carried inside the search pill (#e5e7eb,
   #111827) are fixed here to --vph-grey / --vph-ink.
   ---------------------------------------------------------------- */
:root {
    --vph-primary: #16a085;        /* pharmacy primary action                  */
    --vph-primary-dark: #0f6d5c;   /* dark teal — status text, exams door      */
    --vph-primary-solid: #0f6d5c;  /* primary under white text 6.3:1 — every
                                      teal fill that carries text or a white
                                      glyph, and teal link text; #16a085 is
                                      3.3:1 and stays for dots, bars, rings,
                                      icons, borders and glows (§7.16 R-AA) */
    --vph-tint: #e3f4f0;           /* teal tint — symptom pills, active nav    */
    --vph-rx: #3498db;             /* prescription blue                        */
    --vph-rx-solid: #1b6fa8;       /* prescription blue under white text 4.6:1 */
    --vph-rx-tint: #f2f9ff;        /* blue tint                                */
    --vph-emergency: #e74c3c;      /* EMERGENCY ONLY — the accent: glows and
                                      rings, never a ground under text      */
    --vph-emergency-solid: #c0392b; /* emergency under white text 5.4:1 —
                                      every red fill that carries text or a
                                      white glyph; white on #e74c3c is 3.8:1
                                      (slice F4 SH6)                         */
    --vph-accent: #8ff08b;         /* hero eyebrow + the word "Market"         */
    --vph-ink: #0f172a;
    --vph-ink-2: #334155;
    --vph-ink-3: #475569;
    --vph-ink-4: #64748b;
    --vph-grey: #e2e8f0;
    --vph-grey-2: #f1f5f9;
    --vph-canvas: #f8fafc;
    --vph-sep: #cbd5e1;
    --vph-hairline: #f0f2f4;
    --vph-teal-tint: #e3f4f0;      /* declared so it cannot drift (spec §4)    */
    --vph-blue-tint: #f2f9ff;      /* declared so it cannot drift (spec §4)    */
    --vph-page-bg: #e9ebee;
    --vph-card-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    --vph-font-body: 'Inter', -apple-system, sans-serif;
    --vph-font-display: 'Space Grotesk', sans-serif;
}

/* ----------------------------------------------------------------
   2. BASE BLOCK
   ---------------------------------------------------------------- */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, sans-serif; background: var(--vph-page-bg); }
a { color: var(--vph-primary-solid); text-decoration: none; }
a:hover { color: var(--vph-primary-dark); }
button { border: none; background: none; font: inherit; cursor: pointer; }
/* Form controls do NOT inherit typography from their ancestors — the UA
   gives them its own font. Same `font: inherit` the button rule uses. */
input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
[data-noscroll]::-webkit-scrollbar { display: none; }

/* Project trap: an author `display:` rule beats the UA's [hidden] rule.
   Hard guard so `hidden` always actually hides. */
[hidden] { display: none !important; }

/* Every figure, clock time and distance is tabular. */
.vm-num { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------
   3. APP FRAME
   Design canvas is 390px; production shows a centred 480px app frame
   on desktop (page bg is slightly darker than the canvas). .vm-app
   does NOT set overflow:hidden — sections that need clipping clip
   themselves.
   ---------------------------------------------------------------- */
.vm-app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    background: var(--vph-canvas);
    color: var(--vph-ink);
    font-family: var(--vph-font-body);
    box-shadow: 0 0 40px rgba(16, 24, 40, .08);
    display: flex;
    flex-direction: column;
}

/* 01's <main> landmark (Slice N, N10): the hero and the scroll area,
   kept the column's flex items. */
.vm-hub-main { display: flex; flex-direction: column; min-width: 0; }

/* The scroll area under the hero. 14px gutter => a 362px content box
   at 390px, which is what every width in spec.md was measured against.
   No bottom padding: the footer's own 24px sits under it (Slice N). */
.vm-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px 14px 0;
}

/* ----------------------------------------------------------------
   4. BOTTOM NAV (slice A, 2026-10-04)
   Home · Pharmacies · Exams · Orders · Account: five equal tabs, the one
   bar both hubs carry on every customer screen, in the same order with
   the same destinations. Pixel truth: the <nav aria-label="Main"> of
   docs/design/pharmacy/screens/30/redesign-2026-10/frame.html.
   The Prescription FAB is gone: Home's "Send a prescription" card is the
   door to 07. Exams opens 30 (../exams/structures.html), and Orders also
   lists the phone's exam visits. The exams hub carries its own copy of
   this block in css/exams/app.css; neither file links the other.
   No pulse, no badge, no dot. Hidden from 901px, where the desktop
   header takes over. Its height (--vm-nav-h), its focus ring, the tails
   that clear it and the desktop header are Slice N's shared chrome (30b).
   ---------------------------------------------------------------- */
.vm-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    display: flex;
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
}
.vm-bottom-nav a {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--vph-ink-4);
}
/* The base a:hover would light an idle tab teal, which reads as "you are
   here". Only the active tab is teal. */
.vm-bottom-nav a:hover { color: var(--vph-ink-4); }
.vm-bottom-nav a.is-active,
.vm-bottom-nav a.is-active:hover { color: var(--vph-primary-dark); }
/* The icon sits in a fixed 52x30 box on every tab so the five labels
   share a baseline; the active tab fills that box with the soft teal. */
.vm-nav-ic {
    width: 52px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
/* `line-height: normal`, the frame's own: the label box is 13px, so the
   pill and the label sit where 30's frame draws them, to the pixel. */
.vm-nav-lb {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: normal;
    white-space: nowrap;
}
.vm-bottom-nav a.is-active .vm-nav-ic { background: var(--vph-tint); }
.vm-bottom-nav a.is-active .vm-nav-lb { font-weight: 700; }

/* ----------------------------------------------------------------
   5. HERO — 460px band, three bands under one settled 5-stop scrim.
   ---------------------------------------------------------------- */
.vm-hero-frame {
    position: relative;
    height: 460px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.vm-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The loop over the poster (rentals' pattern). opacity 0 is the shipped
   initial value: home.js sets inline opacity:1 once play() resolves, so
   the still shows until the loop truly runs. Centred, both doors stay in
   the 460px frame at 390 and 480 wide. */
.vm-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0;
    transition: opacity .8s ease;
}
/* Dark where text sits, open through the middle. Character for
   character the gradient the design log settled on. */
.vm-hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 38, 32, .74) 0%, rgba(4, 38, 32, .54) 20%, rgba(4, 38, 32, .24) 44%, rgba(6, 58, 49, .7) 76%, rgba(4, 42, 35, .94) 100%);
}

/* -- Band 1: nav bar -------------------------------------------- */
.vm-hero-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
}
.vm-hero-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.vm-hero-brand:hover { color: inherit; }
.vm-hero-logo {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
/* These are <span>s inside an <a>: without an explicit display the two
   strap lines run inline and the lockup reads as one long line. */
.vm-hero-brand-text { display: block; line-height: 1; }
.vm-hero-word {
    display: block;
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    letter-spacing: -.3px;
}
.vm-hero-word span { color: var(--vph-accent); }
.vm-hero-strap { display: block; font-size: 10px; color: rgba(255, 255, 255, .8); margin-top: 2px; }
.vm-hero-actions { display: flex; align-items: center; gap: 8px; }
/* The frame drew these 40px. The house floor is 44px and spec §8.16
   calls the 40 an unsanctioned miss, so they ship at 44. */
.vm-hero-glass {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.vm-hero-glass:hover { color: #fff; }
.vm-hero-glass--acct { font-size: 16px; }
.vm-hero-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 9.5px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
}

/* -- Band 2: location line (bound to data) ---------------------- */
.vm-hero-loc {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 20px 0;
    color: var(--vph-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.vm-hero-loc i { font-size: 11px; }

/* -- Band 3: headline + search pill ----------------------------- */
.vm-hero-head { position: relative; margin-top: auto; padding: 0 20px 26px; }
/* No hard <br>: the line breaks are the browser's, so the headline
   survives a longer string (spec §8.17 — the language question). */
.vm-hero-title {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 31px;
    line-height: 1.16;
    letter-spacing: -.7px;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}
/* 41a: the frame's 52px pill, 0 5px 0 4px, so the chip inside it stands
   at the house 44px (it opens 41b now; it was a sub-44px exception while
   it only answered with a toast). */
.vm-searchbar {
    margin-top: 24px;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 999px;
    height: 52px;
    padding: 0 5px 0 4px;
    box-shadow: 0 18px 40px rgba(4, 38, 32, .42);
}
.vm-searchbar-city {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--vph-primary-dark);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vm-searchbar-city-i { font-size: 12px; }
.vm-searchbar-city-caret { font-size: 9px; color: var(--vph-ink-4); }
.vm-searchbar-divider {
    width: 1px;
    height: 22px;
    background: var(--vph-grey);
    flex-shrink: 0;
}
.vm-searchbar-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13.5px;
    color: var(--vph-ink);
    background: transparent;
    min-width: 0;
    padding: 0 11px;
}
/* Sanctioned sub-44px exception: the round go button's own size. */
.vm-searchbar-go {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   6. CHIPS — borderless fills, 44px, 16px radius.
   This row does NOT bleed: a half-chip would promise a swipe that
   leads nowhere (annotation card 9).
   ---------------------------------------------------------------- */
.vm-chiprow { display: flex; gap: 7px; overflow: hidden; }
.vm-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    border-radius: 16px;
    background: #fff;
    color: var(--vph-ink-3);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.vm-chip--filters { color: var(--vph-ink-2); font-weight: 700; }
.vm-chip--filters i { font-size: 11px; color: var(--vph-ink-3); }
.vm-chip.is-active {
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-weight: 700;
}
.vm-chip[disabled] { opacity: .5; }
.vm-chip-badge {
    background: var(--vph-primary-solid);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
}

/* ----------------------------------------------------------------
   7. CARDS — one idiom: 18px full-width / 16px rail, no border, the
   two-layer house shadow. Shadow means actionable, border means fact.
   ---------------------------------------------------------------- */

/* -- Section heads ---------------------------------------------- */
.vm-sec { display: flex; flex-direction: column; gap: 9px; }
.vm-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.vm-sec-title { font-family: var(--vph-font-display); font-size: 15.5px; font-weight: 700; }
.vm-sec-sub { font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.35; margin-top: 2px; }
.vm-sec-link {
    height: 44px;
    margin-right: -10px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.vm-sec-link i { font-size: 10px; }

/* -- Prescription card — the hub's ONLY prescription-sending door - */
.vm-rx-card {
    background: linear-gradient(100deg, var(--vph-blue-tint) 0%, #fff 58%);
    border-radius: 18px;
    padding: 15px;
    box-shadow: var(--vph-card-shadow);
}
.vm-rx-row { display: flex; align-items: center; gap: 14px; }
.vm-rx-tile {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--vph-rx);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(52, 152, 219, .13), 0 6px 14px rgba(52, 152, 219, .28);
}
.vm-rx-title {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
.vm-rx-sub { font-size: 11.5px; color: var(--vph-ink-3); line-height: 1.4; margin-top: 2px; }
.vm-rx-foot { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--vph-hairline); }
/* Solid #1b6fa8, not #3498db: white on it is 4.6:1. */
.vm-btn-rx {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-btn-rx:hover { color: #fff; }
.vm-btn-rx i { font-size: 13px; }

/* -- Six category tiles — real <a> links, no counts by design ---- */
.vm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vm-tile {
    height: 84px;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--vph-ink);
}
.vm-tile:hover { color: var(--vph-ink); }
.vm-tile i { font-size: 18px; color: var(--vph-primary); }
.vm-tile span { font-size: 12.5px; font-weight: 600; line-height: 1.25; }

/* -- Symptom pills — words, no icons ---------------------------- */
.vm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-pill {
    height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 600;
}
.vm-pill:hover { color: var(--vph-primary-dark); }

/* -- Rails ------------------------------------------------------
   Director's ruling, amending the log's "rails bleed, never scroll":
   a real rail scrolls. overflow-x:auto + proximity snap, the
   scrollbar hidden (the log's actual objection was the desktop
   scrollbar a 390px mock painted), and the row bleeds out of the
   14px gutter so the last item is still cut by the frame edge — the
   partial item IS the affordance. */
.vm-rail {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -14px;
    padding: 2px 38px 6px 14px;
}
.vm-rail::-webkit-scrollbar { display: none; }
.vm-rail > * { scroll-snap-align: start; flex-shrink: 0; }
.vm-rail--again { gap: 10px; }
.vm-rail--pop { gap: 11px; }
.vm-rail--ess { gap: 10px; }

/* -- Buy it again card (268px) ---------------------------------- */
.vm-again-card {
    width: 268px;
    min-height: 76px;
    background: #fff;
    border-radius: 16px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--vph-card-shadow);
}
.vm-again-thumb {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--vph-grey-2);
    flex-shrink: 0;
}
.vm-again-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vm-again-main { flex: 1; min-width: 0; }
/* Two lines, never truncated: dose and pack size ARE the name. */
.vm-again-name { display: block; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-again-name:hover { color: var(--vph-ink); }
.vm-again-meta {
    font-size: 10.5px;
    color: var(--vph-ink-4);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.vm-again-meta strong {
    font-family: var(--vph-font-display);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vph-ink);
}
.vm-btn-round {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.vm-btn-round:hover { color: #fff; }
/* A prescription item cannot be repeated without new paper: 07's
   camera in place of the teal plus. */
.vm-btn-round--rx { background: var(--vph-rx-solid); }

/* -- Product rail card (148px) — Popular AND Essentials --------- */
.vm-prod-card {
    width: 148px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
    color: var(--vph-ink);
    display: block;
}
.vm-prod-card:hover { color: var(--vph-ink); }
.vm-prod-media { display: block; position: relative; height: 104px; background: var(--vph-grey-2); }
.vm-prod-media img { width: 100%; height: 100%; object-fit: cover; }
.vm-prod-body { padding: 11px 12px 12px; }
/* Two lines, clipped — a dose and a pack size are part of the name and are
   never truncated with an ellipsis. */
.vm-prod-title {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.28;
    height: 33px;
    overflow: hidden;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
.vm-prod-title:hover { color: var(--vph-ink); }
.vm-price-row { display: flex; align-items: baseline; gap: 5px; margin-top: 5px; }
.vm-price-from { font-size: 10.5px; color: var(--vph-ink-4); font-weight: 600; }
.vm-price-fig {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vm-price-cur { font-size: 10.5px; color: var(--vph-ink-4); }
.vm-prod-count { display: block; font-size: 10.5px; color: var(--vph-ink-4); margin-top: 1px; }
/* display:flex, not the <button> default: the prescription variant is an
   <a>, and an inline <a> would collapse to a 15px-tall tap target. */
.vm-btn-add {
    width: 100%;
    margin-top: 10px;
    background: var(--vph-primary-solid);
    color: #fff;
    border-radius: 999px;
    height: 44px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.vm-btn-add:hover { color: #fff; }
.vm-btn-add--rx { background: var(--vph-rx-solid); font-size: 12.5px; }

/* -- More products grid (two rows of the SAME product card) -----
   The rail card is a fixed 148px rail citizen; in a grid cell it must
   take the cell instead, and its 104px letterbox becomes a square so
   two columns of photographs line up. Nothing else about the card
   changes: it is one component with one Add button. */
.vm-grid--more {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}
.vm-grid--more .vm-prod-card { width: auto; }
.vm-grid--more .vm-prod-media { height: auto; aspect-ratio: 1 / 1; }
/* The section head carries no "See all": this button is the door, so it
   is the one actionable thing here that earns the house shadow. */
.vm-btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-primary-dark);
    color: var(--vph-primary-dark);
    font-weight: 700;
    font-size: 13.5px;
    box-shadow: var(--vph-card-shadow);
}
.vm-btn-more:hover { color: var(--vph-primary-dark); }
.vm-btn-more i { font-size: 12px; }

/* -- Essentials tile (100px, inset photo, no Add) --------------- */
.vm-ess-card {
    width: 100px;
    background: #fff;
    border-radius: 16px;
    padding: 7px;
    box-shadow: var(--vph-card-shadow);
    color: var(--vph-ink);
    display: block;
}
.vm-ess-card:hover { color: var(--vph-ink); }
.vm-ess-media { display: block; height: 84px; border-radius: 11px; overflow: hidden; background: var(--vph-grey-2); }
.vm-ess-media img { width: 100%; height: 100%; object-fit: cover; }
.vm-ess-body { display: block; padding: 9px 3px 3px; }
.vm-ess-name {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vph-ink-2);
    line-height: 1.35;
    height: 32px;
    overflow: hidden;
}
.vm-ess-price { display: flex; align-items: baseline; gap: 4px; margin-top: 5px; }
.vm-ess-price .vm-price-fig { font-size: 14.5px; letter-spacing: -.2px; }
.vm-ess-price .vm-price-cur { font-size: 9.5px; font-weight: 600; letter-spacing: .02em; }
.vm-ess-price .vm-price-from { font-size: 9.5px; }
.vm-ess-count { display: block; font-size: 9.5px; color: var(--vph-ink-4); margin-top: 1px; }

/* -- Pharmacy card (full width) --------------------------------- */
.vm-pharm-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
.vm-pharm-media { position: relative; height: 118px; background: var(--vph-grey-2); }
.vm-pharm-media img { width: 100%; height: 100%; object-fit: cover; }
/* No-photo fallback ground: a shop-front photo is one of a pharmacy's
   two authored fields, so its absence is normal. Deep teal ground +
   an inverted accent monogram; the oversized cross is CSS, so nothing
   here needs an inline style. */
.vm-pharm-ph {
    position: absolute;
    inset: 0;
    background: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vm-pharm-ph::before,
.vm-pharm-ph::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -26px;
    background: rgba(143, 240, 139, .08);
    border-radius: 6px;
}
.vm-pharm-ph::before { width: 112px; height: 30px; }
.vm-pharm-ph::after { width: 30px; height: 112px; }
.vm-pharm-ph span {
    position: relative;
    font-family: var(--vph-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--vph-accent);
    border: 2px solid var(--vph-accent);
    border-radius: 14px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-pharm-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .94);
    color: var(--vph-primary-dark);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
    font-variant-numeric: tabular-nums;
}
.vm-pharm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vph-primary); }
.vm-pharm-body { padding: 13px 14px 14px; }
.vm-pharm-name {
    font-family: var(--vph-font-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
    color: var(--vph-ink);
}
.vm-pharm-meta {
    font-size: 12px;
    color: var(--vph-ink-4);
    margin-top: 5px;
    font-variant-numeric: tabular-nums;
}
/* No stars, no verification tick, ever: service is a measured fact. */
.vm-pharm-service {
    font-size: 12px;
    color: var(--vph-ink-2);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.vm-pharm-service strong { font-weight: 700; }
.vm-pharm-service .vm-sep { color: var(--vph-sep); }
.vm-pharm-service .vm-count { color: var(--vph-ink-4); }
.vm-pharm-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--vph-hairline);
}
.vm-pharm-modes { min-width: 0; }
.vm-pharm-mode {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    font-variant-numeric: tabular-nums;
}
/* Absent when prescription_reply_minutes is null — a reply time is the
   one speed claim the system can verify, and only when measured. */
.vm-pharm-reply { font-size: 11.5px; color: var(--vph-ink-4); font-variant-numeric: tabular-nums; }
.vm-btn-store {
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: var(--vph-primary-solid);
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.vm-btn-store:hover { color: #fff; }

/* -- Emergency tonight — ordinary lifted card, no coloured edge -- */
.vm-emg {
    background: #fff;
    border-radius: 18px;
    padding: 15px;
    box-shadow: var(--vph-card-shadow);
}
.vm-emg-title {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
}
.vm-emg-body {
    font-size: 11.5px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.vm-emg-foot { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--vph-hairline); }
.vm-emg-name { font-size: 13px; font-weight: 700; color: var(--vph-ink); }
.vm-emg-meta {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* The ONE sanctioned use of red on this screen. The solid red: white on
   #e74c3c is 3.8:1, on --vph-emergency-solid 5.4:1 (slice F4 SH6). */
.vm-btn-call {
    width: 100%;
    margin-top: 12px;
    background: var(--vph-emergency-solid);
    color: #fff;
    border-radius: 999px;
    height: 44px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-btn-call:hover { color: #fff; }
.vm-btn-call i { font-size: 12px; }

/* ----------------------------------------------------------------
   8. BOTTOM SHEET (class-toggled — never inline styles)
   The hub Filters sheet; later screens reuse it for 04b's switch and
   09d's keypad.
   ---------------------------------------------------------------- */
.vm-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 60;
}
.vm-sheet-backdrop.is-open { display: block; }
.vm-sheet {
    position: fixed;
    left: 50%;
    transform: translateX(-50%) translateY(110%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    max-height: 82vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 22px 22px 0 0;
    z-index: 61;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
}
.vm-sheet.is-open { transform: translateX(-50%) translateY(0); }
.vm-sheet-head {
    position: sticky;
    top: 0;
    background: #fff;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--vph-hairline);
    z-index: 1;
}
/* House rule: a 38x4 #cbd5e1 grab handle. */
.vm-sheet-grab {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--vph-sep);
    margin: 0 auto 12px;
}
.vm-sheet-title-row { display: flex; align-items: center; justify-content: space-between; }
.vm-sheet-title-row h3 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 18px;
}
.vm-sheet-reset { height: 44px; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--vph-ink-4); }
.vm-sheet-body { padding: 18px 18px 8px; }
.vm-sheet-label { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--vph-ink); }
.vm-sheet-note { font-size: 12px; color: var(--vph-ink-4); line-height: 1.5; margin-bottom: 18px; }
.vm-sheet-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.vm-sheet-foot {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 18px 18px;
    border-top: 1px solid var(--vph-hairline);
}
.vm-sheet-apply {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

/* ----------------------------------------------------------------
   9. EMPTY + LOADING STATES
   The backend is not deployed yet, so every section renders an honest
   loading line and then an honest empty line. Neither ever carries a
   number.
   ---------------------------------------------------------------- */
.vm-loading {
    padding: 22px 0;
    font-size: 13px;
    color: var(--vph-ink-4);
}
.vm-empty {
    text-align: center;
    padding: 26px 16px;
    background: #fff;
    border: 1px dashed var(--vph-grey);
    border-radius: 16px;
}
.vm-empty i { font-size: 24px; color: var(--vph-sep); margin-bottom: 10px; display: block; }
.vm-empty p { font-size: 13px; color: var(--vph-ink-4); line-height: 1.5; }

/* ----------------------------------------------------------------
   10. TOAST — visible by default, append-and-remove (the canonical
   shape from the rentals shell).
   ---------------------------------------------------------------- */
.vm-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    background: var(--vph-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 999px;
    z-index: 90;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    max-width: 86%;
    text-align: center;
}
.vm-toast.is-show, .vm-toast.is-visible { opacity: 1; }
.vm-toast--success { background: var(--vph-primary-dark); }
.vm-toast--error { background: var(--vph-emergency-solid); }  /* white text: 5.4:1 */

/* ----------------------------------------------------------------
   11. SCREEN 02 — CATEGORY / SYMPTOM / SEARCH PRODUCT LIST
   Pixel truth: docs/design/pharmacy/screens/02/{README.md,frame.html}
   (fidelity: HIGH — colours, type, spacing, radii, hit areas and copy
   are final). Contract: PHARMACY_HUB.md §5.1, §5.2, §6 row "02".

   A TASK screen: no bottom nav, no header basket badge, no "Filters"
   sheet door. Every tappable control is 44px (48px for the basket
   button). Inter + Space Grotesk only. --vph-rx-solid (#1b6fa8) is
   used on exactly one thing: prescription.
   ---------------------------------------------------------------- */

/* The task-screen frame: no bottom nav, so no nav-height gutter. The
   basket bar is fixed, and only then does the body reserve for it. */
.vm-app--task { background: var(--vph-canvas); }
.vm-app--task.has-basket-bar .vm-cat-body { padding-bottom: 92px; }

/* -- Header ------------------------------------------------------ */
.vm-cat-head {
    background: #fff;
    padding: 10px 14px 13px;
    border-bottom: 1px solid var(--vph-grey-2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
/* The labelled exit. A bare chevron is a guess; this one says where it
   goes, and it is the only way home on this screen. */
.vm-cat-back { margin-bottom: -8px; }  /* the hub's one back control (.vm-back, Slice N 30b) */
/* The redesign (2026-09-24): a 30px title over 17's count line, the pair
   2px in from the gutter, 5px apart. */
.vm-cat-titles { display: flex; flex-direction: column; gap: 5px; padding: 0 2px; }
.vm-cat-title {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.8px;
    line-height: 1.1;
    text-wrap: balance;
}
/* 17's count line: 15px Space Grotesk ink, tabular — pagination.total,
   never typed. */
.vm-cat-count {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
/* The house INSET ROW (a symptom cut only): same words as before, the
   pharmacy-advice glyph. 9px = the frame's 3px column gap + 6px. */
.vm-cat-advice {
    margin-top: 9px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--vph-canvas);
    line-height: 1.5;
}
.vm-cat-advice i { flex-shrink: 0; margin-top: 3px; font-size: 12px; color: var(--vph-primary-dark); }
.vm-cat-advice span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}
/* Searches ALL medicines, never the current cut: a scoped search
   returns nothing for a medicine we actually stock. */
.vm-cat-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vm-cat-search > i { color: var(--vph-ink-4); font-size: 13px; }
.vm-cat-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    font-size: 13.5px;
    color: var(--vph-ink);
}

/* -- Pharmacy bar ------------------------------------------------ */
.vm-cat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--vph-tint);
    padding: 7px 8px 7px 14px;
    flex-shrink: 0;
}
.vm-cat-bar-main { min-width: 0; }
/* Wraps (the redesign): a counter's name is how you find its door, so it
   is never cut to an ellipsis. */
.vm-cat-bar-name {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-cat-bar-sub { font-size: 11.5px; color: var(--vph-primary-dark); margin-top: 2px; line-height: 1.3; }
.vm-cat-bar-btn {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vm-cat-bar-btn:hover { color: var(--vph-primary-dark); }

/* -- Body, chips, sort ------------------------------------------- */
.vm-cat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 14px 18px;
}
.vm-cat-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vm-cat-chip {
    flex-shrink: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.vm-cat-chip.is-active { background: var(--vph-tint); color: var(--vph-primary-dark); }

.vm-cat-sortrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vm-cat-sort {
    height: 44px;
    padding: 0 14px 0 0;
    border-radius: 12px;
    background: transparent;
    color: var(--vph-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
}
.vm-cat-sort i { font-size: 12px; color: var(--vph-ink-4); }
/* Only ever present when a filter HAS cut the list. */
.vm-cat-showing { font-size: 12px; color: var(--vph-ink-4); font-variant-numeric: tabular-nums; }

/* -- The 2-column grid ------------------------------------------- */
.vm-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vm-cat-card {
    background: #fff;
    border-radius: 16px;
    padding: 7px;
    box-shadow: var(--vph-card-shadow);
    display: flex;
    flex-direction: column;
}
.vm-cat-tile {
    position: relative;
    display: block;
    height: 96px;
    border-radius: 11px;
    overflow: hidden;
    background: var(--vph-grey-2);
}
.vm-cat-tile img { width: 100%; height: 100%; object-fit: cover; }
/* Stands in for product photography — there is no image pipeline yet.
   #94a3b8 is a DECORATIVE glyph here and never a text colour. */
.vm-cat-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--vph-grey-2);
    color: #94a3b8;
    font-size: 26px;
}
.vm-cat-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}
/* The ONE prescription blue on this screen. Nothing else is blue. */
.vm-cat-badge--rx { background: var(--vph-rx-solid); }
.vm-cat-badge--rx i { font-size: 9px; }
.vm-cat-badge--out { background: var(--vph-ink-3); }

.vm-cat-info { padding: 9px 4px 3px; display: flex; flex-direction: column; }
/* The dose and the pack size ARE the name: min-height, no maximum, and
   never truncated. */
.vm-cat-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--vph-ink-2);
    line-height: 1.35;
    min-height: 34px;
}
.vm-cat-name:hover { color: var(--vph-ink-2); }
.vm-cat-card.is-out .vm-cat-name { color: var(--vph-ink-3); }
.vm-cat-meta { font-size: 10.5px; color: var(--vph-ink-4); margin-top: 3px; }
.vm-cat-meta--where { color: var(--vph-primary-dark); font-weight: 600; }
.vm-cat-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}
.vm-cat-price { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
.vm-cat-from { font-size: 9.5px; color: var(--vph-ink-4); margin-right: 1px; }
.vm-cat-fig {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}
.vm-cat-card.is-out .vm-cat-fig { color: var(--vph-ink-3); }
.vm-cat-cur { font-size: 9.5px; font-weight: 600; color: var(--vph-ink-4); }

/* The three controls, one shape. Teal buys, blue sends paper, quiet
   grey shows who else has it. */
.vm-cat-act {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-cat-act--add { background: var(--vph-primary-solid); color: #fff; }
.vm-cat-act--rx { background: var(--vph-rx-solid); color: #fff; }
.vm-cat-act--rx:hover { color: #fff; }
.vm-cat-act--where { background: var(--vph-grey-2); color: var(--vph-primary-dark); font-size: 13px; }
.vm-cat-act--where:hover { color: var(--vph-primary-dark); }

/* -- 02's card, the redesign (2026-09-24) ------------------------ */
/* Scoped to 02's page: the `.vm-cat-*` material is shared with 08's
   shelf, whose own frame keeps the values above. The name is the
   product's identity, so it moves up to 13.5/600 ink; the price row sits
   on `margin-top:auto`, so a two-line meta never misaligns a grid row. */
.vm-cat-page .vm-cat-info { flex: 1; }
.vm-cat-page .vm-cat-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vph-ink);
    min-height: 36px;
}
.vm-cat-page .vm-cat-name:hover { color: var(--vph-ink); }
/* 1.5: the frame's inherited line box (a two-line meta is 34.5px there). */
.vm-cat-page .vm-cat-meta { font-size: 11.5px; margin-top: 4px; line-height: 1.5; }
.vm-cat-page .vm-cat-foot { margin-top: auto; padding-top: 8px; }
/* The frame's sort control has its 14px padding on BOTH sides (the
   visual pass, 2026-09-24: it read 14px short, glyph flush to the gutter). */
.vm-cat-page .vm-cat-sort { padding: 0 14px; }

/* -- Empty state: a way on, never a dead end --------------------- */
.vm-cat-empty-acts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
.vm-cat-empty-btn {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
}
.vm-cat-empty-btn:hover { color: #fff; }
.vm-cat-empty-btn--quiet { background: var(--vph-grey-2); color: var(--vph-primary-dark); }
.vm-cat-empty-btn--quiet:hover { color: var(--vph-primary-dark); }

/* -- A failed first read (user decision, Oct 2026; both widths) --
   One Try again, solid, in place of the two doors above (which would
   read the same shelf again). */
.vm-cat-retry {
    margin-top: 14px;
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-cat-retry i { font-size: 12px; }

/* -- Pages of 12 (user decision, Oct 2026; both widths) ----------
   Under the cards: "Showing N of M" between hairlines, a thin progress
   line, and a mint "Show N more" (a door, so mint; the plus stays the
   act). The last page ends in "All N products" between the same
   hairlines. A failed next page keeps the cards: the sentence and a
   mint Try again where the button was. */
.vm-cat-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.vm-cat-pager-line { width: 100%; display: flex; align-items: center; gap: 14px; }
.vm-cat-pager-rule { flex: 1; height: 1px; background: var(--vph-grey); }
.vm-cat-pager-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-4);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.vm-cat-pager-bar {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 160px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--vph-grey);
    color: var(--vph-primary);
}
.vm-cat-pager-bar::-webkit-progress-bar { background: var(--vph-grey); border-radius: 999px; }
.vm-cat-pager-bar::-webkit-progress-value { background: var(--vph-primary); border-radius: 999px; }
.vm-cat-pager-bar::-moz-progress-bar { background: var(--vph-primary); border-radius: 999px; }
.vm-cat-more {
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}
.vm-cat-more i { font-size: 11px; }
.vm-cat-more[aria-busy="true"] { cursor: progress; opacity: .7; }
.vm-cat-more-fail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.vm-cat-more-fail-t { font-size: 13px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }

/* -- Basket bar -------------------------------------------------- */
/* ONE control, never a control inside a control. The figure is partial
   while anything is unpriced, so it reads "so far" and the line under
   it names what is missing. Never a bare "Total". */
.vm-cat-basket {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    padding: 11px 14px 13px;
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 40;
}
.vm-cat-basket-main { flex: 1; min-width: 0; }
.vm-cat-basket-total { display: flex; align-items: baseline; gap: 4px; }
.vm-cat-basket-fig {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-cat-basket-cur { font-size: 10.5px; font-weight: 600; color: var(--vph-ink-4); }
.vm-cat-basket-sub { font-size: 11px; color: var(--vph-ink-4); margin-top: 3px; line-height: 1.35; }
.vm-cat-basket-btn {
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    flex-shrink: 0;
    /* The house teal act shadow (the redesign). */
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-cat-basket-btn:hover { color: #fff; }
.vm-cat-basket-btn i { font-size: 11px; }

/* -- Sort list inside the sheet ---------------------------------- */
.vm-cat-sortlist { display: flex; flex-direction: column; margin-bottom: 22px; }
.vm-cat-sortopt {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
    border-bottom: 1px solid var(--vph-hairline);
    font-size: 14px;
    font-weight: 600;
    color: var(--vph-ink-2);
    text-align: left;
}
.vm-cat-sortopt:last-child { border-bottom: none; }
.vm-cat-sortopt i { color: var(--vph-primary); font-size: 13px; visibility: hidden; }
.vm-cat-sortopt.is-active { color: var(--vph-primary-dark); font-weight: 700; }
.vm-cat-sortopt.is-active i { visibility: visible; }

/* ----------------------------------------------------------------
   12. SCREEN 03 — PRODUCT DETAIL
   Pixel truth: docs/design/pharmacy/screens/03/{README.md,frame.html}
   (fidelity: HIGH — colours, type, spacing, radii, hit areas and copy
   are final). Contract: PHARMACY_HUB.md §5.1, §6 row "03", §7.6.

   A TASK screen: no bottom nav, no header basket badge, no share, no
   product name in the header. The header's ONE control is the labelled
   44px back button. Every tappable control is 44px (52px on the foot
   bar). Teal means THE COUNTER YOU ARE BUYING FROM — the selected
   chips, the word Selected, the Switch label and the commit, and
   nowhere else. --vph-rx-solid (#1b6fa8) appears on ONE thing on this
   page and only on a prescription-only box: 03b's camera commit.

   The hub's rail-card classes are already .vm-prod-* (§7), so this
   screen's own classes are .vm-pd-*.
   ---------------------------------------------------------------- */

/* -- The frame's inherited line box ------------------------------ */
/* The frame's own `body` declares `line-height:1.5`, and EVERY block on
   this screen inherits it unless it states its own. The shared base in
   §2 declares no line-height at all, so each of those blocks came out
   at the UA's `normal` (~1.2) — 3–4px short apiece, accumulating to
   ~15px down the column and pushing every card up the page. Declared
   HERE rather than on the shared `body`, which screens 01 and 02 were
   measured against.
   The blocks that were short: the status line, both chip-group labels,
   both card headings, the stock-count sub-line, the facts rows, the
   price pair and the word Selected. Everything the frame gives its own
   line-height (the title 1.2, a pharmacy name 1.25, a fact line 1.45,
   the advice 1.5) keeps it and is unaffected. */
.vm-pd-head,
.vm-pd-body,
.vm-pd-foot { line-height: 1.5; }

/* -- Header ------------------------------------------------------ */
/* Sticky rather than position:fixed: it is the behaviour the frame
   draws (the header stays while the three cards scroll under it)
   without a hand-maintained body offset that breaks the moment the
   label wraps. */
.vm-pd-head {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--vph-grey-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
/* The label IS the route. While the name is loading this is the
   chevron alone, so it keeps a 44px box of its own. */
/* .vm-pd-back is the hub's one back control (.vm-back, Slice N 30b); while the name loads it is the chevron
   alone, in its own 44px box. */

/* -- The scrolling column: three cards, 14px gutter, 14px gap ----- */
/* No bottom clearance of its own: the hub's footer closes the page and
   clears the fixed action bar (Slice N, below). */
.vm-pd-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 14px 0;
}
/* Slice N (owner ruling 2026-10-06, extends N7): 03 closes on the hub's
   one footer (30b), under the list and the facts, and the fixed action bar
   stays over it. The footer clears that bar, inset included, at every
   width: unlike the bottom nav, the action bar does not give way at 901px.
   77px = the 1px rule + 10px + the 52px controls + 14px. The basket bar
   that replaces it after Add is lower, so the same clearance holds. */
#vm-product { --vm-pd-bar-h: calc(77px + env(safe-area-inset-bottom, 0px)); }
#vm-product .vm-foot { padding-bottom: calc(23px + var(--vm-pd-bar-h)); }
.vm-pd-card {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--vph-card-shadow);
}
.vm-pd-h {
    font-family: var(--vph-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
}

/* -- 1. The box -------------------------------------------------- */
.vm-pd-tile {
    height: 150px;
    border-radius: 13px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vm-pd-tile img { width: 100%; height: 100%; object-fit: cover; }
/* Stands in for box photography — there is no image pipeline yet.
   #94a3b8 is a DECORATIVE glyph here and never a text colour. */
.vm-pd-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 44px;
}
/* The strength is part of the name, and the name is never truncated. */
.vm-pd-name {
    margin-top: 14px;
    font-family: var(--vph-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: var(--vph-ink);
}
/* Plain text. Not a pill (a pill shape reads tappable), not teal, and
   on a non-prescription box never blue. */
.vm-pd-status {
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
}
.vm-pd-chipwrap {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--vph-hairline);
}
/* The redesign (2026-09-24) removed the "Strength" / "Pack" labels: the
   two chip rows sit 8px apart and each group keeps an aria-label. */
.vm-pd-group + .vm-pd-group { margin-top: 8px; }
.vm-pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Borderless: shadow means actionable, border means fact. */
.vm-pd-chip {
    height: 44px;
    padding: 0 18px;
    border-radius: 16px;
    background: var(--vph-canvas);
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.vm-pd-chip.is-on { background: var(--vph-primary-solid); color: #fff; }

/* -- 1b. The headline block (the redesign, 2026-09-24) ----------- */
/* The Selected counter lifted into the box card: the house headline
   block (teal tint, 14px radius, 13x14), 02's bar treatment for the
   name, the figure at 30px, and a white inner row for the two facts.
   Present only while a row is Selected (product.js renderHeadline). */
.vm-pd-hl {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 14px 14px;
    border-radius: 14px;
    background: var(--vph-teal-tint);
}
.vm-pd-chipwrap[hidden] + .vm-pd-hl { margin-top: 16px; }
/* Dimmed while a chip change re-prices it, exactly like the rows. */
.vm-pd-hl.is-repricing { opacity: .45; pointer-events: none; }
.vm-pd-hl-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vm-pd-hl-name {
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-pd-hl-sel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
}
.vm-pd-hl-sel i { font-size: 10px; }
.vm-pd-hl-price { display: flex; align-items: baseline; gap: 5px; }
.vm-pd-hl-fig {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.vm-pd-hl-cur { font-size: 13px; font-weight: 700; color: var(--vph-primary-dark); }
.vm-pd-hl-facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff;
}
.vm-pd-hl-fact { display: flex; align-items: center; gap: 9px; }
.vm-pd-hl-fact i {
    width: 14px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    color: var(--vph-primary-dark);
}
.vm-pd-hl-fact i.fa-truck { font-size: 11px; }
.vm-pd-hl-text {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
/* The frame's `nowrap`, per FACT: a line breaks only at its " · ". */
.vm-pd-hl-seg { white-space: nowrap; }

/* -- 2. Where to buy it ------------------------------------------ */
.vm-pd-wherehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.vm-pd-wheretitle { min-width: 0; }
.vm-pd-sub { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 2px; }
/* LABELLED with the active sort, so the list never claims an order it
   is not in. Price is an option here and never the default. */
.vm-pd-sort {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    margin-right: -4px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.vm-pd-sort i { font-size: 12px; color: var(--vph-ink-4); }
/* State (b), said once and above the rows. */
.vm-pd-strand {
    margin-top: 10px;
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    text-wrap: pretty;
}
.vm-pd-rows { margin-top: 6px; }
/* A chip change re-prices in place: the rows DIM, they are never
   emptied and never replaced by a loader. */
.vm-pd-rows.is-repricing,
.vm-pd-foot.is-repricing { opacity: .45; pointer-events: none; }
/* After Add, while the basket bar is being priced: the foot bar stays
   exactly as it was (no dim, no flicker) but takes no second tap. */
.vm-pd-foot.is-holding { pointer-events: none; }
.vm-pd-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--vph-hairline);
}
.vm-pd-main { flex: 1; min-width: 0; }
/* Wraps, never truncates: the name is how you find the door. */
.vm-pd-pharm {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.1px;
    line-height: 1.25;
    color: var(--vph-ink);
}
/* Four facts, unranked. One ink at one size, so distance, hours and
   delivery never read as footnotes under the money. */
.vm-pd-fact { font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; margin-top: 3px; }
.vm-pd-fact + .vm-pd-fact { margin-top: 1px; }
.vm-pd-right { text-align: right; flex-shrink: 0; }
.vm-pd-price { display: flex; align-items: baseline; gap: 3px; justify-content: flex-end; }
.vm-pd-fig {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}
.vm-pd-cur { font-size: 9.5px; font-weight: 600; color: var(--vph-ink-4); }
/* No Selected row in the list since the redesign (2026-09-24): the
   Selected counter is the headline block in the box card (.vm-pd-hl-*),
   so every row here carries Switch or Choose. */
.vm-pd-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    padding: 0 15px;
    margin-top: 5px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.vm-pd-switch:hover { color: var(--vph-primary-dark); }
.vm-pd-door { padding-top: 13px; border-top: 1px solid var(--vph-hairline); }
.vm-pd-doorbtn {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: var(--vph-canvas);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

/* -- 2b. 03b's provisional stand-in for the list ------------------ */
/* Not a card: 03b is not drawn, and a card would claim a shape the
   design has not decided. See the note in product.html. */
.vm-pd-rxnote {
    padding: 0 4px;
    font-size: 12.5px;
    color: var(--vph-ink-3);
    line-height: 1.5;
    text-wrap: pretty;
}

/* -- 3. What is on the box --------------------------------------- */
.vm-pd-facts { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.vm-pd-fact-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; }
.vm-pd-fact-k { width: 96px; flex-shrink: 0; color: var(--vph-ink-4); }
.vm-pd-fact-v { color: var(--vph-ink-2); font-weight: 600; }
/* The house INSET ROW since the redesign (2026-09-24): the same words,
   the pharmacy-advice glyph, 12.5/600 ink — no hairline above it. */
.vm-pd-advice {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: var(--vph-canvas);
}
.vm-pd-advice i { flex-shrink: 0; margin-top: 3px; font-size: 12px; color: var(--vph-primary-dark); }
.vm-pd-advice span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}
/* With no facts at all the empty list takes no room under the heading. */
.vm-pd-facts:empty { display: none; }

/* -- 4. The foot bar --------------------------------------------- */
/* ONE control per bar. The commit's figure is the Selected row's price
   times the count; with no Selected row it names no figure at all. */
.vm-pd-foot {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    /* Slice N: the controls ride above the home indicator (--vm-pd-bar-h). */
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 40;
}
.vm-pd-step {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    padding: 0 4px;
    flex-shrink: 0;
}
.vm-pd-stepbtn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-pd-stepbtn i { font-size: 12px; }
/* No invented maximum: only the floor of 1 is a fact the screen owns. */
.vm-pd-stepbtn:disabled { color: var(--vph-sep); cursor: default; }
.vm-pd-qty {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    min-width: 28px;
    text-align: center;
}
.vm-pd-commit {
    flex: 1;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    /* The house teal act shadow (the redesign). */
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-pd-commit:hover { color: #fff; }
/* States (b) and (c): the commit states WHY it cannot act, and does
   not act. Greyed, not hidden — a missing button explains nothing. No
   lift either: a shadow says "press me", and this one cannot be. */
.vm-pd-commit.is-inert {
    background: var(--vph-grey-2);
    color: var(--vph-ink-4);
    cursor: default;
    box-shadow: none;
}
/* 03b. The only blue on this page, and only on a prescription box —
   with the house prescription-blue act shadow, not the teal one. */
.vm-pd-commit--rx { background: var(--vph-rx-solid); box-shadow: 0 6px 16px rgba(27, 111, 168, .24); }
.vm-pd-commit--rx:hover { color: #fff; }
.vm-pd-commit--rx i { font-size: 14px; }

/* The foot bar becomes screen 02's basket bar once the box is in; the
   footer's clearance (above) covers it. */

/* A sort option the screen cannot honestly produce (no location, so no
   distances) stays VISIBLE and disabled, with the note under the list
   saying what would fix it. */
.vm-cat-sortopt:disabled, .vm-cat-sortopt.is-off { color: var(--vph-ink-4); cursor: default; }

/* ----------------------------------------------------------------
   13. SITE FOOTER — MOVED (Slice N, 2026-10-06). One footer on 01, 08
   and the exams hub's 12, 01's markup: its whole .vm-foot-* block is in
   30b, the shared chrome pasted identically into css/exams/app.css.
   NEVER load css/footer.css.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   14. SCREEN 04 — THE BASKET
   Pixel truth: docs/design/pharmacy/screens/04/{README.md,frame.html}
   (fidelity: HIGH — colours, type, spacing, radii, hit areas and copy
   are final). Contract: PHARMACY_HUB.md §6 row "04", §7.7.

   A TASK screen: no bottom nav (this bar replaces it), no item count in
   the header, no basket badge, no hours / distance / fee on the counter
   bar. Every tappable control is 44px (48px stepper pill and Checkout,
   52px the sheet's primary).

   SHADOW MEANS ACTIONABLE. The items card and the prescription block are
   LIFTED because you can change them; "Kept for later" and "Before you
   pay" are BORDERED because they are facts you are not acting on.

   Teal --vph-tint/--vph-primary-dark = the counter you are buying from.
   --vph-rx-solid (#1b6fa8) is prescription's alone and appears on this
   screen only inside .vm-bk-rx. #94a3b8 is the decorative tile glyph and
   is never a text colour here.

   Screen 03's classes are .vm-pd-*, so this screen's are .vm-bk-*.
   ---------------------------------------------------------------- */

/* -- The frame's inherited line box ------------------------------ */
/* Same trap §12 documents: `frame.html` declares `body{line-height:1.5}`
   and every block inherits it, while the shared base in §2 declares
   none — so each of these blocks would render at the UA's `normal`
   (~1.2) and the whole column would creep up the page. Declared HERE,
   not on the shared `body`, which screens 01 and 02 were measured
   against. */
.vm-bk-head,
.vm-bk-counter,
.vm-bk-body,
.vm-bk-foot { line-height: 1.5; }

/* -- Header + counter bar, one sticky block ---------------------- */
/* Sticky rather than fixed: the counter must not scroll away from the
   lines it prices, and a fixed pair would need a hand-maintained body
   offset that breaks the moment a pharmacy name wraps. */
.vm-bk-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    flex-shrink: 0;
}
.vm-bk-head {
    background: #fff;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--vph-grey-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The label IS the route. While the name is loading this is the chevron
   alone, so it keeps a 44px box of its own. */
/* .vm-bk-back is the hub's one back control (.vm-back, Slice N 30b). */
.vm-bk-title {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    color: var(--vph-ink);
}

.vm-bk-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--vph-tint);
    padding: 7px 8px 7px 14px;
}
.vm-bk-counter-main { min-width: 0; }
/* The name WRAPS and is never truncated: a counter you cannot read is a
   counter you cannot check. */
.vm-bk-counter-name {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: var(--vph-ink);
}
.vm-bk-counter-sub {
    font-size: 11.5px;
    color: var(--vph-primary-dark);
    margin-top: 2px;
    line-height: 1.3;
}
.vm-bk-counter-btn {
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* -- The scrolling column ---------------------------------------- */
/* 14px gutter, 10px gap, 12px at the foot — the frame's own values. The
   extra bottom padding is clearance for the FIXED foot bar and is added
   only while that bar exists (the empty state has none). */
.vm-bk-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
}
#vm-bk.has-foot .vm-bk-body { padding-bottom: 92px; }

/* -- The items card ---------------------------------------------- */
.vm-bk-card {
    background: #fff;
    border-radius: 18px;
    padding: 0 14px;
    box-shadow: var(--vph-card-shadow);
}
.vm-bk-row { display: flex; gap: 12px; padding: 12px 0; }
.vm-bk-row + .vm-bk-row { border-top: 1px solid var(--vph-hairline); }
/* Stands in for box photography — the product's REAL form. #94a3b8 is
   decorative here and never a text colour. */
.vm-bk-tile {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 19px;
}
.vm-bk-main { flex: 1; min-width: 0; }
/* Wraps. The strength is part of the name and is never truncated. */
.vm-bk-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.3;
}
.vm-bk-unit { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 2px; }
.vm-bk-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}
.vm-bk-step {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    padding: 0 2px;
    flex-shrink: 0;
}
.vm-bk-stepbtn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-ink);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-bk-stepbtn i { font-size: 12px; }
/* At quantity 1 the minus takes the line out — it moves to "Kept for
   later", so the glyph stays a minus (screen 19: never a trash can). */
.vm-bk-stepbtn[data-keep] { color: var(--vph-ink-2); }
.vm-bk-qty {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}
.vm-bk-price { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.vm-bk-fig {
    font-family: var(--vph-font-display);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
.vm-bk-cur { font-size: 9.5px; font-weight: 600; color: var(--vph-ink-4); }

/* -- A line that went out of stock AFTER it was added ------------- */
/* No stepper and no figure: there is nothing to multiply. Two equal ways
   out, because keeping it and finding it elsewhere are both real answers
   and neither is the app's to prefer. */
.vm-bk-reason {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    line-height: 1.45;
}
.vm-bk-ways { display: flex; gap: 9px; margin-top: 9px; }
.vm-bk-way {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-bk-way--find { color: var(--vph-primary-dark); }
.vm-bk-way--find:hover { color: var(--vph-primary-dark); }

/* -- The prescription block -------------------------------------- */
/* Its own card, no stepper, never in any total. The box price is handed
   to the pharmacist AS a box price; it never forms a line total. */
.vm-bk-rxwrap { display: flex; flex-direction: column; gap: 10px; }
.vm-bk-rx {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
.vm-bk-rx-body { padding: 13px 14px 14px; }
.vm-bk-rx-state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--vph-rx-solid);
}
.vm-bk-rx-state i { font-size: 13px; }
.vm-bk-rx-row { display: flex; gap: 12px; margin-top: 11px; }
/* 04 redesign (2026-09-24): the pricing sentence is the house INSET ROW
   under the box price — #f8fafc, 10px radius, the pharmacy-advice glyph
   in teal, 12.5px/600 ink. Same words as before (`pharmacistLine()`). */
.vm-bk-rx-note {
    margin-top: 11px;
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-bk-rx-note i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-bk-rx-note span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}
.vm-bk-rx-foot { border-top: 1px solid var(--vph-hairline); padding: 12px 14px; }
.vm-bk-rx-foot .vm-bk-ways { margin-top: 0; }
/* 48px, 14px/700 and the prescription-blue ACT shadow (redesign
   2026-09-24): dealing with the item is this screen's job. */
.vm-bk-rx-cta {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .24);
}
.vm-bk-rx-cta:hover { color: #fff; }
.vm-bk-rx-cta i { font-size: 13px; }

/* -- Bordered groups: "Kept for later" and "Before you pay" ------- */
/* Bordered, not lifted, ON PURPOSE: a shadow means actionable in this
   app, and a fact you cannot act on must not look like a control. */
.vm-bk-group {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
/* The kept group's heading. 12px on top since screen 19 (19b's frame); its
   rows are 19's own (.vm-kp-rows + .vm-kp-row, §23), and the old
   one-line .vm-bk-grow row with its bare "Put back" is gone with them. */
.vm-bk-ghead {
    padding: 12px 14px 0;
    font-family: var(--vph-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
.vm-bk-frow { padding: 11px 14px; }
.vm-bk-frow + .vm-bk-frow { border-top: 1px solid var(--vph-hairline); }
.vm-bk-flabel { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-bk-fsub { font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.45; margin-top: 2px; }

/* -- The empty basket (not drawn in the handoff) ------------------ */
.vm-bk-empty {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: var(--vph-card-shadow);
}
.vm-bk-empty-title { font-size: 13.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-bk-empty-sub { font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.45; margin-top: 4px; }
.vm-bk-empty-link {
    height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}
.vm-bk-empty-link:hover { color: var(--vph-primary-dark); }

/* -- The foot bar ------------------------------------------------ */
/* One assertion, one control. The figure says "so far" and the line
   under it names what is not in it; with nothing priced the figure is
   ABSENT rather than a zero. */
.vm-bk-foot {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    padding: 11px 14px 13px;
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 40;
}
.vm-bk-foot-main { flex: 1; min-width: 0; }
.vm-bk-foot-total { display: flex; align-items: baseline; gap: 4px; }
.vm-bk-foot-fig {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-bk-foot-cur { font-size: 10.5px; font-weight: 600; color: var(--vph-ink-4); }
.vm-bk-foot-sub { font-size: 11px; color: var(--vph-ink-4); margin-top: 3px; line-height: 1.35; }
/* The teal ACT shadow (redesign 2026-09-24). */
.vm-bk-checkout {
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-bk-checkout:hover { color: #fff; }
.vm-bk-checkout i { font-size: 11px; }
/* No counter yet, so nothing is priced and checkout cannot run. A DIMMED
   TEAL, never #94a3b8: that grey is decorative-only in this hub. And no
   act shadow: a shadow means actionable, and this is not. */
.vm-bk-checkout.is-inert {
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    cursor: default;
    box-shadow: none;
}
.vm-bk-checkout.is-inert:hover { color: var(--vph-primary-dark); }

/* ----------------------------------------------------------------
   15. SCREEN 04b — THE SWITCH SHEET
   Pixel truth: the second frame in docs/design/pharmacy/screens/04/frame.html.

   §8's sheet chrome is REUSED verbatim for what a sheet is — the fixed
   scrim, the 480px column, the translate-in, the 38x4 grab handle — and
   this section adds only what 04b draws differently: the 24px radius,
   the deeper shadow, the flat #0f172a scrim at .55, and the content.
   The hub's Filters sheet has a title row with a Reset and a sticky
   apply foot; 04b has neither — its two buttons are IN the flow, both
   named, and there is never an X.
   ---------------------------------------------------------------- */
.vm-sheet--bk {
    border-radius: 24px 24px 0 0;
    padding-top: 8px;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    /* §8's 82vh is right for a filter list that is MEANT to scroll. This
       sheet ends in two named buttons and one of them must never be the
       thing you have to discover by scrolling. */
    max-height: 92vh;
}
/* 04b redesign (2026-09-24): the new-basket block became a 30px
   headline, and the frame's sheet is now 810px tall over a 33px strip of
   basket; 92vh (776px at 844) hid "Stay" again. So ON THE BASKET the cap
   is the viewport less the frame's own strip of dimmed basket (32px):
   "Stay" is a named 48px button, so the scrim is a second way out, not
   the target. dvh after vh: a phone's toolbar is not the sheet's. Scoped
   to #vm-bk because screen 07's pharmacy picker borrows this sheet and is
   a list that is meant to scroll. */
#vm-bk .vm-sheet--bk {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}
.vm-sheet--bk .vm-sheet-grab { margin: 0 auto; }
/* The basket behind it, dimmed — a flat ink, not a black wash. */
.vm-sheet-backdrop--bk { background: rgba(15, 23, 42, .55); }

.vm-sw { line-height: 1.5; }
/* The header IDENTIFIES the destination. No question in the title: the
   buttons carry the act. */
.vm-sw-head { padding: 14px 16px 0; }
.vm-sw-name {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
    color: var(--vph-ink);
}
.vm-sw-meta { font-size: 12.5px; color: var(--vph-ink-3); margin-top: 4px; }
.vm-sw-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }

/* The mode change comes FIRST, above any money — and it exists only when
   the destination does not deliver. A counter that delivers gets no
   invented sentence here. */
.vm-sw-mode {
    background: var(--vph-tint);
    border-radius: 16px;
    padding: 12px 13px;
    display: flex;
    gap: 10px;
}
.vm-sw-mode i { color: var(--vph-primary-dark); font-size: 13px; margin-top: 3px; flex-shrink: 0; }
.vm-sw-mode p { font-size: 12.5px; color: var(--vph-primary-dark); line-height: 1.5; text-wrap: pretty; }

.vm-sw-box {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 16px;
    overflow: hidden;
}
.vm-sw-boxhead {
    padding: 11px 13px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}
.vm-sw-boxtitle {
    font-family: var(--vph-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
/* States the direction ONCE, which is why the figures need no
   strike-through. Absent when there is no origin to state. */
.vm-sw-dir { font-size: 10.5px; color: var(--vph-ink-4); white-space: nowrap; }
.vm-sw-row {
    padding: 10px 13px;
    border-top: 1px solid var(--vph-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vm-sw-rowmain { min-width: 0; }
.vm-sw-rowname { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-sw-rowpack { font-size: 11px; color: var(--vph-ink-4); margin-top: 2px; }
.vm-sw-prices { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.vm-sw-old { font-size: 11.5px; color: var(--vph-ink-4); }
.vm-sw-prices i { font-size: 9px; color: var(--vph-ink-4); }
.vm-sw-new {
    font-family: var(--vph-font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vph-ink);
}

/* What the destination cannot fill — one container per line, each with
   its own two ways out. */
.vm-sw-box--stuck .vm-sw-boxhead { padding: 11px 13px 0; }
.vm-sw-stuck { padding: 9px 13px 11px; }
.vm-sw-why {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    line-height: 1.45;
    margin-top: 3px;
    text-wrap: pretty;
}
.vm-sw-stuckfoot { border-top: 1px solid var(--vph-hairline); padding: 11px 13px; }
.vm-sw-stuckfoot .vm-bk-ways { margin-top: 0; }

/* 04b redesign (2026-09-24): the new basket is the HEADLINE block — the
   teal tint, the label, the figure at 30px, and the sentence on a white
   inner row. Directly above the two buttons; the mode block still leads
   the sheet. (04's own running total is deliberately NOT a headline: it
   lives on the bar only.) */
.vm-sw-sum {
    background: var(--vph-teal-tint);
    border-radius: 14px;
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.vm-sw-sumlabel { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
.vm-sw-sumfig {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-sw-sumcur {
    font-family: var(--vph-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--vph-primary-dark);
}
.vm-sw-sumsub {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-sw-sumsub i {
    font-size: 11px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 4px;
}
.vm-sw-sumsub span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}

/* Two buttons, both named. Never an X; the scrim tap is "Stay". The
   primary carries the teal ACT shadow at 15px (redesign 2026-09-24). */
.vm-sw-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
.vm-sw-primary {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-sw-second {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
}

/* -- The picker (NOT DRAWN — medium fidelity) -------------------- */
/* A plain list, nearest first, each row stating only what the API knows.
   Reached from Choose with no counter yet, and from Change. */
.vm-sw-pick {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 9px 13px;
    text-align: left;
}
.vm-sw-pick + .vm-sw-pick { border-top: 1px solid var(--vph-hairline); }
.vm-sw-pick-name { font-size: 13px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-sw-pick-meta { font-size: 11px; color: var(--vph-ink-4); line-height: 1.35; }
.vm-sw-none { font-size: 12.5px; color: var(--vph-ink-4); line-height: 1.5; }

/* ----------------------------------------------------------------
   16. SCREEN 05 — CHECKOUT (05a delivery + 05b pickup)
   Pixel truth: docs/design/pharmacy/screens/05/{README.md,frame.html}
   — fidelity HIGH for the header, counter bar, prescription card,
   summary and money; MEDIUM for "Deliver to", "When" and the foot bar,
   which the handoff itself names as unfinished. Contract:
   PHARMACY_HUB.md §6 row "05", §7.8.

   NO MONEY MOVES ON THIS SCREEN. Every total is labelled "To pay on
   delivery" / "To pay at the counter", so there is no card field, no
   wallet, no "pay now" and nothing here to style for one.

   Two of the frame's own values are deliberately NOT ported, each
   because the handoff's "Also found during this pass" section says so
   (the Sept 24 2026 regenerated frame still draws both):
     - the 45–60 min / About 30 minutes time promises (no minutes, §2.13)
     - the underlined "Edit" (a control is a FILL, never an underline —
       .vm-ck-pill is the same material as "Change address")
   The third — the foot bar's button-inside-a-button — is gone from the
   frame too since the redesign of the last sections (2026-09-24): facts
   left, ONE 48px commit right, which is what this bar already was.

   Teal --vph-tint/--vph-primary-dark = the counter you are buying from.
   --vph-rx-solid is prescription's alone and appears on this screen only
   inside .vm-ck-rx. Every tappable control is 44px (52px option rows,
   48px the commit).

   Screen 04's classes are .vm-bk-*, so this screen's are .vm-ck-*.
   ---------------------------------------------------------------- */

/* -- The frame's inherited line box ------------------------------ */
/* The same trap §12 and §14 document: `frame.html` declares
   `body{line-height:1.5}` and every block inherits it, while the shared
   base in §2 declares none. Declared HERE, on this screen's own shell
   blocks, never on the shared `body` — screens 01 and 02 were measured
   against the UA default. */
.vm-ck-head,
.vm-ck-counter,
.vm-ck-body,
.vm-ck-foot { line-height: 1.5; }

/* -- Header + counter bar, one sticky block ---------------------- */
.vm-ck-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    flex-shrink: 0;
}
.vm-ck-head {
    background: #fff;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--vph-grey-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* One control, and its word is FIXED: "Your basket". It names the
   destination, and the destination matters — going back is how the
   counter is changed. */
/* .vm-ck-back is the hub's one back control (.vm-back, Slice N 30b). */
.vm-ck-title {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    color: var(--vph-ink);
}

/* 04's bar with the control removed. The MISSING CONTROL IS THE
   MESSAGE: the pharmacy is a fact at checkout. The name wraps and is
   never truncated; the bar never names the mode. */
.vm-ck-counter {
    background: var(--vph-tint);
    padding: 8px 14px 10px;
}
.vm-ck-counter-name {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.25;
    color: var(--vph-ink);
}
.vm-ck-counter-sub {
    font-size: 11.5px;
    color: var(--vph-primary-dark);
    margin-top: 2px;
    line-height: 1.35;
}

/* -- The scrolling column ---------------------------------------- */
.vm-ck-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 14px 12px;
}
#vm-ck.has-foot .vm-ck-body { padding-bottom: 92px; }

/* -- The mode control, and what stands in its place -------------- */
/* Rendered ONLY when the counter delivers AND has published a fee.
   Otherwise the screen is 05b and, where the reader is owed one, a
   single 12px line says why. */
.vm-ck-modes {
    display: flex;
    gap: 8px;
    background: var(--vph-grey-2);
    border-radius: 999px;
    padding: 4px;
}
.vm-ck-mode {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    color: var(--vph-ink-3);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.vm-ck-mode i { font-size: 12px; }
.vm-ck-mode.is-on {
    background: var(--vph-primary-solid);
    color: #fff;
    font-weight: 700;
}
.vm-ck-modereason {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    padding: 0 2px;
}
.vm-ck-modereason i { color: var(--vph-primary-dark); font-size: 12px; margin-top: 3px; }

/* -- The card idiom: 18px radius, no border, the house shadow ---- */
.vm-ck-cards { display: flex; flex-direction: column; gap: 12px; }
.vm-ck-card {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--vph-card-shadow);
}
/* The section label, shared by all five cards. */
.vm-ck-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vph-ink-4);
}

.vm-ck-row { display: flex; align-items: flex-start; gap: 11px; margin-top: 11px; }
.vm-ck-row--mid { align-items: center; }
.vm-ck-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ck-tile i { font-size: 13px; }
.vm-ck-tile--teal { background: var(--vph-tint); color: var(--vph-primary-dark); }
.vm-ck-tile--teal i { font-size: 14px; }
.vm-ck-rowmain { flex: 1; min-width: 0; }
.vm-ck-rowtitle { font-size: 13px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-ck-rowsub { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 3px; line-height: 1.4; }
.vm-ck-rowhours { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); margin-top: 3px; }
/* The number is the identity: it is how the pharmacist calls about a
   substitution and how she is found at the counter. Shown exactly as
   stored — never reformatted. */
.vm-ck-rowphone { font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; }

/* A control is a FILL, not an underline (09d's rule, 04's Change pill).
   "Change address", "Edit", "Directions", "Call" and both Save buttons
   are one material. */
/* "Collect at" carries THREE of these once the counter publishes a WhatsApp
   number (§10.15). Three 12.5px labels do not fit across a 360px phone, so
   the row wraps: `min-width` is the narrowest pill that still holds
   "Directions" whole, and below that width the third pill drops to its own
   line at full width rather than shrinking under the 44px rule. Two pills
   are unaffected — they clear the minimum on every phone we draw for. */
.vm-ck-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vm-ck-acts > .vm-ck-pill { min-width: 98px; }
.vm-ck-pill {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-canvas);
    border: 1px solid var(--vph-grey);
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.vm-ck-pill:hover { color: var(--vph-primary-dark); }
.vm-ck-pill i { font-size: 12px; }
/* "Edit", inside a row rather than under it. */
.vm-ck-row .vm-ck-pill { flex: 0 0 auto; padding: 0 14px; }

/* The attribution row. `fa-motorcycle`, not `fa-clock`: the fact is WHO
   delivers, and the 45-60 minute half of the frame's sentence is an
   unmeasured promise the file bans everywhere else. */
.vm-ck-hair {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--vph-hairline);
}
.vm-ck-hair i { color: var(--vph-primary-dark); font-size: 12px; flex-shrink: 0; }
/* 1.5, not 1.4: the frame's own line declares none and inherits 1.5, and
   this row is what carries the whole column below it to 0px drift. */
.vm-ck-hair span { font-size: 12px; color: var(--vph-ink-3); line-height: 1.5; }

/* -- The inline forms -------------------------------------------- */
/* Labels, not placeholders: a placeholder disappears exactly when it is
   needed. 44px fields, the same 12px radius as the ways-out buttons. */
.vm-ck-form { display: flex; flex-direction: column; gap: 10px; margin-top: 11px; }
.vm-ck-fieldlabel {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vph-ink-4);
    margin-bottom: 5px;
}
.vm-ck-input {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--vph-grey);
    background: #fff;
    padding: 0 12px;
    font-size: 13px;
    color: var(--vph-ink);
}
.vm-ck-input:focus { outline: 2px solid var(--vph-primary); outline-offset: -2px; }
/* Slice F3 C1: a number under 8 digits — 20's sentence and 20's marking
   (ink, never red). */
.vm-ck-input[aria-invalid="true"] { border-color: var(--vph-ink-2); }
.vm-ck-err {
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-2);
    line-height: 1.4;
    padding: 0 2px;
    margin-top: -4px;
}
.vm-ck-formacts { display: flex; gap: 8px; }

/* -- 52px option rows: the payment method, and "When" ------------- */
.vm-ck-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.vm-ck-opt {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    text-align: left;
}
.vm-ck-opt.is-on { background: var(--vph-tint); border-color: var(--vph-primary); }
.vm-ck-opt-tile {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ck-opt-tile i { font-size: 13px; }
.vm-ck-opt.is-on .vm-ck-opt-tile { background: var(--vph-primary); color: #fff; }
.vm-ck-opt-main { flex: 1; min-width: 0; }
.vm-ck-opt-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--vph-ink-2);
    line-height: 1.35;
}
.vm-ck-opt.is-on .vm-ck-opt-title { font-weight: 700; color: var(--vph-ink); }
.vm-ck-opt-sub {
    display: block;
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    line-height: 1.35;
}
.vm-ck-opt.is-on .vm-ck-opt-sub { color: var(--vph-ink-3); }
.vm-ck-opt-check { color: var(--vph-primary); font-size: 16px; flex-shrink: 0; }

/* The slot list. Bounded by closing time, on the half hour — a CHOICE
   she makes, never a promise this screen makes. */
.vm-ck-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-ck-slot {
    height: 44px;
    min-width: 74px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-ck-slot.is-on { background: var(--vph-tint); color: var(--vph-primary-dark); }

/* -- Not in this order ------------------------------------------- */
/* BORDERED, not lifted, on purpose: a shadow means actionable in this
   app and this is a fact you cannot act on from here. It NEVER carries
   a figure — a line that is not in the order has no price in it. */
.vm-ck-note {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 12px 14px 4px;
}
.vm-ck-notetext { font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ck-notetext + .vm-ck-notetext { margin-top: 6px; }
.vm-ck-notelink {
    height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
}
.vm-ck-notelink:hover { color: var(--vph-primary-dark); }

/* -- The summary ------------------------------------------------- */
/* NEVER a bare "Total". The fee is the pharmacy's own figure on its own
   line, and it enters only the "To pay on delivery" number.
   05 redesign (2026-09-24): the figure is the HEADLINE block and comes
   FIRST — the teal tint, `payLabel()` at 11.5px/600, the figure at 30px —
   and what it is made of sits on the white inner row under it, one glyph
   per line. The white card around it stays (the frame keeps it). */
.vm-ck-total {
    background: var(--vph-teal-tint);
    border-radius: 14px;
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.vm-ck-totallabel { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
.vm-ck-totalfig { display: flex; align-items: baseline; gap: 5px; }
.vm-ck-totalnum {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1;
    color: var(--vph-ink);
}
.vm-ck-totalcur { font-size: 13px; font-weight: 700; color: var(--vph-primary-dark); }
.vm-ck-sums {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.vm-ck-sumrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.5;
}
.vm-ck-sums i {
    width: 14px;
    text-align: center;
    font-size: 11px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
}
.vm-ck-sumlabel { flex: 1; min-width: 0; }
.vm-ck-sumfig { white-space: nowrap; }
/* "Nothing is charged now" under the payment options. */
.vm-ck-cardnote { font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.45; margin-top: 11px; }
/* The same class on pickup, as a line of the inner row: the counter's
   payment note takes the fee line's place (pickup has no fee). */
.vm-ck-sums .vm-ck-cardnote {
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-ck-sums .vm-ck-cardnote i { margin-top: 3px; }
.vm-ck-sums .vm-ck-cardnote span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}

/* -- The prescription card --------------------------------------- */
/* Identical on both branches, and it mentions neither delivery nor
   collection. NO BORDER and NO ACCENT EDGE: prescription signals with a
   blue label row INSIDE the card. It is never in a figure and it never
   blocks the commit. */
.vm-ck-rxwrap { display: flex; flex-direction: column; gap: 12px; }
.vm-ck-rx {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
/* 05 redesign (2026-09-24): one 14px column, 12px apart — the state row,
   04's 52px tile beside the title, one inset row, the door. */
.vm-ck-rx-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vm-ck-rx-state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--vph-rx-solid);
}
.vm-ck-rx-state i { font-size: 13px; }
.vm-ck-rx-row { display: flex; align-items: center; gap: 12px; }
/* 04's tile: the product's REAL form. #94a3b8 is the decorative glyph
   here and never a text colour. */
.vm-ck-rx-tile {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 19px;
}
/* The old title split at its full stop: "<name> is not in this order." */
.vm-ck-rx-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
    line-height: 1.25;
    text-wrap: pretty;
}
/* ONE inset row carrying both sentences, a teal glyph each. */
.vm-ck-rx-inset {
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-ck-rx-line { display: flex; align-items: flex-start; gap: 9px; }
.vm-ck-rx-line i {
    width: 14px;
    text-align: center;
    font-size: 11px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-ck-rx-note i { font-size: 12px; }
.vm-ck-rx-line span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}
/* A 48px GREY pill with prescription-blue ink — NOT solid blue: Place
   order / Reserve is this screen's act, and the filled blue button
   belongs to 04, where dealing with the item is the screen's job. No
   shadow either: one act per screen. Dropped once sent. */
.vm-ck-rx-door {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-rx-solid);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-ck-rx-door:hover { color: var(--vph-rx-solid); }
.vm-ck-rx-door i { font-size: 13px; }

/* -- The foot bar ------------------------------------------------ */
/* 04's geometry, NOT the frame's button-in-button: facts left, one
   button right. The sub line names the mode's promise — or, while a
   required fact is missing, the ONE thing that is missing. */
.vm-ck-foot {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    padding: 11px 14px 13px;
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 40;
}
.vm-ck-foot-main { flex: 1; min-width: 0; }
.vm-ck-foot-total { display: flex; align-items: baseline; gap: 4px; }
.vm-ck-foot-fig {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-ck-foot-cur { font-size: 10.5px; font-weight: 600; color: var(--vph-ink-4); }
.vm-ck-foot-sub { font-size: 11px; color: var(--vph-ink-4); margin-top: 3px; line-height: 1.35; }
/* 05 redesign (2026-09-24): the frame now draws this bar — one 48px
   commit, 14px/700, padding 0 20px, the teal ACT shadow. */
.vm-ck-commit {
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ck-commit i { font-size: 11px; }
/* A required fact is missing, or the POST is in flight. A DIMMED TEAL,
   never #94a3b8 — that grey is decorative-only in this hub, and 04's
   inert Checkout set the precedent. No act shadow: nothing to act on. */
.vm-ck-commit.is-inert {
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    cursor: default;
    box-shadow: none;
}

/* ----------------------------------------------------------------
   17. SCREEN 06 — ORDER TRACKING (06a in progress + 06b quote ready)
   Pixel truth: docs/design/pharmacy/screens/06/{README.md,frame.html}
   — fidelity HIGH, premium pass complete. Contract:
   PHARMACY_HUB.md §6 row "06", §7.9.

   ONE REFERENCE, TWO HALVES that move at different speeds, and the
   cards are NAMED, never numbered. Nothing here is styled for a status
   chip, an ETA, a map, a countdown, a progress bar, a receipt, a cancel
   button or a thank-you state: the premium pass refused every one of
   them, and a style rule is how they creep back.

   SHADOW MEANS ACTIONABLE, BORDER MEANS FACT — the rule the whole
   screen turns on. The live order and the quote are lifted; the
   delivered order, the declined price and the lapsed price are
   bordered.

   Teal --vph-tint / --vph-primary-dark = the counter. --vph-rx-solid
   (#1b6fa8) = prescription and NOTHING else. --vph-primary (#16a085) is
   the timeline's done mark. #94a3b8 appears exactly twice, on the two
   decorative capsule glyphs, and never on text.

   Screen 05's classes are .vm-ck-*, so this screen's are .vm-od-*.

   REDESIGNED 2026-09-24 (frontend only, the Sept 24 frame): the state
   title 22px (17px while a prescription waits), the 6a money and the 6b
   quote as the house HEADLINE BLOCK (teal, the 30px figure, a white
   inner row), the waiting note as the house INSET ROW, the counter's
   note as a plain #f8fafc row, Accept 15px with the blue act shadow.
   ---------------------------------------------------------------- */

/* -- The frame's inherited line box ------------------------------ */
/* The same trap §12, §14 and §16 document: `frame.html` declares
   `body{line-height:1.5}` and every block inherits it, while the shared
   base in §2 declares none. Declared HERE, on this screen's own shell
   blocks, never on the shared `body`. */
.vm-od-head,
.vm-od-counter,
.vm-od-body { line-height: 1.5; }

/* -- Header + counter bar, one sticky block ---------------------- */
.vm-od-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    flex-shrink: 0;
}
.vm-od-head {
    background: #fff;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--vph-grey-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The ONE control. Its label is the destination's own name. */
/* .vm-od-back is the hub's one back control (.vm-back, Slice N 30b). */
/* The reference IS the container, so it is the title. */
.vm-od-title {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    color: var(--vph-ink);
}
/* Printed ONLY when this is not today's order. */
.vm-od-date {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    line-height: 1.35;
}

/* 04's bar with NO CONTROL AT ALL. The name wraps and is never
   truncated; the sub-line states the container in nouns. */
.vm-od-counter {
    background: var(--vph-tint);
    padding: 8px 14px 10px;
}
.vm-od-counter-name {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.25;
    color: var(--vph-ink);
}
.vm-od-counter-sub {
    font-size: 11.5px;
    color: var(--vph-primary-dark);
    margin-top: 2px;
    line-height: 1.35;
}

/* -- The scrolling column ---------------------------------------- */
/* The screen runs past the fold: `flex: 1 0 auto` so it grows with its
   cards rather than being capped at the viewport. */
.vm-od-body {
    flex: 1 0 auto;
    padding: 14px;
}
.vm-od-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* An absent, malformed or unknown reference: one honest line, and the
   exit above still works. */
.vm-od-none {
    font-size: 13px;
    color: var(--vph-ink-4);
    line-height: 1.5;
    padding: 4px 0;
}

/* -- The live order card ----------------------------------------- */
.vm-od-card {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--vph-card-shadow);
}
.vm-od-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--vph-ink-4);
}
/* The prescription's own label, in the blue that is its alone. Worn by
   the prescription card AND by the order the accepted quote became —
   the one card that is both. */
.vm-od-lbl--rx {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vph-rx-solid);
}
.vm-od-lbl--rx i { font-size: 13px; }
/* The state title names the act. Never "Processing". Redesign 2026-09-24:
   22px, the size of a card that is the screen's news (the live order, the
   price to answer). A prescription still WAITING is a step quieter, 17px —
   the frame's own second size, not a third invented one. */
.vm-od-state {
    font-family: var(--vph-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--vph-ink);
    margin-top: 4px;
}
.vm-od-state--rx { margin-top: 6px; }
.vm-od-state--wait { font-size: 17px; letter-spacing: -.3px; line-height: 1.25; }

/* -- The timeline: 18px dots in a 20px gutter, 2px connectors ----- */
.vm-od-time {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
}
.vm-od-step { display: flex; gap: 11px; }
.vm-od-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}
/* Pending. */
.vm-od-dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    border: 2px solid var(--vph-grey);
    flex-shrink: 0;
}
/* Done — the one place the primary teal appears on this screen. */
.vm-od-dot--done {
    background: var(--vph-primary);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-od-dot--done i { font-size: 8px; }
/* Current: white with a 3px ring. */
.vm-od-dot--now {
    background: #fff;
    border: 3px solid var(--vph-primary);
}
.vm-od-link {
    flex: 1;
    width: 2px;
    background: var(--vph-grey);
    min-height: 22px;
}
.vm-od-link--done { background: var(--vph-primary); }
.vm-od-stepmain {
    flex: 1;
    min-width: 0;
    padding-bottom: 14px;
}
.vm-od-step:last-child .vm-od-stepmain { padding-bottom: 0; }
.vm-od-steptitle {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
}
.vm-od-steptitle--now { font-weight: 700; color: var(--vph-primary-dark); }
.vm-od-steptitle--pending { color: var(--vph-ink-4); }
.vm-od-stepmeta {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* -- The money: the HEADLINE BLOCK (redesign 2026-09-24) ---------- */
/* Money about to be handed to a person at the door — the most real
   money this app prints, and graded above the "so far" figures on 02
   and 04. NEVER a bare "Total". The house headline block: the label,
   the 30px figure, and the method on a white inner row. */
.vm-od-money {
    margin-top: 14px;
    background: var(--vph-teal-tint);
    border-radius: 14px;
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.vm-od-moneylabel { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
/* The white inner row. The glyph follows the method (order.js). */
.vm-od-moneymethod {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
}
.vm-od-moneymethod i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.vm-od-fig {
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-shrink: 0;
}
.vm-od-fig--sm { gap: 3px; }
/* The headline figure: 30px, tight, tabular — the 6a money and the 6b
   price wear the same one. */
.vm-od-fignum {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.8px;
    line-height: 1;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-od-figcur { font-size: 13px; font-weight: 700; color: var(--vph-primary-dark); }

/* -- The settled order: BORDERED, no shadow ---------------------- */
/* A delivered, paid order is a fact, not work. That row IS the record
   — there is no receipt to issue. */
.vm-od-settled {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-od-settledrow {
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
}
.vm-od-settledtile {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-od-settledtile i { font-size: 14px; }
/* A cancelled order is not a teal fact. Grey, and nothing else changes:
   no apology, no reason box, no control. */
.vm-od-settledtile--off { background: var(--vph-grey-2); color: var(--vph-ink-4); }
.vm-od-settledmain { flex: 1; min-width: 0; }
.vm-od-settledtitle { font-size: 12.5px; font-weight: 700; color: var(--vph-ink); }
.vm-od-settledmeta {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* -- The post-handover question ---------------------------------- */
/* This single tap is where the store page's "94% good service · 312
   orders" comes from. Answering REMOVES the question; it never adds a
   badge or a thank-you state. */
.vm-od-ask {
    border-top: 1px solid var(--vph-hairline);
    padding: 12px 14px;
}
.vm-od-asktitle { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); }
.vm-od-askwhy {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 3px;
    line-height: 1.45;
}
.vm-od-askrow { display: flex; gap: 8px; margin-top: 10px; }
.vm-od-answer {
    flex: 1;
    min-height: 44px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    padding: 0 8px;
}
.vm-od-answer[aria-disabled="true"] { opacity: .6; }

/* -- The prescription card --------------------------------------- */
/* One shell for all six states; `overflow:hidden` because the footed
   door sits on the card's own edge. */
.vm-od-rx {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
/* An answered price is a fact: bordered, not lifted. */
.vm-od-rx--fact {
    border: 1px solid var(--vph-grey);
    box-shadow: none;
}
.vm-od-rxbody { padding: 14px; line-height: 1.5; }
.vm-od-rxbody--quote { padding: 16px 14px; }

.vm-od-rxitem { display: flex; gap: 11px; margin-top: 13px; }
.vm-od-rxtile {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* #94a3b8 is a DECORATIVE GLYPH here and nowhere else — never text. */
.vm-od-rxtile i { color: #94a3b8; font-size: 17px; }
.vm-od-rxitemmain { flex: 1; min-width: 0; }
.vm-od-rxname {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.35;
}
.vm-od-rxmeta {
    font-size: 11.5px;
    color: var(--vph-ink-3);
    margin-top: 3px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
/* The house INSET ROW (redesign 2026-09-24): pharmacy advice wears
   `fa-user-doctor`; the words are the build's own. */
.vm-od-rxnote {
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 9px 11px;
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-od-rxnote i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-od-rxnote p {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}

/* The footed door to 07's pages, under the card's own hairline. */
.vm-od-rxdoor {
    width: 100%;
    height: 44px;
    border-top: 1px solid var(--vph-hairline);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    color: var(--vph-rx-solid);
}
.vm-od-rxdoor:hover { color: var(--vph-rx-solid); }
.vm-od-rxdoor i { font-size: 12px; flex-shrink: 0; }
.vm-od-rxdoor i:last-child { font-size: 13px; }
.vm-od-rxdoor span {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
}

/* -- 06b, the quote ---------------------------------------------- */
.vm-od-qanswered {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
/* The quote's label row is one pixel wider-set than 6a's (the frame's
   gap 9 against 8). */
.vm-od-rxbody--quote .vm-od-lbl--rx { gap: 9px; }

/* THE HEADLINE BLOCK (redesign 2026-09-24): the lines, the 30px figure
   and the hold on its white inner row, in one teal block. One priced
   line: the figure is that line's price, unlabelled. Two or more: every
   row carries its own price and the figure is the labelled total. Built
   as a column so more lines fit: a quote MUST be able to carry the lines
   the counter cannot supply. */
.vm-od-qblock {
    margin-top: 13px;
    background: var(--vph-teal-tint);
    border-radius: 14px;
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-od-qline {
    display: flex;
    gap: 12px;
    align-items: center;
}
/* White on the teal block. #94a3b8 is a DECORATIVE GLYPH, never text. */
.vm-od-qtile {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-od-qtile i { color: #94a3b8; font-size: 19px; }
.vm-od-qmain { flex: 1; min-width: 0; }
.vm-od-qname {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.35;
}
/* A line the counter cannot supply: struck on the NAME only, and the
   price slot says why in words rather than showing a figure. */
.vm-od-qname--out { text-decoration: line-through; }
/* The counter's unit, stated only now that it has read the paper. */
.vm-od-qmeta {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vph-primary-dark);
    margin-top: 3px;
}
/* A row's own price — only when two or more lines are priced. */
.vm-od-qnum {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-od-qcur { font-size: 9.5px; font-weight: 700; color: var(--vph-primary-dark); }
/* #475569 on the teal tint is 6.7:1; the old #64748b would be 4.2:1. */
.vm-od-qout { font-size: 11.5px; color: var(--vph-ink-3); flex-shrink: 0; }

/* The labelled total (two or more priced lines): the label in the block's
   own label style, the 30px figure under it. */
.vm-od-qtotal { display: flex; flex-direction: column; gap: 9px; }
.vm-od-qtotallabel { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }

/* The hold, with its consequence — the block's white inner row. The
   frame sets the clause `nowrap`; it is NOT copied, because "Held for you
   until Thu 19 Sep at 09:41" overflows a 360px phone. */
.vm-od-hold {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.vm-od-holdrow { display: flex; align-items: center; gap: 9px; }
.vm-od-holdrow i {
    color: var(--vph-primary-dark);
    font-size: 11px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.vm-od-holdtext {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-od-holdwhy {
    padding-left: 23px;
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    text-wrap: pretty;
}

/* The counter's words, signed with the counter's name (the naming rule,
   §7.15), on a plain #f8fafc row under the block. The signature is
   SHOWN, not explained; no initials circle. */
.vm-od-qnote {
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 12px;
}
.vm-od-qwho { font-size: 11.5px; font-weight: 700; color: var(--vph-ink-2); }
.vm-od-qwords {
    font-size: 12.5px;
    color: var(--vph-ink-2);
    line-height: 1.5;
    margin-top: 3px;
}

/* The ways out. Declining is PLAIN AND VISIBLE: refusing a price is
   legitimate, and there is no "are you sure" step — the card is the
   review. There is no chat anywhere in the app, so the middle way out
   is a call. */
.vm-od-ways {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 14px;
}
.vm-od-accept {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* The prescription-blue act shadow (redesign 2026-09-24). */
    box-shadow: 0 6px 16px rgba(27, 111, 168, .24);
}
.vm-od-accept[aria-disabled="true"] { opacity: .65; }
.vm-od-waysrow { display: flex; gap: 8px; }
.vm-od-way {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.vm-od-way:hover { color: var(--vph-ink-2); }
.vm-od-way i { font-size: 11px; }
.vm-od-way[aria-disabled="true"] { opacity: .65; }
.vm-od-waysub {
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    margin-top: 11px;
    text-wrap: pretty;
}

/* -- The answered price, as a bordered fact ---------------------- */
.vm-od-facttitle { font-size: 12.5px; font-weight: 700; color: var(--vph-ink); }
.vm-od-factmeta {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.vm-od-factbody {
    font-size: 12px;
    color: var(--vph-ink-3);
    margin-top: 5px;
    line-height: 1.45;
}

/* -- One call control for the whole reference -------------------- */
/* One counter, so one number; the reference's USE travels with the
   control. Absent without a phone — never a dead door. */
.vm-od-call {
    width: 100%;
    background: #fff;
    /* The frame draws this control as a <button>, whose UA line-height is
       `normal`; ours is an <a> and would inherit the 1.5 declared on
       .vm-od-body, which made the card 0.75px taller than the frame. The
       same §12 line-box trap, one element further down. */
    line-height: normal;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: var(--vph-card-shadow);
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}
.vm-od-call:hover { color: inherit; }
.vm-od-calltile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-od-calltile i { font-size: 14px; }
.vm-od-callmain { flex: 1; min-width: 0; }
.vm-od-calltitle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--vph-ink);
}
.vm-od-callsub {
    display: block;
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.vm-od-call > i { color: var(--vph-ink-4); font-size: 13px; flex-shrink: 0; }
/* The same door on WhatsApp (§10.15), and deliberately the SAME material:
   one counter, two channels, no brand green and no hierarchy between them.
   The modifier exists so the two cards can be told apart in a test and in a
   later restyle — it carries no declaration of its own today, which is why
   there is no `.vm-od-call--wa` ruleset under this comment. */

/* ----------------------------------------------------------------
   18. SCREEN 07 — SEND A PRESCRIPTION
   (7a capture + 7b review and send + 7c sent + the read view)
   Pixel truth: docs/design/pharmacy/screens/07/{README.md,frame.html}
   — fidelity PRE-PREMIUM-PASS (the handoff was extracted from the
   master canvas; the section-by-section pass has not been run on
   01–08). Contract: PHARMACY_HUB.md §6 row "07", §5.4, §7.10.

   THE ONE FLOW WITH NO PRICES IN IT, so nothing in here is styled for a
   figure, a total, a payment method, a mode toggle, a countdown or a
   status chip. There is no money rule either: the only numbers on this
   screen are a page count, a clock and a distance, and they wear
   `.vm-num` in the markup.

   THE PHOTOGRAPH IS THE PRODUCT. 7a is the one dark screen in the hub:
   a viewfinder is a viewfinder, and a white page around a camera frame
   would be a form. 7b and 7c are ordinary light task screens, which is
   why this section carries two colour worlds and says which is which on
   every block.

   SHADOW MEANS ACTIONABLE, BORDER MEANS FACT: the pages card, the
   fields card, the counter card, the sent card and every door are
   lifted; the settled read-view line is bordered.

   Four values are traced to `frame.html` and are new to this file:
   #0b1220 and #1c2738 (the camera ground and its radial), #eef6fc (the
   blue fact ground, the frame's own blue-tint family) and #dbeafa (the
   1px edge on the attached line). Everything else is a token. On the
   dark ground the light text is #fff / #e2e8f0 / #cbd5e1 — never
   #94a3b8, which the frame used for two 11.5px lines and which is
   banned for functional text (§7.4); #cbd5e1 is the floor screen 14 set
   for small copy on a dark ground.

   Screens 05 and 06 are .vm-ck-* and .vm-od-*; the hub's own
   prescription card on screen 01 already owns .vm-rx-*, so this
   screen's classes are .vm-sp-* ("send prescription").

   REDESIGNED 2026-09-24 (frontend only, the Sept 24 frame, signed off):
   7b's counter card and 7c's top card are the house HEADLINE BLOCK
   (`.vm-sp-hl`), Change is a 44px fill with no underline (white on the
   block), Send is 15/700 with the blue act shadow, 7c's doors are ONE
   lifted card of 60px hairline rows, and the closer is an inset row.
   ---------------------------------------------------------------- */

/* -- The frame's inherited line box ------------------------------ */
/* The same trap §12, §14, §16 and §17 document: `frame.html` declares
   `body{line-height:1.5}` and every block inherits it, while the shared
   base in §2 declares none. Declared HERE, on this screen's own shell
   blocks, never on the shared `body`. */
.vm-sp-cap,
.vm-sp-head,
.vm-sp-body { line-height: 1.5; }

/* ================= 7a — THE CAPTURE (dark) ================= */

/* The app frame itself goes dark, so the 480px column on a wide window
   is the camera rather than a white sheet with a camera inside it. */
.vm-app.is-capture { background: #0b1220; }

.vm-sp-cap {
    flex: 1 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.vm-sp-caphead {
    flex-shrink: 0;
    padding: 10px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* The labelled back control, on the dark ground. Same 44px geometry as
   05's and 06's; the frame drew a bare X, which says nothing about
   where it goes. */
/* .vm-sp-capback is the hub's one back control (.vm-back, Slice N 30b), white on the dark ground
   (.vm-back--band). */
/* "Photograph page N" — N counts the sheets with her. */
.vm-sp-captitle {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: #fff;
}
.vm-sp-capsub { font-size: 11.5px; color: #cbd5e1; }

/* The viewfinder ground. */
.vm-sp-stage {
    flex: 1 1 auto;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    margin: 0 14px;
    border-radius: 18px;
    background: radial-gradient(120% 80% at 50% 40%, #1c2738 0%, #0b1220 100%);
}
/* ONE tap target: the corner guides, the cue and the reason are all the
   same button, and it opens the phone's own camera. */
.vm-sp-frame {
    position: relative;
    width: 272px;
    max-width: 100%;
    height: 344px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.vm-sp-corner { position: absolute; width: 30px; height: 30px; }
.vm-sp-corner--tl {
    left: 0;
    top: 0;
    border-left: 3px solid #fff;
    border-top: 3px solid #fff;
    border-radius: 6px 0 0 0;
}
.vm-sp-corner--tr {
    right: 0;
    top: 0;
    border-right: 3px solid #fff;
    border-top: 3px solid #fff;
    border-radius: 0 6px 0 0;
}
.vm-sp-corner--bl {
    left: 0;
    bottom: 0;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 0 0 0 6px;
}
.vm-sp-corner--br {
    right: 0;
    bottom: 0;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 0 0 6px 0;
}
.vm-sp-framecue {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sp-framecue i { font-size: 18px; }
/* A REASON, not an instruction. */
.vm-sp-framewhy {
    max-width: 232px;
    text-align: center;
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.45;
}

/* The pages taken so far. A real rail: it scrolls, the scrollbar is
   hidden and the row bleeds past the gutter so the last tile is cut by
   the frame edge (§7's rails block, the director's ruling). Twelve
   pages are allowed, and a bleeding row that cannot scroll would hide
   nine of them. */
.vm-sp-strip {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 12px 38px 2px 14px;
}
.vm-sp-strip::-webkit-scrollbar { display: none; }
.vm-sp-strip > * { scroll-snap-align: start; flex-shrink: 0; }

/* The quiet inline refusal: a photo that could not be read (slice F3),
   not an image, or a 13th page. Never an alert. */
.vm-sp-capnote {
    flex-shrink: 0;
    padding: 10px 14px 0;
    font-size: 12px;
    color: #e2e8f0;
    line-height: 1.45;
}
/* The same refusal on 7b's white pages card, for a page added from there. */
.vm-sp-pagesnote {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-2);
    line-height: 1.45;
}

.vm-sp-capfoot {
    flex-shrink: 0;
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vm-sp-caprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.vm-sp-capbtn {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
}
.vm-sp-capbtn i { font-size: 15px; }
/* DIM until a page exists — and while any upload is pending or has
   failed, because a prescription with a missing page cannot be priced. */
.vm-sp-capbtn[aria-disabled="true"] { opacity: .55; color: #cbd5e1; }
.vm-sp-shutter {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sp-shutter > span {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #fff;
    box-shadow: inset 0 0 0 2px #0b1220;
}
.vm-sp-caphint { text-align: center; font-size: 11.5px; color: #cbd5e1; }

/* The two file inputs: visually hidden, never `display:none`. The
   controls above are the targets; these are what they click. */
.vm-sp-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ================= THE PAGE TILES (both screens) ================= */

.vm-sp-page { width: 98px; }
/* NO MICRO-ICON, ever: the tile is one target, and Retake and Remove
   live inside the viewer it opens. */
.vm-sp-tile {
    position: relative;
    display: block;
    width: 98px;
    height: 118px;
    border-radius: 12px;
    overflow: hidden;
    background: #f7f6f2;
    border: 1px solid var(--vph-grey);
}
.vm-sp-tileimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-sp-tileblank {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vph-sep);
}
.vm-sp-tileblank i { font-size: 20px; }
.vm-sp-pagecap {
    font-size: 11px;
    color: var(--vph-ink-3);
    margin-top: 6px;
    text-align: center;
}
.vm-sp-cap .vm-sp-pagecap { color: #cbd5e1; }

/* The progress ring. The ONE place a value is written to an element's
   style attribute from JS (`--p`): a determinate arc has no class-based
   form, and a spinner would hide how much is left on exactly the
   connection that is the reason this screen has progress at all. */
.vm-sp-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: conic-gradient(#fff calc(var(--p, 0) * 1%), rgba(15, 23, 42, .45) 0);
}
.vm-sp-ring::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .62);
}

/* A failed upload is a "Try again" tile — a real 44px+ target, and the
   only thing standing between her and Done. */
.vm-sp-tileover {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
}
.vm-sp-tileover i { font-size: 15px; }

/* ================= 7b / 7c — THE LIGHT SCREENS ================= */

.vm-sp-rev,
.vm-sp-done { flex: 1 0 auto; display: flex; flex-direction: column; }

.vm-sp-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    flex-shrink: 0;
}
.vm-sp-head {
    background: #fff;
    padding: 10px 14px 12px;
    border-bottom: 1px solid var(--vph-grey-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* .vm-sp-back is the hub's one back control (.vm-back, Slice N 30b). */
.vm-sp-title {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    color: var(--vph-ink);
}
.vm-sp-sub { font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.35; }
/* The reference is a LINK: order.html?ref= is where the price arrives. */
.vm-sp-reflink { color: var(--vph-rx-solid); font-weight: 700; }

.vm-sp-body {
    flex: 1 0 auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* An unreadable `?id=`: one honest line, and the exit still works. */
.vm-sp-none {
    padding: 18px 14px;
    font-size: 13px;
    color: var(--vph-ink-4);
    line-height: 1.5;
}

/* -- The card idiom (§7's: 18px, no border, the house shadow) ----- */
.vm-sp-card {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--vph-card-shadow);
}
/* 7c's top card: the redesign (2026-09-24) retired its 3px blue top
   edge. The class stays as the card's name; it carries no rule. */
.vm-sp-cardhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.vm-sp-cardtitle {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
.vm-sp-cardmeta { font-size: 11.5px; color: var(--vph-ink-4); }
.vm-sp-cardlabel { font-size: 12px; color: var(--vph-ink-3); }

/* -- THE HEADLINE BLOCK (redesign 2026-09-24) --------------------- */
/* The house block inside a lifted card: 7b's counter card ("Read by")
   and 7c's top card ("Sent"). Teal ground, a 11.5px teal label, the
   22px name, the facts in teal, and a white inner row. */
.vm-sp-hl {
    background: var(--vph-teal-tint);
    border-radius: 14px;
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-sp-hllabel { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sp-hllabel--ok { display: flex; align-items: center; gap: 8px; }
.vm-sp-hllabel--ok i { font-size: 13px; }
.vm-sp-hlrow { display: flex; align-items: center; gap: 10px; }
/* "Open until 20:00 · 1.2 km · Delivers" — #0f6d5c on the tint, 5.5:1. */
.vm-sp-facts,
.vm-sp-withmeta {
    font-size: 12.5px;
    color: var(--vph-primary-dark);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
/* The white inner row: "Only this pharmacy sees your prescription." */
.vm-sp-cardfoot {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.5;
}
.vm-sp-cardfoot i {
    font-size: 11px;
    color: var(--vph-primary-dark);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* The attached basket line. Blue, because prescription is blue, and
   bordered, because it is a fact about another screen's list. */
.vm-sp-attach {
    background: linear-gradient(100deg, var(--vph-rx-tint) 0%, #fff 62%);
    border: 1px solid #dbeafa;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-sp-attach i { color: var(--vph-rx-solid); font-size: 12px; flex-shrink: 0; }
.vm-sp-attach p {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--vph-ink-2);
    line-height: 1.4;
}
.vm-sp-attach strong { color: var(--vph-ink); }

/* 7b's pages row: the same rail, bled to the card's own edges. */
.vm-sp-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -14px;
    padding: 12px 38px 2px 14px;
}
.vm-sp-rail::-webkit-scrollbar { display: none; }
.vm-sp-rail > * { scroll-snap-align: start; flex-shrink: 0; }
.vm-sp-add {
    width: 98px;
    height: 118px;
    border-radius: 12px;
    border: 1.5px dashed var(--vph-sep);
    background: var(--vph-canvas);
    color: var(--vph-primary-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
}
.vm-sp-add i { font-size: 16px; }

/* -- Rows, pills and fields -------------------------------------- */
.vm-sp-row { display: flex; align-items: center; gap: 11px; }
.vm-sp-row > i { color: var(--vph-ink-3); font-size: 13px; flex-shrink: 0; }
.vm-sp-rowmain { flex: 1; min-width: 0; }
.vm-sp-rowtitle { font-size: 13px; font-weight: 600; color: var(--vph-ink); }
.vm-sp-rowsub {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    line-height: 1.35;
}
/* The counter's name in the "Read by" block: 22px, and it WRAPS — a
   counter's name is never truncated. */
.vm-sp-counter {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--vph-ink);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
/* A control is a FILL, not an underline — 09d's rule, and the same
   correction §7.8 made to the frame's underlined "Edit". The redesign
   (2026-09-24) sets it 44px, 16px each side, and NO underline. */
.vm-sp-change {
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
}
/* The same pill on the teal block is WHITE, with the frame's hairline
   lift. */
.vm-sp-change--hl { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.vm-sp-split {
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--vph-hairline);
}

.vm-sp-pills { display: flex; gap: 8px; margin-top: 9px; }
.vm-sp-pill {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 700;
}
.vm-sp-pill.is-on { background: var(--vph-primary-solid); color: #fff; }

.vm-sp-form { margin-top: 13px; display: flex; flex-direction: column; gap: 10px; }
.vm-sp-field { display: block; }
.vm-sp-fieldlabel {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
    margin-bottom: 5px;
}
.vm-sp-input,
.vm-sp-textarea {
    width: 100%;
    min-height: 48px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 13px;
    padding: 12px;
    font-family: var(--vph-font-body);
    font-size: 14px;
    color: var(--vph-ink);
}
.vm-sp-textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.vm-sp-input:focus,
.vm-sp-textarea:focus { outline: 2px solid var(--vph-primary); outline-offset: 1px; }
.vm-sp-hint { font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.4; }
/* What is still missing, said ONCE she has pressed Send — never
   before, and never in the emergency red (§7.4 reserves it). */
.vm-sp-req {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vph-rx-solid);
    line-height: 1.4;
}

/* The paper still matters, said once and calmly: BLUE, a fact, not a
   warning. This hub has no yellow and no orange at all. */
.vm-sp-fact {
    background: #eef6fc;
    border-radius: 14px;
    padding: 11px 13px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.vm-sp-fact i {
    color: var(--vph-rx-solid);
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}
.vm-sp-fact p { font-size: 12px; color: var(--vph-rx-solid); line-height: 1.45; }

/* -- The commit bar: 05's geometry, one control ------------------- */
.vm-sp-foot {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vph-grey-2);
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Send (redesign 2026-09-24): 15/700, the frame's paper-plane, and the
   prescription-blue act shadow. */
.vm-sp-send {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .24);
}
.vm-sp-send i { font-size: 13px; flex-shrink: 0; }
/* A long counter name wraps inside the 52px pill; it is never cut. */
.vm-sp-send span { min-width: 0; line-height: 1.2; }
.vm-sp-send[aria-disabled="true"] { opacity: .55; }
/* The frame's inherited 1.5 line box (the commit bar sits outside
   `.vm-sp-body`, so it is declared here). */
.vm-sp-footsub { text-align: center; font-size: 11.5px; color: var(--vph-ink-4); line-height: 1.5; }

/* ================= 7c — SENT (and the read view) ================= */

/* The top card is the headline block (`.vm-sp-hl`, above): "✓ Sent",
   then "With <counter>" at 22px. No blue top edge, no tick circle. */
.vm-sp-with {
    font-family: var(--vph-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.15;
    color: var(--vph-ink);
    overflow-wrap: anywhere;
}

/* The pharmacy is named BEFORE it replies (the naming rule, §7.15: its
   own name, never a pharmacist's), and there is no initials circle. The
   sentence is the block's WHITE INNER ROW, led by the mortar-pestle. */
.vm-sp-sign {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.vm-sp-sign > i {
    font-size: 11px;
    color: var(--vph-primary-dark);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-sp-signmain { flex: 1; min-width: 0; }
.vm-sp-signwho { font-size: 11.5px; font-weight: 700; color: var(--vph-ink-2); line-height: 1.4; }
.vm-sp-signwords {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}

/* The three steps ahead: 18px numbered dots in a 20px gutter, 2px
   connectors — 06's timeline material with no clock at all, because
   none of these has happened yet. */
.vm-sp-steps { margin-top: 13px; display: flex; flex-direction: column; }
.vm-sp-step { display: flex; gap: 11px; }
.vm-sp-steprail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 20px;
}
.vm-sp-stepdot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 700;
}
.vm-sp-stepdot--now { background: var(--vph-rx-solid); color: #fff; }
.vm-sp-steplink { flex: 1; width: 2px; background: var(--vph-grey); min-height: 20px; }
.vm-sp-stepmain { flex: 1; min-width: 0; padding-bottom: 13px; }
.vm-sp-step:last-child .vm-sp-stepmain { padding-bottom: 0; }
.vm-sp-steptitle { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); }
/* The frame's own line box (the inherited 1.5), not a tighter 1.35:
   the three steps sit on the frame's 51px rhythm. */
.vm-sp-stepsub {
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    line-height: 1.5;
}
/* ONLY when the counter is closed and published an opening time. */
.vm-sp-closing {
    font-size: 11.5px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--vph-hairline);
}

/* Past `read`, the steps are no longer ahead: ONE bordered line says
   where it is, and the reference is the way to the price. */
.vm-sp-state {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 13px 14px;
}
.vm-sp-statetitle { font-size: 12.5px; font-weight: 700; color: var(--vph-ink); }
/* The reference link is a real 44px target (house rule), not a 24px
   line of text. */
.vm-sp-statelink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    font-weight: 700;
    color: var(--vph-rx-solid);
}

/* The doors (redesign 2026-09-24): ONE lifted card of 60px rows, split
   by #f0f2f4 hairlines — a teal tile, the title, the grey sub, a teal
   chevron. The same `line-height: normal` note as 06's call card: the
   frame draws them as buttons and ours are mostly anchors that would
   inherit the 1.5 above. */
.vm-sp-doors {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
    display: flex;
    flex-direction: column;
}
.vm-sp-door {
    width: 100%;
    min-height: 60px;
    background: transparent;
    line-height: normal;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}
.vm-sp-door + .vm-sp-door { border-top: 1px solid var(--vph-hairline); }
.vm-sp-door:hover { color: inherit; }
.vm-sp-doortile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sp-doortile i { font-size: 13px; }
.vm-sp-doormain { flex: 1; min-width: 0; }
.vm-sp-doortitle { display: block; font-size: 13.5px; font-weight: 700; color: var(--vph-ink); }
.vm-sp-doorsub {
    display: block;
    font-size: 11.5px;
    color: var(--vph-ink-4);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.vm-sp-door > i { color: var(--vph-primary-dark); font-size: 13px; flex-shrink: 0; }

/* The closing sentence as the house INSET ROW, led by the shield. */
.vm-sp-closer {
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-sp-closer i {
    font-size: 11px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-sp-closer p {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    text-wrap: pretty;
}

/* ================= THE PAGE VIEWER ================= */
/* Full-screen and dark, one page at a time, with the stored `rotation`
   applied as a transform so the pharmacist's correction survives on the
   customer's side too. NO DOWNLOAD AND NO SHARE CONTROL — there is no
   rule here for one, which is how it stays that way (§4.9) — and the
   signed URL is minted on every open and never stored. */
.vm-sp-viewer {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #0b1220;
    display: flex;
    flex-direction: column;
}
.vm-sp-vhead {
    flex-shrink: 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-sp-vclose {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sp-vclose i { font-size: 16px; }
.vm-sp-vcount {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding-right: 44px;
    font-size: 12.5px;
    font-weight: 600;
    color: #e2e8f0;
}
.vm-sp-vstage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    overflow: hidden;
}
/* No intrinsic width/height on this one `<img>`: a photograph of an
   unknown sheet has none to state, and the stage reserves its own box,
   so there is nothing for it to shift. */
.vm-sp-vimg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background: #f7f6f2;
}
.vm-sp-vimg--r90 { transform: rotate(90deg); }
.vm-sp-vimg--r180 { transform: rotate(180deg); }
.vm-sp-vimg--r270 { transform: rotate(270deg); }
/* A quarter turn swaps which viewport axis bounds the photograph. */
.vm-sp-vimg--r90,
.vm-sp-vimg--r270 { max-width: 70vh; max-height: 92vw; }
.vm-sp-vload { font-size: 12.5px; color: #e2e8f0; }
.vm-sp-vnav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}
.vm-sp-vstep {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-sp-vstep i { font-size: 16px; }
/* Retake and Remove, the two things a tile deliberately does not
   carry. Absent once the prescription has been sent. */
.vm-sp-vacts {
    flex-shrink: 0;
    display: flex;
    gap: 9px;
    padding: 12px 14px 20px;
}
.vm-sp-vacts:empty { display: none; }
.vm-sp-vact {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-sp-vact i { font-size: 13px; }

/* ----------------------------------------------------------------
   19. SCREEN 09 — THE PHARMACY'S QUEUE (Alice's side)
   09a queue · 09b pricing · 09c reading · 09d keypad · 09e handover
   confirm · 09f handed over today.
   Handoff: docs/design/pharmacy/screens/09/drop/{README.md,frame.html}
   — the owner's drop, its frame regenerated 2026-09-24 and reconciled
   here in the same pass ("09 redesign (2026-09-24)" notes below).
   Contract: PHARMACY_HUB.md §6 rows 09a–09f, §5.5, §7.11.

   THE THREE RULES THIS WHOLE SECTION IS BUILT ON, from the handoff:
     - SHADOW MEANS ACTIONABLE. A lifted card is work she can do; a
       bordered row on no ground is a fact she cannot touch (the order
       out with the rider, the quote awaiting a reply, a handover past
       its correction window).
     - MONEY IS SIZED BY HOW REAL IT IS. 13px quoted · 15px already
       taken · 19px packing · 22px send bar · 30px about to be taken
       across the counter. Never a bare total.
     - FIELDS ARE WHITE WITH A 1.5px #cbd5e1 EDGE. Anything the app
       asserts is a tinted block or a bordered row.

   Two grounds are new to this file and are the handoff's own:
   #12775f→#0c5b4c (the 09a band) and #e8e4dc (paper). #0b1220 is
   §18's camera ground, reused because it is the same photograph.
   Elapsed time is TYPOGRAPHY, never a badge — red is emergency only
   (§7.4) and nothing in this section uses it.
   ---------------------------------------------------------------- */

/* The same line-box trap §12, §14, §16, §17 and §18 document:
   `frame.html` declares body{line-height:1.5} and every measured block
   inherits it, while the shared base in §2 declares none. Declared
   here, on this screen's own shells, never on the shared body. */
.vm-q-state-sub,
.vm-q-wait-say,
.vm-q-foot-say,
.vm-q-refused,
.vm-q-lapse,
.vm-q-conseq,
.vm-q-method-say,
.vm-q-window,
.vm-q-footnote,
.vm-q-none-body { line-height: 1.5; }

/* -- The owner shell ------------------------------------------- */
/* Her phone, not a customer's: the app frame is the same 390/480px
   column, and one glance at the dark band plus a three-slot bar says
   which side of the counter she is on. */
.vm-q-app { padding-bottom: 0; }
/* 09 redesign (2026-09-24): the frame's `body{line-height:1.5}` is
   declared on the counter's OWN three roots — the app, its sheets and
   09c's reader — so every one-line fact (a qty line, a meta line, a
   group title) is the height the frame measured, and only the values
   the frame sets explicitly (1.15 names, 1.05 money, …) differ. The
   shared body is still never touched. */
.vm-q-app,
.vm-q-app ~ .vm-sheet,
.vm-q-read { line-height: 1.5; }

/* -- 09a: the teal band, a MATERIAL and not a colour swatch ------
   One light source top-left in the accent green, a hairline of light
   along the top edge and a dark one along the bottom, and a slow fall
   from #12775f to #0c5b4c. The cards below then read as sitting UNDER
   a solid thing. */
.vm-q-band {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background:
        radial-gradient(118% 88% at 10% 0%, rgba(143, 240, 139, .15) 0%, rgba(15, 109, 92, 0) 56%),
        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-q-band-top { display: flex; align-items: center; gap: 11px; }
/* The mark is the green cross, not her initials — the same sign as
   screen 08's no-photo fallback, so the two pharmacy-owned surfaces
   share one symbol. Her name came OFF the top: she knows who she is. */
.vm-q-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vph-accent);
    font-size: 16px;
}
.vm-q-band-id { flex: 1; min-width: 0; }
.vm-q-shop {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-q-hours { font-size: 11.5px; color: #cbd5e1; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Screen 43 retired the OPEN pill that kept this row's corner: a close is
   set on 29 and ended by 43c's "Open again now" (§29f, .vm-q-reopen). */

/* One sentence of state, in HER OWN NUMBERS. A sentence rather than a
   gauge because writing is what a person reads at a glance. */
.vm-q-state {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: -.45px;
    color: #fff;
    text-wrap: pretty;
}
.vm-q-state-sub { font-size: 12.5px; color: #cbd5e1; margin-top: 5px; }

/* Three chips are the table of contents, each 44px and each jumping to
   its group. Identical styling on all three: the sentence above
   carries the urgency, so the chips do not need colour. */
.vm-q-chips { display: flex; gap: 8px; }
.vm-q-chip {
    flex: 1;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    padding: 0 6px;
    color: #fff;
}
.vm-q-chip b {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.vm-q-chip span { font-size: 10.5px; line-height: 1.2; color: #e2e8f0; white-space: nowrap; }

/* -- 09a body + groups ----------------------------------------- */
.vm-q-body {
    flex: 1;
    padding: 18px 14px 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.vm-q-groups { display: flex; flex-direction: column; gap: 20px; }
.vm-q-group { display: flex; flex-direction: column; gap: 11px; scroll-margin-top: 14px; }
.vm-q-ghead { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.vm-q-gdot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; }
.vm-q-gdot--price { background: var(--vph-rx-solid); }
.vm-q-gdot--pack { background: var(--vph-primary); }
.vm-q-gdot--ready { background: var(--vph-primary-dark); }
.vm-q-gdot--wait { background: var(--vph-sep); }
.vm-q-ghead h2 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.2px;
    color: var(--vph-ink);
}
/* The group with nothing to do is quieter all the way up to its title
   (09a "Waiting on the customer", 09f "Earlier today"). */
.vm-q-group--wait .vm-q-ghead h2 { color: var(--vph-ink-2); }
/* The trailing count came OFF the group heading — the header chips
   already say 2, and two cards you can see do not need counting. The
   ONE thing that does need saying is a truncated group. */
.vm-q-gmore { font-size: 12px; color: var(--vph-ink-4); }

/* -- 09a: the prescription card (blue, top) --------------------- */
.vm-q-rx {
    background: #eef6fc;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 1px 2px rgba(16, 24, 40, .04),
        0 10px 28px rgba(16, 24, 40, .08);
}
.vm-q-rx-top { display: flex; align-items: flex-start; gap: 12px; }
.vm-q-rx-id { flex: 1; min-width: 0; }
.vm-q-name {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-q-phone { font-size: 11.5px; color: var(--vph-ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.vm-q-clock { text-align: right; flex: 0 0 auto; }
/* The clock is TYPOGRAPHY, not a badge: late is said in words and
   weight. #0f172a when she is past her own average, #334155 when she
   is inside it, and "past your 25" only in the first case — on time
   needs no comment. */
.vm-q-elapsed {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--vph-ink-2);
    font-variant-numeric: tabular-nums;
}
.vm-q-elapsed.is-late { color: var(--vph-ink); }
.vm-q-past { font-size: 11.5px; color: var(--vph-ink-2); margin-top: 3px; }
/* The pages look like PAPER: a ruled cream thumbnail tells her how
   many pages and whether the shot is worth opening, which a document
   icon does not. Page count is carried by the strip itself. */
/* 09 redesign (2026-09-24): the paper and "For his son, 4 years" share
   ONE row, 12px apart — the two facts that decide whether to read now. */
.vm-q-rx-media { display: flex; align-items: center; gap: 12px; }
.vm-q-rx-media .vm-q-for { flex: 1; min-width: 0; }
.vm-q-pages { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.vm-q-page {
    width: 52px;
    height: 66px;
    flex: 0 0 52px;
    border-radius: 8px;
    background: #e8e4dc;
    background-image: repeating-linear-gradient(180deg,
        rgba(120, 110, 95, 0) 0 9px, rgba(120, 110, 95, .26) 9px 10px);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}
.vm-q-page-more { font-size: 12px; font-weight: 700; color: var(--vph-ink-3); }
/* A paediatric dose is a different box, so this is the most
   consequential fact on the card and it gets its own line in ink. It
   appears ONLY when the prescription is not for the sender. */
.vm-q-for { display: flex; align-items: center; gap: 8px; }
.vm-q-for i { font-size: 12px; color: var(--vph-rx-solid); flex: 0 0 auto; }
.vm-q-for span { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--vph-ink); }
/* The note reads as SPEECH: ink on white inside the tinted card, quote
   marks doing the attribution. Blue text made a customer's own words
   look like interface. */
.vm-q-note {
    background: #fff;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--vph-ink);
}
.vm-q-acts { display: flex; gap: 9px; }
/* 48px on the pair, because this is the primary work of the whole app. */
.vm-q-primary {
    flex: 1;
    height: 48px;
    border-radius: 13px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-q-icon-btn {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-q-icon-btn--wa { color: var(--vph-primary-dark); font-size: 16px; }

/* -- 09a: the packing card — it is a PICKING LIST -------------- */
/* She reads this with one hand while the other is on a shelf, so rows
   go to 56px and names to 14.5px: everything a step larger than a card
   you only read. */
.vm-q-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
    overflow: hidden;
}
.vm-q-card-head { padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 9px; }
.vm-q-head-row { display: flex; align-items: flex-start; gap: 10px; }
.vm-q-ref {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-q-meta { font-size: 12px; color: var(--vph-ink-4); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* The chip carries the frame's glyph: the rider's motorcycle, or the bag
   handed across the counter. */
.vm-q-mode {
    height: 28px;
    flex: 0 0 auto;
    padding: 0 11px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
}
.vm-q-mode i { font-size: 10px; }
.vm-q-mode--pickup { background: var(--vph-grey-2); color: var(--vph-ink-2); }
/* The meta run-on is split and the phone number is gone: she is
   packing, not calling. The address gets its own line with a pin,
   because that is what she writes on the bag. */
.vm-q-metarow { display: flex; align-items: flex-start; gap: 8px; }
.vm-q-metarow i { font-size: 11px; color: var(--vph-ink-4); margin-top: 3px; flex: 0 0 auto; }
.vm-q-metarow span { font-size: 12.5px; line-height: 1.4; color: var(--vph-ink-3); }
/* Screen 06's container model seen from behind the counter: it stops
   her handing over the bag while forgetting the second half. */
.vm-q-linked i,
.vm-q-linked span { color: var(--vph-rx-solid); }
.vm-q-picks { border-top: 1px solid var(--vph-hairline); }
.vm-q-pick {
    min-height: 56px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--vph-hairline);
}
.vm-q-pick:last-child { border-bottom: 0; }
.vm-q-pick-name { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; color: var(--vph-ink); }
.vm-q-pick-unit { font-size: 12.5px; color: var(--vph-ink-4); }
/* Quantity is a chip when it is more than one and ABSENT when it is
   one: two boxes instead of one is the commonest picking error, and
   "× 1" printed on every line is the noise that hides it. */
.vm-q-qty {
    height: 26px;
    min-width: 34px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
/* 09 redesign (2026-09-24): the packing foot is ONE block under a
   hairline — the figure, 11px, the commit, 11px, the quiet row, 8px —
   exactly the frame's column, rather than a money row and a foot. */
.vm-q-pack-foot {
    border-top: 1px solid var(--vph-hairline);
    padding: 13px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.vm-q-money-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
/* 19px: the bag being packed. Not "to collect" on a delivery — she
   never touches that money, the rider does, at the door. */
.vm-q-money-19 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.4px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-q-money-cap { font-size: 12.5px; color: var(--vph-ink-3); }
/* Two equal buttons became one button and one quiet row: packing
   succeeds most of the time, and an outlined block of the same weight
   made the exception look as likely as the rule. */
.vm-q-go {
    width: 100%;
    height: 48px;
    border-radius: 13px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-q-go[disabled] { opacity: .55; box-shadow: none; }
.vm-q-quiet {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-q-quiet i { font-size: 12px; }
/* The rider's name, asked inline rather than in a sheet: it is one
   word typed while the bag is already in his hand. */
.vm-q-rider { display: flex; gap: 9px; }
.vm-q-rider input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: 11px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 12px;
    font-size: 14.5px;
    color: var(--vph-ink);
}
.vm-q-rider button {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 15px;
    border-radius: 11px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(22, 160, 133, .24);
}
/* "Something is missing" opens the "What is missing?" sheet, which is
   the ONLY stock edit in the hub: stock is edited from the line she is
   packing, never from an inventory screen. These two doors remain for
   a payload whose items carry no shelf row at all, where the telephone
   is the one honest answer available. See §7.11. */
/* 09 redesign (2026-09-24): a secondary pair of doors is a #f1f5f9 fill
   with no edge — the material the owner drew for the rider row's pair
   and 09f's two fixes — so the telephone pair takes it too. */
.vm-q-missing { display: flex; gap: 9px; padding-top: 2px; }
.vm-q-missing-door {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-q-missing-door i { font-size: 13px; color: var(--vph-primary-dark); }

/* -- 09a: the ready card — read with a customer in front of her -- */
.vm-q-ready-head { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.vm-q-ready-name {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.15;
    letter-spacing: -.35px;
    color: var(--vph-ink);
}
/* "Bag marked VM-4788" is the only honest locator: nobody types which
   shelf it is on and the app cannot know. */
.vm-q-bag { font-size: 12px; color: var(--vph-ink-4); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* The hold is a metarow with the frame's clock glyph. */
.vm-q-held span { font-variant-numeric: tabular-nums; }
/* The money moves onto its own teal ground at 30px: she is about to
   say this number out loud and then take it. The pale teal reuses the
   "done" signal from the packed row, so the colour means one thing
   across the screen. */
.vm-q-collect {
    background: var(--vph-tint);
    padding: 13px 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}
.vm-q-collect-label { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--vph-primary-dark); }
.vm-q-money-30 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -.9px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}
/* The commit and the call sit 13px under the tinted block, never on it. */
.vm-q-ready-acts { padding: 13px 14px; }
.vm-q-ready-acts .vm-q-go { flex: 1; width: auto; min-width: 0; }
/* The payment method was missing entirely and it IS the instruction:
   Mobile Money means she waits for the transfer, cash means she opens
   the till. */
.vm-q-method {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    padding-bottom: 3px;
}
.vm-q-method i { font-size: 12px; }

/* -- 09a: the rows she cannot act on (border, no shadow) -------- */
.vm-q-row {
    border: 1px solid var(--vph-grey);
    border-radius: 16px;
    padding: 13px 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.vm-q-row-top { display: flex; align-items: center; gap: 11px; }
.vm-q-tile {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.vm-q-row-id { flex: 1; min-width: 0; }
.vm-q-row-title { font-size: 14px; font-weight: 700; color: var(--vph-ink-2); }
.vm-q-row-sub { font-size: 12px; color: var(--vph-ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* Someone has to close the order the rider took, and the design leaves
   "does Jean have a screen" open — so Alice closes it. Two small
   doors, not a card: the row is still a fact, not her work.
   09 redesign (2026-09-24): the owner drew this exactly — a two-part
   bordered row, 12px 14px, the facts over two 44px #f1f5f9 doors with
   no edge and no shadow. */
.vm-q-row--rider { padding: 12px 14px; gap: 10px; }
.vm-q-row-acts { display: flex; gap: 8px; }
.vm-q-row-door {
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-q-row-door i { font-size: 11px; color: var(--vph-primary-dark); }
.vm-q-row-door .fa-whatsapp { font-size: 14px; }
/* The group with nothing to do has no controls at all. No nudge, no
   chase: a quote is an offer on a medical prescription. */
.vm-q-row--wait { gap: 7px; }
.vm-q-wait-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vm-q-wait-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--vph-ink-2);
}
/* 13px — nothing is owed here. Set in the body face, as the frame sets
   every figure that is not about to change hands. */
.vm-q-money-13 {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 13px;
    color: var(--vph-ink-3);
    font-variant-numeric: tabular-nums;
}
.vm-q-wait-meta { font-size: 12.5px; color: var(--vph-ink-4); font-variant-numeric: tabular-nums; }
.vm-q-wait-say { font-size: 12.5px; color: var(--vph-ink-3); }

/* -- 09a: the foot ---------------------------------------------- */
.vm-q-foot { display: flex; flex-direction: column; gap: 11px; padding-top: 2px; }
.vm-q-foot-say { font-size: 12.5px; color: var(--vph-ink-4); text-align: center; }
/* "N handed over today" is a tally of a day's work, worth seeing when
   you reach the END of the queue and worth nothing at the top. */
.vm-q-foot-door {
    height: 44px;
    border: 1px solid var(--vph-grey);
    border-radius: 16px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-q-foot-door i:first-child { font-size: 12px; color: var(--vph-primary-dark); }
.vm-q-foot-door span { flex: 1; text-align: left; font-variant-numeric: tabular-nums; }
.vm-q-foot-door i:last-child { font-size: 13px; color: var(--vph-ink-4); }

/* -- 09a: the three-slot bar ------------------------------------
   The bar stays WHITE while the header is dark teal: two dark bands
   would close a 390px screen in on itself. No centre button — Alice
   never sends a prescription, and a FAB here would invent work for
   itself. The active cell is marked by a 2px inset LINE rather than
   only a colour, which reads at a counter in daylight. */
.vm-q-nav {
    /* Fixed to the column's foot over the inset: Slice N's one owner-bar
       build (30b, N6), shared with the exams hub's structure bars. */
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.vm-q-nav a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--vph-ink-4);
    font-size: 10.5px;
    font-weight: 400;
}
/* The badge is placed on the glyph, not on the cell. */
.vm-q-nav-ico { position: relative; display: flex; align-items: center; justify-content: center; }
.vm-q-nav a i { font-size: 17px; }
.vm-q-nav a.is-active {
    color: var(--vph-primary-dark);
    font-weight: 700;
    box-shadow: inset 0 2px 0 var(--vph-primary-dark);
}
/* Prescriptions only, and blue because blue has meant prescription on
   every screen since the hub. Badging all five waiting items would
   make two bags on a shelf shout as loudly as a customer waiting. */
.vm-q-badge {
    position: absolute;
    top: -7px;
    right: -12px;
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
/* The bar is fixed, so the list needs its own clearance: .vm-q-clear,
   in Slice N's shared chrome (30b). */

/* -- The honest state for an account with no counter ------------ */
.vm-q-none {
    flex: 1;
    padding: 40px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
.vm-q-none i { font-size: 30px; color: var(--vph-sep); }
.vm-q-none h1 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--vph-ink);
}
.vm-q-none-body { font-size: 13.5px; color: var(--vph-ink-3); max-width: 300px; }
.vm-q-none-doors { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 6px; }
.vm-q-none-doors a {
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 700;
}
.vm-q-none-doors a:first-child { background: var(--vph-primary-solid); color: #fff; }
.vm-q-none-doors a + a { border: 1px solid var(--vph-sep); color: var(--vph-ink); }

/* -- 09b: the pricing screen ------------------------------------ */
/* Flat #0f6d5c here, not 09a's gradient: this is a pushed screen and
   the band's material belongs to the counter, not to one prescription. */
.vm-q-head {
    background: var(--vph-primary-dark);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.vm-q-head-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-q-head-btn .fa-phone { font-size: 14px; }
/* 09b/09f's way back is the hub's one back control, white on the band,
   named "Queue" (Slice N, N11/N12); the call stays a glass square. */
.vm-q-back { flex-shrink: 0; }
.vm-q-head-id { flex: 1; min-width: 0; }
.vm-q-head-name {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -.2px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vm-q-head-sub { font-size: 11.5px; color: #cbd5e1; margin-top: 1px; font-variant-numeric: tabular-nums; }

/* The paper is lit as an OBJECT on a dark surface — the same material
   as 07a, because the image is the subject on both sides of the
   counter. */
.vm-q-photo {
    padding: 14px;
    background:
        radial-gradient(122% 78% at 50% 14%, rgba(255, 255, 255, .06) 0%, rgba(11, 18, 32, 0) 62%),
        #0b1220;
}
.vm-q-sheet-wrap { position: relative; }
.vm-q-sheet-img {
    height: 236px;
    border-radius: 12px;
    background: #e8e4dc;
    background-image: repeating-linear-gradient(180deg,
        rgba(120, 110, 95, 0) 0 15px, rgba(120, 110, 95, .22) 15px 16px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-q-sheet-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-q-sheet-img p { font-size: 12px; color: var(--vph-ink-4); padding: 0 16px; text-align: center; }
/* A page that will not open keeps its ruled ground and says so in ONE
   line — never a broken-image glyph with the alt text across the sheet,
   which reads as a fault in the app rather than a missing photograph.
   `.is-dark` is the same sentence on 09c's dark stage. See §7.11. */
p.vm-q-page-fail {
    font-size: 13px;
    line-height: 1.5;
    color: var(--vph-ink-4);
    padding: 0 22px;
    text-align: center;
    max-width: 300px;
}
p.vm-q-page-fail.is-dark { color: #cbd5e1; }
/* "Read full screen" is a LABELLED control, not a magnifier glyph:
   reading the handwriting is the highest-stakes act in the product and
   the route to it cannot be a 15px glyph in a corner. */
.vm-q-expand {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 44px;
    padding: 0 15px;
    border-radius: 13px;
    background: rgba(9, 15, 27, .82);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vm-q-expand i { font-size: 13px; }
.vm-q-thumbs { display: flex; gap: 9px; margin-top: 12px; }
.vm-q-thumb {
    width: 46px;
    height: 58px;
    flex: 0 0 46px;
    border-radius: 9px;
    background: #cfcabf;
    background-image: repeating-linear-gradient(180deg,
        rgba(120, 110, 95, 0) 0 8px, rgba(120, 110, 95, .2) 8px 9px);
    overflow: hidden;
}
/* The active page is outlined in the accent this system uses on dark
   grounds, not the teal that reads as a button everywhere else. */
.vm-q-thumb.is-active {
    background-color: #e8e4dc;
    background-image: repeating-linear-gradient(180deg,
        rgba(120, 110, 95, 0) 0 8px, rgba(120, 110, 95, .24) 8px 9px);
    border: 2px solid var(--vph-accent);
}
/* 09c's strip: a page shot sideways shows its ruling running the other
   way, so Rotate explains itself before she taps it. */
.vm-q-thumb.is-sideways {
    background-image: repeating-linear-gradient(90deg,
        rgba(120, 110, 95, 0) 0 8px, rgba(120, 110, 95, .2) 8px 9px);
}
.vm-q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 09 redesign (2026-09-24): the customer's note sits 14px under the
   paper and "What can you fill?" 16px under the note; 20px foot. */
.vm-q-rx-body {
    flex: 1;
    padding: 14px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* The blocks are written into [data-cards], so the 14px rhythm is that
   container's, not the body's (the body's gap only ever separated the
   loading line from the cards). */
.vm-q-cards { display: flex; flex-direction: column; gap: 14px; }
.vm-q-rx-body .vm-q-h2 { margin-top: 2px; }
.vm-q-say {
    background: #eef6fc;
    border-radius: 18px;
    padding: 13px 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--vph-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 1px 2px rgba(16, 24, 40, .04),
        0 10px 28px rgba(16, 24, 40, .08);
}
.vm-q-h2 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.3px;
    padding: 0 2px;
    color: var(--vph-ink);
}

/* -- 09b: the price lines --------------------------------------- */
.vm-q-lines {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
    overflow: hidden;
}
/* Hairlines run ABOVE each line after the first and above "Add a
   medicine", so a refused line and its sentence are never split. */
.vm-q-line {
    min-height: 64px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-q-line + .vm-q-line { border-top: 1px solid var(--vph-hairline); }
.vm-q-line-id { flex: 1; min-width: 0; }
.vm-q-line-name { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--vph-ink); }
.vm-q-line-qty { font-size: 12px; color: var(--vph-ink-4); margin-top: 3px; }
/* The lines had no ORIGIN, which was a lie in the design: one line
   came attached from the basket and the rest Alice typed. */
.vm-q-line-from { font-size: 11.5px; color: var(--vph-rx-solid); margin-top: 3px; }
/* The field looks like a field: white ground, a 1.5px border, the
   numeral in the display face with FCFA set small beside it. ONE
   control per line, and it holds BOTH outcomes. */
.vm-q-price {
    flex: 0 0 auto;
    height: 44px;
    min-width: 98px;
    border-radius: 11px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding: 0 12px;
}
.vm-q-price b {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-q-price span { font-size: 11px; color: var(--vph-ink-4); }
/* An empty field shows "Price" on a teal ground and blocks Send: an
   unpriced line silently dropped from a quote is the one failure that
   costs her money. */
.vm-q-price.is-empty { background: var(--vph-tint); border-color: var(--vph-tint); }
.vm-q-price.is-empty b { font-size: 13.5px; color: var(--vph-primary-dark); }
/* The refused line keeps its recessed ground, its struck name and the
   sentence about what the customer will see — one block, the row over
   the sentence 9px apart (the frame's 12px 14px 13px column). */
.vm-q-line.is-out {
    background: var(--vph-canvas);
    padding: 12px 14px 13px;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
}
.vm-q-line-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.vm-q-line.is-out .vm-q-line-name { color: var(--vph-ink-3); text-decoration: line-through; }
.vm-q-out-btn {
    flex: 0 0 auto;
    height: 44px;
    min-width: 98px;
    padding: 0 12px;
    border-radius: 11px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    font-size: 12.5px;
    font-weight: 700;
}
.vm-q-refused { font-size: 12.5px; line-height: 1.5; color: var(--vph-ink-3); }
/* "Add a medicine" is the NORMAL way a line gets here, so it takes
   52px at the foot of the card. */
.vm-q-add {
    width: 100%;
    height: 52px;
    border-top: 1px solid var(--vph-hairline);
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.vm-q-add i { font-size: 12px; }
/* 09 redesign (2026-09-24): a 44px remove on every line she typed, its
   last 10px tucked into the card's gutter so the column reads 34px; the
   line that came from the basket keeps a 34px spacer in that column so
   the price fields stay in one vertical. */
.vm-q-line-drop {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: var(--vph-ink-4);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-q-line-gap { flex: 0 0 34px; width: 34px; }

/* -- 09b: the terms, one card, because they are one thing ------- */
.vm-q-terms {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
}
/* 09 redesign (2026-09-24): the note and the hold are one card in two
   halves, a #f0f2f4 hairline between them. */
.vm-q-terms--split { padding: 0; gap: 0; overflow: hidden; }
.vm-q-terms-sec { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.vm-q-terms-sec + .vm-q-terms-sec { border-top: 1px solid var(--vph-hairline); }
.vm-q-label { font-size: 13px; font-weight: 700; color: var(--vph-ink); }
/* A field, on the same rule as the price fields: anything she types
   into is white with a real edge. */
.vm-q-note-field {
    min-height: 78px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 11px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--vph-ink);
    resize: vertical;
    width: 100%;
    font-family: var(--vph-font-body);
    /* The frame's field grows with her words; where the engine can size
       a field to its content it does, elsewhere it stays 78px + resize. */
    field-sizing: content;
}
/* The signature is SHOWN, not explained: she is looking at what she is
   sending, the way it will print under her words on 6b — the counter's
   name, never hers (§7.15; the owner's Sept 24 frame). */
.vm-q-sign { text-align: right; font-size: 12.5px; font-weight: 700; color: var(--vph-ink-3); }
/* A real segmented track: two loose pills read as two buttons that do
   different things, inside one track they read as a choice with two
   answers, already answered. */
.vm-q-seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--vph-grey-2);
    border-radius: 13px;
}
.vm-q-seg button {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    background: transparent;
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.vm-q-seg button.is-on { background: var(--vph-primary-dark); color: #fff; }
.vm-q-seg button i { font-size: 12px; }
/* The consequence is stated WHERE the choice is made: she is setting a
   deadline on someone else's medicine. */
.vm-q-lapse { font-size: 12.5px; color: var(--vph-ink-3); }

/* -- 09b: the send bar ------------------------------------------ */
/* 22px, under the 30px reserved for money about to be taken across a
   counter. A quote is not owed yet. */
.vm-q-send {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 20;
}
.vm-q-send-id { flex: 0 0 auto; min-width: 0; }
.vm-q-send-label { font-size: 11.5px; color: var(--vph-ink-4); }
.vm-q-money-22 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.5px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.vm-q-send-cap { font-size: 11.5px; color: var(--vph-ink-3); margin-top: 3px; }
.vm-q-send-btn {
    flex: 1;
    height: 52px;
    border-radius: 14px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .28);
}
.vm-q-send-btn[disabled] { background: var(--vph-grey-2); color: var(--vph-ink-4); box-shadow: none; }

/* -- 09b: after Send, and the read-only state ------------------- */
.vm-q-sent {
    background: #fff;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
}
.vm-q-sent-title {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-q-door {
    height: 48px;
    border-radius: 13px;
    border: 1px solid var(--vph-sep);
    background: #fff;
    color: var(--vph-ink);
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.vm-q-door--wa { background: var(--vph-primary-dark); border-color: var(--vph-primary-dark); color: #fff; }
.vm-q-door i { font-size: 15px; }
.vm-q-readonly-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--vph-hairline);
}
.vm-q-readonly-line:last-child { border-bottom: 0; }
.vm-q-readonly-line.is-out .vm-q-line-name { color: var(--vph-ink-3); text-decoration: line-through; }

/* -- 09c: the paper, full screen -------------------------------- */
/* A STEP INSIDE PRICING, not a gallery: no close, no share, no
   download, and the way out is a labelled bar that names where she
   lands and what survived. */
.vm-q-read {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: #0b1220;
    display: flex;
    flex-direction: column;
    /* The phone's own column on a wide window, like the app and its
       sheets: a prescription at fit-to-width across 1280px is not a
       reading, it is a poster. */
    max-width: 480px;
    margin: 0 auto;
}
.vm-q-read[hidden] { display: none; }
.vm-q-read-head { padding: 14px; display: flex; align-items: center; gap: 10px; }
.vm-q-read-id { flex: 1; min-width: 0; }
.vm-q-read-title {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.vm-q-read-sub { font-size: 11.5px; color: #cbd5e1; margin-top: 3px; font-variant-numeric: tabular-nums; }
.vm-q-read-ctl {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}
/* Rotate is here because a page gets photographed sideways, and a
   landscape page at fit-to-width is the one failure that stops a price
   being typed at all. */
.vm-q-rotate {
    height: 44px;
    padding: 0 14px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-q-rotate i { font-size: 13px; }
/* Zoom says its FACTOR rather than showing a magnifier, so she knows
   which state she is in with boxes in her other hand. Pinch still
   works; it is just not the only way. */
.vm-q-zoom {
    width: 54px;
    height: 44px;
    border-left: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 15px;
}
.vm-q-zoom.is-on { background: rgba(255, 255, 255, .16); }
/* 09 redesign (2026-09-24): the paper is FULL-BLEED — it fills the
   stage between the header and the strip, and the photograph sits in it
   at fit-to-width. 2x doubles the paper's width and lets the stage
   scroll from its left edge (a centred overflow could never be reached). */
.vm-q-read-stage {
    flex: 1;
    min-height: 0;
    padding: 0 14px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: radial-gradient(120% 70% at 50% 34%, rgba(255, 255, 255, .07) 0%, rgba(11, 18, 32, 0) 64%);
}
.vm-q-read-stage > p { margin: auto; }
.vm-q-paper {
    flex: 1 1 auto;
    min-width: 0;
    align-self: flex-start;
    min-height: 100%;
    border-radius: 14px;
    background: #e8e4dc;
    background-image:
        radial-gradient(130% 68% at 50% -6%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 58%),
        repeating-linear-gradient(180deg, rgba(120, 110, 95, 0) 0 22px, rgba(120, 110, 95, .22) 22px 23px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vm-q-paper img { width: 100%; display: block; }
.vm-q-paper.is-2x { flex: 0 0 200%; }
/* Rotation is applied CLIENT-SIDE only: `pharmacy_prescription_pages`
   has the column but §5 exposes no endpoint that writes it, so a turn
   lasts as long as the reading does. See §7.11. */
.vm-q-paper img.is-r90 { transform: rotate(90deg); }
.vm-q-paper img.is-r180 { transform: rotate(180deg); }
.vm-q-paper img.is-r270 { transform: rotate(270deg); }
.vm-q-paper-say { font-size: 12.5px; color: var(--vph-ink-4); padding: 24px; text-align: center; }
.vm-q-read-strip { padding: 14px 14px 0; display: flex; gap: 10px; align-items: flex-start; }
/* `margin: 0` — a <figure> brings the UA's 40px side margins, which
   spread the strip across the screen. */
.vm-q-read-thumb { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vm-q-read-thumb figcaption {
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-family: var(--vph-font-display);
    color: #cbd5e1;
}
.vm-q-read-thumb.is-active figcaption { color: #fff; }
.vm-q-read-exit {
    margin-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.vm-q-read-typed { flex: 0 0 auto; }
.vm-q-read-typed p { font-size: 11.5px; color: #cbd5e1; }
.vm-q-read-typed b {
    display: block;
    margin-top: 2px;
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.2px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.vm-q-read-back {
    flex: 1;
    height: 52px;
    border-radius: 14px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .34);
}

/* -- 09d: the keypad sheet -------------------------------------- */
/* §8's sheet chrome carries the shell; the keypad's own parts are here.
   09 redesign (2026-09-24): the counter's sheets take the handoff's own
   chrome, scoped to the three owner pages (the sheet is a sibling after
   `.vm-q-app`) so no customer sheet moves — a FLAT #0f172a dim at .55
   (never blurred), the 0 -12px 34px shell shadow, and the 38x4 handle
   9px under the top edge with 2px under it. */
.vm-q-app ~ .vm-sheet-backdrop { background: rgba(15, 23, 42, .55); }
.vm-q-app ~ .vm-sheet { box-shadow: 0 -12px 34px rgba(15, 23, 42, .24); }
.vm-q-app ~ .vm-sheet .vm-sheet-grab { margin: 9px auto 2px; }
.vm-q-kp-head {
    padding: 8px 14px 13px;
    border-bottom: 1px solid var(--vph-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-q-kp-id { flex: 1; min-width: 0; }
.vm-q-kp-name {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
/* The bug this screen turned up: a field labelled only with a medicine
   name is ambiguous between the unit price and the line total, and the
   two differ by a factor of eight on one of these lines. */
.vm-q-kp-qty { font-size: 12px; color: var(--vph-ink-4); margin-top: 3px; font-variant-numeric: tabular-nums; }
.vm-q-kp-cancel {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 6px;
    background: transparent;
    color: var(--vph-ink-3);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-q-kp-body { padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 11px; }
/* The add-a-medicine sheet has no keys under its body, so its foot
   takes the body's 14px rather than adding its own. */
.vm-q-kp-body + .vm-q-kp-foot { padding-top: 0; }
.vm-q-kp-field {
    height: 62px;
    border-radius: 15px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.vm-q-kp-value {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.5px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-q-kp-caret {
    width: 2px;
    height: 26px;
    background: var(--vph-rx-solid);
    border-radius: 1px;
}
.vm-q-kp-cur { font-size: 13px; font-weight: 700; color: var(--vph-ink-4); }
/* "Not in stock today" lives INSIDE the keypad, above the digits: the
   field she taps is where both answers are given. A bordered white
   row, not a red one — refusing a line is ordinary counter work. */
.vm-q-kp-out {
    height: 52px;
    border-radius: 15px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    color: var(--vph-ink-2);
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.vm-q-kp-out.is-on { background: var(--vph-grey-2); }
/* 56px keys, above the 44px floor, because this is the one screen used
   at speed with a box in the other hand. No decimal key: the franc has
   no subunit in practice, so a decimal key is dead space that only
   ever produces a mistyped price. */
.vm-q-kp-keys {
    padding: 0 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.vm-q-kp-key {
    height: 56px;
    border-radius: 16px;
    background: var(--vph-canvas);
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 21px;
    color: var(--vph-ink);
}
.vm-q-kp-key--alt { background: var(--vph-grey-2); font-size: 17px; color: var(--vph-ink-2); }
.vm-q-kp-key--alt i { font-size: 18px; }
/* The commit NAMES the figure: one zero too many is the error that
   matters here and it is invisible on a keypad. */
.vm-q-kp-foot { padding: 14px; }
.vm-q-kp-save {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .28);
    font-variant-numeric: tabular-nums;
}
.vm-q-kp-save[disabled] { background: var(--vph-grey-2); color: var(--vph-ink-4); box-shadow: none; }

/* -- "What is missing?" — the only stock edit in the hub -------- */
/* She is holding the box and the shelf is empty. That is the whole
   reason this sheet exists, and it is why there is no stock manager
   anywhere else: an inventory page is a second job, and this moment
   is free. The list is the ORDER's lines, so she never has to find
   the medicine again in a catalogue she is already standing in. */
.vm-q-ms-list { padding: 4px 0; }
.vm-q-ms-line {
    padding: 12px 14px 14px;
    border-bottom: 1px solid var(--vph-hairline);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-q-ms-line:last-child { border-bottom: 0; }
.vm-q-ms-top { display: flex; align-items: center; gap: 12px; }
/* The counter's own price, small and under the name: "different from
   what?" is the first question the second control asks. */
.vm-q-ms-price { font-size: 13px; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
/* Two equal doors. NEITHER is red: a shelf that has run out is
   ordinary counter work, not an alarm, and red here would make the
   commonest fact on the busiest screen look like a fault. */
.vm-q-ms-doors { display: flex; gap: 9px; }
.vm-q-ms-door {
    flex: 1;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--vph-sep);
    background: #fff;
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
}
.vm-q-ms-door[disabled] { color: var(--vph-ink-4); }
/* What the line now says. The fact replaces nothing and removes no
   control: she may correct a price she has just corrected. */
.vm-q-ms-said {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    font-variant-numeric: tabular-nums;
}
.vm-q-ms-said i { font-size: 11px; }
/* A failed save is stated in weight, not in red: red is reserved for
   emergency across the whole hub, and "try again" is not one. */
.vm-q-ms-fail { font-size: 13px; font-weight: 700; color: var(--vph-ink-2); }
/* A line that is not on her shelf list carries no controls at all,
   because there is no row to address. Saying so is kinder than two
   buttons that would fail. */
.vm-q-ms-none { font-size: 13px; color: var(--vph-ink-4); }
/* The foot is a telephone and a sentence: what goes in the bag is a
   conversation. Since screen 35 it ends in one teal fill, "Let this
   order go", which hands the order to 35b's why sheet — the lines
   above still never touch the order. */
.vm-q-ms-foot {
    padding: 12px 14px 18px;
    border-top: 1px solid var(--vph-hairline);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-q-ms-say { font-size: 12.5px; line-height: 1.5; color: var(--vph-ink-3); }

/* -- The "add a medicine" sheet (same chrome) ------------------- */
.vm-q-af { display: flex; flex-direction: column; gap: 6px; }
.vm-q-af label { font-size: 12.5px; font-weight: 700; color: var(--vph-ink-2); }
.vm-q-af input {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 12px;
    font-size: 14.5px;
    color: var(--vph-ink);
    width: 100%;
}
.vm-q-af-row { display: flex; gap: 10px; }
.vm-q-af-row .vm-q-af:first-child { flex: 0 0 82px; }
.vm-q-af-row .vm-q-af:last-child { flex: 1; min-width: 0; }

/* -- 09e: the handover confirm ---------------------------------- */
/* The ONLY confirm in Alice's app. It exists to correct the method,
   not to ask "are you sure". */
.vm-q-hv-head {
    padding: 8px 14px 13px;
    border-bottom: 1px solid var(--vph-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-q-hv-body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
/* The method block: 16px under the amount, its label, track and
   sentence 10px apart. */
.vm-q-hv-method { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
/* 30px, UNCHANGED from the queue card: a confirm that restyles or
   recalculates the number invites a recount with a customer standing
   there. */
.vm-q-hv-amount {
    background: var(--vph-tint);
    border-radius: 18px;
    padding: 14px 16px 15px;
}
.vm-q-hv-label { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--vph-primary-dark); }
.vm-q-method-say { font-size: 12.5px; color: var(--vph-ink-3); }
/* Stated once, in a bordered row: the order closes and the customer is
   asked whether she got everything. */
.vm-q-conseq {
    border: 1px solid var(--vph-grey);
    border-radius: 14px;
    padding: 12px 13px;
    font-size: 12.5px;
    color: var(--vph-ink-3);
}
/* Teal because it completes her work. */
.vm-q-hv-commit {
    width: 100%;
    height: 52px;
    border-radius: 14px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
    font-variant-numeric: tabular-nums;
}
.vm-q-hv-commit[disabled] { opacity: .6; box-shadow: none; }

/* -- 09f: handed over today ------------------------------------- */
/* Shadow still means actionable: the order inside its window is a
   lifted card with a footed pair of fixes; everything past the window
   is a bordered row on no ground. The list's whole structure IS the
   correction rule, visible before it is read. */
.vm-q-ho-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .08);
    overflow: hidden;
}
.vm-q-ho-top { padding: 14px 14px 13px; display: flex; flex-direction: column; gap: 10px; }
.vm-q-ho-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vm-q-ho-name {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-q-ho-meta { font-size: 12px; color: var(--vph-ink-4); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* Money already taken is the SMALLEST money in the app: nothing is
   about to happen to it, so nothing about it is large. */
.vm-q-money-15 {
    font-family: var(--vph-font-display);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -.2px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.vm-q-ho-method { font-size: 11.5px; color: var(--vph-ink-3); margin-top: 3px; text-align: right; }
/* The deadline is WRITTEN OUT. A toast disappears while a customer is
   still talking; a card in a list is still there when the mistake is
   noticed. */
.vm-q-window { font-size: 12.5px; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-q-ho-fixes {
    border-top: 1px solid var(--vph-hairline);
    padding: 12px 14px;
    display: flex;
    gap: 9px;
}
.vm-q-fix {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
}
/* 09 redesign (2026-09-24): the two named fixes are equals — both
   #f1f5f9 fills, no edge. Neither is the "right" answer until she says. */
.vm-q-fix--method,
.vm-q-fix--undo { background: var(--vph-grey-2); color: var(--vph-ink-2); }
.vm-q-fix[disabled] { opacity: .6; }
.vm-q-ho-list {
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-q-ho-item {
    min-height: 64px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--vph-hairline);
}
.vm-q-ho-item:last-child { border-bottom: 0; }
.vm-q-ho-item-id { flex: 1; min-width: 0; }
.vm-q-ho-item-name { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--vph-ink-2); }
.vm-q-ho-item .vm-q-ho-meta { margin-top: 3px; }
/* 13.5px on a settled row, in the body face. No total anywhere: the
   moment this screen sums money it becomes a book Alice has to agree
   with. */
.vm-q-money-135 {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--vph-ink-2);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.vm-q-ho-item-method { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 2px; text-align: right; }
/* Four orders and a door, not twelve rows: the collapsed row states
   the span it covers so she knows whether her customer is in there.
   The span reads from the left edge, the caret sits at the right. */
.vm-q-ho-more {
    width: 100%;
    height: 52px;
    padding: 0 15px;
    background: transparent;
    border-top: 1px solid var(--vph-hairline);
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.vm-q-ho-more span { flex: 1; min-width: 0; text-align: left; }
.vm-q-ho-more i { font-size: 13px; color: var(--vph-ink-4); }
.vm-q-footnote { font-size: 12.5px; line-height: 1.55; color: var(--vph-ink-4); padding: 0 2px; }

/* ----------------------------------------------------------------
   20. SCREEN 08 — THE STORE PAGE (.vm-st-*)
   The only screen that belongs to a PHARMACY rather than to the
   platform, and the only one entered from outside the app.

   THE GRADING RULE THE WHOLE SECTION OBEYS (handoff 08): a SHADOW
   means work to be done, a BORDER means a settled fact. So exactly
   two things on this page are lifted — the facts card and the shelf
   cards — because those are the two reasons anyone opens it. The
   category tiles are borderless, the basket block is tinted, and
   About is bordered containers with hairlines.

   No yellow, no orange, no stars, no accent edges. The one blue is
   prescription blue.
   ---------------------------------------------------------------- */

/* -- Section 1: the hero, 302px on EVERY shop --------------------
   A shorter band for a counter with no photograph would make two
   pharmacies feel like two apps and land the facts card in a
   different place on each. */
.vm-st-hero {
    position: relative;
    height: 302px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #06342b;
}
.vm-st-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-st-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 38, 32, .58) 0%, rgba(4, 38, 32, .26) 19%,
        rgba(4, 38, 32, .13) 37%, rgba(5, 46, 38, .6) 65%, rgba(3, 32, 26, .95) 100%);
}
.vm-st-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(132% 86% at 50% 28%, rgba(0, 0, 0, 0) 36%, rgba(2, 24, 19, .52) 100%);
}
/* The no-photo ground: the SAME for every shop (tinting it per shop
   would break the palette and invite a colour picker). */
.vm-st-hero.is-nophoto .vm-st-scrim {
    background: radial-gradient(120% 90% at 78% 8%, rgba(22, 160, 133, .34) 0%, rgba(6, 52, 43, 0) 62%);
}
.vm-st-hero.is-nophoto .vm-st-vignette {
    background: radial-gradient(64% 42% at 20% 78%, rgba(143, 240, 139, .13) 0%, rgba(6, 52, 43, 0) 70%);
}

.vm-st-top { position: relative; padding: 14px; display: flex; align-items: center; gap: 9px; }
.vm-st-top-gap { flex: 1; }
.vm-st-glass {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.vm-st-glass:hover { color: #fff; }
/* Slice N: the glass back draws the hub's chevron at 16px (N11). */
.vm-st-glass .fa-angle-left { font-size: 16px; }
/* The no-photo ground is flat, so its glass is a shade quieter and has
   nothing behind it to blur. Directions is glass too (08 redesign). */
.vm-st-hero.is-nophoto .vm-st-glass,
.vm-st-hero.is-nophoto .vm-st-dir {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
    backdrop-filter: none;
}
/* The badge is drawn ONLY when the basket is at THIS counter (store.js):
   teal means the counter you are buying from. */
.vm-st-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    border: 2px solid #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.vm-st-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--vph-primary-dark);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    flex-shrink: 0;
    /* No drop shadow (08 redesign, 2026-09-24): the pill sits flat on the
       scrim like the glass beside it. */
}
.vm-st-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--vph-primary);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .2);
}
.vm-st-status.is-closed { color: var(--vph-ink-3); }
.vm-st-status.is-closed .vm-st-status-dot { background: var(--vph-ink-4); box-shadow: 0 0 0 3px rgba(100, 116, 139, .18); }

/* line-height 1.5 is the frame's inherited body value: §2 declares none,
   and without it the service line's box is 3px short, which lifts the
   whole bottom-pinned block off the frame (the §12 line-box trap). */
.vm-st-id { position: relative; margin-top: auto; padding: 0 16px 28px; line-height: 1.5; }
.vm-st-idrow { display: flex; align-items: center; gap: 12px; }
.vm-st-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .65);
    box-shadow: 0 10px 24px rgba(2, 26, 21, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    color: #1a8917;
    letter-spacing: -.5px;
}
/* The repo's own sign, lit. The green cross is the object that hangs
   outside every pharmacy in Douala, so on the one frame with no
   photograph it does the work the photograph cannot. It does NOT
   pulse: pulsing already means emergency in this app. */
.vm-st-mark--cross {
    background: rgba(2, 26, 21, .5);
    border: 1px solid rgba(143, 240, 139, .45);
    box-shadow: 0 0 22px rgba(143, 240, 139, .26), inset 0 0 12px rgba(143, 240, 139, .1);
    color: var(--vph-accent);
    font-size: 22px;
    text-shadow: 0 0 10px rgba(143, 240, 139, .7);
}
.vm-st-name {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.05;
    text-wrap: pretty;
}
/* 44px because it holds the Directions control: going there is decided
   on arrival, beside the landmark line that names the place. */
.vm-st-place { display: flex; align-items: center; gap: 9px; height: 44px; margin-top: 4px; }
.vm-st-place > i { color: var(--vph-accent); font-size: 11px; flex-shrink: 0; }
.vm-st-landmark { flex: 1; min-width: 0; font-size: 12.5px; color: var(--vph-grey); line-height: 1.35; }
/* The control the 44px band exists for, at 44px itself. The 08 redesign
   (2026-09-24) makes it the SAME glass as the top row: a bare label read
   as a caption over a photograph, and it is the act the page exists for. */
.vm-st-dir {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 13px;
    gap: 7px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-st-dir:hover { color: #fff; }
.vm-st-dir i { font-size: 11px; color: var(--vph-accent); }
.vm-st-service {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
}
.vm-st-service i { color: var(--vph-accent); font-size: 10px; }
.vm-st-service span { font-weight: 500; color: var(--vph-grey); }
/* Under ~20 orders the line is not a measure yet, and it says so in the
   quieter #cbd5e1 — one sentence, so a plain inline line, not the row. */
.vm-st-service.is-new { display: block; color: var(--vph-sep); }
.vm-st-service.is-new span { color: inherit; }

/* -- Section 1b: the facts card, lifted 22px over the hero -------
   The 1px hairlines are the grid GAP over a hairline ground, so a
   card of three, four or five cells draws itself: which cells exist
   is a fact about the counter, not a layout. */
.vm-st-facts-wrap { padding: 0 14px; margin-top: -22px; position: relative; z-index: 5; flex-shrink: 0; }
.vm-st-facts {
    background: var(--vph-hairline);
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
}
.vm-st-fact { background: #fff; padding: 13px 14px; display: flex; gap: 9px; }
.vm-st-fact--wide { grid-column: 1 / -1; }
.vm-st-fact-ico {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}
.vm-st-fact-ico--teal { background: var(--vph-teal-tint); color: var(--vph-primary-dark); }
.vm-st-fact-body { min-width: 0; }
/* 1.5 is the frame's inherited line box (see .vm-st-id). */
.vm-st-fact-t { font-size: 12.5px; font-weight: 700; color: var(--vph-ink); line-height: 1.5; }
.vm-st-fact-t--strong { color: var(--vph-primary-dark); }
.vm-st-fact-s { font-size: 11px; color: var(--vph-ink-4); margin-top: 2px; line-height: 1.5; }

/* The MEASURED reply time is the card's headline (08 redesign,
   2026-09-24): the house headline block — teal tint, the figure in 30px
   Space Grotesk — inset 10px in its full-width cell, with the white
   inner row saying what the figure is an average of. It is the number
   that predicts the experience and no pharmacy here publishes one, so it
   is the heaviest thing on the card; it is measured, never claimed. */
.vm-st-fact--reply { padding: 10px; display: block; }
.vm-st-reply {
    background: var(--vph-teal-tint);
    border-radius: 14px;
    padding: 11px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    line-height: 1.5;
}
.vm-st-reply-label { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); margin-right: 2px; }
.vm-st-reply-fig {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.vm-st-reply-unit { font-size: 14px; font-weight: 700; color: var(--vph-ink); }

/* -- Section 3: the scoped search + the way out ------------------ */
.vm-st-searchwrap { padding: 14px 14px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-st-search {
    background: #fff;
    border-radius: 999px;
    height: 52px;
    padding: 0 5px 0 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--vph-card-shadow);
}
.vm-st-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 13px;
    color: var(--vph-ink);
}
.vm-st-search-input::placeholder { color: var(--vph-ink-4); }
.vm-st-search-go {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
/* The way out is the section's real content, not a consolation — and a
   control is a FILL, never underlined text (09d). The same material
   carries About's "Tell us". */
.vm-st-wayout { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.vm-st-wayout-text { flex: 1; min-width: 0; font-size: 12px; color: var(--vph-ink-3); }
.vm-st-wayout-btn {
    height: 44px;
    padding: 0 13px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-st-wayout-btn:hover { color: var(--vph-ink-2); }
.vm-st-wayout-btn i { font-size: 11px; color: var(--vph-ink-4); }

/* -- Section 2: the basket decision ------------------------------
   The tinted block, not a white card with an accent edge: this is the
   page's one assertion about a counter, which is what teal means on
   02's and 04's bars. */
.vm-st-bask-wrap { padding: 6px 14px 0; flex-shrink: 0; }
/* The 08 redesign (2026-09-24) gives the block the house headline idiom:
   an 11.5px teal label, the other counter's NAME as the figure (18px
   Space Grotesk), and the consequence in the white inner row. */
.vm-st-bask {
    background: var(--vph-tint);
    border-radius: 18px;
    padding: 13px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    line-height: 1.5;
}
/* One sentence for a screen reader ("Your basket is at <name>"), two
   lines on screen, spaced by the block's own 7px gap. */
.vm-st-bask-title { display: flex; flex-direction: column; gap: 7px; }
.vm-st-bask-label { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-st-bask-name {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
    text-wrap: pretty;
}
.vm-st-bask-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-st-bask-row > i {
    font-size: 11px;
    color: var(--vph-primary-dark);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-st-bask-sub { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
/* Neither button sells the switch: equal width, both 48px, the
   secondary a white pill on the tint. */
/* A grid, not a flex row: two equal columns are what "neither button sells
   the switch" means, and flex hands the longer label the wider box. */
.vm-st-bask-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.vm-st-bask-go,
.vm-st-bask-quiet {
    /* `flex:1 1 0` and not `flex:1`: with the default auto basis the longer
       label makes its own button wider, and neither answer may look like the
       recommended one. */
    flex: 1 1 0;
    min-width: 0;
    height: 48px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vm-st-bask-go { background: var(--vph-primary-solid); color: #fff; }
.vm-st-bask-go:hover { color: #fff; }
.vm-st-bask-quiet { background: #fff; color: var(--vph-primary-dark); }
/* Basket already here: one quiet line in the SAME tinted block, no
   buttons — and, being the door to the basket, a 44px row rather than
   the bare 12px text link the first build drew. */
.vm-st-bask-here {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin: 6px 14px 0;
    padding: 0 14px;
    border-radius: 18px;
    background: var(--vph-tint);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vph-primary-dark);
}
.vm-st-bask-here:hover { color: var(--vph-primary-dark); }
.vm-st-bask-here > i { font-size: 12px; flex-shrink: 0; }
.vm-st-bask-here > span { flex: 1; min-width: 0; }
.vm-st-bask-here > i.fa-angle-right { font-size: 11px; }

/* -- Section 4: shop by category --------------------------------- */
.vm-st-tiles-wrap { padding: 16px 14px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 11px; }
/* line-height 1.5 on the two section headings (this row and the shelf's):
   the frame's inherited line box, which `normal` left 3.25px / 6.5px
   short (the §12 line-box trap; fidelity pass 2026-09-24). */
.vm-st-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; line-height: 1.5; }
.vm-st-shelf-head { line-height: 1.5; }
.vm-st-h { font-family: var(--vph-font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; }
.vm-st-headcount { font-size: 11.5px; color: var(--vph-ink-4); }
/* 01's tile: borderless, icon above, the label at 01's size and the
   count legible, because the count is the whole point of the section.
   Three across whether the shop stocks six shelves or three. */
.vm-st-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vm-st-tile {
    height: 96px;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
    color: var(--vph-ink);
}
.vm-st-tile i { font-size: 18px; color: var(--vph-primary); }
.vm-st-tile.is-active { background: var(--vph-tint); }
.vm-st-tile-body { display: block; }
.vm-st-tile-t { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--vph-ink); }
.vm-st-tile-n { display: block; font-size: 11px; color: var(--vph-ink-4); margin-top: 2px; line-height: 1.5; }
/* The frame's tile stretches its two rows across the tile (the glyph and
   the text stay left-aligned either way); with the count's 1.5 line box
   above, the label sits exactly where the frame puts it. */
.vm-st-tile { align-items: stretch; }

/* -- Section 5: the shelf ---------------------------------------- */
.vm-st-shelf { padding: 18px 14px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 11px; }
.vm-st-sub { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 3px; }
/* 7px + the rail's own 2px top padding = the frame's 9px from the label to
   the cards (its 11px column gap less the rail's -2px). */
.vm-st-railblock { display: flex; flex-direction: column; gap: 7px; }
.vm-st-railtitle,
.vm-st-listlabel { font-size: 12px; font-weight: 700; color: var(--vph-ink-4); letter-spacing: .01em; line-height: 1.5; }
/* The measured row bleeds out of the 14px gutter (§7 rail rule): the
   cut card carries "there is more", and the cut card is the LAST card
   — three, never a fourth sitting outside the clip. */
.vm-st-rail { gap: 10px; padding: 2px 30px 6px 14px; }
.vm-st-rail .vm-cat-card { width: 152px; }
.vm-st-listrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* The frame's sort on 08 is the quieter 12px/700 #334155 of the borderless
   idiom, padded 10px both sides and bled 10px into the gutter. */
.vm-st-sort { margin-right: -10px; padding: 0 10px; gap: 7px; font-size: 12px; color: var(--vph-ink-2); }
.vm-st-sort i { font-size: 11px; }
/* The listing sits 7px under its label row, not the column's 11px. */
.vm-st-shelf .vm-cat-grid { margin-top: -4px; }
/* 08's shelf cards take the frame's 1.5 line box on their one-line meta
   ("In stock", "Only 3 left", "The pharmacy checks it first"); 02's
   .vm-cat-* rules in §11 are untouched. */
.vm-st-shelf .vm-cat-meta { line-height: 1.5; }
/* Clearing a category cut: a labelled 44px control, like every other
   way out on this page. */
.vm-st-clear {
    height: 44px;
    padding: 0 13px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-st-note { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.vm-st-note p { font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.5; }
.vm-st-more {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-st-more i { font-size: 12px; color: var(--vph-ink-4); }
/* The shelf card's two store-page sentences. */
.vm-cat-meta--in { color: var(--vph-primary-dark); font-weight: 600; }
.vm-cat-meta--low { color: var(--vph-ink-3); font-weight: 600; }

/* -- Section 6: about, as a record -------------------------------
   BORDERED, never lifted: a border is a settled fact. */
/* line-height 1.5: the frame's inherited line box (see .vm-st-id). */
.vm-st-about { padding: 18px 14px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 11px; line-height: 1.5; }
.vm-st-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--vph-hairline);
}
.vm-st-row-k { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--vph-ink-3); }
.vm-st-row-v { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); flex-shrink: 0; }
.vm-st-row-v--quiet { color: var(--vph-ink-3); }
/* 22px / 11px since the 08 redesign, 2026-09-24 (was 20px / 10px). */
.vm-st-today {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* The map SLOT is designed; the map itself is not drawn. An abstract
   plan in the app's own greys — no street names, no claim to a place,
   and never an embedded live map (inside a page that scrolls it steals
   the gesture). The corner label sits exactly where the provider's
   attribution will go, so the real image replaces both at once. */
.vm-st-map { position: relative; display: block; height: 150px; overflow: hidden; background: var(--vph-grey-2); }
.vm-st-map-ground { position: absolute; inset: 0; display: block; }
.vm-st-map-ground > span { position: absolute; display: block; }
.vm-st-map-park { left: 58%; top: -18%; width: 46%; height: 52%; background: var(--vph-tint); border-radius: 10px; transform: rotate(-8deg); }
.vm-st-map-b1 { left: 3%; top: 6%; width: 23%; height: 30%; background: var(--vph-grey); border-radius: 4px; transform: rotate(-4deg); }
.vm-st-map-b2 { left: 7%; top: 62%; width: 30%; height: 36%; background: var(--vph-grey); border-radius: 4px; transform: rotate(-4deg); }
.vm-st-map-b3 { left: 61%; top: 58%; width: 29%; height: 38%; background: var(--vph-grey); border-radius: 4px; transform: rotate(-4deg); }
.vm-st-map-road1 { left: -10%; top: 42%; width: 130%; height: 14px; background: #fff; transform: rotate(-4deg); }
.vm-st-map-road3 { left: 40%; top: -20%; width: 13px; height: 150%; background: #fff; transform: rotate(9deg); }
.vm-st-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    font-size: 28px;
    color: var(--vph-primary);
    text-shadow: 0 2px 6px rgba(2, 26, 21, .4);
}
.vm-st-map-label {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--vph-primary-dark);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(2, 26, 21, .18);
}
.vm-st-map-label i { font-size: 9px; }
.vm-st-addr { padding: 12px 14px 14px; }
.vm-st-addr-line { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-st-addr-sub { font-size: 11.5px; color: var(--vph-ink-3); margin-top: 3px; line-height: 1.45; }
.vm-st-call {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-st-call:hover { color: var(--vph-primary-dark); }
.vm-st-call i { font-size: 12px; }
/* "Tell us" is how the page stays true, so it is not the quietest
   control on the screen. */
.vm-st-tell { background: var(--vph-grey-2); }

/* No slug, a 404, or a network that failed. */
.vm-st-state { margin: 18px 14px 0; }
/* .vm-st-tail clears the bottom bar while nothing else does (the page is
   still loading); the footer carries its own clearance once it is shown.
   Both are Slice N's shared chrome (30b), and the footer is 01's: the
   .vm-foot--st variant of the 2026-09-24 drop is retired (N8). */
/* N10: the <main> landmark holds sections 1-6 and keeps them the column's
   flex items, so nothing in them moves. */
.vm-st-main { display: flex; flex-direction: column; min-width: 0; }

/* ----------------------------------------------------------------
   21. SCREEN 16 — ORDERS (.vm-or-*)
   Pixel truth: docs/design/pharmacy/screens/16/{README.md,frame.html}
   (a user drop, 16a the list + 16b nothing yet; REDESIGNED 2026-09-23).
   Contract: PHARMACY_HUB.md §6 row "16", §7.13, §7.15.

   A ROW IS A REFERENCE, NOT AN ORDER: one half leads and the rest are
   standing facts in the grey foot. The redesign puts the news on a
   `--vph-tint` block: a quoted price (30px, a white hold row, then a
   48px pill that is a picture of the card's own tap — a <span>, never a
   control) and a held pickup (24px deadline, a white "Pickup only" row).
   A live delivery half carries a four-step strip read off its status.

   THE GRADING RULE (06's, carried): a SHADOW means an answer is owed —
   only the row whose quote needs her is lifted; every other live row is
   BORDERED; settled references are hairline rows in ONE bordered
   container, never a stack of cards — each a door with a date tile and
   a grey chevron (R11, amended by the redesign).

   A nav destination: the band opens on teal with NO back control, and
   its 44px row carries the date; under the title one sentence counts the
   prices that wait on her. Nothing here is styled for a badge, a dot, a
   status chip, a tick, a receipt, a total, a filter or a star — a style
   rule is how they creep back. No yellow, no orange, no prescription
   blue (the frame draws none on this screen).

   One frame value this section reproduces on purpose: every live card
   AND every settled row declares `line-height: normal`, because the
   frame draws both as <button>s (UA `normal`) whose unstyled spans
   inherit it. 06's §17 made the same call for `.vm-od-call`.
   ---------------------------------------------------------------- */

/* -- The band: 14a/14b/15a geometry, with orientation in the exit row */
.vm-or-band {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px 14px 18px;
    background: linear-gradient(160deg, #12775f 0%, #0c5b4c 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
    line-height: 1.5;
}
.vm-or-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%);
    pointer-events: none;
}
.vm-or-orient { position: relative; display: flex; align-items: center; height: 44px; }
/* 01's eyebrow treatment. The date is not decoration: every clock on
   the screen is relative, and nothing else establishes today. */
.vm-or-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vph-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vm-or-eyebrow i { font-size: 11px; }
.vm-or-title {
    position: relative;
    margin-top: 6px;
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
}
/* "1 price is waiting for your answer." — the band's one sentence, over
   a drawn list only. */
.vm-or-news {
    position: relative;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--vph-grey);
    line-height: 1.45;
}
.vm-or-news-t { font-weight: 600; color: #fff; }

/* -- The body. flex:1 0 auto — never flex:1 with overflow:hidden,
   which clipped 05 and 06. It DIMS while a read is in flight and
   never empties. */
.vm-or-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 16px 14px 18px;
    line-height: 1.5;
    transition: opacity .15s ease;
}
.vm-or-body.is-reading { opacity: .55; }
/* 16b: a single block of type sits deeper than a list, top-aligned. */
.vm-or-body.is-none { padding: 60px 20px 24px; }
.vm-or-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vm-or-group--past { gap: 10px; }
.vm-or-h { font-size: 12px; font-weight: 700; color: var(--vph-ink-3); padding: 0 2px; }
.vm-or-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vm-or-sep { color: var(--vph-sep); }

/* While the first read is in flight: no words, no duration. */
.vm-or-skel { display: flex; flex-direction: column; gap: 9px; }
.vm-or-skel-h { width: 44px; height: 12px; margin: 3px 2px; border-radius: 6px; background: var(--vph-grey); }
.vm-or-skel-card { height: 176px; border-radius: 18px; background: var(--vph-grey-2); }
.vm-or-skel-card--short { height: 124px; }

/* -- The live card: a whole-card door to 06 ----------------------- */
.vm-or-card {
    width: 100%;
    display: block;
    padding: 0;
    text-align: left;
    color: var(--vph-ink);
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
    line-height: normal;
}
/* The only lifted card: a price that needs her answer. */
.vm-or-card.is-lifted { border: 0; box-shadow: var(--vph-card-shadow); }
.vm-or-card:focus-visible,
.vm-or-row:focus-visible,
.vm-or-more:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }

/* identity → label → figure → plain sentences → grey foot */
.vm-or-id { display: flex; align-items: flex-start; gap: 11px; padding: 13px 13px 0; }
.vm-or-id-main { flex: 1; min-width: 0; }
.vm-or-name {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.25;
}
.vm-or-place { display: block; font-size: 11.5px; color: var(--vph-ink-4); margin-top: 4px; }
/* A door's chevron, in the teal of the tint below it. */
.vm-or-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; margin-top: 5px; }

.vm-or-main { display: block; padding: 12px 13px 13px; }
/* The quote's pill follows, with its own 12px above. */
.vm-or-main.has-cta { padding-bottom: 0; }
.vm-or-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--vph-ink-3); }

/* -- The tint: where the news sits (a quoted price, a held pickup). */
.vm-or-tint {
    display: block;
    background: var(--vph-tint);
    border-radius: 14px;
    padding: 12px 14px 14px;
}
.vm-or-tint .vm-or-label { color: var(--vph-primary-dark); }
/* The quote: 30px, because it is the news. */
.vm-or-quote { display: flex; align-items: baseline; gap: 5px; margin-top: 4px; }
.vm-or-quote-n {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.vm-or-quote-c { font-size: 12px; font-weight: 600; color: var(--vph-ink-3); }
.vm-or-for { display: block; font-size: 12.5px; color: var(--vph-ink-2); margin-top: 3px; }
/* The deadline takes the figure slot: nothing is moving and no price is
   in question, so the closing time IS the row. */
.vm-or-when {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.7px;
    font-variant-numeric: tabular-nums;
    line-height: 1.12;
    margin-top: 4px;
    white-space: nowrap;
}
/* A white row on the tint: a green glyph and one sentence — the quote's
   hold, or "Pickup only" with its reason (a sentence, never a chip). */
.vm-or-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 11px;
    padding: 9px 11px;
    background: #fff;
    border-radius: 10px;
}
.vm-or-note i { font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; margin-top: 3px; }
.vm-or-note-t { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-or-note--hold .vm-or-note-t { font-variant-numeric: tabular-nums; }
.vm-or-note--own { margin-top: 10px; }
.vm-or-note--own i { width: 12px; }
.vm-or-note--own .vm-or-note-t { text-wrap: pretty; }
/* Under the tint, not on it: what happens at the deadline. */
.vm-or-shelf {
    display: block;
    font-size: 12px;
    color: var(--vph-ink-3);
    margin-top: 9px;
    line-height: 1.45;
    padding: 0 2px;
}
/* The quote's pill: a picture of the card's own tap (the card is the one
   <button>; this is a <span>). */
.vm-or-cta-wrap { display: block; padding: 12px 13px 13px; }
.vm-or-cta {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
}
.vm-or-cta i { font-size: 12px; }
.vm-or-line { display: block; font-size: 12px; color: var(--vph-ink-3); margin-top: 6px; line-height: 1.45; }
.vm-or-line + .vm-or-line { margin-top: 4px; }

/* -- The delivery strip: four steps off `order.status`, never a clock.
   Done steps are primary, the rest grey; the current word is ink/700. */
.vm-or-steps { display: block; margin-top: 11px; }
.vm-or-steps-bars,
.vm-or-steps-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.vm-or-steps-l { margin-top: 5px; font-size: 10.5px; line-height: 1.3; }
.vm-or-step { height: 5px; border-radius: 999px; background: var(--vph-grey); }
.vm-or-step.is-done { background: var(--vph-primary); }
.vm-or-step-l { color: var(--vph-ink-4); }
.vm-or-step-l.is-done { color: var(--vph-ink-3); }
.vm-or-step-l.is-now { color: var(--vph-ink); font-weight: 700; }

/* The grey foot: standing facts, split by hairlines. */
.vm-or-foot { display: block; background: var(--vph-canvas); border-top: 1px solid var(--vph-hairline); }
.vm-or-foot > * + * { border-top: 1px solid var(--vph-hairline); }
.vm-or-fact { display: block; padding: 12px 13px 13px; }
.vm-or-fact-row { display: flex; align-items: flex-start; gap: 12px; }
.vm-or-fact-main { flex: 1; min-width: 0; }
.vm-or-fact-t { display: block; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.35; }
.vm-or-fact-s { display: block; font-size: 11.5px; color: var(--vph-ink-4); margin-top: 2px; }
.vm-or-fact-m { flex-shrink: 0; text-align: right; }
/* 14px: a standing fact, not the news. */
.vm-or-fact-fig {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink-2);
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-or-fact-use { display: block; font-size: 11px; color: var(--vph-ink-4); margin-top: 2px; }
/* The reference, once, where it is spoken. */
.vm-or-say { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.vm-or-say-k { min-width: 0; font-size: 12px; color: var(--vph-ink-2); }
.vm-or-say-v {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: .09em;
    font-variant-numeric: tabular-nums;
}
.vm-or-pay { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 13px 11px; }
.vm-or-pay-k { min-width: 0; font-size: 12px; color: var(--vph-ink-2); }
.vm-or-pay-v { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.vm-or-pay-n {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
}
.vm-or-pay-c { font-size: 10.5px; font-weight: 600; color: var(--vph-ink-4); }

/* -- Settled references: ONE bordered container of hairline rows.
   Each row is a door (R11, amended): a date tile, the counter, the act,
   the money and a grey chevron. No tick, no badge. */
.vm-or-past { background: #fff; border: 1px solid var(--vph-grey); border-radius: 18px; overflow: hidden; }
.vm-or-past > * + * { border-top: 1px solid var(--vph-hairline); }
.vm-or-row {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 13px;
    text-align: left;
    color: var(--vph-ink);
    background: transparent;
    line-height: normal;
}
/* 16 redesign (2026-09-24): the settled row's pressed state, the frame's
   `style-active="background:#f8fafc"`. A row with no reference is a
   disabled button, which never matches :active. */
.vm-or-row:active { background: var(--vph-canvas); }
/* The Douala date of `settled_at`: weekday (or month) over the day. */
.vm-or-tile {
    width: 38px;
    height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    line-height: 1;
}
.vm-or-tile-d { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vm-or-tile-n {
    margin-top: 2px;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vm-or-row-main { flex: 1; min-width: 0; }
.vm-or-row-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-or-row-s { display: block; font-size: 11.5px; color: var(--vph-ink-4); margin-top: 2px; line-height: 1.4; }
.vm-or-row-m {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink-2);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-or-row-chev { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; }
/* 09f's footed door: the next 20 appended in place. */
.vm-or-more {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: transparent;
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-or-more i { font-size: 13px; }
.vm-or-more[aria-busy="true"] { opacity: .55; }
.vm-or-more-fault { padding: 10px 13px; font-size: 12px; color: var(--vph-ink-3); }

/* -- 16b and R14's logged-out twin: no card, no illustration. */
.vm-or-none { display: flex; flex-direction: column; }
.vm-or-none-t {
    font-family: var(--vph-font-display);
    font-size: 23px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.6px;
    line-height: 1.18;
}
.vm-or-none-s {
    font-size: 13.5px;
    color: var(--vph-ink-3);
    line-height: 1.6;
    margin-top: 11px;
    max-width: 292px;
    text-wrap: pretty;
}
/* The screen's only action, so it is the file's solid primary — a pill
   since the redesign, with a glass on "Browse medicines" only. */
.vm-or-none-go {
    height: 52px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-or-none-go:hover { color: #fff; }
.vm-or-none-go i { font-size: 13px; }

/* -- A read that failed: one bordered state card. */
.vm-or-fail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 14px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
}
.vm-or-fail-t { font-size: 13.5px; font-weight: 700; color: var(--vph-ink); }
.vm-or-fail-go {
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--vph-sep);
    background: #fff;
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
}

/* .vm-or-tail clears the fixed bottom bar: Slice N's shared chrome (30b). */

/* ----------------------------------------------------------------
   22. SCREEN 17 — SEARCH RESULTS (.vm-sr-*)
   Pixel truth: docs/design/pharmacy/screens/17/{README.md,frame.html}
   (a user drop: 17a results for "malaria", 17b nothing found).
   Contract: PHARMACY_HUB.md §6 row "17", §7.14.

   THE SHARED SEARCH: Medicines first, Exams & services second, never
   merged — no tabs, no segmented control, no sort control, no chips.
   A TASK screen, the same three bands as 02 and 04: the white header,
   the teal counter bar, the fixed basket bar. No bottom nav, no FAB.

   Two materials. The medicines block is ONE lifted container of
   hairline rows (the drop's table); the exams block is 10b's exam card
   and 10b's expanding other-name row, COPIED from css/exams/app.css §5
   under .vm-sr-* names — this hub never links the exams stylesheet.
   Prescription blue (--vph-rx-solid) appears on the medicines side and
   17b only; NOTHING in the exams block is blue.

   Redesigned 2026-09-23 (frontend only, PHARMACY_HUB §7.14 R24-R28):
   the count line is 15px Space Grotesk ink (one line per source when a
   side found nothing), the block dots are gone, the exams door is a 999
   pill with an arrow, and 17b's card carries a 21px headline, an inset
   help row and a solid blue prescription pill. The naming rule (§7.15):
   no staff name anywhere on this screen.

   Line heights. The frame's canvas body is 1.5 and its <button>s are
   the UA's `normal`; this hub's body declares none (so `normal`) and its
   buttons inherit. The root below restores 1.5 and the row's name
   button restores `normal`, so every box sits where the frame puts it.
   ---------------------------------------------------------------- */
.vm-sr { line-height: 1.5; }
.vm-sr.has-basket-bar .vm-sr-body { padding-bottom: 91px; }  /* 20 + the 71px bar */

/* The page's h1, said to a screen reader and never drawn (slice F4 SH11):
   the field is the subject the eye reads. Out of the header's flex flow,
   so the frame's boxes do not move. */
.vm-sr-vsr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -- Header: exit · field · count --------------------------------- */
.vm-sr-head {
    background: #fff;
    padding: 10px 14px 13px;
    border-bottom: 1px solid var(--vph-grey-2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* The labelled exit: the destination's own name (back.js). */
/* .vm-sr-exit is the hub's one back control (.vm-back, Slice N 30b). */
/* THE FIELD IS THE SCREEN'S SUBJECT. The 52px pill is the hit area
   (the hero city chip's exception); the clear control inside it is 44. */
.vm-sr-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 4px 0 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vm-sr-field:focus-within { border-color: var(--vph-primary); }
.vm-sr-field > i { color: var(--vph-ink-4); font-size: 13px; flex-shrink: 0; }
.vm-sr-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink);
}
.vm-sr-clear {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sr-clear i { font-size: 14px; }
/* Counts BY SOURCE — the answer to the query, so it is display type
   (R24). #cbd5e1 is a separator only, never text. */
.vm-sr-count {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
    padding: 0 2px;
}
/* One line: each source's phrase is unbreakable, so a narrow phone
   breaks at the dot and never inside "laboratories and clinics". */
.vm-sr-count-src { white-space: nowrap; }
/* A side found nothing: one line per source (17b's flex column, gap 1). */
.vm-sr-count-line { display: block; }
.vm-sr-count-line + .vm-sr-count-line { margin-top: 1px; }
/* R25: the bare page's instruction is not a count, and keeps the quiet
   12px grey it was built with. */
.vm-sr-count.is-hint {
    font-family: var(--vph-font-body);
    font-size: 12px;
    font-weight: 400;
    color: var(--vph-ink-4);
    letter-spacing: normal;
}
.vm-sr-sep { color: var(--vph-sep); }

/* -- The counter bar: 04's material, the name wraps ---------------- */
.vm-sr-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--vph-tint);
    padding: 7px 8px 7px 14px;
    flex-shrink: 0;
}
.vm-sr-bar-main { min-width: 0; }
.vm-sr-bar-name {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
}
.vm-sr-bar-sub { font-size: 11.5px; color: var(--vph-primary-dark); margin-top: 2px; line-height: 1.3; }
.vm-sr-bar-btn {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.vm-sr-bar-btn:hover { color: var(--vph-primary-dark); }

/* -- Body and the two block headings ------------------------------- */
/* `flex: 1 0 auto`, never `flex: 1` with overflow hidden (that clipped
   05 and 06): the page runs past 844 and scrolls. */
.vm-sr-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 14px 20px;
}
.vm-sr-body.is-none { gap: 12px; }
.vm-sr-loading { font-size: 13px; color: var(--vph-ink-4); padding: 6px 2px; }
.vm-sr-block { display: flex; flex-direction: column; gap: 11px; }
.vm-sr-bhead { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.vm-sr-brow { display: flex; align-items: center; gap: 9px; }
.vm-sr-bname {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
}
.vm-sr-bgap { flex: 1; }
/* A label, not a control. */
.vm-sr-sort { font-size: 11.5px; color: var(--vph-ink-4); flex-shrink: 0; }
/* The one thing the platform refuses in this block (the "where it comes
   from" clause went with the redesign: the count line says it). */
.vm-sr-bsub { font-size: 12px; color: var(--vph-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-sr-bsub strong { color: var(--vph-ink); font-weight: 600; }

/* -- Medicines: one lifted container, hairline rows ---------------- */
.vm-sr-meds {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
.vm-sr-row {
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
}
.vm-sr-row + .vm-sr-row { border-top: 1px solid var(--vph-hairline); }
/* The name + meta are ONE button that opens 03. Minimum height, never a
   maximum: the dose and the pack ARE the name, and it wraps. */
.vm-sr-open {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    display: block;
    padding: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    line-height: normal;
}
.vm-sr-name, .vm-sr-meta { display: block; }
.vm-sr-name { font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.35; }
.vm-sr-row.is-out .vm-sr-name { color: var(--vph-ink-3); }
.vm-sr-meta { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 4px; }
.vm-sr-rx { color: var(--vph-rx-solid); font-weight: 700; }
/* The count must not orphan from its noun: this is the one row whose
   right column carries a "from", so its meta box is the narrowest. */
.vm-sr-where { color: var(--vph-primary-dark); font-weight: 600; white-space: nowrap; }
.vm-sr-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* THE FIXED RIGHT-ALIGNED COLUMN. Tabular numerals align digits, not
   blocks: the 76px floor is what keeps four- and five-digit prices on
   one right edge. Every block in it holds a figure and a currency. */
.vm-sr-money {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    min-width: 76px;
}
.vm-sr-money--from { flex-direction: column; align-items: flex-end; gap: 0; }
.vm-sr-from { font-size: 9.5px; color: var(--vph-ink-4); line-height: 1.15; }
.vm-sr-figrow { display: flex; align-items: baseline; gap: 3px; }
.vm-sr-fig {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}
/* A price with no owner at this counter is never the counter's ink. */
.vm-sr-money--from .vm-sr-fig { color: var(--vph-ink-3); }
.vm-sr-cur { font-size: 9.5px; font-weight: 600; color: var(--vph-ink-4); }
/* No price anywhere: a STATE in the same column, never 0, never a dash.
   It wraps inside the floor rather than widening it. */
.vm-sr-money--none { max-width: 76px; }
.vm-sr-onrequest {
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-4);
    text-align: right;
    line-height: 1.3;
}

/* The three controls, one 44px shape. Teal buys, blue sends paper, the
   quiet grey store shows who else has it. */
.vm-sr-act {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-sr-act--add { background: var(--vph-primary-solid); color: #fff; }
.vm-sr-act--rx { background: var(--vph-rx-solid); color: #fff; }
.vm-sr-act--rx:hover { color: #fff; }
.vm-sr-act--where { background: var(--vph-grey-2); color: var(--vph-primary-dark); font-size: 13px; }
.vm-sr-act--where:hover { color: var(--vph-primary-dark); }

/* R2: the truncation is stated — a 48px footed door into 02's list. */
.vm-sr-all {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 13px;
    border-top: 1px solid var(--vph-hairline);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-sr-all:hover { color: var(--vph-primary-dark); }
.vm-sr-all-t { flex: 1; min-width: 0; }
.vm-sr-all i { font-size: 13px; flex-shrink: 0; }

/* -- Exams & services: 10b's card, copied --------------------------- */
.vm-sr-cards { display: flex; flex-direction: column; gap: 11px; }
.vm-sr-cards:empty { display: none; }
.vm-sr-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-sr-card-top { display: flex; align-items: flex-start; gap: 12px; }
.vm-sr-card-id { flex: 1; min-width: 0; }
.vm-sr-card-name {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
}
/* The method, never the turnaround. */
.vm-sr-card-sub { font-size: 12px; color: var(--vph-ink-4); margin-top: 4px; }
.vm-sr-card-price { text-align: right; flex-shrink: 0; }
.vm-sr-card-from { font-size: 11px; color: var(--vph-ink-4); }
.vm-sr-card-fig {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.vm-sr-card-none { font-size: 12.5px; font-weight: 600; color: var(--vph-ink-4); margin-top: 2px; }
/* Equal weight: count, distance and price are three facts, not a rank. */
.vm-sr-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vm-sr-fact { font-size: 12.5px; color: var(--vph-ink-2); }
.vm-sr-fact-sep { color: var(--vph-sep); }
.vm-sr-prep {
    background: var(--vph-tint);
    border-radius: 12px;
    padding: 11px 13px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.vm-sr-prep i { font-size: 12px; color: var(--vph-primary-dark); margin-top: 3px; flex-shrink: 0; }
.vm-sr-prep-text { font-size: 12.5px; color: var(--vph-ink-2); line-height: 1.5; }
/* The dark door: "you are leaving the vertical" (01's exams card). It
   NAMES the count, never a saving. A 999 pill with an arrow (R26). */
.vm-sr-card-go {
    height: 48px;
    border-radius: 999px;
    background: var(--vph-primary-dark);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(15, 109, 92, .24);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-sr-card-go:hover { color: #fff; }
.vm-sr-card-go i { font-size: 12px; }

/* 10b's "Also offered under other names": no price, no distance. */
.vm-sr-h-sm {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
}
.vm-sr-otherhead { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 0; }
.vm-sr-list {
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}
.vm-sr-other-row {
    width: 100%;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    background: transparent;
    text-align: left;
    color: inherit;
}
.vm-sr-other-row + .vm-sr-other-row,
.vm-sr-other-panel + .vm-sr-other-row { border-top: 1px solid var(--vph-hairline); }
.vm-sr-other-main { flex: 1; min-width: 0; display: block; }
.vm-sr-other-name, .vm-sr-other-count,
.vm-sr-other-struct-main, .vm-sr-other-struct-name, .vm-sr-other-struct-meta { display: block; }
.vm-sr-other-name { font-size: 14px; font-weight: 700; color: var(--vph-ink); line-height: 1.3; }
.vm-sr-other-count { font-size: 12px; color: var(--vph-ink-4); margin-top: 4px; }
.vm-sr-other-chev { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; transition: transform .16s ease; }
.vm-sr-other-row[aria-expanded="true"] .vm-sr-other-chev { transform: rotate(90deg); }
.vm-sr-other-panel {
    border-top: 1px solid var(--vph-hairline);
    background: var(--vph-canvas);
    display: flex;
    flex-direction: column;
}
.vm-sr-other-struct {
    min-height: 56px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--vph-ink);
}
.vm-sr-other-struct + .vm-sr-other-struct { border-top: 1px solid var(--vph-hairline); }
.vm-sr-other-struct:hover { color: var(--vph-ink); }
.vm-sr-other-struct-main { flex: 1; min-width: 0; }
.vm-sr-other-struct-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.vm-sr-other-struct-meta { font-size: 12px; color: var(--vph-ink-4); margin-top: 3px; }
.vm-sr-other-struct i { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; }

/* -- 17b: nothing on either side ------------------------------------ */
.vm-sr-none { display: flex; flex-direction: column; gap: 12px; }
/* Lifted: the prescription door is the way on. Since the redesign (R28)
   it is a solid 48px blue pill naming the COUNTER (never a person): on a
   screen that found nothing, the paper is the one way forward. */
.vm-sr-nf {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
.vm-sr-nf-copy { padding: 15px 15px 14px; }
.vm-sr-nf-t {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.45px;
    line-height: 1.22;
    text-wrap: pretty;
}
/* R27: the help comes first, on an inset row — a role, never a name. */
.vm-sr-nf-help {
    margin-top: 11px;
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-sr-nf-help i { font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; margin-top: 3px; }
.vm-sr-nf-help-t { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
/* R23's sentence: only what the search found. */
.vm-sr-nf-s { font-size: 12px; color: var(--vph-ink-3); line-height: 1.5; margin-top: 9px; }
.vm-sr-nf-foot { padding: 0 15px 15px; }
.vm-sr-nf-door {
    width: 100%;
    min-height: 48px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .24);
}
.vm-sr-nf-door:hover { color: #fff; }
.vm-sr-nf-door i { font-size: 13px; flex-shrink: 0; }
.vm-sr-tip-door {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    border-top: 1px solid var(--vph-hairline);
    text-align: left;
}
/* Bordered: a fact about brand names, with the counter's own number. */
.vm-sr-tip {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-sr-tip-copy { padding: 13px 15px; display: flex; gap: 11px; }
.vm-sr-tip-copy i { color: var(--vph-ink-4); font-size: 12px; flex-shrink: 0; width: 16px; margin-top: 3px; }
.vm-sr-tip-s { flex: 1; min-width: 0; font-size: 12.5px; color: var(--vph-ink-2); line-height: 1.5; }
.vm-sr-tip-door { height: 44px; color: var(--vph-primary-dark); }
.vm-sr-tip-door:hover { color: var(--vph-primary-dark); }
.vm-sr-tip-door i { font-size: 12px; flex-shrink: 0; }
.vm-sr-tip-door-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
/* Screen 51: "Message <counter>" in the Call's slot, the card door's mint
   wash and edge (#0f6d5c on #e8f5f1 5.6:1; on the hover wash 5.3:1). Two
   classes, so 17-search.css's desktop hairline does not repaint it. */
.vm-sr-tip-door.vm-sr-tip-door--ask {
    background: #e8f5f1;
    border-top-color: #cfe9e1;
    color: #0f6d5c;
}
.vm-sr-tip-door.vm-sr-tip-door--ask:hover { background: #dff0ea; color: #0f6d5c; }
.vm-sr-tip-door--ask .fa-comment-dots { font-size: 13px; }
.vm-sr-tip-door--ask:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

/* -- The read failed: one bordered card, no figure ------------------ */
.vm-sr-state {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 15px;
}
.vm-sr-state-t {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
}
.vm-sr-state-s { font-size: 12.5px; color: var(--vph-ink-3); margin-top: 6px; }
.vm-sr-state-go {
    margin-top: 12px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
}

/* -- The basket bar: 02's, fixed to the foot ------------------------ */
.vm-sr-basket {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    padding: 10px 14px 12px;
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 40;
}
.vm-sr-basket-main { flex: 1; min-width: 0; }
.vm-sr-basket-total { display: flex; align-items: baseline; gap: 4px; }
.vm-sr-basket-fig {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-sr-basket-cur { font-size: 10.5px; font-weight: 600; color: var(--vph-ink-4); }
.vm-sr-basket-sub { font-size: 11px; color: var(--vph-ink-4); margin-top: 3px; line-height: 1.35; }
.vm-sr-basket-btn {
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    flex-shrink: 0;
}
.vm-sr-basket-btn:hover { color: #fff; }
.vm-sr-basket-btn i { font-size: 12px; }

/* ----------------------------------------------------------------
   23. SCREEN 19 — KEPT FOR LATER (.vm-kp-*), and 19b at 04's foot
   Pixel truth: docs/design/pharmacy/screens/19/{README.md,frame.html}
   (a signed-off user drop; the frame wins where the two differ).

   A TASK screen: white header with ONE labelled exit ("Your basket",
   fixed), the teal counter bar with NO control, no bottom nav, no basket
   bar, no total, no count in the header. Every control is 44px (the
   footed "See all N" door 52px).

   SHADOW MEANS ACTIONABLE, again: "In stock here" is the lifted card
   (§14's .vm-bk-card — these can go back), "Not at this counter" the
   bordered one (§14's .vm-bk-group). The rows are §14's .vm-bk-row
   material — tile, name, unit line, figure — and this section adds only
   19's own parts: the tinted lead block, group 2's two-line head, the
   999px pills, the Remove text control, the prescription lines, "Back in
   your basket" and the door. The same row sits at the foot of the basket
   (19b), which is why it lives in one module (kept-row.js) and one
   section.

   #1b6fa8 appears here only on "Needs a prescription". #94a3b8 is the
   tile's decorative glyph (§14) and never a text colour. The teal on a
   tint is --vph-primary-dark (#0f6d5c): 5.6:1 on #e3f4f0.
   ---------------------------------------------------------------- */

/* The same inherited line box §14 and §16 declare: the frame's body is
   line-height 1.5, the shared base declares none. */
.vm-kp-head,
.vm-kp-counter,
.vm-kp-body { line-height: 1.5; }

/* -- Header + counter bar, one sticky block (04's and 05's idiom) -- */
.vm-kp-top {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    flex-shrink: 0;
}
.vm-kp-head {
    background: #fff;
    padding: 10px 14px 13px;
    border-bottom: 1px solid var(--vph-grey-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* One control, and its word is FIXED: going back is also the only way to
   change the counter from here. */
/* .vm-kp-back is the hub's one back control (.vm-back, Slice N 30b). */
.vm-kp-title {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
    color: var(--vph-ink);
}
.vm-kp-sub {
    font-size: 12px;
    color: var(--vph-ink-3);
    margin-top: 5px;
    line-height: 1.45;
    text-wrap: pretty;
}

/* 06's bar with no control. The name wraps and is never truncated. */
.vm-kp-counter {
    background: var(--vph-tint);
    padding: 8px 14px 10px;
}
.vm-kp-counter-name {
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.25;
    color: var(--vph-ink);
}
.vm-kp-counter-sub {
    font-size: 11.5px;
    color: var(--vph-primary-dark);
    margin-top: 2px;
    line-height: 1.35;
}

/* -- The scrolling column ---------------------------------------- */
/* `flex:1 0 auto`, never `flex:1` with overflow hidden (which clipped 05
   and 06): the page scrolls. 24px between groups so group 2's head clears
   the lifted card's shadow. */
.vm-kp-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 14px 26px;
}
.vm-kp-group { display: flex; flex-direction: column; gap: 9px; }

/* -- Group 1's lead: the tinted block at the top of the lifted card -- */
.vm-kp-lead { padding: 14px 0 2px; }
.vm-kp-block {
    background: var(--vph-tint);
    border-radius: 14px;
    padding: 12px 14px 14px;
}
.vm-kp-eyebrow {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vph-primary-dark);
}
.vm-kp-count {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.2;
    margin-top: 4px;
    color: var(--vph-ink);
    text-wrap: pretty;
}
.vm-kp-inset {
    margin-top: 11px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-kp-inset i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-kp-inset span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
    text-wrap: pretty;
}

/* -- Group 2's two-line head ------------------------------------- */
.vm-kp-ghead {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2px;
}
.vm-kp-gtitle {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-kp-gsub { font-size: 12px; color: var(--vph-ink-3); line-height: 1.5; }

/* The bordered container's rows (19a group 2, the no-counter list, and
   19b at 04's foot) sit in the frame's 14px wrapper. */
.vm-kp-rows { padding: 0 14px; }

/* -- The row: §14's .vm-bk-row + these parts ---------------------- */
.vm-kp-row .vm-bk-name { text-wrap: pretty; }
.vm-kp-line { display: flex; align-items: baseline; gap: 10px; }
.vm-kp-words { flex: 1; min-width: 0; }
/* The state that changes the decision ("Only 4 left", "Out of stock
   here", "Not stocked here", "No pharmacy near you lists it"), appended
   to the unit line one step darker. */
.vm-kp-state { color: var(--vph-ink-3); font-weight: 600; }

/* The prescription lines: 04's state words, the BOX price in words (never
   a line total), and where Put back puts it. No figure at the right. */
.vm-kp-rx {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vph-rx-solid);
    margin-top: 3px;
}
.vm-kp-rx i { font-size: 11px; }
.vm-kp-box { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 1px; }
.vm-kp-note { font-size: 12px; color: var(--vph-ink-2); margin-top: 4px; line-height: 1.4; }

/* The control row: Put back / Find it nearby left, Remove right, alone. */
.vm-kp-ctrl {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}
.vm-kp-pill {
    height: 44px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-kp-pill:hover { color: var(--vph-primary-dark); }
.vm-kp-pill i { font-size: 12px; }
/* 09d / 18c's Cancel material: borderless text, never a trash glyph (on
   04 that glyph used to mean "keep for later"). The -10px pulls its
   padding into the gutter so the word aligns with the figure above. */
.vm-kp-remove {
    height: 44px;
    padding: 0 10px;
    margin: 0 -10px 0 auto;
    background: transparent;
    color: var(--vph-ink-3);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
/* After Put back: a statement, not a control, and lighter than Put back's
   own label, so "went back" and "removed" never look alike. */
.vm-kp-done {
    height: 44px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 600;
}
.vm-kp-done i { font-size: 13px; }

/* -- 19b: the footed door to the whole list (from three kept lines) -- */
.vm-kp-door {
    width: 100%;
    height: 52px;
    border-top: 1px solid var(--vph-hairline);
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-kp-door:hover { color: var(--vph-primary-dark); }
.vm-kp-door i { font-size: 12px; }

/* ----------------------------------------------------------------
   24. SCREEN 20 — ACCOUNT (.vm-ac-*)
   Pixel truth: docs/design/pharmacy/screens/20/{README.md,frame.html}
   (a user drop, 20a the page, 20b logging out, 20c an account that runs
   a counter; the FRAME wins where the two differ). Contract:
   PHARMACY_HUB.md §7.18.

   REDESIGNED Oct 10 2026 (slice F20): screens/20/redo/FACTS.md and the
   build contract briefs/2026-10-10_screen-20-redo-contract.md. 3a (an
   account that runs a pharmacy or a laboratory / clinic): the business
   card first; 3b (a customer): the list of places; #pro For
   professionals. The person stands in the band on the phone. The sheets
   below are as handed off. The desktop layer (the 340 column, the rail,
   the pane) is desktop/20-account.css.

   A nav destination (16's rules): the band is 16's own (.vm-or-band and
   its parts, §21, reused — not copied), no back control (but the #pro
   view's "Account"), the 44px row spent on orientation.

   THE GRADING RULE again: the name card is LIFTED (a thing she can act
   on), the log-out group BORDERED, and its row is a plain white row that
   greys to #f8fafc only while pressed (the frame's style-active) — never
   a #f1f5f9 fill, never red (#e74c3c is the emergency's alone).

   R-AA (§7.16): every teal fill under white text is --vph-primary-solid
   (#0f6d5c): the business card's tile and solid act, the professionals'
   tiles and acts, 46e's owner card and the sheets' commits. #d3ece6 on
   #0f6d5c is 5:1; the band caption #bfe6dc is 4.9:1 where it sits.

   Two sheets on §8's chrome: 20b (drawn) and the edit sheet (not drawn,
   R2), both in 20b's column — 22px top radius, padding 10/14/16, a 14px
   gap, the 38x4 handle — over 04b's flat #0f172a scrim at .55.

   The §12 line-box trap: the frame's body is line-height 1.5 and every
   block inherits it; the shared base declares none. Declared here, on this
   screen's own shell and sheets.
   ---------------------------------------------------------------- */
.vm-ac-body,
.vm-sheet--ac { line-height: 1.5; }

/* -- The body: top-aligned; empty ground below is correct (16b). The
   redesign's phone (3a-p-owner, 3b-p): sections 20 apart, each a kicker
   over its card or group, 8 between them. --------------------------- */
.vm-ac-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 14px 24px;
}
.vm-ac-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* The kicker (a group's caption). */
.vm-ac-kick {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vph-ink-3);
    line-height: 1.5;
}
.vm-ac-kick:focus { outline: none; }
.vm-ac-kick:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }

/* While the account is read: no words, no duration. */
.vm-ac-skel { height: 296px; border-radius: 18px; background: var(--vph-grey-2); }

/* -- The band's person (R11): the name-and-number card moves into the
   band on the phone. 16's band is reused as it is; the title sits 4
   under the orientation row (the frame), the person 14 under it. ---- */
/* The redo frame's band has no hairlines and keeps the body's 1.5 line
   box on its title and the person's lines. */
.vm-ac-band { border-top: 0; border-bottom: 0; }
.vm-ac-band .vm-or-title { margin-top: 4px; line-height: 1.5; }
.vm-ac-band .vm-or-title:focus { outline: none; }
.vm-ac-band .vm-or-title:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vm-ac-band > .vm-ac-person { position: relative; margin-top: 14px; }
.vm-ac-me { display: flex; align-items: center; gap: 12px; }
.vm-ac-chip {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--vph-teal-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
}
.vm-ac-chip i { font-size: 17px; }
.vm-ac-me .vm-ac-chip { background: #fff; }
.vm-ac-idmain { flex: 1; min-width: 0; }
.vm-ac-name {
    font-family: var(--vph-font-display);
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
/* R5's twin for the name: said plainly, not bold. */
.vm-ac-name.is-none { font-weight: 500; }
.vm-ac-num { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vm-ac-me-cap {
    margin-bottom: 2px;
    font-size: 11.5px;
    font-weight: 600;
    color: #bfe6dc;
    line-height: 1.5;
}
.vm-ac-me-cap:focus { outline: none; }
.vm-ac-me-cap:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vm-ac-me .vm-ac-name { font-size: 20px; color: #fff; line-height: 1.5; }
.vm-ac-me .vm-ac-name.is-none { color: #d3ece6; }
.vm-ac-me .vm-ac-num { font-size: 14px; color: #d3ece6; line-height: 1.5; }
.vm-ac-me .vm-ac-say { margin-top: 2px; font-size: 12.5px; color: #d3ece6; line-height: 1.4; text-wrap: pretty; }
/* The round glass pen -> the edit dialog. */
.vm-ac-pen {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ac-pen i { font-size: 13px; }
.vm-ac-pen:active { background: rgba(255, 255, 255, .28); }
.vm-ac-pen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* -- 46e's owner card. Drawn only inside the removal sheet since the
   redesign (the business card replaced 20c's dark door on the page):
   the dark door, its tile, the name, the sentence and one white pill. */
.vm-ac-counter {
    background: var(--vph-primary-solid);
    border-radius: 18px;
    padding: 17px 16px;
    box-shadow: var(--vph-card-shadow);
}
.vm-ac-counter-top { display: flex; align-items: flex-start; gap: 12px; }
.vm-ac-counter-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ac-counter-tile i { color: #fff; font-size: 17px; }
.vm-ac-counter-main { flex: 1; min-width: 0; }
.vm-ac-counter-name {
    font-family: var(--vph-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}
.vm-ac-counter-sub {
    font-size: 12px;
    color: #d3ece6;
    line-height: 1.45;
    margin-top: 4px;
    text-wrap: pretty;
}
.vm-ac-counter-go {
    margin-top: 14px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-ac-counter-go:hover { color: var(--vph-primary-dark); }
.vm-ac-counter-go i { font-size: 11px; }

/* -- 3a: the business card (lifted, radius 20) ---------------------- */
.vm-ac-bc {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--vph-card-shadow);
    overflow: hidden;
}
.vm-ac-bc-head { padding: 18px 16px 0; display: flex; align-items: center; gap: 14px; }
.vm-ac-bc-tile {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ac-bc-tile i { font-size: 18px; }
.vm-ac-bc-main { flex: 1; min-width: 0; }
.vm-ac-bc-name {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.5px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
/* "● Open now · Pharmacy, Douala". Closed: the words in slate, no dot. */
.vm-ac-bc-sub {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    font-size: 13px;
    color: var(--vph-ink-4);
    line-height: 1.5;
}
.vm-ac-bc-open { display: inline-flex; align-items: center; gap: 6px; }
.vm-ac-bc-open.is-open { color: var(--vph-primary-dark); font-weight: 700; }
.vm-ac-bc-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a085; flex-shrink: 0; }
.vm-ac-bc-queue { padding: 16px 16px 0; }
.vm-ac-bc-cap { margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-ac-bc-act { display: flex; flex-direction: column; gap: 12px; }
/* The count strip (R5): three equal cells, each a door; a ledger, so 0
   is printed. Cells 2 and 3 carry the inset hairline. */
.vm-ac-strip {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: #f4fbf9;
    border-radius: 14px;
}
.vm-ac-strip-cell {
    min-width: 0;
    min-height: 44px;
    padding: 12px 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--vph-ink);
    text-decoration: none;
}
.vm-ac-strip-cell + .vm-ac-strip-cell { box-shadow: inset 1px 0 0 #d3e9e3; }
.vm-ac-strip-cell:hover,
.vm-ac-strip-cell:visited { color: var(--vph-ink); }
.vm-ac-strip-cell:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: -2px; border-radius: 14px; }
.vm-ac-strip-n {
    font-family: var(--vph-font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1;
}
.vm-ac-strip-l {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
    line-height: 1.3;
    white-space: nowrap;
}
@media (max-width: 359px) {
    .vm-ac-strip-cell { padding: 12px 9px 11px; }
    .vm-ac-strip-l { white-space: normal; }
}
.vm-ac-bc-rows { margin-top: 12px; border-top: 1px solid var(--vph-hairline); padding: 4px 4px 6px; }
.vm-ac-bc-rows .vm-ac-row { min-height: 60px; }
.vm-ac-bc-rows .vm-ac-row + .vm-ac-row { border-top: 1px solid var(--vph-hairline); }

/* The one solid act: a pill, white on the solid teal (R-AA). */
.vm-ac-solid {
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 109, 92, .26);
    text-decoration: none;
}
.vm-ac-solid i { font-size: 12px; }
.vm-ac-solid:hover,
.vm-ac-solid:visited { color: #fff; }
.vm-ac-solid:active { background: #0c5b4c; }
.vm-ac-solid:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-bc-go { width: 100%; }

/* The line button (the edit dialog's door on the compact card and the
   pane): 44 tall, bordered, never solid. */
.vm-ac-line {
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-ac-line i { font-size: 11px; }
.vm-ac-line--full { width: 100%; }
.vm-ac-line:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }

/* -- A read that failed, in the card's place: one line, one pill. --- */
.vm-ac-person[data-state="fail"] {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
}
.vm-ac-fail { padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.vm-ac-fail-t { font-size: 13.5px; font-weight: 700; color: var(--vph-ink); }
.vm-ac-fail-t:focus { outline: none; }
.vm-ac-fail-t:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-fail-go {
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--vph-sep);
    background: #fff;
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
}

/* -- Logged out (R1): one bordered group, one way in ---------------- */
.vm-ac-out {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 16px 14px 14px;
}
.vm-ac-out-t {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
}
.vm-ac-out-s {
    font-size: 12.5px;
    color: var(--vph-ink-3);
    line-height: 1.5;
    margin-top: 4px;
    text-wrap: pretty;
}
.vm-ac-out-go {
    margin-top: 14px;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
}
.vm-ac-out-go:hover { color: #fff; }

/* -- The quiet groups and their rows (FACTS' ROW): white, bordered,
   radius 18, rows 64 split by the hairline. A door's tile is mint and
   its chevron teal; a quiet row (the ways out) greys both. A count in a
   row's second line is bold teal (.is-hot), never a badge. ---------- */
.vm-ac-group {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-ac-group > .vm-ac-row + .vm-ac-row { border-top: 1px solid var(--vph-hairline); }
.vm-ac-row {
    width: 100%;
    min-height: 64px;
    background: #fff;
    padding: 12px 16px 12px 14px;
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    color: var(--vph-ink);
    text-decoration: none;
}
.vm-ac-row:hover,
.vm-ac-row:visited { color: var(--vph-ink); }
/* The frame's style-active. A disabled row never matches :active. */
.vm-ac-row:active { background: var(--vph-canvas); }
.vm-ac-row:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: -2px; }
.vm-ac-counter-go:focus-visible,
.vm-ac-out-go:focus-visible,
.vm-ac-fail-go:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-row-tile {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ac-row-tile i { font-size: 14px; }
.vm-ac-row.is-door .vm-ac-row-tile { background: var(--vph-teal-tint); color: var(--vph-primary-dark); }
.vm-ac-row-main { flex: 1; min-width: 0; }
.vm-ac-row-t { display: block; font-size: 15px; font-weight: 700; color: var(--vph-ink); line-height: 1.3; }
.vm-ac-row-s { display: block; margin-top: 2px; font-size: 13px; color: var(--vph-ink-4); line-height: 1.4; }
.vm-ac-row-s.is-hot { font-weight: 700; color: var(--vph-primary-dark); }
.vm-ac-row-chev { font-size: 13px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-ac-row.is-door .vm-ac-row-chev { color: var(--vph-primary-dark); }
/* "Add a laboratory or clinic": a quiet + on the phone; from 901 the
   kind's glyph on a mint door (20-account.css). */
.vm-ac-also .vm-ac-also-dt { display: none; }

/* -- 3b's way in for professionals: one teal door in the band's
   material (#d3ece6 on #0c5b4c is 5.9:1; #8ff08b only on the chevron). */
.vm-ac-prodoor {
    min-height: 76px;
    padding: 16px;
    border-radius: 18px;
    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);
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    text-decoration: none;
}
.vm-ac-prodoor:hover,
.vm-ac-prodoor:visited { color: #fff; }
.vm-ac-prodoor:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-prodoor-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ac-prodoor-tile i { font-size: 16px; }
.vm-ac-prodoor-t { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.vm-ac-prodoor-s { display: block; margin-top: 2px; font-size: 13px; color: #d3ece6; line-height: 1.5; }
.vm-ac-prodoor-chev { font-size: 13px; color: #8ff08b; flex-shrink: 0; }

/* -- #pro, For professionals: on the phone its own view of the page,
   the desktop pane's content stacked (no phone frame was drawn). ---- */
.vm-ac-pro { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vm-ac-pro-k {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vph-primary-dark);
}
.vm-ac-pro-k i { font-size: 11px; }
.vm-ac-pro-h {
    margin-top: 8px;
    font-family: var(--vph-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.6px;
    line-height: 1.2;
    text-wrap: balance;
}
.vm-ac-pro-h:focus { outline: none; }
.vm-ac-pro-h:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-pro-line { margin-top: 8px; font-size: 14.5px; color: var(--vph-ink-3); line-height: 1.55; text-wrap: pretty; }
.vm-ac-pro-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.vm-ac-pro-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}
.vm-ac-pro-tile {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--vph-primary-solid);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-ac-pro-tile i { font-size: 18px; }
.vm-ac-pro-t {
    font-family: var(--vph-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ac-pro-who { margin-top: 4px; font-size: 13.5px; color: var(--vph-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-ac-pro-tint {
    background: #f4fbf9;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-ac-pro-tint-k { font-size: 12px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-ac-pro-tint-r { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-ac-pro-tint-r i { width: 16px; margin-top: 3px; text-align: center; font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-ac-pro-go { width: 100%; margin-top: auto; }
.vm-ac-pro-need {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}
.vm-ac-pro-need-k { font-size: 13.5px; font-weight: 700; color: var(--vph-ink); }
.vm-ac-pro-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vm-ac-pro-chips li {
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
}

/* The pro view's back control "Account" stands in the band's 44 row
   (Slice N's .vm-back--band, unchanged). */

/* .vm-ac-tail clears the fixed bottom bar: Slice N's shared chrome (30b). */

/* -- The two sheets: 20b's column on §8's chrome ------------------- */
.vm-sheet-backdrop--ac { background: rgba(15, 23, 42, .55); }
.vm-sheet--ac {
    padding: 10px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    /* Two named buttons end each sheet, and neither may be the thing you
       have to discover by scrolling: the cap is the viewport less a strip
       of the page (04b's rule). */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}
/* The strip above the title (the padding, this bar and the gap under it,
   28px, full width) is the handle's tap-to-close surface (account-page.js):
   no 44px button is laid over the title, where a stray tap would drop
   what she typed. */
.vm-sheet--ac .vm-sheet-grab { margin: 0 auto; flex-shrink: 0; }
.vm-ac-shead { padding: 0 2px; }
.vm-ac-stitle {
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
}
.vm-ac-stitle:focus { outline: none; }
.vm-ac-stitle:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-ssub {
    font-size: 12.5px;
    color: var(--vph-ink-3);
    margin-top: 4px;
    line-height: 1.5;
    text-wrap: pretty;
}

/* 20b: what stays, on the tint, BEFORE what goes. */
.vm-ac-stays {
    background: var(--vph-tint);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
}
.vm-ac-stays > i { font-size: 15px; color: var(--vph-primary-dark); margin-top: 2px; flex-shrink: 0; }
.vm-ac-stays-main { flex: 1; min-width: 0; }
.vm-ac-stays-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-ac-stays-v {
    font-size: 14px;
    font-weight: 600;
    color: var(--vph-ink);
    margin-top: 3px;
    line-height: 1.4;
    text-wrap: pretty;
}
/* What goes: ONE plain list in a grey inset — not a bordered group of
   bold rows, which is this file's shape for rows you can tap. */
.vm-ac-forgets { display: flex; flex-direction: column; gap: 8px; }
.vm-ac-forgets-k { font-size: 12px; font-weight: 700; color: var(--vph-ink-3); padding: 0 2px; }
.vm-ac-list {
    list-style: none;
    margin: 0;
    background: var(--vph-canvas);
    border-radius: 14px;
    padding: 2px 14px;
}
.vm-ac-list li { padding: 10px 0; display: flex; align-items: center; gap: 11px; }
.vm-ac-list li + li { border-top: 1px solid var(--vph-grey); }
.vm-ac-list i {
    font-size: 12px;
    color: var(--vph-ink-4);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.vm-ac-list span { font-size: 12.5px; font-weight: 500; color: var(--vph-ink-2); line-height: 1.35; }
.vm-ac-foot {
    padding: 0 2px;
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Both sheets end the same way: one 52px commit, one 44px Cancel. */
.vm-ac-acts { display: flex; flex-direction: column; gap: 4px; }
.vm-ac-commit {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
/* Saving: inert, the label unchanged — no word that the network might
   make a liar of. */
.vm-ac-commit[aria-disabled="true"] { opacity: .55; box-shadow: none; cursor: default; }
.vm-ac-cancel {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--vph-ink-3);
    font-size: 14px;
    font-weight: 700;
}
.vm-ac-commit:focus-visible,
.vm-ac-cancel:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }

/* The edit sheet: 05's two fields, labelled (never a placeholder). */
.vm-ac-form { display: flex; flex-direction: column; gap: 14px; }
.vm-ac-field { display: block; }
.vm-ac-flabel {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--vph-ink-3);
    padding: 0 2px;
    margin-bottom: 5px;
}
/* 16px so a phone does not zoom the page on focus (13's inputs). */
.vm-ac-input {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: 1.5px solid var(--vph-sep);
    background: #fff;
    padding: 0 13px;
    font-size: 16px;
    color: var(--vph-ink);
}
.vm-ac-input:focus { outline: 2px solid var(--vph-primary); outline-offset: 1px; border-color: var(--vph-primary-dark); }
.vm-ac-input[aria-invalid="true"] { border-color: var(--vph-ink-2); }
/* What is wrong, said once she has pressed Save: in ink, never the
   emergency's red and never prescription blue. */
.vm-ac-err {
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-2);
    line-height: 1.4;
    padding: 0 2px;
    margin-top: 6px;
}
.vm-ac-fault {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
    padding: 0 2px;
}

/* ----------------------------------------------------------------
   25. SCREEN 25 — MY SHELF, THE COUNTER'S STOCK MANAGER (.vm-sh-*)
   25a the shelf · 25b which box · 25c the row (new / existing) ·
   25e the states.
   Handoff: docs/design/pharmacy/screens/25/{README.md,frame.html} (the
   owner's drop, 2026-09-26; the FRAME wins over the README) and the
   director's brief R1-R15. Counter-side rules: §19's, from
   screens/09/drop/README.md.

   What this section holds to:
     - COUNTER MATERIAL: 25a wears 09a's band (the radial light over
       the 180deg #12775f→#0c5b4c fall, the two hairlines) and the
       three-slot bar (§19's .vm-q-nav). 25b and 25c are pushed
       screens: 16's 160deg header with its 44px glass exit.
     - SHADOW MEANS ACTIONABLE: the headline card, 25b's answer card
       and 25c's row card are lifted; a fact she cannot act on (the
       empty shelf, a failed read, a refusal, the take-off confirm) is
       a white card with a 1px #e2e8f0 edge on no ground.
     - WHITE TEXT NEVER SITS ON #16a085 (§7.16 R-AA): every solid pill
       is --vph-primary-solid; #16a085 stays a mark — a focused field's
       edge, the switch's track.
     - "Take it off" is BORDERED, never red; "Not today" is #475569,
       never a colour that alarms. No yellow, no orange, no
       prescription blue (the badge on the bar is §19's own).
     - The frame declares body{line-height:1.5} and its <button>s keep
       the UA's `normal`, so every whole-row button here declares
       `line-height: normal` and its spans their own (22's rule).
     - Every control is 44px or more; every figure tabular.
   ---------------------------------------------------------------- */
.vm-sh-app { line-height: 1.5; }
/* The frame resets every padding; a control here that sets none of its
   own must not keep the UA's 1px 6px (it narrows a 52px switch to 40). */
.vm-sh-qx, .vm-sh-toggle, .vm-sh-add, .vm-sh-retry, .vm-sh-tintpill,
.vm-sh-off, .vm-sh-takeoff, .vm-sh-keep { padding: 0; }
.vm-sh-view { flex: 1 0 auto; display: flex; flex-direction: column; }
.vm-sh-app a:focus-visible,
.vm-sh-app button:focus-visible { outline: 2px solid var(--vph-primary-dark); outline-offset: 2px; }
.vm-sh-title:focus,
.vm-sh-ttl:focus,
.vm-sh-confirm-t:focus,
.vm-sh-state-say:focus { outline: none; }

/* -- 25a: the band ----------------------------------------------- */
.vm-sh-band {
    flex-shrink: 0;
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background:
        radial-gradient(118% 88% at 10% 0%, rgba(143, 240, 139, .15) 0%, rgba(15, 109, 92, 0) 56%),
        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-sh-id { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.vm-sh-shop {
    font-family: var(--vph-font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-sh-area { font-size: 11.5px; color: var(--vph-grey); margin-top: 2px; }
.vm-sh-title {
    font-family: var(--vph-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
}

/* -- The body (all three views) --------------------------------- */
.vm-sh-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 14px 22px;
}
.vm-sh-body > .vm-loading { padding: 4px 2px; }
.vm-sh-shelf { display: flex; flex-direction: column; gap: 16px; }
.vm-sh-groups { display: flex; flex-direction: column; gap: 16px; }

/* -- 25a: the door into "Your counter" (screen 29, R15) ----------
   The README's door row: 64px, a 38px #e3f4f0 tile, a teal chevron,
   one bordered 18px container. */
.vm-sh-counter {
    min-height: 64px;
    padding: 10px 12px 10px 14px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--vph-ink);
    line-height: normal;
}
.vm-sh-counter:hover { color: var(--vph-ink); }
.vm-sh-counter:active { background: var(--vph-canvas); }
.vm-sh-counter-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sh-counter-tile i { font-size: 14px; }
.vm-sh-counter-main { flex: 1; min-width: 0; }
.vm-sh-counter-t { display: block; font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-sh-counter-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.4; }
.vm-sh-counter-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }

/* -- 25a: the headline card -------------------------------------- */
.vm-sh-lead {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    overflow: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-sh-lead-in { background: var(--vph-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-sh-lead-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sh-lead-h {
    margin-top: 4px;
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -1px;
    line-height: 1.1;
}
.vm-sh-lead-sub { font-size: 12.5px; color: var(--vph-ink-2); margin-top: 3px; }
.vm-sh-lead-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
/* The white inner row: a fact the app asserts, inside the tint. */
.vm-sh-lead-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-sh-lead-row > i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    text-align: center;
}
.vm-sh-lead-row > span { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
/* The one door: 52px, solid, lifted. */
.vm-sh-add {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-sh-add i { font-size: 13px; }
.vm-sh-add--state { margin-top: 8px; }
/* My shop's old destination, now a fill (R1). */
.vm-sh-shopdoor {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-sh-shopdoor:hover { color: var(--vph-primary-dark); }

/* -- 25a: "Find on your shelf" (08's and 12a's idiom: a field, not a
   door) ---------------------------------------------------------- */
.vm-sh-find {
    height: 52px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-sh-find:focus-within { border-color: var(--vph-primary); }
.vm-sh-find > i { font-size: 14px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-sh-findin {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 14.5px;
    color: var(--vph-ink);
}
.vm-sh-findin::placeholder { color: var(--vph-ink-4); opacity: 1; }

/* -- 25a: the groups --------------------------------------------- */
.vm-sh-group {
    background: var(--vph-grey-2);
    border-radius: 18px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-sh-ghead { display: flex; align-items: baseline; gap: 8px; padding: 8px 8px 4px; font-size: inherit; font-weight: 400; }
.vm-sh-gname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--vph-ink); overflow-wrap: anywhere; }
.vm-sh-gcount { font-size: 12px; font-weight: 600; color: var(--vph-ink-3); }
/* A row is ONE control: a door to 25c. Never a second switch on it. */
.vm-sh-row {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    line-height: normal;
    color: var(--vph-ink);
}
.vm-sh-row:active { background: var(--vph-canvas); }
.vm-sh-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sh-tile i { font-size: 14px; }
.vm-sh-tile--grey { background: var(--vph-grey-2); color: var(--vph-ink-3); }
.vm-sh-tile--grey i { font-size: 13px; }
.vm-sh-main { flex: 1; min-width: 0; }
/* A dose is never truncated: the name wraps. */
.vm-sh-name {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vm-sh-sub { display: block; font-size: 12px; color: var(--vph-ink-4); margin-top: 2px; line-height: 1.35; }
.vm-sh-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.vm-sh-price { display: flex; align-items: baseline; gap: 3px; justify-content: flex-end; }
.vm-sh-fig { font-family: var(--vph-font-display); font-size: 15px; font-weight: 700; color: var(--vph-ink); }
.vm-sh-cur { font-size: 9.5px; font-weight: 600; color: var(--vph-ink-4); }
.vm-sh-st { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); white-space: nowrap; }
.vm-sh-st--off { color: var(--vph-ink-3); }
/* Not today dims the name and the price, never the tile: the tint is
   identity, not status. */
.vm-sh-row.is-off .vm-sh-name,
.vm-sh-row.is-off .vm-sh-fig { color: var(--vph-ink-3); }
.vm-sh-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-sh-chev--grey { color: var(--vph-ink-4); }
/* "All 18 medicines": the group's own door, 44px, no fill. */
.vm-sh-all {
    width: 100%;
    height: 44px;
    background: transparent;
    border-radius: 12px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    line-height: normal;
    color: var(--vph-primary-dark);
}
.vm-sh-all span { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.vm-sh-all i { font-size: 13px; }
/* A collapsed group: a 52px white row with its count. */
.vm-sh-fold {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 0 12px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    line-height: normal;
}
.vm-sh-fold i { font-size: 13px; color: var(--vph-primary-dark); }

/* -- The states: a fact on no ground (25e) ----------------------- */
.vm-sh-state {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-sh-state-h {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.3;
}
.vm-sh-state-t { font-size: 13.5px; font-weight: 700; color: var(--vph-ink); line-height: 1.35; overflow-wrap: anywhere; }
.vm-sh-state-p { font-size: 12.5px; color: var(--vph-ink-2); line-height: 1.5; }
.vm-sh-state-say { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.5; }
.vm-sh-retry {
    margin-top: 6px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}
.vm-sh-tintpill {
    margin-top: 6px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-sh-tintpill:hover { color: var(--vph-primary-dark); }
.vm-sh-tintpill i { font-size: 12px; }

/* -- 25b / 25c: the pushed header (16's material, glass exit) ---- */
.vm-sh-top {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px 14px 16px;
    background:
        radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
        linear-gradient(160deg, #12775f 0%, #0c5b4c 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-sh-toprow { display: flex; align-items: center; }
/* .vm-sh-exit is the hub's one back control (.vm-back, Slice N 30b), white on the band
   (.vm-back--band): Slice N keeps glass for photographs only. */
.vm-sh-ttl {
    margin-top: 12px;
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-sh-tsub { font-size: 12px; color: var(--vph-grey); margin-top: 3px; overflow-wrap: anywhere; }

/* -- 25b: the name on the box ------------------------------------ */
.vm-sh-q { display: flex; flex-direction: column; gap: 6px; }
.vm-sh-qlabel { font-size: 12px; font-weight: 600; color: var(--vph-ink-2); padding: 0 2px; }
.vm-sh-qbox {
    height: 52px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-sh-qbox:focus-within { border-color: var(--vph-primary); }
.vm-sh-qin {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--vph-ink);
    caret-color: var(--vph-primary);
}
.vm-sh-qx {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sh-qx i { font-size: 14px; }
.vm-sh-hits { display: flex; flex-direction: column; gap: 16px; }
.vm-sh-hits:empty { display: none; }

/* -- 25b: the answer card ---------------------------------------- */
.vm-sh-pick { background: #fff; border-radius: 18px; box-shadow: var(--vph-card-shadow); overflow: hidden; }
.vm-sh-pick-head { padding: 14px 14px 0; }
.vm-sh-pick-h {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
}
.vm-sh-pick-in { margin-top: 10px; background: var(--vph-tint); border-radius: 14px; padding: 11px 12px 12px; }
.vm-sh-pick-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sh-pick-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.vm-sh-pick-list { margin-top: 12px; }
.vm-sh-hit {
    width: 100%;
    background: transparent;
    border-top: 1px solid var(--vph-hairline);
    padding: 12px 12px 12px 14px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    line-height: normal;
    color: var(--vph-ink);
}
.vm-sh-hit:active { background: var(--vph-canvas); }
.vm-sh-hit:hover { color: var(--vph-ink); }
.vm-sh-hit--none { min-height: 60px; }
.vm-sh-hname {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-sh-hsub { display: block; font-size: 12.5px; color: var(--vph-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-sh-dot { color: var(--vph-sep); }
.vm-sh-hrx { display: block; font-size: 12px; font-weight: 600; color: var(--vph-ink); margin-top: 3px; }
.vm-sh-hhave { display: block; font-size: 12px; font-weight: 600; color: var(--vph-primary-dark); margin-top: 3px; }
.vm-sh-nname { display: block; font-size: 14px; font-weight: 700; color: var(--vph-ink); line-height: 1.3; }
.vm-sh-nsub { display: block; font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; line-height: 1.4; }

/* -- 25c: the row card (the price field IS the headline) --------- */
.vm-sh-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    overflow: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.vm-sh-priceblk { background: var(--vph-tint); border-radius: 14px; padding: 12px; }
.vm-sh-pricek { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
.vm-sh-pricelabel { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sh-now { font-size: 12px; color: var(--vph-ink-3); white-space: nowrap; }
.vm-sh-pricebox {
    margin-top: 8px;
    height: 60px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.vm-sh-pricebox:focus-within { border-color: var(--vph-primary); }
.vm-sh-pricein {
    flex: 1;
    min-width: 0;
    height: 56px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -1px;
    caret-color: var(--vph-primary);
}
.vm-sh-pricecur { font-size: 13px; font-weight: 600; color: var(--vph-ink-4); flex-shrink: 0; }
/* What is wrong, in ink: the edge and the line, never red. */
.vm-sh-pricein[aria-invalid="true"] { color: var(--vph-ink); }
.vm-sh-pricebox:has(.vm-sh-pricein[aria-invalid="true"]) { border-color: var(--vph-ink); }
.vm-sh-err { margin-top: 8px; padding: 0 2px; font-size: 12px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-sh-says { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.vm-sh-says:empty { display: none; }

/* "In stock today": a 48x28 track in a 52x44 hit area. */
.vm-sh-togsec { border-top: 1px solid var(--vph-hairline); padding-top: 4px; }
.vm-sh-togrow { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.vm-sh-togmain { flex: 1; min-width: 0; }
.vm-sh-togt { display: block; font-size: 14px; font-weight: 700; color: var(--vph-ink); }
.vm-sh-togs { display: block; font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-sh-toggle {
    width: 52px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sh-track {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: var(--vph-sep);
    position: relative;
    display: block;
    transition: background-color .15s ease;
}
.vm-sh-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: left .15s ease;
}
.vm-sh-toggle[aria-pressed="true"] .vm-sh-track { background: var(--vph-primary); }
.vm-sh-toggle[aria-pressed="true"] .vm-sh-knob { left: 23px; }

/* "Only a few left": 150px, 48px high; 0 is Not today. */
.vm-sh-fewsec { border-top: 1px solid var(--vph-hairline); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.vm-sh-fewt { font-size: 14px; font-weight: 700; color: var(--vph-ink); }
.vm-sh-fewin {
    height: 48px;
    width: 150px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vph-ink);
    outline: none;
    margin: 0;
}
.vm-sh-fewin::placeholder { color: var(--vph-ink-4); opacity: 1; }
.vm-sh-fewin:focus { border-color: var(--vph-primary); }
.vm-sh-fews { font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }

/* The quiet act, its inline confirm (25e) and the refusal. */
.vm-sh-offwrap { display: flex; flex-direction: column; }
.vm-sh-off {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--vph-grey);
    color: var(--vph-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}
.vm-sh-confirm {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-sh-confirm-t {
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vm-sh-confirm-p { font-size: 12.5px; color: var(--vph-ink-2); line-height: 1.5; }
.vm-sh-confirm-note {
    background: var(--vph-canvas);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    color: var(--vph-ink-2);
    line-height: 1.45;
}
.vm-sh-confirm-note strong { color: var(--vph-ink); font-weight: 600; }
.vm-sh-confirm-fault { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-sh-confirm-acts { display: flex; gap: 8px; margin-top: 2px; }
.vm-sh-takeoff,
.vm-sh-keep {
    flex: 1;
    height: 44px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}
.vm-sh-takeoff { background: #fff; border: 1px solid var(--vph-sep); color: var(--vph-ink); }
.vm-sh-takeoff:disabled { opacity: .7; cursor: progress; }
.vm-sh-keep { background: var(--vph-tint); color: var(--vph-primary-dark); }

/* -- 25c: the foot bar (the commit names the figure) ------------- */
.vm-sh-foot {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.vm-sh-fault { padding: 0 2px 10px; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-sh-commit {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 18px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    overflow-wrap: anywhere;
}
.vm-sh-commit:disabled { opacity: .7; cursor: progress; }

/* ----------------------------------------------------------------
   26. SCREEN 27 — OPEN YOUR PHARMACY (.vm-oyp-*)
   27a the form · 27b opened · 27c the states.
   Handoff: docs/design/pharmacy/screens/27/{README.md,frame.html} (the
   owner's drop, 2026-09-26; the FRAME wins) and the director's brief
   R8-R10. The EXACT TWIN of the exams side's screen 23 (its §15 in
   css/exams/app.css): the same band, headline card, field material, pin
   row and commit bar, ported value for value onto this hub's tokens —
   never linked across (self-contained hubs).

   What this section holds to:
     - 27a: 16's pushed header with its glass exit "Home"; white fields
       with a 1.5px #cbd5e1 edge; no bar, no basket; the commit bar at
       the foot. 27b: 09a's band material and the three-slot bar with
       My shelf lit (R1, no Queue badge).
     - WHAT IS WRONG IS SAID IN INK (27c): the refused control takes a
       #0f172a edge and the line under it is #0f172a 12/600. Never red,
       never prescription blue.
     - WHITE TEXT NEVER SITS ON #16a085 (R-AA): the commit, 27b's pill
       and 27c's "Open my shelf" are --vph-primary-solid. #16a085 is a
       mark: a focused edge, a switch's track.
     - 27b's three rows are doors (screen 29's R15 made the hours and
       photograph rows doors into "Your counter"): the teal tile, the
       chevron, the pressed state. No progress bar, no "2 of 4", no
       duration, no badge anywhere.
     - Every control is 44px or more; the phone, the licence and every
       figure are tabular.
   ---------------------------------------------------------------- */
.vm-oyp-app { line-height: 1.5; }
/* The frame resets every padding (see §25). */
.vm-oyp-toggle, .vm-oyp-retry { padding: 0; }
.vm-oyp-view { flex: 1 0 auto; display: flex; flex-direction: column; }
.vm-oyp-app a:focus-visible,
.vm-oyp-app button:focus-visible { outline: 2px solid var(--vph-primary-dark); outline-offset: 2px; }
.vm-oyp-already-t:focus,
.vm-oyp-state:focus { outline: none; }

/* -- 27a: the header (16's material, glass exit) ------------------ */
.vm-oyp-top {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px 14px 16px;
    background:
        radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
        linear-gradient(160deg, #12775f 0%, #0c5b4c 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-oyp-toprow { display: flex; align-items: center; }
/* .vm-oyp-exit is the hub's one back control (.vm-back, Slice N 30b), white on the band
   (.vm-back--band): Slice N keeps glass for photographs only. */
.vm-oyp-title {
    margin-top: 12px;
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-oyp-who { font-size: 12px; color: var(--vph-grey); margin-top: 3px; overflow-wrap: anywhere; }

/* -- 27a: the body ------------------------------------------------ */
.vm-oyp-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 14px 22px;
}
.vm-oyp-body > .vm-loading { padding: 4px 2px; }
.vm-oyp-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }

/* A fact on no ground (27c): the already-open state, a failed read,
   the restored draft, 27b's listed-as line. */
.vm-oyp-note {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-oyp-already-t {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vm-oyp-note-p { font-size: 12.5px; color: var(--vph-ink-2); line-height: 1.5; }
.vm-oyp-note-t { font-size: 13.5px; font-weight: 700; color: var(--vph-ink); line-height: 1.35; }
.vm-oyp-go {
    margin-top: 4px;
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-oyp-go:hover { color: #fff; }
.vm-oyp-retry {
    margin-top: 6px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}
/* "We kept what you typed last time." + Start again. */
.vm-oyp-draft { flex-direction: row; align-items: center; gap: 10px; }
.vm-oyp-draft-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-oyp-again {
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}

/* -- 27a: the cards ----------------------------------------------- */
.vm-oyp-card { background: #fff; border-radius: 18px; box-shadow: var(--vph-card-shadow); }
.vm-oyp-lead { padding: 14px; }
.vm-oyp-lead-in { background: var(--vph-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-oyp-lead-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-oyp-lead-h {
    font-family: var(--vph-font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.45px;
    line-height: 1.22;
    margin-top: 4px;
    text-wrap: pretty;
}
.vm-oyp-lead-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.vm-oyp-lead-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-oyp-lead-row > i { font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; margin-top: 3px; }
.vm-oyp-lead-row > span { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }

.vm-oyp-sec { display: flex; flex-direction: column; gap: 10px; }
.vm-oyp-h {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    padding: 0 2px;
}
.vm-oyp-fields { padding: 14px; display: flex; flex-direction: column; gap: 16px; }
.vm-oyp-where { overflow: hidden; }
.vm-oyp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vm-oyp-label { display: block; font-size: 12px; font-weight: 600; color: var(--vph-ink-2); }
.vm-oyp-help { font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-oyp-nw { white-space: nowrap; }

/* -- 27a: the fields ---------------------------------------------- */
.vm-oyp-input,
.vm-oyp-textarea {
    display: block;
    width: 100%;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    font-weight: 600;
    color: var(--vph-ink);
    outline: none;
    margin: 0;
}
.vm-oyp-input { height: 48px; padding: 0 14px; font-size: 15px; }
.vm-oyp-input--addr { padding: 0 12px; font-size: 14.5px; }
.vm-oyp-input--phone { letter-spacing: .02em; }
.vm-oyp-input--licence { letter-spacing: .04em; }
.vm-oyp-input::placeholder { color: var(--vph-ink-4); font-weight: 500; opacity: 1; }
.vm-oyp-textarea {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    field-sizing: content;
}
.vm-oyp-input:focus,
.vm-oyp-textarea:focus { border-color: var(--vph-primary); }
.vm-oyp-input[aria-invalid="true"],
.vm-oyp-textarea[aria-invalid="true"] { border-color: var(--vph-ink); }
.vm-oyp-addr { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; }
/* A figure with its unit kept inside the field (FCFA, km). */
.vm-oyp-unit {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.vm-oyp-unit:focus-within { border-color: var(--vph-primary); }
/* Said once the commit is pressed; it outranks the focus it takes. */
.vm-oyp-unit[aria-invalid="true"] { border-color: var(--vph-ink); }
.vm-oyp-unit input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
}
.vm-oyp-unit span { font-size: 12px; font-weight: 600; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-oyp-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: -4px; }

/* What is wrong, said once the commit is pressed: in ink, never red. */
.vm-oyp-err { font-size: 12px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; padding: 0 2px; }
.vm-oyp-err--tuck { margin-top: -10px; }
.vm-oyp-err--pin { padding: 0 16px 12px; }

/* -- 27a: the pin row (23's) ---------------------------------------- */
.vm-oyp-pin {
    width: 100%;
    border-top: 1px solid var(--vph-hairline);
    padding: 10px 12px 10px 14px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: normal;
}
button.vm-oyp-pin:active { background: var(--vph-canvas); }
.vm-oyp-pin[aria-busy="true"] { cursor: progress; }
.vm-oyp-pin[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--vph-ink); }
.vm-oyp-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-oyp-tile i { font-size: 14px; }
.vm-oyp-tile--grey { background: var(--vph-grey-2); color: var(--vph-ink-3); }
.vm-oyp-pin-main { flex: 1; min-width: 0; }
.vm-oyp-pin-t { display: block; font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-oyp-pin-s { display: block; font-size: 12px; font-weight: 600; color: var(--vph-ink); margin-top: 2px; line-height: 1.4; }
.vm-oyp-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-oyp-pin-x {
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: normal;
}

/* -- 27a: how people get their products ---------------------------- */
.vm-oyp-mode { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.vm-oyp-mode-main { flex: 1; min-width: 0; }
.vm-oyp-mode-t { display: block; font-size: 14px; font-weight: 700; color: var(--vph-ink); }
.vm-oyp-mode-s { display: block; font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; }
.vm-oyp-mode-s--tight { line-height: 1.4; }
.vm-oyp-check { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; margin-right: 14px; }
.vm-oyp-togsec { border-top: 1px solid var(--vph-hairline); padding-top: 4px; }
.vm-oyp-toggle {
    width: 52px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-oyp-track {
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: var(--vph-sep);
    position: relative;
    display: block;
    transition: background-color .15s ease;
}
.vm-oyp-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: left .15s ease;
}
.vm-oyp-toggle[aria-pressed="true"] .vm-oyp-track { background: var(--vph-primary); }
.vm-oyp-toggle[aria-pressed="true"] .vm-oyp-knob { left: 23px; }
.vm-oyp-deliv { display: flex; flex-direction: column; gap: 16px; }

/* -- 27a: the commit bar ------------------------------------------- */
.vm-oyp-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
}
.vm-oyp-bar-cap { padding: 10px 14px 0; font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-oyp-fault { padding: 8px 14px 0; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-oyp-bar-in { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.vm-oyp-commit {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow-wrap: anywhere;
}
.vm-oyp-commit i { font-size: 13px; flex-shrink: 0; }
.vm-oyp-commit:disabled { opacity: .7; cursor: progress; }

/* -- 27b: opened (09a's band material) ----------------------------- */
.vm-oyp-band {
    flex-shrink: 0;
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background:
        radial-gradient(118% 88% at 10% 0%, rgba(143, 240, 139, .15) 0%, rgba(15, 109, 92, 0) 56%),
        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-oyp-id { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.vm-oyp-name {
    font-family: var(--vph-font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-oyp-area { font-size: 11.5px; color: var(--vph-grey); margin-top: 2px; }
.vm-oyp-stateblock { display: flex; flex-direction: column; gap: 5px; }
.vm-oyp-state {
    font-family: var(--vph-font-display);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.45px;
    line-height: 1.22;
    text-wrap: pretty;
}
.vm-oyp-state2 { font-size: 12.5px; color: var(--vph-grey); line-height: 1.45; }
.vm-oyp-state2 strong { font-weight: 600; color: #fff; }
.vm-oyp-lbody {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 14px 22px;
}
.vm-oyp-listed { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.5; overflow-wrap: anywhere; }
.vm-oyp-needs { background: #fff; border-radius: 18px; box-shadow: var(--vph-card-shadow); overflow: hidden; }
.vm-oyp-needs-head { padding: 14px 14px 4px; }
.vm-oyp-needs-h {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
}
.vm-oyp-needs-sub { font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; line-height: 1.45; }
.vm-oyp-needs-list { margin-top: 10px; }
/* A door is a whole-row link: the products row, and (screen 29's R15)
   the hours and photograph rows into "Your counter". */
.vm-oyp-row {
    width: 100%;
    border-top: 1px solid var(--vph-hairline);
    padding: 10px 12px 10px 14px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: normal;
}
a.vm-oyp-row:hover { color: var(--vph-ink); }
a.vm-oyp-row:active { background: var(--vph-canvas); }
.vm-oyp-row-main { flex: 1; min-width: 0; }
.vm-oyp-row-t { display: block; font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-oyp-row-s { display: block; font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-oyp-row-s strong { font-weight: 600; color: var(--vph-ink); }
.vm-oyp-add {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-oyp-add:hover { color: #fff; }
.vm-oyp-add i { font-size: 13px; }

/* ----------------------------------------------------------------
   27. SCREEN 26 — PHARMACIES, THE DIRECTORY (.vm-dir-*)
   Pixel truth: docs/design/pharmacy/screens/26/{README.md,frame.html}
   (the owner's sign-off, 2026-09-27: 26a the list, 26b no position,
   26c nothing delivers, 26d tonight). Contract: PHARMACY_HUB.md §5.2,
   §5.6, §7.15; the director's brief R1–R22.

   A NAV DESTINATION: 16's band (no back control) with the city and
   the screen's one basket door in its 44px row; then a 52px search,
   three chips that wrap (never a rail), and the groups: Open now on
   the teal tint, Closed now on grey, each a radius-18 block of white
   rows ending in a centred "Show N more" door. At night the duty card
   comes first, a lifted white card whose tint inset holds each duty
   counter's row and its Call pill; the pill is emergency red on the
   nearest ONLY (the one sanctioned red on this screen, as 01's).

   The frame draws every row, door and chip as a <button>, whose UA
   line-height is `normal`; the rows here are <a> doors and declare
   `line-height: normal` so they stand exactly as tall. Everything
   else inherits the frame's body 1.5, declared on the band and body.

   Nothing here is styled for a rating, a star, a badge of merit, a
   fee, a measure, a map or a person: a style rule is how they creep
   back. Every teal fill under white text is --vph-primary-solid
   (§7.16 R-AA); no yellow, no orange, no prescription blue.
   ---------------------------------------------------------------- */
.vm-dir-app a:focus-visible,
.vm-dir-app button:focus-visible { outline: 2px solid var(--vph-primary-dark); outline-offset: 2px; }

/* -- The band: 16's material, 01's eyebrow, the glass basket door -- */
.vm-dir-band {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px 14px 18px;
    background: linear-gradient(160deg, #12775f 0%, #0c5b4c 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
    line-height: 1.5;
}
.vm-dir-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%);
    pointer-events: none;
}
.vm-dir-orient {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
}
.vm-dir-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--vph-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vm-dir-eyebrow i { font-size: 11px; }
.vm-dir-bask {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-dir-bask:hover { color: #fff; }
.vm-dir-bask i { font-size: 15px; }
.vm-dir-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: var(--vph-primary-dark);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(3, 32, 26, .3);
}
.vm-dir-title {
    position: relative;
    margin-top: 6px;
    font-family: var(--vph-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
}
/* "11 open now" — counted from the cards, never typed. */
.vm-dir-count {
    position: relative;
    margin-top: 5px;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.vm-dir-sub {
    position: relative;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--vph-grey);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

/* -- The body. flex:1 0 auto — never flex:1 with overflow:hidden.
   It DIMS while a re-read is in flight and never empties. */
.vm-dir-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px 24px;
    line-height: 1.5;
    transition: opacity .15s ease;
}
.vm-dir-body.is-reading .vm-dir-list { opacity: .55; }
.vm-dir-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: opacity .15s ease; }
.vm-dir-list:empty { display: none; }

/* While the first read is in flight: no words, no duration. */
.vm-dir-skel { display: flex; flex-direction: column; gap: 14px; }
.vm-dir-skel span { display: block; background: var(--vph-grey-2); }
.vm-dir-skel-find { height: 52px; border-radius: 13px; }
.vm-dir-skel-chips { height: 44px; width: 62%; border-radius: 12px; }
.vm-dir-skel-group { height: 300px; border-radius: 18px; }
.vm-dir-skel-group--short { height: 150px; }

/* -- The search: a 52px field, name OR area ---------------------- */
.vm-dir-find {
    height: 52px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-dir-find:focus-within { border-color: var(--vph-primary); }
.vm-dir-find > i { font-size: 14px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-dir-q {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 14.5px;
    color: var(--vph-ink);
    caret-color: var(--vph-primary);
}
.vm-dir-q::placeholder { color: var(--vph-ink-4); opacity: 1; }
.vm-dir-qx {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-dir-qx i { font-size: 14px; }

/* -- The chips: 01's borderless fills; they wrap, never scroll ---- */
.vm-dir-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vm-dir-chip {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.vm-dir-chip i { font-size: 11px; }
.vm-dir-chip:not(.is-on) i { display: none; }
.vm-dir-chip.is-on { background: var(--vph-tint); color: var(--vph-primary-dark); }

/* -- One bordered line with a 44px tint pill: 26b's Allow, R14's
   "No pharmacy matches.", and the failed read -------------------- */
.vm-dir-line {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 14px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-dir-line > i { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-dir-line-t {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
}
.vm-dir-line-go {
    height: 44px;
    min-width: 44px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    flex-shrink: 0;
}
.vm-dir-line-go:disabled { cursor: progress; }

/* -- The groups: a radius-18 block of white rows ----------------- */
.vm-dir-group {
    background: var(--vph-grey-2);
    border-radius: 18px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.vm-dir-group--open { background: var(--vph-tint); }
.vm-dir-ghead {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 8px 4px;
    font-size: inherit;
    font-weight: 400;
}
.vm-dir-gname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--vph-ink-2); }
.vm-dir-group--open .vm-dir-gname { color: var(--vph-primary-dark); }
.vm-dir-gcount { font-size: 12px; font-weight: 600; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }

/* -- The row: one door to 08 ------------------------------------- */
.vm-dir-row {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: normal;
}
.vm-dir-row:hover { color: var(--vph-ink); }
.vm-dir-cover {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--vph-grey-2);
}
.vm-dir-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 08's no-photo ground: the counter's teal, the faint cross bleeding
   off the corner, and the letter of its own name. */
.vm-dir-cover--none {
    position: relative;
    background: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-dir-cover--none::before,
.vm-dir-cover--none::after {
    content: '';
    position: absolute;
    right: -12px;
    bottom: -12px;
    border-radius: 4px;
    background: rgba(143, 240, 139, .08);
}
.vm-dir-cover--none::before { width: 50px; height: 14px; }
.vm-dir-cover--none::after { width: 14px; height: 50px; }
.vm-dir-mono {
    position: relative;
    font-family: var(--vph-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--vph-accent);
}
.vm-dir-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-dir-name {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-dir-place { font-size: 12px; color: var(--vph-ink-4); font-variant-numeric: tabular-nums; }
.vm-dir-sep { color: var(--vph-sep); }
.vm-dir-status {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-dir-status.is-open { color: var(--vph-primary-dark); }
.vm-dir-tag {
    align-self: flex-start;
    margin-top: 3px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.vm-dir-tag i { font-size: 10px; }
.vm-dir-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }

/* The door at a group's foot: it expands its own group in place. */
.vm-dir-more {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vph-primary-dark);
}
.vm-dir-more i { font-size: 12px; }

/* -- 26d: the duty card ------------------------------------------ */
.vm-dir-duty {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-dir-duty-head { padding: 10px 8px 6px; }
.vm-dir-duty-t {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}
.vm-dir-duty-s { font-size: 12px; color: var(--vph-ink-3); margin-top: 2px; line-height: 1.45; }
.vm-dir-duty-inset {
    background: var(--vph-tint);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-dir-duty-item {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* The row sits bare inside its white item, with the pill as a sibling. */
.vm-dir-row--duty { min-height: 0; padding: 0; border-radius: 0; background: transparent; }
.vm-dir-call {
    width: 100%;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-dir-call:hover { color: var(--vph-ink); }
.vm-dir-call i { font-size: 12px; flex-shrink: 0; }
/* The nearest duty counter, and only when a position makes it so. */
.vm-dir-call.is-first { background: var(--vph-emergency-solid); border-color: var(--vph-emergency-solid); color: #fff; }
.vm-dir-call.is-first:hover { color: #fff; }

/* -- 26c: nobody delivers here, lifted --------------------------- */
.vm-dir-none {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-dir-none-t {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.3;
}
.vm-dir-none-inset { background: var(--vph-tint); border-radius: 14px; padding: 10px; }
.vm-dir-note {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-dir-note i { font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; margin-top: 3px; }
.vm-dir-note-t {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.vm-dir-all {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-dir-all i { font-size: 12px; }

/* .vm-dir-tail clears the fixed bottom bar: Slice N's shared chrome (30b). */

/* ===== slice A: fe-26 ===== */
/* ----------------------------------------------------------------
   26 REDRAWN (2026-10-04): the rows became cards.
   Pixel truth: docs/design/pharmacy/screens/26/redesign-2026-10/
   frame.html (26a-2 day, 26d-2 night; the frame wins over its README).
   Appended, never edited in place: the rules above still style the
   band's glass basket door, the chips, 26b's Allow line, 26c's lifted
   card, R14's empty line and the failed read; what they said about the
   band's type, the search, the groups and their doors is re-said here.
   Superseded and now unused above: .vm-dir-row, .vm-dir-cover*,
   .vm-dir-mono, .vm-dir-main, .vm-dir-status, .vm-dir-tag, .vm-dir-chev,
   .vm-dir-duty*, .vm-dir-call*, .vm-dir-skel-find.

   The band: "Pharmacies" is a 12.5px label; the headline is "11 open
   now" in Space Grotesk 30px with "of 14 in Douala" (at night "3 on duty
   · 1 open 24 h") on its line; the search is a white 52px pill at the
   band's foot. The groups are bare: a dot, a Space Grotesk 16px name,
   "Nearest first" or Closed now's count on the right, then the cards,
   then a grey 44px door, and "All 14 in Douala" after the last.

   The card: white, radius 18, the hub's card shadow (a shadow means it
   can be tapped). A 168px cover (the frame's, ~2.15:1 at 390) with the
   status pill on it; the cross tile lifted 28px onto the cover's lower
   edge beside the name; the rows she can use now; a hairline; the
   buttons. Every teal fill under white text is --vph-primary-solid
   (§7.16 R-AA) where the frame drew #16a085. The duty Call is emergency
   red on the nearest ONLY. No pulse: the cross's glow is the screen's one
   animation, staggered card to card, still under reduced motion.
   ---------------------------------------------------------------- */

/* -- The band ----------------------------------------------------- */
.vm-dir-band { padding: 10px 14px 16px; }
.vm-dir-title {
    margin-top: 10px;
    font-family: var(--vph-font-body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vph-grey);
    letter-spacing: .01em;
    line-height: 1.5;
}
.vm-dir-hl {
    position: relative;
    margin-top: 1px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.vm-dir-hl .vm-dir-count {
    margin-top: 0;
    font-size: 30px;
    letter-spacing: -.9px;
    line-height: 1.1;
}
.vm-dir-hl .vm-dir-sub {
    margin-top: 0;
    font-size: 13px;
    color: var(--vph-grey);
    line-height: 1.5;
}
.vm-dir-band .vm-dir-find {
    position: relative;
    margin-top: 16px;
    height: 52px;
    border: 0;
    border-radius: 14px;
    padding: 0 4px 0 16px;
    gap: 11px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px rgba(2, 26, 21, .3);
}
.vm-dir-band .vm-dir-find:focus-within { outline: 2px solid var(--vph-accent); outline-offset: 2px; }
.vm-dir-band .vm-dir-find > i { color: var(--vph-primary-dark); }

/* -- The list and its groups -------------------------------------- */
.vm-dir-list { gap: 24px; margin-top: 6px; }
.vm-dir-group,
.vm-dir-group--open {
    background: transparent;
    border-radius: 0;
    padding: 0;
    gap: 14px;
}
.vm-dir-ghead {
    align-items: center;
    gap: 9px;
    padding: 0 2px;
}
.vm-dir-gdot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--vph-primary);
    flex-shrink: 0;
}
.vm-dir-group--closed .vm-dir-gdot { background: var(--vph-sep); }
.vm-dir-gh {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.5;
}
.vm-dir-gh .vm-dir-gname,
.vm-dir-group--open .vm-dir-gh .vm-dir-gname {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
}
.vm-dir-gh .vm-dir-gcount,
.vm-dir-gnote {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-4);
    font-variant-numeric: tabular-nums;
}
.vm-dir-more { background: var(--vph-grey-2); border-radius: 14px; }

/* After the last group: the city's own count between two hairlines. */
.vm-dir-end {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -10px;
    padding: 6px 2px 0;
    font-size: 12.5px;
    color: var(--vph-ink-4);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.vm-dir-end::before,
.vm-dir-end::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vph-grey);
}

/* -- The card ----------------------------------------------------- */
.vm-dir-card {
    position: relative;
    min-width: 0;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vph-card-shadow);
}
.vm-dir-card:focus { outline: none; }
.vm-dir-card:focus-visible { outline: 2px solid var(--vph-primary-dark); outline-offset: 2px; }

/* The cover: the photo, or 08's no-photo ground with the letter. */
.vm-dir-media {
    position: relative;
    height: 168px;
    overflow: hidden;
    background: var(--vph-grey-2);
}
.vm-dir-shot { position: absolute; inset: 0; display: block; }
.vm-dir-app .vm-dir-shot:focus-visible { outline-offset: -4px; }
.vm-dir-shot img { width: 100%; height: 100%; object-fit: cover; }
.vm-dir-shot--photo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(4, 38, 32, 0) 0%, rgba(4, 38, 32, .26) 100%);
    pointer-events: none;
}
.vm-dir-shot--none {
    overflow: hidden;
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .16) 0%, rgba(143, 240, 139, 0) 60%), var(--vph-primary-dark);
}
.vm-dir-shot--none::before,
.vm-dir-shot--none::after {
    content: '';
    position: absolute;
    border-radius: 10px;
    background: rgba(143, 240, 139, .08);
}
.vm-dir-shot--none::before { right: -30px; bottom: 25px; width: 150px; height: 40px; }
.vm-dir-shot--none::after { right: 25px; bottom: -30px; width: 40px; height: 150px; }
.vm-dir-shot-mono {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-family: var(--vph-font-display);
    font-size: 60px;
    font-weight: 700;
    color: var(--vph-accent);
    letter-spacing: -1px;
    line-height: 1;
}

/* The status pill on the cover: 26's strings, teal when open, grey when
   closed. No pulse and no red. */
.vm-dir-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    max-width: calc(100% - 24px);
    height: 28px;
    padding: 0 11px 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--vph-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}
.vm-dir-pill.is-open { color: var(--vph-primary-dark); }
.vm-dir-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--vph-ink-4);
    flex-shrink: 0;
}
.vm-dir-pill.is-open .vm-dir-pill-dot {
    background: var(--vph-primary);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .22);
}

.vm-dir-cbody { position: relative; padding: 12px 14px 14px; }

/* The cross tile, lifted onto the cover's edge. Unlit (closed): #cbd5e1
   on #f8fafc, still. Lit (open, on duty, 24 h): the frame's glow.
   Slice F4 SH6: the lit cross is --vph-primary-solid, never #16a085
   (2.88:1 on the tint). #0f6d5c is 5.49:1 on #e3f4f0 and 5.12:1 on the
   halo's darkest point; the glow breathes from .8, not .6, so even the
   dim phase holds 3.71:1 / 3.53:1 (at .6 it was 2.56:1 / 2.47:1). */
.vm-dir-tile {
    position: absolute;
    left: 14px;
    top: -28px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    padding: 3px;
    display: flex;
}
.vm-dir-tile-in {
    flex: 1;
    border-radius: 13px;
    background: var(--vph-canvas);
    border: 1px solid var(--vph-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vph-sep);
}
.vm-dir-tile i { font-size: 19px; }
.vm-dir-tile.is-lit .vm-dir-tile-in {
    background: radial-gradient(circle at 50% 38%, rgba(22, 160, 133, .18) 0%, rgba(22, 160, 133, .05) 52%, #fff 80%);
    border-color: var(--vph-tint);
    color: var(--vph-primary-solid);
    animation: vmCrossHalo 2.4s ease-in-out infinite;
}
.vm-dir-tile.is-lit i { animation: vmCrossGlow 2.4s ease-in-out infinite; }
.vm-dir-tile.is-d1 .vm-dir-tile-in,
.vm-dir-tile.is-d1 i { animation-delay: -.8s; }
.vm-dir-tile.is-d2 .vm-dir-tile-in,
.vm-dir-tile.is-d2 i { animation-delay: -1.6s; }
@keyframes vmCrossGlow {
    0%, 100% { opacity: .8; text-shadow: 0 0 0 rgba(22, 160, 133, 0); }
    50% { opacity: 1; text-shadow: 0 0 2px rgba(22, 160, 133, .55), 0 0 9px rgba(22, 160, 133, .7); }
}
@keyframes vmCrossHalo {
    0%, 100% { box-shadow: inset 0 0 0 rgba(22, 160, 133, 0), 0 0 0 0 rgba(22, 160, 133, 0); }
    50% { box-shadow: inset 0 0 14px rgba(22, 160, 133, .26), 0 0 0 3px rgba(22, 160, 133, .1); }
}
@media (prefers-reduced-motion: reduce) {
    .vm-dir-tile.is-lit .vm-dir-tile-in,
    .vm-dir-tile.is-lit i { animation: none; }
}

.vm-dir-chead { padding-left: 64px; min-height: 34px; }
.vm-dir-card .vm-dir-name {
    font-family: var(--vph-font-display);
    font-size: 17.5px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-dir-card .vm-dir-place {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--vph-ink-4);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* The rows she can use now (open cards only). */
.vm-dir-facts {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-dir-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--vph-ink-2);
}
.vm-dir-fact-ic {
    width: 16px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    color: var(--vph-primary);
}
.vm-dir-fact-ic i { font-size: 12px; }
.vm-dir-fact-ic .fa-store { font-size: 11.5px; }
.vm-dir-fact-ic .fa-stopwatch { font-size: 12.5px; }
.vm-dir-fact-deliv { font-weight: 700; color: var(--vph-primary-dark); }
.vm-dir-fact-mode { font-weight: 700; color: var(--vph-ink-2); }
.vm-dir-fact-hold { color: var(--vph-ink-4); }
.vm-dir-fact-reply strong { font-weight: 700; color: var(--vph-ink); font-variant-numeric: tabular-nums; }

/* The buttons. They wrap rather than spill: a resolved "No phone listed"
   is wider than "Call", and "Open store" then takes its own line. */
.vm-dir-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vph-hairline);
}
.vm-dir-split {
    display: flex;
    align-items: center;
    height: 44px;
    max-width: 100%;
    border-radius: 999px;
    background: var(--vph-tint);
    flex-shrink: 0;
}
.vm-dir-half {
    height: 44px;
    padding: 0 13px 0 15px;
    border-radius: 999px;
    background: transparent;
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.vm-dir-half:hover { color: var(--vph-primary-dark); }
.vm-dir-half--dir { padding: 0 15px 0 13px; }
.vm-dir-half:only-child { padding: 0 15px; }
.vm-dir-half i { font-size: 11.5px; }
.vm-dir-half--dir i { font-size: 12px; }
/* Screen 51's Message half (the Call's slot): the card door, a mint pill
   with its own 1px edge inside the soft-teal split, so no rule is needed
   between it and Directions. #0f6d5c on #e8f5f1 is 5.6:1, on the hover
   wash 5.3:1. */
.vm-dir-half--ask {
    padding: 0 12px 0 13px;
    gap: 6px;
    background: #e8f5f1;
    border: 1px solid #cfe9e1;
    color: #0f6d5c;
}
.vm-dir-half--ask:hover { background: #dff0ea; color: #0f6d5c; }
.vm-dir-half--ask i { font-size: 12.5px; }
.vm-dir-half--ask:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
/* "Message" is wider than "Call" was: on the narrowest phones the two
   halves tighten (12.5px words, closer edges) so Message | Directions and
   Open store still stand on one row at 360. */
@media (max-width: 374.98px) {
    .vm-dir-split .vm-dir-half { font-size: 12.5px; gap: 5px; }
    .vm-dir-split .vm-dir-half--ask { padding: 0 10px 0 11px; }
    .vm-dir-split .vm-dir-half--dir { padding: 0 11px 0 10px; }
    .vm-dir-split .vm-dir-half--ask i { font-size: 12px; }
}
.vm-dir-half.is-none,
.vm-dir-dir.is-none { color: var(--vph-ink-3); font-size: 12.5px; font-weight: 600; }
.vm-dir-half[aria-busy="true"],
.vm-dir-dir[aria-busy="true"] { cursor: progress; }
.vm-dir-go {
    flex: 1 0 auto;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    white-space: nowrap;
}
.vm-dir-go:hover { color: #fff; }
.vm-dir-go i { font-size: 11px; }
.vm-dir-go--quiet { background: var(--vph-tint); color: var(--vph-primary-dark); box-shadow: none; }
.vm-dir-go--quiet:hover { color: var(--vph-primary-dark); }
/* Screen 51, R8: a closed card still takes a message (answered at
   opening). The card door as a pill of its own, first, beside the quiet
   Open store, which takes the rest of the row (#0f6d5c on #e8f5f1 5.6:1;
   hover 5.3:1). */
.vm-dir-ask {
    height: 44px;
    padding: 0 15px 0 14px;
    border-radius: 999px;
    background: #e8f5f1;
    border: 1px solid #cfe9e1;
    color: #0f6d5c;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.vm-dir-ask:hover { background: #dff0ea; color: #0f6d5c; }
.vm-dir-ask i { font-size: 12.5px; }
.vm-dir-ask:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

/* On duty tonight: a solid Call (red on the nearest only) + Directions. */
.vm-dir-dcall {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    white-space: nowrap;
}
.vm-dir-dcall:hover { color: #fff; }
.vm-dir-dcall i { font-size: 12px; }
/* White text on the solid red (5.4:1); the glow under it is the accent. */
.vm-dir-dcall.is-first { background: var(--vph-emergency-solid); box-shadow: 0 6px 16px rgba(231, 76, 60, .26); }
.vm-dir-dir {
    height: 44px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-dir-dir:hover { color: var(--vph-primary-dark); }
.vm-dir-dir i { font-size: 12px; }
.vm-dir-dir:only-child { flex: 1; justify-content: center; }
/* ===== end slice A: fe-26 ===== */

/* ----------------------------------------------------------------
   28. SCREEN 29 — YOUR COUNTER (.vm-ct-*)
   29a the counter · 29b opening hours · 29c one day (a sheet) ·
   29d phone and WhatsApp · 29e delivery and pickup · 29f the door
   photo · 29h the door on the map · 29g the states.
   Handoff: docs/design/pharmacy/screens/29/{README.md,frame.html} (the
   owner's drop, 2026-09-27; the FRAME wins on layout) and the
   director's brief R1-R18.

   What this section holds to:
     - 24/28's band: a 44px exit with fa-angle-left (no glass), the
       title at 26px, the sub-line 12.5px #e2e8f0. No tab bar (R13).
     - Door rows 64px (60 on the sub-screens), a 38px #e3f4f0 tile, a
       teal chevron, #f0f2f4 hairlines, one bordered 18px container.
     - Fields 48px, 1.5px #cbd5e1, radius 12; focused #16a085; WHAT IS
       WRONG IS SAID IN INK: a #0f172a edge and the line under it.
       Never red, never prescription blue, no yellow, no orange.
     - WHITE TEXT NEVER SITS ON #16a085 (R-AA): every solid pill is
       --vph-primary-solid. #16a085 is a mark: a switch's track, a
       focused edge, the day strips.
     - A disabled act is drawn in full ink on grey, never faded (29g:
       faded text fails contrast); 24 h's kept days are #475569 labels
       over #cbd5e1 bars, no opacity.
     - Bars and strips are placed through --l / --w, set by the CSSOM
       (counter.js), never a style attribute in the markup.
     - Every control is 44px or more; every figure, clock and number is
       tabular; no stars, badges, minutes or ETAs anywhere.
   ---------------------------------------------------------------- */
.vm-ct-app { line-height: 1.5; }
/* The frame resets every padding; the UA's 1px 6px would push each
   row off the frame's box. Zero specificity, so every rule below that
   sets a padding still wins. */
:where(.vm-ct-app) button { padding: 0; }
.vm-ct-app a:focus-visible,
.vm-ct-app button:focus-visible,
.vm-ct-app input:focus-visible,
.vm-ct-app textarea:focus-visible { outline: 2px solid var(--vph-primary-dark); outline-offset: 2px; }
.vm-ct-app .vm-ct-in:focus-visible { outline: none; }
.vm-ct-view { flex: 1 0 auto; display: flex; flex-direction: column; }
.vm-ct-nw { white-space: nowrap; }
.vm-ct-dot { color: var(--vph-sep); }

/* -- The band (24/28's) ------------------------------------------ */
.vm-ct-band {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px 14px 20px;
    background:
        radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
        linear-gradient(160deg, #12775f 0%, #0c5b4c 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-ct-bandrow { position: relative; display: flex; align-items: center; height: 44px; }
/* .vm-ct-exit is the hub's one back control (.vm-back, Slice N 30b), white on the band
   (.vm-back--band). */
.vm-ct-title {
    position: relative;
    margin-top: 8px;
    font-family: var(--vph-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vm-ct-title:focus { outline: none; }
.vm-ct-sub { position: relative; margin-top: 6px; font-size: 12.5px; color: var(--vph-grey); line-height: 1.5; }

/* -- The body ---------------------------------------------------- */
.vm-ct-body {
    flex: 1 0 auto;
    padding: 18px 14px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vm-ct-body--home { padding-bottom: 24px; }
.vm-ct-body--open { flex: 0 0 auto; padding-bottom: 24px; }
.vm-ct-home { display: flex; flex-direction: column; gap: 22px; }

/* A read that failed: 25's bordered card. */
.vm-ct-state {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-ct-state-t { font-size: 13.5px; font-weight: 700; color: var(--vph-ink); line-height: 1.35; }
.vm-ct-retry {
    margin-top: 6px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}

/* -- The headline card ------------------------------------------- */
.vm-ct-lead {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
}
.vm-ct-lead--act { display: flex; flex-direction: column; gap: 14px; }
.vm-ct-lead-in { background: var(--vph-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ct-lead-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
.vm-ct-lead-h {
    margin-top: 4px;
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -1px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.vm-ct-lead-h:focus { outline: none; }
/* A status with a clock is the frame's 27px (29b, 29g); each part stays
   whole and the line may break only between them. */
.vm-ct-lead-h.is-long { font-size: 27px; }
.vm-ct-lead-now { margin-top: 6px; font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.5; }
.vm-ct-lead-now + .vm-ct-lead-h { margin-top: 2px; }
.vm-ct-lead-sub { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--vph-ink-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.vm-ct-lead-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.vm-ct-lead-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-ct-lead-row i { font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; margin-top: 3px; }
.vm-ct-lead-row > span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

/* -- The acts ---------------------------------------------------- */
.vm-ct-solid {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ct-solid i { font-size: 14px; flex-shrink: 0; }
.vm-ct-solid .fa-clock { font-size: 13px; }
.vm-ct-fill {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-ct-fill i { font-size: 12px; flex-shrink: 0; }
.vm-ct-quiet {
    width: 100%;
    height: 44px;
    color: var(--vph-ink-3);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}
.vm-ct-acts { display: flex; flex-direction: column; gap: 8px; }
.vm-ct-line { font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; text-align: center; }
.vm-ct-caption { padding: 0 10px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.5; text-align: center; text-wrap: pretty; }
.vm-ct-caption.is-said { font-weight: 600; color: var(--vph-ink); }
.vm-ct-stack { display: flex; flex-direction: column; gap: 16px; }
.vm-ct-remove { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.vm-ct-remove .vm-ct-caption { padding: 0 12px; }
/* Busy: the act says what is happening, in full ink. Never faded. */
.vm-ct-app [aria-disabled="true"],
.vm-ct-app button:disabled { cursor: progress; }

/* -- 29a: the doors ---------------------------------------------- */
.vm-ct-group { display: flex; flex-direction: column; gap: 10px; }
.vm-ct-h {
    padding: 0 2px;
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.3px;
    line-height: 1.5;
}
.vm-ct-rows { background: #fff; border: 1px solid var(--vph-grey); border-radius: 18px; overflow: hidden; }
.vm-ct-door {
    width: 100%;
    min-height: 64px;
    padding: 10px 12px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: normal;
}
.vm-ct-door:hover { color: var(--vph-ink); }
.vm-ct-door:active { background: var(--vph-canvas); }
.vm-ct-door + .vm-ct-door { border-top: 1px solid var(--vph-hairline); }
.vm-ct-door--sub { min-height: 60px; }
.vm-ct-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ct-tile i { font-size: 14px; }
/* The no-photo monogram, 26's ground at 38px: the counter's teal, the
   faint cross bleeding off the corner, the letter of its own name. */
.vm-ct-tile--mono { position: relative; overflow: hidden; background: var(--vph-primary-dark); }
.vm-ct-tile--mono::before,
.vm-ct-tile--mono::after {
    content: '';
    position: absolute;
    right: -8px;
    bottom: -8px;
    border-radius: 3px;
    background: rgba(143, 240, 139, .08);
}
.vm-ct-tile--mono::before { width: 32px; height: 9px; }
.vm-ct-tile--mono::after { width: 9px; height: 32px; }
.vm-ct-mono {
    position: relative;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-accent);
    line-height: 1.5;
}
.vm-ct-tile--img { overflow: hidden; background: var(--vph-grey-2); }
.vm-ct-tile--img img { width: 100%; height: 100%; object-fit: cover; }
.vm-ct-door-main { flex: 1; min-width: 0; }
.vm-ct-door-t { display: block; font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-ct-door-s {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.vm-ct-door-s strong { font-weight: 600; color: var(--vph-ink); }
.vm-ct-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }

/* "Where this shows" and the sub-screens' notes. */
.vm-ct-info { background: var(--vph-tint); border-radius: 14px; padding: 12px; }
.vm-ct-info-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
.vm-ct-info-rows { list-style: none; margin: 9px 0 0; padding: 0; background: #fff; border-radius: 10px; overflow: hidden; }
.vm-ct-info-row { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; }
.vm-ct-info-row + .vm-ct-info-row { border-top: 1px solid var(--vph-hairline); }
.vm-ct-info-row i { width: 14px; margin-top: 3px; flex-shrink: 0; font-size: 12px; color: var(--vph-primary-dark); text-align: center; }
.vm-ct-info-row i.vm-ct-info-wa { margin-top: 2px; font-size: 13px; }
.vm-ct-info-row span { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-ct-info-foot { margin-top: 9px; padding: 0 2px; font-size: 12px; color: var(--vph-ink-2); line-height: 1.45; }

/* -- The switch (48x28 in a 60x44 hit area) ---------------------- */
.vm-ct-toggle {
    width: 60px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ct-track {
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: var(--vph-sep);
    transition: background-color .15s ease;
}
.vm-ct-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    transition: left .15s ease;
}
.vm-ct-toggle[aria-pressed="true"] .vm-ct-track { background: var(--vph-primary); }
.vm-ct-toggle[aria-pressed="true"] .vm-ct-knob { left: 23px; }
.vm-ct-togrow { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.vm-ct-togrow--in { margin: -4px -10px -4px 0; }
.vm-ct-togmain { flex: 1; min-width: 0; }
.vm-ct-togt { display: block; flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--vph-ink); line-height: 1.5; }
.vm-ct-togs { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.4; }

/* -- 29b: opening hours ------------------------------------------ */
.vm-ct-week { display: flex; flex-direction: column; gap: 16px; }
.vm-ct-24 {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-ct-24row { padding: 4px 4px 4px 14px; display: flex; align-items: center; gap: 12px; min-height: 60px; }
.vm-ct-days { background: #fff; border: 1px solid var(--vph-grey); border-radius: 18px; overflow: hidden; }
.vm-ct-day {
    width: 100%;
    min-height: 60px;
    padding: 9px 12px 9px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: normal;
}
.vm-ct-day:active { background: var(--vph-canvas); }
.vm-ct-day + .vm-ct-day { border-top: 1px solid var(--vph-hairline); }
.vm-ct-dtile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
}
.vm-ct-day-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.vm-ct-day-v {
    font-size: 14px;
    font-weight: 600;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow-wrap: normal;
}
.vm-ct-day-v.is-closed { color: var(--vph-ink-3); }
/* A stored lunch break (seeded counters) is two ranges: each stays
   whole, the pair may wrap. */
.vm-ct-day-v.is-many { white-space: normal; }
.vm-ct-strip { position: relative; display: block; height: 6px; border-radius: 999px; background: var(--vph-grey-2); }
.vm-ct-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--l, 0%);
    width: var(--w, 0%);
    border-radius: 999px;
    background: var(--vph-primary);
}
/* 29g: 24 h on — the week is KEPT, drawn in full ink over grey. */
.vm-ct-kept { border-top: 1px solid var(--vph-hairline); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.vm-ct-kept-row { display: flex; align-items: center; gap: 12px; }
.vm-ct-kept-k { width: 38px; flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--vph-ink-3); line-height: 1.5; }
.vm-ct-kept-row .vm-ct-strip { flex: 1; }
.vm-ct-kept-row .vm-ct-seg { background: var(--vph-sep); }
.vm-ct-kept-say { border-top: 1px solid var(--vph-hairline); padding: 10px 14px; font-size: 12px; color: var(--vph-ink-2); line-height: 1.45; }

/* -- The commit bar ----------------------------------------------- */
.vm-ct-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
}
.vm-ct-bar-cap { padding: 10px 14px 0; font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ct-bar-in { padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.vm-ct-bar-in--cap { padding-top: 10px; }
.vm-ct-commit {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

/* 29g: a Save or Publish that did not go through. Never red. */
.vm-ct-fail {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-ct-fail-head { display: flex; gap: 10px; align-items: flex-start; }
.vm-ct-fail-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ct-fail-tile i { font-size: 14px; }
.vm-ct-fail-main { flex: 1; min-width: 0; }
.vm-ct-fail-t { font-size: 14px; font-weight: 700; color: var(--vph-ink); line-height: 1.3; }
.vm-ct-fail-t:focus { outline: none; }
.vm-ct-fail-s { margin-top: 2px; font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ct-again {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
}

/* -- 29c and the landmark: the house sheet ------------------------ */
.vm-sheet-backdrop--ct { background: rgba(15, 23, 42, .55); }
.vm-sheet--ct {
    padding: 10px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    /* It scrolls up and down (the half-hour grid is tall), never
       sideways: §8's overflow-y alone would compute overflow-x to auto. */
    overflow-x: hidden;
    /* Set and Cancel end the sheet, and neither may be the thing you
       have to discover by scrolling (04b's rule). */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}
.vm-sheet--ct .vm-sheet-grab { margin: 0 auto; flex-shrink: 0; }
.vm-ct-sheet { display: flex; flex-direction: column; gap: 14px; }
.vm-ct-shead { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.vm-ct-stile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}
.vm-ct-stile i { font-size: 16px; }
.vm-ct-stitle {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ct-stitle:focus { outline: none; }
.vm-ct-sday { background: var(--vph-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ct-sstrip { position: relative; display: block; margin-top: 10px; height: 10px; border-radius: 999px; background: #fff; }
.vm-ct-sscale {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--vph-primary-dark);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.vm-ct-picks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.vm-ct-pickcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vm-ct-pick {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    line-height: normal;
    font-variant-numeric: tabular-nums;
}
.vm-ct-pick i { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-ct-pick.is-empty { font-size: 13.5px; font-weight: 600; color: var(--vph-ink-3); }
.vm-ct-pick[aria-expanded="true"] { border-color: var(--vph-primary); }
.vm-ct-pick[aria-invalid="true"] { border-color: var(--vph-ink); }
/* 18's half-hour grid, 00:00 to 23:30, six across so a whole day fits
   the sheet: each cell 44px tall. */
.vm-ct-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.vm-ct-slot {
    height: 44px;
    border-radius: 10px;
    background: var(--vph-grey-2);
    color: var(--vph-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    font-variant-numeric: tabular-nums;
}
.vm-ct-slot[aria-pressed="true"] { background: var(--vph-primary-solid); color: #fff; font-weight: 700; }
.vm-ct-err { font-size: 12px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-ct-err--day { font-size: 12.5px; }
.vm-ct-closedrow { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--vph-hairline); padding-top: 4px; }
.vm-ct-sacts { display: flex; flex-direction: column; gap: 8px; }
.vm-ct-set {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
    font-variant-numeric: tabular-nums;
}
.vm-ct-same {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    font-variant-numeric: tabular-nums;
}
/* Not yet valid: full ink on grey, never a faded teal. */
.vm-ct-set:disabled,
.vm-ct-same:disabled { background: var(--vph-grey-2); color: var(--vph-ink-3); box-shadow: none; cursor: not-allowed; }
.vm-ct-cancel { width: 100%; height: 44px; color: var(--vph-ink-3); font-size: 13.5px; font-weight: 700; line-height: normal; }
.vm-ct-landin {
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
    resize: none;
    field-sizing: content;
    caret-color: var(--vph-primary);
}
.vm-ct-landin:focus { outline: none; border-color: var(--vph-primary); }
.vm-ct-landin[aria-invalid="true"] { border-color: var(--vph-ink); }

/* -- 29d / 29e: fields and chips ---------------------------------- */
.vm-ct-card {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vm-ct-numcard { border: 0; box-shadow: var(--vph-card-shadow); gap: 16px; }
.vm-ct-holdcard { gap: 10px; }
.vm-ct-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vm-ct-field--wa { gap: 10px; }
.vm-ct-label { font-size: 12px; font-weight: 600; color: var(--vph-ink-2); line-height: 1.5; }
.vm-ct-box {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    display: flex;
    align-items: center;
}
.vm-ct-box--tel { padding: 0 14px; gap: 10px; }
.vm-ct-box--unit { padding: 0 12px; gap: 8px; }
.vm-ct-box:focus-within { border-color: var(--vph-primary); }
.vm-ct-box[aria-invalid="true"] { border-color: var(--vph-ink); }
.vm-ct-cc { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--vph-ink-4); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.vm-ct-in {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--vph-ink);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    caret-color: var(--vph-primary);
}
.vm-ct-box--tel .vm-ct-in { letter-spacing: .02em; }
.vm-ct-box--unit .vm-ct-in { font-weight: 700; }
.vm-ct-box--unit span { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--vph-ink-4); }
.vm-ct-help { font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ct-wa { border-top: 1px solid var(--vph-hairline); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.vm-ct-chips { display: grid; gap: 6px; }
.vm-ct-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-ct-chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-ct-chip {
    min-height: 44px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    padding: 4px 6px;
}
.vm-ct-chip[aria-pressed="true"] { background: var(--vph-tint); color: var(--vph-primary-dark); font-weight: 700; }
.vm-ct-deliv { display: flex; flex-direction: column; gap: 14px; }
.vm-ct-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.vm-ct-nopin { padding: 0; gap: 0; overflow: hidden; }
.vm-ct-nopin-t { padding: 14px; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-ct-nopin .vm-ct-door { border-top: 1px solid var(--vph-hairline); }

/* -- 29f: the door photo ------------------------------------------ */
.vm-ct-shot { background: #fff; border-radius: 18px; box-shadow: var(--vph-card-shadow); overflow: hidden; }
.vm-ct-shot-pic {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--vph-primary-dark);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-ct-shot-pic--none::before,
.vm-ct-shot-pic--none::after {
    content: '';
    position: absolute;
    bottom: -30px;
    border-radius: 12px;
    background: rgba(143, 240, 139, .08);
}
.vm-ct-shot-pic--none::before { right: -30px; width: 170px; height: 48px; }
.vm-ct-shot-pic--none::after { right: 31px; width: 48px; height: 170px; }
.vm-ct-shot-mono {
    position: relative;
    font-family: var(--vph-font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--vph-accent);
    line-height: 1;
}
.vm-ct-shot-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-ct-shot-cap { padding: 12px 14px 14px; }
.vm-ct-shot-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
.vm-ct-shot-v { margin-top: 3px; font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.5; }
.vm-ct-shot-acts { padding: 14px; display: flex; flex-direction: column; gap: 8px; }

/* -- 29h: the door on the map ------------------------------------- */
.vm-ct-pincard { background: #fff; border-radius: 18px; box-shadow: var(--vph-card-shadow); overflow: hidden; }
.vm-ct-pincard-in { padding: 14px 14px 0; }
.vm-ct-pincard-in.is-bare { padding-bottom: 14px; }
.vm-ct-coords { margin-top: 3px; font-size: 12.5px; color: var(--vph-ink-2); line-height: 1.5; font-variant-numeric: tabular-nums; }
.vm-ct-pincard .vm-ct-info-rows { margin-top: 11px; }
.vm-ct-mapdoor { margin-top: 14px; border-top: 1px solid var(--vph-hairline); }

/* ----------------------------------------------------------------
   29. SCREEN 32 — DUTY NIGHTS (.vm-dn-*)
   32a the nights · 32b add a duty night (a sheet) · 32c remove (a
   confirm sheet) · 32d the other states.
   Handoff: docs/design/pharmacy/screens/32/{README.md,frame.html} (the
   owner's drop, 2026-09-27; the FRAME wins over the README) and the
   director's brief F1-F11.

   What this section holds to:
     - 29's parts, REUSED, not copied: the band, the headline card and
       its white rows, the bordered rows container, the info block, the
       chips, the fields' label and helper, the solid / fill pills, the
       half-hour grid and 29g's failure card (.vm-ct-*, §28). The page's
       root carries .vm-ct-app for them. What is new is here.
     - The prefix is .vm-dn- ("duty nights"): .vm-dt- is the house
       DESKTOP layer (§30's .vm-dt-only / -header / -brand / -link /
       -shell, and the rentals shell's), so a duty class there could be
       hidden by it.
     - WHITE TEXT NEVER SITS ON #16a085 (R-AA, §7.16): "Add a duty
       night", "Keep it" and "Declare …" are --vph-primary-solid.
     - Remove is quiet #475569, never red: red is emergency's, and
       #b91c1c is not a house token. The safe answer is the easy one
       (04b): "Keep it" is the solid pill, "Remove …" the white one.
     - A refusal is said in ink: a #0f172a edge on the field and the
       line under it. Never red, never prescription blue, no yellow, no
       orange.
     - Every control is 44px or more; every date and clock is tabular;
       no stars, badges, minutes or ETAs anywhere.
   ---------------------------------------------------------------- */
.vm-dn-app .vm-ct-lead-row i { width: 14px; text-align: center; }
.vm-dn-arrow { color: var(--vph-ink-4); }
.vm-dn-app .vm-ct-solid .fa-plus { font-size: 13px; }
/* An <a> drawn as a pill keeps its own ink on hover (the base `a:hover`
   would turn white text teal-on-teal). */
.vm-dn-app a.vm-ct-solid:hover { color: #fff; }
.vm-dn-app a.vm-ct-fill:hover { color: var(--vph-primary-dark); }

/* -- 32a: the headline card --------------------------------------- */
/* With the quiet Remove inside the block, the block's foot is 8px. */
.vm-dn-lead-in--rm { padding-bottom: 8px; }
.vm-dn-lead-h { overflow-wrap: normal; }
.vm-dn-hours {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vph-ink-2);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.vm-dn-rm {
    width: 100%;
    height: 44px;
    margin-top: 6px;
    color: var(--vph-ink-3);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}
/* 32d on duty now: the quiet act sits 8px under the fill. */
.vm-dn-stop {
    width: 100%;
    height: 44px;
    margin-top: -6px;
    color: var(--vph-ink-3);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}

/* -- 32d: a card of its own (no phone; not your pharmacy) ---------- */
.vm-dn-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vm-dn-card-t { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }
.vm-dn-none-t {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vph-ink);
    line-height: 1.3;
}
.vm-dn-none-t:focus { outline: none; }

/* -- 32a: "After that" -------------------------------------------- */
.vm-dn-rows { list-style: none; margin: 0; padding: 0; }
.vm-dn-row {
    min-height: 64px;
    padding: 10px 6px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-dn-row + .vm-dn-row { border-top: 1px solid var(--vph-hairline); }
.vm-dn-row:focus { outline: none; }
.vm-dn-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.vm-dn-tile-d {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vm-dn-tile-n {
    margin-top: 2px;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-dn-row-main { flex: 1; min-width: 0; }
.vm-dn-row-t {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.vm-dn-row-s {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--vph-ink-3);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.vm-dn-remove {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    flex-shrink: 0;
    color: var(--vph-ink-3);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}
.vm-dn-foot { padding: 0 2px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }

/* -- 32b / 32c: the house sheet, 29c's idiom ----------------------- */
.vm-sheet-backdrop--dn { background: rgba(15, 23, 42, .5); }
.vm-sheet--dn {
    padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
    box-shadow: 0 -10px 30px rgba(2, 26, 21, .18);
    /* It scrolls up and down (the half-hour grid is tall), never
       sideways: §8's overflow-y alone would compute overflow-x to auto. */
    overflow-x: hidden;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
}
.vm-sheet--dn .vm-sheet-grab { margin: 2px auto 0; flex-shrink: 0; }
.vm-dn-sheet { display: flex; flex-direction: column; gap: 14px; }
.vm-dn-shead { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.vm-dn-stitle {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.vm-dn-stitle:focus { outline: none; }
.vm-dn-cancel {
    height: 44px;
    min-width: 44px;
    flex-shrink: 0;
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    padding: 0 6px;
}

/* The evening it starts: the phone's own date picker under a 48px
   field. The native input covers the whole field, invisible, so a tap
   anywhere on it is a tap on the input (16px, or iOS zooms). */
.vm-dn-datebox {
    position: relative;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.vm-dn-datebox:focus-within { border-color: var(--vph-primary); }
.vm-dn-datebox[aria-invalid="true"] { border-color: var(--vph-ink); }
.vm-dn-datebox .fa-calendar-day { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-dn-datebox .fa-angle-down { font-size: 11px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-dn-dateval { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-dn-datein {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
/* Focus is the field's own #16a085 edge (29's fields), not a second ring. */
.vm-dn-app .vm-dn-datein:focus-visible { outline: none; }

/* From / Until: 29b's half-hour control, the day in the value. */
.vm-dn-clocks { display: flex; gap: 8px; }
.vm-dn-clockcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-dn-clock {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: normal;
    text-align: left;
    font-variant-numeric: tabular-nums;
    padding: 0 12px;
}
.vm-dn-clock > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vm-dn-clock i { font-size: 11px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-dn-clock[aria-expanded="true"] { border-color: var(--vph-primary); }
.vm-dn-clock[aria-invalid="true"] { border-color: var(--vph-ink); }

/* A refusal, in ink, under the field it names. */
.vm-dn-err {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-dn-err i { font-size: 12px; margin-top: 3px; flex-shrink: 0; }

/* 29b's half-hour grid, six across: under a 360px phone its 6px gaps
   would leave each cell under 44px wide, so they close to 4px there. */
@media (max-width: 359px) {
    .vm-sheet--dn .vm-ct-grid { gap: 4px; }
}

/* What customers will read, as a white row on the tint. */
.vm-dn-preview { background: var(--vph-tint); border-radius: 14px; padding: 10px; }

/* -- 32c: remove (the confirm sheet) ------------------------------ */
.vm-dn-chead { padding: 0 2px; }
.vm-dn-chours {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.vm-dn-cblock { background: var(--vph-grey-2); border-radius: 14px; padding: 10px; }
.vm-dn-cblock .vm-ct-lead-row i { color: var(--vph-ink-3); }
.vm-dn-cacts { display: flex; flex-direction: column; gap: 8px; }
.vm-dn-go {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    padding: 6px 20px;
}

/* ----------------------------------------------------------------
   29b. SCREEN 35 — THE COUNTER LETS A BAG GO (.vm-lg-*), on 09
   Pixel truth: docs/design/pharmacy/screens/35/{README.md,frame.html}
   (the frame wins). 09's own tokens throughout; the solid pill is
   --vph-primary-solid, never white on #16a085 (§7.16 R-AA).
   ---------------------------------------------------------------- */

/* 35a redraws 09's packing foot around the new quiet row: the figure,
   11px, the commit, 6px, the quiet row, 6px. */
.vm-q-pack-foot { gap: 6px; padding-bottom: 6px; }
.vm-q-pack-foot > .vm-q-money-row { margin-bottom: 5px; }

/* The picking circles (35a): the row stays 56px, the circle is 26px, and
   a line in the bag takes the faint teal ground so progress is visible
   from arm's length. Page memory only (queue.js `state.ticked`). */
.vm-lg-pick {
    width: 100%;
    background: #fff;
    color: var(--vph-ink);
    text-align: left;
}
.vm-lg-pick.is-in { background: #f4fbf9; }
.vm-lg-tick {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 999px;
    border: 2px solid var(--vph-sep);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-lg-pick.is-in .vm-lg-tick {
    border: 0;
    background: var(--vph-primary-solid);
    color: #fff;
}
.vm-lg-tick i { font-size: 12px; }

/* The quiet door: 44px, borderless, 13.5/700 #475569, AFTER the card's
   main act and never before it. On a phone narrower than the frame the
   pair may wrap to two lines inside its 44px rather than overflow. */
.vm-lg-door {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 6px;
    background: transparent;
    color: var(--vph-ink-3);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vm-lg-door[disabled] { color: var(--vph-ink-4); cursor: default; }
.vm-lg-door--row { font-size: 13px; }
.vm-lg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* The UA's 6px button padding would wrap "Something is missing" inside its
   half at 390px; the frame sets both halves on one line. */
.vm-lg-pair > .vm-q-quiet { min-width: 0; padding: 0 2px; line-height: 1.2; text-align: center; }

/* The ready card: the commit row, 6px, the door, 6px (the frame's
   13px 14px 6px column). The commit keeps its 13px under the block. */
.vm-lg-ready { padding: 13px 14px 6px; display: flex; flex-direction: column; gap: 6px; }
.vm-lg-ready > .vm-q-ready-acts { padding: 0; }
/* The rider row: its door sits 10px under the two grey doors. */
.vm-q-row--rider.vm-lg-rider { padding-bottom: 6px; }

/* The white row, shared: 35b's consequence and 35c's grey block. */
.vm-lg-rows { margin-top: 10px; background: #fff; border-radius: 10px; overflow: hidden; }
.vm-lg-row {
    background: #fff;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-lg-rows .vm-lg-row + .vm-lg-row { border-top: 1px solid var(--vph-hairline); }
.vm-lg-row i {
    flex: 0 0 14px;
    width: 14px;
    margin-top: 3px;
    font-size: 12px;
    text-align: center;
    color: var(--vph-primary-dark);
}
.vm-lg-row--grey { margin-top: 11px; border-radius: 10px; }
.vm-lg-row--grey i { color: var(--vph-ink-3); }
/* A failed save is stated in weight, never red, never a toast. */
.vm-lg-fail { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--vph-ink-2); }

/* -- 35c: the hold has passed ------------------------------------ */
/* Grey is a thing that is over. The figure is one line, always. */
.vm-lg-held { padding: 0 14px; }
.vm-lg-heldblock { background: var(--vph-grey-2); border-radius: 14px; padding: 12px 14px 14px; }
.vm-lg-heldlabel { font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--vph-ink-3); }
.vm-lg-heldfig {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-top: 4px;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-lg-passacts { padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 6px; }
.vm-lg-passacts .vm-q-go { flex: 1; width: auto; min-width: 0; }

/* -- 35b: the why sheet ------------------------------------------ */
.vm-lg-sheet { padding: 13px 14px 16px; display: flex; flex-direction: column; gap: 14px; line-height: 1.5; }
.vm-lg-head { padding: 0 2px; }
.vm-lg-title {
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.25;
    color: var(--vph-ink);
    font-variant-numeric: tabular-nums;
}
.vm-lg-sub { font-size: 12.5px; line-height: 1.45; margin-top: 4px; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-lg-dot { color: var(--vph-sep); }
.vm-lg-reasons { display: flex; flex-direction: column; gap: 8px; }
.vm-lg-reason {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    background: #fff;
    border: 1.5px solid var(--vph-grey);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.vm-lg-reason.is-on { background: var(--vph-teal-tint); border-color: var(--vph-primary); }
.vm-lg-radio {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 999px;
    border: 2px solid var(--vph-sep);
    background: #fff;
}
.vm-lg-reason.is-on .vm-lg-radio { border: 6px solid var(--vph-primary); }
.vm-lg-rtext { flex: 1; min-width: 0; }
.vm-lg-rtitle { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--vph-ink); }
.vm-lg-rline { display: block; font-size: 12px; line-height: 1.4; margin-top: 1px; color: var(--vph-ink-3); }
/* The headline block is what the customer reads, in the counter's voice. */
.vm-lg-reads { background: var(--vph-teal-tint); border-radius: 14px; padding: 12px; }
.vm-lg-readslabel { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-lg-readsline {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.3;
    margin-top: 4px;
    color: var(--vph-ink);
}
/* The way out is bordered; "Keep it" is the solid pill — the safe answer
   is the easy one. */
.vm-lg-acts { display: flex; flex-direction: column; gap: 8px; }
.vm-lg-commit {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 15px;
    font-weight: 700;
}
.vm-lg-commit[disabled] { color: var(--vph-ink-4); cursor: default; }
.vm-lg-keep {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-lg-keep[disabled] { opacity: .6; box-shadow: none; }

/* -- 35e: the missing sheet's foot, and the flat rows ----------- */
.vm-lg-fill {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-teal-tint);
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
}
/* "She cancelled while you were packing": flat, no act, in the card's
   place until the Douala day ends. */
.vm-lg-gone { padding: 12px 14px; }
.vm-lg-gone-tile { color: var(--vph-ink-3); }
.vm-lg-gone-title { font-variant-numeric: tabular-nums; }
.vm-lg-gone-sub { font-size: 12px; line-height: 1.4; margin-top: 2px; color: var(--vph-ink-3); }
/* The server refused: one sentence where the card was. */
.vm-lg-note { padding: 12px 14px; }
.vm-lg-note-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vph-ink);
}
.vm-lg-note-line i { flex: 0 0 auto; margin-top: 3px; font-size: 12px; color: var(--vph-ink-3); }

/* ----------------------------------------------------------------
   29c. SCREEN 35 on 06 — HER CANCEL, THE CANCELLED CARD, AND
   "REMOVE THE PHOTOGRAPH" (.vm-od-cancel-*, .vm-od-rm*, .vm-od-confirm*)
   ---------------------------------------------------------------- */

/* 35d: the cancelled card. Bordered (a fact), the 38px grey xmark tile,
   and a grey block that says who cancelled it and why. */
.vm-od-cancel { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vm-od-cancel .vm-od-cancel-row { padding: 0; gap: 12px; }
.vm-od-cancel-tile { width: 38px; height: 38px; border-radius: 11px; color: var(--vph-ink-3); }
.vm-od-cancel-title { font-size: 14.5px; }
.vm-od-cancel-meta { font-size: 12px; color: var(--vph-ink-3); }
.vm-od-cancel-sep { color: var(--vph-sep); }
.vm-od-cancel-block { background: var(--vph-grey-2); border-radius: 14px; padding: 12px 14px; }
.vm-od-cancel-say {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.3;
    color: var(--vph-ink);
}
.vm-od-cancel-owed,
.vm-od-cancel-note {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vph-ink);
}
.vm-od-cancel-owed { margin-top: 10px; }
.vm-od-cancel-note { margin-top: 11px; }
.vm-od-cancel-owed i,
.vm-od-cancel-note i { flex: 0 0 14px; width: 14px; margin-top: 3px; font-size: 12px; text-align: center; color: var(--vph-ink-3); }
.vm-od-cancel-note i { color: var(--vph-primary-dark); }

/* 35d: while placed — the headline block and the bordered way out. */
.vm-od-cancel-open { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.vm-od-cancel-head { background: var(--vph-teal-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-od-cancel-label { font-size: 11.5px; font-weight: 600; line-height: 1.5; color: var(--vph-primary-dark); }
.vm-od-cancel-big {
    font-family: var(--vph-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.2;
    margin-top: 4px;
    color: var(--vph-ink);
}
.vm-od-cancel-btn,
.vm-od-confirm-go {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 14px;
    font-weight: 700;
}
.vm-od-cancel-btn[aria-disabled="true"] { opacity: .65; }
/* The counter packed it first: said in weight, never red. */
.vm-od-cancel-refused {
    margin-top: 12px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--vph-ink);
}
.vm-od-cancel-refused i { flex: 0 0 auto; margin-top: 3px; font-size: 12px; color: var(--vph-ink-3); }

/* The confirm (04b's idiom): the act named, one sentence, the bordered
   way out, and "Keep it" solid. */
.vm-od-confirm { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.vm-od-confirm-title {
    font-family: var(--vph-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--vph-ink);
}
.vm-od-confirm-sub { font-size: 12.5px; line-height: 1.45; color: var(--vph-ink-3); }
.vm-od-confirm-fail { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--vph-ink-2); }
.vm-od-confirm-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.vm-od-confirm-keep {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-od-confirm-go[disabled],
.vm-od-confirm-keep[disabled] { opacity: .6; box-shadow: none; cursor: default; }

/* "Remove the photograph": quiet, under "See what you sent", on the
   card's own hairline; once removed, one quiet line where it was. When
   the prescription's card is not drawn (its order IS its card) the two
   ride on that order's foot, edge to edge. */
.vm-od-rmdoor {
    width: 100%;
    height: 44px;
    border-top: 1px solid var(--vph-hairline);
    padding: 0 14px;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--vph-ink-3);
}
.vm-od-rmdoor[aria-disabled="true"] { opacity: .65; }
.vm-od-rmdone {
    border-top: 1px solid var(--vph-hairline);
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--vph-ink-3);
    font-variant-numeric: tabular-nums;
}
.vm-od-rxfoot--lifted { margin: 14px -14px -14px; }
.vm-od-cancel > .vm-od-rxfoot { margin: 0 -14px -14px; }

/* ----------------------------------------------------------------
   29d. SCREEN 38 — A BOX THE CATALOGUE LACKS (.vm-sb-*), and its
   additions to 25 (.vm-sh-*), 08 (.vm-cat-stated) and 03 (.vm-pd-*)
   38a the door (25b, no match) · 38b state the box (the sheet) · 38c
   the stated row on 25a / 25c · 38d on the counter's own 08 and 03 ·
   38e the other states.
   Pixel truth: docs/design/pharmacy/screens/38/{README.md,frame.html}
   (the frame wins). The frame's solid pills are #16a085 under white
   text; here they are --vph-primary-solid (§7.16 R-AA). Refusals are
   ink, never red: the glyph, 12.5/600, the field's edge #0f172a.
   ---------------------------------------------------------------- */

/* -- 38a: the door, where 25b's mailto stood ---------------------- */
.vm-sb-none {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-sb-none-in { background: var(--vph-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-sb-none-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sb-none-h {
    margin-top: 4px;
    font-family: var(--vph-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.6px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.vm-sb-none-in > .vm-sh-lead-row { margin-top: 11px; }
.vm-sb-none .vm-sh-add i { font-size: 12px; }
/* The frame's white rows carry an 11px glyph, 4px down. */
.vm-sh-lead-row.vm-sb-row > i { font-size: 11px; margin-top: 4px; }
/* 38e: "None of these" is itself the door: the teal tile and chevron. */
.vm-sh-hit--none .vm-sh-tile i { font-size: 13px; }

/* -- 38b: the sheet, full height on the dim ------------------------ */
.vm-sb { background: var(--vph-ink-3); min-height: 100vh; min-height: 100dvh; }
.vm-sb-dim { height: 44px; flex-shrink: 0; }
.vm-sb-panel {
    flex: 1 0 auto;
    background: #fff;
    border-radius: 22px 22px 0 0;
    display: flex;
    flex-direction: column;
}
.vm-sb-grab { display: flex; justify-content: center; padding-top: 8px; }
.vm-sb-grab span { width: 38px; height: 4px; border-radius: 999px; background: var(--vph-sep); }
.vm-sb-titlerow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 0 18px; }
.vm-sb-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
}
.vm-sb-title:focus { outline: none; }
.vm-sb-cancel {
    height: 44px;
    padding: 0 12px;
    flex-shrink: 0;
    color: var(--vph-ink-2);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}
.vm-sb-body { padding: 10px 14px 18px; display: flex; flex-direction: column; gap: 16px; }

/* The headline: what customers read, drawn as she types. */
.vm-sb-read { background: var(--vph-tint); border-radius: 14px; padding: 12px; }
.vm-sb-read-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); padding: 0 2px; }
.vm-sb-prev {
    margin-top: 8px;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* The customer's tile: the form glyph, never a photo. #94a3b8 is a
   decorative glyph here, never a text colour. */
.vm-sb-prev-tile {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sb-prev-tile i { font-size: 16px; color: #94a3b8; }
.vm-sb-prev-main { flex: 1; min-width: 0; }
.vm-sb-prev-name {
    display: block;
    min-height: 1.25em;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-sb-prev-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-4); overflow-wrap: anywhere; }
.vm-sb-label { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sb-read > .vm-sh-lead-row { margin-top: 6px; }

/* 38e: "Is it this one?" — the catalogue box of the same name. */
.vm-sb-match { display: flex; flex-direction: column; gap: 10px; }
.vm-sb-match:focus { outline: none; }
.vm-sb-match-in { background: var(--vph-tint); border-radius: 14px; padding: 12px; }
.vm-sb-mrow {
    margin-top: 8px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px 10px 10px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    line-height: normal;
    color: var(--vph-ink);
}
.vm-sb-msub { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.4; }
.vm-sb-match-in > .vm-sh-lead-row { margin-top: 6px; }
.vm-sb-match-p { padding: 0 2px; font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.45; }

/* The fields: 48px, radius 12, 1.5px #cbd5e1, #16a085 in focus, ink
   when refused. */
.vm-sb-field { display: flex; flex-direction: column; gap: 6px; }
.vm-sb-k { padding: 0 2px; font-size: 12px; font-weight: 600; color: var(--vph-ink-2); }
.vm-sb-khead { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; }
.vm-sb-khead .vm-sb-k { flex: 1; min-width: 0; padding: 0; }
.vm-sb-hint { font-size: 11.5px; color: var(--vph-ink-4); text-align: right; }
.vm-sb-in {
    width: 100%;
    height: 48px;
    margin: 0;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vph-ink);
    outline: none;
    caret-color: var(--vph-primary);
}
.vm-sb-in:focus { border-color: var(--vph-primary); }
.vm-sb-in[aria-invalid="true"] { border-color: var(--vph-ink); }
.vm-sb-errs { display: flex; flex-direction: column; gap: 8px; }
.vm-sb-errs:empty { display: none; }
.vm-sb-errs--rx { padding: 4px 8px; }
.vm-sb-err {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-sb-err i { flex-shrink: 0; margin-top: 3px; font-size: 12px; }
/* 38e's duplicate: the door to her own row. */
.vm-sb-open {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
/* Form 4x2 and Shelf 3x2: 44px chips, the active one tinted. */
.vm-sb-chips { display: grid; gap: 6px; }
.vm-sb-chips--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-sb-chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-sb-chip {
    min-height: 44px;
    padding: 0 4px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-sb-chip[aria-pressed="true"] { background: var(--vph-tint); color: var(--vph-primary-dark); font-weight: 700; }
.vm-sb-chips.is-refused .vm-sb-chip { box-shadow: inset 0 0 0 1.5px var(--vph-ink); }
.vm-sb-wait { min-height: 44px; display: flex; align-items: center; padding: 0 2px; font-size: 12.5px; color: var(--vph-ink-3); }
.vm-sb-catfail { display: flex; flex-direction: column; }
.vm-sb-catfail-t { padding: 0 2px; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.45; }

/* The grouped card: the prescription switch (it starts on) and the
   photo door. */
.vm-sb-group { background: var(--vph-grey-2); border-radius: 18px; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.vm-sb-rxrow {
    background: #fff;
    border-radius: 14px;
    padding: 4px 4px 4px 12px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-sb-rxmain { flex: 1; min-width: 0; }
.vm-sb-rxt { display: block; font-size: 14px; font-weight: 700; color: var(--vph-ink); }
.vm-sb-rxs { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.4; }
.vm-sb-toggle { width: 56px; }
.vm-sb-door {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px 10px 10px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    line-height: normal;
    color: var(--vph-ink);
}
.vm-sb-door:disabled { cursor: progress; }
.vm-sb-door--fail { padding: 10px 6px 10px 10px; }
.vm-sb-door-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-sb-door-tile i { font-size: 14px; }
.vm-sb-door--fail .vm-sb-door-tile { background: var(--vph-grey-2); color: var(--vph-ink-3); }
.vm-sb-door-main { flex: 1; min-width: 0; }
.vm-sb-door-t { display: block; font-size: 14px; font-weight: 700; color: var(--vph-ink); }
.vm-sb-door-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.4; }
.vm-sb-again {
    height: 44px;
    padding: 0 14px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vph-sep);
    color: var(--vph-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}
/* The foot: "Put it on my shelf", 52px, solid. */
.vm-sb-foot {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #fff;
    border-top: 1px solid var(--vph-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}

/* -- 38c: the stated row on 25a and 25c ---------------------------- */
.vm-sh-stlabel { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-sh-changewrap { background: var(--vph-grey-2); border-radius: 18px; padding: 6px; }
.vm-sh-change {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px 10px 10px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    line-height: normal;
    color: var(--vph-ink);
}
.vm-sh-change:active { background: var(--vph-canvas); }
.vm-sh-change .vm-sh-tile i { font-size: 13px; }
/* The frame's door title keeps the button's own `normal` line box. */
.vm-sh-change .vm-sh-nname { line-height: normal; }

/* -- 38d: on the counter's own page (08's card, 03 plain) ---------- */
.vm-cat-stated { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
/* 03 plain: the two wrappers draw no box on a catalogue box. */
.vm-pd-boxhead,
.vm-pd-id { display: contents; }
.vm-pd-card.is-stated .vm-pd-boxhead { display: flex; align-items: center; gap: 14px; }
.vm-pd-card.is-stated .vm-pd-id { display: block; flex: 1; min-width: 0; }
.vm-pd-card.is-stated .vm-pd-tile { width: 96px; height: 96px; flex-shrink: 0; border-radius: 16px; }
.vm-pd-card.is-stated .vm-pd-glyph { font-size: 28px; }
.vm-pd-card.is-stated .vm-pd-name {
    margin-top: 0;
    font-size: 22px;
    letter-spacing: -.5px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.vm-pd-meta { margin-top: 4px; font-size: 12.5px; color: var(--vph-ink-3); overflow-wrap: anywhere; }
.vm-pd-stated { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
/* The headline: "At <counter>", the price, its stock words, the white
   row. */
.vm-pd-hl.is-stated { gap: 0; }
.vm-pd-hl-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); }
.vm-pd-hl.is-stated .vm-pd-hl-price { margin-top: 4px; }
.vm-pd-hl.is-stated .vm-pd-hl-cur { font-size: 14px; color: var(--vph-ink); }
.vm-pd-hl-stock { margin-top: 3px; font-size: 12.5px; color: var(--vph-ink-2); }
.vm-pd-hl-say {
    margin-top: 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff;
}
.vm-pd-hl-say i { flex-shrink: 0; width: 14px; margin-top: 4px; text-align: center; font-size: 11px; color: var(--vph-primary-dark); }
.vm-pd-hl-say span { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
/* "What is on the box": the frame's grey group, a white block of 44px
   rows, then "How to take it: ask the pharmacy." */
.vm-pd-card.is-stated-facts { background: var(--vph-grey-2); box-shadow: none; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.vm-pd-card.is-stated-facts > .vm-pd-h { padding: 8px 8px 4px; font-family: var(--vph-font-body); font-size: 13.5px; letter-spacing: 0; }
.vm-pd-card.is-stated-facts .vm-pd-facts { margin-top: 0; gap: 0; background: #fff; border-radius: 12px; overflow: hidden; }
.vm-pd-card.is-stated-facts .vm-pd-fact-row { min-height: 44px; padding: 0 12px; align-items: center; font-size: 13px; }
.vm-pd-card.is-stated-facts .vm-pd-fact-row + .vm-pd-fact-row { border-top: 1px solid var(--vph-hairline); }
.vm-pd-card.is-stated-facts .vm-pd-fact-k { flex: 1; width: auto; color: var(--vph-ink-3); }
.vm-pd-card.is-stated-facts .vm-pd-fact-v { font-size: 13.5px; color: var(--vph-ink); text-align: right; }
.vm-pd-how { padding: 8px 8px 6px; font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.45; }

/* ----------------------------------------------------------------
   29f. SCREEN 43 — CLOSED FOR NOW, THE COUNTER'S SIDE (.vm-cl-*)
   On 29 (pharmacy/counter.html): 43a the door "Close for now", 43b
   the sheet "Close until when?", 43e's 29a after closing (the six-day
   strip, the row, "Open again now"). On 09 (pharmacy/queue.html): 43c,
   the band's "Open again now" (.vm-q-reopen); the OPEN pill is gone.
   Handoff: docs/design/pharmacy/screens/43/{README.md,frame.html}
   (signed off 2026-09-30; the FRAME wins on layout).

   What this section holds to:
     - The closed tint is #f1f5f9 with #475569 words; teal only where
       the counter can act (a chosen choice, the chosen day, the commit,
       "Open again now"). No red, no yellow, no prescription blue, no
       toggle, no badge.
     - White text sits on --vph-primary-solid (#0f6d5c), never on
       #16a085 (R-AA): the chosen chip, the commits. #16a085 is the
       strip's open time only, a mark with no text on it.
     - The day chips' rail BLEEDS to the sheet's edge and never shows a
       bar: overflow hidden, a finger drags it (counter.js), the arrow
       keys walk it. Never overflow-x:auto.
     - Every control is 44px or more; clocks and counts are tabular.
   (Placed before 29e so the two builders' sections never share a
   line; the TOC lists it after.)
   ---------------------------------------------------------------- */

/* -- 43a: the door, its own bordered group under "Your page" ------ */
.vm-cl-tile { background: var(--vph-grey-2); color: var(--vph-ink-3); }

/* -- 43b: the sheet "Close until when?" --------------------------- */
.vm-sheet--ct.vm-sheet--cl { padding: 10px 14px 22px; box-shadow: 0 -10px 30px rgba(2, 26, 21, .18); }
.vm-cl-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.vm-cl-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    line-height: 1.5;
}
.vm-cl-title:focus { outline: none; }
.vm-cl-cancel {
    height: 44px;
    min-width: 44px;
    padding: 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    line-height: normal;
}
.vm-cl-loading { padding: 18px 2px; }
.vm-cl-readfail { gap: 4px; }

.vm-cl-choices { display: flex; flex-direction: column; gap: 2px; }
.vm-cl-choice {
    width: 100%;
    min-height: 56px;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: normal;
}
.vm-cl-choice[aria-checked="true"] { background: var(--vph-tint); }
.vm-cl-choice-main { flex: 1; min-width: 0; }
.vm-cl-choice-t {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
}
.vm-cl-choice[aria-checked="true"] .vm-cl-choice-t { color: var(--vph-primary-dark); }
.vm-cl-choice-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-cl-mark { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; color: var(--vph-primary-dark); visibility: hidden; }
.vm-cl-choice[aria-checked="true"] .vm-cl-mark { visibility: visible; }
.vm-cl-rule { display: block; height: 1px; margin: 0 12px; background: var(--vph-hairline); }

/* The day chips: a rail that bleeds past the sheet's gutter, the chip
   the edge cuts being the sign that there are more. */
.vm-cl-days {
    position: relative;
    display: flex;
    gap: 7px;
    overflow: hidden;
    padding: 6px 14px 4px 12px;
    margin-right: -14px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.vm-cl-chip {
    flex-shrink: 0;
    width: 62px;
    height: 60px;
    border-radius: 13px;
    background: var(--vph-grey-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: normal;
}
.vm-cl-dday { font-size: 12.5px; font-weight: 700; color: var(--vph-ink); white-space: nowrap; }
.vm-cl-dtime { font-size: 11px; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-cl-chip[aria-checked="true"] { background: var(--vph-primary-solid); }
.vm-cl-chip[aria-checked="true"] .vm-cl-dday { color: #fff; }
.vm-cl-chip[aria-checked="true"] .vm-cl-dtime { color: var(--vph-grey); }

/* Only what is true: the queue, the prices, a duty night inside. */
.vm-cl-facts { background: var(--vph-grey-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.vm-cl-fact { background: #fff; border-radius: 10px; padding: 9px 11px; display: flex; align-items: flex-start; gap: 9px; }
.vm-cl-fact i { width: 14px; margin-top: 3px; flex-shrink: 0; text-align: center; font-size: 12px; color: var(--vph-ink-3); }
.vm-cl-fact span { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.vm-cl-duty { background: #fff; border-radius: 10px; overflow: hidden; }
.vm-cl-duty .vm-cl-fact { border-radius: 0; }
.vm-cl-skip {
    width: 100%;
    min-height: 44px;
    border-top: 1px solid var(--vph-hairline);
    background: #fff;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    line-height: normal;
}
.vm-cl-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--vph-sep);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
}
.vm-cl-skip[aria-checked="true"] .vm-cl-box { background: var(--vph-primary-solid); border-color: var(--vph-primary-solid); color: #fff; }
.vm-cl-skip > span:last-child { font-size: 13px; font-weight: 600; color: var(--vph-ink); }

/* "A word for customers · if you want", counted to 120. */
.vm-cl-word { display: flex; flex-direction: column; gap: 6px; }
.vm-cl-word-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; line-height: 1.5; }
.vm-cl-word-k label { font-size: 13px; font-weight: 700; color: var(--vph-ink); }
.vm-cl-word-k label span { font-weight: 500; color: var(--vph-ink-4); }
.vm-cl-count { flex-shrink: 0; font-size: 12px; color: var(--vph-ink-4); font-variant-numeric: tabular-nums; }
.vm-cl-notein {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1.5px solid var(--vph-sep);
    background: #fff;
    padding: 0 12px;
    font-size: 14px;
    color: var(--vph-ink);
    caret-color: var(--vph-primary);
}
.vm-cl-notein:focus { outline: none; border-color: var(--vph-primary); }

/* The commit, and what a refusal or a failure says under it. */
.vm-cl-go { display: flex; flex-direction: column; gap: 10px; }
.vm-cl-commit {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vph-primary-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-cl-commit[aria-busy="true"] { cursor: progress; }
.vm-cl-fail { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.5; }
.vm-cl-fail i { font-size: 12px; margin-top: 3px; flex-shrink: 0; }

/* -- 43e: 29a after closing --------------------------------------- */
.vm-cl-in { background: var(--vph-grey-2); }
.vm-cl-in .vm-ct-lead-k { color: var(--vph-ink-3); }
.vm-cl-in .vm-ct-lead-row i { color: var(--vph-ink-3); }
.vm-cl-rows { margin-top: 6px; }
/* The six-day strip: each cell is one Douala day, 00:00 to 24:00; the
   bar is #e2e8f0 (closed) and #16a085 marks the time that is open (the
   hours before the close, a kept duty night, the day it is back). */
.vm-cl-strip { margin-top: 12px; background: #fff; border-radius: 10px; padding: 11px 11px 9px; }
.vm-cl-cells { display: flex; gap: 4px; }
.vm-cl-cell { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; line-height: 1.5; }
/* Past six days the back day is the last cell, after a break. */
.vm-cl-cell.is-gap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    border-left: 1px dashed var(--vph-sep);
}
.vm-cl-cday { font-size: 11px; font-weight: 600; color: var(--vph-ink-3); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vm-cl-bar { position: relative; display: block; height: 12px; border-radius: 4px; background: var(--vph-grey); overflow: hidden; }
.vm-cl-seg { position: absolute; top: 0; bottom: 0; left: var(--l, 0%); width: var(--w, 0%); background: var(--vph-primary); }
.vm-cl-note { display: block; min-height: 14px; font-size: 10.5px; color: var(--vph-ink-3); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* -- 43c: 09's band while closed ---------------------------------- */
.vm-q-reopen {
    height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--vph-primary-dark);
    font-size: 14.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 16px rgba(3, 32, 26, .28);
}
.vm-q-reopen i { font-size: 13px; }
.vm-q-reopen[aria-busy="true"] { cursor: progress; }
/* On the dark band the refusal is white: ink would not read there. */
.vm-q-reopen-fail { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.5; }
.vm-q-reopen-fail i { font-size: 12px; margin-top: 3px; flex-shrink: 0; }
/* 37: while the pill holds a query the band folds; the act folds too. */
.vm-q-band.is-folded [data-reopen],
.vm-q-band.is-folded [data-reopen-fail] { display: none !important; }

/* ----------------------------------------------------------------
   29e. SCREENS 41 + 43 — THE CUSTOMER SIDE (.vm-cy-*, .vm-cz-*)
   41 (A second city): 41a's chip is §5's .vm-searchbar-city (44px
   since 41), 41b the sheet "Choose a city" (30e's geometry), 41c's
   end marker, 41f(1)'s white line, 41d's Town select on 27a.
   43 (Closed for now), the customer's reading: 01's pill, 08's lifted
   closed card (dated, undated, the kept duty night) and its hours
   card, 04's block, 07's greyed picker row. #f1f5f9 for a close,
   teal only where she can act (the duty night). No red, no yellow,
   no prescription blue. Contract: docs/design/pharmacy/screens/41
   and 43 (README + frame), PHARMACY_HUB §7.1–§7.3.
   ---------------------------------------------------------------- */

/* -- 41f(1): the one white line under the band ------------------- */
.vm-cy-gone {
    background: #fff;
    padding: 11px 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-cy-gone > i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    margin-top: 3px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

/* -- 41c: the list's end marker, "The only pharmacy in Yaoundé" -- */
.vm-cy-end {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px 0;
    font-size: 12px;
    color: var(--vph-ink-4);
    line-height: 1.5;
}
.vm-cy-end::before,
.vm-cy-end::after { content: ""; flex: 1; height: 1px; background: var(--vph-grey); }

/* -- 41b: choose a city — §8's sheet with 30e's values: a flat .5
   dim, a 22px top radius, 8/14/26 padding, 12 gaps, the frame's
   softer shadow; never scrolls sideways ---------------------------- */
.vm-cy-dim { background: rgba(15, 23, 42, .5); }
.vm-cy-sheet {
    overflow-x: hidden;
    padding: 8px 14px calc(26px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(2, 26, 21, .18);
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 1.5;
}
.vm-cy-grab { display: flex; justify-content: center; padding-top: 2px; flex-shrink: 0; }
.vm-cy-grab .vm-sheet-grab { margin: 0; }
.vm-cy-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.vm-cy-id { flex: 1; min-width: 0; }
.vm-cy-title {
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-cy-sub { font-size: 12.5px; color: var(--vph-ink-3); margin-top: 3px; line-height: 1.45; }
.vm-cy-cancel {
    height: 44px;
    min-width: 44px;
    padding: 0 6px;
    background: transparent;
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-cy-rows { display: flex; flex-direction: column; gap: 2px; }
.vm-cy-row {
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: 12px;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    line-height: normal;
}
.vm-cy-row.is-on { background: var(--vph-tint); }
.vm-cy-name {
    flex: 1;
    min-width: 0;
    font-family: var(--vph-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}
.vm-cy-row.is-on .vm-cy-name { color: var(--vph-primary-dark); }
.vm-cy-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-cy-mark { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; color: var(--vph-primary-dark); }
.vm-cy-hair { height: 1px; background: var(--vph-hairline); margin: 0 12px; }
.vm-cy-fail { display: flex; align-items: center; gap: 10px; padding: 0 2px 0 4px; }
.vm-cy-fail-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-cy-retry {
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

/* -- 41f(4): 02's bar names the counter's town when the list reads
   another city ("Pharmacie de la Paix · Douala") --------------------- */
.vm-cat-bar-town { color: var(--vph-primary-dark); }

/* -- 41d: 27a's Town, a native select (23a's), the chevron drawn over
   the native control's own ------------------------------------------ */
.vm-oyp-selectbox { position: relative; }
.vm-oyp-select {
    padding: 0 40px 0 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.vm-oyp-selectbox > i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--vph-ink-4);
    pointer-events: none;
}

/* -- 43 on 01: the card's pill says the close, in the line's grey -- */
.vm-pharm-pill.is-closed { color: var(--vph-ink-3); }
.vm-pharm-pill.is-closed .vm-pharm-dot { background: var(--vph-ink-4); }

/* -- 43d on 08: the hero pill "CLOSED FOR NOW", flat, grey dot ----- */
.vm-st-status.is-closed-now { color: var(--vph-ink-2); }
.vm-st-status.is-closed-now .vm-st-status-dot { background: var(--vph-ink-4); box-shadow: none; }

/* -- 43d on 08: the lifted closed card, then the hours card -------- */
.vm-cz-wrap {
    padding: 0 14px;
    margin-top: -22px;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
}
/* The duty night keeps 08's facts card under it: that card then sits in
   the page's flow, not lifted a second time. */
.vm-cz-wrap + .vm-st-facts-wrap.is-after { margin-top: 14px; }
.vm-cz-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    overflow: hidden;
}
.vm-cz-pad { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vm-cz-block { background: var(--vph-grey-2); border-radius: 14px; padding: 12px 14px 14px; }
.vm-cz-block--plain { padding: 12px 14px; }
.vm-cz-block--duty { background: var(--vph-tint); padding: 12px 14px; }
.vm-cz-label { font-size: 11.5px; font-weight: 600; color: var(--vph-ink-3); }
.vm-cz-block--duty .vm-cz-label { color: var(--vph-primary-dark); }
.vm-cz-fig {
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-top: 4px;
    white-space: nowrap;
}
/* The 26px figures (43e: no day, the duty night) keep the frame's
   inherited 1.5 line box; only the 30px day is set at 1.1. */
.vm-cz-fig--26 { font-size: 26px; letter-spacing: -.8px; line-height: 1.5; }
.vm-cz-rows { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.vm-cz-block--duty .vm-cz-rows { margin-top: 10px; }
.vm-cz-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-cz-row > i {
    font-size: 12px;
    color: var(--vph-ink-3);
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    text-align: center;
}
.vm-cz-block--duty .vm-cz-row > i { color: var(--vph-primary-dark); }
.vm-cz-row-t { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; font-variant-numeric: tabular-nums; }
.vm-cz-word { flex-direction: column; gap: 3px; }
.vm-cz-quote { font-size: 13px; color: var(--vph-ink); line-height: 1.45; overflow-wrap: anywhere; }
.vm-cz-sign { font-size: 12px; font-weight: 700; color: var(--vph-ink-3); }
.vm-cz-door {
    width: 100%;
    border-top: 1px solid var(--vph-hairline);
    padding: 10px 12px 10px 14px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
}
.vm-cz-door:hover { color: var(--vph-ink); }
.vm-cz-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-cz-door-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--vph-ink); line-height: 1.3; }
.vm-cz-chev { font-size: 13px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-cz-hours {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 13px 14px;
    display: flex;
    gap: 10px;
}
.vm-cz-hours-ico {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}
.vm-cz-hours-t { font-size: 12.5px; font-weight: 700; color: var(--vph-ink); font-variant-numeric: tabular-nums; }
.vm-cz-hours-s { font-size: 11.5px; color: var(--vph-ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* -- 43e on 04: a basket held at a closed counter ------------------ */
.vm-cz-bk {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.5;
}
.vm-cz-bk .vm-cz-block { padding: 12px 14px; }
.vm-cz-bk-t {
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vph-ink);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-cz-bk .vm-cz-rows { margin-top: 10px; }
.vm-cz-change {
    height: 48px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
}

/* -- 43e on 07: a closed counter in the Change sheet, greyed and not
   choosable (a <div>, never a button) ------------------------------- */
.vm-sw-pick.is-closed { background: var(--vph-canvas); cursor: default; }
.vm-sw-pick.is-closed .vm-sw-pick-name,
.vm-sw-pick.is-closed .vm-sw-pick-meta { color: var(--vph-ink-3); }

/* ----------------------------------------------------------------
   29g. SCREENS 45 + 47 — THE COUNTER SIDE (.vm-q-tb*, .vm-tb-*,
   .vm-st-gone*)
   45d on 09b: the record of a paper the customer took back, 40c's grey
   record block (not-filled.css's .vm-q-rec*, loaded on 09b) with a 30px
   title, For whom / Came with greyed, and the foot's one door. 45g on
   09b: taken back while she typed, one lifted card, its sentence and
   "See the record". 47i on 29 (Veranda took the counter off the list)
   and on 08 (a delisted slug).
   Handoff: docs/design/pharmacy/screens/45/ (45d, 45g) and
   screens/47/ (47i). No red, yellow or orange; no prescription blue:
   nothing here is an act on a prescription.
   ---------------------------------------------------------------- */

/* -- 45d: the record ------------------------------------------------ */
/* Two classes, so the 30px holds whichever of app.css / not-filled.css
   loads last. */
.vm-q-rec-title.vm-q-tb-title { font-size: 30px; letter-spacing: -1px; line-height: 1.1; }
.vm-q-tb-facts { border: 1px solid var(--vph-grey); border-radius: 14px; overflow: hidden; }
.vm-q-tb-fact {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}
.vm-q-tb-fact + .vm-q-tb-fact { border-top: 1px solid var(--vph-hairline); }
/* Greyed: the paper is gone, these are what it was. #64748b on white is
   4.8:1. */
.vm-q-tb-k { flex: 1 0 auto; font-size: 13px; color: var(--vph-ink-4); white-space: nowrap; }
.vm-q-tb-v {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--vph-ink-4);
    text-align: right;
    overflow-wrap: anywhere;
}
.vm-q-rec-foot.vm-q-tb-foot { padding: 6px 14px 8px; gap: 0; }

/* -- 45g: taken back while she typed --------------------------------- */
.vm-q-tbg {
    margin-top: 4px;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-q-tbg-say {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.vm-q-tbg-say i { font-size: 12px; color: var(--vph-ink-3); margin-top: 3px; flex-shrink: 0; }
.vm-q-tbg-go {
    height: 48px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

/* -- 47i on 29: taken off the list ----------------------------------- */
/* 43e's grey block (.vm-cl-in) at the frame's 26px, and the one door. */
.vm-ct-lead.vm-tb-lead { gap: 12px; }
.vm-tb-in { padding: 12px 14px; }
.vm-tb-in .vm-ct-lead-rows { margin-top: 10px; }
.vm-ct-lead-h.vm-tb-h { font-size: 26px; letter-spacing: -.8px; line-height: 1.5; }
.vm-tb-door .vm-ct-door-t { font-weight: 700; }
/* Slice F3 O3: the same block on 09a, 25 and 32, when a write is refused
   (queue-shell.js `delistedHtml`): the page's only content, 16px in. */
.vm-tb-page { padding: 16px 16px 24px; }

/* -- 47i on 08: a delisted slug --------------------------------------- */
.vm-st-gone {
    margin: 18px 14px 0;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-st-gone-in { background: var(--vph-grey-2); border-radius: 14px; padding: 14px; }
.vm-st-gone-h {
    font-family: var(--vph-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--vph-ink);
    line-height: 1.2;
    text-wrap: pretty;
}
.vm-st-gone-go {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vm-st-gone-go:hover { color: var(--vph-primary-dark); }

/* ----------------------------------------------------------------
   29h. SCREENS 44 + 45 + 46 + 47 — THE CUSTOMER SIDE (.vm-cc-*,
   .vm-ac-ci*, .vm-ac-rm*, .vm-ac-removed, .vm-od-tb*)
   44 What came in: the list page (came-in.html, 44b–44e) on 20's band,
   and 20's door (44a). 45 Take it back on 06 (45a–45c, 45g's 06 line).
   46 Remove my account: 20's last row (46a), its sheet (46b, 46c, 46e)
   and 01's one line after (46d). 16's taken-back row is not-filled.css's
   grey prescription row, unchanged.
   Handoff: docs/design/pharmacy/screens/44, 45, 46 (README + frame; the
   frame wins). No badge, no dot, no red, yellow or orange. Prescription
   blue only on a prescription's own tile and on 45's act (an act on a
   prescription); never on the exams side.
   ---------------------------------------------------------------- */

/* -- 44b: the band (20's, 16's classes) with one way back ----------- */
.vm-cc-band { line-height: 1.5; }
/* .vm-cc-back is the hub's one back control (.vm-back, Slice N 30b), white on the band
   (.vm-back--band). */
.vm-cc-label {
    position: relative;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vph-accent);
    line-height: 1.5;
}
.vm-cc-labelsep { color: rgba(143, 240, 139, .55); }
.vm-cc-head {
    position: relative;
    margin-top: 5px;
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* -- 44b: the body, the day cards, the rows -------------------------- */
.vm-cc-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px 14px 18px;
    line-height: 1.5;
}
.vm-cc-body > .vm-loading { padding: 4px 2px; }
.vm-cc-list { display: flex; flex-direction: column; gap: 18px; }
.vm-cc-day { display: flex; flex-direction: column; gap: 8px; }
.vm-cc-daytitle {
    padding: 0 4px;
    font-family: var(--vph-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vph-ink-2);
    letter-spacing: -.1px;
    line-height: 1.5;
}
.vm-cc-box {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-cc-box > * + * { border-top: 1px solid var(--vph-hairline); }
/* A row: the 38px tile, the event over the thing, the clock at the right,
   a teal chevron (a flat row keeps an empty 13px column so the clocks
   align). Unread rows on the #f4fbf9 wash, read rows on white. */
.vm-cc-row {
    width: 100%;
    min-height: 64px;
    background: #fff;
    padding: 11px 12px 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: 1.5;
    text-decoration: none;
}
.vm-cc-row:hover,
.vm-cc-row:visited { color: var(--vph-ink); }
.vm-cc-row.is-unread { background: #f4fbf9; }
a.vm-cc-row:active { background: var(--vph-canvas); }
a.vm-cc-row:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: -2px; }
.vm-cc-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.vm-cc-tile--teal { background: var(--vph-teal-tint); color: var(--vph-primary-dark); }
.vm-cc-tile--rx { background: #eef6fc; color: var(--vph-rx-solid); }
.vm-cc-tile--grey { background: var(--vph-grey-2); color: var(--vph-ink-3); }
.vm-cc-text { flex: 1; min-width: 0; }
.vm-cc-l1 { display: flex; align-items: baseline; gap: 10px; }
.vm-cc-event {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--vph-ink);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vm-cc-row.is-unread .vm-cc-event { font-weight: 700; }
/* A VM reference never breaks at its dash. */
.vm-cc-ref { white-space: nowrap; }
.vm-cc-clock {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    color: var(--vph-ink-4);
    font-variant-numeric: tabular-nums;
}
.vm-cc-row.is-unread .vm-cc-clock { font-weight: 700; color: var(--vph-primary-dark); }
.vm-cc-l2 {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--vph-ink-3);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
/* Each segment nowrap; the separator is glued to the segment after it. */
.vm-cc-seg,
.vm-cc-sepseg { white-space: nowrap; }
.vm-cc-sep { color: var(--vph-sep); }
/* Waiting for her: weight and the dark teal, never a badge. */
.vm-cc-seg.is-waiting { font-weight: 700; color: var(--vph-primary-dark); }
.vm-cc-chev { width: 13px; flex-shrink: 0; font-size: 13px; color: var(--vph-primary-dark); }
/* 44e: the thing is gone; the row stays, flat and read. */
.vm-cc-gone {
    margin-top: 7px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-cc-gone i { font-size: 11.5px; color: var(--vph-ink-3); margin-top: 3px; flex-shrink: 0; }

/* The list says where it ends. */
.vm-cc-end {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px 0;
    font-size: 12px;
    color: var(--vph-ink-4);
    line-height: 1.5;
    white-space: nowrap;
}
.vm-cc-rule { flex: 1; height: 1px; background: var(--vph-grey); }

/* 44d: nothing yet — one sentence on the grey ground. */
.vm-cc-body > .vm-cc-empty {
    margin: 12px 4px 0;
    font-size: 14px;
    color: var(--vph-ink-3);
    line-height: 1.5;
    text-wrap: pretty;
}

/* 44e: the read failed. */
.vm-cc-fail {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-cc-failline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
}
.vm-cc-failline i { font-size: 12px; margin-top: 4px; color: var(--vph-ink-3); flex-shrink: 0; }
.vm-cc-retry {
    height: 44px;
    border-radius: 999px;
    background: var(--vph-teal-tint);
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
}

/* The foot pill: at the foot of a short list, held at the phone's foot
   under a long one. */
.vm-cc-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--vph-hairline);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    line-height: 1.5;
}
.vm-cc-all {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vph-grey-2);
    color: var(--vph-ink);
    font-size: 14px;
    font-weight: 700;
}
.vm-cc-all[aria-disabled="true"] { opacity: .6; cursor: default; }
.vm-cc-footfail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-cc-footfail i { font-size: 12px; margin-top: 3px; color: var(--vph-ink-3); flex-shrink: 0; }
.vm-cc-retry:focus-visible,
.vm-cc-all:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }

/* -- 44a and 46a: 20's rows. Since the Oct 10 redesign (slice F20)
   they are rows of §24's groups ("For you", "This account"), styled
   there. ------------------------------------------------------------ */

/* -- 46b / 46c: the sheet ------------------------------------------- */
.vm-ac-rm-body { display: flex; flex-direction: column; gap: 14px; }
.vm-ac-rm-goes {
    background: var(--vph-grey-2);
    border-radius: 14px;
    padding: 12px 14px 14px;
}
.vm-ac-rm-k { font-size: 11.5px; font-weight: 600; color: var(--vph-ink-3); }
.vm-ac-rm-big {
    margin-top: 4px;
    font-family: var(--vph-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
}
.vm-ac-rm-list {
    list-style: none;
    margin: 10px 0 0;
    background: #fff;
    border-radius: 10px;
    padding: 2px 12px;
}
.vm-ac-rm-list li { padding: 10px 0; display: flex; align-items: flex-start; gap: 11px; }
.vm-ac-rm-list li + li { border-top: 1px solid var(--vph-grey); }
.vm-ac-rm-list i {
    width: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 12px;
    color: var(--vph-ink-4);
    text-align: center;
}
.vm-ac-rm-list span { font-size: 12.5px; font-weight: 500; color: var(--vph-ink-2); line-height: 1.4; }
.vm-ac-stays--rm .vm-ac-stays-v { font-size: 13.5px; line-height: 1.45; }
/* One deliberate tick: a real checkbox, drawn as the frame's 52px row. */
.vm-ac-tick {
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid var(--vph-grey);
    background: #fff;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    position: relative;
}
.vm-ac-tick.is-on { border-color: var(--vph-primary-dark); }
.vm-ac-tick-in {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.vm-ac-tick-box {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--vph-sep);
    background: #fff;
    color: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-ac-tick-box i { font-size: 11px; visibility: hidden; }
.vm-ac-tick.is-on .vm-ac-tick-box { background: var(--vph-primary-solid); border-color: var(--vph-primary-solid); }
.vm-ac-tick.is-on .vm-ac-tick-box i { visibility: visible; }
.vm-ac-tick-t { font-size: 13.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-ac-tick:has(.vm-ac-tick-in:focus-visible) { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
/* The commit keeps its words while grey (the one exception to 43's
   no-disabled rule); one tick makes it the solid act. */
.vm-ac-rm-go {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-grey);
    color: var(--vph-ink-3);
    font-size: 15px;
    font-weight: 700;
    cursor: default;
}
.vm-ac-rm-go.is-armed {
    background: var(--vph-primary-solid);
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 109, 92, .28);
    cursor: pointer;
}
.vm-ac-rm-go.is-busy { box-shadow: none; cursor: default; }
.vm-ac-rm-go:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ac-rm-fail {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-ac-rm-fail i { font-size: 12px; margin-top: 3px; color: var(--vph-ink-3); flex-shrink: 0; }

/* -- 46e: in place of the commit — every open thing at once ---------- */
.vm-ac-rm-open {
    background: var(--vph-grey-2);
    border-radius: 14px;
    padding: 12px 14px;
}
.vm-ac-rm-open .vm-ac-rm-big { font-size: 30px; letter-spacing: -1px; line-height: 1.1; }
.vm-ac-rm-rows { background: #fff; border: 1px solid var(--vph-grey); border-radius: 18px; overflow: hidden; }
.vm-ac-rm-rows > * + * { border-top: 1px solid var(--vph-hairline); }
.vm-ac-rm-row { text-decoration: none; }
.vm-ac-rm-row:hover,
.vm-ac-rm-row:visited { color: var(--vph-ink); }
.vm-ac-rm-row .vm-ac-row-s { color: var(--vph-ink-3); }
.vm-ac-row-tile.is-teal { background: var(--vph-teal-tint); color: var(--vph-primary-dark); }
.vm-ac-row-tile.is-rx { background: #eef6fc; color: var(--vph-rx-solid); }
.vm-ac-rm-row .vm-ac-row-chev { color: var(--vph-primary-dark); }
.vm-ac-ref { white-space: nowrap; }
/* The owner's card: 20c's dark door, the pharmacy's (or the structure's)
   name and never a person's. */
.vm-ac-counter.vm-ac-rm-owner { box-shadow: none; }
.vm-ac-rm-owner .vm-ac-counter-go { text-decoration: none; }

/* -- 46d: 01's one line, that visit only ------------------------------ */
.vm-ac-removed-wrap { padding: 14px 14px 0; }
.vm-ac-removed {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.4;
}
.vm-ac-removed i { font-size: 14px; color: var(--vph-primary-dark); flex-shrink: 0; }

/* -- 45a: 06's second footed row, "Take it back" --------------------- */
.vm-od-tbdoor {
    width: 100%;
    min-height: 56px;
    border-top: 1px solid var(--vph-hairline);
    background: #fff;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    line-height: 1.5;
}
.vm-od-tbdoor[aria-disabled="true"] { opacity: .65; }
.vm-od-tbdoor > i:first-child { width: 16px; flex-shrink: 0; text-align: center; font-size: 12.5px; color: var(--vph-ink-3); }
.vm-od-tbdoor > i:last-child { font-size: 13px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-od-tbdoor-main { flex: 1; min-width: 0; }
.vm-od-tbdoor-t { display: block; font-size: 13px; font-weight: 700; color: var(--vph-ink); }
.vm-od-tbdoor-s { display: block; margin-top: 2px; font-size: 11.5px; color: var(--vph-ink-3); }

/* -- 45b: the sheet "Take it back?" ---------------------------------- */
.vm-od-sheet.is-tb { border-radius: 22px 22px 0 0; }
/* The frame's handle sits 2px under the sheet's 8px padding; the shared
   confirm body's own padding gives way to 45b's. */
.vm-od-sheet.is-tb .vm-sheet-grab { margin: 2px auto 0; }
.vm-od-sheet.is-tb .vm-od-confirm { padding: 0; gap: 0; }
.vm-od-tb { padding: 14px 14px 22px; display: flex; flex-direction: column; gap: 14px; line-height: 1.5; }
.vm-od-tb-head { padding: 0 2px; }
.vm-od-tb-title {
    font-family: var(--vph-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.4px;
}
.vm-od-tb-sub { margin-top: 3px; font-size: 12.5px; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-od-tb-sep { color: var(--vph-sep); }
.vm-od-tb-rows {
    background: #eef6fc;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-od-tb-row,
.vm-od-tb-fact {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-od-tb-row i,
.vm-od-tb-fact i {
    width: 14px;
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 12px;
    text-align: center;
    color: var(--vph-rx-solid);
}
.vm-od-tb-row span,
.vm-od-tb-fact span { font-size: 12.5px; font-weight: 600; color: var(--vph-ink); line-height: 1.4; }
.vm-od-tb-fail { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--vph-ink-2); }
/* Solid, prescription blue: here nothing someone else started is lost. */
.vm-od-tb-go {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vph-rx-solid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 6px 16px rgba(27, 111, 168, .28);
}
.vm-od-tb-go i { font-size: 13px; }
.vm-od-tb-keep {
    width: 100%;
    height: 44px;
    margin-top: -6px;
    background: transparent;
    color: var(--vph-primary-dark);
    font-size: 14px;
    font-weight: 700;
}
.vm-od-tb-go[disabled],
.vm-od-tb-keep[disabled] { opacity: .6; box-shadow: none; cursor: default; }

/* -- 45c: 06 after — the grey block, the facts, the one act ----------- */
.vm-od-tb-block { background: var(--vph-grey-2); border-radius: 14px; padding: 12px 14px 14px; }
.vm-od-tb-k { font-size: 11.5px; font-weight: 600; color: var(--vph-ink-3); font-variant-numeric: tabular-nums; }
.vm-od-tb-big {
    margin-top: 4px;
    font-family: var(--vph-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -1px;
    line-height: 1.1;
}
.vm-od-tb-facts { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.vm-od-tb-fact i { color: var(--vph-ink-3); }

/* -- 45g on 06: the counter answered first ---------------------------- */
.vm-od-tb-moved {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
}
.vm-od-tb-moved i { font-size: 12px; margin-top: 3px; color: var(--vph-rx-solid); flex-shrink: 0; }

/* ----------------------------------------------------------------
   30. DESKTOP (>=901px)
   The full desktop layer is DEFERRED (PHARMACY_HUB §7.1). What ships:
   the .vm-dt-only visibility pattern and the rentals unwind hook
   (.vm-dt-shell) present but UNUSED — the 480px column is deliberately
   kept until the desktop pass lands, exactly as un-adapted rentals
   pages do. The desktop header that replaces the bottom bar, with the
   bar's five links, is Slice N's shared chrome (30b).
   The task screens 04, 05 and 19 need nothing here: .vm-app is already
   the centred 480px column, and none of them has a bottom nav to hide.
   Screen 20 is a nav destination in the same column: it loses only the
   tail that clears the bottom nav.
   ---------------------------------------------------------------- */
.vm-dt-only { display: none; }

@media (min-width: 901px) {
    .vm-dt-only { display: revert; }

    /* Opt-in unwind, kept for parity with the rentals shell. No
       pharmacy page carries .vm-dt-shell yet, so this rule is inert. */
    .vm-app.vm-dt-shell { max-width: none; box-shadow: none; }

    /* The bar, the tails and the footer's clearance give way to the
       desktop header here: Slice N's shared chrome (30b), below. */

    /* Two rows stay two rows on a wide window: four across, eight shown.
       home.js reads the same 901px breakpoint before it slices. */
    .vm-grid--more { grid-template-columns: repeat(4, 1fr); }
}

/* == Slice N shared chrome (identical in css/exams/app.css) == */
/* ----------------------------------------------------------------
   SLICE N — the health hub's chrome, one design everywhere (2026-10-06;
   docs/design/pharmacy/briefs/oct-2026-pass/nav-footer-contract.md,
   N1–N11). This block is pasted BYTE FOR BYTE into css/pharmacy/app.css
   and css/exams/app.css, so the two copies diff empty: literal values
   and --vm-* properties only, never one hub's own tokens. It sits near
   the end of each file, before the mobile overrides, and the per-page
   declarations it replaces are deleted from both files rather than
   overridden. Selectors name both halves' classes; a class one half
   does not use matches nothing there.
   ---------------------------------------------------------------- */

/* -- N1: the bar's height, the phone's home-indicator inset included.
   69px = the 1px rule + 6px above the 52px tabs + 10px under them. */
:root { --vm-nav-h: calc(69px + env(safe-area-inset-bottom, 0px)); }

/* -- N5: one focus ring on the bar, both halves. */
.vm-bottom-nav a:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; border-radius: 12px; }

/* -- N2: every spacer under a bar page's content clears the bar, inset
   and all: 23px of air over it (92px on a phone with no inset). */
.vm-dir-tail,
.vm-or-tail,
.vm-ac-tail,
.vm-st-tail,
.vm-ex-nav-tail { height: calc(23px + var(--vm-nav-h)); flex-shrink: 0; }

/* -- N3: on a bar page a toast floats 15px above the bar. */
body:has(.vm-bottom-nav) .vm-toast,
body:has(.vm-bottom-nav) .vm-ex-toast { bottom: calc(15px + var(--vm-nav-h)); }

/* -- N6: the owner bars, one build on both halves (three tabs each,
   unchanged): fixed to the foot of the 480px column, 64px of tabs over
   the inset. Their spacers clear the same height. */
.vm-q-nav,
.vm-ex-ls-tabs,
.vm-ex-dk-tabs,
.vm-ex-ly-tabs {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    height: auto;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 40;
}
.vm-q-clear,
.vm-ex-tabs-clear { height: calc(64px + env(safe-area-inset-bottom, 0px)); flex: 0 0 auto; }

/* -- N11: THE BACK CONTROL, one component on every page that has one.
   Its label is the title of the place you came from, a route name,
   never "Back to X" (N12); its glyph is the chevron. The hit area is
   44px and reaches 8px past the column's edge, so the glyph itself
   sits on the edge. Each page keeps its own class beside this one for
   placement only. */
.vm-back {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    min-width: 44px;
    min-height: 44px;
    margin-left: -8px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0f6d5c;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.vm-back i { flex-shrink: 0; font-size: 16px; line-height: 1; }
.vm-back:hover { color: #0b574a; }
.vm-back:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
/* On a teal or dark band: the same control, white (two classes, so a
   page's own "every link's focus ring is teal" rule cannot paint it
   teal on teal). */
.vm-back.vm-back--band,
.vm-back.vm-back--band:hover,
.vm-back.vm-back--band:visited { color: #fff; }
.vm-back.vm-back--band:focus-visible { outline-color: #fff; }

/* -- N8/N9: THE FOOTER. One footer, 01's markup, on the hub home and on
   the two pages a visitor lands on from the web (08 store, 12
   structure): navy, the teal hairline, Space Grotesk heads, #cbd5e1
   links (DESIGN_LOG 826-829, ported from rentals' .vm-foot — NEVER load
   css/footer.css: its unscoped .form-group{display:flex} breaks forms).
   "Open your pharmacy on Veranda" (.vm-foot-open) is 01's alone. No
   social row: its four links were href="#", and a dead link is not
   elegant; it returns with real accounts. A direct child of .vm-app
   after <main>, 24px under the content, before the sheets and the bar;
   it clears the bar itself (N2). #94a3b8 is sanctioned HERE and
   nowhere else (~7:1 on the navy). Every target is 44px. */
.vm-foot {
    --f-bg: #0f172a;
    --f-bg-2: #1e293b;
    --f-head: #f1f5f9;
    --f-link: #cbd5e1;
    --f-muted: #94a3b8;
    --f-line: rgba(148, 163, 184, .2);
    --f-line-soft: rgba(148, 163, 184, .14);
    --f-fill: rgba(255, 255, 255, .06);
    position: relative;
    flex-shrink: 0;
    margin-top: 24px;
    padding-bottom: calc(23px + var(--vm-nav-h));
    overflow: hidden;
    background: var(--f-bg);
    color: var(--f-muted);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: normal;
}
.vm-foot a { color: var(--f-link); text-decoration: none; }
.vm-foot a:hover { color: #8ff08b; }
.vm-foot a:focus-visible { outline: 2px solid #8ff08b; outline-offset: 2px; border-radius: 6px; }
.vm-foot-rule {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #16a085 10%, #16a085 90%, transparent);
}
.vm-foot h5 {
    margin: 0 0 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--f-head);
}

/* "Open your pharmacy on Veranda" — 01 only (rentals' newsletter slot). */
.vm-foot-open {
    position: relative;
    overflow: hidden;
    margin: 22px 14px 4px;
    padding: 26px 22px;
    border-radius: 22px;
    background: linear-gradient(145deg, var(--f-bg-2) 0%, var(--f-bg) 100%);
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
    text-align: center;
}
.vm-foot-open-glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 160, 133, .24) 0%, transparent 65%);
    pointer-events: none;
}
.vm-foot-open-title {
    position: relative;
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.3px;
    color: var(--f-head);
}
.vm-foot-open-sub { position: relative; margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; }
.vm-foot-open-btn {
    position: relative;
    margin-top: 18px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #0f6d5c;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-foot a.vm-foot-open-btn,
.vm-foot a.vm-foot-open-btn:hover { color: #fff; }
.vm-foot-open-btn i { font-size: 11px; }

/* The company: the lockup (to the site home) and one line. */
.vm-foot-brand { padding: 26px 18px 0; }
.vm-foot-lockup { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.vm-foot a.vm-foot-lockup:hover { color: inherit; }
.vm-foot-lockup img { width: 32px; height: 32px; border-radius: 8px; background: #fff; padding: 2px; }
.vm-foot-lockup > span { display: block; }
.vm-foot-name {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--f-head);
}
.vm-foot-tagline { display: block; font-size: 11px; color: var(--f-muted); }
.vm-foot-blurb { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; }

/* Two link columns: Pharmacy, Support. */
.vm-foot-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    padding: 26px 18px 0;
}
.vm-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vm-foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
.vm-foot-links a i { flex-shrink: 0; width: 12px; margin-right: 6px; font-size: 11px; color: #16a085; }

/* Get in touch: the head office, and the e-mail as a text link whose
   hit area is 44px tall without moving the line. */
.vm-foot-touch { padding: 26px 18px 0; }
.vm-foot-touch-list { display: flex; flex-direction: column; gap: 12px; }
.vm-foot-touch-row { display: flex; align-items: center; gap: 11px; }
.vm-foot-touch-row > i {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--f-fill);
    color: #16a085;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-foot-touch-row > div { min-width: 0; }
.vm-foot-touch-row strong { display: block; font-size: 12.5px; color: var(--f-head); }
.vm-foot-touch-row span { font-size: 12px; color: var(--f-muted); }
.vm-foot-touch-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -15px 0;
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* Accepted payments: Mobile Money and Cash (no in-app payment). */
.vm-foot-pay { padding: 26px 18px 0; text-align: center; }
.vm-foot-pay-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vm-foot-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--f-fill);
    border: 1px solid var(--f-line-soft);
    font-size: 12px;
    color: var(--f-link);
}
.vm-foot-pill i { font-size: 11px; color: #16a085; }

/* The bottom row: Privacy · Terms, the stated locale, the year. */
.vm-foot-bottom {
    margin-top: 26px;
    padding: 20px 18px 22px;
    border-top: 1px solid var(--f-line);
    text-align: center;
}
.vm-foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
.vm-foot-legal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
}
/* Inert on purpose: v1 is English-only, so the chips state the locale
   and must not look tappable. */
.vm-foot-locale { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.vm-foot-locale span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--f-fill);
    border: 1px solid var(--f-line-soft);
    font-size: 12px;
    color: var(--f-link);
}
.vm-foot-locale span i { font-size: 11px; }
.vm-foot-copy { margin: 16px 0 0; font-size: 11.5px; }
.vm-foot-copy i { font-size: 10px; color: #16a085; }

/* -- N5: THE DESKTOP HEADER. From 901px the bar gives way to this one on
   every bar page: the lockup on the left (to the site home), the bar's
   five links on the right in the bar's order, the lit one teal with a
   2px underline 6px under it; a 1px hairline; sticky. The tails and the
   footer's clearance go with the bar. */
.vm-dt-header { display: none; }
@media (min-width: 901px) {
    .vm-bottom-nav { display: none; }
    .vm-dir-tail,
    .vm-or-tail,
    .vm-ac-tail,
    .vm-st-tail,
    .vm-ex-nav-tail { display: none; }
    .vm-foot { padding-bottom: 24px; }
    body:has(.vm-bottom-nav) .vm-toast,
    body:has(.vm-bottom-nav) .vm-ex-toast { bottom: 24px; }

    .vm-dt-header {
        display: block;
        position: sticky;
        top: 0;
        z-index: 50;
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
    }
    .vm-dt-header-in {
        max-width: 1200px;
        height: 64px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        align-items: center;
        gap: 24px;
    }
    .vm-dt-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        margin-right: auto;
        color: #0f172a;
        text-decoration: none;
    }
    .vm-dt-brand:hover { color: #0f172a; }
    .vm-dt-brand > span { display: block; }
    .vm-dt-brand-logo { width: 34px; height: 34px; border-radius: 9px; }
    .vm-dt-brand-word {
        display: block;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.3px;
        color: #0f172a;
    }
    .vm-dt-brand-word span { color: #16a085; }
    .vm-dt-brand-strap { display: block; font-size: 10.5px; line-height: 1.3; color: #64748b; }
    .vm-dt-nav { display: flex; align-items: center; gap: 4px; }
    .vm-dt-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 10px;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        color: #334155;
        text-decoration: none;
        white-space: nowrap;
    }
    .vm-dt-link:hover { color: #0f6d5c; }
    .vm-dt-link[aria-current="page"] {
        color: #0f6d5c;
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
    }
    .vm-dt-brand:focus-visible,
    .vm-dt-link:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    /* 01's Basket: an act, not a place, so it stands apart from the five. */
    .vm-dt-link--basket { margin-left: 12px; padding: 0 16px; border: 1px solid #e2e8f0; border-radius: 999px; }
    .vm-dt-link--basket i { font-size: 13px; color: #0f6d5c; }
}
/* == end Slice N shared chrome == */

/* ----------------------------------------------------------------
   31. MOBILE OVERRIDES — keep at END of file (cascade-order trap)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {
    .vm-app { box-shadow: none; }
    body { background: var(--vph-canvas); }
}

/* 08 redesign (2026-09-24) */
/* The basket block's 13px answers fit two equal pills from a 375px phone
   up; below it "Switch to this pharmacy" is wider than its half, so the
   label wraps inside its 48px pill rather than spilling out of it. */
@media (max-width: 374px) {
    .vm-st-bask-go,
    .vm-st-bask-quiet { white-space: normal; padding: 0 12px; }
}

/* 26 (2026-09-27): a status line is one line where it fits (the frame's
   nowrap). "Closed · opens tomorrow 08:00" still fits beside a cover and a
   chevron at 360px, with a few pixels to spare; below a 375px phone it may
   wrap inside the row rather than run under the chevron on a narrower one. */
@media (max-width: 374px) {
    .vm-dir-status { white-space: normal; }
}

/* ----------------------------------------------------------------
   SCREEN 33d (2026-09-28): the doors into the site's root pages.
   07: under "Only this pharmacy sees your prescription.", a second
   white row, the door to /privacy.html#privacy-rx. The 33d frame's
   values: white, 1px #e2e8f0, radius 12, 44px, a 12px teal lock,
   13px/600 ink, an 11px teal chevron. Same tab.
   27: under the licence help line, "By listing, you accept the
   terms." The link is 44px tall inline (padding, cancelled by an
   equal negative margin so the line does not move), teal, same tab.
   ---------------------------------------------------------------- */
.vm-sp-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 12px;
    color: var(--vph-ink);
    text-decoration: none;
}
.vm-sp-privacy i {
    font-size: 12px;
    color: var(--vph-primary-dark);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.vm-sp-privacy span {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vph-ink);
}
.vm-sp-privacy .vm-sp-privacy-chev { font-size: 11px; }
.vm-oyp-terms {
    margin-top: 6px;
    font-size: 13px;
    color: var(--vph-ink-2);
    line-height: 1.5;
}
.vm-oyp-terms a {
    display: inline-block;
    padding: 13px 6px;
    margin: -13px -6px;
    color: var(--vph-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== slice A: fe-nav ===== */
/* ----------------------------------------------------------------
   16 + slice A (2026-10-04) — the Visits group on Orders.
   "Orders lists orders and visits" (30's redesign). The group reuses
   Earlier's container and hairline row (.vm-or-past, .vm-or-row, the
   date tile, the grey chevron); a visit row is a real link to 14, so it
   only needs its link states and the long date said to a screen reader
   (the tile is drawn for the eye and aria-hidden, as on a settled row).
   ---------------------------------------------------------------- */
a.vm-or-row:hover { color: var(--vph-ink); }
a.vm-or-row:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: -2px; }
.vm-or-vsr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ===== end slice A: fe-nav ===== */

/* ===== slice B: fe-08 ===== */
/* ----------------------------------------------------------------
   08 + 29a, the Oct 2026 pass, slice B (2026-10-04). Handoff:
   docs/design/pharmacy/screens/08/redesign-2026-10/{README.md,frame.html}.
   The store page becomes the pharmacy's own website, in two tabs,
   Shop · Our pharmacy (#our-pharmacy). Every rule below is scoped to the
   new markup or overrides 08's earlier rules for the elements that moved;
   the earlier blocks are left as they were.
   ---------------------------------------------------------------- */

/* A line said to a screen reader only (", average of the" before the
   reply time's basis, so the sentence reads whole). */
.vm-st-vsr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -- The header: the facts about RIGHT NOW --------------------------
   The Hours cell lost its week line (it lives in Our pharmacy). The
   measured reply time is ONE row in the teal block: the words, the 26px
   figure, the unit, and the basis set to the right. */
.vm-st-reply {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 11px 12px;
}
.vm-st-reply-fig { font-size: 26px; }
.vm-st-reply-unit { font-size: 13.5px; }
.vm-st-reply-basis { margin-left: auto; font-size: 11.5px; color: var(--vph-ink-3); }

/* -- The tabs ------------------------------------------------------
   A white track with a 1px edge, two 44px tabs; the selected one is the
   teal tint in dark teal (never white on #16a085). */
.vm-st-tabwrap { padding: 14px 14px 0; flex-shrink: 0; }
.vm-st-tabs {
    background: #fff;
    border: 1px solid var(--vph-grey);
    border-radius: 16px;
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.vm-st-tab {
    height: 44px;
    border-radius: 12px;
    background: transparent;
    color: var(--vph-ink-3);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.vm-st-tab i { font-size: 12px; }
.vm-st-tab[aria-selected="true"] { background: var(--vph-tint); color: var(--vph-primary-dark); font-weight: 700; }
.vm-st-tab:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }

/* The panels keep the page's own column (the hub shell is a flex column,
   and every section in them was written for one). */
.vm-st-panel { display: flex; flex-direction: column; flex-shrink: 0; }
.vm-st-panel:focus { outline: none; }
/* The search sits 12px under the switch, as the frame draws it. */
.vm-st-panel--shop .vm-st-searchwrap { padding-top: 12px; }

/* -- 08-2a-end: the door row at the foot of Shop -------------------- */
.vm-st-endwrap { padding: 14px 14px 0; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.vm-st-endrule { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.vm-st-endrule > span { flex: 1; height: 1px; background: var(--vph-grey); }
.vm-st-endrule > p { font-size: 12.5px; color: var(--vph-ink-4); line-height: 1.5; }
.vm-st-endrow {
    width: 100%;
    min-height: 64px;
    background: #fff;
    border-radius: 18px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    box-shadow: var(--vph-card-shadow);
}
.vm-st-endrow:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-st-endrow-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--vph-tint);
    color: var(--vph-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-st-endrow-ico i { font-size: 15px; }
.vm-st-endrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-st-endrow-t {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    /* `normal`, as the frame's <button> gives its text. */
    line-height: normal;
    overflow-wrap: anywhere;
}
.vm-st-endrow-s { font-size: 12.5px; color: var(--vph-ink-4); line-height: normal; }
.vm-st-endrow-go { font-size: 12px; color: var(--vph-primary-dark); flex-shrink: 0; }

/* -- Our pharmacy (08-2b, 08-2c) ------------------------------------
   One scroll, 18px between blocks; each block is its 15.5px head over a
   white card with the house shadow (the Oct 2026 frame lifts them). */
.vm-st-panel--ours .vm-st-about { padding: 14px 14px 0; gap: 18px; }
.vm-st-sec { display: flex; flex-direction: column; gap: 10px; }
.vm-st-sec--tight { gap: 8px; }
.vm-st-sec-h { padding: 0 2px; color: var(--vph-ink); line-height: 1.5; }
.vm-st-card { background: #fff; border-radius: 18px; box-shadow: var(--vph-card-shadow); }
.vm-st-card--rows { padding: 0 14px; }
.vm-st-card--rows .vm-st-row { min-height: 44px; padding: 0; gap: 10px; border-top: 1px solid var(--vph-hairline); }
.vm-st-card--rows .vm-st-row:first-child { border-top: none; }
.vm-st-card--rows .vm-st-row-k { gap: 8px; font-size: 13px; color: var(--vph-ink-3); }
.vm-st-card--rows .vm-st-row-k > i { font-size: 11px; width: 14px; text-align: center; color: var(--vph-primary); flex-shrink: 0; }
.vm-st-card--rows .vm-st-row-k > i.fa-moon { width: auto; color: var(--vph-primary-dark); }
.vm-st-card--rows .vm-st-row-v { font-size: 13px; font-weight: 600; color: var(--vph-ink); text-align: right; }
.vm-st-card--rows .vm-st-row-v--quiet { color: var(--vph-ink-3); }

/* 1. About us: their own words, signed with the pharmacy's name. */
.vm-st-own {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vph-card-shadow);
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vm-st-own-k {
    font-family: var(--vph-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vph-primary-dark);
    line-height: 1.5;
}
.vm-st-own-text {
    font-family: var(--vph-font-display);
    font-size: 16.5px;
    font-weight: 500;
    color: var(--vph-ink);
    line-height: 1.5;
    letter-spacing: -.15px;
    text-wrap: pretty;
    /* The counter's own paragraphs (the server keeps at most one blank
       line), and a long unbroken word never pushes the card sideways. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.vm-st-own-sign { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--vph-hairline); }
.vm-st-own-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: radial-gradient(circle at 50% 38%, rgba(22, 160, 133, .18) 0%, rgba(22, 160, 133, .05) 52%, #fff 80%);
    border: 1px solid var(--vph-tint);
    color: var(--vph-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-st-own-mark i { font-size: 14px; }
.vm-st-own-by { flex: 1; min-width: 0; font-size: 13px; color: var(--vph-ink-4); line-height: 1.35; overflow-wrap: anywhere; }
.vm-st-own-by strong { font-weight: 700; color: var(--vph-ink); }

/* 4. Finding the door: the 140px map slot, the street, the door photo. */
.vm-st-card--door { overflow: hidden; }
.vm-st-card--door .vm-st-map { height: 140px; }
.vm-st-card--door .vm-st-map-label { box-shadow: none; }
/* The frame: the street block padded 12 / 4, then either the door-photo
   row or a 10px foot. */
.vm-st-card--door .vm-st-addr { padding: 12px 14px 4px; }
.vm-st-card--door:not(.has-photo) .vm-st-addr { margin-bottom: 10px; }
.vm-st-card--door .vm-st-addr-line { font-size: 13px; font-weight: 700; color: var(--vph-ink); line-height: 1.5; }
.vm-st-card--door .vm-st-addr-sub { font-size: 12.5px; color: var(--vph-ink-3); margin-top: 3px; line-height: 1.45; }
.vm-st-doorphoto { display: flex; align-items: center; gap: 12px; padding: 8px 14px 12px; color: var(--vph-ink); }
.vm-st-doorphoto:hover { color: var(--vph-ink); }
.vm-st-addr[hidden] + .vm-st-doorphoto { padding-top: 12px; }
.vm-st-doorphoto-img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--vph-grey-2); }
.vm-st-doorphoto-main { flex: 1; min-width: 0; }
/* `normal`: the frame draws this row as a <button>, whose text takes the
   control's normal line box. */
.vm-st-doorphoto-t { display: block; font-size: 13px; font-weight: 700; color: var(--vph-ink); line-height: normal; }
.vm-st-doorphoto-s { display: block; font-size: 12px; color: var(--vph-ink-4); margin-top: 2px; line-height: normal; }
.vm-st-doorphoto-go { font-size: 12px; color: var(--vph-ink-4); flex-shrink: 0; }

/* 6. Call or message: one 48px tint pill, split by a hairline when
   there are two acts, one full pill when there is one. */
.vm-st-callpill { display: flex; align-items: center; height: 48px; border-radius: 999px; background: var(--vph-tint); }
.vm-st-callpill .vm-st-call {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 48px;
    border-radius: 999px;
    background: transparent;
    color: var(--vph-primary-dark);
    font-size: 13.5px;
    font-weight: 700;
    gap: 8px;
}
.vm-st-callpill .vm-st-call i.fa-whatsapp { font-size: 15px; }
.vm-st-callpill .vm-st-call:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-st-callsep { width: 1px; height: 22px; background: rgba(15, 109, 92, .2); flex-shrink: 0; }

/* 7. "Hours or address wrong?" + Tell us, at the frame's 12.5px / 14px. */
.vm-st-panel--ours .vm-st-wayout-text { font-size: 12.5px; }
.vm-st-panel--ours .vm-st-tell { padding: 0 14px; }

/* -- 29a "About us" (08-2d): the row and its sheet ------------------
   The frame's sheet: the 20px title alone, the line under it, a 150px
   box, the helper and the live "N / 400" on one row, then Cancel beside
   a solid Save (#0f6d5c under white, never #16a085). */
.vm-ct-about-title { font-size: 20px; }
.vm-ct-about-sub { font-size: 13px; color: var(--vph-ink-3); line-height: 1.5; margin-top: -8px; }
.vm-ct-about-in {
    min-height: 150px;
    border-radius: 14px;
    padding: 12px 13px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    field-sizing: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
}
.vm-ct-about-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: -4px;
    padding: 0 2px;
}
.vm-ct-about-foot .vm-ct-help { flex: 1; min-width: 0; }
.vm-ct-about-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-3);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.vm-ct-sacts--row { flex-direction: row; align-items: center; }
.vm-ct-sacts--row .vm-ct-cancel { width: auto; height: 48px; padding: 0 18px; flex-shrink: 0; }
.vm-ct-sacts--row .vm-ct-set { flex: 1; width: auto; }
/* ===== end slice B: fe-08 ===== */

/* ===== slice C: fe-pharmacy ===== */
/* ----------------------------------------------------------------
   48, A pharmacy and its laboratory — the Oct 2026 pass, slice C
   (2026-10-05). Handoff: docs/design/pharmacy/screens/48/{README.md,
   frame.html}; the director's contract F1-F6, R1-R12. 48a 08's door
   "Their laboratory", 48c 26's card row "Also a laboratory", 48e 29a's
   laboratory row, 48d the link sheet on 29a. The exams hub's kind tile
   (#0f6d5c ground, #8ff08b vials) is drawn with THIS hub's own rules:
   no exams CSS is linked. New selectors only; nothing above is edited.
   ---------------------------------------------------------------- */

/* -- 48a, 08 · Our pharmacy: "Their laboratory" ---------------------
   One white lifted 76px card (the house shadow: it can be tapped): the
   kind tile, the name in Space Grotesk 15.5px, "<Kind> · same address"
   (or the area; never a distance), the lab's own status line, and 01's
   green chevron disc. The line wraps rather than spill at 320px. */
.vm-st-link {
    width: 100%;
    min-height: 76px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--vph-card-shadow);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    /* `normal`, as the frame's <button> gives its text. */
    line-height: normal;
}
.vm-st-link:hover { color: var(--vph-ink); }
.vm-st-link:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-st-link-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .18) 0%, rgba(143, 240, 139, 0) 62%), var(--vph-primary-dark);
    color: var(--vph-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-st-link-tile i { font-size: 16px; }
.vm-st-link-main { flex: 1; min-width: 0; }
.vm-st-link-name {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vph-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-st-link-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--vph-ink-3); line-height: 1.35; }
.vm-st-link-sep { color: var(--vph-sep); }
/* The lab's words: the teal ink while it takes samples or is open; grey
   when it is closed, closed for now, or between sample windows — the
   frame's closed variant, #475569 words beside a hollow 1.5px #64748b ring
   (the same as 12's "Their pharmacy" door). Never hidden for being closed. */
.vm-st-link-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vph-ink-3);
    line-height: normal;
    font-variant-numeric: tabular-nums;
}
.vm-st-link-status.is-lit { color: var(--vph-primary-dark); }
.vm-st-link-status > i { font-size: 10.5px; color: var(--vph-ink-4); flex-shrink: 0; }
.vm-st-link-status.is-lit > i { color: var(--vph-primary); }
.vm-st-link-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--vph-primary);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .22);
    flex-shrink: 0;
}
.vm-st-link-dot.is-hollow { background: transparent; box-shadow: none; border: 1.5px solid var(--vph-ink-4); }
.vm-st-link-go {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1ab394 0%, var(--vph-primary) 100%);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .12), 0 3px 8px rgba(22, 160, 133, .32);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-st-link-go i { font-size: 10px; margin-left: 1px; }

/* -- 48c, 26's card: "Also a laboratory: <name>" --------------------
   One 44px row, drawn as the frame draws it inside the facts column
   (8px gap, -6px margins): after the facts on an open card, after the
   name block on a closed or duty card, before the buttons. */
.vm-dir-link {
    min-height: 44px;
    margin: 6px 0 -6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--vph-ink-2);
    text-align: left;
}
.vm-dir-facts + .vm-dir-link { margin-top: 2px; }
.vm-dir-link:hover { color: var(--vph-ink-2); }
.vm-dir-link:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; border-radius: 8px; }
.vm-dir-link-ic { width: 16px; display: flex; justify-content: center; flex-shrink: 0; color: var(--vph-primary); }
.vm-dir-link-ic i { font-size: 12px; }
.vm-dir-link-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vm-dir-link-t strong { font-weight: 700; color: var(--vph-ink); }
.vm-dir-link-go { font-size: 11px; color: var(--vph-primary-dark); flex-shrink: 0; }

/* -- 48e, 29a: the laboratory row -----------------------------------
   Drawn as 29a's other doors. Linked, the row is a link to the lab's
   page with a quiet "Unlink" (44px, its own control) at its end; a
   refused or dropped unlink says so under the row. */
.vm-ct-door--link { padding: 0 12px 0 0; flex-wrap: wrap; align-items: stretch; column-gap: 8px; row-gap: 0; }
/* The chevron after Unlink sits on the row's middle, as on 29a's other doors,
   and a tap on it opens the lab's page like the row (counter.js routes it). */
.vm-ct-door--link > .vm-ct-chev { align-self: center; cursor: pointer; }
/* The row keeps 29a's 64px door (its border inside it); the link fills it. */
.vm-ct-lk-open {
    flex: 1;
    min-width: 0;
    padding: 10px 0 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--vph-ink);
    line-height: normal;
}
.vm-ct-lk-open:hover { color: var(--vph-ink); }
.vm-ct-lk-open:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: -2px; }
.vm-ct-unlink {
    align-self: center;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--vph-grey-2);
    color: var(--vph-ink-2);
    font-size: 12.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ct-unlink:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ct-lk-err {
    flex-basis: 100%;
    margin-top: -4px;
    padding: 0 0 12px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.45;
}

/* -- 48d, the sheet "Link your laboratory" --------------------------
   The title with Cancel beside it; the account's listings as one radio
   group (60px rows, the chosen one on the teal tint with its check; a
   listing linked to another pharmacy on grey, not choosable); the helper;
   the preview of the door customers will see; the solid commit (#0f6d5c
   under white, never #16a085), held until a listing is chosen. */
.vm-ct-lk-head { gap: 10px; padding: 0 2px; }
.vm-ct-lk-cancel {
    height: 44px;
    padding: 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    line-height: normal;
    flex-shrink: 0;
}
.vm-ct-lk-cancel:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; border-radius: 8px; }
.vm-ct-lk-pick { display: flex; flex-direction: column; gap: 6px; }
.vm-ct-lk-rows { display: flex; flex-direction: column; gap: 6px; }
.vm-ct-lk-row {
    width: 100%;
    min-height: 60px;
    border-radius: 14px;
    background: var(--vph-canvas);
    padding: 8px 12px 8px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vph-ink);
    line-height: 1.5;
}
.vm-ct-lk-row.is-on { background: var(--vph-tint); }
.vm-ct-lk-row:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ct-lk-row.is-taken { background: var(--vph-grey-2); cursor: not-allowed; }
.vm-ct-lk-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .18) 0%, rgba(143, 240, 139, 0) 62%), var(--vph-primary-dark);
    color: var(--vph-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ct-lk-tile i { font-size: 16px; }
.vm-ct-lk-tile--sm { width: 34px; height: 34px; }
.vm-ct-lk-tile--sm i { font-size: 13px; }
.vm-ct-lk-main { flex: 1; min-width: 0; }
.vm-ct-lk-name {
    display: block;
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.vm-ct-lk-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--vph-ink-2); line-height: 1.5; }
.vm-ct-lk-sep { color: var(--vph-ink-4); }
.vm-ct-lk-taken { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ct-lk-row.is-taken .vm-ct-lk-name { color: var(--vph-ink-3); }
.vm-ct-lk-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid var(--vph-ink-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ct-lk-row.is-on .vm-ct-lk-check { border: none; color: var(--vph-primary-dark); }
.vm-ct-lk-row.is-taken .vm-ct-lk-check { border-color: var(--vph-sep); }
.vm-ct-lk-check i { font-size: 18px; }
.vm-ct-lk-help { padding: 0 4px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ct-lk-prev {
    background: var(--vph-tint);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.vm-ct-lk-prev-k { font-size: 11.5px; font-weight: 600; color: var(--vph-primary-dark); line-height: 1.5; }
/* The preview's head "Our laboratory" (48-d, all widths): its own rule, not
   the listing row's name. */
.vm-ct-lk-prev-h {
    font-family: var(--vph-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vph-ink);
    line-height: 1.5;
}
.vm-ct-lk-prev-card { background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.vm-ct-lk-prev-t { display: block; font-size: 13px; font-weight: 700; color: var(--vph-ink); line-height: 1.5; overflow-wrap: anywhere; }
.vm-ct-lk-prev-s { display: block; margin-top: 1px; font-size: 12px; color: var(--vph-ink-3); line-height: 1.5; }
.vm-ct-lk-prev-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: 1.5;
}
.vm-ct-lk-prev-line i { font-size: 11px; color: var(--vph-primary-dark); flex-shrink: 0; }
.vm-ct-lk-go {
    min-height: 52px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(15, 109, 92, .28);
}
.vm-ct-lk-go i { font-size: 13px; flex-shrink: 0; }
.vm-ct-lk-fielderr { margin-top: -6px; padding: 0 2px; }
/* ===== end slice C: fe-pharmacy ===== */

/* ===== slice D: fe-08-photos ===== */
/* ----------------------------------------------------------------
   08 · Our pharmacy, the Photos block — the Oct 2026 pass, slice D
   (2026-10-05). Handoff: docs/design/pharmacy/screens/08/redesign-2026-10/
   frame.html, 08-2b §2 ("Photos", "See all 5", "The counter", "+2");
   the director's contract F1-F3. The counter's own gallery, read-only:
   the head row (15.5px heading, the 44px "See all N"), then one white
   lifted 226px grid, 2fr / 1fr over two 104px rows, 6px gaps and
   padding, the first photo spanning both rows with its caption on a
   dark-teal fade, "+K" on a dark-teal veil over the third. Fewer photos
   fill the same grid (one alone, or two tall tiles). Then the "See all"
   sheet in §8's chrome, opened in place: no slide, no new animation.
   New selectors only; nothing above is edited.
   ---------------------------------------------------------------- */
.vm-st-ph-head { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.vm-st-ph-head .vm-st-ph-h { flex: 1; min-width: 0; padding: 0; }
.vm-st-ph-all {
    height: 44px;
    padding: 0 4px;
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    /* `normal`, as the frame's <button> gives its text. */
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.vm-st-ph-all i { font-size: 11px; }
.vm-st-ph-all:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; border-radius: 8px; }
.vm-st-ph-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 104px 104px;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--vph-card-shadow);
}
.vm-st-ph-grid--1 { grid-template-columns: 1fr; }
.vm-st-ph-grid.is-opens .vm-st-ph-tile { cursor: pointer; }
.vm-st-ph-tile { position: relative; min-width: 0; overflow: hidden; background: var(--vph-grey-2); }
.vm-st-ph-tile img { width: 100%; height: 100%; object-fit: cover; }
.vm-st-ph-tile--1 { grid-row: 1 / span 2; border-radius: 14px 6px 6px 14px; }
.vm-st-ph-tile--2 { border-radius: 6px 14px 6px 6px; }
.vm-st-ph-tile--3 { border-radius: 6px 6px 14px 6px; }
.vm-st-ph-grid--1 .vm-st-ph-tile--1 { border-radius: 14px; }
.vm-st-ph-grid--2 .vm-st-ph-tile--2 { grid-row: 1 / span 2; border-radius: 6px 14px 14px 6px; }
/* The first photo's caption, white 11.5px on the frame's fade to
   rgba(4, 38, 32, .72); two lines at most, never past the tile.
   Slice E (E10, 2026-10-05): the fade reaches .62 where the words begin
   (the 22px top padding) and .72 at the foot, so every glyph sits on at
   least .62 — white over that, over a white patch of the picture, is
   4.67:1 (AA). Above the words it still fades from clear. */
.vm-st-ph-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 9px;
    background: linear-gradient(180deg, rgba(4, 38, 32, 0) 0%, rgba(4, 38, 32, .62) 22px, rgba(4, 38, 32, .72) 100%);
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
/* "+K": the count of photos not on the grid, on a .62 veil (slice E,
   E10: the frame's .55 gave white 3.75:1 over a white patch; .62 gives
   4.67:1, AA for 18px text). */
.vm-st-ph-more {
    position: absolute;
    inset: 0;
    background: rgba(4, 38, 32, .62);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vph-font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* -- The sheet: "Photos", Close, every photograph at the card's width -- */
.vm-sheet--ph {
    /* Opened and closed in place (no slide): no new animation. */
    transition: none;
    /* Up and down only: §8's overflow-y alone would compute overflow-x to
       auto. Close stays reachable however many photos there are. */
    overflow-x: hidden;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    line-height: 1.5;
}
.vm-sheet--ph .vm-sheet-title-row { gap: 10px; }
.vm-st-ph-title { flex: 1; min-width: 0; color: var(--vph-ink); letter-spacing: -.3px; line-height: 1.3; }
.vm-st-ph-title:focus { outline: none; }
.vm-st-ph-close {
    height: 44px;
    padding: 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    line-height: normal;
    flex-shrink: 0;
}
.vm-st-ph-close:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; border-radius: 8px; }
.vm-st-ph-list {
    list-style: none;
    margin: 0;
    padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vm-st-ph-item { margin: 0; padding: 0; }
.vm-st-ph-big {
    width: 100%;
    height: auto;
    aspect-ratio: 400 / 330;
    object-fit: cover;
    border-radius: 16px;
    background: var(--vph-grey-2);
}
.vm-st-ph-text {
    margin-top: 8px;
    padding: 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
/* ===== end slice D: fe-08-photos ===== */

/* ===== slice E: fe-29a-photos ===== */
/* ----------------------------------------------------------------
   29a · Photos — the Oct 2026 pass, slice E (2026-10-05). The owner's
   gallery on her counter page: 29a's door (a glyph tile, drawn by 29a's
   own door rules) and its house sheet. The contract's E7: one row per
   photo (a 76px thumbnail, the caption box, "Make first" / "Remove" and
   the live "n/40"), "Add a photo" with "k of 8" beside it, the helper,
   then Cancel beside a solid Save (#0f6d5c under white, never #16a085),
   kept in view at the sheet's foot however many photos there are. An
   uploading row greys its preview and draws a thin bar whose width is set
   through the CSSOM (no transition: no new animation); a failed row says
   so in ink, never red. Sub text #475569, teal #0f6d5c. New selectors
   only; the one edit above this block is E10's two values in slice D.
   ---------------------------------------------------------------- */
.vm-ct-gl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-ct-gl-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px;
    border-radius: 16px;
    background: var(--vph-canvas);
    border: 1px solid var(--vph-grey);
}
.vm-ct-gl-row:focus { outline: none; }
.vm-ct-gl-row:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: 2px; }
.vm-ct-gl-thumb {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--vph-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ct-gl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The picture glyph only where there is no picture (none, or it failed). */
.vm-ct-gl-none { font-size: 20px; color: var(--vph-ink-4); }
.vm-ct-gl-thumb img ~ .vm-ct-gl-none { display: none; }
/* On its way, or failed: the preview greyed (a picture, not words). */
.vm-ct-gl-row.is-up .vm-ct-gl-thumb img,
.vm-ct-gl-row.is-failed .vm-ct-gl-thumb img { filter: grayscale(1); opacity: .5; }
.vm-ct-gl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-ct-gl-cap {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vph-sep);
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vph-ink);
    line-height: normal;
    caret-color: var(--vph-primary);
    text-overflow: ellipsis;
}
.vm-ct-gl-cap::placeholder { color: var(--vph-ink-4); font-weight: 500; opacity: 1; }
.vm-ct-gl-cap:focus { outline: none; border-color: var(--vph-primary); }
/* The quiet acts: words on no fill, 44px; "Remove" in grey ink. */
.vm-ct-gl-acts { display: flex; align-items: center; flex-wrap: wrap; column-gap: 2px; margin-left: -8px; }
.vm-ct-gl-act {
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vph-primary-dark);
    line-height: normal;
}
.vm-ct-gl-act--rm { color: var(--vph-ink-3); }
.vm-ct-gl-act:focus-visible { outline: 2px solid var(--vph-primary); outline-offset: -2px; }
/* 49: the first ready photo's "Main photo" tag, a mint pill at every width
   (it was bare text on the phone; the desktop pass drew the pill). */
.vm-ct-gl-tag {
    margin: 0 6px 0 8px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #e3f4f0;
    color: #0f6d5c;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.vm-ct-gl-n {
    margin-left: auto;
    padding-right: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vph-ink-3);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.vm-ct-gl-say { padding-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--vph-ink-3); line-height: 1.45; }
.vm-ct-gl-say.is-failed { color: var(--vph-ink); }
.vm-ct-gl-bar { display: block; height: 4px; margin: 6px 0 2px; border-radius: 999px; background: var(--vph-grey); overflow: hidden; }
.vm-ct-gl-barfill { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: var(--vph-primary); }
.vm-ct-gl-err { margin-top: -6px; padding: 0 2px; }
.vm-ct-gl-add { display: flex; align-items: center; gap: 12px; }
.vm-ct-gl-addbtn { width: auto; flex-shrink: 0; padding: 6px 18px; font-size: 13.5px; }
.vm-ct-gl-addbtn:disabled { background: var(--vph-grey-2); color: var(--vph-ink-3); cursor: not-allowed; }
.vm-ct-gl-count {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vph-ink-3);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}
.vm-ct-gl-help { margin-top: -6px; padding: 0 2px; }
/* Cancel and Save stay at the sheet's foot while the rows scroll under
   them (04b's rule: neither is found by scrolling). The bar covers the
   sheet's own 18px foot padding so nothing shows beneath it. */
.vm-ct-gl-foot {
    position: sticky;
    bottom: -18px;
    z-index: 1;
    margin: 0 -16px -18px;
    padding: 10px 16px 18px;
    background: #fff;
    border-top: 1px solid var(--vph-hairline);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ===== end slice E: fe-29a-photos ===== */

/* =================================================================
   SLICE F2 — location (Oct 2026 pass, slice-f2-contract.md)
   26b's Allow row (.vm-dir-line, unchanged) reused on 01 and 08; 26's
   eyebrow becomes 01's city chip (L7); 01's far line (L8). No new
   colours: every value is a --vph token or 26's own band values. AA.
   ================================================================= */

/* -- 26 (L7): the eyebrow is a 44px door to 41b, in the eyebrow's own
   type; the caret says it opens. The text stays where the frame draws
   it: the 6px pad is taken back by the margin. ---------------------- */
.vm-dir-city {
    height: 44px;
    min-width: 44px;
    max-width: 72%;
    margin-left: -6px;
    padding: 0 6px;
    border-radius: 12px;
    background: transparent;
    line-height: normal;
}
.vm-dir-city [data-city] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-dir-city .vm-dir-city-caret { font-size: 9px; }
.vm-dir-city:hover { background: rgba(255, 255, 255, .08); }
/* The app's dark-teal ring would vanish on the band: white there. */
.vm-dir-app .vm-dir-city:focus-visible { outline-color: #fff; }

/* -- 08 (L2): the Allow row under the facts card, in the tabs' rhythm */
.vm-st-allowwrap { padding: 14px 14px 0; flex-shrink: 0; }

/* -- 01 (L8): every counter drawn is far from the phone. Grey words
   and a 44px text door to 41b; never a card, never a colour. ------- */
.vm-far {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8px;
    padding: 0 4px;
    font-size: 12.5px;
    color: var(--vph-ink-3);
    line-height: 1.45;
}
.vm-far-t { min-width: 0; }
.vm-far-go {
    height: 44px;
    min-width: 44px;
    padding: 0 2px;
    color: var(--vph-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* ===== end slice F2 ===== */