/* ====================================================================
   SCREEN 20 — ACCOUNT, the desktop layer. pharmacy/account.html only,
   linked after desktop/shared.css. Every rule sits inside a min-width
   query.

   REDESIGNED Oct 10 2026 (slice F20): docs/design/pharmacy/screens/20/
   redo/FACTS.md (frames 3a-d-owner, 3b-d-you, 3b-d) and the build
   contract briefs/2026-10-10_screen-20-redo-contract.md (R1–R12). The
   sheets (section 6) are desktop slice D11's / H4's, unchanged.

   Tiers:
     >=901   the 480 column unwinds (.vm-dt-shell), the customer header is
             glass over the band (desktop.js), the band is 16-d's one row,
             the body one 764 column: 3a = the business, You, What came
             in + Messages, This account; 3b = You, For you,
             Professionals, This account; #pro its own view
     >=1120  3a: main | 340 (gap 48) — the business | You, the For you
             group, This account; 3b: the rail 280 | the pane (gap 40) —
             "Your name and number" or For professionals (#pro).
   account-page.js moves the nodes into .vm-ac-main / .vm-ac-side (3a) or
   .vm-ac-railcol / .vm-ac-pane (3b) from 1120 and back below it, and
   writes the person's variant ([data-card][data-variant]: compact | pane).

   Hooks: #vm-ac[data-layout] (owner | customer | fail | loading | out),
   [data-view] (main | pro), .vm-ac-body.is-cols / .is-rail, the band's
   .is-pro, and the page's own .vm-ac-* markup.

   Sections:
     1. The band (16-d's one row; 3b's 280 | 1fr; the #pro view)
     2. The body: one column, then main | 340 or the rail | the pane
     3. 3a: the business card at desktop size
     4. The person: the compact "You" card and the pane
     5. 3b: the rail
     6. The sheets as 480 dialogs (unchanged)
     7. #pro, For professionals: the pane / the view
     8. States: logged out, the failed read, the skeleton
   ==================================================================== */


/* ====================================================================
   1. THE BAND
   The glass header (65 with its hairline) sits over the band's top, so
   the band's row starts 18 under it: "Account" at 40 on the left, the
   eyebrow "One account for all of Veranda" in mint on the right (3a:
   over the 340 column; 3b from 1120: at the pane's edge, the band's grid
   280 | 1fr). In the #pro view: the back control "Account" over the title
   "For professionals", one column.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ac-band {
        overflow: hidden;
        padding: 83px max(24px, calc((100% - 1152px) / 2)) 34px;
        border: 0;
    }
    /* The phone's light lies in the band's own background here. */
    .vm-ac-band::before { display: none; }
    .vm-ac-band .vm-or-orient {
        height: auto;
        padding-bottom: 6px;
    }
    .vm-ac-band .vm-or-title {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        font-size: 40px;
        letter-spacing: -1px;
        line-height: 1.15;
    }
    .vm-ac-band.is-pro { grid-template-columns: minmax(0, 1fr); padding-top: 71px; }
    .vm-ac-band.is-pro .vm-or-orient { grid-column: 1; grid-row: 1; padding-bottom: 0; }
    .vm-ac-band.is-pro .vm-or-title { grid-row: 2; margin-top: 4px; }
    .vm-ac-band .vm-ac-back { gap: 7px; font-size: 13.5px; }
    .vm-ac-band .vm-ac-back i { font-size: 14px; }
    @media (hover: hover) {
        .vm-ac-band .vm-back.vm-back--band:hover { color: #8ff08b; }
    }
}

@media (min-width: 1120px) {
    #vm-ac[data-layout="customer"] .vm-ac-band:not(.is-pro) { grid-template-columns: 280px minmax(0, 1fr); }
}


/* ====================================================================
   2. THE BODY
   From 901: the 1200 column, its content one 764 column at the left in
   the phone's order. The kickers stand as they do on the phone, except
   "For you" on 3a (the frame's column draws the group alone; the
   heading is kept for assistive tech). From 1120: 3a main | 340 (gap 48,
   level at the top, the column scrolling with the page); 3b the rail
   280 | the pane (gap 40), the rail sticky under the header.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ac-body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 24px 64px;
        gap: 24px;
    }
    .vm-ac-body > * { width: 100%; max-width: 764px; }
    .vm-ac-sec { gap: 10px; }
    #vm-ac[data-layout="owner"] .vm-ac-foryou > .vm-ac-kick {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* "Your business" 12 over the card; the quiet row 28 under it. */
    .vm-ac-biz { gap: 12px; }
    .vm-ac-biz > [data-also] { margin-top: 16px; }
    @media (hover: hover) {
        .vm-ac-row:hover { background: #f8fafc; color: #0f172a; }
    }
}

