/* ====================================================================
   SCREEN 30 — ALL STRUCTURES, the desktop layer (desktop slice E3,
   2026-10-09). exams/structures.html only, linked after desktop/shared.css;
   every rule is scoped to #vm-exams-structures.

   Frames: 30-d (Friday 09:40, Douala, 23 structures, a position known),
   30-d-found (a search held), 30-d-city (30e as a 480 dialog),
   30-d-narrow (1000) and 30-d-states, in docs/design/pharmacy/screens/30/
   desktop/frame.html, the design pass approved and folded (Oct 9); the
   builder's sheet screens/30/desktop/FACTS.md; the records screens/
   desktop-26-34/records/Screen 30 - desktop work order.md and design
   pass.md (the pass wins where it changed a call). Brief:
   briefs/2026-10-09_desktop-slice-E3.md.

   Tiers: >=901 the layer: the glass header over the band (js/exams/
   desktop.js), the band a grid in the 1200 column (the label and the
   headline | the city chip; the field | "Find an exam"), folded to its
   field row while a search is held (.has-q); the kind chips on one row
   at the list's head with the search count at its end; one column of
   groups in the code's order: 26-d's side cards (the cover 260 at the
   left, the kind tile on #0f6d5c, still), Closed now as the timetable
   (every row drawn), No hours published yet as ledger rows with a round
   Message (screen 51, the Call's slot); 30e a 480 dialog · >=1120 the list in two lanes, main 764 | the
   340 column, not sticky: Taking samples now and the open group in main,
   Closed now and No hours published yet in the column (js/exams/
   structures.js writes the lanes; with no lit group drawn every group
   takes main). No device word on this page; no new string.

   From shared.css since E10 (the consolidation): the band's customer
   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), the ledger's bordered container and hairlines (§14's
   .vm-dt-ledger, written by structures.js), 30e's 480 (§3's
   .vm-sheet--dt-480, set by structures.js from 901: the phone's markup
   states no figure). Still here: the 40 headline (a count, not §13's
   headline), the section heads (the code's own head row), the 480
   dialog's radius 20 with the default shadow (not §3's .vm-dt-dialog).

   Sections, in the frame's order:
     1. The band (and its fold while a search is held)
     2. The body: the chips row and the count, the lines, the skeleton
     3. The groups: heads, doors, the list's end
     4. The side card
     5. The doors (Message | Directions, See exams)
     6. Closed now: the timetable
     7. No hours published yet: the rows and the round Message
     8. 30d, nothing matches
     9. 30e, the 480 dialog
    10. Hover (a pointer that can hover)
    11. The two lanes (>=1120)
    12. Closed now at main width (>=1120)
    13. No hours published yet, two rows side by side (>=1120)
    14. The map card, "On the map" (>=1120)

   The balance (desktop slice E30, 2026-10-10; screens/30/desktop/
   FACTS-balance.md, pick 2a, frames 30-d-bal-a and 30-d-bal-a-eve in
   frame-balance.html; brief briefs/2026-10-10_screen-50-contract.md)
   supersedes 30-d's open-in-main | closed-in-column split from 1120px:
   main holds every group (§11-13), the column one sticky card, the map
   (§14, js/exams/structures-map.js, Leaflet on demand). 901-1119 and the
   phone are as they were.
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE BAND (30-d, 30-d-narrow): the material lit from the top
       left under the glass header (65), 20 more; a grid: "Structures"
       (13) over "15 open now" (40) + "of 23 in Douala" (15) | the city
       chip; then the field (56, white, lifted) | "Find an exam" (glass,
       56). Below 1120 the right column is as wide as its content.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        align-items: end;
        overflow: visible;
        padding: 85px max(24px, calc((100% - 1152px) / 2)) 32px;
        border: 0;
    }
    /* The city chip and "Find an exam" join the band's grid. */
    #vm-exams-structures .vm-ex-dir-orient { display: contents; }

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

    #vm-exams-structures .vm-ex-dir-city {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: end;
        justify-self: end;
        max-width: 100%;
        height: 44px;
        padding: 0 14px;
        gap: 8px;
        border-radius: 13px;
        font-size: 13.5px;
    }
    #vm-exams-structures .vm-ex-dir-city .vm-ex-dir-city-pin { font-size: 12px; color: #8ff08b; }
    #vm-exams-structures .vm-ex-dir-city .fa-angle-down { margin-left: 2px; font-size: 11px; }

    #vm-exams-structures .vm-ex-dir-band .vm-ex-dir-find {
        grid-column: 1;
        grid-row: 3;
        height: 56px;
        margin-top: 20px;
        padding: 0 20px;
        gap: 12px;
        border-radius: 16px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 12px 28px rgba(2, 26, 21, .3);
    }
    #vm-exams-structures .vm-ex-dir-band .vm-ex-dir-find:has(.vm-ex-dir-qx:not([hidden])) { padding-right: 6px; }
    #vm-exams-structures .vm-ex-dir-band .vm-ex-dir-find > i { font-size: 15px; color: #0f6d5c; }
    #vm-exams-structures .vm-ex-dir-q { font-size: 15px; font-weight: 500; color: #0f172a; }
    #vm-exams-structures .vm-ex-dir-q::placeholder { font-size: 15px; color: #64748b; }
    #vm-exams-structures .vm-ex-dir-qx {
        margin-right: 0;
        border-radius: 12px;
        color: #475569;
    }

    #vm-exams-structures .vm-ex-dir-findexam {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        height: 56px;
        margin: 20px 0 0;
        padding: 0 18px;
        gap: 10px;
        border-radius: 16px;
        font-size: 14px;
    }
    #vm-exams-structures .vm-ex-dir-findexam i { font-size: 14px; color: #8ff08b; }

    /* While the read is in flight: the headline's and the field's places. */
    #vm-exams-structures .vm-ex-dir-bskel { grid-column: 1; grid-row: 2 / 4; }
    #vm-exams-structures .vm-ex-dir-bskel-head { margin-top: 2px; width: 320px; max-width: 100%; height: 44px; border-radius: 10px; }
    #vm-exams-structures .vm-ex-dir-bskel-find { margin-top: 20px; height: 56px; border-radius: 16px; }

    /* -- A held search folds the first row (30-d-found, call 1): the
       label is read, not drawn (shared §13); the headline and the city
       chip go; the field row is the band, 18 under the header and 24 over
       its foot. */
    #vm-exams-structures .vm-ex-dir-band.has-q { padding-top: 83px; padding-bottom: 24px; }
    #vm-exams-structures .vm-ex-dir-band.has-q .vm-ex-dir-head,
    #vm-exams-structures .vm-ex-dir-band.has-q .vm-ex-dir-city { display: none; }
    #vm-exams-structures .vm-ex-dir-band.has-q .vm-ex-dir-find,
    #vm-exams-structures .vm-ex-dir-band.has-q .vm-ex-dir-findexam { margin-top: 0; }

    /* -- 41f(1): the one white line under the band, in the column. */
    #vm-exams-structures .vm-ex-cityline {
        align-items: center;
        gap: 10px;
        padding: 12px max(24px, calc((100% - 1152px) / 2));
        border-bottom: 1px solid #e2e8f0;
    }
    #vm-exams-structures .vm-ex-cityline i { margin-top: 0; color: #0f6d5c; }
    #vm-exams-structures .vm-ex-cityline-t { font-size: 14px; color: #0f172a; }

    /* ================================================================
       2. THE BODY (30-d): the 1200 column, 28 under the band. The kind
       chips wrap on one row (seven sit in 952), no bleed; the search
       count stands at the end of their row (the pass's change 2: the
       list rises 48 while a search is held) and wraps under when the row
       is full. Everything else takes its own row, the Allow line first.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-body {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        align-content: flex-start;
        gap: 28px 16px;
        padding: 28px max(24px, calc((100% - 1152px) / 2)) 64px;
    }
    #vm-exams-structures .vm-ex-dir-body > * { flex: 0 0 100%; min-width: 0; order: 2; }
    #vm-exams-structures .vm-ex-dir-body > .vm-ex-dir-chips { flex: 1 1 auto; order: 0; }
    #vm-exams-structures .vm-ex-dir-body > .vm-ex-dir-found { flex: 0 0 auto; order: 1; }

    #vm-exams-structures .vm-ex-dir-chips {
        flex-wrap: wrap;
        gap: 8px;
        margin-right: 0;
        padding-bottom: 0;
        overflow: visible;
    }
    #vm-exams-structures .vm-ex-dir-chip {
        background: #f1f5f9;
        color: #334155;
        font-size: 13.5px;
    }
    #vm-exams-structures .vm-ex-dir-chip[aria-pressed="true"] { background: #e3f4f0; color: #0f6d5c; }
    #vm-exams-structures .vm-ex-dir-chip:focus-visible { outline-offset: 2px; }

    #vm-exams-structures .vm-ex-dir-found {
        padding: 0;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        white-space: nowrap;
    }

    /* -- The lines: 30b's Allow (and its two other sentences), the
       failed read, the empty city (30-d-states). */
    #vm-exams-structures .vm-ex-dir-line {
        min-height: 66px;
        padding: 10px 10px 10px 16px;
        gap: 12px;
        border-color: #e2e8f0;
        border-radius: 14px;
    }
    #vm-exams-structures .vm-ex-dir-fail,
    #vm-exams-structures .vm-ex-dir-none { padding-left: 18px; }
    #vm-exams-structures .vm-ex-dir-line > i { font-size: 14px; color: #0f6d5c; }
    #vm-exams-structures .vm-ex-dir-line-t {
        font-size: 14.5px;
        color: #0f172a;
        line-height: 1.45;
        text-wrap: pretty;
    }
    #vm-exams-structures .vm-ex-dir-line-go {
        padding: 0 18px;
        font-size: 13.5px;
        white-space: nowrap;
    }

    /* -- While the first read is in flight: the chips' bar and two card
       blocks, no words (30-d-states). */
    #vm-exams-structures .vm-ex-dir-skel { gap: 16px; }
    #vm-exams-structures .vm-ex-dir-skel span { background: #f1f5f9; }
    #vm-exams-structures .vm-ex-dir-skel-chips { width: 620px; max-width: 100%; height: 44px; margin-bottom: 12px; border-radius: 12px; }
    #vm-exams-structures .vm-ex-dir-skel-group,
    #vm-exams-structures .vm-ex-dir-skel-group--short { height: 212px; border-radius: 18px; }

    /* ================================================================
       3. THE GROUPS (30-d): a dot, the head at 21 on a 32 line, the count
       (unlit groups) or "Nearest first" at the right; 16 between the
       head and the cards; 36 between groups; the door a grey 48 bar.
       "All 23 in Douala" between two hairlines under every group.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-list { gap: 36px; margin-top: 0; }
    #vm-exams-structures .vm-ex-dir-list:empty { display: none; }
    #vm-exams-structures .vm-ex-dir-group { gap: 16px; }
    #vm-exams-structures .vm-ex-dir-ghead {
        min-height: 32px;
        gap: 10px;
        padding: 0;
    }
    #vm-exams-structures .vm-ex-dir-gdot { background: #cbd5e1; }
    #vm-exams-structures .vm-ex-dir-gdot.is-lit { background: #16a085; }
    #vm-exams-structures .vm-ex-dir-gname,
    #vm-exams-structures .vm-ex-dir-group--samples .vm-ex-dir-gname {
        font-size: 21px;
        letter-spacing: -.4px;
        line-height: 32px;
        color: #0f172a;
    }
    #vm-exams-structures .vm-ex-dir-gcount { font-size: 14px; color: #64748b; }
    #vm-exams-structures .vm-ex-dir-gnote { font-size: 13.5px; color: #64748b; }

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

    #vm-exams-structures .vm-ex-dir-end {
        margin-top: 4px;
        padding: 0;
        gap: 14px;
        font-size: 13px;
        color: #64748b;
    }
    #vm-exams-structures .vm-ex-dir-end-rule { background: #e2e8f0; }

    /* ================================================================
       4. THE SIDE CARD (26-d's, 30-d): the cover 260 at the left (the
       photo, or the ground with the two letters and the kind's glyph),
       the status pill on it; the body 20 22 18: the kind tile 48 on
       #0f6d5c beside the name (20) over the meta (13), the fact rows,
       the doors over a hairline at the foot. 212 tall with a fact row,
       168 without (the pass's change 1). Still: no lift.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-card {
        display: flex;
        min-height: 212px;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-structures .vm-ex-dir-card:not(:has(.vm-ex-dir-facts)) { min-height: 168px; }

    #vm-exams-structures .vm-ex-dir-cover {
        width: 260px;
        flex-shrink: 0;
        aspect-ratio: auto;
        background-color: #f1f5f9;
    }
    #vm-exams-structures .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%), #0f6d5c;
    }
    #vm-exams-structures .vm-ex-dir-photo {
        position: absolute;
        inset: 0;
    }
    #vm-exams-structures .vm-ex-dir-scrim { display: none; }
    #vm-exams-structures .vm-ex-dir-ghost {
        right: -14px;
        bottom: -18px;
        font-size: 120px;
    }
    #vm-exams-structures .vm-ex-dir-pill {
        top: 14px;
        left: 14px;
        max-width: calc(100% - 28px);
    }
    #vm-exams-structures .vm-ex-dir-pill-vial { font-size: 11px; }

    #vm-exams-structures .vm-ex-dir-cbody {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 20px 22px 18px;
    }
    #vm-exams-structures .vm-ex-dir-kind {
        left: 22px;
        top: 20px;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 13px;
        background: transparent;
    }
    #vm-exams-structures .vm-ex-dir-kind-in {
        border-radius: 13px;
        background: #0f6d5c;
        color: #fff;
        font-size: 18px;
    }
    #vm-exams-structures .vm-ex-dir-id {
        min-height: 48px;
        padding-left: 62px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #vm-exams-structures .vm-ex-dir-name {
        font-size: 20px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }
    #vm-exams-structures .vm-ex-dir-meta {
        margin-top: 3px;
        font-size: 13px;
        color: #64748b;
    }
    #vm-exams-structures .vm-ex-dir-sep { color: #cbd5e1; }

    #vm-exams-structures .vm-ex-dir-cbody .vm-ex-dir-facts { margin-top: 0; gap: 8px; }
    #vm-exams-structures .vm-ex-dir-fact { gap: 10px; font-size: 13.5px; }
    #vm-exams-structures .vm-ex-dir-fact-ic { color: #16a085; }
    #vm-exams-structures .vm-ex-dir-fact-t { color: #334155; }
    #vm-exams-structures .vm-ex-dir-fact--quiet .vm-ex-dir-fact-ic { color: #64748b; }
    #vm-exams-structures .vm-ex-dir-fact--quiet .vm-ex-dir-fact-t { color: #475569; font-weight: 600; }
    #vm-exams-structures .vm-ex-dir-link { font-size: 13.5px; color: #334155; }
    #vm-exams-structures .vm-ex-dir-link .vm-ex-dir-link-ic { color: #16a085; }

    /* ================================================================
       5. THE DOORS (30-d, 30-d-states): over a hairline at the card's
       foot. Message | Directions, one soft pill (screen 51: the Message
       half is the mint card door with its own edge, app.css), and the
       solid "See exams" at the right; no exams listed: the Message in
       the solid's slot and Directions beside it, at the left. 12's read
       without a place: the half says so in words. (The numbers after the
       tap went with the Call.)
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-cbody .vm-ex-dir-acts {
        align-items: center;
        gap: 8px;
        margin-top: auto;
        padding-top: 14px;
        border-top-color: #f0f2f4;
    }
    #vm-exams-structures .vm-ex-dir-act--half.vm-ex-dir-act--ask { padding: 0 14px 0 16px; }
    #vm-exams-structures .vm-ex-dir-act--half[data-act="dir"] { padding: 0 16px 0 14px; }
    #vm-exams-structures .vm-ex-dir-act--half[data-act="dir"]:only-child { padding: 0 16px; }
    #vm-exams-structures .vm-ex-dir-act[data-act="dir"] i { font-size: 12px; }
    #vm-exams-structures .vm-ex-dir-act--solid {
        flex: 0 0 auto;
        padding: 0 24px;
    }
    #vm-exams-structures .vm-ex-dir-act--quiet { padding: 0 18px; }
    #vm-exams-structures .vm-ex-dir-see {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0 22px;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .26);
    }
    #vm-exams-structures .vm-ex-dir-nil {
        font-size: 12.5px;
        color: #475569;
    }
    #vm-exams-structures .vm-ex-dir-split .vm-ex-dir-nil[data-nil="dir"] { padding: 0 16px 0 14px; }
    #vm-exams-structures .vm-ex-dir-nil--solid { flex: 0 0 auto; padding: 0 24px; }
    #vm-exams-structures .vm-ex-dir-nil--quiet { padding: 0 18px; }

    /* ================================================================
       6. CLOSED NOW: THE TIMETABLE (26-d's approved timetable, 30-d):
       §14's bordered ledger (radius 18, hairlines between rows). A row
       (68 at least) is the door to 12: the tile 100 (the day at 10.5 in
       capitals over the clock at 18; mint with teal ink when it opens
       today, grey otherwise, the clock in the grey ink for a close) | the
       name (15) over the meta (13), and "Closed for now", the code's
       line where the tile is empty, "No exams listed yet" | the chevron.
       48c's pharmacy row follows the door, level with the name.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-ledger {
        display: flex;
        flex-direction: column;
    }

    #vm-exams-structures .vm-ex-dir-trow { display: flex; flex-direction: column; min-width: 0; }
    #vm-exams-structures .vm-ex-dir-tdoor {
        min-height: 68px;
        display: flex;
        align-items: center;
        color: inherit;
        line-height: normal;
    }
    #vm-exams-structures .vm-ex-dir-tdoor:focus-visible,
    #vm-exams-structures .vm-ex-dir-hdoor:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    #vm-exams-structures .vm-ex-dir-ttile {
        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-exams-structures .vm-ex-dir-ttile-d {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        line-height: 1.2;
        color: #64748b;
        white-space: nowrap;
    }
    #vm-exams-structures .vm-ex-dir-ttile-t {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.2;
        color: #0f172a;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-structures .vm-ex-dir-ttile.is-today { background: #f4fbf9; border-right-color: #e3f4f0; }
    #vm-exams-structures .vm-ex-dir-ttile.is-today .vm-ex-dir-ttile-d,
    #vm-exams-structures .vm-ex-dir-ttile.is-today .vm-ex-dir-ttile-t { color: #0f6d5c; }
    #vm-exams-structures .vm-ex-dir-ttile.is-quiet .vm-ex-dir-ttile-t { color: #475569; }

    #vm-exams-structures .vm-ex-dir-rmain { display: block; flex: 1 1 auto; min-width: 0; }
    #vm-exams-structures .vm-ex-dir-trow .vm-ex-dir-rmain { padding: 12px 12px 12px 16px; }
    #vm-exams-structures .vm-ex-dir-rname {
        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;
        overflow-wrap: anywhere;
    }
    #vm-exams-structures .vm-ex-dir-rmeta {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        line-height: 1.35;
        color: #64748b;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }
    #vm-exams-structures .vm-ex-dir-rbit { white-space: nowrap; }
    #vm-exams-structures .vm-ex-dir-rnote {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.35;
        color: #475569;
    }
    #vm-exams-structures .vm-ex-dir-rchev {
        flex-shrink: 0;
        margin-right: 16px;
        font-size: 13px;
        color: #64748b;
    }
    /* 48c in a timetable row: under the door, level with the name. */
    #vm-exams-structures .vm-ex-dir-trow > .vm-ex-dir-link {
        margin: -10px 0 2px;
        padding: 0 16px 0 116px;
    }
    #vm-exams-structures .vm-ex-dir-trow.is-untimed > .vm-ex-dir-link { padding-left: 16px; }

    /* ================================================================
       7. NO HOURS PUBLISHED YET: THE ROWS (30-d; the lead's call: rows
       with a round door, not cards). The same container; a row (76 at
       least, 12 14 12 16): the kind tile 40 on #0f6d5c | the door to 12
       (the name, the meta, the hollow dot and the line at 12.5, "No
       exams listed yet"), then 48c's row | the round Message 44 (screen
       51, the Call's slot: the card door's mint, app.css). No Directions.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-hrow {
        min-height: 76px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px 12px 16px;
    }
    #vm-exams-structures .vm-ex-dir-htile {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #0f6d5c;
        color: #fff;
        font-size: 16px;
    }
    #vm-exams-structures .vm-ex-dir-hdoor {
        display: block;
        color: inherit;
        line-height: normal;
        border-radius: 8px;
    }
    #vm-exams-structures .vm-ex-dir-hdoor:focus-visible { outline-offset: 2px; }
    #vm-exams-structures .vm-ex-dir-hline {
        margin-top: 3px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.35;
        color: #475569;
    }
    #vm-exams-structures .vm-ex-dir-hdot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        box-sizing: border-box;
        border: 1.5px solid #64748b;
        border-radius: 999px;
    }
    #vm-exams-structures .vm-ex-dir-hrow .vm-ex-dir-rnote { font-size: 12.5px; }
    #vm-exams-structures .vm-ex-dir-hrow .vm-ex-dir-link { margin: -4px 0 -10px; }
    #vm-exams-structures .vm-ex-dir-act--round {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        justify-content: center;
        gap: 0;
        padding: 0;
        border-radius: 999px;
    }
    #vm-exams-structures .vm-ex-dir-act--round i { font-size: 14px; }

    /* ================================================================
       8. 30d, NOTHING MATCHES (30-d-states): the code's lifted card, 24
       in; the sentence at 22; the inset's line at 14.5; "Clear the
       search" a 48 pill at its own width.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-nomatch {
        padding: 24px;
        gap: 16px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-structures .vm-ex-dir-nomatch-t {
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.3;
    }
    #vm-exams-structures .vm-ex-dir-nomatch-inset { padding: 12px; }
    #vm-exams-structures .vm-ex-dir-note { gap: 10px; padding: 12px 14px; }
    #vm-exams-structures .vm-ex-dir-note i { font-size: 13px; }
    #vm-exams-structures .vm-ex-dir-note-t { font-size: 14.5px; line-height: 1.45; }
    #vm-exams-structures .vm-ex-dir-clear {
        align-self: flex-start;
        width: auto;
        padding: 0 26px;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .26);
    }

    /* ================================================================
       9. 30e, CHOOSE A CITY (30-d-city): the phone's sheet as a 480
       dialog (shared §3: centred, no grab bar), radius 20 on the .55
       dim; the head 20 14 14 24, the title at 20 over its line at 13,
       Cancel a 44 pill; the rows 56, 12 in. The width is §3's --dt-480
       modifier, which structures.js sets from 901 (the phone spec holds
       the page's markup to no figure at all).
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-dim { background: rgba(15, 23, 42, .55); }
    #vm-exams-structures .vm-sheet.vm-ex-dir-sheet.is-open {
        gap: 0;
        padding: 0;
        border-radius: 20px;
    }
    #vm-exams-structures .vm-ex-dir-sheet .vm-ex-dir-grab { display: none; }
    #vm-exams-structures .vm-ex-dir-sheet-head {
        align-items: flex-start;
        gap: 12px;
        padding: 20px 14px 14px 24px;
    }
    #vm-exams-structures .vm-ex-dir-sheet-title { font-size: 20px; }
    #vm-exams-structures .vm-ex-dir-sheet-sub { margin-top: 4px; font-size: 13px; color: #64748b; }
    #vm-exams-structures .vm-ex-dir-cancel {
        padding: 0 14px;
        border-radius: 999px;
        font-size: 14px;
    }
    #vm-exams-structures .vm-ex-dir-cities { padding: 0 12px 14px; }
    #vm-exams-structures .vm-ex-dir-citycount { color: #475569; }
    #vm-exams-structures .vm-ex-dir-hair { background: #f0f2f4; }
    #vm-exams-structures .vm-ex-dir-cityfail { padding: 6px 2px 2px 12px; }
    #vm-exams-structures .vm-ex-dir-cityfail-t { font-size: 14px; }

    /* ================================================================
       10. HOVER (the frames' style-hover), a pointer that can hover only.
       The cards stay still (26-d's: no lift).
       ================================================================ */
    @media (hover: hover) {
        #vm-exams-structures .vm-ex-dir-city:hover,
        #vm-exams-structures .vm-ex-dir-findexam:hover { background: rgba(255, 255, 255, .24); color: #fff; }
        #vm-exams-structures .vm-ex-dir-qx:hover { background: #f1f5f9; color: #0f172a; }
        #vm-exams-structures .vm-ex-dir-chip[aria-pressed="false"]:hover { background: #e2e8f0; }
        #vm-exams-structures .vm-ex-dir-line-go:not(:disabled):hover { background: #d3ede6; }
        #vm-exams-structures .vm-ex-dir-more:hover { background: #e2e8f0; }
        #vm-exams-structures .vm-ex-dir-act--half[data-act="dir"]:hover { color: #0c5b4c; }
        #vm-exams-structures .vm-ex-dir-act--ask:hover { background: #dff0ea; color: #0f6d5c; }
        #vm-exams-structures .vm-ex-dir-see:hover,
        #vm-exams-structures .vm-ex-dir-clear:hover { background: #0c5b4c; color: #fff; }
        #vm-exams-structures .vm-ex-dir-act--quiet:hover { background: #d3ede6; }
        #vm-exams-structures .vm-ex-dir-link:hover { color: #0f6d5c; }
        #vm-exams-structures .vm-ex-dir-tdoor:hover { background: #f8fafc; color: inherit; }
        #vm-exams-structures .vm-ex-dir-hdoor:hover .vm-ex-dir-rname { color: #0f6d5c; }
        #vm-exams-structures .vm-ex-dir-cancel:hover { background: #e3f4f0; }
        #vm-exams-structures .vm-ex-dir-cityrow:not(.is-on):hover { background: #f8fafc; }
    }
}

