/* ===================================================================
   EXAMS VERTICAL — SHARED APP SHELL (app.css)
   ===================================================================
   Screen 10 (10a the landing, 10b the search) is the mobile-first shell
   every later exams screen (11-15) reuses. Pixel truth:
     docs/design/pharmacy/package/... + the screen-10 handoff
     ("Screen 10 - Finding an exam/{README.md,frame.html}").
   Design log: docs/design/pharmacy/package/DESIGN_LOG.md, "Screen 10".

   SELF-CONTAINED, like the pharmacy hub and for the same reasons. This
   file NEVER <link>s or @imports css/style.css, css/footer.css, a
   css/rentals/ file or a css/pharmacy/ file: footer.css declares an
   unscoped .form-group{display:flex}, the rentals mobile base is
   byte-frozen, and a vertical that borrows another vertical's stylesheet
   inherits its colour the next time that colour moves. The tokens and
   the base block below are COPIES of the pharmacy §1-§2 blocks,
   re-tinted to this vertical's ground.

   The cross-screen rules this file encodes (handoff "Exams-side rules"):
     - #0f6d5c is the ground. The band material and its two inset
       hairlines are quoted character for character from the handoff.
     - PRESCRIPTION BLUE (#3498db / #1b6fa8) NEVER APPEARS on this side.
       Neither does any yellow or orange. Swept by exams-home.spec.js.
     - Small text on the teal band is #fff or #e2e8f0. #cbd5e1 is 3.8:1
       on #12775f and fails.
     - No basket, no counter bar anywhere on this side. The five-item bottom
       bar (§25, Oct 2026 pass) sits on the hub pages only; from 901px the
       desktop header takes its place (slice N).
     - No stars, no badges, no "cheapest", no minutes and no ETAs.
     - Every tappable control is 44px. Money and distance are tabular.
     - No inline style attributes; every variant is a class.

   Sections:
      1. Tokens
      2. Base block (reset, form-control typography, [hidden] guard)
      3. App frame (.vm-app) + the teal band
      4. Screen 10a — the landing
      5. Screen 10b — the search
      6. Empty / loading states
      7. Screen 11 — one exam, every structure
      8. Screen 12 — one structure, everything it does (+ the visit bar)
      9. Screen 13 — booking the visit
     10. Screen 14 — the visit confirmed
     11. Screen 15 — my visits
     12. Screen 18 — a structure's hours (the structure side)
     13. Screen 22 — my listing (the structure side)
     14. Screen 21 — who is coming (the structure side's desk)
     15. Screen 23 — list your structure (the structure side's onboarding)
     16. Screen 24 — my results
     17. Screen 28 — send a result (the structure side)
     18. Screen 30 — all structures (the exams directory)
     19. Screen 31 — your structure (the structure side's facts)
     20. Screen 34 — the desk answers (21's additions; states on 13, 14, 15)
     21. Screen 36 — what came in (21's additions: the news row, the sheet)
     22. Wide layout (>=720px) — always last of the screens' own sections
         (33d's doors and 23 below it carry their own wide rules)
     23. Screens 41 + 43 — a second city (10a, 30); closed for now (31,
         21, 12)
     ... 24-30: screen 45 and the Oct 2026 slices (each fenced)
     Slice N shared chrome — the bar's height, tails, toasts, owner bars,
         the back control (.vm-back), the footer (.vm-foot) and the
         desktop header: BYTE-IDENTICAL with css/pharmacy/app.css
     32. Slice N — what only this side needs
   =================================================================== */

/* ----------------------------------------------------------------
   1. TOKENS
   The pharmacy set, re-tinted. --vex-rx does NOT exist: there is no
   prescription on this side and no token to reach for by accident.
   ---------------------------------------------------------------- */
:root {
    --vex-ground: #0f6d5c;         /* the vertical's ground — doors, glyphs   */
    --vex-ground-hi: #12775f;      /* top of the band                         */
    --vex-ground-lo: #0c5b4c;      /* foot of the band                        */
    --vex-accent: #8ff08b;         /* the band's lit corner                   */
    --vex-pharm: #16a085;          /* the pharmacy side's dot, on 10b only    */
    /* Screen 18's non-text marks: the pending field's 1.5px edge, the
       timeline's Samples bar and the Doors-open tint. NEVER a fill under
       white text — white on #16a085 is 3.3:1 (PHARMACY_HUB §7.16 R-AA);
       every commit and selected fill is --vex-ground. */
    --vex-mark: #16a085;
    --vex-mark-tint: rgba(22, 160, 133, .24);
    --vex-tint: #e3f4f0;           /* teal tint — glyph tiles, preparation    */
    --vex-ink: #0f172a;
    --vex-ink-2: #334155;
    --vex-ink-3: #475569;
    --vex-ink-4: #64748b;
    --vex-on-band: #e2e8f0;        /* the FLOOR for small text on the band    */
    --vex-grey: #e2e8f0;
    --vex-grey-2: #f1f5f9;
    --vex-canvas: #f8fafc;
    --vex-sep: #cbd5e1;
    --vex-hairline: #f0f2f4;
    --vex-page-bg: #e9ebee;
    --vex-card-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    --vex-band: radial-gradient(118% 88% at 88% 0%, rgba(143, 240, 139, .14) 0%, rgba(15, 109, 92, 0) 58%),
                linear-gradient(180deg, #12775f 0%, #0c5b4c 100%);
    --vex-band-inset: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(3, 32, 26, .55);
    --vex-font-body: 'Inter', -apple-system, sans-serif;
    --vex-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(--vex-page-bg); }
a { color: var(--vex-ground); text-decoration: none; }
a:hover { color: #0b5949; }
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; }

/* 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, distance and money run is tabular. */
.vm-num { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------
   3. APP FRAME + THE TEAL BAND
   Design canvas is 390px; production shows a centred 480px column, the
   same frame the pharmacy hub ships. Since the Oct 2026 pass the hub pages
   carry the bottom bar (§24) and a `.vm-ex-nav-tail` gutter; task pages do not.
   ---------------------------------------------------------------- */
.vm-app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    background: var(--vex-canvas);
    color: var(--vex-ink);
    font-family: var(--vex-font-body);
    box-shadow: 0 0 40px rgba(16, 24, 40, .08);
    display: flex;
    flex-direction: column;
}

/* The band. One material, two paddings — 10a carries a title block, a
   headline and the pill; 10b carries the exit, the pill and the count
   line. Both quote the handoff's gradient and insets exactly. */
.vm-ex-band {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--vex-band);
    box-shadow: var(--vex-band-inset);
}
.vm-ex-band--home { padding: 14px 14px 18px; gap: 14px; }
/* 10b's band draws only the foot hairline (frame.html, 10b): the lit top
   edge belongs to the landing, where the band is the whole first view. */
.vm-ex-band--search { padding: 12px 14px 15px; gap: 12px; box-shadow: inset 0 -1px 0 rgba(3, 32, 26, .55); }

/* The LABELLED exit on 10b's and 11's band: the hub's one back control
   in white (.vm-back.vm-back--band, the slice N shared block at the end
   of this file draws it); this rule only places it. The label is the
   destination. 10a has no exit since slice N (N14: a tab has no back). */
.vm-ex-exit { align-self: flex-start; flex-shrink: 0; }

/* 10a's top row: the title block and the city button. */
.vm-ex-toprow { display: flex; align-items: center; gap: 11px; }
.vm-ex-titlewrap { flex: 1; min-width: 0; }
.vm-ex-title {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
}
/* (10a's "Douala · Akwa" line, .vm-ex-place, left with screen 41e: the city
   is 30e's glass button on this row now, §18's .vm-ex-dir-city + §23.) */

.vm-ex-headline-wrap { display: flex; flex-direction: column; gap: 7px; }
.vm-ex-headline {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.24;
    text-wrap: pretty;
}
.vm-ex-sub { font-size: 12.5px; color: var(--vex-on-band); line-height: 1.5; }

/* The search pill — Rentals geometry, 52px on a 999px radius. The 42px
   round go button is the sanctioned sub-44px control (it sits inside a
   52px row whose whole width submits). */
