/* ====================================================================
   SCREEN 27 — OPEN YOUR PHARMACY, the desktop layer (desktop slice E7,
   2026-10-09). pharmacy/open-your-pharmacy.html only, linked after
   desktop/shared.css; every rule is scoped to #vm-oyp.

   Frames: 27-d (27a, filled), 27-d-opened (27b), 27-d-narrow (1000),
   27-d-states, in docs/design/pharmacy/screens/27/desktop/frame.html;
   fact sheet screens/27/desktop/FACTS.md; records screens/desktop-26-34/
   records/Screen 27 - desktop work order.md and design pass.md (approved
   and folded, the three calls with it). Brief: briefs/2026-10-09_desktop-
   slice-E7.md. The twin is 23's file (css/exams/desktop/23-list-your-
   structure.css): the same idioms on this hub's classes, never linked.

   Tiers: >=901 the layer (901-1119: one column at 908, the lead card first
   in two halves, the commit and the terms in the foot bar) · >=1120 main |
   the sticky 340 column (the lead card, the commit its foot, the terms
   under the commit).

   Uses desktop/shared.css: section 1 the customer's header, glass over
   27a's band until the pharmacy is open (js/pharmacy/desktop.js); 12 the
   counter's own header after (owner-head.js, filled by open-your-
   pharmacy.js, which hides the customer's); 13 the flow band (27a, under
   the glass: .vm-dt-flow-band--under-glass) and the one-row band (27b: the
   identity read, not drawn); 17 the labelled rows (.vm-dt-labelled, each
   field .vm-dt-labelled-row); 2's owner bar (the commit's 860 column,
   901-1119); 9's state cards and Try again. The pin's dialog is
   css/pharmacy/map-pin.css (every width). open-your-pharmacy.js moves the
   terms under the commit from 901, the lead card and the bar into the
   column from 1120, and on 27b the Add pill into the Products and prices
   row from 901; this file lays them out. Since E10, shared section 21
   (the open flow, 23's and 27's in one place: the page and its column,
   the sections, the controls and their lines, the pin's row, the lead
   card, the commit bar, what the counter needs) and section 13's flow
   band with its line; this file keeps 27's own values.

   Sections, in the frame's order:
     1. The header and the bands
     2. 27a: the body, the sections, the labelled rows, the controls
     3. 27a: where you are (the address rows, the pin)
     4. 27a: how people get their products (the design pass, change 2)
     5. 27a: the lead card and the commit bar
     6. 27b: what your counter needs
     7. States
     8. Hover
     9. The narrow window (901-1119)
    10. The side tier (1120 and up)
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE HEADER AND THE BANDS
       The phone's three-slot bar and its spacer give way to the counter's
       header (27b, already open): shared §2 hides them, since E10.
       ================================================================ */
    #vm-oyp > .vm-dt-ohead:empty { display: none; }

    /* -- 27a: the flow band with its line (shared §13's
       .vm-dt-flow-band--sub, since E10): the glass exit "Home" | the title
       over "Logged in as ..." (kept: the customer's header names no one). */
    #vm-oyp .vm-oyp-top {
        overflow: visible;
        border-top: 0;
        border-bottom: 0;
    }

    /* -- 27b: the one-row band: "Opened. You are on the pharmacy list."
       at 40 over its second line. The name and the area are the header's
       (kept for the reader of the page, the h1, not drawn). */
    #vm-oyp .vm-oyp-band { row-gap: 0; }
    #vm-oyp .vm-oyp-stateblock {
        grid-column: 1;
        gap: 0;
    }

    /* ================================================================
       2. 27a — THE BODY, THE SECTIONS, THE LABELLED ROWS (27-d)
       ================================================================ */
    /* (The page, its sections, the labelled rows' cards and the controls
       52 tall: section 21.) The select, and the shorter facts at their
       own widths. */
    #vm-oyp .vm-oyp-select { padding: 0 40px 0 16px; }
    #vm-oyp #oyp-area,
    #vm-oyp .vm-dt-labelled-row > .vm-oyp-selectbox,
    #vm-oyp #oyp-licence { max-width: 260px; }
    #vm-oyp #oyp-phone,
    #vm-oyp #oyp-whatsapp { max-width: 220px; }

    /* (The lines under a control, the help and what is wrong: section
       21.) */

    /* ================================================================
       3. 27a — WHERE YOU ARE: Street, Area, Town and the landmark are
       rows of their own (the pass refused Street | Area on one row), each
       line of the street and the area under its own row; then the pin row
       across the card: the row is the map's act ("Place it on the map",
       then "Move it on the map"), Remove under its words once there is a
       pin. The map itself is map-pin.css.
       ================================================================ */
    #vm-oyp .vm-oyp-where > .vm-oyp-fields {
        display: flex;
        flex-direction: column;
    }
    #vm-oyp .vm-oyp-addr { display: contents; }
    #vm-oyp .vm-oyp-addr > .vm-oyp-field:first-child { order: 1; }
    #vm-oyp #oyp-err-street { order: 2; }
    #vm-oyp .vm-oyp-addr > .vm-oyp-field + .vm-oyp-field {
        order: 3;
        border-top: 1px solid #f0f2f4;
    }
    #vm-oyp #oyp-err-area { order: 4; }
    #vm-oyp .vm-oyp-where > .vm-oyp-fields > .vm-oyp-field {
        order: 5;
        border-top: 1px solid #f0f2f4;
    }
    /* (A line tucked under its row, and the pin's row: section 21.) Its
       row on white, the tiles mint, the chevrons teal. */
    #vm-oyp .vm-oyp-pin { background: #fff; }
    #vm-oyp .vm-oyp-tile {
        background: #e3f4f0;
        color: #0f6d5c;
    }
    #vm-oyp .vm-oyp-chev { color: #0f6d5c; }
    /* Once there is a pin, Remove sits under the row's words, aligned
       with them (the phone gives it a row of its own, as 23's). */
    #vm-oyp .vm-oyp-pin--placed {
        min-height: 0;
        padding: 0 24px 16px 78px;
        border-top: 0;
    }


    /* ================================================================
       4. 27a — HOW PEOPLE GET THEIR PRODUCTS (call 2 and the design
       pass, change 2: one label grammar). At the counter, Delivered and
       Open 24 h are labelled rows: the label | the check or the switch
       (56 wide, 44 to hit) with its own sentence beside it. Delivery fee
       and How far open under Delivered as labelled rows of their own, on
       a tinted pair; the code's sentence under How far.
       ================================================================ */
    #vm-oyp .vm-oyp-mode {
        display: grid;
        grid-template-columns: 200px auto minmax(0, 1fr);
        grid-template-rows: minmax(44px, auto);
        align-items: center;
        gap: 0;
        min-height: 0;
        padding: 20px 24px;
    }
    #vm-oyp .vm-oyp-mode > .vm-oyp-tile { display: none; }
    #vm-oyp .vm-oyp-mode-main { display: contents; }
    #vm-oyp .vm-oyp-mode-t {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        max-width: 172px;
        padding-top: 14px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        color: #334155;
    }
    #vm-oyp .vm-oyp-mode-s {
        grid-column: 3;
        grid-row: 1;
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        color: #475569;
        text-wrap: pretty;
    }
    #vm-oyp .vm-oyp-toggle {
        grid-column: 2;
        grid-row: 1;
        width: 56px;
        margin-right: 14px;
        justify-content: flex-start;
    }
    #vm-oyp .vm-oyp-toggle[aria-pressed="true"] .vm-oyp-track { background: #0f6d5c; }
    #vm-oyp .vm-oyp-check {
        grid-column: 2;
        grid-row: 1;
        width: 28px;
        height: 28px;
        margin: 0 12px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 12px;
    }
    #vm-oyp .vm-oyp-togsec {
        padding-top: 0;
        border-top: 1px solid #f0f2f4;
    }

    #vm-oyp .vm-oyp-deliv {
        gap: 0;
        background: #f8fafc;
    }
    #vm-oyp .vm-oyp-pair { display: contents; }
    #vm-oyp .vm-oyp-deliv .vm-dt-labelled-row {
        padding: 16px 24px 18px;
        border-top: 1px solid #eef1f5;
    }
    #vm-oyp .vm-oyp-pair > .vm-oyp-field:first-child { order: 1; }
    #vm-oyp #oyp-err-fee { order: 2; }
    #vm-oyp .vm-oyp-pair > .vm-oyp-field + .vm-oyp-field { order: 3; }
    #vm-oyp #oyp-err-radius { order: 4; }
    #vm-oyp .vm-oyp-deliv > [data-deliv-say] {
        order: 5;
        margin-top: -8px;
        padding: 0 24px 18px 224px;
    }
    #vm-oyp .vm-oyp-deliv > .vm-oyp-err--tuck { margin-top: -8px; }
    #vm-oyp .vm-oyp-unit {
        height: 52px;
        padding: 0 16px;
        gap: 8px;
        border-radius: 13px;
    }
    #vm-oyp [data-unit="delivery_fee"] { max-width: 200px; }
    #vm-oyp [data-unit="delivery_radius_km"] { max-width: 160px; }
    #vm-oyp .vm-oyp-unit input {
        font-size: 16px;
        font-weight: 600;
    }
    #vm-oyp .vm-oyp-unit span {
        font-size: 13.5px;
        color: #64748b;
    }

    /* ================================================================
       5. 27a — THE LEAD CARD AND THE COMMIT BAR
       "When people can find you" / "As soon as you open it" at 28 and its
       rows (the hours row hidden while Open 24 h is on: the page's).
       The bar: the commit naming the pharmacy, the terms under it (moved
       in by the page from 901); no sentence above the pill.
       ================================================================ */
    /* (The lead card and the refusal: section 21.) Here the headline
       balances its lines; the terms, under the commit, their link teal. */
    #vm-oyp .vm-oyp-lead-h { text-wrap: balance; }
    #vm-oyp .vm-oyp-bar .vm-oyp-terms {
        margin-top: 0;
        font-size: 13.5px;
        line-height: 1.4;
        color: #475569;
    }
    #vm-oyp .vm-oyp-bar .vm-oyp-terms a { font-weight: 700; color: #0f6d5c; }
    #vm-oyp .vm-oyp-commit {
        background: #0f6d5c;
        line-height: 1.3;
    }

    /* ================================================================
       6. 27b — WHAT YOUR COUNTER NEEDS (27-d-opened): heading + sub, then
       one bordered card of three rows; the Products and prices row ends
       in its act (the solid pill, no chevron); hours and the photograph
       stay doors (to 29). The name-taken line above it, one fact on
       white with its info mark (27-d-states).
       ================================================================ */
    #vm-oyp .vm-oyp-lbody { gap: 24px; }
    #vm-oyp .vm-oyp-lbody > * { max-width: 764px; }
    /* (The heading, its line and the card of door rows: section 21.) */
    #vm-oyp .vm-oyp-row-s strong { color: #0f172a; }
    #vm-oyp .vm-oyp-row--act > .vm-oyp-add { background: #0f6d5c; }

    #vm-oyp .vm-oyp-note[data-listed-as] {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 20px;
        border-color: #e2e8f0;
        border-radius: 16px;
    }
    #vm-oyp .vm-oyp-note[data-listed-as] > i {
        flex-shrink: 0;
        margin-top: 3px;
        font-size: 14px;
        color: #0f6d5c;
    }
    #vm-oyp .vm-oyp-listed {
        font-size: 14.5px;
        line-height: 1.5;
        color: #0f172a;
        text-wrap: pretty;
    }

    /* ================================================================
       7. STATES (27-d-states): a failed read and an account that already
       runs a pharmacy are section 9's state cards (Try again; the store on
       its mint tile, at 16 here, and one door to its shelf, the mint pill);
       the restored draft is one white line with Start again beside it.
       ================================================================ */
    #vm-oyp .vm-oyp-retry {
        width: auto;
        margin-top: 12px;
        align-self: flex-start;
    }
    #vm-oyp .vm-oyp-note[data-already] > i { font-size: 16px; }
    #vm-oyp .vm-oyp-already-t { font-size: 21px; }
    #vm-oyp .vm-oyp-go {
        width: auto;
        height: 44px;
        margin-top: 18px;
        padding: 0 18px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
        box-shadow: none;
    }
    #vm-oyp .vm-oyp-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    #vm-oyp .vm-oyp-draft {
        gap: 16px;
        padding: 10px 10px 10px 20px;
        border-color: #e2e8f0;
        border-radius: 16px;
    }
    #vm-oyp .vm-oyp-draft-t {
        font-size: 14.5px;
        line-height: 1.45;
        color: #0f172a;
    }
    #vm-oyp .vm-oyp-again {
        padding: 0 18px;
        border: 0;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 13.5px;
    }

    /* ================================================================
       8. HOVER (a pointer that can hover)
       ================================================================ */
    @media (hover: hover) {
        #vm-oyp button.vm-oyp-pin:hover,
        #vm-oyp a.vm-oyp-row:hover { background: #f8fafc; }
        #vm-oyp .vm-oyp-commit:not(:disabled):hover { background: #0c5b4c; color: #fff; }
        #vm-oyp .vm-oyp-bar .vm-oyp-terms a:hover { color: #0c5b4c; }
        #vm-oyp .vm-oyp-go:hover,
        #vm-oyp .vm-oyp-again:hover,
        #vm-oyp .vm-oyp-pin-x:hover { box-shadow: inset 0 0 0 1.5px #0f6d5c; color: #0f6d5c; }
    }
}