@media (min-width: 1120px) {
    .vm-ac-body { padding: 32px 24px 72px; }
    .vm-ac-body.is-cols,
    .vm-ac-body.is-rail {
        display: grid;
        align-items: start;
    }
    .vm-ac-body.is-cols { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 48px; }
    .vm-ac-body.is-rail { grid-template-columns: 280px minmax(0, 1fr); column-gap: 40px; }
    .vm-ac-body.is-cols > *,
    .vm-ac-body.is-rail > * { max-width: none; }
    .vm-ac-main,
    .vm-ac-side,
    .vm-ac-pane {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
    .vm-ac-main { gap: 28px; }
    .vm-ac-side { gap: 24px; }
    .vm-ac-pane { gap: 24px; }
    .vm-ac-pane > * { max-width: 764px; }
    .vm-ac-railcol { min-width: 0; position: sticky; top: 88px; align-self: start; }
}


/* ====================================================================
   3. 3a: THE BUSINESS CARD
   The head (tile 52, the name at 24), "Waiting in your queue" over one
   row — the strip (flex 1; numbers at 30) beside the one solid act (52
   tall, at its own width) — then the setup rows, 62 high, under a
   hairline. The quiet row under the card ("Also run a laboratory or
   clinic?") takes the kind's glyph on a mint door.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ac-bc-head { padding: 24px 26px 0; gap: 14px; }
    .vm-ac-bc-tile { width: 52px; height: 52px; }
    .vm-ac-bc-name { font-size: 24px; letter-spacing: -.5px; }
    .vm-ac-bc-queue { padding: 22px 26px 0; }
    .vm-ac-bc-act { flex-direction: row; align-items: center; gap: 16px; }
    .vm-ac-strip { flex: 1; }
    .vm-ac-strip-cell { padding: 14px 18px 13px; }
    .vm-ac-strip-n { font-size: 30px; }
    .vm-ac-bc-go { width: auto; height: 52px; padding: 0 26px; }
    .vm-ac-bc-rows { margin-top: 16px; padding: 4px 10px 6px; }
    .vm-ac-bc-rows .vm-ac-row { min-height: 62px; }

    .vm-ac-also .vm-ac-also-ph { display: none; }
    .vm-ac-also .vm-ac-also-dt { display: inline-block; }
    .vm-ac-also .vm-ac-row-tile { background: #e3f4f0; color: #0f6d5c; }
    .vm-ac-also .vm-ac-row-chev { color: #0f6d5c; }

    @media (hover: hover) {
        .vm-ac-strip-cell:hover { color: #0f6d5c; }
        .vm-ac-strip-cell:hover .vm-ac-strip-l { color: #0f6d5c; }
        .vm-ac-solid:hover { background: #0c5b4c; color: #fff; }
    }
}


/* ====================================================================
   4. THE PERSON
   compact (3a's 340 column; 3b from 901 to 1119): the kicker "You" over
   a lifted card — the 48 chip, the name at 19, the number at 14, the
   line "What a pharmacy sees on your orders. They call or WhatsApp this
   number.", and the line button, full width.
   pane (3b from 1120, on arrival): "Your name and number" at 32 and its
   line, then one card — the 72 chip, the name at 30, the number at 19,
   "Change" at the right — over the foot strip (the phone and WhatsApp
   glyphs, how the number is used, "A new number applies from your next
   order.").
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ac-person[data-variant="compact"] { display: flex; flex-direction: column; gap: 10px; }
    .vm-ac-you {
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
        padding: 18px 18px 16px;
    }
    .vm-ac-id { display: flex; align-items: center; gap: 13px; }
    .vm-ac-you .vm-ac-name { font-size: 19px; letter-spacing: -.4px; }
    .vm-ac-you .vm-ac-name.is-none { color: #64748b; }
    .vm-ac-you .vm-ac-num { margin-top: 2px; font-size: 14px; color: #334155; white-space: nowrap; }
    .vm-ac-you .vm-ac-say { margin-top: 12px; font-size: 13px; color: #64748b; line-height: 1.45; }
    .vm-ac-you .vm-ac-line { margin-top: 12px; }

    .vm-ac-person[data-variant="pane"] { display: flex; flex-direction: column; gap: 22px; }
    .vm-ac-pane-h {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 32px;
        font-weight: 700;
        color: #0f172a;
        letter-spacing: -.8px;
        line-height: 1.15;
    }
    .vm-ac-pane-h:focus { outline: none; }
    .vm-ac-pane-h:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    .vm-ac-pane-line { margin-top: 8px; font-size: 15px; color: #475569; line-height: 1.55; }
    .vm-ac-namecard {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
        overflow: hidden;
    }
    .vm-ac-namecard-top { padding: 26px 28px; display: flex; align-items: center; gap: 20px; }
    .vm-ac-namecard .vm-ac-chip { width: 72px; height: 72px; border-radius: 20px; font-size: 24px; }
    .vm-ac-namecard .vm-ac-chip i { font-size: 24px; }
    .vm-ac-namecard .vm-ac-name { font-size: 30px; letter-spacing: -.8px; line-height: 1.1; }
    .vm-ac-namecard .vm-ac-name.is-none { color: #64748b; }
    .vm-ac-namecard .vm-ac-num {
        margin-top: 6px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 19px;
        letter-spacing: .02em;
        color: #334155;
    }
    .vm-ac-namecard-foot {
        border-top: 1px solid #f0f2f4;
        background: #fafcfb;
        padding: 14px 28px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
    }
    .vm-ac-namecard-g { display: flex; gap: 7px; color: #0f6d5c; }
    .vm-ac-namecard-g .fa-phone { font-size: 12px; }
    .vm-ac-namecard-g .fa-whatsapp { font-size: 14px; }
    .vm-ac-namecard-foot .vm-ac-say { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: #334155; }
    .vm-ac-namecard-foot .vm-ac-note { font-size: 13px; color: #64748b; }

    @media (hover: hover) {
        .vm-ac-line:hover { border-color: #0f6d5c; color: #0f6d5c; }
    }
}


/* ====================================================================
   5. 3b: THE RAIL (from 1120)
   White, bordered, radius 18, padding 10, sticky under the header (the
   house's 88: the frame's 24 drew no header over it). The head (the 44
   chip, the name at 15, the number at 12.5) over a hairline; the places
   44 tall, the current one mint; the caption "Professionals"; then, over
   a hairline, the two quiet ways out.
   ==================================================================== */
@media (min-width: 1120px) {
    .vm-ac-rail {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        padding: 10px;
    }
    .vm-ac-rail-me {
        padding: 8px 8px 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid #f0f2f4;
    }
    .vm-ac-rail-me .vm-ac-chip { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
    .vm-ac-rail-me .vm-ac-chip i { font-size: 16px; }
    .vm-ac-rail-id { min-width: 0; }
    .vm-ac-rail-name {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .vm-ac-rail-name.is-none { font-weight: 500; color: #475569; }
    .vm-ac-rail-num { display: block; font-size: 12.5px; color: #64748b; white-space: nowrap; }
    .vm-ac-rail-items { padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
    .vm-ac-rail-it {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        gap: 11px;
        background: transparent;
        color: #0f172a;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        text-decoration: none;
    }
    .vm-ac-rail-it:visited { color: #0f172a; }
    .vm-ac-rail-ic { width: 20px; flex-shrink: 0; text-align: center; color: #475569; }
    .vm-ac-rail-ic i { font-size: 13px; }
    .vm-ac-rail-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .vm-ac-rail-meta { font-size: 12px; font-weight: 700; color: #0f6d5c; white-space: nowrap; }
    .vm-ac-rail-it.is-on,
    .vm-ac-rail-it.is-on:visited { background: #e3f4f0; color: #0f6d5c; font-weight: 700; }
    .vm-ac-rail-it.is-on .vm-ac-rail-ic { color: #0f6d5c; }
    .vm-ac-rail-it:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 0; }
    .vm-ac-rail-cap {
        padding: 14px 12px 6px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #64748b;
    }
    .vm-ac-rail-foot {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid #f0f2f4;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .vm-ac-rail-it.is-quiet { color: #475569; }
    .vm-ac-rail-it.is-quiet .vm-ac-rail-ic { color: #64748b; }
    @media (hover: hover) {
        .vm-ac-rail-it:not(.is-on):hover { background: #f1f5f9; color: #0f172a; }
        .vm-ac-rail-it.is-quiet:hover { color: #475569; }
    }
}


/* ====================================================================
   6. THE SHEETS AS DIALOGS (20-d-sheets)
   shared.css §3 centres each open sheet at 480 (.vm-sheet--dt-480 on the
   three) and draws it as the 18-25 dialog (.vm-dt-dialog, --inset: the
   title 24 in, the acts on a hairline across the dialog's foot), and §15
   lays its acts in a row (.vm-dt-dialog-acts--row on .vm-ac-acts):
   Cancel, then the solid commit, at the right. Here: the frame's type
   and the acts 48 tall. "Remove my account" keeps its words while grey;
   ticked, it is §15's quiet act (account-page.js gives it the class with
   is-armed), never red and never the solid. The open/close/Escape/scrim
   code is the phone's.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sheet--ac .vm-ac-shead { padding: 0; margin-bottom: 4px; }
    .vm-sheet--ac .vm-ac-ssub { margin-top: 5px; font-size: 13.5px; }

    /* The edit sheet's two fields. */
    .vm-sheet--ac .vm-ac-flabel {
        margin-bottom: 6px;
        padding: 0;
        font-size: 13px;
        font-weight: 600;
        color: #334155;
    }
    .vm-sheet--ac .vm-ac-input {
        height: 48px;
        padding: 0 14px;
        border-radius: 12px;
        font-size: 15px;
    }
    .vm-sheet--ac .vm-ac-input[aria-invalid="true"] { border-color: #0f172a; }
    .vm-sheet--ac .vm-ac-err {
        margin-top: 6px;
        padding: 0;
        font-size: 13px;
        color: #0f172a;
    }
    .vm-sheet--ac .vm-ac-fault { padding: 0; font-size: 13.5px; }

    /* 20b: what stays, then what this device forgets. */
    .vm-sheet--ac .vm-ac-stays { padding: 13px 15px; gap: 12px; }
    .vm-sheet--ac .vm-ac-stays-k { font-size: 12px; }
    .vm-sheet--ac .vm-ac-stays-v { line-height: 1.45; }
    .vm-sheet--ac .vm-ac-forgets-k { font-size: 12.5px; color: #475569; }
    .vm-sheet--ac .vm-ac-list { border-radius: 12px; }
    .vm-sheet--ac .vm-ac-list li { align-items: flex-start; }
    .vm-sheet--ac .vm-ac-list i { margin-top: 3px; color: #64748b; }
    .vm-sheet--ac .vm-ac-list span { font-size: 13.5px; color: #334155; line-height: 1.4; }
    .vm-sheet--ac .vm-ac-foot { font-size: 13px; color: #475569; }

    /* 46b / 46c / 46e. */
    .vm-sheet--ac .vm-ac-rm-goes,
    .vm-sheet--ac .vm-ac-rm-open { padding: 13px 15px 15px; }
    .vm-sheet--ac .vm-ac-rm-k { font-size: 12px; color: #475569; }
    .vm-sheet--ac .vm-ac-rm-open .vm-ac-rm-big { font-size: 26px; letter-spacing: -.8px; line-height: 1.15; }
    .vm-sheet--ac .vm-ac-rm-list { border-radius: 12px; padding: 2px 14px; }
    .vm-sheet--ac .vm-ac-rm-list i { margin-top: 3px; color: #64748b; }
    .vm-sheet--ac .vm-ac-rm-list span { font-size: 13.5px; color: #334155; }
    .vm-sheet--ac .vm-ac-tick { padding: 0 13px; }
    .vm-sheet--ac .vm-ac-tick-t { font-size: 14px; }
    .vm-sheet--ac .vm-ac-rm-fail { padding: 0; font-size: 13.5px; line-height: 1.45; }
    .vm-sheet--ac .vm-ac-rm-fail i { color: #475569; }
    .vm-sheet--ac .vm-ac-rm-rows { border: 0; border-radius: 0; }
    .vm-sheet--ac .vm-ac-rm-rows > * + * { border-top-color: #f0f2f4; }
    .vm-sheet--ac .vm-ac-rm-row { min-height: 64px; padding: 12px 4px; gap: 13px; }
    .vm-sheet--ac .vm-ac-rm-row .vm-ac-row-tile { width: 40px; height: 40px; border-radius: 12px; }
    .vm-sheet--ac .vm-ac-rm-row .vm-ac-row-t { font-size: 14.5px; line-height: 1.35; }
    .vm-sheet--ac .vm-ac-rm-row .vm-ac-row-s { font-size: 13px; color: #64748b; }

    /* 46-d-owner / 46-d-states (desktop slice H4): the owner's card in the
       dialog is 20c's dark door, compact — the 40 tile, the name at 17, the
       code's sentence at 13.5 — and its one white door at its own width
       under the words, 52 in (the tile and its gap), with the arrow the
       page's doors carry (drawn here: the dialog's markup is the phone's,
       which has none). It comes before the rows; Cancel stands alone. */
    .vm-sheet--ac .vm-ac-rm-owner { border-radius: 16px; padding: 16px 18px 18px; }
    .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-tile { width: 40px; height: 40px; border-radius: 12px; }
    .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-tile i { font-size: 15px; }
    .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-name { font-size: 17px; letter-spacing: -.3px; line-height: 1.25; }
    .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-sub { font-size: 13.5px; }
    .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-go {
        display: inline-flex;
        width: auto;
        margin: 14px 0 0 52px;
        padding: 0 18px;
        white-space: nowrap;
    }
    .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-go::after {
        content: "\f061";
        content: "\f061" / "";
        font: var(--fa-font-solid);
        font-size: 11px;
    }

    /* The acts: §3's foot, the row at its right, 48 tall. */
    .vm-sheet--ac .vm-ac-commit,
    .vm-sheet--ac .vm-ac-cancel,
    .vm-sheet--ac .vm-ac-rm-go { height: 48px; }
    /* 46e: Cancel stands alone, still the grey way out. */
    .vm-sheet--ac .vm-ac-acts > .vm-ac-cancel:only-child { padding: 0 20px; font-size: 14.5px; }
    @media (hover: hover) {
        .vm-sheet--ac .vm-ac-commit:not([aria-disabled="true"]):hover { background: #0c5b4c; }
        .vm-sheet--ac .vm-ac-acts > .vm-ac-cancel:hover { background: #f1f5f9; color: #0f172a; }
        .vm-sheet--ac .vm-ac-rm-row:hover { background: #f8fafc; color: #0f172a; }
        .vm-sheet--ac .vm-ac-rm-owner .vm-ac-counter-go:hover { background: #e3f4f0; color: #0f6d5c; }
    }
}


/* ====================================================================
   7. #pro, FOR PROFESSIONALS (3b-d)
   The eyebrow, the title at 32 and the line (620 wide); two equal cards
   side by side (the commit pinned to each foot); the strip "What you
   will need" with its four chips. The same block is 3b's pane from 1120
   and its own view of the page everywhere else (764 wide).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ac-pro { gap: 24px; }
    .vm-ac-pro-h { font-size: 32px; letter-spacing: -.8px; line-height: 1.15; }
    .vm-ac-pro-line { max-width: 620px; font-size: 15px; color: #475569; }
    .vm-ac-pro-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
    .vm-ac-pro-card { padding: 22px 22px 20px; }
    .vm-ac-pro-need { padding: 16px 20px; border-radius: 16px; gap: 12px 20px; }
}


/* ====================================================================
   8. STATES
   Logged out: one bordered group, the title at 21, Log in at its own
   width. The failed read: one bordered card and a mint Try again (never
   lifted: it is a fact). While the account is read: a quiet block,
   never a sentence and never a duration.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-ac-out { padding: 24px 26px; }
    .vm-ac-out-t { font-size: 21px; letter-spacing: -.4px; }
    .vm-ac-out-s { margin-top: 6px; font-size: 14.5px; color: #475569; }
    .vm-ac-out-go {
        display: inline-flex;
        width: auto;
        height: 48px;
        margin-top: 18px;
        padding: 0 26px;
        font-size: 14.5px;
    }

    .vm-ac-fail {
        padding: 22px 24px;
        gap: 14px;
        align-items: flex-start;
    }
    .vm-ac-fail-t { font-size: 15.5px; }

    .vm-ac-skel {
        height: 300px;
        border-radius: 18px;
        background: linear-gradient(180deg, #eef3f6 0%, #f1f5f9 100%);
    }

    @media (hover: hover) {
        .vm-ac-out-go:hover { background: #0c5b4c; color: #fff; }
    }
}