.vm-ex-pill {
    background: #fff;
    border-radius: 999px;
    height: 52px;
    padding: 0 5px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(3, 32, 26, .26);
}
.vm-ex-pill > i { font-size: 14px; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-pill-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--vex-ink);
    height: 44px;
}
.vm-ex-pill-input::placeholder { color: var(--vex-ink-4); }
.vm-ex-pill-go {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-pill-go i { font-size: 14px; }

/* 10b's pill: the query is a label, not a field, and the control on the
   right clears it back to the landing. */
.vm-ex-pill--query { padding: 0 4px 0 16px; gap: 9px; box-shadow: none; }
.vm-ex-query {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--vex-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vm-ex-pill-clear {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-pill-clear:hover { color: var(--vex-ink-3); }
.vm-ex-pill-clear i { font-size: 14px; }

/* The count line. Results BY SOURCE — never suppliers, never categories. */
.vm-ex-counts { font-size: 12px; color: var(--vex-on-band); }

/* The scroll area under the band. 14px gutter => a 362px content box at
   390px, which is what every width in the frame was measured against. */
.vm-ex-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 18px 14px 24px;
}

/* ----------------------------------------------------------------
   4. SCREEN 10a — THE LANDING
   ---------------------------------------------------------------- */

/* 10 redesign (2026-09-24): the frame sets line-height 1.5 on its whole
   phone, and every box it draws without its own line-height inherits it
   (the block headings, the count line, the sort labels, the meta lines).
   Both screen-10 roots take the same inherited value, so those boxes land
   on the frame's heights; every other exams screen keeps its own. */
#vm-exams,
#vm-exams-search { line-height: 1.5; }
/* ...except inside its rows, which the frame draws as <button>s: a button
   resets line-height to `normal`, so a line there without its own value
   (a price figure, a product row's meta, an other-name row's count) is
   `normal` tall. The rows here are <a>s and one <button> that inherits
   (`font: inherit` above), so they take the button's value explicitly. */
.vm-ex-row,
.vm-ex-other-row { line-height: normal; }

/* The advice refusal sits ABOVE the tiles, not at the foot: it governs
   the choice of what exam to have, and that choice starts at the tiles.
   (Handoff, "Deliberately refused": nothing lives at the foot.) */
.vm-ex-tilesblock { display: flex; flex-direction: column; gap: 10px; }
.vm-ex-advice {
    font-size: 12px;
    color: var(--vex-ink-3);
    line-height: 1.5;
    padding: 0 2px;
    text-wrap: pretty;
}
.vm-ex-advice strong { color: var(--vex-ink); font-weight: 600; }

/* Six tiles, three up. NO border and NO shadow: a tile is a door into a
   cut, not a card. NO COUNTS — a hub is the union of every supplier, so
   the number is large and tells a reader nothing. */
.vm-ex-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.vm-ex-tile {
    height: 84px;
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
}
.vm-ex-tile i { font-size: 18px; color: var(--vex-ground); }
.vm-ex-tile span {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--vex-ink);
}

/* Section heading + the platform's own statement under it. */
.vm-ex-section { display: flex; flex-direction: column; gap: 11px; }
.vm-ex-headblock { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.vm-ex-h {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
.vm-ex-headsub {
    font-size: 12px;
    color: var(--vex-ink-3);
    line-height: 1.5;
    text-wrap: pretty;
}
.vm-ex-headsub strong { color: var(--vex-ink); font-weight: 600; }

/* ONE bordered container holding the rows: a border means a settled
   fact, a shadow means work to be done. */
.vm-ex-list {
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}
/* Whole row is the control. 72px, hairline between. */
.vm-ex-row {
    width: 100%;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    background: transparent;
    text-align: left;
    color: inherit;
}
.vm-ex-row + .vm-ex-row { border-top: 1px solid var(--vex-hairline); }
/* The rows are <a>/<button> built out of phrasing content (a block element
   inside an <a> parses, but a <p> inside a <button> does not), so the
   spans are given back their block layout here. */
.vm-ex-row-main { flex: 1; min-width: 0; display: block; }
.vm-ex-row-name, .vm-ex-row-meta,
.vm-ex-other-name, .vm-ex-other-count,
.vm-ex-other-struct-main, .vm-ex-other-struct-name, .vm-ex-other-struct-meta { display: block; }
.vm-ex-row-name { font-size: 14.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-row-meta { font-size: 12px; color: var(--vex-ink-4); margin-top: 4px; }

/* 10 redesign (2026-09-24) — 10a's concept row. A 38px teal-tint tile
   leads with the category's glyph, the meta splits into two tabular lines
   ("6 structures" over "nearest 1.2 km"), the price column narrows to 72px
   and a teal chevron ends the row. 76px, 12/12/12/14 padding (frame). */
.vm-ex-row--concept { padding: 12px 12px 12px 14px; min-height: 76px; }
.vm-ex-row-tile {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-row-tile i { font-size: 14px; }
.vm-ex-row--concept .vm-ex-row-meta { margin-top: 0; line-height: 1.4; }
.vm-ex-row--concept .vm-ex-row-name + .vm-ex-row-meta { margin-top: 3px; }
.vm-ex-row--concept .vm-ex-price { min-width: 72px; }
/* The chevron every whole-width row ends on (10a's concept rows, 10b's
   medicine rows; 10b's other-name rows add their own rotation). */
.vm-ex-row-chev { font-size: 13px; color: var(--vex-ground); flex-shrink: 0; }
/* 10b's medicine row keeps the older construction: 13/15 padding, 72px,
   the 84px price column, its name at 1.35 (frame). */
.vm-ex-row--product .vm-ex-row-name { line-height: 1.35; }

/* The price column: "from" STACKED above the figure, so the word is
   never read as part of the number. `min-width` keeps four figures of
   different lengths on one right edge. */
.vm-ex-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 84px;
}
.vm-ex-price-from { font-size: 11px; color: var(--vex-ink-4); line-height: 1.15; }
.vm-ex-price-fig { display: flex; align-items: baseline; gap: 3px; margin-top: 1px; }
.vm-ex-price-num {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
}
.vm-ex-price-cur { font-size: 9.5px; font-weight: 600; color: var(--vex-ink-4); }
/* No price yet is a STATE, not a blank and not a zero. It replaces the
   figure, keeps the column, and is never marked as worse. */
.vm-ex-price-none {
    font-size: 12px;
    font-weight: 600;
    color: var(--vex-ink-4);
    text-align: right;
    line-height: 1.3;
}

/* The two doors. A lifted card with a FOOTED control: the card states
   the thing, the 52px foot opens it. */
/* The two doors share a wrapper so the wide layout can put them side by
   side; on a phone it is simply the body's own column and gap. */
.vm-ex-doors { display: flex; flex-direction: column; gap: 20px; }
.vm-ex-door {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}
.vm-ex-door-head { padding: 15px; display: flex; align-items: center; gap: 13px; }
.vm-ex-door-glyph {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-door-glyph i { font-size: 15px; }
.vm-ex-door-copy { flex: 1; min-width: 0; }
.vm-ex-door-title {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
}
.vm-ex-door-sub { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 4px; line-height: 1.45; }
.vm-ex-door-go {
    width: 100%;
    height: 52px;
    border-top: 1px solid var(--vex-hairline);
    background: #fff;
    color: var(--vex-ground);
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.vm-ex-door-go:hover { color: var(--vex-ground); }
.vm-ex-door-go i { font-size: 12px; }

/* ----------------------------------------------------------------
   5. SCREEN 10b — THE SEARCH
   No sort control and no filter chips: a screen-level sort cannot be
   true of two blocks from two verticals, so each block heading carries
   its own sort as a right-aligned LABEL instead.
   ---------------------------------------------------------------- */
/* The page's h1, said to a screen reader and never drawn (slice F4 SH11):
   the pill is the subject the eye reads. Out of the band's flex flow, so
   the frame's boxes do not move. */
.vm-ex-vsr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vm-ex-blockhead { display: flex; align-items: center; gap: 9px; }
.vm-ex-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.vm-ex-dot--exams { background: var(--vex-ground); }
.vm-ex-dot--pharm { background: var(--vex-pharm); }
.vm-ex-blockname {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
}
.vm-ex-blockgap { flex: 1; }
/* A label, not a control: it states the order the list is already in. */
.vm-ex-sortlabel { font-size: 11.5px; color: var(--vex-ink-4); flex-shrink: 0; }

/* The cards stack on the section's own 11px rhythm. */
.vm-ex-cards { display: flex; flex-direction: column; gap: 11px; }
.vm-ex-cards:empty { display: none; }

/* The exam card. Lifted, because it is a thing to act on. */
.vm-ex-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* 10 redesign (2026-09-24) — the name on your paper. One white row under
   the block heading, only when a typed search matched two or more exams:
   the count and the query (12.5/600 ink), the advice refusal under it
   (12px #475569). The signed-sheet glyph is the paper the reader holds. */
.vm-ex-note {
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.vm-ex-note i {
    font-size: 12px;
    color: var(--vex-ground);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 3px;
}
.vm-ex-note-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vm-ex-note-lead {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.45;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vm-ex-note-sub { font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; }

/* 10 redesign (2026-09-24) — the card's identity: the English name, the
   French name on its OWN line at full ink (the normalisation made
   visible), then the plain-words line — platform copy about a procedure,
   never a structure's wording. */
.vm-ex-card-id { min-width: 0; }
.vm-ex-card-name {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
}
.vm-ex-card-fr { font-size: 14px; font-weight: 600; color: var(--vex-ink); margin-top: 5px; line-height: 1.3; }
.vm-ex-card-plain { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }

/* 10 redesign (2026-09-24) — the headline block. The card's figures, on
   the teal tint: the label (count · how many give a price · distance,
   11.5/600 teal, tabular), the figure the structures typed (a range, one
   price, or "from" a floor — 22px Space Grotesk + a 12px FCFA), and the
   white inner row for fasting. Nothing in it is ranked or badged. */
.vm-ex-hl {
    background: var(--vex-tint);
    border-radius: 14px;
    padding: 12px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-ex-hl-label { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); font-variant-numeric: tabular-nums; }
.vm-ex-hl-fig { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
.vm-ex-hl-num {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-ex-hl-cur { font-size: 12px; font-weight: 700; color: var(--vex-ink); }
/* "from" before a floor whose ceiling the API did not send. #475569, not
   #64748b: the grey is 4.3:1 on the tint and fails for 12px text. */
.vm-ex-hl-from { font-size: 12px; font-weight: 600; color: var(--vex-ink-3); }
/* A state, never figure-sized: it must not read as a low price. */
.vm-ex-hl-none { font-size: 13px; font-weight: 600; color: var(--vex-ink-3); line-height: 1.4; }

/* The white inner row. A preparation rule belongs to the EXAM and is
   platform voice — teal glyph, 600 ink. Its absence ("No fasting") costs
   nothing to act on — grey glyph, regular #475569. */
.vm-ex-prep {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-ex-prep i { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; margin-top: 3px; }
.vm-ex-prep-text { font-size: 12.5px; line-height: 1.45; }
.vm-ex-prep--rule i { color: var(--vex-ground); }
.vm-ex-prep--rule .vm-ex-prep-text { font-weight: 600; color: var(--vex-ink); }
.vm-ex-prep--none i { color: var(--vex-ink-4); }
.vm-ex-prep--none .vm-ex-prep-text { font-weight: 400; color: var(--vex-ink-3); }

/* The door NAMES the count, never a saving. */
.vm-ex-card-go {
    height: 48px;
    border-radius: 13px;
    background: var(--vex-ground);
    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;
}
.vm-ex-card-go:hover { color: #fff; }

/* "Also offered under other names" — the unmatched wordings. No price
   and no distance on the name row: a price would invite exactly the
   comparison the model forbids for a name nobody has normalised. */
.vm-ex-h-sm {
    font-family: var(--vex-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
}
.vm-ex-otherhead { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 0; }
.vm-ex-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-ex-other-row + .vm-ex-other-row,
.vm-ex-other-panel + .vm-ex-other-row { border-top: 1px solid var(--vex-hairline); }
.vm-ex-other-name { font-size: 14px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-other-count { font-size: 12px; color: var(--vex-ink-4); margin-top: 4px; }
/* 10 redesign (2026-09-24): the chevron is the rows' teal one (13px,
   .vm-ex-row-chev); it keeps its quarter-turn when the row opens. */
.vm-ex-other-chev { transition: transform .16s ease; }
.vm-ex-other-row[aria-expanded="true"] .vm-ex-other-chev { transform: rotate(90deg); }

/* The expansion. It opens IN PLACE rather than navigating, because the
   answer to "who wrote it that way" is a short list of structures and a
   page-load to read three lines is a worse answer than a panel. */
.vm-ex-other-panel {
    border-top: 1px solid var(--vex-hairline);
    background: var(--vex-canvas);
    display: flex;
    flex-direction: column;
}
.vm-ex-other-struct {
    min-height: 56px;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--vex-ink);
}
.vm-ex-other-struct + .vm-ex-other-struct { border-top: 1px solid var(--vex-hairline); }
.vm-ex-other-struct:hover { color: var(--vex-ink); }
.vm-ex-other-struct-main { flex: 1; min-width: 0; }
.vm-ex-other-struct-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.vm-ex-other-struct-meta { font-size: 12px; color: var(--vex-ink-4); margin-top: 3px; }
/* 10 redesign (2026-09-24): every row that opens something ends on a
   teal chevron, the expansion's structure rows included. */
.vm-ex-other-struct i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }

/* The medicines block: 10a's row construction inside ONE lifted
   container. NO PLUS — there is no basket on this side, and a plus
   would add at a price with no owner. The row opens the product page,
   where the "from" resolves. */
.vm-ex-prodlist {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}

/* ----------------------------------------------------------------
   6. EMPTY + LOADING STATES
   Neither ever carries a number. The empty state is undrawn in the
   handoff, so it is the plainest honest thing: what was typed, and one
   line inviting a different name.
   ---------------------------------------------------------------- */
.vm-loading { padding: 22px 2px; font-size: 13px; color: var(--vex-ink-4); }
.vm-ex-none {
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    background: #fff;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.vm-ex-none-title { font-size: 14.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; }
.vm-ex-none-sub { font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }

/* ----------------------------------------------------------------
   7. SCREEN 11 — ONE EXAM, EVERY STRUCTURE (exams/exam.html)
   Handoff: docs/design/pharmacy/screens/11/{README.md,frame.html}.
   The exams side's screen 03: a "from" price resolves into one price
   per structure, each with an owner.

   Three rules this section holds:
     - NOTHING ON AN OFFER CARD IS COLOURED. Ink and greys only; no teal
       "open", no green "available", no badge, no glyph beside a fact.
       The footed door is the one teal thing, because it is the one
       thing to press.
     - "Price on request" is a two-line GREY label, never figure-sized:
       it must not read as a low price.
     - No chevron on any door. The collapsed door's angle-down says it
       opens in place, which is a different thing.
   ---------------------------------------------------------------- */

/* The band: 10b's material with the foot hairline only, the exit, then
   the exam's name and its French name. No eyebrow, no plain-words line
   (10b owns that). */
.vm-ex-band--exam { padding: 12px 14px 18px; gap: 13px; box-shadow: inset 0 -1px 0 rgba(3, 32, 26, .55); }
.vm-ex-exam-title {
    font-family: var(--vex-font-display);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
/* #e2e8f0, never #cbd5e1 — the band's floor for small text. */
.vm-ex-exam-fr { font-size: 12.5px; color: var(--vex-on-band); line-height: 1.5; margin-top: 4px; }

.vm-ex-body--exam { padding-top: 16px; }

/* The fasting block. FLAT — no shadow — because a rule to follow is not
   a thing to press; the 13/14 idiom: a 30px white tile beside a title
   over its body. */
.vm-ex-fast {
    background: var(--vex-tint);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.vm-ex-fast-tile {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff;
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-fast-tile i { font-size: 13px; }
.vm-ex-fast-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.vm-ex-fast-title {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.25;
}
.vm-ex-fast-body { font-size: 13px; color: var(--vex-ink-2); line-height: 1.55; text-wrap: pretty; }

/* The list: heading row, then the cards, on a 12px rhythm. The heading
   carries 3px extra below it. */
.vm-ex-offers,
.vm-ex-offer-list { display: flex; flex-direction: column; gap: 12px; }
.vm-ex-offers-head { display: flex; flex-direction: column; gap: 2px; padding: 0 2px 3px; }
.vm-ex-offers-row { display: flex; align-items: center; gap: 10px; }
.vm-ex-offers-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
/* The sort CONTROL: borderless #f1f5f9, 44px, naming the active sort. */
.vm-ex-sort {
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    border: none;
    color: var(--vex-ink-2);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.vm-ex-sort i { font-size: 12px; color: var(--vex-ink-4); }
.vm-ex-offers-sub { font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-ex-offers-sub strong { color: var(--vex-ink); font-weight: 600; }

/* One structure's offer: lifted, and TWO SIBLING CONTROLS — the body
   opens the structure, the footed door acts. Never nested. */
.vm-ex-offer {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}
.vm-ex-offer-body {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 11px;
    text-align: left;
    color: var(--vex-ink);
}
.vm-ex-offer-body:hover { color: var(--vex-ink); }
/* The body is an <a> built out of spans; they get their layout back
   here. */
.vm-ex-offer-top { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.vm-ex-offer-id { flex: 1; min-width: 0; display: block; }
.vm-ex-offer-name {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
}
/* Kind and neighbourhood ONLY. Landmarks and streets live on 12a and 14. */
.vm-ex-offer-sub { display: block; font-size: 12px; color: var(--vex-ink-4); margin-top: 4px; }
.vm-ex-offer-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    min-width: 84px;
}
.vm-ex-offer-fig { display: flex; align-items: baseline; gap: 3px; }
.vm-ex-offer-num {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}
.vm-ex-offer-cur { font-size: 10px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-offer-ask {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink-3);
    line-height: 1.35;
    text-align: right;
}
.vm-ex-offer-lines { display: flex; flex-direction: column; gap: 3px; width: 100%; }
/* The next SAMPLE window, with its day. Never opening hours. */
.vm-ex-offer-window {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.vm-ex-offer-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--vex-ink-3);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.vm-ex-offer-dot { color: var(--vex-sep); }

/* The footed door. 52px under a hairline, teal words, NO chevron. */
.vm-ex-offer-door {
    width: 100%;
    height: 52px;
    border-top: 1px solid var(--vex-hairline);
    background: #fff;
    color: var(--vex-ground);
    font-size: 14.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.vm-ex-offer-door:hover { color: var(--vex-ground); }
.vm-ex-offer-door i { font-size: 12px; }
/* Screen 51: "Ask the price" (where "Call to ask the price" stood), the
   card door's mint wash under its own edge (5.6:1; hover 5.3:1). */
.vm-ex-offer-door--ask {
    background: #e8f5f1;
    border-top-color: #cfe9e1;
    color: #0f6d5c;
}
.vm-ex-offer-door--ask:hover { background: #dff0ea; color: #0f6d5c; }
.vm-ex-offer-door--ask i { font-size: 13px; }
.vm-ex-offer-door--ask:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

/* The collapsed door: a borderless #f1f5f9 fill that NAMES the hidden
   prices, so the search's "up to" stays true without a tap. */
.vm-ex-more {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    background: var(--vex-grey-2);
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-ex-more-label {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vex-ink-2);
    font-variant-numeric: tabular-nums;
}
.vm-ex-more i { font-size: 13px; color: var(--vex-ink-4); flex-shrink: 0; }

/* ----------------------------------------------------------------
   8. SCREEN 12 — ONE STRUCTURE, EVERYTHING IT DOES (exams/structure.html)
   Handoff: the user drop "Screens 11-18/Screen 12 - Structure page"
   (docs/design/pharmacy/screens/12/). The exams side's screen 08, so the
   hero, the lifted facts card, the scoped search and About are COPIES of
   css/pharmacy/app.css §20's idioms, re-tinted — never linked.

   Four rules this section holds:
     - THE SAMPLE WINDOW LEADS THE FACTS and carries the teal tile; the
       doors cell is neutral. There is no "open now" chip anywhere: at
       14:20 it would sit beside a window that closed at 11:00.
     - A SHADOW means something to act on or read first (facts card,
       search pill, About's cards); a BORDER holds settled rows (the
       service groups, a closed group's door).
     - The add control is a 44px round: white with a 1.5px #cbd5e1 edge
       when the row is not in the visit, solid #0f6d5c when it is.
     - The visit bar exists only while the visit holds a row; its
       #f8fafc sub-line sits over a #f0f2f4 hairline, never in a box.
   ---------------------------------------------------------------- */

/* -- The hero: 302px on EVERY structure --------------------------
   With a photograph: 08's two scrims, dark top and bottom, open
   through the middle. Without one: the vertical's own band material
   (§1's token, quoted from the handoff) — the same height, so the
   facts card lands in the same place on every page. */
.vm-ex-st-hero {
    position: relative;
    height: 302px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--vex-band);
    box-shadow: var(--vex-band-inset);
}
.vm-ex-st-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-ex-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-ex-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%);
}
/* No photograph: the band material alone. The scrims darken a picture;
   on the teal ground they would only muddy it. */
.vm-ex-st-hero.is-nophoto .vm-ex-st-scrim,
.vm-ex-st-hero.is-nophoto .vm-ex-st-vignette { display: none; }
/* No structure (no slug, a 404, a failed read): the band still draws,
   with its exit, at the height of its top row. */
.vm-ex-st-hero.is-bare { height: auto; box-shadow: inset 0 -1px 0 rgba(3, 32, 26, .55); }
.vm-ex-st-hero.is-bare .vm-ex-st-id,
.vm-ex-st-hero.is-bare .vm-ex-st-glass { display: none; }

.vm-ex-st-top { position: relative; padding: 14px; display: flex; align-items: center; gap: 9px; }
/* 08's glass, and 11's LABELLED exit: arrow + the place it goes back
   to. A long query ellipses; the control stays 44px. */
.vm-ex-st-exit,
.vm-ex-st-glass {
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
/* The hub's one back control in its glass dress (slice N, N11-N12): the
   control's type and chevron (13px/700, a 16px fa-angle-left, a 6px gap)
   on the photo's glass, the label shown. It shares its row with Share
   only (R6's pill takes the row under it, §27), so a long origin (a
   query, an exam's name) ellipses before it reaches Share. */
.vm-ex-st-exit {
    flex: 0 1 auto;
    min-width: 44px;
    max-width: calc(100% - 53px);
    padding: 0 14px 0 11px;
    gap: 6px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}
.vm-ex-st-exit i { font-size: 16px; width: 16px; text-align: center; flex-shrink: 0; }
.vm-ex-st-exit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-ex-st-exit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vm-ex-st-glass { width: 44px; justify-content: center; font-size: 15px; }
.vm-ex-st-exit:hover,
.vm-ex-st-glass:hover { color: #fff; }

.vm-ex-st-id {
    position: relative;
    margin-top: auto;
    padding: 0 16px 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-ex-st-idrow { display: flex; align-items: center; gap: 12px; }
/* The two-letter tile, on BOTH grounds. Never the pharmacy's green
   cross — the wrong mark for a laboratory. */
.vm-ex-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(--vex-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vex-ground);
    letter-spacing: -.5px;
}
.vm-ex-st-name {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.05;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
/* 44px because it holds Directions. The landmark is ONE line here. */
.vm-ex-st-place { display: flex; align-items: center; gap: 9px; height: 44px; }
.vm-ex-st-place > i { color: var(--vex-accent); font-size: 11px; flex-shrink: 0; }
.vm-ex-st-landmark {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--vex-on-band);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vm-ex-st-dir {
    display: inline-flex;
    align-items: center;
    height: 44px;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.vm-ex-st-dir:hover { color: #fff; }
.vm-ex-st-dir i { font-size: 11px; color: var(--vex-accent); }
.vm-ex-st-kind { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--vex-on-band); line-height: 1.35; }
.vm-ex-st-kind i { color: var(--vex-accent); font-size: 10px; flex-shrink: 0; }
.vm-ex-st-kind strong { color: #fff; font-weight: 700; }

/* -- A fact cell ---------------------------------------------------
   The lifted facts card these cells sat in left with the Oct 2026
   redesign (slice B); 43's closed-for-now banner still wears one cell. */
.vm-ex-st-fact { background: #fff; padding: 13px 14px; display: flex; gap: 9px; min-width: 0; }
.vm-ex-st-fact-ico {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}
.vm-ex-st-fact-ico--grey { background: var(--vex-grey-2); color: var(--vex-ink-3); }
.vm-ex-st-fact-body { min-width: 0; }
.vm-ex-st-fact-t { font-size: 12.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-st-fact-s { font-size: 11px; color: var(--vex-ink-4); margin-top: 2px; line-height: 1.35; }

/* Loading, and the states that are not a structure. */
.vm-ex-st-state { padding: 0 14px; flex-shrink: 0; }
.vm-ex-st-state .vm-ex-none { margin-top: 18px; }

/* -- The scoped search -------------------------------------------- */
.vm-ex-st-searchwrap { padding: 14px 14px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.vm-ex-st-search {
    background: #fff;
    border-radius: 999px;
    height: 52px;
    padding: 0 4px 0 17px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--vex-card-shadow);
}
.vm-ex-st-search:focus-within { box-shadow: var(--vex-card-shadow), 0 0 0 2px rgba(15, 109, 92, .35); }
.vm-ex-st-search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: none;
    font-size: 13px;
    color: var(--vex-ink);
}
.vm-ex-st-search-input::placeholder { color: var(--vex-ink-4); }
/* 44px, where the frame draws 42: the house floor wins inside the pill. */
.vm-ex-st-search-go {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

/* -- What they do ------------------------------------------------- */
.vm-ex-st-what { padding: 16px 14px 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 11px; }
.vm-ex-st-groups,
.vm-ex-st-group { display: flex; flex-direction: column; gap: 11px; }

/* ONE bordered container per group, #f0f2f4 hairlines, a footed door
   (09f's idiom). */
.vm-ex-st-list {
    background: #fff;
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    overflow: hidden;
}
.vm-ex-st-row { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }
.vm-ex-st-row + .vm-ex-st-row { border-top: 1px solid var(--vex-hairline); }
.vm-ex-st-row-main { flex: 1; min-width: 0; }
.vm-ex-st-row-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* THE TYPED NAME LEADS: the structure's own words at full weight. It is
   the label of the control a patient acts on, so it holds a readable size
   (the 2026-09-23 follow-up ruling, R4): 15px, over the 14px floor health
   services keep for primary labels — the frame's 13.5px was under it, and
   16px wrapped most seeded names beside the price at 390px. A long French
   name wraps to two lines; it never shrinks. */
.vm-ex-st-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vm-ex-st-from {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
}
/* …and the matched concept follows, in grey — at 12.5px, the small-text
   floor on this side (11's meta rows), because it carries the fasting
   hours and the result time, the two facts a patient acts on (R4). */
.vm-ex-st-row-sub { font-size: 12.5px; color: var(--vex-ink-4); margin-top: 3px; line-height: 1.4; }
.vm-ex-st-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}
.vm-ex-st-num {
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}
.vm-ex-st-cur { font-size: 9.5px; font-weight: 600; color: var(--vex-ink-4); margin-top: 1px; }
/* A state, never figure-sized: it must not read as a low price. */
.vm-ex-st-ask { max-width: 112px; font-size: 12.5px; font-weight: 700; color: var(--vex-ink-3); line-height: 1.3; }
.vm-ex-st-ctl { display: flex; flex-shrink: 0; }
.vm-ex-st-ctl:empty { display: none; }
.vm-ex-st-add {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-ex-st-add:hover { color: var(--vex-ground); }
/* Screen 51: an unpriced row's round asks the price in writing — the
   card door's mint wash and 1px edge, never the plus (5.6:1; hover 5.3:1). */
.vm-ex-st-add--ask { background: #e8f5f1; border: 1px solid #cfe9e1; color: #0f6d5c; font-size: 14px; }
.vm-ex-st-add--ask:hover { background: #dff0ea; color: #0f6d5c; }
.vm-ex-st-add--ask:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
.vm-ex-st-add.is-in { background: var(--vex-ground); border-color: var(--vex-ground); color: #fff; }
/* An open group's footed door: "All 24 blood tests", in place. */
.vm-ex-st-alldoor {
    width: 100%;
    height: 52px;
    border-top: 1px solid var(--vex-hairline);
    background: #fff;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-variant-numeric: tabular-nums;
}
.vm-ex-st-alldoor i { font-size: 12px; }
/* A closed group: a 56px bordered door that opens in place. */
.vm-ex-st-gdoor {
    width: 100%;
    height: 56px;
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    background: transparent;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
}
.vm-ex-st-group + .vm-ex-st-gdoor { margin-top: 3px; }
.vm-ex-st-gdoor-tile {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}
.vm-ex-st-gdoor-copy { flex: 1; min-width: 0; display: block; }
.vm-ex-st-gdoor-title,
.vm-ex-st-gdoor-names { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-ex-st-gdoor-title { font-size: 13.5px; font-weight: 700; color: var(--vex-ink); }
/* The names give way; the price clause never does. */
.vm-ex-st-gdoor-sub { display: flex; min-width: 0; font-size: 11.5px; color: var(--vex-ink-4); margin-top: 2px; }
.vm-ex-st-gdoor-names { min-width: 0; }
.vm-ex-st-gdoor-from { flex-shrink: 0; white-space: pre; }
.vm-ex-st-gdoor-chev { font-size: 13px; color: var(--vex-ink-4); flex-shrink: 0; }

/* -- About -------------------------------------------------------- */
.vm-ex-st-today {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.vm-ex-st-tail { height: 18px; flex-shrink: 0; }

/* -- The visit bar ------------------------------------------------
   Sticky at the foot of the column, and only while the visit holds a
   row. */
.vm-ex-st-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: auto;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
}
.vm-ex-st-bar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px calc(13px + env(safe-area-inset-bottom, 0px));
}
.vm-ex-st-bar-copy { flex: 1; min-width: 0; }
.vm-ex-st-bar-count { font-size: 11.5px; color: var(--vex-ink-4); }
.vm-ex-st-bar-amount { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 4px; margin-top: 2px; }
.vm-ex-st-bar-from,
.vm-ex-st-bar-ask { font-size: 11px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-st-bar-ask { font-size: 12.5px; color: var(--vex-ink-3); }
.vm-ex-st-bar-fig {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    font-variant-numeric: tabular-nums;
}
.vm-ex-st-book {
    height: 52px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--vex-ground);
    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;
}
.vm-ex-st-book:hover { color: #fff; }
.vm-ex-st-book i { font-size: 12px; }

/* "Link copied": the canonical append-and-remove toast, in ink. */
.vm-ex-toast {
    position: fixed;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    background: var(--vex-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;
}

/* -- The switch sheet (the 2026-09-23 follow-up ruling, R1) -------
   Replacing a visit is a decision, never silent. 04b's sheet, COPIED
   from css/pharmacy/app.css §8 (the fixed scrim, the column, the
   translate-in, the 38x4 grab) and §15 (the 24px radius, the deeper
   shadow, the flat ink scrim at .55, two named buttons in the flow and
   never an X) — re-tinted with this side's tokens, never linked.
   One addition: the closed sheet is visibility:hidden as well as off
   screen, so a keyboard cannot tab into buttons nobody can see. */
.vm-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    z-index: 60;
}
.vm-sheet-backdrop.is-open { display: block; }
.vm-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 100%;
    max-width: 480px;
    /* It ends in two named buttons; neither may be the thing you have to
       discover by scrolling. */
    max-height: 92vh;
    overflow-y: auto;
    padding-top: 8px;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .22);
    z-index: 61;
    transform: translateX(-50%) translateY(110%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .32s;
}
.vm-sheet.is-open {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
/* House rule: a 38x4 #cbd5e1 grab handle. */
.vm-sheet-grab {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--vex-sep);
    margin: 0 auto;
}
.vm-ex-sw {
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vm-ex-sw-title {
    font-family: var(--vex-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.25;
    color: var(--vex-ink);
}
.vm-ex-sw-text { font-size: 13px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
/* What the reader would give up, named first. */
.vm-ex-sw-gist { color: var(--vex-ink); font-weight: 600; }
.vm-ex-sw-acts { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
/* Both buttons wrap a long structure name rather than overflow it. */
.vm-ex-sw-primary,
.vm-ex-sw-second {
    width: 100%;
    border-radius: 999px;
    padding: 8px 20px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.vm-ex-sw-primary { min-height: 52px; background: var(--vex-ground); color: #fff; font-size: 14px; }
/* Borderless: the flat grey pill 04b uses for staying where you are. */
.vm-ex-sw-second { min-height: 48px; background: var(--vex-grey-2); color: var(--vex-ink-2); font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
    .vm-sheet,
    .vm-sheet.is-open { transition: none; }
}

/* ----------------------------------------------------------------
   9. SCREEN 13 — BOOKING THE VISIT (exams/book.html)
   Handoff: the user drop "Screens 11-18/Screen 13 - Booking the visit"
   (docs/design/pharmacy/screens/13/). 13a walk-in, 13b slot.

   Four rules this section holds:
     - WHITE HEADER, NOT TEAL. Teal on 13 means "what you picked": the
       selected day, the selected time and the commit are the only solid
       #0f6d5c on the page (the frame draws the selected time #0f6d5c;
       white on #16a085 is 3.3:1 and fails at 13.5px — director's ruling).
     - THE RAIL NEVER SCROLLS WITH A SCROLLBAR: overflow hidden, the chip
       cut by the edge is the affordance, a finger drags it (book.js,
       touch-action pan-y) and the arrow keys walk it. Never
       overflow-x:auto.
     - A REASON SITS WITH THE CONTROL IT CONSTRAINS: one bordered
       container under the days (icon-tile lead + hairlines indented to
       54px), one under the times.
     - The Who card is the one LIFTED card (the one you fill in); nothing
       else on the page carries a shadow but the foot bar.
   ---------------------------------------------------------------- */

/* -- The header: white, the labelled exit, the act ---------------- */
.vm-ex-bk-head {
    background: #fff;
    border-bottom: 1px solid var(--vex-grey);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
/* The hub's one back control (.vm-back, slice N) draws and places this
   exit; its label is the structure's name (N12), so a long one ellipses. */
.vm-ex-bk-exit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-ex-bk-title {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-bk-sub { font-size: 12px; color: var(--vex-ink-3); margin-top: 2px; overflow-wrap: anywhere; }

/* Loading and the states that are not a booking. */
.vm-ex-bk-state { padding: 0 14px; flex-shrink: 0; }
.vm-ex-bk-state .vm-ex-none { margin-top: 18px; }
.vm-ex-bk-door {
    align-self: flex-start;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
}
.vm-ex-bk-door:hover { color: var(--vex-ground); }

/* -- The body ---------------------------------------------------- */
.vm-ex-bk-body { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.vm-ex-bk-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.vm-ex-bk-h { font-size: 12px; font-weight: 700; color: var(--vex-ink-3); padding: 0 2px; }
.vm-ex-bk-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.vm-ex-bk-headrow .vm-ex-bk-h { padding: 0; }
.vm-ex-bk-headnote { font-size: 11.5px; color: var(--vex-ink-4); text-align: right; }

/* -- Your visit: a fact, not a control ----------------------------
   The typed name at 15px/700 — 12's R4 floor for a primary label, not
   the frame's 13.5px. */
.vm-ex-bk-list { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ex-bk-item { display: flex; align-items: center; gap: 11px; padding: 12px 13px; }
.vm-ex-bk-item + .vm-ex-bk-item { border-top: 1px solid var(--vex-hairline); }
.vm-ex-bk-item-main { flex: 1; min-width: 0; }
.vm-ex-bk-item-name { font-size: 15px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vm-ex-bk-item-sub { font-size: 12.5px; color: var(--vex-ink-4); margin-top: 3px; line-height: 1.4; }
.vm-ex-bk-price { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.vm-ex-bk-price-from { font-size: 10px; font-weight: 600; color: var(--vex-ink-4); line-height: 1.2; }
.vm-ex-bk-price-fig {
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.1;
}
.vm-ex-bk-price-cur { font-size: 9.5px; font-weight: 600; color: var(--vex-ink-4); margin-top: 1px; }
.vm-ex-bk-price-ask { font-size: 11px; font-weight: 600; color: var(--vex-ink-4); line-height: 1.25; }

/* -- The rail of days --------------------------------------------
   76x62 borderless chips on the canvas, 16px radius, gap 8. Hidden
   overflow + 4px under the chips; the fifth chip is cut by the gutter at
   390px, and that cut is the only scroll affordance. Focus rings are
   drawn INSIDE the chip, or the hidden overflow would clip them. */
.vm-ex-bk-rail {
    position: relative;
    display: flex;
    gap: 8px;
    overflow: hidden;
    padding-bottom: 4px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.vm-ex-bk-day {
    width: 76px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--vex-canvas);
    color: var(--vex-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.vm-ex-bk-day-rel { font-size: 10.5px; font-weight: 600; color: var(--vex-ink-4); line-height: 1.3; }
.vm-ex-bk-day-num {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
}
.vm-ex-bk-day-full { font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.vm-ex-bk-day.is-on { background: var(--vex-ground); color: #fff; }
.vm-ex-bk-day.is-on .vm-ex-bk-day-rel { color: var(--vex-on-band); }
/* Full: a fact, not a control — grey, and not selectable. */
.vm-ex-bk-day.is-full { background: var(--vex-grey-2); color: var(--vex-ink-4); gap: 0; cursor: default; }
.vm-ex-bk-day.is-full .vm-ex-bk-day-rel { color: var(--vex-ink-4); }
.vm-ex-bk-day:focus-visible,
.vm-ex-bk-slot:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -3px; }
.vm-ex-bk-day.is-on:focus-visible,
.vm-ex-bk-slot.is-on:focus-visible { outline-color: #fff; }

/* -- One bordered container: icon-tile lead + 54px hairlines ------ */
.vm-ex-bk-box { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ex-bk-lead { padding: 13px; display: flex; gap: 11px; }
.vm-ex-bk-tile {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}
.vm-ex-bk-lead-copy { flex: 1; min-width: 0; }
.vm-ex-bk-lead-t { font-size: 13px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; }
.vm-ex-bk-lead-s { font-size: 11.5px; color: var(--vex-ink-3); margin-top: 3px; line-height: 1.45; text-wrap: pretty; }
.vm-ex-bk-hair {
    padding: 10px 13px 10px 54px;
    border-top: 1px solid var(--vex-hairline);
    font-size: 11.5px;
    color: var(--vex-ink-3);
    line-height: 1.45;
    text-wrap: pretty;
}
.vm-ex-bk-hair:last-child { padding-bottom: 11px; }
/* "Call the laboratory": the one act a blank window asks for, 44px. */
.vm-ex-bk-calldoor {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    color: var(--vex-ground);
    font-size: 12.5px;
    font-weight: 700;
}
.vm-ex-bk-calldoor:hover { color: var(--vex-ground); }
.vm-ex-bk-calldoor i { font-size: 11px; }

/* The day or the time went while the reader chose (a 409): said in the
   vertical's ink, under the control it concerns — never red. */
.vm-ex-bk-taken {
    background: #fff;
    border: 1px solid var(--vex-sep);
    border-radius: 14px;
    padding: 10px 13px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.45;
}
.vm-ex-bk-taken:focus { outline: none; }

/* -- What time: 3 columns of 48px places in the queue ------------- */
.vm-ex-bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vm-ex-bk-slot {
    height: 48px;
    border-radius: 16px;
    background: var(--vex-canvas);
    color: var(--vex-ink);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.vm-ex-bk-slot.is-on { background: var(--vex-ground); color: #fff; }
.vm-ex-bk-slot.is-full { background: var(--vex-grey-2); color: var(--vex-ink-4); cursor: default; }
.vm-ex-bk-slot-full { font-size: 10px; font-weight: 600; }

/* -- Before <day> morning: the exam's rule in the teal tint, the
   structure's rule in a bordered row --------------------------------- */
.vm-ex-bk-prep { background: var(--vex-tint); border-radius: 18px; padding: 13px; display: flex; gap: 11px; }
.vm-ex-bk-tile--on { background: #fff; color: var(--vex-ground); }
.vm-ex-bk-paper { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; padding: 13px; display: flex; gap: 11px; }
.vm-ex-bk-prep-t { font-size: 13px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; }
.vm-ex-bk-prep-s { font-size: 11.5px; color: var(--vex-ink-2); margin-top: 3px; line-height: 1.45; text-wrap: pretty; }

/* -- Who is coming: the one lifted card ---------------------------
   Fields are 16px so a phone does not zoom the page on focus (the frame
   draws 14px); 48px tall, 1.5px #cbd5e1, 14px radius. */
.vm-ex-bk-who {
    background: #fff;
    border-radius: 18px;
    padding: 13px;
    box-shadow: var(--vex-card-shadow);
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.vm-ex-bk-field { min-width: 0; }
.vm-ex-bk-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--vex-ink-3); margin-bottom: 5px; }
.vm-ex-bk-input {
    display: block;
    width: 100%;
    height: 48px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    border-radius: 14px;
    padding: 0 13px;
    font-size: 16px;
    color: var(--vex-ink);
    outline: none;
}
.vm-ex-bk-input:focus { border-color: var(--vex-ground); box-shadow: 0 0 0 3px rgba(15, 109, 92, .16); }
/* A fault: the field's edge goes to ink, the words under it are ink. */
.vm-ex-bk-input[aria-invalid="true"] { border-color: var(--vex-ink); }
.vm-ex-bk-fault { font-size: 11.5px; font-weight: 600; color: var(--vex-ink); margin-top: 5px; line-height: 1.4; }
.vm-ex-bk-purpose { font-size: 11px; color: var(--vex-ink-4); margin-top: 5px; line-height: 1.4; }
.vm-ex-bk-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--vex-hairline);
    margin-top: 1px;
}
.vm-ex-bk-toggle i { color: var(--vex-ground); font-size: 12px; flex-shrink: 0; width: 16px; }
.vm-ex-bk-toggle span { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--vex-ground); }

/* The commit failed on the way. */
.vm-ex-bk-fail {
    background: #fff;
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.45;
}
.vm-ex-bk-fail:focus { outline: none; }

/* -- The foot bar -------------------------------------------------
   Sticky; the #f8fafc strip says nothing is paid; the button names the
   day and never the figure. */
.vm-ex-bk-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: auto;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
}
.vm-ex-bk-bar-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--vex-canvas);
    border-bottom: 1px solid var(--vex-grey-2);
    font-size: 11.5px;
    color: var(--vex-ink-2);
    line-height: 1.4;
}
.vm-ex-bk-bar-note i { color: var(--vex-ink-4); font-size: 11px; flex-shrink: 0; }
.vm-ex-bk-bar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px calc(13px + env(safe-area-inset-bottom, 0px));
}
.vm-ex-bk-bar-copy { flex: 1; min-width: 0; }
.vm-ex-bk-bar-label { font-size: 11.5px; color: var(--vex-ink-4); }
.vm-ex-bk-bar-amount { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 4px; margin-top: 2px; }
.vm-ex-bk-bar-fig {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-ex-bk-bar-from,
.vm-ex-bk-bar-cur { font-size: 11px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-bk-bar-ask { font-size: 12.5px; font-weight: 600; color: var(--vex-ink-3); }
.vm-ex-bk-go {
    height: 52px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-ex-bk-go i { font-size: 12px; }
.vm-ex-bk-go:disabled { cursor: progress; opacity: .8; }

/* -- The move (14-15 brief, R7): what stays hers until she picks ------
   One hairline under the items in "Your visit", in the vertical's ink. */
.vm-ex-bk-keeps {
    padding: 10px 13px 11px;
    border-top: 1px solid var(--vex-hairline);
    font-size: 11.5px;
    color: var(--vex-ink-3);
    line-height: 1.45;
    text-wrap: pretty;
}

/* ----------------------------------------------------------------
   10. SCREEN 14 — VISIT CONFIRMED (exams/visit.html)
   Handoff: the user drop "Screens 11-18/Screen 14 - Visit confirmed"
   (docs/design/pharmacy/screens/14/). 14a walk-in, 14b held time.

   Four rules this section holds:
     - NOT A RECEIPT. The band carries the one sentence, the day over the
       arrival figure and the reference; the body carries facts.
     - NOTHING IN THE BODY IS LIFTED: bordered cards only, no shadow. The
       teal tint on the fasting clock is the only emphasis on the page;
       the one shadow is the Directions act's (Sept 24 2026 redesign,
       docs/design/pharmacy/screens/14/frame.html), never a card's.
     - Small text on the band is #fff or #e2e8f0; #cbd5e1 is 3.8:1 on
       #12775f and fails. The day label is white (the brief).
     - Every clock time and every figure is tabular; every control 44px.
   ---------------------------------------------------------------- */

/* -- The band: 09a's material, lit top-left (the frame's own) ------- */
.vm-ex-vc-band {
    position: relative;
    flex-shrink: 0;
    padding: 10px 14px 16px;
    color: #fff;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
                linear-gradient(160deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
/* (14's exit is the hub's one back control, .vm-back.vm-back--band.) */
.vm-ex-vc-head { display: flex; align-items: flex-start; gap: 10px; margin-top: 9px; }
/* The 22px glass check: what the sentence confirms. */
.vm-ex-vc-check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 9.5px;
}
.vm-ex-vc-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.3;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vm-ex-vc-title:focus { outline: none; }
.vm-ex-vc-when { margin-top: 17px; }
.vm-ex-vc-day { font-size: 11.5px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.vm-ex-vc-fig {
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-top: 4px;
    white-space: nowrap;
}
/* The nature of the time: a white inner row under the figure (the
   2026-09-24 redesign) — people, never a clock. On white, so its words
   are ink, not the band's #e2e8f0. */
.vm-ex-vc-nature {
    margin-top: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.vm-ex-vc-nature > i { width: 14px; flex-shrink: 0; margin-top: 3px; text-align: center; color: var(--vex-ground); font-size: 12px; }
.vm-ex-vc-nature-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; text-wrap: pretty; }
/* The reference: 09e's inset dark block. No QR, no barcode. */
.vm-ex-vc-ref {
    margin-top: 16px;
    background: rgba(2, 26, 21, .26);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
    padding: 11px 13px;
    min-height: 52px;
}
.vm-ex-vc-ref-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.vm-ex-vc-ref-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; margin-top: 3px; }
.vm-ex-vc-ref-v {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .09em;
    overflow-wrap: anywhere;
}
.vm-ex-vc-ref-or { font-size: 11.5px; color: var(--vex-on-band); }

/* -- Loading and the states that are not a visit -------------------- */
.vm-ex-vc-state { padding: 0 14px; flex-shrink: 0; }
.vm-ex-vc-state .vm-ex-none { margin-top: 18px; }
.vm-ex-vc-statedoor {
    align-self: flex-start;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
}
.vm-ex-vc-statedoor:hover { color: var(--vex-ground); }

/* -- The body: bordered facts, the frame's 18px rhythm -------------- */
.vm-ex-vc-body { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 18px; }
.vm-ex-vc-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.vm-ex-vc-h { font-size: 12px; font-weight: 700; color: var(--vex-ink-3); padding: 0 2px; }
.vm-ex-vc-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px; }
.vm-ex-vc-headrow .vm-ex-vc-h { padding: 0; flex-shrink: 0; }
.vm-ex-vc-headnote { min-width: 0; font-size: 11.5px; color: var(--vex-ink-4); text-align: right; overflow-wrap: anywhere; }
.vm-ex-vc-card { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; min-width: 0; }
.vm-ex-vc-row { padding: 12px 13px; display: flex; gap: 11px; }
.vm-ex-vc-copy { flex: 1; min-width: 0; }
.vm-ex-vc-tile {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}
.vm-ex-vc-tile--on { background: #fff; color: var(--vex-ground); }
/* A bare glyph beside a row's words (the paper, the bookmark). */
.vm-ex-vc-glyph { width: 16px; flex-shrink: 0; margin-top: 3px; color: var(--vex-ink-4); font-size: 12px; }
.vm-ex-vc-row-t { font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; overflow-wrap: anywhere; }
.vm-ex-vc-row-t + .vm-ex-vc-row-t { margin-top: 4px; }
.vm-ex-vc-row-s { font-size: 12.5px; color: var(--vex-ink-2); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.vm-ex-vc-row-s--lead { margin-top: 5px; }
.vm-ex-vc-plain { padding: 12px 13px; font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.5; text-wrap: pretty; }
.vm-ex-vc-plain--flush { flex: 1; min-width: 0; padding: 0; }

/* Before <day> morning: the one teal tint. */
.vm-ex-vc-fast { background: var(--vex-tint); border-radius: 18px; padding: 13px; display: flex; gap: 11px; }
.vm-ex-vc-fast-t { font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; }
.vm-ex-vc-fast-s { font-size: 12.5px; color: var(--vex-ink-2); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }

/* Getting there: the address row is the door to 12a; the pair of acts
   under it. The 2026-09-24 redesign drops the heading, puts the pin on a
   38px teal tile with a teal chevron, and makes the acts two 48px pills
   side by side, 8px apart: Directions solid, the call tinted. */
.vm-ex-vc-place {
    width: 100%;
    min-height: 44px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-align: left;
}
a.vm-ex-vc-place:hover { color: inherit; }
.vm-ex-vc-place-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; overflow-wrap: anywhere; }
.vm-ex-vc-place-m { display: block; font-size: 11.5px; color: var(--vex-ink-4); margin-top: 4px; }
.vm-ex-vc-sep { color: var(--vex-sep); }
.vm-ex-vc-chev { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }
.vm-ex-vc-tile--place {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 14px;
}
.vm-ex-vc-acts { display: flex; gap: 8px; padding: 2px 13px 13px; }
.vm-ex-vc-card > .vm-ex-vc-acts:first-child { padding-top: 13px; }
.vm-ex-vc-act {
    flex: 1;
    min-width: 0;
    height: 48px;
    border-radius: 999px;
    background: var(--vex-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 6px;
    color: var(--vex-ground);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}
/* "WhatsApp them" is the longest label: one line from 360px up, and on a
   narrower screen it wraps inside the 48px pill rather than spill. */
.vm-ex-vc-act span { min-width: 0; overflow-wrap: anywhere; }
.vm-ex-vc-act:hover { color: var(--vex-ground); }
.vm-ex-vc-act i { font-size: 12px; }
/* Directions, the solid one. The frame fills it #16a085; white 14px text
   on #16a085 is 3.3:1 and fails AA, so the fill is the vertical's ground
   (6.3:1) — 13's ruling for its commit. The shadow is the frame's teal
   act shadow. */
.vm-ex-vc-act--go {
    background: var(--vex-ground);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
}
.vm-ex-vc-act--go:hover { color: #fff; }
.vm-ex-vc-act--go i { font-size: 13px; }
.vm-ex-vc-act:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }

/* Your visit: plural-ready rows, the money in a #f8fafc foot. The typed
   name at 15px/700 — 12's R4 floor, as on 13 (the frame draws 14px). */
.vm-ex-vc-item { padding: 12px 13px; }
.vm-ex-vc-item + .vm-ex-vc-item { border-top: 1px solid var(--vex-hairline); }
.vm-ex-vc-item-name { font-size: 15px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vm-ex-vc-item-sub { font-size: 11.5px; color: var(--vex-ink-4); margin-top: 4px; line-height: 1.4; }
.vm-ex-vc-foot {
    padding: 11px 13px;
    border-top: 1px solid var(--vex-hairline);
    background: var(--vex-canvas);
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-ex-vc-foot-l { flex: 1; min-width: 0; font-size: 11.5px; color: var(--vex-ink-2); line-height: 1.4; }
.vm-ex-vc-amount {
    flex-shrink: 0;
    max-width: 62%;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    column-gap: 4px;
    text-align: right;
}
.vm-ex-vc-amount-fig {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-ex-vc-amount-from,
.vm-ex-vc-amount-cur { font-size: 11px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-vc-amount-ask { flex-basis: 100%; font-size: 11px; color: var(--vex-ink-4); }

/* A footed door: 44px, the label, an optional note, the chevron. */
.vm-ex-vc-door {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border-top: 1px solid var(--vex-hairline);
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    color: var(--vex-ground);
}
.vm-ex-vc-card > .vm-ex-vc-door:first-child { border-top: none; }
.vm-ex-vc-door:hover { color: var(--vex-ground); }
.vm-ex-vc-door-l { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--vex-ground); }
.vm-ex-vc-door-note { flex-shrink: 0; font-size: 11.5px; color: var(--vex-ink-4); }
.vm-ex-vc-door i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }
/* "Give up this time": the quieter of the two, as the frame draws it. */
.vm-ex-vc-door--quiet .vm-ex-vc-door-l { color: var(--vex-ink-3); }
.vm-ex-vc-door--quiet i { color: var(--vex-ink-4); }

/* A refused give-up, said in the vertical's ink — never red. */
.vm-ex-vc-quiet { padding: 0 2px; font-size: 12px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }
.vm-ex-vc-quiet:focus { outline: none; }

/* The give-up sheet's second button: 44px, text only (R6). */
.vm-ex-vc-keep {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-ex-sw-primary:disabled { cursor: progress; opacity: .8; }

/* ----------------------------------------------------------------
   11. SCREEN 15 — MY VISITS (exams/visits.html)
   Handoff: the user drop "Screens 11-18/Screen 15 - My visits"
   (docs/design/pharmacy/screens/15/). 15a.

   Three rules this section holds:
     - A BAR, NOT A STATE BAND: the frame's teal material (director's
       ruling, 2026-09-23 — the brief's "white" was 13's rule carried
       over), the labelled exit and the title; no sentence, no count.
     - ONE LIFT: only the first Coming-up card, and only when its day is
       today or tomorrow, carries the house shadow; its headline block
       (the window, the night strip, the white inner row) is the one teal
       tint. Every other card is bordered and flat.
     - Earlier rows are plain rows in one group: not doors, no chevron.
   The Sept 24 2026 redesign (docs/design/pharmacy/screens/15/frame.html)
   set the title at 26px, a 44px date tile before each card, the headline
   block with the night strip, the one-row foot, the date column and the
   inset question on the Earlier rows, and the results glyph on a tile.
   ---------------------------------------------------------------- */

/* A screen reader's copy of what a date tile draws for the eye. */
.vm-ex-mv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -- The bar ------------------------------------------------------ */
.vm-ex-mv-bar {
    position: relative;
    flex-shrink: 0;
    padding: 10px 14px 20px;
    color: #fff;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
                linear-gradient(160deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
/* (No exit since slice N, N14: My visits sits under the Orders tab.) */
.vm-ex-mv-title {
    margin-top: 8px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
}

/* -- The body ----------------------------------------------------- */
.vm-ex-mv-body { padding: 18px 14px 20px; display: flex; flex-direction: column; gap: 22px; }
.vm-ex-mv-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vm-ex-mv-h { font-size: 12px; font-weight: 700; color: var(--vex-ink-3); padding: 0 2px; }
.vm-ex-mv-sep { color: var(--vex-sep); }

/* While reading: a quiet skeleton, no words. */
.vm-ex-mv-skel { display: flex; flex-direction: column; gap: 9px; }
.vm-ex-mv-skel-h { width: 72px; height: 12px; border-radius: 6px; background: var(--vex-grey); }
.vm-ex-mv-skel-card { height: 168px; border-radius: 18px; background: var(--vex-grey-2); }
.vm-ex-mv-skel-card--short { height: 112px; }

/* -- Coming up: each card is one door to 14 ---------------------- */
.vm-ex-mv-cards { display: flex; flex-direction: column; gap: 10px; }
.vm-ex-mv-card {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    overflow: hidden;
    color: inherit;
    text-align: left;
}
.vm-ex-mv-card:hover { color: inherit; }
.vm-ex-mv-card:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
/* The one lift: tomorrow's (or today's) visit, and only the first. */
.vm-ex-mv-card.is-lifted { border-color: transparent; box-shadow: var(--vex-card-shadow); }
.vm-ex-mv-card-top { display: flex; align-items: center; gap: 12px; padding: 13px 13px 0; }
/* The date tile (2026-09-24): 44px, radius 13, the tint; the weekday's
   three letters over the day of the month. */
.vm-ex-mv-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--vex-tint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-mv-tile-wk,
.vm-ex-mv-date-wk {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vex-ground);
    line-height: 1;
}
.vm-ex-mv-tile-d,
.vm-ex-mv-date-d {
    display: block;
    margin-top: 3px;
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1;
}
.vm-ex-mv-card-id { display: block; flex: 1; min-width: 0; }
.vm-ex-mv-name {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-mv-where { display: block; font-size: 11.5px; color: var(--vex-ink-4); margin-top: 3px; }
.vm-ex-mv-chev { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }

/* A bordered card's when: "Arrive at" / "Come any time between" beside
   the 19px figure, the nature under it — both on the name's left edge
   (13 + 44 tile + 12 = 69px). */
.vm-ex-mv-when { display: block; padding: 12px 13px 12px 69px; }
.vm-ex-mv-when-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
.vm-ex-mv-day { display: block; font-size: 11.5px; font-weight: 600; color: var(--vex-ink-3); }
.vm-ex-mv-fig {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.5px;
    line-height: 1.15;
    white-space: nowrap;
}
.vm-ex-mv-nature { display: block; font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ex-mv-when-row + .vm-ex-mv-nature { margin-top: 6px; }
/* The fast (its title) and the paper as plain terms. */
.vm-ex-mv-term { display: flex; gap: 10px; padding: 11px 13px; border-top: 1px solid var(--vex-hairline); }
.vm-ex-mv-term-g { width: 15px; flex-shrink: 0; margin-top: 3px; text-align: center; color: var(--vex-ink-4); font-size: 11px; }
.vm-ex-mv-term-t { display: block; flex: 1; min-width: 0; font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.45; }

/* The lifted card's headline block: the teal label, the 30px window, the
   night strip, one white inner row (the fast in full, the nature, the
   paper). The one tint on the page. */
.vm-ex-mv-head { display: block; margin: 13px; background: var(--vex-tint); border-radius: 14px; padding: 13px 12px 12px; }
.vm-ex-mv-head-l { display: block; font-size: 11.5px; font-weight: 600; color: var(--vex-ground); overflow-wrap: anywhere; }
.vm-ex-mv-head-fig {
    display: block;
    margin-top: 4px;
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -1px;
    line-height: 1.1;
    white-space: nowrap;
}
.vm-ex-mv-inner { display: block; margin-top: 10px; background: #fff; border-radius: 10px; overflow: hidden; }
.vm-ex-mv-in-row { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; }
.vm-ex-mv-in-row + .vm-ex-mv-in-row { border-top: 1px solid var(--vex-hairline); }
.vm-ex-mv-in-g { width: 14px; flex-shrink: 0; margin-top: 3px; text-align: center; color: var(--vex-ground); font-size: 12px; }
.vm-ex-mv-in-copy { display: block; flex: 1; min-width: 0; }
.vm-ex-mv-in-t { display: block; font-size: 12.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.45; }
.vm-ex-mv-in-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vex-ink-2); line-height: 1.45; text-wrap: pretty; }
.vm-ex-mv-in-plain { font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }

/* The night strip (visits.js, nightStripHtml): SVG, so every position is
   an attribute and every colour a class here. 8px white track, the no-food
   span #cbd5e1, the window #16a085, a 14px ink dot at now ringed in the
   block's tint, a 2px teal tick at the stop, 11px tabular labels. It
   repeats facts printed beside it, so it is hidden from screen readers. */
.vm-ex-ns { display: block; width: 100%; height: 34px; margin-top: 14px; overflow: visible; }
.vm-ex-ns-track { fill: #fff; }
.vm-ex-ns-fast { fill: var(--vex-sep); }
.vm-ex-ns-win { fill: var(--vex-pharm); }
.vm-ex-ns-now { fill: var(--vex-ink); stroke: var(--vex-tint); stroke-width: 3; }
.vm-ex-ns-tick { stroke: var(--vex-ground); stroke-width: 2; stroke-linecap: round; }
.vm-ex-ns-l {
    fill: var(--vex-ground);
    font-family: var(--vex-font-body);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vm-ex-ns-l--quiet { fill: var(--vex-ink-3); font-weight: 500; }

/* What is booked, and for whom. */
.vm-ex-mv-items { display: block; border-top: 1px solid var(--vex-hairline); }
.vm-ex-mv-item { display: block; padding: 12px 13px; }
.vm-ex-mv-item + .vm-ex-mv-item { border-top: 1px solid var(--vex-hairline); }
.vm-ex-mv-item-name { display: block; font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vm-ex-mv-item-sub { display: block; font-size: 11.5px; color: var(--vex-ink-4); margin-top: 3px; }
.vm-ex-mv-for { display: block; padding: 0 13px 11px; margin-top: -4px; font-size: 11.5px; color: var(--vex-ink-3); overflow-wrap: anywhere; }

/* One #f8fafc foot, one row (2026-09-24): what you say | what you pay.
   The say half keeps its width, the pay half takes the rest, right. */
.vm-ex-mv-foot { display: flex; background: var(--vex-canvas); border-top: 1px solid var(--vex-hairline); }
.vm-ex-mv-say { display: block; flex: 0 0 auto; max-width: 50%; padding: 11px 13px; border-right: 1px solid var(--vex-grey); }
.vm-ex-mv-say-k { display: block; font-size: 11px; color: var(--vex-ink-3); line-height: 1.3; }
.vm-ex-mv-say-v {
    display: block;
    margin-top: 3px;
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: .09em;
    overflow-wrap: anywhere;
}
.vm-ex-mv-pay { display: block; flex: 1; min-width: 0; padding: 11px 13px; text-align: right; }
.vm-ex-mv-pay-l { display: block; font-size: 11px; color: var(--vex-ink-3); line-height: 1.3; }
.vm-ex-mv-nowrap { white-space: nowrap; }
.vm-ex-mv-amount {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    flex-wrap: wrap;
    column-gap: 4px;
    margin-top: 3px;
    text-align: right;
}
/* No reference to say: the pay half alone reads from the left. */
.vm-ex-mv-pay:only-child { text-align: left; }
.vm-ex-mv-pay:only-child .vm-ex-mv-amount { justify-content: flex-start; text-align: left; }
.vm-ex-mv-amount-fig {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-ex-mv-amount-from,
.vm-ex-mv-amount-cur { font-size: 11px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-mv-amount-ask { flex-basis: 100%; font-size: 11px; color: var(--vex-ink-4); }

/* -- Earlier: plain rows in one group ------------------------------ */
.vm-ex-mv-rows { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ex-mv-row { padding: 12px 13px; display: flex; align-items: center; gap: 12px; }
.vm-ex-mv-row:focus { outline: none; }
.vm-ex-mv-rows > * + .vm-ex-mv-row { border-top: 1px solid var(--vex-hairline); }
/* The plain date column (2026-09-24): 38px, no fill, no chevron — a
   passed row is not a door. */
.vm-ex-mv-date { display: block; width: 38px; flex-shrink: 0; text-align: center; }
.vm-ex-mv-date-wk { color: var(--vex-ink-4); }
.vm-ex-mv-date-d { color: var(--vex-ink-2); }
.vm-ex-mv-row-main { flex: 1; min-width: 0; }
.vm-ex-mv-row-t { font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vm-ex-mv-row-s { font-size: 11.5px; color: var(--vex-ink-4); margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.vm-ex-mv-row-m {
    flex-shrink: 0;
    font-family: var(--vex-font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vex-ink-3);
    white-space: nowrap;
}
/* The one question, in an inset #f8fafc panel under its row; the two
   answers equal 44px tinted pills — the same weight, neither nudged. */
.vm-ex-mv-ask { margin: 0 13px 13px; background: var(--vex-canvas); border-radius: 14px; padding: 12px; }
.vm-ex-mv-ask-t {
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.3;
}
.vm-ex-mv-ask-s { font-size: 12.5px; color: var(--vex-ink-2); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }
.vm-ex-mv-ask-fault { font-size: 12px; font-weight: 600; color: var(--vex-ink); margin-top: 6px; line-height: 1.45; }
.vm-ex-mv-answers { display: flex; gap: 8px; margin-top: 11px; }
.vm-ex-mv-answer {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-tint);
    padding: 0 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vex-ground);
}
.vm-ex-mv-answer:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ex-mv-answer:disabled { cursor: progress; opacity: .7; }

/* -- The states and the results card ------------------------------ */
.vm-ex-mv-statedoor {
    align-self: flex-start;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 2px;
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
}
.vm-ex-mv-statedoor:hover { color: var(--vex-ground); }
.vm-ex-mv-results { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ex-mv-results-row { padding: 13px; display: flex; gap: 12px; align-items: flex-start; }
/* The glyph on a 38px #f1f5f9 tile (2026-09-24). */
.vm-ex-mv-results-tile {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-ex-mv-results-copy { flex: 1; min-width: 0; }
.vm-ex-mv-results-t { font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.35; }
.vm-ex-mv-results-s { font-size: 12.5px; color: var(--vex-ink-2); margin-top: 4px; line-height: 1.5; }
.vm-ex-mv-door {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border-top: 1px solid var(--vex-hairline);
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--vex-ground);
}
.vm-ex-mv-door:hover { color: var(--vex-ground); }
.vm-ex-mv-door-l { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; }
.vm-ex-mv-door-note { flex-shrink: 0; font-size: 11.5px; color: var(--vex-ink-4); }
.vm-ex-mv-door i { font-size: 12px; flex-shrink: 0; }

/* ----------------------------------------------------------------
   12. SCREEN 18 — A STRUCTURE'S HOURS (exams/hours.html)
   Handoff: the owner's drop "Screen 18 - Structure hours"
   (docs/design/pharmacy/screens/18/, frames regenerated 2026-09-24; the
   FRAME wins over the README where they disagree) and the director's
   brief (R1-R14). 18a one change waiting · 18b sample hours left blank ·
   18c choosing the stop.

   Five rules this section holds:
     - THE SUPPLY SIDE'S BAND: 16a/09a's 160deg teal with the light
       top-left, a glass exit pill, the title and the structure's name.
       Small text on it is white or #e2e8f0.
     - SHADOW = WORK YOU CAN DO: the three lifted cards (the state and the
       week, the doors, the samples) and the publish bar; nothing else.
     - FIELDS are white with a 1.5px #cbd5e1 edge; a field that differs
       from what is live takes a 1.5px #16a085 edge (a mark, not a fill).
     - WHITE TEXT NEVER SITS ON #16a085: Publish, the sheet's commit and
       the selected half-hour are --vex-ground #0f6d5c (R-AA; the frame
       draws them #16a085).
     - Every control is 44px or more; every clock time is tabular.
   The frame declares `body{line-height:1.5}` and every block inherits it,
   while §2 declares none — so the screen's own root declares it (the
   line-box trap the pharmacy sheet documents).
   ---------------------------------------------------------------- */
.vm-ex-hr-app { line-height: 1.5; }

/* -- The band ------------------------------------------------------ */
.vm-ex-hr-band {
    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, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-ex-hr-toprow { display: flex; align-items: center; }
/* (18's exit is the hub's one back control, .vm-back.vm-back--band.) */
.vm-ex-hr-title {
    margin-top: 12px;
    font-family: var(--vex-font-display);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-hr-name { font-size: 12px; color: var(--vex-on-band); margin-top: 3px; overflow-wrap: anywhere; }

/* -- The body -------------------------------------------------------- */
.vm-ex-hr-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 18px 14px 22px;
}
.vm-ex-hr-body > .vm-loading { padding: 4px 2px; }
.vm-ex-hr-retry,
.vm-ex-hr-noowner-doors a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.vm-ex-hr-retry { align-self: flex-start; padding: 0 2px; color: var(--vex-ground); font-size: 13px; }

/* The honest state for an account that runs no structure (09a's idiom). */
.vm-ex-hr-noowner {
    padding: 22px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.vm-ex-hr-noowner > i { font-size: 30px; color: var(--vex-sep); }
.vm-ex-hr-noowner-t {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1.3;
    text-wrap: balance;
}
.vm-ex-hr-noowner-b { font-size: 13.5px; color: var(--vex-ink-3); max-width: 300px; text-wrap: pretty; }
.vm-ex-hr-noowner-doors { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 6px; }
.vm-ex-hr-noowner-doors a { height: 48px; border-radius: 13px; font-size: 14.5px; }
.vm-ex-hr-noowner-doors a:first-child { background: var(--vex-ground); color: #fff; }
.vm-ex-hr-noowner-doors a + a { border: 1px solid var(--vex-sep); color: var(--vex-ink); }

/* -- The lifted card (the frame's one card idiom) --------------------- */
.vm-ex-hr-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}

/* -- The state card: what exam lists say, now and once published ---- */
.vm-ex-hr-statewrap { padding: 14px 14px 0; }
.vm-ex-hr-state { background: var(--vex-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ex-hr-state-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vm-ex-hr-state-k { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ex-hr-state-now {
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink-3);
    letter-spacing: -.2px;
    white-space: nowrap;
}
.vm-ex-hr-state-rule { height: 1px; background: rgba(15, 109, 92, .16); margin: 10px 0 9px; }
.vm-ex-hr-state-once { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ex-hr-state-once i { font-size: 10px; }
.vm-ex-hr-state-fig {
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -1px;
    line-height: 1.05;
    margin-top: 4px;
    white-space: nowrap;
}
.vm-ex-hr-state-sub { font-size: 12px; color: var(--vex-ink-2); margin-top: 8px; }
/* 18b: the customer's own words when no stop is stated (11b's strings). */
.vm-ex-hr-state-title {
    font-family: var(--vex-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.6px;
    line-height: 1.15;
    margin-top: 4px;
}
.vm-ex-hr-state-ask { font-size: 13px; font-weight: 600; color: var(--vex-ink-2); margin-top: 4px; }
/* The white inner row: people already told a window, or "You stay
   listed". A consequence stated conditionally — never a count. */
.vm-ex-hr-state-row {
    margin-top: 11px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-ex-hr-state-row > i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; margin-top: 3px; }
.vm-ex-hr-state-row-t { font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.45; text-wrap: pretty; }
.vm-ex-hr-state-row-t strong { color: var(--vex-ink); font-weight: 600; }
.vm-ex-hr-state-row-t.is-strong { font-weight: 600; color: var(--vex-ink); }

/* -- The week, drawn from the data ------------------------------------
   Bars on a 06:00-19:00 scale (13 h = 100%), widened only when a door
   opens earlier or closes later. Left and width are set by hours.js as
   --l / --w through the CSSOM (never a style attribute in the markup). */
.vm-ex-hr-week { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.vm-ex-hr-wrow-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vm-ex-hr-wrow-k { font-size: 12px; font-weight: 600; color: var(--vex-ink-2); }
.vm-ex-hr-wrow-v { font-size: 11.5px; color: var(--vex-ink-4); white-space: nowrap; }
.vm-ex-hr-track { position: relative; height: 10px; margin-top: 6px; background: var(--vex-grey-2); border-radius: 999px; }
.vm-ex-hr-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--l, 0%);
    width: var(--w, 0%);
    border-radius: 999px;
}
.vm-ex-hr-seg--doors { background: var(--vex-mark-tint); }
.vm-ex-hr-seg--shown { box-sizing: border-box; border: 1.5px dashed var(--vex-ground); background: #fff; }
.vm-ex-hr-seg--samples { background: var(--vex-mark); }
.vm-ex-hr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--vex-ink-3); }
.vm-ex-hr-key { display: flex; align-items: center; gap: 6px; }
.vm-ex-hr-swatch { width: 14px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.vm-ex-hr-swatch--samples { background: var(--vex-mark); }
.vm-ex-hr-swatch--doors { background: var(--vex-mark-tint); }
.vm-ex-hr-swatch--shown { box-sizing: border-box; border: 1.5px dashed var(--vex-ground); }

/* -- The two groups: a heading over one lifted card ------------------- */
.vm-ex-hr-sec { display: flex; flex-direction: column; gap: 10px; }
.vm-ex-hr-h {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    padding: 0 2px;
}
.vm-ex-hr-headblock { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.vm-ex-hr-headblock .vm-ex-hr-h { padding: 0; }
.vm-ex-hr-headsub { font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-ex-hr-headsub strong { color: var(--vex-ink); font-weight: 600; }

/* A row: the day, quiet; the times, strong (12a's grading). */
.vm-ex-hr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: 68px;
}
.vm-ex-hr-card > .vm-ex-hr-row + .vm-ex-hr-row,
.vm-ex-hr-card > .vm-ex-hr-srow + .vm-ex-hr-srow,
.vm-ex-hr-card > .vm-ex-hr-row + .vm-ex-hr-srow,
.vm-ex-hr-card > .vm-ex-hr-srow + .vm-ex-hr-row { border-top: 1px solid var(--vex-hairline); }
.vm-ex-hr-day { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--vex-ink-2); }
.vm-ex-hr-field {
    height: 44px;
    width: 76px;
    border-radius: 11px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* A field that differs from what is live. */
.vm-ex-hr-field.is-changed,
.vm-ex-hr-closed.is-changed,
.vm-ex-hr-blank.is-changed { border: 1.5px solid var(--vex-mark); }
.vm-ex-hr-dash { color: var(--vex-ink-4); font-size: 13px; flex-shrink: 0; }
/* Closed: a borderless fill as wide as the two fields and the dash. */
.vm-ex-hr-closed {
    height: 44px;
    width: 179px;
    border-radius: 11px;
    background: var(--vex-grey-2);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vex-ink-3);
    flex-shrink: 0;
}
/* A footed door across the card. */
.vm-ex-hr-door {
    width: 100%;
    height: 52px;
    border-top: 1px solid var(--vex-hairline);
    background: #fff;
    font-size: 14px;
    font-weight: 700;
}
.vm-ex-hr-door--split { color: var(--vex-ground); }
.vm-ex-hr-door--clear { color: var(--vex-ink-3); }

/* The samples row: Starts - Stops, labels over the fields. */
.vm-ex-hr-srow { padding: 12px 14px; }
.vm-ex-hr-srow-in { display: flex; align-items: flex-end; gap: 10px; }
.vm-ex-hr-srow-in > .vm-ex-hr-day,
.vm-ex-hr-srow-in > .vm-ex-hr-dash { padding-bottom: 12px; }
.vm-ex-hr-col { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.vm-ex-hr-col-k { font-size: 11px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-hr-col-k--stop { font-weight: 700; color: var(--vex-ink); }
/* Inherited from the opening time: quieter, until it is changed. */
.vm-ex-hr-field--inherited { font-weight: 600; color: var(--vex-ink-3); }
/* A close that moved under a stop clipped it; the row says so. */
.vm-ex-hr-clip { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--vex-ground); text-align: right; }
/* 18b: one white field where the two would be. */
.vm-ex-hr-blank {
    height: 44px;
    width: 179px;
    border-radius: 11px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    font-size: 14px;
    font-weight: 600;
    color: var(--vex-ink-3);
    flex-shrink: 0;
}
.vm-ex-hr-note {
    padding: 10px 14px;
    border-top: 1px solid var(--vex-hairline);
    font-size: 11.5px;
    color: var(--vex-ink-4);
    line-height: 1.45;
}
.vm-ex-hr-note--blank { padding: 10px 14px 12px; color: var(--vex-ink-3); text-wrap: pretty; }

/* -- The publish bar: present only while something differs ---------- */
.vm-ex-hr-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
}
.vm-ex-hr-bar-in { padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.vm-ex-hr-publish {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
.vm-ex-hr-publish i { font-size: 13px; }
.vm-ex-hr-publish[aria-busy="true"] { cursor: progress; }

/* -- 18c: the time sheets (12's .vm-sheet chrome, §8) ----------------
   The frame's own geometry: 22px top radius, 10/14/16 padding, 14px
   between the handle, the title block, the grid, the plain line and the
   two buttons; a flat scrim, no shadow on the sheet. */
.vm-ex-hr-sheet {
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
}
.vm-ex-hr-sheet .vm-sheet-grab { flex-shrink: 0; }
.vm-ex-hr-sheet-head { padding: 0 2px; }
.vm-ex-hr-sheet-title {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-ex-hr-sheet-sub { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 3px; }
/* 13b's slots: borderless #f8fafc fills, 16px radius, 48px. */
.vm-ex-hr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vm-ex-hr-slot {
    height: 48px;
    border-radius: 16px;
    background: var(--vex-canvas);
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    font-variant-numeric: tabular-nums;
    line-height: normal;
}
.vm-ex-hr-slot.has-live { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.vm-ex-hr-slot-t { line-height: 1.1; }
.vm-ex-hr-slot-live {
    font-family: var(--vex-font-body);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: normal;   /* words, not a clock */
    color: var(--vex-ink-3);
    line-height: 1.1;
}
.vm-ex-hr-slot.is-selected { background: var(--vex-ground); color: #fff; }
.vm-ex-hr-slot.is-selected .vm-ex-hr-slot-live { color: #fff; }
/* "Closed this day" lives INSIDE the doors sheet (09d's rule). */
.vm-ex-hr-closedopt {
    height: 48px;
    width: 100%;
    border-radius: 16px;
    background: var(--vex-grey-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--vex-ink-3);
}
.vm-ex-hr-closedopt.is-selected { background: var(--vex-ground); color: #fff; }
.vm-ex-hr-sheet-note { padding: 0 2px; font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-ex-hr-sheet-note strong { color: var(--vex-ink); font-weight: 600; }
.vm-ex-hr-sheet-acts { display: flex; flex-direction: column; gap: 4px; }
.vm-ex-hr-commit {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ex-hr-commit:disabled { background: var(--vex-grey-2); color: var(--vex-ink-3); box-shadow: none; cursor: default; }
.vm-ex-hr-cancel { width: 100%; height: 44px; background: transparent; color: var(--vex-ink-3); font-size: 14px; font-weight: 700; }

/* ----------------------------------------------------------------
   13. SCREEN 22 — MY LISTING (exams/listing.html)
   Handoff: the owner's drop "Screen 22 - My listing"
   (docs/design/pharmacy/screens/22/, frames regenerated 2026-09-24; the
   FRAME wins over the README where they disagree) and the director's
   brief (A1-A12, C1-C10). 22a the page · 22b which exam is it · 22c
   ready to publish (and the row view) · the landmark sheet.

   Six rules this section holds:
     - 22a IS A TAB: 21's band material (09a's, the light top-left), no
       back control, the three-tab bar. 22b and 22c are PUSHED: 18's
       header with its glass exit, and no tab bar.
     - SHADOW = WORK YOU CAN DO: the "Your page" card, 22b's card, 22c's
       card and the publish bar. The service groups are BORDERED (settled
       rows), 12's rule.
     - WHITE TEXT NEVER SITS ON #16a085: the "Add" pill, Publish and the
       sheet's commit are --vex-ground #0f6d5c (R-AA; the frame draws the
       first two #16a085). #16a085 stays a mark: a focused field's edge.
     - A price "On request" is quieter than a figure, never styled as
       worse: no strike, no grey-out, no warning colour.
     - Every control is 44px or more; every figure and clock is tabular.
     - The frame declares `body{line-height:1.5}` and its buttons keep the
       UA's `line-height: normal`, so the screen's root declares 1.5 and
       every whole-row button declares `normal` (the line-box trap the
       pharmacy sheet documents).
   ---------------------------------------------------------------- */
.vm-ex-ls-app { line-height: 1.5; }
.vm-ex-ls-view { flex: 1 0 auto; display: flex; flex-direction: column; }

/* -- 22a: the band (21's material) ---------------------------------- */
.vm-ex-ls-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, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    box-shadow: var(--vex-band-inset);
}
.vm-ex-ls-id { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.vm-ex-ls-name {
    font-family: var(--vex-font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-ex-ls-kind { font-size: 11.5px; color: var(--vex-on-band); margin-top: 2px; }
.vm-ex-ls-stateblock { display: flex; flex-direction: column; gap: 5px; }
.vm-ex-ls-state {
    font-family: var(--vex-font-display);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.45px;
    line-height: 1.22;
    text-wrap: pretty;
}
.vm-ex-ls-state2 { font-size: 12.5px; color: var(--vex-on-band); line-height: 1.45; }
.vm-ex-ls-state2 strong { font-weight: 600; color: #fff; }

/* -- 22a: the body --------------------------------------------------- */
.vm-ex-ls-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 18px 14px 22px;
}
.vm-ex-ls-body > .vm-loading { padding: 4px 2px; }
.vm-ex-ls-retry,
.vm-ex-ls-noowner-doors a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.vm-ex-ls-retry { align-self: flex-start; padding: 0 2px; color: var(--vex-ground); font-size: 13px; }

/* The honest state for an account that runs no structure (18's). */
.vm-ex-ls-noowner {
    padding: 22px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.vm-ex-ls-noowner > i { font-size: 30px; color: var(--vex-sep); }
.vm-ex-ls-noowner-t {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1.3;
    text-wrap: balance;
}
.vm-ex-ls-noowner-b { font-size: 13.5px; color: var(--vex-ink-3); max-width: 300px; text-wrap: pretty; }
.vm-ex-ls-noowner-doors { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 6px; }
.vm-ex-ls-noowner-doors a { height: 48px; border-radius: 13px; font-size: 14.5px; }
.vm-ex-ls-noowner-doors a:first-child { background: var(--vex-ground); color: #fff; }
.vm-ex-ls-noowner-doors a + a { border: 1px solid var(--vex-sep); color: var(--vex-ink); }

/* -- 22a: "Your page", the one lifted card --------------------------- */
.vm-ex-ls-card,
.vm-ex-ls-pcard,
.vm-ex-ls-ecard {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}
/* The photograph, 136px. No photograph: the vertical's own ground (12's
   no-photo hero), never a stock picture and never a caption. */
.vm-ex-ls-photo { position: relative; height: 136px; overflow: hidden; }
.vm-ex-ls-photo.is-nophoto { background: var(--vex-band); box-shadow: var(--vex-band-inset); }
.vm-ex-ls-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vm-ex-ls-photo-go {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--vex-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .14);
}
.vm-ex-ls-photo-go i { font-size: 12px; color: var(--vex-ground); }
.vm-ex-ls-photo-go[aria-disabled="true"] { cursor: progress; }
/* A failed photo: one line under it; the old photograph stays. */
.vm-ex-ls-photo-fault { padding: 10px 16px 0; font-size: 12px; font-weight: 600; color: var(--vex-ink-2); line-height: 1.4; }
.vm-ex-ls-findwrap { padding: 14px 14px 0; }
.vm-ex-ls-find { background: var(--vex-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ex-ls-find-k { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ex-ls-landmark {
    font-family: var(--vex-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.3;
    margin-top: 4px;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vm-ex-ls-landmark.is-none { color: var(--vex-ink-3); }
.vm-ex-ls-address { font-size: 12px; color: var(--vex-ink-2); margin-top: 5px; overflow-wrap: anywhere; }
.vm-ex-ls-landmark-go {
    margin-top: 12px;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-ex-ls-landmark-go i { font-size: 12px; }
/* Since screen 31 a link to 31c (F10): it keeps the pill's teal. */
.vm-ex-ls-landmark-go:hover { color: var(--vex-ground); }
/* The hours door: a whole-row link to screen 18. */
.vm-ex-ls-door {
    width: 100%;
    margin-top: 14px;
    border-top: 1px solid var(--vex-hairline);
    padding: 10px 12px 10px 14px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-ls-door:hover { color: var(--vex-ink); }
.vm-ex-ls-door:active { background: var(--vex-canvas); }
.vm-ex-ls-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-ls-tile i { font-size: 14px; }
.vm-ex-ls-tile--grey { background: var(--vex-grey-2); color: var(--vex-ink-3); }
.vm-ex-ls-tile--grey i { font-size: 13px; }
.vm-ex-ls-door-main { flex: 1; min-width: 0; }
.vm-ex-ls-door-t { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-ls-door-s { display: block; font-size: 12px; color: var(--vex-ink-4); margin-top: 2px; }
.vm-ex-ls-nw { white-space: nowrap; }
.vm-ex-ls-dot { color: var(--vex-sep); }
.vm-ex-ls-chev { font-size: 13px; color: var(--vex-ground); flex-shrink: 0; }
.vm-ex-ls-chev--grey { color: var(--vex-ink-4); }

/* -- 22a: exams and services ------------------------------------------ */
.vm-ex-ls-sec { display: flex; flex-direction: column; gap: 12px; }
.vm-ex-ls-head { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.vm-ex-ls-h {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
.vm-ex-ls-h:focus { outline: none; }
.vm-ex-ls-headsub { font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
/* The one solid pill (R-AA: the frame's #16a085 fill is built teal). */
.vm-ex-ls-add {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    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-ex-ls-add i { font-size: 13px; }
.vm-ex-ls-groups { display: contents; }
.vm-ex-ls-group { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.vm-ex-ls-ghead { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.vm-ex-ls-gtitle { font-size: 13.5px; font-weight: 700; color: var(--vex-ink); }
.vm-ex-ls-gsub { font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ex-ls-list { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
/* A whole-row door, pressed #f8fafc (the frame's style-active). */
.vm-ex-ls-row {
    width: 100%;
    padding: 11px 12px 11px 14px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-ls-row + .vm-ex-ls-row { border-top: 1px solid var(--vex-hairline); }
.vm-ex-ls-row:active { background: var(--vex-canvas); }
.vm-ex-ls-row-main { flex: 1; min-width: 0; }
.vm-ex-ls-row-name {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-ls-row-sub { display: block; font-size: 12px; color: var(--vex-ink-4); margin-top: 2px; }
.vm-ex-ls-price { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; white-space: nowrap; }
.vm-ex-ls-price-num {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    font-variant-numeric: tabular-nums;
}
.vm-ex-ls-price-cur { font-size: 9.5px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-ls-ask { font-size: 12.5px; font-weight: 600; color: var(--vex-ink-3); flex-shrink: 0; white-space: nowrap; }

/* -- 22a: the tab bar (21's, 09a's) ---------------------------------- */
/* Slice N, N6: fixed at the foot, 64px + the phone's inset, cleared by
   the .vm-ex-tabs-clear after it (the shared block at the end of this
   file holds where it sits; this rule holds how it looks). */
.vm-ex-ls-tabs {
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/* The cells fill the bar (slice N, N6: the bar is 64px + the inset with
   its hairline, the pharmacy's 09a bar's own build), so no fixed height. */
.vm-ex-ls-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--vex-ink-4);
    line-height: normal;
}
.vm-ex-ls-tab:hover { color: var(--vex-ink-4); }
.vm-ex-ls-tab i { font-size: 17px; }
.vm-ex-ls-tab span { font-size: 10.5px; }
.vm-ex-ls-tab.is-active,
.vm-ex-ls-tab.is-active:hover { color: var(--vex-ground); box-shadow: inset 0 2px 0 var(--vex-ground); }
.vm-ex-ls-tab.is-active span { font-weight: 700; }

/* -- 22b / 22c: 18's header ------------------------------------------ */
.vm-ex-ls-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, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-ex-ls-toprow { display: flex; align-items: center; }
/* (22b/22c's exit is the hub's one back control, .vm-back.vm-back--band.) */
.vm-ex-ls-title {
    margin-top: 12px;
    font-family: var(--vex-font-display);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-ls-title:focus { outline: none; }
.vm-ex-ls-sname { font-size: 12px; color: var(--vex-on-band); margin-top: 3px; overflow-wrap: anywhere; }

/* -- Fields (22b, 22c, the sheet) ------------------------------------ */
.vm-ex-ls-fblock { display: flex; flex-direction: column; gap: 6px; }
.vm-ex-ls-flabel { font-size: 12px; font-weight: 600; color: var(--vex-ink-2); }
.vm-ex-ls-flabel--pad { padding: 0 2px; }
.vm-ex-ls-input {
    display: block;
    width: 100%;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
    outline: none;
}
.vm-ex-ls-input:focus { border-color: var(--vex-mark); }
.vm-ex-ls-input[aria-invalid="true"] { border-color: var(--vex-ink-2); }
/* What is wrong, said once Publish is pressed (20's idiom): in ink, never
   red, never prescription blue. */
.vm-ex-ls-err { font-size: 12px; font-weight: 600; color: var(--vex-ink-2); line-height: 1.4; padding: 0 2px; }
.vm-ex-ls-fault { font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; padding: 0 2px; }

/* -- 22b: which exam is it -------------------------------------------- */
.vm-ex-ls-pbody {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 14px 22px;
}
.vm-ex-ls-qbox {
    height: 52px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    padding: 0 4px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-ex-ls-qbox:focus-within { border-color: var(--vex-mark); }
.vm-ex-ls-q {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
}
.vm-ex-ls-qclear {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-ls-qclear i { font-size: 14px; }
.vm-ex-ls-pcard-top { padding: 14px 14px 0; }
.vm-ex-ls-which {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
.vm-ex-ls-decides { margin-top: 10px; background: var(--vex-tint); border-radius: 14px; padding: 11px 12px 12px; }
.vm-ex-ls-decides-k { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ex-ls-decides-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.vm-ex-ls-decides-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vm-ex-ls-decides-row i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }
.vm-ex-ls-decides-row span { font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
.vm-ex-ls-slist { margin-top: 12px; }
/* A suggestion: a whole-row door, 64px or more. The exam's own words
   only - never a price, a count or a rank of anyone else. */
.vm-ex-ls-srow,
.vm-ex-ls-none {
    width: 100%;
    border-top: 1px solid var(--vex-hairline);
    padding: 12px 12px 12px 14px;
    display: flex;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-ls-srow { min-height: 64px; align-items: flex-start; }
.vm-ex-ls-none { min-height: 60px; align-items: center; }
.vm-ex-ls-srow:active,
.vm-ex-ls-none:active { background: var(--vex-canvas); }
.vm-ex-ls-srow > .vm-ex-ls-chev { align-self: center; }
.vm-ex-ls-srow-main,
.vm-ex-ls-none-main { flex: 1; min-width: 0; }
.vm-ex-ls-srow-name {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-ls-srow-sub { display: block; font-size: 12.5px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-ex-ls-srow-prep { display: block; font-size: 12px; font-weight: 600; color: var(--vex-ink); margin-top: 3px; }
.vm-ex-ls-srow-have {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--vex-ground);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.vm-ex-ls-none-t { display: block; font-size: 14px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-ls-none-s { display: block; font-size: 12px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-ex-ls-sfail {
    border-top: 1px solid var(--vex-hairline);
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink-2);
}

/* -- 22c: ready to publish ------------------------------------------- */
.vm-ex-ls-ebody {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 14px 22px;
}
.vm-ex-ls-sayswrap { padding: 14px; }
.vm-ex-ls-says { background: var(--vex-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ex-ls-says-k { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ex-ls-says-name {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.25;
    margin-top: 6px;
    overflow-wrap: anywhere;
}
.vm-ex-ls-says-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.vm-ex-ls-says-num {
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    white-space: nowrap;
}
.vm-ex-ls-says-cur { font-size: 12px; font-weight: 600; color: var(--vex-ink-3); }
/* On request: the structure's own answer, quieter than a figure and
   never styled as worse. */
.vm-ex-ls-says-ask {
    font-family: var(--vex-font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--vex-ink-2);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-ls-says-result { font-size: 12px; color: var(--vex-ink-2); margin-top: 4px; overflow-wrap: anywhere; }
.vm-ex-ls-cons { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.vm-ex-ls-cons:empty { display: none; }
.vm-ex-ls-cons-row {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-ex-ls-cons-row > i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; margin-top: 3px; }
.vm-ex-ls-cons-row > span { font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
.vm-ex-ls-fields { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.vm-ex-ls-match { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.vm-ex-ls-match-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.4; }
.vm-ex-ls-match-t strong { color: var(--vex-ink); font-weight: 600; }
.vm-ex-ls-change {
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: normal;
}
/* The package check: a 44px row, the box a mark in ink or teal. */
.vm-ex-ls-pkg {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--vex-ink-2);
    line-height: 1.35;
}
.vm-ex-ls-pkg-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--vex-sep);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-ls-pkg-box i { font-size: 11px; color: #fff; visibility: hidden; }
.vm-ex-ls-pkg[aria-checked="true"] .vm-ex-ls-pkg-box { background: var(--vex-ground); border-color: var(--vex-ground); }
.vm-ex-ls-pkg[aria-checked="true"] .vm-ex-ls-pkg-box i { visibility: visible; }
.vm-ex-ls-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vm-ex-ls-mode {
    height: 44px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}
.vm-ex-ls-mode[aria-pressed="true"] { background: var(--vex-tint); color: var(--vex-ground); font-weight: 700; }
.vm-ex-ls-money {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}
.vm-ex-ls-money:focus-within { border-color: var(--vex-mark); }
.vm-ex-ls-money.is-invalid { border-color: var(--vex-ink-2); }
.vm-ex-ls-money-in {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
}
.vm-ex-ls-money-in::placeholder { font-family: var(--vex-font-body); font-size: 13px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-ls-cur { font-size: 12px; font-weight: 600; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-ls-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.vm-ex-ls-range .vm-ex-ls-money { margin-top: 0; }
.vm-ex-ls-resbox {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
}
.vm-ex-ls-resbox:focus-within { border-color: var(--vex-mark); }
.vm-ex-ls-res-k { color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-ls-res-in {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--vex-ink);
}
.vm-ex-ls-res-in::placeholder { font-weight: 500; color: var(--vex-ink-4); }
/* Remove chosen: the fields dim and say so (aria-disabled), nothing red. */
.vm-ex-ls-fields.is-dim { opacity: .45; }

/* -- 22c: the publish bar -------------------------------------------- */
.vm-ex-ls-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
}
.vm-ex-ls-bar-in {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vm-ex-ls-publish {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    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-ex-ls-publish i { font-size: 13px; flex-shrink: 0; }
/* Inert until the draft holds: dimmed, still focusable, and a press says
   what is missing (20's commit idiom). */
.vm-ex-ls-publish[aria-disabled="true"] { opacity: .55; box-shadow: none; cursor: default; }
.vm-ex-ls-publish[aria-busy="true"] { cursor: progress; }
.vm-ex-ls-fault { text-align: center; }
.vm-ex-ls-remove {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

/* -- The landmark sheet (18c's chrome) -------------------------------- */
/* §8's sheet scrolls down (overflow-y:auto), which would compute its x
   axis to auto as well: this one never scrolls sideways. */
.vm-ex-ls-sheet {
    overflow-x: hidden;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
}
.vm-ex-ls-sheet .vm-sheet-grab { flex-shrink: 0; }
.vm-ex-ls-sheet-head { padding: 0 2px; }
.vm-ex-ls-sheet-title {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-ex-ls-sheet-sub { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 3px; text-wrap: pretty; }
.vm-ex-ls-sheet-acts { display: flex; flex-direction: column; gap: 4px; }
.vm-ex-ls-commit {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ex-ls-commit[aria-busy="true"] { cursor: progress; }
.vm-ex-ls-cancel { width: 100%; height: 44px; background: transparent; color: var(--vex-ink-3); font-size: 14px; font-weight: 700; }

/* Keyboard focus is always visible on this screen's controls. */
.vm-ex-ls-app a:focus-visible,
.vm-ex-ls-app button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }

/* ----------------------------------------------------------------
   14. SCREEN 21 — WHO IS COMING (exams/desk.html)
   Handoff: the owner's drop "Screen 21 - Who is coming"
   (docs/design/pharmacy/screens/21/, frames regenerated 2026-09-24; the
   FRAME wins over the README where they disagree) and the director's
   brief (A1-A4, C1-C14). 21a this morning · 21b one visit found · a
   coming day · a row's own card.

   Six rules this section holds:
     - 21a IS A TAB: 09a's band material (the light top-left), no back
       control, the three-tab bar. A coming day and a row's card are
       PUSHED: 18's glass exit sits above the identity row; the band, the
       pill and the tab bar stay.
     - THE LIST IS A SUBSET OF THE MORNING, so nothing on a row is a
       state: every tile is the same tint (identity, never a state), no
       tick, no badge, no colour for "told a wider window" — ink only.
     - SHADOW = THE ONE THING TO ACT ON: the visit card is the only lifted
       thing on this side; the day's rows and the coming days are
       BORDERED (settled rows), 12's rule.
     - WHITE TEXT NEVER SITS ON #16a085: the card's "Call <name>" pill is
       --vex-ground #0f6d5c (R-AA; the frame draws it #16a085). #16a085
       stays a mark: the lookup's caret.
     - Every control is 44px or more; every figure, clock and reference
       is tabular; a name never breaks inside itself (the page writes the
       non-breaking space).
     - The frame declares `body{line-height:1.5}` and its buttons keep the
       UA's `line-height: normal`, so the screen's root declares 1.5 and
       every whole-row button and pill declares `normal` (22's line-box
       rule).
   ---------------------------------------------------------------- */
.vm-ex-dk-app { line-height: 1.5; }

/* -- The band (21a, 21b: the same band) ------------------------------ */
/* Screen 36b's aesthetic pass (approved 2026-09-29; the frame wins): the
   band breathes 16px between its rows and 18px at its foot, and the state
   sentence is the 22px headline 09 carries. */
.vm-ex-dk-band {
    flex-shrink: 0;
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: radial-gradient(118% 88% at 10% 0%, rgba(143, 240, 139, .15) 0%, rgba(15, 109, 92, 0) 56%),
                linear-gradient(180deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    box-shadow: var(--vex-band-inset);
}
/* A pushed view's exit: the hub's one back control in white
   (.vm-back.vm-back--band, slice N), labelled with where it goes. */
.vm-ex-dk-toprow { display: flex; align-items: center; }
.vm-ex-dk-id { position: relative; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
/* Screen 31 (F12b): "Your structure", a white text door at the identity
   row's right (24's text exit, forward). Out of the flow: the name and the
   day line keep their boxes and make room for it with their own padding. */
.vm-ex-dk-id.has-door .vm-ex-dk-name,
.vm-ex-dk-id.has-door .vm-ex-dk-day { padding-right: 108px; }
.vm-ex-dk-ys {
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: 4px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}
.vm-ex-dk-ys:hover { color: #fff; }
.vm-ex-dk-ys i { font-size: 11px; }
.vm-ex-dk-name {
    font-family: var(--vex-font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-ex-dk-day { font-size: 11.5px; color: var(--vex-on-band); margin-top: 2px; }
.vm-ex-dk-stateblock { display: flex; flex-direction: column; gap: 5px; }
.vm-ex-dk-state {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.2;
    text-wrap: pretty;
}
.vm-ex-dk-state2 { font-size: 12.5px; color: var(--vex-on-band); line-height: 1.45; }
.vm-ex-dk-state2 strong { font-weight: 600; color: #fff; }

/* The lookup pill (10a's): no go button. While it holds something the
   44px clear round sits at its right edge and the right padding drops to
   4px (10b's) — the gap stays 10px, so the text never moves. */
.vm-ex-dk-pill {
    background: #fff;
    border-radius: 999px;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(3, 32, 26, .26);
}
.vm-ex-dk-pill.has-value { padding-right: 4px; }
.vm-ex-dk-pill-g { font-size: 14px; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-dk-q {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: .06em;
    caret-color: var(--vex-mark);
}
.vm-ex-dk-q::placeholder { font-weight: 400; color: var(--vex-ink-4); letter-spacing: normal; opacity: 1; }
.vm-ex-dk-qclear {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: normal;
}
.vm-ex-dk-qclear i { font-size: 14px; }

/* -- The body --------------------------------------------------------- */
/* 36b's aesthetic pass: the body opens 20px under the band and ends 24px
   from the foot. */
.vm-ex-dk-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 14px 24px;
}
.vm-ex-dk-body > .vm-loading { padding: 4px 2px; }
.vm-ex-dk-retry,
.vm-ex-dk-noowner-doors a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.vm-ex-dk-retry { align-self: flex-start; padding: 0 2px; color: var(--vex-ground); font-size: 13px; }

/* The honest state for an account that runs no structure (18's, 22's). */
.vm-ex-dk-noowner {
    padding: 22px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.vm-ex-dk-noowner > i { font-size: 30px; color: var(--vex-sep); }
.vm-ex-dk-noowner-t {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1.3;
    text-wrap: balance;
}
.vm-ex-dk-noowner-b { font-size: 13.5px; color: var(--vex-ink-3); max-width: 300px; text-wrap: pretty; }
.vm-ex-dk-noowner-doors { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 6px; }
.vm-ex-dk-noowner-doors a { height: 48px; border-radius: 13px; font-size: 14.5px; }
.vm-ex-dk-noowner-doors a:first-child { background: var(--vex-ground); color: #fff; }
.vm-ex-dk-noowner-doors a + a { border: 1px solid var(--vex-sep); color: var(--vex-ink); }

/* -- 21a: the day's list and the coming days ------------------------- */
.vm-ex-dk-sec { display: flex; flex-direction: column; gap: 10px; }
.vm-ex-dk-head { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.vm-ex-dk-h {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
.vm-ex-dk-h--pad { padding: 0 2px; }
.vm-ex-dk-h:focus { outline: none; }
.vm-ex-dk-headsub { font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-ex-dk-rows { display: contents; }
.vm-ex-dk-list { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
/* C8: a slot structure's held time over its people. */
.vm-ex-dk-slot { display: flex; flex-direction: column; gap: 8px; }
.vm-ex-dk-slot-h { padding: 0 2px; font-size: 13px; font-weight: 700; color: var(--vex-ink-2); }

/* A whole-row door, pressed #f8fafc (the frame's style-active). */
.vm-ex-dk-row,
.vm-ex-dk-crow {
    width: 100%;
    display: flex;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-dk-row { padding: 12px 12px 12px 14px; min-height: 44px; align-items: flex-start; }
.vm-ex-dk-crow { padding: 10px 12px 10px 14px; min-height: 56px; align-items: center; }
.vm-ex-dk-row + .vm-ex-dk-row,
.vm-ex-dk-crow + .vm-ex-dk-crow { border-top: 1px solid var(--vex-hairline); }
.vm-ex-dk-row:active,
.vm-ex-dk-crow:active { background: var(--vex-canvas); }
/* The leading 38px tile: the contact's initials, or a coming day's date.
   One tint for every row: identity, never a state. */
.vm-ex-dk-tile,
.vm-ex-dk-dtile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-dk-tile {
    font-family: var(--vex-font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .02em;
}
.vm-ex-dk-dtile { flex-direction: column; line-height: 1; }
.vm-ex-dk-dtile-w { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vm-ex-dk-dtile-d { font-family: var(--vex-font-display); font-size: 15px; font-weight: 700; margin-top: 2px; }
.vm-ex-dk-main,
.vm-ex-dk-cmain { flex: 1; min-width: 0; }
.vm-ex-dk-rname {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-dk-exams { display: block; font-size: 13px; color: var(--vex-ink-2); line-height: 1.4; margin-top: 3px; }
.vm-ex-dk-dot { color: var(--vex-sep); }
/* Meta: one item per line, no separators (a wrapped dot was left
   dangling once the tile narrowed the column). */
.vm-ex-dk-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--vex-ink-4);
    line-height: 1.4;
    margin-top: 4px;
}
.vm-ex-dk-meta > span { display: block; }
.vm-ex-dk-ref { font-weight: 600; color: var(--vex-ink-2); letter-spacing: .06em; }
/* What a wider row was told: ink, never a colour. */
.vm-ex-dk-told { font-weight: 600; color: var(--vex-ink); }
.vm-ex-dk-for { overflow-wrap: anywhere; }
/* The money column, right: 64px (narrowed from 17's 76 for the tile and
   the chevron). */
.vm-ex-dk-money {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 3px;
    min-width: 64px;
    flex-shrink: 0;
    padding-top: 1px;
    white-space: nowrap;
}
.vm-ex-dk-money-num {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
}
.vm-ex-dk-money-cur { font-size: 9.5px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-dk-from { font-size: 11px; font-weight: 600; color: var(--vex-ink-3); }
/* On request: the structure's own answer, quieter than a figure and never
   styled as worse. */
.vm-ex-dk-ask { font-size: 12px; color: var(--vex-ink-3); }
.vm-ex-dk-chev { font-size: 13px; color: var(--vex-ground); flex-shrink: 0; align-self: center; }
.vm-ex-dk-ct { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-dk-cs { display: block; font-size: 12px; color: var(--vex-ink-4); margin-top: 2px; line-height: 1.4; }
.vm-ex-dk-cs-told { font-weight: 600; color: var(--vex-ink); }

/* -- 21b: what the lookup found, and a row's own card ---------------- */
.vm-ex-dk-found { display: flex; flex-direction: column; gap: 10px; }
.vm-ex-dk-count { font-size: 12px; color: var(--vex-ink-3); padding: 0 2px; }
/* Nothing found: the sentence is the whole answer, so it reads as one. */
.vm-ex-dk-found.is-none .vm-ex-dk-count { font-size: 13.5px; color: var(--vex-ink-2); line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere; }
.vm-ex-dk-cards { display: contents; }
.vm-ex-dk-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}
.vm-ex-dk-chead { padding: 14px 14px 12px; display: flex; align-items: center; gap: 12px; }
.vm-ex-dk-ctile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}
.vm-ex-dk-cwho { flex: 1; min-width: 0; }
.vm-ex-dk-cname {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-ex-dk-cname:focus { outline: none; }
.vm-ex-dk-cphone { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 2px; white-space: nowrap; }
.vm-ex-dk-cfor { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.vm-ex-dk-cref {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: .09em;
    flex-shrink: 0;
    white-space: nowrap;
}
/* The told window is the headline: 14a's size for the same figure. */
.vm-ex-dk-toldwrap { padding: 0 14px; }
.vm-ex-dk-toldblock { background: var(--vex-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ex-dk-told-k { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ex-dk-told-w {
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -1px;
    line-height: 1.1;
    margin-top: 4px;
    white-space: nowrap;
}
/* The white inner row: where the desk stops now (only when the row holds
   a wider window), or that the visit was given up. */
.vm-ex-dk-told-row {
    margin-top: 11px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vm-ex-dk-told-row i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }
.vm-ex-dk-told-row span { font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
/* Exams and money: each typed name and the figure it was told. */
.vm-ex-dk-items { padding: 14px 14px 4px; }
.vm-ex-dk-item { display: flex; align-items: baseline; gap: 12px; }
.vm-ex-dk-item + .vm-ex-dk-item { margin-top: 8px; }
.vm-ex-dk-item-n {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.vm-ex-dk-fig { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; white-space: nowrap; }
.vm-ex-dk-fig-num {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
.vm-ex-dk-fig-cur { font-size: 10.5px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-dk-fig-ask { font-size: 13px; font-weight: 600; color: var(--vex-ink-3); flex-shrink: 0; white-space: nowrap; }
.vm-ex-dk-pay { font-size: 12px; color: var(--vex-ink-3); margin-top: 3px; line-height: 1.45; }
/* Several exams: a hairline, then what they were told to pay. */
.vm-ex-dk-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--vex-hairline);
}
.vm-ex-dk-total .vm-ex-dk-pay { margin-top: 0; }
/* The act: two real buttons that open the phone's own apps. */
.vm-ex-dk-act { padding: 14px; display: flex; gap: 8px; }
.vm-ex-dk-call,
.vm-ex-dk-wa {
    flex: 1;
    min-width: 0;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
}
.vm-ex-dk-call {
    background: var(--vex-ground);
    color: #fff;
    box-shadow: 0 6px 16px rgba(22, 160, 133, .26);
}
.vm-ex-dk-call:hover { color: #fff; }
.vm-ex-dk-call i { font-size: 13px; }
.vm-ex-dk-wa { background: var(--vex-tint); color: var(--vex-ground); }
.vm-ex-dk-wa:hover { color: var(--vex-ground); }
.vm-ex-dk-wa i { font-size: 16px; }

/* -- Screen 28's two touches (28e) ------------------------------------ */
/* A row once its result is sent: one quiet line in the meta column,
   "Result sent · 15:42" — #475569, no badge, no count, no colour. */
.vm-ex-dk-meta > .vm-ex-dk-sent { color: var(--vex-ink-3); }
.vm-ex-dk-nowrap { white-space: nowrap; }
/* The card's door "Send the result", under Call | WhatsApp, once the
   visit's day has come: a whole-row door with a teal tile and chevron.
   A coming day shows no door at all. */
.vm-ex-dk-door {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    border-top: 1px solid var(--vex-hairline);
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-dk-door:hover { color: var(--vex-ink); }
.vm-ex-dk-door:active { background: var(--vex-canvas); }
.vm-ex-dk-door-g {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-dk-door-g i { font-size: 14px; }
.vm-ex-dk-door-t { flex: 1; min-width: 0; }
.vm-ex-dk-door-h { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-dk-door-s { display: block; font-size: 12px; color: var(--vex-ink-4); margin-top: 2px; }
/* Inside the card's clip, the door draws its focus ring inside itself. */
.vm-ex-dk-app .vm-ex-dk-door:focus-visible { outline-offset: -2px; }

/* -- The tab bar (09a's; 22's twin) ------------------------------------ */
/* Slice N, N6: fixed at the foot, 64px + the phone's inset, cleared by
   the .vm-ex-tabs-clear after it (the shared block at the end of this
   file holds where it sits; this rule holds how it looks). */
.vm-ex-dk-tabs {
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/* The cells fill the bar (slice N, N6: the bar is 64px + the inset with
   its hairline, the pharmacy's 09a bar's own build), so no fixed height. */
.vm-ex-dk-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--vex-ink-4);
    line-height: normal;
}
.vm-ex-dk-tab:hover { color: var(--vex-ink-4); }
.vm-ex-dk-tab i { font-size: 17px; }
.vm-ex-dk-tab span { font-size: 10.5px; }
.vm-ex-dk-tab.is-active,
.vm-ex-dk-tab.is-active:hover { color: var(--vex-ground); box-shadow: inset 0 2px 0 var(--vex-ground); }
.vm-ex-dk-tab.is-active span { font-weight: 700; }

/* Keyboard focus is always visible on this screen's controls. */
.vm-ex-dk-app a:focus-visible,
.vm-ex-dk-app button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }

/* ----------------------------------------------------------------
   15. SCREEN 23 — LIST YOUR STRUCTURE (exams/list-your-structure.html)
   Handoff: the owner's drop "Screen 23 - List your structure"
   (docs/design/pharmacy/screens/23/, frames regenerated 2026-09-24; the
   FRAME wins over the README where they disagree) and the director's
   brief (A1, C1-C13). 23a the form · the already-listed state · 23b
   listed.

   Six rules this section holds:
     - SUPPLY-SIDE MATERIAL: the dark teal band (23a: 18's header with its
       glass exit; 23b: 21's band), white fields with a 1.5px #cbd5e1
       edge, no bottom nav and no basket on the form. 23b and the
       already-listed state carry the three-tab bar.
     - SHADOW = WORK YOU CAN DO: the headline card, the field cards, the
       commit bar and 23b's "What your page needs" card are lifted; the
       pills are flat fills.
     - WHITE TEXT NEVER SITS ON #16a085: the commit and 23b's "Add an exam
       or service" are --vex-ground #0f6d5c (R-AA; the frame draws both
       #16a085). #16a085 stays a mark: a focused field's edge.
     - WHAT IS WRONG IS SAID IN INK (18/22's idiom): the line under a
       control and the control's edge are #334155, never red, never
       prescription blue. Nothing preselected looks chosen.
     - Every control is 44px or more; the desk's number and the licence
       are tabular.
     - The frame declares `body{line-height:1.5}` and its buttons keep the
       UA's `line-height: normal`, so the screen's root declares 1.5 and
       every pill and whole-row button declares its own (22's line-box
       rule).
   ---------------------------------------------------------------- */
.vm-ex-ly-app { line-height: 1.5; }
.vm-ex-ly-view { flex: 1 0 auto; display: flex; flex-direction: column; }

/* -- 23a: 18's header ------------------------------------------------ */
.vm-ex-ly-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, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-ex-ly-toprow { display: flex; align-items: center; }
/* (23a's exit is the hub's one back control, .vm-back.vm-back--band.) */
.vm-ex-ly-title {
    margin-top: 12px;
    font-family: var(--vex-font-display);
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-ly-who { font-size: 12px; color: var(--vex-on-band); margin-top: 3px; overflow-wrap: anywhere; }

/* -- 23a: the body ----------------------------------------------------- */
.vm-ex-ly-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 14px 22px;
}
.vm-ex-ly-body > .vm-loading { padding: 4px 2px; }
.vm-ex-ly-retry,
.vm-ex-ly-already-doors a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.vm-ex-ly-retry { align-self: flex-start; padding: 0 2px; color: var(--vex-ground); font-size: 13px; }
.vm-ex-ly-form { display: flex; flex-direction: column; gap: 22px; }

/* The already-listed state (18's honest-state layout): one sentence,
   one line why, one door. Not an error, so nothing is tinted. */
.vm-ex-ly-already {
    padding: 22px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.vm-ex-ly-already > i { font-size: 30px; color: var(--vex-sep); }
.vm-ex-ly-already-t {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1.3;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.vm-ex-ly-already-t:focus { outline: none; }
.vm-ex-ly-already-b { font-size: 13.5px; color: var(--vex-ink-3); max-width: 300px; text-wrap: pretty; }
.vm-ex-ly-already-doors { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 300px; margin-top: 6px; }
.vm-ex-ly-already-doors a { height: 48px; border-radius: 13px; font-size: 14.5px; background: var(--vex-ground); color: #fff; }
.vm-ex-ly-already-doors a:hover { color: #fff; }

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

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

/* -- 23a: the fields --------------------------------------------------- */
.vm-ex-ly-input,
.vm-ex-ly-textarea {
    display: block;
    width: 100%;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    font-weight: 600;
    color: var(--vex-ink);
    outline: none;
    margin: 0;
}
.vm-ex-ly-input { height: 48px; padding: 0 14px; font-size: 15px; }
.vm-ex-ly-input--addr { padding: 0 12px; font-size: 14.5px; }
.vm-ex-ly-input--phone { letter-spacing: .02em; }
.vm-ex-ly-input--licence { letter-spacing: .04em; }
/* The landmark grows with what she writes (the frame's two-line box);
   the page's script sizes it where field-sizing is unknown. */
.vm-ex-ly-textarea {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    field-sizing: content;
}
.vm-ex-ly-input:focus,
.vm-ex-ly-textarea:focus { border-color: var(--vex-mark); }
.vm-ex-ly-input[aria-invalid="true"],
.vm-ex-ly-textarea[aria-invalid="true"] { border-color: var(--vex-ink-2); }
.vm-ex-ly-addr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
/* The city (screen 31's F9): 31c's 48px select field, the chevron drawn
   over the native control's own (appearance none), never a sheet. */
.vm-ex-ly-selectbox { position: relative; }
.vm-ex-ly-select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 40px 0 14px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
    outline: none;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.vm-ex-ly-select:focus { border-color: var(--vex-mark); }
.vm-ex-ly-select[aria-invalid="true"] { border-color: var(--vex-ink-2); }
.vm-ex-ly-selectbox > i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--vex-ink-4);
    pointer-events: none;
}

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

/* -- 23a: the pills ---------------------------------------------------- */
.vm-ex-ly-pills { display: grid; gap: 6px; }
.vm-ex-ly-pills--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-ex-ly-pills--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-ex-ly-pill {
    height: 44px;
    padding: 0 6px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}
.vm-ex-ly-pill[aria-checked="true"],
.vm-ex-ly-pill[aria-pressed="true"] { background: var(--vex-tint); color: var(--vex-ground); font-weight: 700; }
/* A required group left empty on a press: its pills take the ink edge. */
.vm-ex-ly-pills[aria-invalid="true"] .vm-ex-ly-pill { box-shadow: inset 0 0 0 1.5px var(--vex-ink-2); }
.vm-ex-ly-pill--wrap { height: auto; min-height: 44px; padding: 6px 10px; line-height: 1.3; }
.vm-ex-ly-pill--pay {
    height: auto;
    min-height: 44px;
    padding: 4px 6px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.vm-ex-ly-pill--pay i { font-size: 11px; display: none; }
.vm-ex-ly-pill--pay[aria-pressed="true"] i { display: inline-block; }

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

/* -- 23a: the commit bar ----------------------------------------------- */
.vm-ex-ly-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
}
.vm-ex-ly-bar-cap { padding: 10px 14px 0; font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ex-ly-fault { padding: 8px 14px 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }
.vm-ex-ly-bar-in { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.vm-ex-ly-commit {
    width: 100%;
    min-height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    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-ex-ly-commit i { font-size: 13px; flex-shrink: 0; }
.vm-ex-ly-commit:disabled { opacity: .7; cursor: progress; }

/* -- 23b: the band (21's material) ------------------------------------- */
.vm-ex-ly-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, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    box-shadow: var(--vex-band-inset);
}
.vm-ex-ly-id { min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.vm-ex-ly-name {
    font-family: var(--vex-font-display);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.2px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-ex-ly-kind { font-size: 11.5px; color: var(--vex-on-band); margin-top: 2px; }
.vm-ex-ly-stateblock { display: flex; flex-direction: column; gap: 5px; }
.vm-ex-ly-state {
    font-family: var(--vex-font-display);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.45px;
    line-height: 1.22;
    text-wrap: pretty;
}
.vm-ex-ly-state:focus { outline: none; }
.vm-ex-ly-state2 { font-size: 12.5px; color: var(--vex-on-band); line-height: 1.45; }
.vm-ex-ly-state2 strong { font-weight: 600; color: #fff; }

/* -- 23b: what your page needs ----------------------------------------- */
.vm-ex-ly-lbody {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 14px 22px;
}
.vm-ex-ly-needs { background: #fff; border-radius: 18px; box-shadow: var(--vex-card-shadow); overflow: hidden; }
.vm-ex-ly-needs-head { padding: 14px 14px 4px; }
.vm-ex-ly-needs-h {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
}
.vm-ex-ly-needs-sub { font-size: 12px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.45; }
.vm-ex-ly-needs-list { margin-top: 10px; }
/* A door: a whole-row link, pressed #f8fafc (the frame's style-active). */
.vm-ex-ly-door {
    width: 100%;
    border-top: 1px solid var(--vex-hairline);
    padding: 10px 12px 10px 14px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-ly-door:hover { color: var(--vex-ink); }
.vm-ex-ly-door:active { background: var(--vex-canvas); }
.vm-ex-ly-door-main { flex: 1; min-width: 0; }
.vm-ex-ly-door-t { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-ly-door-s { display: block; font-size: 12px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-ex-ly-door-s strong { font-weight: 600; color: var(--vex-ink); }
/* The one solid pill (R-AA: the frame's #16a085 fill is built teal). */
.vm-ex-ly-add {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    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-ex-ly-add:hover { color: #fff; }
.vm-ex-ly-add i { font-size: 13px; }
/* Screen 30's quiet door: a text link under the pill, 44px to tap. */
.vm-ex-ly-seelist {
    align-self: center;
    min-height: 44px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}
.vm-ex-ly-seelist:hover { color: var(--vex-ground); }
.vm-ex-ly-seelist i { font-size: 12px; }

/* -- The tab bar (21's, 09a's) ----------------------------------------- */
/* Slice N, N6: fixed at the foot, 64px + the phone's inset, cleared by
   the .vm-ex-tabs-clear after it (the shared block at the end of this
   file holds where it sits; this rule holds how it looks). */
.vm-ex-ly-tabs {
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
/* The cells fill the bar (slice N, N6: the bar is 64px + the inset with
   its hairline, the pharmacy's 09a bar's own build), so no fixed height. */
.vm-ex-ly-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--vex-ink-4);
    line-height: normal;
}
.vm-ex-ly-tab:hover { color: var(--vex-ink-4); }
.vm-ex-ly-tab i { font-size: 17px; }
.vm-ex-ly-tab span { font-size: 10.5px; }
.vm-ex-ly-tab.is-active,
.vm-ex-ly-tab.is-active:hover { color: var(--vex-ground); box-shadow: inset 0 2px 0 var(--vex-ground); }
.vm-ex-ly-tab.is-active span { font-weight: 700; }

/* Keyboard focus is always visible on this screen's controls. */
.vm-ex-ly-app a:focus-visible,
.vm-ex-ly-app button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }

/* ----------------------------------------------------------------
   16. SCREEN 24 — MY RESULTS (exams/results.html)
   Handoff: docs/design/pharmacy/screens/24/ (README.md + frame.html),
   the director's screen-24 brief (R0-R19, 2026-09-27). 24a the list,
   24b one result opened, 24c the add-a-photo sheet.

   Rules this section holds:
     - 15a's bar material, a 26px title and a 12.5px #e2e8f0 sub-line.
     - #e3f4f0 blocks with white inset rows, 999 pills, Space Grotesk
       titles, 44/48/52px controls as the frame states them.
     - WHITE TEXT NEVER SITS ON #16a085 (PHARMACY_HUB §7.16 R-AA): the
       frame's three solid pills ("Open the result", "Send it to a
       doctor", "Take a photo of the paper") are --vex-ground #0f6d5c,
       carrying the frame's #16a085 shadow. The "fill" pills are the tint.
     - The source label is the same ink for both sources: no badge, no
       warning colour. Remove is bordered and quiet, never red.
     - Nothing here may look like the prescription camera (07a): no
       viewfinder, no corner marks, no blue.
   ---------------------------------------------------------------- */

/* A screen reader's copy of what a date tile draws for the eye. */
.vm-ex-res-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.vm-ex-res-nowrap { white-space: nowrap; }
.vm-ex-res-sep { color: var(--vex-sep); }

/* -- The bar (15a's material) ----------------------------------- */
.vm-ex-res-bar {
    position: relative;
    flex-shrink: 0;
    padding: 10px 14px 20px;
    color: #fff;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
                linear-gradient(160deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
/* (24's exit is the hub's one back control, .vm-back.vm-back--band.) */
.vm-ex-res-title {
    margin-top: 8px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.vm-ex-res-title:focus { outline: none; }
.vm-ex-res-also { margin-top: 4px; font-size: 12.5px; color: var(--vex-on-band); line-height: 1.5; overflow-wrap: anywhere; }
.vm-ex-res-sub { margin-top: 6px; font-size: 12.5px; color: var(--vex-on-band); line-height: 1.5; overflow-wrap: anywhere; }
/* The dot between the structure and the day, on the band (the frame's). */
.vm-ex-res-bsep { color: rgba(255, 255, 255, .5); }

/* -- The body ----------------------------------------------------- */
.vm-ex-res-body { padding: 18px 14px 24px; display: flex; flex-direction: column; gap: 22px; line-height: 1.5; }
.vm-ex-res-body.is-one { padding-top: 16px; gap: 16px; }
.vm-ex-res-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vm-ex-res-h { font-size: 12px; font-weight: 700; color: var(--vex-ink-3); padding: 0 2px; line-height: 1.5; }

/* While reading: a quiet skeleton, no words. */
.vm-ex-res-skel { display: flex; flex-direction: column; gap: 9px; }
.vm-ex-res-skel-h { width: 72px; height: 12px; border-radius: 6px; background: var(--vex-grey); }
.vm-ex-res-skel-card { height: 236px; border-radius: 18px; background: var(--vex-grey-2); }
.vm-ex-res-skel-card--short { height: 112px; }

/* -- Date tiles: 44px (a card, the sheet) and 38px (a row), tinted - */
.vm-ex-res-tile,
.vm-ex-res-date {
    background: var(--vex-tint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-res-tile { width: 44px; height: 44px; border-radius: 13px; }
.vm-ex-res-date { width: 38px; height: 38px; border-radius: 12px; }
.vm-ex-res-tile-wk,
.vm-ex-res-date-wk {
    display: block;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vex-ground);
    line-height: 1;
}
.vm-ex-res-tile-wk { font-size: 10px; }
.vm-ex-res-date-wk { font-size: 9px; }
.vm-ex-res-tile-d,
.vm-ex-res-date-d {
    display: block;
    font-family: var(--vex-font-display);
    font-weight: 700;
    color: var(--vex-ink);
    line-height: 1;
}
.vm-ex-res-tile-d { font-size: 17px; margin-top: 3px; }
.vm-ex-res-date-d { font-size: 15px; margin-top: 2px; }

/* -- 24a Newest: one lifted card ------------------------------------ */
.vm-ex-res-card { background: #fff; border-radius: 18px; box-shadow: var(--vex-card-shadow); overflow: hidden; }
/* The top row: the door to the structure (12a). */
.vm-ex-res-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 13px 0;
    color: inherit;
    text-align: left;
}
.vm-ex-res-top:hover { color: inherit; }
.vm-ex-res-top-id { display: block; flex: 1; min-width: 0; }
.vm-ex-res-top-name {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-res-top-area { display: block; font-size: 11.5px; color: var(--vex-ink-4); margin-top: 3px; overflow-wrap: anywhere; }
.vm-ex-res-chev { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }

/* The #e3f4f0 block: the label, the exam's French name at 26px, the
   English name, and one white inner row. */
.vm-ex-res-block { margin: 13px; background: var(--vex-tint); border-radius: 14px; padding: 13px 12px 12px; }
.vm-ex-res-block--flat { margin: 0; padding: 12px; }
.vm-ex-res-label { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); line-height: 1.5; overflow-wrap: anywhere; }
.vm-ex-res-fr {
    margin-top: 5px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.vm-ex-res-en { margin-top: 3px; font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.vm-ex-res-alsoin { margin-top: 3px; font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.vm-ex-res-inner { display: block; margin-top: 12px; background: #fff; border-radius: 10px; overflow: hidden; }
.vm-ex-res-block--flat .vm-ex-res-inner { margin-top: 9px; }
.vm-ex-res-in-row { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; }
.vm-ex-res-in-row + .vm-ex-res-in-row { border-top: 1px solid var(--vex-hairline); }
.vm-ex-res-in-g { width: 14px; flex-shrink: 0; margin-top: 3px; text-align: center; color: var(--vex-ground); font-size: 12px; }
.vm-ex-res-in-t { display: block; flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }
.vm-ex-res-cta { padding: 0 13px 13px; }

/* -- The pills ------------------------------------------------------ */
/* Solid: the ground under white (R-AA), the frame's #16a085 shadow. */
.vm-ex-res-solid {
    width: 100%;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ex-res-solid:hover { color: #fff; }
.vm-ex-res-solid--48 { height: 48px; font-size: 14.5px; }
.vm-ex-res-solid--52 { height: 52px; font-size: 15px; }
.vm-ex-res-solid i { font-size: 14px; }
.vm-ex-res-solid:disabled,
.vm-ex-res-solid[aria-busy="true"] { cursor: progress; opacity: .8; }
/* Fill: the tint under the ground. */
.vm-ex-res-fill {
    width: 100%;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    text-align: center;
}
.vm-ex-res-fill:hover { color: var(--vex-ground); }
.vm-ex-res-fill--44 { height: 44px; font-size: 13.5px; }
.vm-ex-res-fill--48 { height: 48px; font-size: 14px; }
.vm-ex-res-fill i { font-size: 12px; }
.vm-ex-res-fill:disabled { cursor: progress; opacity: .7; }

/* -- 24a Not sent yet and Earlier: bordered containers -------------- */
.vm-ex-res-box { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ex-res-nv + .vm-ex-res-nv,
.vm-ex-res-erow + .vm-ex-res-erow { border-top: 1px solid var(--vex-hairline); }
.vm-ex-res-nv:focus { outline: none; }
.vm-ex-res-nrow { padding: 12px 13px; display: flex; align-items: center; gap: 12px; }
.vm-ex-res-rid { display: block; flex: 1; min-width: 0; }
.vm-ex-res-rname { display: block; font-size: 13.5px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vm-ex-res-rexam { display: block; font-size: 11.5px; color: var(--vex-ink-4); margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.vm-ex-res-rlabel { display: block; font-size: 11.5px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }
/* The inset: the sentence and the door to 24c. */
.vm-ex-res-inset { margin: 0 13px 13px; background: var(--vex-canvas); border-radius: 14px; padding: 12px; }
.vm-ex-res-inset-t { font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.5; text-wrap: pretty; }
.vm-ex-res-inset .vm-ex-res-fill { margin-top: 10px; }
/* An Earlier row: the whole row is the door to 24b. */
.vm-ex-res-erow {
    width: 100%;
    min-height: 64px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-align: left;
}
.vm-ex-res-erow:hover { color: inherit; }

/* -- 24b: the paper ---------------------------------------------------- */
.vm-ex-res-one { display: flex; flex-direction: column; gap: 16px; }
.vm-ex-res-paperwrap { display: flex; flex-direction: column; gap: 6px; }
.vm-ex-res-paper {
    position: relative;
    aspect-ratio: 210 / 297;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, var(--vex-canvas) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 24, 40, .05), 0 8px 22px rgba(16, 24, 40, .08);
    border: 1px solid var(--vex-grey);
    overflow: hidden;
}
.vm-ex-res-imglink { position: absolute; inset: 0; display: block; }
.vm-ex-res-img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.vm-ex-res-pdf { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The frame's own face: before the page, where a PDF cannot be drawn, or
   when a page did not open. */
.vm-ex-res-ph {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
}
.vm-ex-res-ph-g {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.vm-ex-res-ph-t { font-size: 13px; font-weight: 600; color: var(--vex-ink-2); line-height: 1.45; }
.vm-ex-res-ph .vm-ex-res-statedoor { align-self: center; }
/* Under the paper: "Page n of N · pinch to zoom", flanked by 44px rounds
   when there are several pages. */
.vm-ex-res-pager { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 22px; }
.vm-ex-res-pageof { font-size: 12px; color: var(--vex-ink-4); line-height: 1.45; text-align: center; }
.vm-ex-res-pgbtn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vex-grey);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.vm-ex-res-pgbtn:disabled { color: var(--vex-sep); cursor: default; }
.vm-ex-res-openrep {
    align-self: center;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-ex-res-openrep:hover { color: var(--vex-ground); }

/* -- 24b: send and remove --------------------------------------------- */
.vm-ex-res-sendwrap,
.vm-ex-res-removewrap { display: flex; flex-direction: column; gap: 8px; }
.vm-ex-res-removewrap { gap: 6px; padding-top: 4px; }
.vm-ex-res-send-l,
.vm-ex-res-remove-l { font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-align: center; text-wrap: pretty; }
.vm-ex-res-send-l { padding: 0 10px; }
/* Quiet, never red: bordered, 44px, the ink. */
.vm-ex-res-remove {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vex-grey);
    color: var(--vex-ink-2);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-ex-res-remove:disabled { cursor: progress; opacity: .8; }
/* A fault or a note, said in the vertical's ink — never red. */
.vm-ex-res-fault { font-size: 12px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; text-align: center; }

/* -- The states ------------------------------------------------------- */
/* The empty state's door (and Try again): a 44px fill. */
.vm-ex-res-statedoor {
    align-self: flex-start;
    height: 44px;
    min-width: 44px;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-ex-res-statedoor:hover { color: var(--vex-ground); }

/* -- 24c and Remove: 12's sheet chrome (§8) --------------------------- */
/* §8's sheet scrolls down (overflow-y:auto), which would compute its x
   axis to auto as well: these never scroll sideways. The frame: 22px
   top radius, no shadow over the flat dim, 10/16/18 padding, 14 gaps. */
.vm-ex-res-sheet {
    overflow-x: hidden;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.5;
}
.vm-ex-res-sheet .vm-sheet-grab { flex-shrink: 0; }
.vm-ex-res-sheet-head { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.vm-ex-res-sheet-head--plain { padding: 4px 2px 0; }
.vm-ex-res-sheet-id { flex: 1; min-width: 0; }
.vm-ex-res-sheet-title {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-res-sheet-sub { font-size: 12px; color: var(--vex-ink-4); margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.vm-ex-res-acts { display: flex; flex-direction: column; gap: 8px; }
.vm-ex-res-cancel {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-ex-res-cancel:disabled { cursor: progress; opacity: .6; }
.vm-ex-res-file { display: none; }

/* Keyboard focus is always visible on this screen's controls. */
#vm-exams-results a:focus-visible,
#vm-exams-results button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ex-res-bar a:focus-visible { outline-color: #fff; }

/* ----------------------------------------------------------------
   17. SCREEN 28 — SEND A RESULT (exams/send-result.html)
   Handoff: docs/design/pharmacy/screens/28/ (README.md + frame.html;
   the frame wins on layout, the README's copy is verbatim) and the
   director's screen-28 brief (R0-R18, 2026-09-27). 28a the visit, 28b
   the file chosen, 28c sent, 28d already sent, 28e the states.

   Rules this section holds:
     - 24's band material; 28c keeps the title's place without the exit
       (the title drops 44 + 8 = 52px).
     - 21b's head without the phone; the #e3f4f0 block with white inner
       rows split by #f0f2f4 hairlines (drawn as their own 1px lines, the
       frame's geometry).
     - WHITE TEXT NEVER SITS ON #16a085 (PHARMACY_HUB §7.16 R-AA): the
       frame's solid pills are --vex-ground #0f6d5c, carrying the frame's
       #16a085 shadow. #16a085 stays a mark: the sending bar and 28c's
       flat check tile, which holds a glyph and no text.
     - NOTHING IS RED, including the failures (R18): "Not sent" and a
       file that cannot go are a grey tile and the ink.
     - 28c's check tile is FLAT (no shadow: shadow means actionable).
     - Every control is 44px or more; every size, clock and reference is
       tabular; a file name breaks anywhere rather than scroll.
     - The frame declares `body{line-height:1.5}` and its buttons keep the
       UA's `line-height: normal`, so the screen's root declares 1.5 and
       every whole-row door and pill declares `normal` (22's rule).
   ---------------------------------------------------------------- */
.vm-ex-sr-app { line-height: 1.5; }
.vm-ex-sr-nowrap { white-space: nowrap; }
.vm-ex-sr-anywhere { overflow-wrap: anywhere; }
.vm-ex-sr-dot { color: var(--vex-sep); }
.vm-ex-sr-file { display: none; }

/* -- The band (24's material) ----------------------------------------- */
.vm-ex-sr-bar {
    position: relative;
    flex-shrink: 0;
    padding: 10px 14px 20px;
    color: #fff;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
                linear-gradient(160deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-ex-sr-toprow { height: 44px; display: flex; align-items: center; }
/* (28's exit is the hub's one back control, .vm-back.vm-back--band.) */
.vm-ex-sr-title {
    margin-top: 8px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
}
.vm-ex-sr-title.is-alone { margin-top: 52px; }
.vm-ex-sr-title:focus { outline: none; }
.vm-ex-sr-sub { margin-top: 6px; font-size: 12.5px; color: var(--vex-on-band); line-height: 1.5; overflow-wrap: anywhere; }

/* -- The body ------------------------------------------------------------ */
.vm-ex-sr-body { flex: 1 0 auto; padding: 18px 14px 24px; display: flex; flex-direction: column; gap: 16px; }
.vm-ex-sr-body > .vm-loading { padding: 4px 2px; }
.vm-ex-sr-view { display: flex; flex-direction: column; gap: 16px; }

/* -- The card: 21b's head, the block ------------------------------------ */
.vm-ex-sr-card { background: #fff; border-radius: 18px; box-shadow: var(--vex-card-shadow); overflow: hidden; }
.vm-ex-sr-head { padding: 14px 14px 12px; display: flex; align-items: center; gap: 12px; }
.vm-ex-sr-head--sent { padding-top: 16px; }
.vm-ex-sr-tile {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}
/* 28c: flat, a mark holding a glyph (no text, no shadow). */
.vm-ex-sr-tile--sent { background: var(--vex-mark); color: #fff; }
.vm-ex-sr-tile--sent i { font-size: 17px; }
.vm-ex-sr-who { flex: 1; min-width: 0; }
.vm-ex-sr-name {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.vm-ex-sr-sent-t {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.5px;
    line-height: 1.2;
}
.vm-ex-sr-name:focus,
.vm-ex-sr-sent-t:focus { outline: none; }
.vm-ex-sr-hsub { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 2px; overflow-wrap: anywhere; }
.vm-ex-sr-ref {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: .09em;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-ex-sr-blockwrap { padding: 0 14px 14px; }
.vm-ex-sr-block { background: var(--vex-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ex-sr-label { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
/* The exam's TYPED name (21's rule: the desk reads its own words). */
.vm-ex-sr-exam {
    margin-top: 5px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.vm-ex-sr-exam--two { font-size: 22px; letter-spacing: -.6px; line-height: 1.2; }
.vm-ex-sr-exam--two + .vm-ex-sr-exam--two { margin-top: 2px; }
/* 28c's clock (the one figure both sides share) and 28d's stamp. */
.vm-ex-sr-time {
    margin-top: 4px;
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -1px;
    line-height: 1.1;
}
.vm-ex-sr-stamp {
    margin-top: 5px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
    white-space: nowrap;
}
.vm-ex-sr-inner { margin-top: 12px; background: #fff; border-radius: 10px; overflow: hidden; }
.vm-ex-sr-inner--11 { margin-top: 11px; }
.vm-ex-sr-hair { display: block; border-top: 1px solid var(--vex-hairline); }
.vm-ex-sr-row { display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; }
.vm-ex-sr-row-g { width: 14px; flex-shrink: 0; margin-top: 3px; text-align: center; color: var(--vex-ground); font-size: 12px; }
.vm-ex-sr-row-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }
.vm-ex-sr-row-sub { display: block; font-weight: 400; color: var(--vex-ink-3); margin-top: 1px; }

/* -- 28b: the file as one door row that opens it ------------------------ */
.vm-ex-sr-door {
    width: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-sr-door:hover { color: var(--vex-ink); }
.vm-ex-sr-door:active { background: var(--vex-canvas); }
/* The A4 thumbnail: a drawn page for a PDF (never parsed), the phone's
   own photo for a photo. */
.vm-ex-sr-thumb {
    width: 62px;
    aspect-ratio: 210 / 297;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, var(--vex-canvas) 100%);
    border: 1px solid var(--vex-grey);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 24, 40, .05), 0 6px 14px rgba(16, 24, 40, .07);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 11px 9px;
    overflow: hidden;
}
.vm-ex-sr-tl { display: block; height: 3px; border-radius: 2px; background: var(--vex-grey); }
.vm-ex-sr-tl--h { height: 4px; width: 60%; background: var(--vex-sep); }
.vm-ex-sr-tl--gap { margin-top: 4px; }
.vm-ex-sr-tl--80 { width: 80%; }
.vm-ex-sr-tl--70 { width: 70%; }
.vm-ex-sr-thumb--photo { padding: 0; }
.vm-ex-sr-thumb-img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vm-ex-sr-door-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-ex-sr-fname { font-size: 13.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.35; overflow-wrap: anywhere; }
.vm-ex-sr-fmeta { font-size: 12px; color: var(--vex-ink-4); line-height: 1.4; }
.vm-ex-sr-open { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--vex-ground); }
.vm-ex-sr-open-g { font-size: 11px; }
/* "Choose another": its own 44px borderless row. */
.vm-ex-sr-again {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: normal;
}
.vm-ex-sr-again:disabled { cursor: progress; opacity: .6; }

/* -- The foot: the act and its caption --------------------------------- */
.vm-ex-sr-foot { display: flex; flex-direction: column; gap: 8px; }
.vm-ex-sr-foot--6 { gap: 6px; }
.vm-ex-sr-g14 { font-size: 14px; }
.vm-ex-sr-g13 { font-size: 13px; }
.vm-ex-sr-g12 { font-size: 12px; }
.vm-ex-sr-g11 { font-size: 11px; }
/* Solid: the ground under white (R-AA), the frame's #16a085 shadow. */
.vm-ex-sr-solid {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    text-align: center;
    line-height: normal;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ex-sr-solid:hover { color: #fff; }
.vm-ex-sr-solid--48 { height: 48px; font-size: 14px; gap: 8px; box-shadow: 0 6px 16px rgba(22, 160, 133, .26); }
.vm-ex-sr-solid:disabled,
.vm-ex-sr-solid[aria-busy="true"] { cursor: progress; opacity: .8; }
/* Fill: the tint under the ground (28c's way out, "Choose another"). */
.vm-ex-sr-fill {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    text-align: center;
    line-height: normal;
}
.vm-ex-sr-fill:hover { color: var(--vex-ground); }
.vm-ex-sr-fill--44 { height: 44px; font-size: 13.5px; }
/* Bordered: a way to fix something, not the screen's act (28d). */
.vm-ex-sr-bordered {
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vex-grey);
    color: var(--vex-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    line-height: normal;
}
.vm-ex-sr-bordered i { color: var(--vex-ground); }
.vm-ex-sr-bordered:disabled { cursor: progress; opacity: .7; }
.vm-ex-sr-cap { font-size: 12px; color: var(--vex-ink-3); line-height: 1.5; text-align: center; padding: 0 10px; text-wrap: pretty; }
.vm-ex-sr-cap--send { font-size: 12.5px; text-wrap: wrap; }
.vm-ex-sr-cap--12 { padding: 0 12px; }

/* -- 28e: sending, not sent, a file that cannot go (bordered, settled) -- */
.vm-ex-sr-note {
    background: #fff;
    border: 1px solid var(--vex-grey);
    border-radius: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-ex-sr-note--12 { gap: 12px; }
.vm-ex-sr-note:focus { outline: none; }
.vm-ex-sr-prog { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vm-ex-sr-prog-t { min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--vex-ink); overflow-wrap: anywhere; }
.vm-ex-sr-prog-n { font-size: 12px; color: var(--vex-ink-3); white-space: nowrap; }
.vm-ex-sr-track { height: 6px; border-radius: 999px; background: var(--vex-tint); overflow: hidden; }
.vm-ex-sr-track-fill {
    width: calc(var(--p, 0) * 100%);
    height: 100%;
    border-radius: 999px;
    background: var(--vex-mark);
    transition: width .2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .vm-ex-sr-track-fill { transition: none; }
}
.vm-ex-sr-note-l { font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ex-sr-note-row { display: flex; gap: 10px; align-items: flex-start; }
/* Grey, never red: a fault is said in the ink. */
.vm-ex-sr-note-g {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-ex-sr-note-id { flex: 1; min-width: 0; }
.vm-ex-sr-note-h { font-size: 14px; font-weight: 700; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-sr-note-s { margin-top: 2px; font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.45; }

/* -- The page's own states: the doors out ------------------------------ */
.vm-ex-sr-statedoors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vm-ex-sr-statedoor {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}
.vm-ex-sr-statedoor:hover { color: var(--vex-ground); }

/* Keyboard focus is always visible on this screen's controls. */
#vm-exams-send a:focus-visible,
#vm-exams-send button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ex-sr-bar a:focus-visible { outline-color: #fff; }
/* A whole-row door inside a clipped block draws its ring inside itself. */
#vm-exams-send .vm-ex-sr-door:focus-visible,
#vm-exams-send .vm-ex-sr-again:focus-visible { outline-offset: -2px; }

/* ----------------------------------------------------------------
   18. SCREEN 30 — ALL STRUCTURES (exams/structures.html)
   Pixel truth: docs/design/pharmacy/screens/30/{README.md,frame.html}
   (30a the list, 30b no position, 30c search, 30d nothing matches, 30e
   choose a city); the FRAME wins over the README, and the director's
   screen-30 brief (F1-F14) over both. The exams twin of the pharmacy
   hub's screen 26 (css/pharmacy/app.css §27), COPIED here with this
   side's tokens, never linked.

   24's bar material (the 160deg gradient, the lit corner, the two
   hairlines) with a 44px row: the text exit and the glass city button.
   Then a 52px search, a rail of kind chips that BLEEDS off the right
   edge (overflow:hidden, a finger drags it, focus reveals a chip; never
   overflow-x:auto), and four groups: Taking samples now on the teal
   tint, the other three on grey, each a radius-18 block of white rows
   ending in a centred "Show N more" door.

   The frame draws every row, door and chip as a <button>, whose UA
   line-height is `normal`; the rows here are <a> doors (a link to a page
   is a link) and declare `line-height: normal` so they stand exactly as
   tall. The band and the body carry the frame's body 1.5.

   Nothing here is styled for a rating, a star, a badge of merit, a
   count of exams, a person or a promoted row: a style rule is how they
   creep back. WHITE TEXT NEVER SITS ON #16a085 (PHARMACY_HUB §7.16
   R-AA): 30d's solid "Clear the search" is --vex-ground, carrying the
   frame's #16a085 shadow; #16a085 stays a mark (the focused field's
   edge). No yellow, no orange, no prescription blue, and no green cross
   on the no-photo tile (that is the pharmacy's mark).
   ---------------------------------------------------------------- */
#vm-exams-structures a:focus-visible,
#vm-exams-structures button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ex-dir-band a:focus-visible,
.vm-ex-dir-band button:focus-visible { outline-color: #fff; }
/* A whole-row door inside its group draws its ring inside itself. */
#vm-exams-structures .vm-ex-dir-row:focus-visible,
#vm-exams-structures .vm-ex-dir-cityrow:focus-visible { outline-offset: -2px; }

/* The search field's name, for a screen reader only. */
.vm-ex-dir-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -- The band (24's bar, the frame's padding) ---------------------- */
.vm-ex-dir-band {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px 14px 18px;
    color: #fff;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
                linear-gradient(160deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
    line-height: 1.5;
}
.vm-ex-dir-orient {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 44px;
}
.vm-ex-dir-exit {
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 6px 0 2px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ex-dir-exit:hover { color: #fff; }
.vm-ex-dir-exit i { font-size: 14px; }
/* The city button: 44px glass, the lit pin, the city, a caret. */
.vm-ex-dir-city {
    height: 44px;
    min-width: 44px;
    max-width: 62%;
    padding: 0 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-ex-dir-city i { font-size: 11px; flex-shrink: 0; }
.vm-ex-dir-city .vm-ex-dir-city-pin { color: var(--vex-accent); }
.vm-ex-dir-city-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-ex-dir-title {
    margin-top: 6px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
}
/* "15 open now" — counted from the city's rows, never typed. */
.vm-ex-dir-count {
    margin-top: 5px;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.vm-ex-dir-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--vex-on-band);
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

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

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

/* -- The search: 52px, a name OR an area ------------------------- */
.vm-ex-dir-find {
    height: 52px;
    border-radius: 13px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.vm-ex-dir-find:focus-within { border-color: var(--vex-mark); }
.vm-ex-dir-find > i { font-size: 14px; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-dir-q {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
    caret-color: var(--vex-mark);
}
.vm-ex-dir-q::placeholder { font-size: 14.5px; font-weight: 400; color: var(--vex-ink-4); opacity: 1; }
.vm-ex-dir-qx {
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    background: transparent;
    color: var(--vex-ink-4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-dir-qx i { font-size: 16px; }

/* -- The kind chips: one rail that BLEEDS off the right edge. It hides
   its overflow — no scrollbar, the cut chip is the affordance — and
   structures.js lets a finger drag it and brings a focused chip into
   view (13's day rail). `touch-action: pan-y` leaves the page's own
   vertical scroll to the browser. ---------------------------------- */
.vm-ex-dir-chips {
    position: relative;
    display: flex;
    gap: 8px;
    overflow: hidden;
    margin-right: -14px;
    padding-bottom: 4px;
    min-width: 0;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.vm-ex-dir-chip {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-2);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-ex-dir-chip[aria-pressed="true"] { background: var(--vex-tint); color: var(--vex-ground); }
/* The ring stays inside the clipped rail. */
#vm-exams-structures .vm-ex-dir-chip:focus-visible { outline-offset: -2px; }

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

/* 30c: "3 of 23 match “deido”". */
.vm-ex-dir-found {
    padding: 0 4px;
    font-size: 12px;
    color: var(--vex-ink-3);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

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

/* -- The row: one door to 12 ------------------------------------- */
.vm-ex-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(--vex-ink);
    line-height: normal;
}
.vm-ex-dir-row:hover { color: var(--vex-ink); }
.vm-ex-dir-tile {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--vex-grey-2);
}
.vm-ex-dir-tile img { width: 100%; height: 100%; object-fit: cover; }
/* No photograph: the vertical's teal with the lit corner, and two letters
   of the structure's own name. No cross. */
.vm-ex-dir-tile--none {
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .16) 0%, rgba(143, 240, 139, 0) 60%), var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-ex-dir-mono {
    font-family: var(--vex-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--vex-accent);
    letter-spacing: -.4px;
}
.vm-ex-dir-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vm-ex-dir-name {
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-dir-meta { font-size: 12px; color: var(--vex-ink-4); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vm-ex-dir-sep { color: var(--vex-sep); }
.vm-ex-dir-status {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-ex-dir-status.is-teal { color: var(--vex-ground); }
.vm-ex-dir-noexams { font-size: 12px; color: var(--vex-ink-4); line-height: 1.4; }
.vm-ex-dir-chev { font-size: 13px; color: var(--vex-ground); flex-shrink: 0; }

/* The door at a group's foot: it opens its own group in place. */
.vm-ex-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;
    line-height: normal;
    color: var(--vex-ground);
}
.vm-ex-dir-more i { font-size: 12px; }

/* -- 30d: nothing matches, lifted -------------------------------- */
.vm-ex-dir-nomatch {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-ex-dir-nomatch-t {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.vm-ex-dir-nomatch-inset { background: var(--vex-tint); border-radius: 14px; padding: 10px; }
.vm-ex-dir-note {
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-ex-dir-note i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; margin-top: 3px; }
.vm-ex-dir-note-t { font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
.vm-ex-dir-clear {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 14.5px;
    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);
}

/* -- 30e: choose a city — 12's sheet chrome (§8) with the frame's
   values: a flat .5 dim, a 22px top radius, 8/14/18 padding, 12 gaps,
   the frame's softer shadow. §8's sheet scrolls down (overflow-y:auto),
   which would compute its x axis to auto as well: this one never
   scrolls sideways. ------------------------------------------------ */
.vm-ex-dir-dim { background: rgba(15, 23, 42, .5); }
/* Screen 41 (41b, 41e) redrew it without 30e's Allow foot, closing on the
   last city with 26px (30e drew 18px under the foot): the newer frame. */
.vm-ex-dir-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-ex-dir-grab { display: flex; justify-content: center; padding-top: 2px; flex-shrink: 0; }
.vm-ex-dir-grab .vm-sheet-grab { margin: 0; }
.vm-ex-dir-sheet-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.vm-ex-dir-sheet-id { flex: 1; min-width: 0; }
.vm-ex-dir-sheet-title {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-dir-sheet-sub { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 3px; line-height: 1.45; }
.vm-ex-dir-cancel {
    height: 44px;
    min-width: 44px;
    padding: 0 6px;
    background: transparent;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ex-dir-cities { display: flex; flex-direction: column; gap: 2px; }
.vm-ex-dir-cityrow {
    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-ex-dir-cityrow.is-on { background: var(--vex-tint); }
.vm-ex-dir-cityname {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}
.vm-ex-dir-cityrow.is-on .vm-ex-dir-cityname { color: var(--vex-ground); }
.vm-ex-dir-citycount {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-ex-dir-citymark { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; color: var(--vex-ground); }
.vm-ex-dir-hair { height: 1px; background: var(--vex-hairline); margin: 0 12px; }
.vm-ex-dir-sheet-allow {
    background: var(--vex-canvas);
    border-radius: 12px;
    padding: 6px 6px 6px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.vm-ex-dir-sheet-allow > i { font-size: 12px; color: var(--vex-ground); flex-shrink: 0; }
.vm-ex-dir-sheet-allow-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.45; }

/* ----------------------------------------------------------------
   19. SCREEN 31 — YOUR STRUCTURE (exams/your-structure.html)
   Handoff: docs/design/pharmacy/screens/31/ (README.md + frame.html; the
   frame wins over the README, the README's copy is verbatim) and the
   director's screen-31 brief (F1-F15, 2026-09-27). 31a the facts, 31b
   phone and WhatsApp, 31c where you are, 31d payment ways, 31e doctor's
   request, 31f the states. The exams twin of 29 (pharmacy/counter.html),
   on this vertical's own tokens.

   Rules this section holds:
     - 24/28's band material, the exit 44px; no tab bar (a task screen).
     - WHITE TEXT NEVER SITS ON #16a085 (PHARMACY_HUB §7.16 R-AA): the
       frame's solid pills are --vex-ground #0f6d5c, carrying the frame's
       #16a085 shadow. #16a085 stays a mark: a ticked box, the chosen
       radio's ring, a focused field's edge - none holds text.
     - NOTHING IS RED: a refused field is an ink edge and a line in ink;
       "Remove the pin" is borderless #475569.
     - Every control is 44px or more (the doors 64, the check rows 52,
       the radio rows 60, the commits 52); every number is tabular.
     - The frame declares `body{line-height:1.5}` and its buttons keep the
       UA's `line-height: normal`, so the screen's root declares 1.5 and
       every whole-row door, chip and pill declares `normal` (22's rule).
   ---------------------------------------------------------------- */
.vm-ys-app { line-height: 1.5; }
.vm-ys-view { flex: 1 0 auto; display: flex; flex-direction: column; }
.vm-ys-nw { white-space: nowrap; }
.vm-ys-dot { color: var(--vex-sep); }

/* -- The band (24/28's material) -------------------------------------- */
.vm-ys-band {
    position: relative;
    flex-shrink: 0;
    padding: 10px 14px 20px;
    color: #fff;
    background: radial-gradient(120% 85% at 0% 0%, rgba(143, 240, 139, .13) 0%, rgba(143, 240, 139, 0) 58%),
                linear-gradient(160deg, var(--vex-ground-hi) 0%, var(--vex-ground-lo) 100%);
    border-top: 1px solid rgba(255, 255, 255, .16);
    border-bottom: 1px solid rgba(2, 26, 21, .35);
}
.vm-ys-toprow { height: 44px; display: flex; align-items: center; }
/* (31's exits are the hub's one back control, .vm-back.vm-back--band.) */
.vm-ys-title {
    margin-top: 8px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.6px;
    line-height: 1.15;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vm-ys-title:focus { outline: none; }
.vm-ys-sub { margin-top: 6px; font-size: 12.5px; color: var(--vex-on-band); line-height: 1.5; }

/* -- The body ------------------------------------------------------------ */
.vm-ys-body { flex: 1 0 auto; padding: 18px 14px 22px; display: flex; flex-direction: column; gap: 16px; }
.vm-ys-body--facts { padding-bottom: 24px; gap: 22px; }
.vm-ys-body > .vm-loading { padding: 4px 2px; }
.vm-ys-facts { display: flex; flex-direction: column; gap: 22px; }

/* The lifted card: the one thing to act on in each view. */
.vm-ys-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* -- The headline block (29's): label, the answer, white rows --------- */
.vm-ys-block { background: var(--vex-tint); border-radius: 14px; padding: 12px 14px 14px; }
.vm-ys-k { font-size: 11.5px; font-weight: 600; color: var(--vex-ground); }
.vm-ys-num {
    margin-top: 4px;
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
.vm-ys-num:focus { outline: none; }
.vm-ys-num .vm-ys-cc { font-size: 17px; color: var(--vex-ink-3); letter-spacing: 0; }
.vm-ys-num.is-none { font-size: 22px; letter-spacing: -.5px; }
/* A before/after: "Now: ..." small and grey above the new value, never a
   strike-through. */
.vm-ys-now { margin-top: 5px; font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.4; }
.vm-ys-new {
    margin-top: 4px;
    font-family: var(--vex-font-display);
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
    text-wrap: pretty;
}
.vm-ys-new--26 { font-size: 26px; }
.vm-ys-new--22 { font-size: 22px; }
.vm-ys-rows-in { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }
.vm-ys-row { background: #fff; border-radius: 10px; padding: 9px 11px; display: flex; align-items: flex-start; gap: 9px; }
.vm-ys-row i { flex-shrink: 0; width: 14px; margin-top: 3px; text-align: center; font-size: 12px; color: var(--vex-ground); }
.vm-ys-row-t { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }

/* -- The pills: solid (one per view), fill (a second act), quiet ------- */
.vm-ys-solid,
.vm-ys-commit {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    line-height: normal;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ys-solid:hover,
.vm-ys-commit:hover { color: #fff; }
.vm-ys-solid i { font-size: 13px; }
.vm-ys-commit[aria-busy="true"] { opacity: .85; cursor: progress; }
.vm-ys-fill {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: normal;
}
.vm-ys-fill:hover { color: var(--vex-ground); }
.vm-ys-fill i { font-size: 13px; }
.vm-ys-quiet {
    width: 100%;
    height: 44px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
}

/* -- 31a: "Your page", five door rows ---------------------------------- */
.vm-ys-group { display: flex; flex-direction: column; gap: 10px; }
.vm-ys-h {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    padding: 0 2px;
}
.vm-ys-rows { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ys-door {
    width: 100%;
    min-height: 64px;
    padding: 10px 12px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: transparent;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ys-door:hover { color: var(--vex-ink); }
.vm-ys-door:active { background: var(--vex-canvas); }
.vm-ys-door + .vm-ys-door { border-top: 1px solid var(--vex-hairline); }
.vm-ys-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ys-tile i { font-size: 14px; }
.vm-ys-tile--grey { background: var(--vex-grey-2); color: var(--vex-ink-3); }
.vm-ys-tile--img { overflow: hidden; background: var(--vex-grey-2); }
.vm-ys-tile--img img { width: 100%; height: 100%; object-fit: cover; }
/* No photograph: the vertical's teal with the lit corner, and two letters
   of the structure's own name (30's tile, at 38px). No cross. */
.vm-ys-tile--mono {
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .16) 0%, rgba(143, 240, 139, 0) 60%), var(--vex-ground);
}
.vm-ys-mono {
    font-family: var(--vex-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--vex-accent);
    letter-spacing: -.2px;
}
.vm-ys-door-main { flex: 1; min-width: 0; }
.vm-ys-door-t { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; }
.vm-ys-door-s {
    display: flex;
    flex-direction: column;
    margin-top: 2px;
    font-size: 12px;
    color: var(--vex-ink-3);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.vm-ys-ink { font-weight: 600; color: var(--vex-ink); }
.vm-ys-chev { flex-shrink: 0; font-size: 13px; color: var(--vex-ground); }

/* The frozen facts: held as listed, and 12's "Tell us" door. */
.vm-ys-held {
    background: var(--vex-grey-2);
    border-radius: 14px;
    padding: 12px 12px 6px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vm-ys-held-t { font-size: 12.5px; color: var(--vex-ink-2); line-height: 1.5; text-wrap: pretty; }
.vm-ys-held-go {
    align-self: flex-start;
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--vex-ground);
}
.vm-ys-held-go i { font-size: 11px; }

/* -- 31f: the states around 31a --------------------------------------- */
.vm-ys-state { gap: 12px; }
.vm-ys-state-t {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.3;
}
.vm-ys-state-t:focus { outline: none; }
.vm-ys-state-s { font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.45; }

/* -- The fields (23's material) ---------------------------------------- */
.vm-ys-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vm-ys-label { display: block; font-size: 12px; font-weight: 600; color: var(--vex-ink-2); }
.vm-ys-help { font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ys-help--pad { padding: 0 2px; }
/* A refusal: the ink edge and the line under the field (23's). */
.vm-ys-err {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.4;
}
.vm-ys-err i { flex-shrink: 0; margin-top: 3px; font-size: 12px; }
.vm-ys-err--tuck { margin-top: -8px; }
/* The number behind its fixed "+237". */
.vm-ys-box {
    min-height: 48px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-ys-box:focus-within { border-color: var(--vex-mark); }
.vm-ys-box.is-refused { border-color: var(--vex-ink); }
.vm-ys-cc { flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--vex-ink-4); line-height: 1.4; font-variant-numeric: tabular-nums; }
.vm-ys-in {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
    caret-color: var(--vex-mark);
}
.vm-ys-input,
.vm-ys-textarea,
.vm-ys-select {
    display: block;
    width: 100%;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    font-size: 15px;
    font-weight: 600;
    color: var(--vex-ink);
    outline: none;
    margin: 0;
    caret-color: var(--vex-mark);
}
.vm-ys-input { height: 48px; padding: 0 14px; }
.vm-ys-textarea {
    min-height: 48px;
    padding: 11px 14px;
    line-height: 1.4;
    resize: none;
    overflow: hidden;
    field-sizing: content;
}
.vm-ys-input:focus,
.vm-ys-textarea:focus,
.vm-ys-select:focus { border-color: var(--vex-mark); }
.vm-ys-input[aria-invalid="true"],
.vm-ys-textarea[aria-invalid="true"],
.vm-ys-selectbox.is-refused .vm-ys-select { border-color: var(--vex-ink); }
.vm-ys-pair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px; }
/* The city: a 48px select, the chevron drawn over the native control's. */
.vm-ys-selectbox { position: relative; }
.vm-ys-select {
    height: 48px;
    padding: 0 40px 0 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.vm-ys-selectbox > i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--vex-ink-4);
    pointer-events: none;
}

/* -- 31b: WhatsApp, three chips (29d's) -------------------------------- */
.vm-ys-wa {
    border-top: 1px solid var(--vex-hairline);
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vm-ys-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vm-ys-chip {
    height: 44px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
}
.vm-ys-chip[aria-pressed="true"] { background: var(--vex-tint); color: var(--vex-ground); font-weight: 700; }
/* A fixed line cannot take WhatsApp: "This number" is drawn, not offered. */
.vm-ys-chip:disabled {
    background: var(--vex-canvas);
    border: 1px dashed var(--vex-sep);
    color: var(--vex-ink-4);
    cursor: not-allowed;
}
.vm-ys-note { background: var(--vex-tint); border-radius: 14px; padding: 12px; }
.vm-ys-note-rows { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }

/* -- The commit bar: white, the top shadow, one pill ------------------- */
.vm-ys-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
/* A save that did not go through: in ink, a grey glyph, never red. */
.vm-ys-fail {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.45;
}
.vm-ys-fail i { flex-shrink: 0; margin-top: 3px; font-size: 12px; color: var(--vex-ink-3); }

/* -- 31c: the pin card -------------------------------------------------- */
.vm-ys-pinhead { display: flex; align-items: center; gap: 12px; }
.vm-ys-pinmain { flex: 1; min-width: 0; }
.vm-ys-pin-t { font-size: 14px; font-weight: 600; color: var(--vex-ink); }
.vm-ys-pin-s { margin-top: 2px; font-size: 12px; color: var(--vex-ink-3); line-height: 1.4; }
.vm-ys-pin-ask { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--vex-ink); }
.vm-ys-pin-say { margin-top: -6px; font-size: 12px; color: var(--vex-ink-3); line-height: 1.45; text-align: center; }
.vm-ys-pincard .vm-ys-quiet { margin-top: -8px; }

/* -- 31d: three check rows ---------------------------------------------- */
.vm-ys-checkwrap { display: flex; flex-direction: column; gap: 8px; }
.vm-ys-checks,
.vm-ys-radios { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-ys-check {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: transparent;
    line-height: normal;
}
.vm-ys-check + .vm-ys-check { border-top: 1px solid var(--vex-hairline); }
.vm-ys-tick {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid var(--vex-sep);
    color: transparent;
}
.vm-ys-tick i { font-size: 11px; }
.vm-ys-check[aria-checked="true"] .vm-ys-tick { background: var(--vex-mark); border-color: var(--vex-mark); color: #fff; }
.vm-ys-check-t { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--vex-ink); }

/* -- 31e: two radio rows ------------------------------------------------- */
.vm-ys-radio {
    width: 100%;
    min-height: 60px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: transparent;
    line-height: normal;
}
.vm-ys-radio + .vm-ys-radio { border-top: 1px solid var(--vex-hairline); }
.vm-ys-radio[aria-checked="true"] { background: var(--vex-canvas); }
.vm-ys-ring {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1.5px solid var(--vex-sep);
    background: #fff;
}
.vm-ys-radio[aria-checked="true"] .vm-ys-ring { border: 7px solid var(--vex-mark); }
.vm-ys-radio-main { flex: 1; min-width: 0; }
.vm-ys-radio-t { display: block; font-size: 14.5px; font-weight: 600; color: var(--vex-ink); }
.vm-ys-radio-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vex-ink-3); }

/* ----------------------------------------------------------------
   20. SCREEN 34 — THE DESK ANSWERS (additions to 21; states on 13, 14, 15)
   Handoff: docs/design/pharmacy/screens/34/{frame.html,README.md} (the
   owner's drop, 2026-09-28; the FRAME wins over the README) and the
   director's screen-34 brief (F1-F11). 34a To answer · 34b Offer another
   time · 34c Who came · 34d the customer's words · 34e the desk's other
   states.

   Five rules this section holds:
     - SHADOW = ACTIONABLE, never a tint: a request waiting for the desk
       is a lifted card; nothing about a request is tinted (the tint is
       identity, never status). A thing that is over is #f1f5f9.
     - WHITE TEXT NEVER SITS ON #16a085 (R-AA): the frame's solid pills,
       its selected day chip and its selected time are drawn in
       --vex-ground #0f6d5c, as 21's "Call" pill and 18's slots are.
     - "Did not come" is ink, never red; nothing on these screens is red,
       yellow, orange or prescription blue.
     - Every control is 44px or more (pills 48-52px); every clock, date
       and figure is tabular.
     - Rails never scroll: the sheet's seven day chips SHARE the row
       (62px wide at most, never under 44px), so nothing is cut off and
       nothing has to be dragged.
   ---------------------------------------------------------------- */

/* -- 34a: "To answer" --------------------------------------------- */
.vm-dk-asksec { gap: 12px; }
.vm-dk-asks { display: contents; }
.vm-dk-ask {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    overflow: hidden;
}
/* The head is 21's row as a door, with the 34a frame's 14px on top, its
   UA line box on the reference and its lighter "from" (10.5px, #64748b).
   21's own rows keep 21's frame. */
.vm-ex-dk-row.vm-dk-head { padding-top: 14px; }
.vm-dk-head .vm-ex-dk-meta { line-height: normal; }
.vm-dk-head .vm-ex-dk-from { font-size: 10.5px; font-weight: 400; color: var(--vex-ink-4); }
.vm-dk-ask > .vm-ex-dk-toldwrap:last-child { padding-bottom: 14px; }
/* The white inner row of a headline block (the frame's): a 12px glyph on
   the first line, 12.5/600 ink. */
.vm-dk-line {
    margin-top: 11px;
    background: #fff;
    border-radius: 10px;
    padding: 9px 11px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.vm-dk-line > i {
    font-size: 12px;
    color: var(--vex-ground);
    flex-shrink: 0;
    margin-top: 3px;
    width: 14px;
    text-align: center;
}
.vm-dk-line > span { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
.vm-dk-line:focus { outline: none; }
/* A request whose time passed first: a thing that is over. */
.vm-ex-dk-toldblock.is-over { background: var(--vex-grey-2); }
.vm-ex-dk-toldblock.is-over .vm-ex-dk-told-k,
.vm-ex-dk-toldblock.is-over .vm-dk-line > i { color: var(--vex-ink-3); }
/* The acts: 48px pills; Confirm solid, Offer tinted — Offer alone and
   solid when the time is full. */
.vm-dk-acts { padding: 14px; display: flex; gap: 8px; }
.vm-dk-go,
.vm-dk-offer {
    flex: 1;
    min-width: 0;
    height: 48px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
}
.vm-dk-go,
.vm-dk-offer.is-solid {
    background: var(--vex-ground);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-dk-offer { background: var(--vex-tint); color: var(--vex-ground); }
.vm-dk-go:disabled,
.vm-dk-offer:disabled { opacity: .7; cursor: default; }
/* A write that did not go through: one quiet line, in ink. */
.vm-dk-quiet { padding: 0 14px 14px; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }
.vm-ex-dk-toldwrap + .vm-dk-quiet { padding-top: 10px; padding-bottom: 0; }
/* A row offered another time (34e), and one nobody answered in time. */
.vm-ex-dk-meta > .vm-dk-offered { font-weight: 600; color: var(--vex-ink); }
.vm-ex-dk-meta > .vm-dk-asked { color: var(--vex-ink-3); }
/* A slot desk's time over its people, as the 34a frame draws it. */
.vm-ex-dk-slot { gap: 6px; }
.vm-ex-dk-slot-h { font-size: 12px; font-weight: 600; color: var(--vex-ink-3); }
/* Coming days: "3 people · 1 to answer". */
.vm-dk-cs-ask { font-weight: 600; color: var(--vex-ink); }

/* -- 34c, 34e: who came, in the told block of today's card --------- */
.vm-dk-marks {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}
.vm-dk-marks.is-one { grid-template-columns: minmax(0, 1fr); }
.vm-dk-mark {
    height: 48px;
    border-radius: 12px;
    background: #fff;
    color: var(--vex-ink-2);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-dk-mark--came { color: var(--vex-ground); }
.vm-dk-mark i { font-size: 12px; }
.vm-dk-mark:disabled { opacity: .7; cursor: default; }
.vm-dk-said { margin-top: 11px; font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.4; }
.vm-dk-said + .vm-dk-marks { margin-top: 8px; }
.vm-ex-dk-toldblock.has-undo { padding-bottom: 8px; }
.vm-dk-line[data-marked="gone"] > i { color: var(--vex-ink-3); }
.vm-dk-undo {
    width: 100%;
    height: 44px;
    margin-top: 4px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}

/* -- 34b: the sheet "Offer another time" --------------------------- */
.vm-dk-dim { background: rgba(15, 23, 42, .5); }
.vm-dk-sheet {
    padding: 8px 14px calc(16px + 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: 14px;
    /* The sheet may scroll DOWN on a short phone; never sideways. */
    overflow-x: hidden;
    line-height: 1.5;
}
.vm-dk-sheet .vm-sheet-grab { flex-shrink: 0; margin-top: 2px; }
.vm-dk-sheet-head { display: flex; align-items: flex-start; gap: 10px; padding: 0 2px; }
.vm-dk-sheet-titles { flex: 1; min-width: 0; }
.vm-dk-sheet-t {
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-dk-sheet-s { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 4px; line-height: 1.45; overflow-wrap: anywhere; }
.vm-dk-sheet-x {
    min-width: 44px;
    height: 44px;
    padding: 0 6px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--vex-ground);
    flex-shrink: 0;
    line-height: normal;
}
/* Today and the next days it is open: seven chips SHARE the row. */
.vm-dk-days { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.vm-dk-days:empty { display: none; }
.vm-dk-day {
    flex: 1 1 0;
    min-width: 44px;
    max-width: 62px;
    height: 56px;
    border-radius: 14px;
    background: var(--vex-canvas);
    color: var(--vex-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.vm-dk-day-w { font-size: 11px; font-weight: 600; color: var(--vex-ink-3); }
.vm-dk-day-d { font-family: var(--vex-font-display); font-size: 16px; font-weight: 700; }
.vm-dk-day.is-on { background: var(--vex-ground); color: #fff; }
.vm-dk-day.is-on .vm-dk-day-w { color: #fff; font-weight: 700; }
/* A day with no free time: drawn, not choosable (13's full day). */
.vm-dk-day[aria-disabled="true"] { background: var(--vex-grey-2); color: var(--vex-ink-4); cursor: default; }
.vm-dk-day[aria-disabled="true"] .vm-dk-day-w { color: var(--vex-ink-4); }
.vm-dk-times { display: flex; flex-direction: column; gap: 8px; }
.vm-dk-times-h { font-size: 12px; font-weight: 600; color: var(--vex-ink-2); padding: 0 2px; }
.vm-dk-times-h:empty { display: none; }
.vm-dk-times-full { font-weight: 400; color: var(--vex-ink-3); }
/* EVERY free half hour, four across (13's slot idiom). */
.vm-dk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vm-dk-grid:empty { display: none; }
.vm-dk-grid > .vm-loading { grid-column: 1 / -1; padding: 0 2px; }
.vm-dk-time {
    height: 44px;
    border-radius: 16px;
    background: var(--vex-canvas);
    color: var(--vex-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}
.vm-dk-time.is-on { background: var(--vex-ground); color: #fff; font-weight: 700; }
/* "11:30 filled while you were choosing. Pick another." — ink. */
.vm-dk-taken { padding: 0 2px; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.45; }
.vm-dk-taken:focus { outline: none; }
.vm-dk-info { background: var(--vex-tint); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.vm-dk-info .vm-dk-line { margin-top: 0; }
.vm-dk-commit {
    width: 100%;
    height: 52px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-dk-commit:disabled { background: var(--vex-grey-2); color: var(--vex-ink-3); box-shadow: none; cursor: default; }
.vm-dk-sheet button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }

/* -- 34d on 14: a request's band and its acts ----------------------- */
/* "You asked for 11:00", small, over "… · they offer". */
.vm-ex-vc-asked { font-size: 12.5px; color: var(--vex-on-band); margin-bottom: 8px; }
/* Not answered in time: the #f1f5f9 block of a thing that is over. */
.vm-ex-vc-when.is-over {
    background: var(--vex-grey-2);
    border-radius: 14px;
    padding: 12px 14px 14px;
}
.vm-ex-vc-when.is-over .vm-ex-vc-day { color: var(--vex-ink-3); }
.vm-ex-vc-when.is-over .vm-ex-vc-fig { color: var(--vex-ink); }
.vm-ex-vc-when.is-over .vm-ex-vc-nature { margin-top: 11px; }
.vm-ex-vc-when.is-over .vm-ex-vc-nature > i { color: var(--vex-ink-3); }
.vm-ex-vc-reqacts { display: flex; flex-direction: column; gap: 12px; }
.vm-ex-vc-req-go,
.vm-ex-vc-req-out {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}
.vm-ex-vc-req-go {
    background: var(--vex-ground);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 109, 92, .18), 0 6px 16px rgba(22, 160, 133, .28);
}
.vm-ex-vc-req-go:hover { color: #fff; }
.vm-ex-vc-req-out { background: #fff; border: 1.5px solid var(--vex-sep); color: var(--vex-ink); }
.vm-ex-vc-req-go:disabled { opacity: .7; cursor: default; }

/* -- 34d on 15: a request as a row --------------------------------- */
.vm-ex-mv-reqrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    min-height: 60px;
    color: inherit;
}
.vm-ex-mv-reqrow:hover { color: inherit; }
.vm-ex-mv-rtile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.vm-ex-mv-rtile-wk { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vex-ground); }
.vm-ex-mv-rtile-d { display: block; margin-top: 2px; font-family: var(--vex-font-display); font-size: 15px; font-weight: 700; color: var(--vex-ink); }
.vm-ex-mv-req-main { display: block; flex: 1; min-width: 0; }
.vm-ex-mv-req-t { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vm-ex-mv-req-s { display: block; font-size: 12px; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-ex-mv-req-s.is-offer { font-weight: 600; color: var(--vex-ink); }
.vm-ex-mv-reqrow .vm-ex-mv-chev { font-size: 13px; }

/* ----------------------------------------------------------------
   21. SCREEN 36 — WHAT CAME IN (additions to 21: 36b · 36d · 36e)
   Handoff: docs/design/pharmacy/screens/36/{frame.html,README.md} (the
   owner's drop, aesthetic pass approved 2026-09-29; the FRAME wins) and
   the director's brief R1-R9.

   Four rules this section holds:
     - WORDS, NOT BADGES: the band's last row says what is new in a
       sentence, "New" rides at the head of a row's meta line in the
       ground's teal, and an unread notice is weight and a #f4fbf9 ground —
       no dot, no count bubble, no red.
     - THE SHEET IS FULL HEIGHT: the top 44px of the dim still shows; a
       white head over a #f0f2f4 hairline, the rows on #f8fafc, the foot
       white. It scrolls DOWN only.
     - A row that opens nothing is flat: no chevron, an empty 13px column
       so the clocks still align. Over things (a lapsed request, a cancel)
       sit on #f1f5f9 tiles; no prescription blue on this side.
     - Every control is 44px or more; every clock and count is tabular.
   ---------------------------------------------------------------- */

/* -- 36b: the band's news row, its last row ------------------------- */
.vm-dk-news {
    width: 100%;
    min-height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    padding: 8px 12px 8px 10px;
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    color: #fff;
    line-height: normal;
}
.vm-dk-news:active { background: rgba(255, 255, 255, .18); }
.vm-dk-news-g {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    color: var(--vex-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-dk-news-g i { font-size: 13px; }
.vm-dk-news-t { flex: 1; min-width: 0; }
.vm-dk-news-h { display: block; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; }
.vm-dk-news-s { display: block; font-size: 12px; color: var(--vex-on-band); margin-top: 1px; line-height: 1.35; }
.vm-dk-news-chev { font-size: 13px; color: var(--vex-accent); flex-shrink: 0; }
/* On the teal band the page's teal ring would vanish: white instead. */
.vm-ex-dk-app .vm-dk-news:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Said to a screen reader, never drawn. */
.vm-dk-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -- 36b: "New" at the head of a new row's meta line ---------------- */
.vm-ex-dk-meta > .vm-dk-newline { font-weight: 600; color: var(--vex-ink-2); }
.vm-dk-new { font-weight: 700; color: var(--vex-ground); letter-spacing: normal; }
/* The meta line's own kinds keep their ink inside the "New" line. */
.vm-dk-newline > .vm-dk-offered { font-weight: 600; color: var(--vex-ink); }
.vm-dk-newline > .vm-dk-asked { font-weight: 400; color: var(--vex-ink-3); }
.vm-dk-newline > .vm-ex-dk-sent { font-weight: 400; color: var(--vex-ink-3); }
.vm-dk-newline > .vm-ex-dk-for { font-weight: 400; color: var(--vex-ink-4); }

/* -- 36d, 36e: the sheet "What came in" ------------------------------ */
.vm-sheet.vm-dk-came {
    top: 44px;
    max-height: none;
    padding-top: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(2, 26, 21, .18);
    line-height: 1.5;
}
.vm-dk-came-head { flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--vex-hairline); padding-top: 10px; }
.vm-dk-came-top { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px 14px 16px; }
.vm-dk-came-titles { flex: 1; min-width: 0; padding-top: 2px; }
.vm-dk-came-t {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.5px;
    line-height: 1.15;
}
.vm-dk-came-s { font-size: 12.5px; color: var(--vex-ink-3); margin-top: 4px; }
.vm-dk-came-n { font-weight: 700; color: var(--vex-ground); }
.vm-dk-came-x {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: normal;
}
.vm-dk-came-x i { font-size: 15px; }
.vm-dk-came-body {
    flex: 1;
    min-height: 0;
    /* Down only: an overflow-y of its own would compute overflow-x to auto
       (the house rule: nothing scrolls sideways). */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--vex-canvas);
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vm-dk-came-body > .vm-loading { padding: 4px 2px; }
.vm-dk-came-body.is-empty { align-items: center; justify-content: center; padding: 0 24px 12px; text-align: center; }

/* One group per day: its title, then one white container. */
.vm-dk-cg { display: flex; flex-direction: column; gap: 8px; }
.vm-dk-cg-h {
    padding: 0 4px;
    font-family: var(--vex-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--vex-ink-2);
    letter-spacing: -.1px;
}
.vm-dk-cg-list { background: #fff; border: 1px solid var(--vex-grey); border-radius: 18px; overflow: hidden; }
.vm-dk-cg-list > * + * { border-top: 1px solid var(--vex-hairline); }

/* A notice: tile, the event and its clock, the visit as it is now. */
.vm-dk-cr {
    width: 100%;
    min-height: 64px;
    padding: 11px 12px 11px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    color: var(--vex-ink);
    background: transparent;
    line-height: normal;
}
.vm-dk-cr.is-unread { background: #f4fbf9; }
button.vm-dk-cr:active { background: var(--vex-canvas); }
.vm-dk-cr-tile {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-dk-cr-tile.is-over { background: var(--vex-grey-2); color: var(--vex-ink-3); }
.vm-dk-cr-tile i { font-size: 13px; }
.vm-dk-cr-main { display: block; flex: 1; min-width: 0; }
.vm-dk-cr-l1 { display: flex; align-items: baseline; gap: 10px; }
.vm-dk-cr-ev { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--vex-ink); line-height: 1.3; }
.vm-dk-cr-at { font-size: 12px; font-weight: 500; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-dk-cr.is-unread .vm-dk-cr-ev { font-weight: 700; }
.vm-dk-cr.is-unread .vm-dk-cr-at { font-weight: 700; color: var(--vex-ground); }
.vm-dk-cr-l2 { display: block; font-size: 12.5px; color: var(--vex-ink-3); margin-top: 3px; line-height: 1.45; }
/* Each segment holds together; a name longer than the line may break. */
.vm-dk-seg { white-space: nowrap; }
.vm-dk-seg--name { white-space: normal; overflow-wrap: anywhere; }
.vm-dk-cr-l3 { display: block; font-size: 12px; font-weight: 600; color: var(--vex-ink-3); margin-top: 2px; line-height: 1.4; }
.vm-dk-cr-chev { font-size: 13px; color: var(--vex-ground); flex-shrink: 0; width: 13px; }
.vm-dk-cr-pad { width: 13px; flex-shrink: 0; }
/* 36e: the line under a row whose visit is no longer on the desk. */
.vm-dk-cr-line {
    padding: 11px 14px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.4;
}
.vm-dk-cr-line > i { font-size: 12px; margin-top: 3px; color: var(--vex-ink-3); flex-shrink: 0; }
.vm-dk-cr-line:focus { outline: none; }

/* The list says where it ends: a hairline marker (and, capped, one line). */
.vm-dk-came-end { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 6px 0; text-align: center; }
.vm-dk-came-mark { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 4px 6px 0; }
.vm-dk-came-mark::before,
.vm-dk-came-mark::after { content: ''; flex: 1; height: 1px; background: var(--vex-grey); }
.vm-dk-came-mark-t { font-size: 12px; font-weight: 600; color: var(--vex-ink-4); white-space: nowrap; }
.vm-dk-came-still { font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.45; }

/* 36e: nothing came in. */
.vm-dk-came-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vm-dk-came-etile {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vm-dk-came-etile i { font-size: 18px; }
.vm-dk-came-et {
    font-family: var(--vex-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    text-wrap: balance;
}
/* The sheet's own read failed: one sentence, one bordered retry. */
.vm-dk-came-fail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vm-dk-came-ft { font-size: 13.5px; color: var(--vex-ink-2); line-height: 1.5; text-wrap: pretty; }
.vm-dk-came-retry {
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--vex-sep);
    color: var(--vex-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}

/* The foot: "Mark all as read", a flat grey pill. */
.vm-dk-came-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--vex-hairline);
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
}
.vm-dk-came-all {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: var(--vex-grey-2);
    color: var(--vex-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}
.vm-dk-came-all:disabled { opacity: .7; cursor: default; }
/* A mark that did not go through: one quiet line under the pill, in ink. */
.vm-dk-came-note {
    margin-top: 10px;
    padding: 0 2px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.4;
}
.vm-dk-came-note > i { font-size: 12px; margin-top: 3px; color: var(--vex-ink-3); flex-shrink: 0; }
/* Inside the clipped containers the ring is drawn inside the control. */
.vm-dk-came button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }
.vm-dk-came .vm-dk-came-x:focus-visible,
.vm-dk-came .vm-dk-came-all:focus-visible,
.vm-dk-came .vm-dk-came-retry:focus-visible { outline-offset: 2px; }

/* ----------------------------------------------------------------
   22. WIDE LAYOUT (>=720px)
   The 480px column is kept — it is the reading width the whole product
   uses — and the band simply breathes. Two things change, because at
   this width they are wrong rather than merely narrow: the six tiles
   go three-up with room to sit, and the two doors on 10a share a row.
   Screens 12 to 15, 18, 21 to 24, 28, 30 and 31 keep their phone layout
   in the wider column and only take the wider gutters.
   ---------------------------------------------------------------- */
@media (min-width: 720px) {
    .vm-app { max-width: 560px; }
    .vm-ex-band--home { padding: 18px 20px 22px; }
    .vm-ex-band--search { padding: 16px 20px 18px; }
    .vm-ex-band--exam { padding: 16px 20px 20px; }
    .vm-ex-body { padding: 22px 20px 32px; }
    .vm-ex-headline { font-size: 25px; }
    .vm-ex-tiles { gap: 10px; }
    .vm-ex-tile { height: 96px; }
    .vm-ex-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .vm-ex-doors .vm-ex-door { margin: 0; }
    .vm-ex-st-top { padding: 16px 20px; }
    .vm-ex-st-id { padding: 0 22px 30px; }
    .vm-ex-st-state { padding-left: 20px; padding-right: 20px; }
    .vm-ex-st-searchwrap,
    .vm-ex-st-what { padding-left: 20px; padding-right: 20px; }
    .vm-ex-st-bar-main { padding-left: 20px; padding-right: 20px; }
    /* The sheet rises in the column it belongs to. */
    .vm-sheet { max-width: 560px; }
    .vm-ex-sw { padding-left: 20px; padding-right: 20px; }
    /* Screen 13 keeps its phone layout; the gutters widen with the
       column, so the rail's cut chip still sits on the gutter. */
    .vm-ex-bk-head,
    .vm-ex-bk-state,
    .vm-ex-bk-body { padding-left: 20px; padding-right: 20px; }
    .vm-ex-bk-bar-note,
    .vm-ex-bk-bar-main { padding-left: 20px; padding-right: 20px; }
    /* Screens 14 and 15 the same: the band, the bar and the body take the
       column's gutters; nothing is re-laid. */
    .vm-ex-vc-band,
    .vm-ex-vc-state,
    .vm-ex-vc-body,
    .vm-ex-mv-bar,
    .vm-ex-mv-body { padding-left: 20px; padding-right: 20px; }
    /* Screen 18 the same: the band, the body, the bar and the sheet take
       the column's gutters; the grids and rows are not re-laid. */
    .vm-ex-hr-band,
    .vm-ex-hr-body,
    .vm-ex-hr-bar-in,
    .vm-ex-hr-sheet { padding-left: 20px; padding-right: 20px; }
    /* Screen 22 the same: the band, the headers, the bodies, the bar and
       the sheet take the column's gutters; nothing is re-laid. */
    .vm-ex-ls-band,
    .vm-ex-ls-body,
    .vm-ex-ls-top,
    .vm-ex-ls-pbody,
    .vm-ex-ls-ebody,
    .vm-ex-ls-bar-in,
    .vm-ex-ls-sheet { padding-left: 20px; padding-right: 20px; }
    /* Screen 21 the same: the band and the body take the column's
       gutters; the rows and the card are not re-laid. */
    .vm-ex-dk-band,
    .vm-ex-dk-body { padding-left: 20px; padding-right: 20px; }
    /* Screen 23 the same: the headers, the bodies and the commit bar take
       the column's gutters; the pills and the fields are not re-laid. */
    .vm-ex-ly-top,
    .vm-ex-ly-body,
    .vm-ex-ly-bar-cap,
    .vm-ex-ly-fault,
    .vm-ex-ly-bar-in,
    .vm-ex-ly-band,
    .vm-ex-ly-lbody { padding-left: 20px; padding-right: 20px; }
    /* Screen 24 the same: the bar, the body and the sheets take the
       column's gutters; the cards, the paper and the rows are not
       re-laid. */
    .vm-ex-res-bar,
    .vm-ex-res-body,
    .vm-ex-res-sheet { padding-left: 20px; padding-right: 20px; }
    /* Screen 28 the same: the band and the body take the column's
       gutters; the card, the file row and the pills are not re-laid. */
    .vm-ex-sr-bar,
    .vm-ex-sr-body { padding-left: 20px; padding-right: 20px; }
    /* Screen 30 the same: the band and the body take the column's
       gutters, and the chip rail still bleeds to the column's edge. */
    .vm-ex-dir-band,
    .vm-ex-dir-body { padding-left: 20px; padding-right: 20px; }
    .vm-ex-dir-chips { margin-right: -20px; }
    .vm-ex-dir-sheet { padding-left: 20px; padding-right: 20px; }
    /* Screen 31 the same: the band, the bodies and the commit bars take
       the column's gutters; the cards, rows and fields are not re-laid. */
    .vm-ys-band,
    .vm-ys-body,
    .vm-ys-bar { padding-left: 20px; padding-right: 20px; }
    /* Screen 34 the same: the sheet takes the column's gutters; its day
       chips still share the row. */
    .vm-dk-sheet { padding-left: 20px; padding-right: 20px; }
    /* Screen 36 the same: "What came in" takes the column's gutters; its
       rows are not re-laid. */
    .vm-dk-came-body,
    .vm-dk-came-foot { padding-left: 20px; padding-right: 20px; }
}

/* ----------------------------------------------------------------
   SCREEN 33d (2026-09-28): the doors into the site's root pages.
   24: under the newest result, a white 44px row, the door to
   /privacy.html#privacy-results. The 33d frame's values: white, 1px
   #e2e8f0, radius 12, a 12px teal lock, 13px/600 ink, an 11px teal
   chevron. Same tab.
   23: 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-ex-res-privacy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--vex-grey);
    border-radius: 12px;
    color: var(--vex-ink);
    text-decoration: none;
}
.vm-ex-res-privacy i {
    font-size: 12px;
    color: var(--vex-ground);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.vm-ex-res-privacy span {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--vex-ink);
}
.vm-ex-res-privacy .vm-ex-res-privacy-chev { font-size: 11px; }
.vm-ex-ly-terms {
    margin-top: 6px;
    font-size: 13px;
    color: var(--vex-ink-2);
    line-height: 1.5;
}
.vm-ex-ly-terms a {
    display: inline-block;
    padding: 13px 6px;
    margin: -13px -6px;
    color: var(--vex-ground);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----------------------------------------------------------------
   23. SCREENS 41 + 43 — A SECOND CITY; CLOSED FOR NOW
   Handoff: docs/design/pharmacy/screens/41/ and 43/ (README.md +
   frame.html; the FRAME wins over the README), signed off 2026-09-30.

   41 (41e, 41f): 10a's "Douala · Akwa" line becomes 30e's glass city
   button on the Home row (the same `.vm-ex-dir-city`, §18), opening 30e's
   own sheet (§18's `.vm-ex-dir-sheet`, js/exams/city-sheet.js). 41f(1)'s
   white line under the band on 10a and 30; 41f(3)'s failed-cities row in
   the sheet.

   43: 31 gains 43a's door (§19's `.vm-ys-door` on grey), 43b's sheet
   "Close until when?" and 43e's after state (the grey block and the
   six-day strip); 21's band gains 43c's pattern; 12's doors cell reads
   the close. The customer's closed block is #f1f5f9; teal only where
   the owner can act. WHITE TEXT NEVER SITS ON #16a085: the commits are
   --vex-ground, carrying the frame's #16a085 shadow; #16a085 stays a
   non-text fill (the strip's open days). No red, no yellow, no orange,
   no prescription blue; every control 44px or more.
   ---------------------------------------------------------------- */

/* -- 41e: 10a's city button (30e's glass, §18) on the Home row ------- */
.vm-ex-toprow .vm-ex-city { flex-shrink: 0; max-width: 44%; }
#vm-exams .vm-ex-band a:focus-visible,
#vm-exams .vm-ex-band button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#vm-exams .vm-ex-dir-sheet button:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
#vm-exams .vm-ex-dir-cityrow:focus-visible { outline-offset: -2px; }

/* -- 41f(1): the line under the band, the first time in a tab -------- */
.vm-ex-cityline {
    flex-shrink: 0;
    background: #fff;
    padding: 11px 14px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    line-height: 1.4;
}
.vm-ex-cityline i { font-size: 12px; color: var(--vex-ground); margin-top: 3px; width: 14px; text-align: center; flex-shrink: 0; }
.vm-ex-cityline-t { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); overflow-wrap: anywhere; }

/* -- 41f(3): the cities did not load --------------------------------- */
.vm-ex-dir-cityfail { display: flex; align-items: center; gap: 10px; padding: 0 2px 0 4px; }
.vm-ex-dir-cityfail-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
.vm-ex-dir-line-go.vm-ex-dir-cityretry { padding: 0 16px; font-size: 13px; }

/* -- 43e, "12 · the doors cell": the close, full width and first ----- */
.vm-ex-st-fact--closed .vm-ex-st-fact-t { font-size: 14px; line-height: 1.35; }
.vm-ex-st-fact--closed .vm-ex-st-fact-s { font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ex-st-closed-note {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* -- 43c's pattern on 21's band -------------------------------------- */
.vm-ex-dk-closed { display: flex; flex-direction: column; gap: 5px; }
.vm-ex-dk-closed-h {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.5px;
    line-height: 1.2;
    text-wrap: pretty;
}
.vm-ex-dk-closed-s { font-size: 12.5px; color: var(--vex-on-band); line-height: 1.45; }
/* While closed the close is the band's headline; the state sentence
   stays, as 43c's counts stay, in the band's second voice. */
.vm-ex-dk-band.is-closed .vm-ex-dk-state {
    font-family: var(--vex-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
}
.vm-ex-dk-reopen { display: flex; flex-direction: column; gap: 8px; }
.vm-ex-dk-reopen-go {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--vex-ground);
    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-ex-dk-reopen-go i { font-size: 13px; }
.vm-ex-dk-reopen-go:disabled { opacity: .85; cursor: progress; }
.vm-ex-dk-reopen-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vm-ex-dk-reopen-fail { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.4; }
.vm-ex-dk-reopen-fail i { flex-shrink: 0; margin-top: 3px; font-size: 12px; }
.vm-ex-dk-name:focus { outline: none; }

/* -- 43e on 31a: after closing ---------------------------------------- */
.vm-ys-block--closed { background: var(--vex-grey-2); }
.vm-ys-block--closed .vm-ys-k { color: var(--vex-ink-3); }
.vm-ys-closed-h {
    margin-top: 4px;
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -1px;
    line-height: 1.1;
}
.vm-ys-closed-h:focus { outline: none; }
.vm-ys-rows-in--closed { margin-top: 6px; }
.vm-ys-row--grey i { color: var(--vex-ink-3); }
/* The six-day strip: one 24-hour bar a day. */
.vm-ys-strip {
    margin-top: 12px;
    background: #fff;
    border-radius: 10px;
    padding: 11px 11px 9px;
    display: flex;
    gap: 4px;
}
.vm-ys-strip-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vm-ys-strip-cell.is-jump { border-left: 1.5px dashed var(--vex-sep); padding-left: 4px; }
.vm-ys-strip-d { font-size: 11px; font-weight: 600; color: var(--vex-ink-3); text-align: center; white-space: nowrap; }
.vm-ys-strip-bar { height: 12px; border-radius: 4px; background: var(--vex-grey); }
.vm-ys-strip-bar.is-until { background: linear-gradient(90deg, var(--vex-mark) 0 var(--a, 0%), var(--vex-grey) var(--a, 0%) 100%); }
.vm-ys-strip-bar.is-from { background: linear-gradient(90deg, var(--vex-grey) 0 var(--a, 0%), var(--vex-mark) var(--a, 0%) 100%); }
.vm-ys-strip-n { font-size: 10.5px; color: var(--vex-ink-3); text-align: center; white-space: nowrap; min-height: 14px; }

/* -- 43b on 31: the sheet "Close until when?" -------------------------- */
.vm-ys-dim { background: rgba(15, 23, 42, .5); }
.vm-ys-sheet {
    overflow-x: hidden;
    padding: 8px 14px calc(22px + 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: 14px;
    line-height: 1.5;
}
.vm-ys-grab { display: flex; justify-content: center; padding-top: 2px; flex-shrink: 0; }
.vm-ys-grab .vm-sheet-grab { margin: 0; }
.vm-ys-sheet-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.vm-ys-sheet-title {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ys-sheet-title:focus { outline: none; }
.vm-ys-cancel {
    height: 44px;
    min-width: 44px;
    padding: 0 6px;
    background: transparent;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ys-sheet .vm-loading { padding: 4px 2px; }
.vm-ys-sheetfail { display: flex; align-items: center; gap: 10px; padding: 0 2px 0 4px; }
.vm-ys-sheetfail-t { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink); line-height: 1.4; }
.vm-ys-retry {
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ys-closeform { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vm-ys-choices { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vm-ys-choice {
    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-ys-choice[aria-checked="true"] { background: var(--vex-tint); }
.vm-ys-choice-main { flex: 1; min-width: 0; }
.vm-ys-choice-t {
    display: block;
    font-family: var(--vex-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
}
.vm-ys-choice[aria-checked="true"] .vm-ys-choice-t { color: var(--vex-ground); }
.vm-ys-choice-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vex-ink-3); }
.vm-ys-choice-mark { width: 16px; flex-shrink: 0; text-align: center; font-size: 13px; color: var(--vex-ground); }
.vm-ys-choice-mark i { visibility: hidden; }
.vm-ys-choice[aria-checked="true"] .vm-ys-choice-mark i { visibility: visible; }
.vm-ys-hair { height: 1px; background: var(--vex-hairline); margin: 0 12px; }
/* The day chips: one rail that BLEEDS off the sheet's right edge (it
   hides its overflow, a finger drags it, focus reveals a chip). */
.vm-ys-rail {
    display: flex;
    gap: 7px;
    overflow: hidden;
    padding: 6px 0 4px 12px;
    margin-right: -14px;
    min-width: 0;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.vm-ys-daychip {
    flex-shrink: 0;
    width: 62px;
    height: 60px;
    border-radius: 13px;
    background: var(--vex-grey-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: normal;
}
.vm-ys-daychip-d { font-size: 12.5px; font-weight: 700; color: var(--vex-ink); white-space: nowrap; }
.vm-ys-daychip-t { font-size: 11px; color: var(--vex-ink-3); }
.vm-ys-daychip[aria-pressed="true"] { background: var(--vex-ground); }
.vm-ys-daychip[aria-pressed="true"] .vm-ys-daychip-d { color: #fff; }
.vm-ys-daychip[aria-pressed="true"] .vm-ys-daychip-t { color: var(--vex-on-band); }
#vm-exams-ys .vm-ys-daychip:focus-visible,
#vm-exams-ys .vm-ys-choice:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }
/* Who is booked inside the close: the #f1f5f9 block, its white row, and
   one Call door per visit (their visits stay booked). */
.vm-ys-booked { background: var(--vex-grey-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.vm-ys-booked-rows { background: #fff; border-radius: 10px; overflow: hidden; }
.vm-ys-bookdoor { color: var(--vex-ink); }
/* The word for customers: 48px, one line, and its count. */
.vm-ys-word { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vm-ys-word-l { font-size: 13px; font-weight: 700; color: var(--vex-ink); padding: 0 2px; }
.vm-ys-word-l span { font-weight: 500; color: var(--vex-ink-4); }
.vm-ys-input.vm-ys-input--word { padding: 0 12px; font-size: 14px; font-weight: 400; }
.vm-ys-input--word:focus { border-color: var(--vex-mark); }
.vm-ys-count { font-size: 12px; color: var(--vex-ink-3); padding: 0 2px; }
.vm-ys-closego { display: flex; flex-direction: column; gap: 10px; }
.vm-ys-commit:disabled { cursor: default; }

@media (min-width: 720px) {
    .vm-ex-cityline { padding-left: 20px; padding-right: 20px; }
    .vm-ys-sheet { max-width: 560px; padding-left: 20px; padding-right: 20px; }
    .vm-ys-rail { margin-right: -20px; }
}

/* ----------------------------------------------------------------
   24. SCREEN 45 — TAKE IT BACK (the laboratory's side)
   Handoff: docs/design/pharmacy/screens/45/ (README.md + frame.html,
   signed off 2026-09-30; the FRAME wins over the README). 28d's door and
   its sheet, 45e after, on send-result.html (§17); 21's row line and its
   card's door reuse §14's own classes; 45f is 24's one sentence (§16).

   Rules this section holds:
     - 28d's foot is two footed rows INSIDE the card (45g): 60px, a 38px
       tile, a 14px/600 title, a 12px line, the teal chevron. The take-back
       tile is grey: a correction, never an alarm. Nothing here is red.
     - White text sits only on --vex-ground (PHARMACY_HUB §7.16 R-AA): the
       frame's #16a085 "Find the right visit" is the ground, as 28's pills.
     - 45e's block is #f1f5f9 (a thing that is over), its label in ink-3;
       its white rows are separate 10px boxes 6px apart (45's own row).
     - 28d's head says the exam and the day on one line when both fit
       (28's frame) and on two when they do not (45's), never with a dot
       at the start of a line.
     - The sheet is 45b's chrome (8/14/22, a 22px radius, 14px apart)
       holding 45g's contents: a grey block of white rows, the solid "Take
       it back" with no shadow, the quiet 44px "Keep it".
     - 45f: 24's band with its exit alone, one card, one 22px sentence.
   ---------------------------------------------------------------- */

/* -- 28d's head: the exam · the day, one line or two ------------------- */
/* The dot leads the day and the inner row starts one dot-width to the
   left: on a wrapped line the dot sits in the clipped margin. */
.vm-ex-sr-pair { overflow: hidden; }
.vm-ex-sr-pair-in { display: flex; flex-wrap: wrap; margin-left: -.85em; }
.vm-ex-sr-pair-i { min-width: 0; overflow-wrap: anywhere; }
.vm-ex-sr-pair-i:first-child { padding-left: .85em; }
.vm-ex-sr-pair-dot { display: inline-block; width: .85em; text-align: center; color: var(--vex-sep); }

/* -- 28d's footed rows (45g) ------------------------------------------- */
.vm-ex-sr-frow {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 10px 14px;
    background: #fff;
    border-top: 1px solid var(--vex-hairline);
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-sr-frow:hover { color: var(--vex-ink); }
.vm-ex-sr-frow:active { background: var(--vex-canvas); }
.vm-ex-sr-frow:disabled { cursor: progress; opacity: .7; }
.vm-ex-sr-frow-g {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}
.vm-ex-sr-frow-g.is-grey { background: var(--vex-grey-2); color: var(--vex-ink-3); }
.vm-ex-sr-frow-t { flex: 1; min-width: 0; }
.vm-ex-sr-frow-h { display: block; font-size: 14px; font-weight: 600; color: var(--vex-ink); line-height: 1.3; }
.vm-ex-sr-frow-s { display: block; margin-top: 2px; font-size: 12px; color: var(--vex-ink-3); line-height: 1.4; }
.vm-ex-sr-frow-chev { flex-shrink: 0; font-size: 13px; color: var(--vex-ground); }

/* -- 45e: taken back ---------------------------------------------------- */
.vm-ex-sr-block.is-over { background: var(--vex-grey-2); }
.vm-ex-sr-block.is-over .vm-ex-sr-label { color: var(--vex-ink-3); }
.vm-ex-sr-gone-h {
    margin-top: 5px;
    font-family: var(--vex-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.8px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.vm-ex-sr-gone-h:focus { outline: none; }
.vm-ex-sr-wrows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
/* 45's white row: its own 10px box, 9/11 inside, a 12px grey glyph. */
.vm-ex-sr-wrow { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; background: #fff; border-radius: 10px; }
.vm-ex-sr-wrow .vm-ex-sr-row-g { color: var(--vex-ink-3); }
.vm-ex-sr-wrow .vm-ex-sr-row-t { line-height: 1.4; }
.vm-ex-sr-wrow-l { display: block; }
/* "Change Esther's visit": 21's mark, a door inside the block. */
.vm-ex-sr-cdoor {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    background: #fff;
    border-radius: 10px;
    text-align: left;
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-sr-cdoor:hover { color: var(--vex-ink); }
.vm-ex-sr-cdoor-tile {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--vex-font-display);
    font-size: 11px;
    font-weight: 700;
}
.vm-ex-sr-cdoor-t { flex: 1; min-width: 0; }
.vm-ex-sr-cdoor-h { display: block; font-size: 13px; font-weight: 700; color: var(--vex-ink); overflow-wrap: anywhere; }
.vm-ex-sr-cdoor-s { display: block; margin-top: 1px; font-size: 12px; color: var(--vex-ink-3); }
.vm-ex-sr-cdoor-chev { flex-shrink: 0; font-size: 13px; color: var(--vex-ground); }
.vm-ex-sr-cardfoot { padding: 0 14px 14px; }

/* -- The sheet "Take this result back?" -------------------------------- */
.vm-ex-sr-sheet {
    overflow-x: hidden;
    padding: 8px 14px calc(22px + 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: 14px;
    line-height: 1.5;
}
.vm-ex-sr-sheet .vm-sheet-grab { flex-shrink: 0; margin-top: 2px; }
.vm-ex-sr-sheet-t {
    padding: 0 2px;
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
}
.vm-ex-sr-sheet-rows { background: var(--vex-grey-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.vm-ex-sr-sheet-fault { padding: 0 2px; font-size: 12.5px; font-weight: 600; color: var(--vex-ink-3); line-height: 1.45; }
.vm-ex-sr-solid--flat { box-shadow: none; }
.vm-ex-sr-quiet {
    width: 100%;
    height: 44px;
    margin-top: -6px;
    background: transparent;
    color: var(--vex-ground);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
}
.vm-ex-sr-quiet:disabled { cursor: progress; opacity: .6; }
#vm-exams-send .vm-ex-sr-frow:focus-visible,
#vm-exams-send .vm-ex-sr-cdoor:focus-visible { outline-offset: -2px; }

/* -- 45f: the account that had it (24b on a result taken back) --------- */
.vm-ex-res-bar.is-gone .vm-ex-res-exit { display: flex; width: max-content; }
.vm-ex-res-body.is-gone { padding: 22px 16px; gap: 16px; }
.vm-ex-res-gone { background: #fff; border-radius: 18px; box-shadow: var(--vex-card-shadow); padding: 14px; }
.vm-ex-res-gone-in { background: var(--vex-grey-2); border-radius: 14px; padding: 14px; }
.vm-ex-res-gone-t {
    font-family: var(--vex-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.5px;
    line-height: 1.2;
}
.vm-ex-res-gone-t:focus { outline: none; }

@media (min-width: 720px) {
    .vm-ex-sr-sheet { padding-left: 20px; padding-right: 20px; }
}

/* ===== slice A: fe-nav ===== */
/* ----------------------------------------------------------------
   25. THE BOTTOM BAR (slice A, 2026-10-04)
   Home · Pharmacies · Exams · Orders · Account: the one bar both hubs
   carry on every customer screen, in the same order with the same
   destinations. COPIED from css/pharmacy/app.css §4 and re-tokened,
   never linked. Pixel truth: the <nav aria-label="Main"> of
   docs/design/pharmacy/screens/30/redesign-2026-10/frame.html.

   It retires 10's "no nav on the exams side": 10a (index), 12
   (structure) and 30 (structures) carry it with Exams lit; 15 (visits)
   and 24 (results) with Orders lit. The task screens (10b search, 11
   exam, 13 book, 14 visit) keep their own foot and get no bar; the
   structure side keeps its own tabs. No pulse, no badge, no dot.

   Slice N (2026-10-06): the bar is 480px at every width (N4), and from
   901px it hides behind the desktop header, as on the pharmacy side
   (N5). The height variable, the tails, the toast, the focus ring and
   the desktop header live in the shared block at the end of this file
   ("Slice N shared chrome"), identical in css/pharmacy/app.css.
   ---------------------------------------------------------------- */
:root {
    /* The bar's drawn height (a 1px rule, 6px, one 52px tab, 10px and the
       phone's inset) is the shared --vm-nav-h since slice N (N1); this
       side's older name stays as its alias. 12's visit bar rides on it. */
    --vex-nav-h: var(--vm-nav-h);
}
.vm-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    max-width: 480px;
    display: flex;
    padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--vex-grey);
    box-shadow: 0 -4px 22px rgba(16, 24, 40, .06);
    z-index: 40;
}
.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(--vex-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(--vex-ink-4); }
.vm-bottom-nav a.is-active,
.vm-bottom-nav a.is-active:hover { color: var(--vex-ground); }
/* 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(--vex-tint); }
.vm-bottom-nav a.is-active .vm-nav-lb { font-weight: 700; }

/* (The tail every page with the bar ends on, .vm-ex-nav-tail, is the
   shared block's: 23px + the bar, N2.) */

/* 12's visit bar rides ABOVE the bar, flush on it, while the page
   scrolls: it sticks at the bar's height, and the phone's inset is the
   bar's to clear (not the visit bar's). Since slice N it lives at the end
   of 12's <main>, so at the end of the content it parks there, above the
   footer, which clears the bar itself (N9). */
.vm-ex-st-bar { bottom: var(--vex-nav-h); }
.vm-ex-st-bar-main { padding-bottom: 13px; }
/* "Link copied" sits 15px above the bar (the shared block, N3); while 12's
   visit bar (60px card + 8px) is drawn, 15px above that instead. */
body:has(.vm-ex-st-bar:not([hidden])) .vm-ex-toast { bottom: calc(83px + var(--vm-nav-h)); }

/* N4: the bar is 480px at every width, and the page under it keeps the
   same 480px column, so the bar and its column always share their edges
   (the five bar pages skip §22's 560px column; their gutters still widen).
   The same column the pharmacy side's bar pages keep on a wide screen. */
@media (min-width: 720px) {
    .vm-app:has(> .vm-bottom-nav) { max-width: 480px; }
    .vm-app:has(> .vm-bottom-nav) .vm-sheet { max-width: 480px; }
}
@media (min-width: 901px) {
    /* No bar from 901px (N5): the visit bar sits on the window's foot. */
    .vm-ex-st-bar { bottom: 0; }
    body:has(.vm-ex-st-bar:not([hidden])) .vm-ex-toast { bottom: 83px; }
}
/* ===== end slice A: fe-nav ===== */

/* ===== slice A: fe-30 ===== */
/* ----------------------------------------------------------------
   26. SCREEN 30 REDESIGN — THE CARDS (30a-2, slice A, 2026-10-04)
   Pixel truth: docs/design/pharmacy/screens/30/redesign-2026-10/
   frame.html (the frame wins over its drop-README). 26's card adapted
   for structures, COPIED with this side's tokens, never linked.

   Everything here is scoped to #vm-exams-structures or to classes only
   30 draws, and sits after §18, which it overrides where the two meet:
   the band loses its back exit and gains "Find an exam", the small
   "Structures" label, the 30px headline and the white search at its
   foot; the groups stop being grey blocks and become columns of cards
   under a dotted heading. §18's row rules (.vm-ex-dir-row, -tile, -main,
   -status, -noexams, -chev) and its exit (.vm-ex-dir-exit) no longer
   draw anything on 30; §18's chips, Allow row, count line, 30d card and
   30e sheet stand as they were. The sheet and the city button are also
   10a's (§23): nothing below touches them outside this page.

   The bar is fe-nav's (§25, .vm-bottom-nav): the one rule below that
   names it only gives its tabs back their own inset focus ring, which
   this page's broader `a:focus-visible` would otherwise push outward.
   WHITE TEXT NEVER SITS ON #16a085: the solid doors are --vex-ground;
   #16a085 stays a mark (the lit dots, the sample vial). No yellow, no
   orange, no prescription blue, no cross, no pulse, no star.
   ---------------------------------------------------------------- */

/* -- The band (30a-2): city left, "Find an exam" right ---------------- */
#vm-exams-structures .vm-ex-dir-band { padding: 10px 14px 16px; }
#vm-exams-structures .vm-ex-dir-city { flex: 0 1 auto; max-width: none; }
.vm-ex-dir-findexam {
    height: 44px;
    min-width: 44px;
    margin-left: auto;
    padding: 0 14px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-ex-dir-findexam:hover { color: #fff; }
.vm-ex-dir-findexam i { font-size: 12px; color: var(--vex-accent); }
/* "Structures" is the page's h1, drawn as the band's small label. */
#vm-exams-structures .vm-ex-dir-title {
    margin-top: 10px;
    font-family: var(--vex-font-body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vex-on-band);
    letter-spacing: .01em;
    line-height: 1.5;
}
/* "15 open now" with "of 23 in Douala" on its line: counted, never typed. */
.vm-ex-dir-head {
    margin-top: 1px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
#vm-exams-structures .vm-ex-dir-count {
    margin-top: 0;
    font-family: var(--vex-font-display);
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.9px;
    line-height: 1.1;
}
#vm-exams-structures .vm-ex-dir-sub {
    margin-top: 0;
    font-size: 13px;
    color: var(--vex-on-band);
    line-height: 1.5;
}
/* The search: the band's foot, a 52px white pill with the frame's lift.
   Its ring is white on the band; the clear control's is teal, inside. */
#vm-exams-structures .vm-ex-dir-band .vm-ex-dir-find {
    margin-top: 16px;
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    gap: 11px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px rgba(2, 26, 21, .3);
}
#vm-exams-structures .vm-ex-dir-band .vm-ex-dir-find > i { color: var(--vex-ground); }
#vm-exams-structures .vm-ex-dir-band .vm-ex-dir-find:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
#vm-exams-structures .vm-ex-dir-band .vm-ex-dir-qx:focus-visible { outline-color: var(--vex-ground); outline-offset: -2px; }
/* While the read is in flight: the headline's and the search's places. */
.vm-ex-dir-bskel { display: flex; flex-direction: column; }
.vm-ex-dir-bskel span { display: block; background: rgba(255, 255, 255, .14); }
.vm-ex-dir-bskel-head { margin-top: 1px; height: 33px; width: 58%; border-radius: 8px; }
.vm-ex-dir-bskel-find { margin-top: 16px; height: 52px; border-radius: 14px; }

/* -- The list: groups 24px apart (the body's 14 + the frame's 10), the
   first 20px under the chips (14 + 6) ------------------------------- */
#vm-exams-structures .vm-ex-dir-list { gap: 24px; margin-top: 6px; }

/* -- The groups: a dotted heading over a column of cards ------------- */
#vm-exams-structures .vm-ex-dir-group,
#vm-exams-structures .vm-ex-dir-group--samples {
    background: none;
    border-radius: 0;
    padding: 0;
    gap: 14px;
}
#vm-exams-structures .vm-ex-dir-ghead {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 2px;
}
.vm-ex-dir-gdot { width: 8px; height: 8px; border-radius: 999px; background: var(--vex-sep); flex-shrink: 0; }
.vm-ex-dir-gdot.is-lit { background: var(--vex-mark); }
#vm-exams-structures .vm-ex-dir-gname,
#vm-exams-structures .vm-ex-dir-group--samples .vm-ex-dir-gname {
    font-family: var(--vex-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.5;
}
#vm-exams-structures .vm-ex-dir-gcount,
.vm-ex-dir-gnote {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vex-ink-4);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* The door at a group's foot: a grey 44px bar, teal words. */
#vm-exams-structures .vm-ex-dir-more { background: var(--vex-grey-2); border-radius: 14px; }

/* -- The card ---------------------------------------------------------- */
.vm-ex-dir-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--vex-card-shadow);
    min-width: 0;
}
/* The cover: the frame's 362x168 (the photos' 800x372 crop), kept as a
   proportion so a wider column (560px from 720px) does not flatten it;
   168px exactly at 390. The door to 12; its ring is drawn inside it (the
   card clips). */
.vm-ex-dir-cover {
    position: relative;
    display: block;
    aspect-ratio: 362 / 168;
    overflow: hidden;
    background: var(--vex-grey-2);
    color: var(--vex-ink);
    line-height: normal;
}
.vm-ex-dir-cover:hover { color: var(--vex-ink); }
#vm-exams-structures .vm-ex-dir-cover:focus-visible { outline: 3px solid var(--vex-ground); outline-offset: -3px; }
#vm-exams-structures .vm-ex-dir-cover--none:focus-visible { outline-color: var(--vex-accent); }
.vm-ex-dir-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-ex-dir-scrim {
    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%);
}
/* No photograph: 30's monogram ground, the kind's glyph faint in the
   corner, the two letters. No cross: that is the pharmacy's mark. */
.vm-ex-dir-cover--none {
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .16) 0%, rgba(143, 240, 139, 0) 60%), var(--vex-ground);
}
.vm-ex-dir-ghost {
    position: absolute;
    right: -22px;
    bottom: -30px;
    font-size: 150px;
    line-height: 1;
    color: rgba(143, 240, 139, .08);
}
.vm-ex-dir-cmono {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-family: var(--vex-font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--vex-accent);
    letter-spacing: -1px;
    line-height: 1;
}
/* The one status line, a pill on the cover. */
.vm-ex-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;
    color: var(--vex-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.vm-ex-dir-pill.is-teal { color: var(--vex-ground); }
.vm-ex-dir-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vm-ex-dir-pill-vial { font-size: 10.5px; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-dir-pill.is-teal .vm-ex-dir-pill-vial { color: var(--vex-mark); }
.vm-ex-dir-pill-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-dir-pill.is-teal .vm-ex-dir-pill-dot { background: var(--vex-mark); box-shadow: 0 0 0 3px rgba(22, 160, 133, .22); }
.vm-ex-dir-pill-dot.is-hollow { background: transparent; border: 1.5px solid var(--vex-ink-4); }

/* The body: the kind tile on the cover's lower edge, the name beside it. */
.vm-ex-dir-cbody { position: relative; padding: 12px 14px 14px; line-height: 1.5; }
.vm-ex-dir-kind {
    position: absolute;
    left: 14px;
    top: -28px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    padding: 3px;
    display: flex;
}
.vm-ex-dir-kind-in {
    flex: 1;
    border-radius: 13px;
    background: radial-gradient(120% 90% at 0% 0%, rgba(143, 240, 139, .18) 0%, rgba(143, 240, 139, 0) 62%), var(--vex-ground);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vex-accent);
    font-size: 17px;
}
.vm-ex-dir-id { padding-left: 64px; min-height: 34px; min-width: 0; }
#vm-exams-structures .vm-ex-dir-name {
    font-family: var(--vex-font-display);
    font-size: 17.5px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.3px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
#vm-exams-structures .vm-ex-dir-meta {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--vex-ink-4);
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* The icon rows: the landmark; "No exams listed yet" in the grey. */
.vm-ex-dir-facts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vm-ex-dir-fact { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; min-width: 0; }
.vm-ex-dir-fact-ic { width: 16px; display: flex; justify-content: center; flex-shrink: 0; color: var(--vex-ground); font-size: 12px; }
.vm-ex-dir-fact-t { min-width: 0; color: var(--vex-ink-2); overflow-wrap: anywhere; }
.vm-ex-dir-fact--quiet .vm-ex-dir-fact-ic,
.vm-ex-dir-fact--quiet .vm-ex-dir-fact-t { color: var(--vex-ink-4); }

/* The doors, over a hairline. */
.vm-ex-dir-acts {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vex-hairline);
    min-width: 0;
}
/* Message | Directions, one soft-teal pill (screen 51: the Message half
   carries its own edge, so no rule parts the two). */
.vm-ex-dir-split {
    display: flex;
    align-items: center;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-tint);
    flex-shrink: 0;
}
.vm-ex-dir-act {
    height: 44px;
    min-width: 44px;
    border-radius: 999px;
    background: transparent;
    color: var(--vex-ground);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.vm-ex-dir-act i { font-size: 12px; }
.vm-ex-dir-act[aria-busy="true"] { cursor: progress; }
.vm-ex-dir-act--half[data-act="dir"] { padding: 0 15px 0 13px; }
.vm-ex-dir-act--half[data-act="dir"]:only-child { padding: 0 15px; }
/* Screen 51's Message door, the card door in the Call's slot and look:
   a mint wash with its own 1px edge, teal words and glyph (#0f6d5c on
   #e8f5f1 5.6:1, on the hover wash 5.3:1). A plain link. */
.vm-ex-dir-act--ask {
    background: #e8f5f1;
    border: 1px solid #cfe9e1;
    color: #0f6d5c;
}
.vm-ex-dir-act--ask:hover { background: #dff0ea; color: #0f6d5c; }
.vm-ex-dir-act--ask i { font-size: 13px; }
.vm-ex-dir-act--ask:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
.vm-ex-dir-act--half.vm-ex-dir-act--ask { padding: 0 13px 0 15px; }
/* R8: a closed card's Message, a pill of its own beside the quiet
   "See exams" (which takes the rest of the row). */
.vm-ex-dir-act--pill { padding: 0 15px 0 14px; gap: 6px; flex-shrink: 0; }
/* No exams listed: Message leads, full width; Directions beside it, soft. */
.vm-ex-dir-act--solid {
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
}
.vm-ex-dir-act--quiet { padding: 0 16px 0 14px; background: var(--vex-tint); flex-shrink: 0; }
/* "See exams": solid teal on an open card, one quiet pill on a closed one. */
.vm-ex-dir-see {
    flex: 1;
    min-width: 0;
    height: 44px;
    border-radius: 999px;
    background: var(--vex-ground);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(15, 109, 92, .28);
}
.vm-ex-dir-see:hover { color: #fff; }
.vm-ex-dir-see i { font-size: 11px; }
.vm-ex-dir-see.is-quiet { width: 100%; background: var(--vex-tint); color: var(--vex-ground); box-shadow: none; }
.vm-ex-dir-see.is-quiet:hover { color: var(--vex-ground); }
/* 12's read said there is no number (or no place): the fact, in words,
   where the door was. Not a control. */
.vm-ex-dir-nil {
    height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vex-ink-4);
    line-height: normal;
    white-space: nowrap;
}
.vm-ex-dir-nil--solid { flex: 1; min-width: 0; justify-content: center; border-radius: 999px; background: var(--vex-grey-2); }
.vm-ex-dir-nil--quiet { padding: 0 16px 0 14px; border-radius: 999px; background: var(--vex-grey-2); flex-shrink: 0; }

/* -- The list's end: "All 23 in Douala" between two hairlines, 14px
   under the last group (the frame draws it inside that group). ------ */
.vm-ex-dir-end {
    margin-top: -10px;
    padding: 6px 2px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--vex-ink-4);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.vm-ex-dir-end-rule { flex: 1; height: 1px; background: var(--vex-grey); }
.vm-ex-dir-end-t { min-width: 0; text-align: center; overflow-wrap: anywhere; }

/* The bar's tabs keep fe-nav's own inset ring on this page. */
#vm-exams-structures .vm-bottom-nav a:focus-visible { outline-offset: -2px; }
/* ===== end slice A: fe-30 ===== */

/* ===== slice B: fe-12 ===== */
/* ----------------------------------------------------------------
   27. SCREEN 12 REDESIGN — EXAMS · OUR <KIND> (slice B, 2026-10-04),
       AND 31a's "ABOUT US" ROW AND SHEET
   Pixel truth: docs/design/pharmacy/screens/12/redesign-2026-10/
   frame.html (the frame wins over its drop-README; slice B's rulings
   R2, R6-R11 and R13 win over both). 08's tabs, COPIED with this
   side's tokens, never linked.

   It sits after §8 and overrides it where the two meet: the exit
   becomes the frame's 44px arrow (its place is the accessible name),
   the header gains R6's pill, the groups become shadowed cards under a
   display heading, the folded groups 60px white doors, the visit bar
   a dark teal card floating over the bottom bar (§25 still sets where
   it sticks). §8's facts card, marked sentence, "What they do" head,
   way-out row, package footnote, fasting strip and About record no
   longer draw anything on 12: their markup and the JS that fed them
   left with the redesign.

   Three rules this block holds:
     - WHITE TEXT SITS ONLY ON #0f6d5c (PHARMACY_HUB §7.16 R-AA): the
       lit chip, the visit bar, 31a's Save. #16a085 is a mark only
       (the open dot, the map pin, a focused field's edge).
     - Rails bleed and never scroll natively: the chip row hides its
       overflow and structure.js drags it (13's and 43b's idiom).
     - Every control is 44px; money and clocks are tabular.
   ---------------------------------------------------------------- */
/* -- The hero's top rows: the exit and Share, then R6's pill ------ */
/* Slice N: the exit's label is shown (N12), so the frame's one row (an
   arrow, the pill, Share) no longer holds a labelled exit and the longest
   pill on one line ("Open · samples until 11:00 · 11 exams"). The way
   back and Share keep the first row; the pill takes its own row under
   them, left on the column edge, still one line on a phone. A zero-height
   break (::after) closes the first row whatever the widths. */
.vm-ex-st-top { flex-wrap: wrap; row-gap: 0; }
.vm-ex-st-top .vm-ex-st-exit { order: 0; }
.vm-ex-st-top .vm-ex-st-share { order: 1; }
.vm-ex-st-top::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
.vm-ex-st-top .vm-ex-st-status { order: 3; margin-top: 10px; max-width: 100%; }
.vm-ex-st-share { margin-left: auto; }
/* One line on a phone; a long closed state wraps inside the pill rather
   than pushing Share off the row. */
.vm-ex-st-status {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 15px;
    background: rgba(255, 255, 255, .94);
    color: var(--vex-ground);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}
.vm-ex-st-status-t { min-width: 0; overflow-wrap: anywhere; }
.vm-ex-st-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--vex-mark);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .2);
}
.vm-ex-st-status.is-closed { color: var(--vex-ink-2); }
.vm-ex-st-status.is-closed .vm-ex-st-status-dot { background: var(--vex-ink-4); box-shadow: 0 0 0 3px rgba(100, 116, 139, .2); }
.vm-ex-st-status.is-bare { color: var(--vex-ink-2); }
.vm-ex-st-status.is-bare .vm-ex-st-status-dot { display: none; }

/* -- 43's banner (closed for now), under the hero ---------------- */
.vm-ex-st-closedwrap { padding: 14px 14px 0; flex-shrink: 0; }
.vm-ex-st-banner { border: 1px solid var(--vex-grey); border-radius: 18px; align-items: flex-start; }

/* -- The two tabs (R8) ------------------------------------------- */
.vm-ex-st-tabswrap { padding: 14px 14px 0; flex-shrink: 0; }
.vm-ex-st-tabs {
    background: #fff;
    border: 1px solid var(--vex-grey);
    border-radius: 16px;
    padding: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
}
.vm-ex-st-tab {
    height: 44px;
    min-width: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 13.5px;
    font-weight: 600;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-ex-st-tab i { font-size: 12px; flex-shrink: 0; }
.vm-ex-st-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-ex-st-tab.is-on { background: var(--vex-tint); color: var(--vex-ground); font-weight: 700; }
.vm-ex-st-tab:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }
.vm-ex-st-panel { flex-shrink: 0; }

/* -- The category chips (R9): a rail that bleeds to the edge ----- */
.vm-ex-st-catswrap { padding: 10px 0 0 14px; flex-shrink: 0; min-width: 0; }
.vm-ex-st-cats {
    display: flex;
    gap: 8px;
    overflow: hidden;
    padding-bottom: 4px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
/* The rail's own end gutter, so the last chip scrolls clear of the edge. */
.vm-ex-st-cats::after { content: ""; flex: 0 0 6px; }
.vm-ex-st-cat {
    height: 44px;
    min-width: 44px;
    padding: 0 12px;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    color: var(--vex-ink-2);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
}
.vm-ex-st-cat-n { font-size: 12px; font-weight: 600; color: var(--vex-ink-4); }
.vm-ex-st-cat.is-on { background: var(--vex-ground); color: #fff; box-shadow: none; }
.vm-ex-st-cat.is-on .vm-ex-st-cat-n { color: var(--vex-tint); }
.vm-ex-st-cat:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }

/* -- The groups: a display heading over one shadowed card -------- */
.vm-ex-st-panel .vm-ex-st-what { gap: 10px; }
.vm-ex-st-panel .vm-ex-st-groups { gap: 10px; }
.vm-ex-st-groups > .vm-ex-st-group:not(:first-child) { padding-top: 8px; }
.vm-ex-st-grouphead { display: flex; align-items: baseline; gap: 9px; padding: 0 2px; }
.vm-ex-st-grouphead-t {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    overflow-wrap: anywhere;
}
.vm-ex-st-grouphead-n { font-size: 12.5px; font-weight: 600; color: var(--vex-ink-4); flex-shrink: 0; }
.vm-ex-st-panel .vm-ex-st-list { border: none; box-shadow: var(--vex-card-shadow); }
.vm-ex-st-row.is-marked { background: #f4fbf9; }
.vm-ex-st-from {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: 0;
}
/* A folded group: the frame's 60px white door with its shadow. */
.vm-ex-st-panel .vm-ex-st-gdoor {
    height: 60px;
    margin-top: 3px;
    border: none;
    background: #fff;
    box-shadow: var(--vex-card-shadow);
}

/* -- The end of the Exams list: Our <kind>, two lines (R11) ------ */
.vm-ex-st-previewwrap { padding: 18px 14px 0; flex-shrink: 0; }
.vm-ex-st-preview {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vm-ex-st-preview-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vex-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
}
.vm-ex-st-preview-h i { font-size: 12px; color: var(--vex-ground); }
.vm-ex-st-preview-t {
    font-size: 14px;
    color: var(--vex-ink-2);
    line-height: 1.55;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vm-ex-st-more {
    height: 44px;
    border-radius: 999px;
    background: var(--vex-tint);
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vm-ex-st-more i { font-size: 11px; }

/* -- Our <kind> (12-2b): one scroll ------------------------------- */
.vm-ex-st-our { display: flex; flex-direction: column; gap: 18px; padding: 14px 14px 6px; }
.vm-ex-st-aboutcard {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--vex-card-shadow);
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.vm-ex-st-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vex-ground);
}
/* Their own words, as written: the paragraph breaks they typed stay. */
.vm-ex-st-words {
    font-family: var(--vex-font-display);
    font-size: 16.5px;
    font-weight: 500;
    color: var(--vex-ink);
    line-height: 1.5;
    letter-spacing: -.15px;
    text-wrap: pretty;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.vm-ex-st-sign { font-size: 12px; color: var(--vex-ink-4); }
.vm-ex-st-sec { display: flex; flex-direction: column; gap: 10px; }
.vm-ex-st-sec-h {
    padding: 0 2px;
    font-family: var(--vex-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
}
.vm-ex-st-rowcard { background: #fff; border-radius: 18px; box-shadow: var(--vex-card-shadow); padding: 0 14px; }
.vm-ex-st-orow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 6px 0;
}
.vm-ex-st-orow + .vm-ex-st-orow { border-top: 1px solid var(--vex-hairline); }
/* Before you come keeps both rows in the markup: an unstated first row
   leaves no hairline over the second. */
.vm-ex-st-orow[hidden] + .vm-ex-st-orow { border-top: none; }
.vm-ex-st-orow-k {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--vex-ink-3);
    line-height: 1.4;
}
.vm-ex-st-orow-k i { width: 14px; flex-shrink: 0; text-align: center; font-size: 11px; color: var(--vex-ground); }
.vm-ex-st-orow-v {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--vex-ink);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.vm-ex-st-orow-v span { white-space: nowrap; }
.vm-ex-st-orow-v.is-dim { color: var(--vex-ink-3); }
.vm-ex-st-orow .vm-ex-st-today { height: 22px; padding: 0 8px; font-size: 11px; }

/* Finding the door: the map placeholder, the street, the door photo. */
.vm-ex-st-doorcard { background: #fff; border-radius: 18px; box-shadow: var(--vex-card-shadow); overflow: hidden; }
.vm-ex-st-map { position: relative; display: block; height: 140px; overflow: hidden; background: var(--vex-grey-2); }
.vm-ex-st-map-blk { position: absolute; border-radius: 4px; background: var(--vex-grey); transform: rotate(-4deg); }
.vm-ex-st-map-blk--park { left: 58%; top: -18%; width: 46%; height: 52%; border-radius: 10px; background: var(--vex-tint); transform: rotate(-8deg); }
.vm-ex-st-map-blk--a { left: 3%; top: 6%; width: 23%; height: 30%; }
.vm-ex-st-map-blk--b { left: 7%; top: 62%; width: 30%; height: 36%; }
.vm-ex-st-map-blk--c { left: 61%; top: 58%; width: 29%; height: 38%; }
.vm-ex-st-map-road { position: absolute; background: #fff; }
.vm-ex-st-map-road--h { left: -10%; top: 42%; width: 130%; height: 14px; transform: rotate(-4deg); }
.vm-ex-st-map-road--v { left: 40%; top: -20%; width: 13px; height: 150%; transform: rotate(9deg); }
.vm-ex-st-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    font-size: 28px;
    color: var(--vex-mark);
    text-shadow: 0 2px 6px rgba(2, 26, 21, .4);
}
.vm-ex-st-map-go {
    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(--vex-ground);
    font-size: 11px;
    font-weight: 700;
}
.vm-ex-st-map-go i { font-size: 9px; }
.vm-ex-st-map:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }
.vm-ex-st-where { padding: 12px 14px 4px; }
.vm-ex-st-where.is-last { padding-bottom: 14px; }
.vm-ex-st-where-st { font-size: 13px; font-weight: 700; color: var(--vex-ink); line-height: 1.45; overflow-wrap: anywhere; }
.vm-ex-st-where-lm { font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.45; overflow-wrap: anywhere; }
.vm-ex-st-where-st + .vm-ex-st-where-lm { margin-top: 3px; }
.vm-ex-st-doorphoto {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 12px;
    color: var(--vex-ink);
}
.vm-ex-st-doorphoto:hover { color: var(--vex-ink); }
.vm-ex-st-doorphoto-img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--vex-grey-2); }
.vm-ex-st-doorphoto-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--vex-ink); }
.vm-ex-st-doorphoto i { font-size: 12px; color: var(--vex-ink-4); }

/* Call | WhatsApp: one split pill; Call alone fills it. */
.vm-ex-st-talk { display: flex; align-items: center; height: 48px; border-radius: 999px; background: var(--vex-tint); }
.vm-ex-st-talk-go {
    flex: 1;
    min-width: 0;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
}
.vm-ex-st-talk-go:hover { color: var(--vex-ground); }
.vm-ex-st-talk-go .fa-phone { font-size: 12px; }
.vm-ex-st-talk-go .fa-whatsapp { font-size: 15px; }
.vm-ex-st-talk-go:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }
.vm-ex-st-talk-sep { width: 1px; height: 22px; flex-shrink: 0; background: rgba(15, 109, 92, .2); }

/* Tell us. */
.vm-ex-st-tell { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.vm-ex-st-tell-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--vex-ink-3); }
.vm-ex-st-tell-go {
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-2);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.vm-ex-st-tell-go:hover { color: var(--vex-ink-2); }

/* -- The visit bar (R10): a dark teal card over the bottom bar ----
   The wrapper is what sticks (§25: flush on the bar, the bar's inset is
   the bar's); the card floats 8px above it, 10px in from each side. */
.vm-ex-st-bar {
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding: 0 10px 8px;
}
.vm-ex-st-bar-main {
    min-height: 60px;
    padding: 8px 8px 8px 16px;
    border-radius: 18px;
    background: var(--vex-ground);
    box-shadow: 0 10px 24px rgba(15, 109, 92, .32);
    gap: 12px;
}
.vm-ex-st-bar-count { font-size: 12px; color: var(--vex-tint); line-height: 1.3; }
.vm-ex-st-bar-amount { display: block; margin-top: 1px; line-height: 1.2; }
.vm-ex-st-bar-fig,
.vm-ex-st-bar-cur {
    font-family: var(--vex-font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
}
.vm-ex-st-bar-from { font-size: 12px; font-weight: 600; color: var(--vex-tint); }
.vm-ex-st-bar-ask { font-size: 15px; font-weight: 700; color: #fff; }
.vm-ex-st-book {
    height: 44px;
    padding: 0 18px;
    background: #fff;
    color: var(--vex-ground);
    font-size: 14px;
    gap: 8px;
}
.vm-ex-st-book:hover { color: var(--vex-ground); }

/* The switch sheet scrolls down (§8's overflow-y:auto), which would
   compute its x as auto too: nothing on this page scrolls sideways. */
#vm-exams-structure .vm-sheet { overflow-x: hidden; }

@media (min-width: 720px) {
    .vm-ex-st-closedwrap,
    .vm-ex-st-tabswrap,
    .vm-ex-st-previewwrap,
    .vm-ex-st-our { padding-left: 20px; padding-right: 20px; }
    .vm-ex-st-catswrap { padding-left: 20px; }
    .vm-ex-st-bar { padding-left: 16px; padding-right: 16px; }
}

/* -- 31a: the "About us" row and its sheet (R13) -----------------
   The row is one of 31a's doors (§19's .vm-ys-door), first in "Your
   page". The sheet is 43b's chrome on this page (.vm-ys-sheet), with
   08-2d's parts: the title, its line, the 150px field, the helper and
   the live count, a flat Cancel and the solid Save on the ground. */
.vm-ys-about { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vm-ys-about-sub { margin-top: -8px; padding: 0 2px; font-size: 13px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }
.vm-ys-about-in {
    display: block;
    width: 100%;
    min-height: 150px;
    max-height: 50vh;
    margin: 0;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1.5px solid var(--vex-sep);
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--vex-ink);
    caret-color: var(--vex-mark);
    outline: none;
    resize: none;
    overflow-x: hidden;
    overflow-y: auto;
    field-sizing: content;
}
.vm-ys-about-in:focus { border-color: var(--vex-mark); }
.vm-ys-about-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: -4px; padding: 0 2px; }
.vm-ys-about-help { min-width: 0; font-size: 12px; color: var(--vex-ink-4); line-height: 1.4; }
.vm-ys-about-count { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--vex-ink-3); }
.vm-ys-about-acts { display: flex; gap: 8px; margin-top: 2px; }
.vm-ys-about-cancel {
    height: 48px;
    min-width: 44px;
    padding: 0 18px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ys-about-acts .vm-ys-about-save { flex: 1; width: auto; height: 48px; font-size: 14px; }
.vm-ys-about-save:disabled { opacity: .45; box-shadow: none; }
#vm-exams-ys .vm-ys-about-cancel:focus-visible,
#vm-exams-ys .vm-ys-about-save:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
/* ===== end slice B: fe-12 ===== */

/* ===== §28 — slice C: fe-exams ===== */
/* ----------------------------------------------------------------
   28. SCREEN 48 — A PHARMACY AND ITS LABORATORY, THE EXAMS SIDE
       (slice C, 2026-10-04/05): 48b 12's "Their pharmacy" door, 48c
       30's "Also a pharmacy" card row, 48e 31a's "Your pharmacy" door
   Pixel truth: docs/design/pharmacy/screens/48/frame.html (the frame
   wins over its README; slice C's rulings R1-R12 win over both).

   The pharmacy's own mark is drawn here, by this hub's rules, never by
   linking css/pharmacy/: the cross on its #16a085 ground with the lit
   corner (26's tile), and 01's green chevron disc. Both are marks, not
   text: white TEXT still sits only on #0f6d5c (PHARMACY_HUB §7.16
   R-AA), and no #16a085 fill here holds a word. No animation (the
   cross does not glow here). Closed words are grey, never hidden:
   #475569 words beside the hollow #64748b ring, the frame's 12 ·
   their pharmacy is closed. Every tap target is 44px or more.
   ---------------------------------------------------------------- */

/* -- 48b: "Their pharmacy" on 12's Our <kind> tab ----------------- */
.vm-ex-st-link {
    width: 100%;
    min-height: 76px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--vex-card-shadow);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--vex-ink);
    text-align: left;
}
.vm-ex-st-link:hover { color: var(--vex-ink); }
.vm-ex-st-link:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ex-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(--vex-mark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vm-ex-st-link-tile i { font-size: 17px; }
.vm-ex-st-link-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vm-ex-st-link-name {
    font-family: var(--vex-font-display);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.2px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.vm-ex-st-link-meta { margin-top: 2px; font-size: 12.5px; color: var(--vex-ink-3); line-height: 1.35; overflow-wrap: anywhere; }
.vm-ex-st-link-sep { color: var(--vex-sep); }
/* The pharmacy's own status words: teal while it is open, grey when it
   is not. A long closed line wraps inside the card, never past it. */
.vm-ex-st-link-status {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vex-ground);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.vm-ex-st-link-status-t { min-width: 0; overflow-wrap: anywhere; }
/* The mark sits on the first line (15px), a wrapped second line under the
   words, not beside the mark. */
.vm-ex-st-link-dot {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--vex-mark);
    box-shadow: 0 0 0 3px rgba(22, 160, 133, .22);
}
.vm-ex-st-link-status.is-closed { color: var(--vex-ink-3); }
.vm-ex-st-link-status.is-closed .vm-ex-st-link-dot {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid var(--vex-ink-4);
}
.vm-ex-st-link-chev {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1ab394 0%, #16a085 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-ex-st-link-chev i { font-size: 10px; margin-left: 1px; }

/* -- 48c: "Also a pharmacy: <name>" on 30's cards ----------------- */
/* The last of the card's icon rows: 44px to the finger, drawn in the
   rows' own rhythm (the frame's -6px edges). */
.vm-ex-dir-link {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: -6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--vex-ink-2);
    text-align: left;
}
.vm-ex-dir-link:hover { color: var(--vex-ink-2); }
.vm-ex-dir-link:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; border-radius: 8px; }
.vm-ex-dir-link .vm-ex-dir-link-ic { color: var(--vex-mark); }
.vm-ex-dir-link-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vm-ex-dir-link-t strong { font-weight: 700; color: var(--vex-ink); }
.vm-ex-dir-link-chev { flex-shrink: 0; font-size: 11px; color: var(--vex-ground); }

/* -- 48e: "Your pharmacy" on 31a ----------------------------------
   One of 31a's doors (§19's .vm-ys-door), right after About us: the row
   is the link to the pharmacy's page and the quiet "Unlink" sits inside
   it, so the door is a box holding the two (a button cannot sit inside
   a link), with the line a refusal leaves under them. */
.vm-ys-linkdoor { padding: 0; gap: 0; flex-wrap: wrap; align-items: center; }
.vm-ys-linkdoor:active { background: transparent; }
.vm-ys-linkdoor-go {
    flex: 1 1 0;
    min-width: 0;
    min-height: 64px;
    padding: 10px 10px 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--vex-ink);
}
.vm-ys-linkdoor-go:hover { color: var(--vex-ink); }
a.vm-ys-linkdoor-go:active { background: var(--vex-canvas); }
#vm-exams-ys .vm-ys-linkdoor-go:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: -2px; }
.vm-ys-unlink {
    height: 44px;
    min-width: 44px;
    margin-right: 12px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--vex-grey-2);
    color: var(--vex-ink-2);
    font-size: 12.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ys-unlink:disabled { opacity: .6; cursor: default; }
#vm-exams-ys .vm-ys-unlink:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ys-linkdoor-fail { flex: 0 0 100%; margin: 0; padding: 0 12px 12px 14px; }
/* ===== end §28 — slice C: fe-exams ===== */

/* ===== §29 — slice D: fe-12-photos ===== */
/* ----------------------------------------------------------------
   29. SCREEN 12 — PHOTOS (slice D, 2026-10-05): 12-2b's "Photos" block
       on Our <kind>, 12-2a-end's three photos in the preview at the end
       of the Exams list, and the Photos sheet
   Pixel truth: docs/design/pharmacy/screens/12/redesign-2026-10/
   frame.html — 12-2b: "Photos" + "See all 6" over the 2fr/1fr grid on
   its white 20px card (6px inset and gaps, two 104px rows), the caption
   on the first photo under a dark teal foot, "+3" over the third under a
   dark teal veil; 12-2a-end: three 76px photos with 10px corners between
   the two lines and "More about us". Read-only: the read's `photos`.

   Three rules this block holds:
     - The only white words are ON A PHOTOGRAPH, over the frame's own
       dark teal scrims (the caption's foot, the "+K" veil) — the hero's
       standing. White text on any flat ground stays #0f6d5c's alone
       (PHARMACY_HUB §7.16 R-AA).
     - Fewer than three photos never leave a hole: two share the card,
       both tall; one fills it. The preview's row is shared the same way.
     - Every control is 44px ("See all N", Close). No new animation: the
       sheet slides as every .vm-sheet does (§8). Nothing scrolls
       sideways; the sheet scrolls down and never past its own edge.
   ---------------------------------------------------------------- */

/* -- 12-2b: the head row and the grid ------------------------------ */
.vm-ex-st-phhead { display: flex; align-items: center; gap: 9px; padding: 0 2px; }
.vm-ex-st-phhead .vm-ex-st-sec-h { flex: 1; min-width: 0; padding: 0; }
.vm-ex-st-phall {
    height: 44px;
    min-width: 44px;
    padding: 0 4px;
    color: var(--vex-ground);
    font-size: 12.5px;
    font-weight: 700;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.vm-ex-st-phall i { font-size: 11px; }
.vm-ex-st-phall:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; border-radius: 8px; }
.vm-ex-st-phgrid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: 104px 104px;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--vex-card-shadow);
}
/* The grey shows only while a picture is on its way. */
.vm-ex-st-ph { position: relative; min-width: 0; overflow: hidden; background: var(--vex-grey-2); }
.vm-ex-st-ph:nth-child(1) { grid-row: 1 / span 2; border-radius: 14px 6px 6px 14px; }
.vm-ex-st-ph:nth-child(2) { border-radius: 6px 14px 6px 6px; }
.vm-ex-st-ph:nth-child(3) { border-radius: 6px 6px 14px 6px; }
.vm-ex-st-phgrid[data-n="2"] .vm-ex-st-ph:nth-child(2) { grid-row: 1 / span 2; border-radius: 6px 14px 14px 6px; }
.vm-ex-st-phgrid[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.vm-ex-st-phgrid[data-n="1"] .vm-ex-st-ph { border-radius: 14px; }
.vm-ex-st-phgrid.is-door .vm-ex-st-ph { cursor: pointer; }
.vm-ex-st-ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-ex-st-ph-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 10px 9px;
    /* Slice E (E10): the scrim is .62 by the top of the words (the 22px
       padding) and deepens to .72, so white on the brightest patch reads
       4.67:1 (AA); slice D's 0 → .72 left the words' top on ~.33. */
    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;
    line-height: 1.5;
    color: #fff;
    overflow-wrap: anywhere;
}
.vm-ex-st-ph-more {
    position: absolute;
    inset: 0;
    /* Slice E (E10): .62, not .55 — white "+K" over a white patch reads
       4.67:1 (AA), where .55 gave 3.75:1. */
    background: rgba(4, 38, 32, .62);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vex-font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* -- 12-2a-end: the preview's photos, one shared row --------------- */
.vm-ex-st-preview-ph { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vm-ex-st-preview-ph[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-ex-st-preview-ph[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.vm-ex-st-preview-ph.is-door { cursor: pointer; }
.vm-ex-st-pvph-img {
    width: 100%;
    height: 76px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: var(--vex-grey-2);
}

/* -- The Photos sheet: this hub's sheet head over a stack ---------- */
.vm-ex-st-phsheet {
    padding: 8px 14px calc(16px + 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: 14px;
    overscroll-behavior: contain;
    line-height: 1.5;
}
.vm-ex-st-phsheet .vm-sheet-grab { flex-shrink: 0; margin-top: 2px; }
/* The head stays in reach while the photos scroll under it. */
.vm-ex-st-phsheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    background: #fff;
}
.vm-ex-st-phsheet-t {
    flex: 1;
    min-width: 0;
    font-family: var(--vex-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--vex-ink);
    letter-spacing: -.4px;
    line-height: 1.2;
}
.vm-ex-st-phsheet-t:focus { outline: none; }
.vm-ex-st-phsheet-x {
    height: 44px;
    min-width: 44px;
    padding: 0 6px;
    color: var(--vex-ground);
    font-size: 13.5px;
    font-weight: 700;
    line-height: normal;
    flex-shrink: 0;
}
.vm-ex-st-phsheet-x:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; border-radius: 8px; }
.vm-ex-st-phsheet-list { flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.vm-ex-st-phsheet-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    background: var(--vex-grey-2);
}
.vm-ex-st-phsheet-cap {
    margin-top: 6px;
    padding: 0 2px;
    font-size: 12.5px;
    color: var(--vex-ink-3);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

@media (min-width: 720px) {
    .vm-ex-st-phsheet { padding-left: 20px; padding-right: 20px; }
}
/* ===== end §29 — slice D: fe-12-photos ===== */

/* ===== §30 — slice E: fe-31a-photos ===== */
/* ----------------------------------------------------------------
   30. SCREEN 31a — PHOTOS (slice E, 2026-10-05): the owner's gallery.
       The "Photos" door is one of §19's .vm-ys-door rows, last in "Your
       page". Its sheet is 43b's chrome on this page (.vm-ys-sheet: it
       scrolls down, never sideways) with About us's Cancel and Save
       (.vm-ys-about-acts). Per photo: a 76px thumbnail with 10px
       corners (12-2a-end's), what it shows and its "n/40", and the quiet
       "Make first" / "Remove". Then the helper, "Add a photo" and "k of 8".

   Three rules this block holds:
     - Every control is 44px: the caption field, "Make first", "Remove",
       "Try again", "Add a photo" (48), Cancel and Save (48).
     - Grey words are #475569 (AA on white). The acts are the ground's
       teal #0f6d5c. The only white words are Save's, on the ground.
     - No new animation. The bar's width follows the upload with no
       transition. A photo on its way is greyed and does not pulse.
   ---------------------------------------------------------------- */
.vm-ys-phs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vm-ys-phs-sub { margin-top: -8px; padding: 0 2px; font-size: 13px; color: var(--vex-ink-3); line-height: 1.5; text-wrap: pretty; }

/* -- The rows: thumbnail, then what it shows and its two acts ------- */
.vm-ys-phlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-width: 0; }
.vm-ys-phrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 10px 0;
    border-radius: 12px;
}
.vm-ys-phrow + .vm-ys-phrow { border-top: 1px solid var(--vex-hairline); }
/* "Make first" lands the keyboard on the moved row: the ring says where. */
.vm-ys-phrow:focus { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
.vm-ys-phthumb {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--vex-grey-2);
}
.vm-ys-phimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-ys-phrow.is-up .vm-ys-phimg { filter: grayscale(1); opacity: .5; }
.vm-ys-phmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vm-ys-phcap {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border-radius: 12px;
    border: 1.5px solid var(--vex-sep);
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--vex-ink);
    caret-color: var(--vex-mark);
    outline: none;
}
.vm-ys-phcap::placeholder { color: var(--vex-ink-4); opacity: 1; }
.vm-ys-phcap:focus { border-color: var(--vex-mark); }
.vm-ys-phfoot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; min-width: 0; }
.vm-ys-phfoot--end { justify-content: flex-end; }
.vm-ys-phcount { padding-left: 2px; font-size: 12px; font-weight: 600; color: var(--vex-ink-3); }
.vm-ys-phacts { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.vm-ys-phact {
    height: 44px;
    min-width: 44px;
    padding: 0 8px;
    border-radius: 10px;
    background: transparent;
    color: var(--vex-ink-3);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}
.vm-ys-phact--go { color: var(--vex-ground); }
.vm-ys-phact:active { background: var(--vex-canvas); }
/* 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-ys-phtag {
    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;
}

/* -- A photo on its way, and one that did not go -------------------- */
.vm-ys-phstate { padding: 4px 2px 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink-3); line-height: 1.4; }
.vm-ys-phstate--fail { display: flex; align-items: flex-start; gap: 8px; color: var(--vex-ink); }
.vm-ys-phstate--fail i { flex-shrink: 0; margin-top: 3px; font-size: 12px; color: var(--vex-ink-3); }
.vm-ys-phbar { display: block; height: 3px; margin: 6px 2px 0; border-radius: 999px; background: var(--vex-grey); overflow: hidden; }
.vm-ys-phbar-in { display: block; width: 0; height: 100%; background: var(--vex-ground); }

/* -- Under the list: a refusal, the helper, "Add a photo", "k of 8" - */
.vm-ys-phs .vm-ys-phs-fail { margin: 0; padding: 0 2px; }
.vm-ys-phs-help { padding: 0 2px; font-size: 12px; color: var(--vex-ink-3); line-height: 1.4; }
.vm-ys-phadd { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vm-ys-phadd .vm-ys-phadd-go { width: auto; flex-shrink: 0; padding: 0 18px; }
.vm-ys-phadd .vm-ys-phadd-go:disabled { background: var(--vex-grey-2); color: var(--vex-ink-3); cursor: default; }
.vm-ys-phadd-k { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vex-ink-3); line-height: 1.4; }
#vm-exams-ys .vm-ys-phact:focus-visible,
#vm-exams-ys .vm-ys-phadd-go:focus-visible { outline: 2px solid var(--vex-ground); outline-offset: 2px; }
/* ===== end §30 — slice E: fe-31a-photos ===== */

/* == 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 == */

/* ===== Slice N: the exams side (2026-10-06) ===== */
/* ----------------------------------------------------------------
   32. SLICE N — WHAT ONLY THIS SIDE NEEDS
   The shared chrome above is byte-identical with css/pharmacy/app.css;
   these few rules are the exams side's own (nav-footer-contract.md).
   ---------------------------------------------------------------- */

/* N6: a tab bar's spacer takes room only while its bar is shown (the
   owner pages draw the bar once the read has said who she is). */
[data-tabs][hidden] + .vm-ex-tabs-clear { display: none; }

/* N6 on this side's wider column: from 720px the owner pages keep §22's
   560px column, so their fixed tab bar keeps its edges. */
@media (min-width: 720px) {
    .vm-ex-ls-tabs,
    .vm-ex-dk-tabs,
    .vm-ex-ly-tabs { max-width: 560px; }
}

/* N11: 24 and 28 ring every link teal from their id; on the band the
   back control's ring stays white. */
#vm-exams-results .vm-back--band:focus-visible,
#vm-exams-send .vm-back--band:focus-visible { outline-color: #fff; }

/* N10: 12's <main> holds the hero, the tabs, the panels and the visit
   bar, laid out as the column laid them out before it. */
.vm-ex-st-main { display: flex; flex-direction: column; flex-shrink: 0; min-width: 0; }

/* The owner's extension of N7: 11 carries the footer too, and has no bar
   to clear, so its footer ends the page 24px under its last line (the
   shared block's desktop value, on every width). */
.vm-app:not(:has(> .vm-bottom-nav)) > .vm-foot { padding-bottom: 24px; }
/* ===== end Slice N: the exams side ===== */