@media (min-width: 1120px) {

    /* -- The band: the right column is the 340 column; the chip at its
       head, "Find an exam" across it. */
    #vm-exams-structures .vm-ex-dir-band {
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
    }
    #vm-exams-structures .vm-ex-dir-city { justify-self: start; }
    #vm-exams-structures .vm-ex-dir-findexam { justify-self: stretch; width: 100%; }
    #vm-exams-structures .vm-ex-dir-findexam span { flex: 1; min-width: 0; }

    /* ================================================================
       11. THE TWO LANES (30-d-bal-a, E30): main 764 = every group in the
       code's order, 36 apart | the 340 column, 48 between, as tall as the
       list so its card can stick; "All 23 in Douala" under both, 40
       below. Anything else the list holds (30d's card) stands in main,
       the column left empty; a city with no place to pin draws no column.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 40px;
        align-items: start;
    }
    #vm-exams-structures .vm-ex-dir-list > * { grid-column: 1; min-width: 0; }
    #vm-exams-structures .vm-ex-dir-lane {
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 36px;
        min-width: 0;
    }
    #vm-exams-structures .vm-ex-dir-list > .vm-ex-dir-lane--side { grid-column: 2; align-self: stretch; }
    #vm-exams-structures .vm-ex-dir-list > .vm-ex-dir-end { grid-column: 1 / -1; margin-top: 0; }

    /* ================================================================
       12. CLOSED NOW AT MAIN WIDTH (30-d-bal-a-g9): §14's bordered ledger;
       a row (60 at least) is the door to 12: the time gutter 100 (§6's
       tile; blank when the code has no opening, so the names keep one
       column) | the body, a grid 1fr 210 64, 14 apart, 10 12 10 18: the
       name (15) with its note under it | kind · area (13) | the km (13,
       right) | the chevron (13, 16 from the edge). Eight, then "Show N
       more closed". 48c's row follows the door, level with the name.
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-trow--wide .vm-ex-dir-tdoor { min-height: 60px; }
    #vm-exams-structures .vm-ex-dir-ttile.is-blank { padding: 0; }
    #vm-exams-structures .vm-ex-dir-tbody {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 210px 64px;
        gap: 14px;
        align-items: center;
        padding: 10px 12px 10px 18px;
    }
    #vm-exams-structures .vm-ex-dir-tid { min-width: 0; }
    #vm-exams-structures .vm-ex-dir-tplace,
    #vm-exams-structures .vm-ex-dir-tkm {
        min-width: 0;
        font-size: 13px;
        line-height: 1.35;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-structures .vm-ex-dir-tkm { text-align: right; white-space: nowrap; }
    #vm-exams-structures .vm-ex-dir-trow--wide > .vm-ex-dir-link,
    #vm-exams-structures .vm-ex-dir-trow--wide.is-untimed > .vm-ex-dir-link {
        margin: -8px 0 2px;
        padding: 0 16px 0 118px;
    }

    /* ================================================================
       13. NO HOURS PUBLISHED YET, TWO ROWS SIDE BY SIDE (30-d-bal-a-g10):
       the same container as a grid of two equal cells; the second of a
       pair stands behind a hairline, a third starts a new pair under one.
       The row is §7's (76, the tile 40, the round Call).
       ================================================================ */
    #vm-exams-structures .vm-ex-dir-ledger--nohours {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #vm-exams-structures .vm-ex-dir-ledger--nohours > * + * { border-top: 0; }
    #vm-exams-structures .vm-ex-dir-ledger--nohours > :nth-child(n + 3) { border-top: 1px solid #f0f2f4; }
    #vm-exams-structures .vm-ex-dir-ledger--nohours > :nth-child(2n) { border-left: 1px solid #f0f2f4; }

    /* ================================================================
       14. THE MAP CARD, "ON THE MAP" (30-d-bal-a, 30-d-bal-a-eve): sticky
       80 from the top, white, radius 18, the house shadow. The head 16 18
       14: the title (Space Grotesk 17) | the count (13, right). The map
       580 on #eef1f5 between two hairlines, its tiles quietened so the
       pins lead; + and − top right (44 each, the map component's size),
       the attribution bottom right. The legend 12 18 14 under it. Pins
       (a 44 link round each dot): taking samples 22 teal with a vial and
       a ring, open 18, closed 14 grey, no hours 14 hollow; a named pin's
       name on white beside it; the reader 16 blue with its halo.
       ================================================================ */
    #vm-exams-structures .vm-ex-map {
        position: sticky;
        top: 80px;
        overflow: hidden;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-exams-structures .vm-ex-map-head {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 16px 18px 14px;
    }
    #vm-exams-structures .vm-ex-map-title {
        margin: 0;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.3;
        color: #0f172a;
    }
    #vm-exams-structures .vm-ex-map-count {
        margin-left: auto;
        font-size: 13px;
        font-weight: 600;
        color: #64748b;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    #vm-exams-structures .vm-ex-map-frame {
        position: relative;
        height: 580px;
        overflow: hidden;
        background: #eef1f5;
        border-top: 1px solid #f0f2f4;
        border-bottom: 1px solid #f0f2f4;
    }
    /* Its own stacking context: Leaflet's panes (z 400-700) stay under the
       controls and under the page's header. */
    #vm-exams-structures .vm-ex-map-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        background: #eef1f5;
        font: inherit;
    }
    #vm-exams-structures .vm-ex-map-canvas .leaflet-tile-pane { filter: saturate(.35); }

    #vm-exams-structures .vm-ex-map-zoom {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(2, 12, 27, .16);
    }
    #vm-exams-structures .vm-ex-map-ctrl {
        width: 44px;
        height: 44px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        background: #fff;
        color: #0f172a;
        font-size: 14px;
        cursor: pointer;
    }
    #vm-exams-structures .vm-ex-map-ctrl:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    #vm-exams-structures .vm-ex-map-hair { height: 1px; background: #e2e8f0; }
    #vm-exams-structures .vm-ex-map-osm {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        font-size: 10.5px;
        line-height: 1.5;
        color: #334155;
        text-decoration: none;
    }
    #vm-exams-structures .vm-ex-map-osm-t { padding: 2px 8px; background: rgba(255, 255, 255, .85); }
    #vm-exams-structures .vm-ex-map-osm:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    #vm-exams-structures .vm-ex-map-legend {
        margin: 0;
        padding: 12px 18px 14px;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
    }
    #vm-exams-structures .vm-ex-map-key {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.4;
        color: #475569;
        white-space: nowrap;
    }
    #vm-exams-structures .vm-ex-map-sw {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        box-sizing: border-box;
        border-radius: 999px;
    }
    #vm-exams-structures .vm-ex-map-sw--samples { background: #0f6d5c; }
    #vm-exams-structures .vm-ex-map-sw--open { background: #16a085; }
    #vm-exams-structures .vm-ex-map-sw--closed { width: 10px; height: 10px; background: #94a3b8; }
    #vm-exams-structures .vm-ex-map-sw--nohours { width: 10px; height: 10px; background: #fff; border: 2px solid #64748b; }

    /* -- The pins: Leaflet places each marker box (44, centred on its
       point); the link fills it and takes the pointer the marker pane
       does not. */
    #vm-exams-structures .vm-ex-map-m { position: absolute; left: 0; top: 0; background: none; border: 0; }
    #vm-exams-structures .vm-ex-pin {
        position: relative;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        color: inherit;
        text-decoration: none;
        pointer-events: auto;
    }
    #vm-exams-structures .vm-ex-pin:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -4px; }
    #vm-exams-structures .vm-ex-pin-dot {
        flex-shrink: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
    }
    #vm-exams-structures .vm-ex-pin--samples .vm-ex-pin-dot {
        width: 22px;
        height: 22px;
        background: #0f6d5c;
        border: 2.5px solid #fff;
        box-shadow: 0 0 0 3px rgba(22, 160, 133, .28), 0 3px 8px rgba(2, 12, 27, .3);
        color: #fff;
        font-size: 9px;
    }
    #vm-exams-structures .vm-ex-pin--open .vm-ex-pin-dot {
        width: 18px;
        height: 18px;
        background: #16a085;
        border: 2.5px solid #fff;
        box-shadow: 0 3px 8px rgba(2, 12, 27, .25);
    }
    #vm-exams-structures .vm-ex-pin--closed .vm-ex-pin-dot {
        width: 14px;
        height: 14px;
        background: #94a3b8;
        border: 2px solid #fff;
        box-shadow: 0 2px 5px rgba(2, 12, 27, .2);
    }
    #vm-exams-structures .vm-ex-pin--nohours .vm-ex-pin-dot {
        width: 14px;
        height: 14px;
        background: #fff;
        border: 2px solid #64748b;
    }
    /* A named pin: its name at the dot's right (18 from the dot's left). */
    #vm-exams-structures .vm-ex-pin-tag {
        position: absolute;
        top: 50%;
        left: 29px;
        max-width: 160px;
        overflow: hidden;
        transform: translateY(-50%);
        padding: 3px 8px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(2, 12, 27, .18);
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.3;
        color: #0f172a;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #vm-exams-structures .vm-ex-pin-you {
        display: block;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        background: #2563eb;
        border: 3px solid #fff;
        border-radius: 999px;
        box-shadow: 0 0 0 6px rgba(37, 99, 235, .18);
    }

    @media (hover: hover) {
        #vm-exams-structures .vm-ex-map-ctrl:hover { background: #f8fafc; }
        #vm-exams-structures .vm-ex-map-osm:hover { color: #0f172a; }
        #vm-exams-structures .vm-ex-pin:hover .vm-ex-pin-tag { color: #0f6d5c; }
    }
}