/* ====================================================================
   9. THE NARROW WINDOW (901-1119): one column at 908 (27-d-narrow). The
   lead card first, in two halves (the headline | its rows); the commit
   bar at the window's foot (the phone's own bar, laid in the 860 column):
   the terms right-aligned beside the pill, a refusal the form cannot
   place above them.
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    /* (Section 21: the halves, the bar's grid.) The rows' half wider. */
    #vm-oyp .vm-oyp-lead-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
    #vm-oyp .vm-oyp-bar .vm-oyp-commit {
        width: auto;
        max-width: 520px;
        padding: 6px 28px;
    }
}

/* ====================================================================
   10. THE SIDE TIER (1120 and up): the form | the sticky column (call 2):
   the lead card, the commit its foot with the terms under it.
   ==================================================================== */
@media (min-width: 1120px) {
    /* (Section 21: the page, the grid, the sticky column and what it
       holds.) Main's blocks flow down column 1 in the page's order (a
       restored draft's line, then the form); the column spans the first
       two rows, so it starts level with whichever comes first. */
    #vm-oyp .vm-oyp-body { row-gap: 0; }
    #vm-oyp .vm-oyp-body > [data-draft] { margin-bottom: 16px; }
    #vm-oyp .vm-oyp-col { grid-row: 1 / span 2; }
    #vm-oyp .vm-oyp-col .vm-oyp-terms { text-align: center; }
}