/* ====================================================================
   SCREEN 26 — PHARMACIES, the desktop layer (desktop slice E1, 2026-10-09)
   pharmacy/pharmacies.html only, linked after desktop/shared.css.

   Frames: docs/design/pharmacy/screens/26/desktop/frame.html — 26-d (day,
   Wednesday 14:30), 26-d-night (22:10), 26-d-rota (Saturday, six on duty),
   26-d-city (41b as a 480 dialog), 26-d-narrow (1000 wide), 26-d-states.
   Sheet: screens/26/desktop/FACTS.md. Records: screens/desktop-26-34/
   records/Screen 26 - desktop {work order, design pass}.md (the design
   pass wins). Brief: briefs/2026-10-09_desktop-slice-E1.md.

   Tiers: >=901 the layer: the page leaves the 480 column (.vm-dt-shell);
   the glass header over the band (pharmacies.js wires glassBand); the band
   in the 1200 column, the list's controls (label over headline | the city
   chip; the field | the three glass chips, which pharmacies.js moves into
   the band); the cards on their side (cover 260); Closed now as the design
   pass's timetable ledger; one column in the phone's order · >=1120 the
   list a grid: who can serve her now (764) | Closed now (340), level with
   the first group, NOT sticky; "All N in <city>" under both. 901-1119 the
   band `1fr auto` with its right blocks to the right.

   Hooks the JS writes from 901 only: .vm-dir-now (the groups that can
   serve her now), the ledger (.vm-dir-tt*, inside shared.css's
   .vm-dt-ledger), the duty number (.vm-dir-dnum), the band's fold
   (.has-q). (The open card's number after the tap went with its Call:
   screen 51's Message half took the slot, styled in app.css.)
   Every rule sits inside a min-width query: the phone is untouched.
   Literal values only.

   From shared.css since E10 (the consolidation): the band's light
   (§13's .vm-dt-band--customer, on the markup), the label read, not drawn
   while a search is held (§13's .vm-dt-band-id--hidden under .has-q),
   41b's 480 (§3's .vm-sheet--dt-480, set by pharmacies.js from 901: the
   phone's markup states no figure) and, since G6 (screen 41: Home's
   chip opens the same dialog), its chrome (§22, this file's old section
   7, moved unchanged). The glass chips stay here: the frame's are the
   bordered .14 glass, not §10's ringed .vm-dt-glass.

   Sections, in the frame's order:
     1. The band (and its fold while a search is held)
     2. The body and the list: one column; the grid from 1120
     3. The group heads, the door, the end marker
     4. The card on its side (open, duty) and call 3's numbers
     5. Closed now: the timetable ledger
     6. States: the Allow line, 26c, R14, a failed read, the skeleton
     7. The narrow window (901-1119)
     8. Hover
       (41b as a 480 dialog is desktop/shared.css section 22, since G6.)
   ==================================================================== */


/* ====================================================================
   1. THE BAND (26-d, call 1)
   The glass header sits over the band, so the band starts at the
   window's top and clears the header's 65 before its own 20. Row 1: the
   label "Pharmacies" (13) over the headline "11 open now" (40) and its
   sub on the baseline | the city chip at the head of the 340 column.
   Row 2: the field (56) | the three glass chips. The basket door is the
   header's Basket from 901.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dir-band {
        overflow: visible;
        padding: 85px max(24px, calc((100% - 1152px) / 2)) 32px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
            "title orient"
            "hl orient"
            "find chips";
        column-gap: 48px;
        align-items: end;
        border-top: 0;
        border-bottom: 0;
    }
    .vm-dir-band::before { display: none; }

    .vm-dir-band .vm-dir-title {
        grid-area: title;
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .01em;
        line-height: 20px;
        color: #e2e8f0;
    }
    .vm-dir-band .vm-dir-hl {
        grid-area: hl;
        min-height: 44px;
        margin-top: 2px;
        column-gap: 12px;
        row-gap: 2px;
    }
    .vm-dir-hl .vm-dir-count {
        font-size: 40px;
        letter-spacing: -1.2px;
        line-height: 44px;
        white-space: nowrap;
    }
    .vm-dir-hl .vm-dir-sub {
        font-size: 15px;
        color: #e2e8f0;
        white-space: nowrap;
    }

    /* The city chip at the head of the column; the basket door goes. */
    .vm-dir-band .vm-dir-orient {
        grid-area: orient;
        height: auto;
        align-self: end;
        justify-content: flex-start;
    }
    .vm-dir-band .vm-dir-bask { display: none; }
    .vm-dir-band .vm-dir-city {
        height: 44px;
        max-width: 100%;
        margin-left: 0;
        padding: 0 14px;
        gap: 8px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 13px;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
    }
    .vm-dir-band .vm-dir-city > .fa-location-dot { font-size: 12px; color: #8ff08b; }
    .vm-dir-band .vm-dir-city .vm-dir-city-caret { margin-left: 2px; font-size: 10px; }

    /* The field: the white 56 pill at the band's foot. */
    .vm-dir-band .vm-dir-find {
        grid-area: find;
        margin-top: 20px;
        height: 56px;
        border-radius: 16px;
        padding: 0 6px 0 20px;
        gap: 12px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 28px rgba(2, 26, 21, .3);
    }
    .vm-dir-band .vm-dir-find > i { font-size: 15px; color: #0f6d5c; }
    .vm-dir-band .vm-dir-q { font-size: 15px; color: #0f172a; }
    .vm-dir-band .vm-dir-q::placeholder { color: #64748b; }
    .vm-dir-band .vm-dir-qx {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: transparent;
        color: #475569;
    }
    .vm-dir-band .vm-dir-qx i { font-size: 15px; }

    /* The three chips, moved beside the field: the band's glass. */
    .vm-dir-band .vm-dir-chips {
        grid-area: chips;
        min-width: 0;
        min-height: 56px;
        margin-top: 20px;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
    }
    .vm-dir-band .vm-dir-chip {
        height: 44px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 12px;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
    }
    .vm-dir-band .vm-dir-chip.is-on {
        border-color: #fff;
        background: #fff;
        color: #0f6d5c;
        font-weight: 700;
    }
    .vm-dir-app .vm-dir-band .vm-dir-chip:focus-visible,
    .vm-dir-app .vm-dir-band .vm-dir-city:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* While a search is held the label and the headline fold away (call
       1): the matches sit under the field, and the count never moves with
       a search. The page's name stays in the tree, read, not drawn
       (shared §13). */
    .vm-dir-band.has-q { padding-top: 83px; padding-bottom: 24px; }
    .vm-dir-band.has-q > .vm-dir-hl,
    .vm-dir-band.has-q > .vm-dir-orient { display: none; }
    .vm-dir-band.has-q > .vm-dir-find,
    .vm-dir-band.has-q > .vm-dir-chips { margin-top: 0; }
}


/* ====================================================================
   2. THE BODY AND THE LIST
   The 1200 column, 32 under the band. One column (901-1119): the groups
   that can serve her now (.vm-dir-now: at night On duty tonight, Open
   24 h, Open now), then Closed now, then the end marker, 36 apart. From
   1120 a grid: .vm-dir-now 764 | Closed now 340 in row 1, level with the
   first group and after it in the reading order, not sticky; the end
   marker under both. Nothing open drawn: Closed now takes the main
   column and the 340 one stays empty (as the cards keep their width
   when nothing closed matches).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dir-body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 24px 64px;
        gap: 20px;
    }
    .vm-dir-list { margin-top: 0; gap: 36px; }
    .vm-dir-now {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 36px;
    }
}

@media (min-width: 1120px) {
    .vm-dir-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 40px;
        align-items: start;
    }
    .vm-dir-list > .vm-dir-now { grid-column: 1; grid-row: 1; }
    .vm-dir-list > .vm-dir-now ~ [data-group="closed"] { grid-column: 2; grid-row: 1; }
    .vm-dir-list > [data-group="closed"]:first-child { grid-column: 1; }
    .vm-dir-list > .vm-dir-end { grid-column: 1 / -1; }
}


/* ====================================================================
   3. THE GROUP HEADS, THE DOOR, THE END MARKER
   A head: the 8 dot, the name at 21 (Space Grotesk), on the right
   "Nearest first" (the first group, with a distance) or Closed now's
   count; 16 down to the first card. The door: 48 tall, #f1f5f9, the
   code's words ("Show N more open", and at night "Show N more" under
   the first three duty cards). The end: "All N in <city>" between two
   hairlines.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dir-list .vm-dir-group { gap: 16px; }
    .vm-dir-list .vm-dir-ghead {
        min-height: 32px;
        gap: 10px;
        padding: 0;
    }
    .vm-dir-list .vm-dir-gh .vm-dir-gname {
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 32px;
    }
    .vm-dir-list .vm-dir-gnote { font-size: 13.5px; color: #64748b; }
    .vm-dir-list .vm-dir-gh .vm-dir-gcount { font-size: 14px; color: #64748b; }

    .vm-dir-list .vm-dir-more {
        height: 48px;
        border-radius: 14px;
        background: #f1f5f9;
        font-size: 13.5px;
        color: #0f6d5c;
        font-variant-numeric: tabular-nums;
    }

    .vm-dir-list .vm-dir-end {
        margin-top: 0;
        padding: 0;
        gap: 14px;
        font-size: 13px;
        color: #64748b;
    }
    .vm-dir-list .vm-dir-end::before,
    .vm-dir-list .vm-dir-end::after { background: #e2e8f0; }
}


/* ====================================================================
   4. THE CARD ON ITS SIDE (26a-3; Home's row card, cover 260)
   The cover 260 at the left with its pill (14 in); the body 20 / 22 /
   18: the lit cross tile (48) beside the name (20) and its place line,
   the rows she can use now (13.5), 48c's row, then the buttons on one
   hairline-topped row at the foot: the split Call | Directions, "Open
   store" solid at the far right. 212 at least; a duty card (no rows)
   168. Call 3: the duty card prints the rota's number at the row's
   right edge; an open card's Call shows the number once its read
   answered (still a tel: link). A duty card with no number: Directions
   alone, mint, its own width (the code's form; the records).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dir-card {
        display: flex;
        min-height: 212px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-dir-card--duty { min-height: 168px; }

    .vm-dir-card .vm-dir-media {
        width: 260px;
        height: auto;
        flex-shrink: 0;
        background: #f1f5f9;
    }
    .vm-dir-card .vm-dir-pill { top: 14px; left: 14px; max-width: calc(100% - 28px); }
    .vm-dir-card .vm-dir-shot--none::before { right: -30px; bottom: 34px; width: 170px; height: 44px; }
    .vm-dir-card .vm-dir-shot--none::after { right: 33px; bottom: -30px; width: 44px; height: 170px; }
    .vm-dir-card .vm-dir-shot-mono { font-size: 64px; }

    .vm-dir-card .vm-dir-cbody {
        flex: 1 1 auto;
        min-width: 0;
        padding: 20px 22px 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .vm-dir-card .vm-dir-tile {
        top: 20px;
        left: 22px;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 13px;
        background: transparent;
    }
    .vm-dir-card .vm-dir-tile-in { border-radius: 13px; }
    .vm-dir-card .vm-dir-tile i { font-size: 18px; }
    .vm-dir-card .vm-dir-chead {
        min-width: 0;
        min-height: 48px;
        padding-left: 62px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .vm-dir-card .vm-dir-name { font-size: 20px; letter-spacing: -.4px; }
    .vm-dir-card .vm-dir-place { margin-top: 3px; font-size: 13px; color: #64748b; }
    .vm-dir-card .vm-dir-facts { margin: 0; gap: 8px; }
    .vm-dir-card .vm-dir-fact { font-size: 13.5px; }
    .vm-dir-card .vm-dir-link,
    .vm-dir-card .vm-dir-facts + .vm-dir-link {
        margin: -6px 0;
        font-size: 13.5px;
        color: #334155;
    }

    .vm-dir-card .vm-dir-acts {
        margin-top: auto;
        padding-top: 14px;
        border-top-color: #f0f2f4;
        align-items: center;
    }
    .vm-dir-card .vm-dir-half { padding: 0 14px 0 16px; }
    .vm-dir-card .vm-dir-half--dir { padding: 0 16px 0 14px; }
    .vm-dir-card .vm-dir-half:only-child { padding: 0 16px; }
    .vm-dir-card .vm-dir-go {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0 22px;
    }
    .vm-dir-card .vm-dir-dcall {
        flex: 0 0 auto;
        padding: 0 24px;
    }
    .vm-dir-card .vm-dir-dir:only-child { flex: 0 0 auto; justify-content: flex-start; }
    .vm-dir-dnum {
        margin-left: auto;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .02em;
        color: #0f172a;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}


/* ====================================================================
   5. CLOSED NOW: THE TIMETABLE (the design pass, change 1)
   One bordered ledger (shared.css's .vm-dt-ledger) of every closed
   counter, the code's order. A row (68 at least) is the store door: a
   100 gutter (the day over the time it opens: mint #f4fbf9 / #0f6d5c
   where it reopens today, slate #f8fafc otherwise; 43's day back with
   its date; empty when no hours are published) | the name (15) over its
   place line (13), and for 43 "Closed for now" or for no hours the
   code's "Closed now" | the chevron. 48c's lab door under its row, the
   gutter carried on, no hairline between them.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dir-tt-row {
        display: flex;
        align-items: center;
        min-height: 68px;
        background: #fff;
        color: inherit;
        line-height: normal;
        text-decoration: none;
    }
    .vm-dir-tt-row:hover { color: inherit; }
    .vm-dir-app .vm-dir-tt-row:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    .vm-dir-tt-gut {
        width: 100px;
        flex-shrink: 0;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 12px 14px;
        background: #f8fafc;
        border-right: 1px solid #f0f2f4;
    }
    .vm-dir-tt-gut.is-today { background: #f4fbf9; border-right-color: #e3f4f0; }
    .vm-dir-tt-day {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .06em;
        line-height: 1.2;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
    }
    .vm-dir-tt-at {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.2;
        color: #0f172a;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .vm-dir-tt-gut.is-today .vm-dir-tt-day,
    .vm-dir-tt-gut.is-today .vm-dir-tt-at { color: #0f6d5c; }
    .vm-dir-tt-gut.is-back .vm-dir-tt-at { color: #475569; }

    .vm-dir-tt-body {
        display: block;
        flex: 1;
        min-width: 0;
        padding: 12px 12px 12px 16px;
    }
    .vm-dir-tt .vm-dir-tt-name {
        display: block;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.3;
        color: #0f172a;
        text-wrap: pretty;
    }
    .vm-dir-tt .vm-dir-tt-place {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.35;
        color: #64748b;
    }
    .vm-dir-tt-note {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        color: #475569;
    }
    .vm-dir-tt-chev {
        flex-shrink: 0;
        margin-right: 16px;
        font-size: 13px;
        color: #64748b;
    }

    /* 48c's door under its row: a sibling link, never inside the row. */
    .vm-dt-ledger.vm-dir-tt > .vm-dir-tt-lab { border-top: 0; }
    .vm-dir-tt-lab { display: flex; align-items: stretch; }
    .vm-dir-tt-lab .vm-dir-link {
        flex: 1;
        min-width: 0;
        min-height: 44px;
        margin: -4px 0 0;
        padding: 0 16px 8px;
        gap: 8px;
        font-size: 13px;
        color: #334155;
    }
    .vm-dir-tt-lab .vm-dir-link-t strong { white-space: nowrap; }
}


/* ====================================================================
   6. STATES (26-d-states)
   The Allow line heads the list across both columns (14.5 / 600, 66
   tall, the tint pill). 26c is one lifted card in the main column, R14
   and a failed read one bordered line there. While the first read is in
   flight: a quiet skeleton in both columns (the chips wait in the band).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-dir-body .vm-dir-line {
        min-height: 66px;
        padding: 10px 10px 10px 18px;
        gap: 12px;
        border-color: #e2e8f0;
    }
    .vm-dir-body .vm-dir-allow { padding-left: 16px; }
    .vm-dir-body .vm-dir-line > i { font-size: 14px; color: #0f6d5c; }
    .vm-dir-body .vm-dir-line-t {
        font-size: 14.5px;
        line-height: 1.45;
        color: #0f172a;
        text-wrap: pretty;
    }
    .vm-dir-body .vm-dir-line-go {
        padding: 0 18px;
        font-size: 13.5px;
        white-space: nowrap;
    }

    .vm-dir-list .vm-dir-none {
        padding: 24px;
        gap: 16px;
    }
    .vm-dir-list .vm-dir-none-t { font-size: 22px; letter-spacing: -.4px; }
    .vm-dir-list .vm-dir-none-inset { padding: 12px; }
    .vm-dir-list .vm-dir-note { padding: 12px 14px; gap: 10px; }
    .vm-dir-list .vm-dir-note i { font-size: 13px; }
    .vm-dir-list .vm-dir-note-t { font-size: 14.5px; line-height: 1.45; }
    .vm-dir-list .vm-dir-all {
        align-self: flex-start;
        width: auto;
        padding: 0 26px;
    }

    .vm-dir-skel { gap: 16px; }
    .vm-dir-skel .vm-dir-skel-chips { display: none; }
    .vm-dir-skel .vm-dir-skel-group { height: 440px; background: #f1f5f9; }
    .vm-dir-skel .vm-dir-skel-group--short { height: 300px; }
}

@media (min-width: 1120px) {
    /* A failed read is one line in the main column. */
    .vm-dir-body > .vm-dir-fail { width: calc(100% - 388px); }
    .vm-dir-skel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        align-items: start;
    }
}


/* ====================================================================
   7. THE NARROW WINDOW (901-1119, 26-d-narrow)
   The band `1fr auto`, 16 between: the city chip and the chips to the
   right. The list one column in the phone's order (section 2).
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    .vm-dir-band {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
    }
    .vm-dir-band .vm-dir-orient { justify-content: flex-end; }
    .vm-dir-band .vm-dir-chips { justify-content: flex-end; }
}


/* ====================================================================
   8. HOVER (pointer devices only; no lift under reduced motion)
   ==================================================================== */
@media (min-width: 901px) {
    @media (hover: hover) {
        .vm-dir-band .vm-dir-city:hover,
        .vm-dir-band .vm-dir-chip:not(.is-on):hover { background: rgba(255, 255, 255, .2); color: #fff; }
        .vm-dir-tt-row:hover { background: #f8fafc; }
        .vm-dir-list .vm-dir-more:hover { background: #e2e8f0; }
    }
}