/* ====================================================================
   SCREEN 29 — YOUR COUNTER (the counter side), the desktop layer
   (desktop slice E8, 2026-10-09). pharmacy/counter.html only, linked
   after desktop/shared.css.

   Frames: 29-d (29a), 29-d-hours (29b), 29-d-day (29c, the 480 dialog),
   29-d-numbers (29d), 29-d-delivery (29e), 29-d-map (29h), 29-d-photo
   (29f), 29-d-narrow (29a at 1000) and 29-d-states in
   docs/design/pharmacy/screens/29/desktop/frame.html; the sheet is
   screens/29/desktop/FACTS.md; the records (screens/desktop-26-34/
   records/Screen 29 - …) settle a conflict, the design pass winning.
   Brief: briefs/2026-10-09_desktop-slice-E8.md.

   Tiers: >=901 the layer — the 480 column unwinds (.vm-dt-shell); the
   counter's own header (shared §12, filled by counter.js through
   owner-head.js: My shelf lit, no Queue count); 29a's band is shared
   §19's lead band (counter.js moves the lead into it), the views' bands
   18-d's flow band (shared §13); main one 764 column; 29a's Close for now
   and Where this shows a pair under the ledger; 29d, 29e, 29f and 29h one
   card each, the act at its foot; 29b's and 29e's commit bar at the
   window's foot; the sheets 480 dialogs, 29c's and the landmark's Cancel |
   commit at the foot · >=1120 main 764 | 340, gap 48: 29a the ledger |
   Close for now + Where this shows (not sticky); 29b the week | the
   preview and Publish, 29e the labelled rows | the preview and Save (both
   sticky under the header).

   Hooks this file reaches by class: the page's own .vm-ct-* markup, the
   §19 / §13 classes the page carries, and what counter.js adds from 901:
   the lead inside .vm-ct-band, .vm-ct-dtcol (29a's column), .vm-ct-dtside
   (29b / 29e's column), .vm-ct-dtcard (29d / 29e / 29f / 29h's card,
   --foot where its act sits at its foot), .vm-ct-pinside (29h's rows),
   .vm-ct-dtscale (29b's scale), .vm-ct-sfoot (the dialogs' foot).

   From shared.css since E10 (the consolidation): the headline at 40 at
   both tiers (§19), the counter's name read, not drawn while the lead
   shows (§13), the views' flow band with its line (§13's
   .vm-dt-flow-band--sub), Your page and Close for now as §14's lifted
   ledger, the doors' 40 | 196 | 1fr | 16 row (§14's
   .vm-dt-ledger-row--door). Still here, as the frames draw them: the lead
   band's insides where app.css outweighs §19 (the lead card's resets, the
   headline's tracking, the rows' words, 43e's strip on the mat), the
   labelled rows (14.5/700 ink labels at 18 24 20, not §17's 14/600 at
   20 24), the column card and its foot bar, the dialog's foot row (its
   Cancel bordered), the state cards (20 22, the sentence at 15.5).

   Never red, never prescription blue, no yellow, no orange. Every
   control 44 or more; every date, clock, figure and number tabular.
   ==================================================================== */


/* --------------------------------------------------------------------
   1. The page, the states, the bands' common parts
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-band {
        border: 0;
        overflow: visible;
    }
    #vm-ct .vm-ct-band > .vm-ct-bandrow {
        flex-shrink: 0;
        height: auto;
    }
    #vm-ct .vm-ct-band a:focus-visible,
    #vm-ct .vm-ct-band button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* Main: the 1200 column, 32 under the band. */
    #vm-ct .vm-ct-body {
        padding: 32px max(24px, calc((100% - 1152px) / 2)) 64px;
        gap: 20px;
    }
    #vm-ct .vm-ct-view:not([data-view="counter"]) .vm-ct-body > :not(.vm-ct-dtside) { max-width: 764px; }

    /* Loading: a quiet line (29-d-states). */
    #vm-ct .vm-ct-body > .vm-loading {
        padding: 4px 2px;
        font-size: 14px;
        color: #64748b;
    }

    /* The read failed; no counter; another counter's link (29-d-states):
       one bordered card, its acts mint pills. */
    #vm-ct .vm-ct-body > .vm-ct-state {
        max-width: 764px;
        padding: 20px 22px;
        gap: 0;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
    }
    #vm-ct .vm-ct-state-t {
        font-size: 15.5px;
        font-weight: 700;
        line-height: 1.4;
        color: #0f172a;
    }
    #vm-ct .vm-ct-body > .vm-ct-state .vm-ct-retry {
        width: auto;
        height: 44px;
        margin-top: 14px;
        padding: 0 18px;
        align-self: flex-start;
        border: 0;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
    }
    #vm-ct .vm-q-none {
        flex: 0 0 auto;
        width: min(764px, calc(100% - 48px));
        margin: 32px 0 64px max(24px, calc((100% - 1152px) / 2));
        padding: 20px 22px;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        text-align: left;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
    }
    #vm-ct .vm-q-none > i { display: none; }
    #vm-ct .vm-q-none h1 {
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 15.5px;
        line-height: 1.4;
        color: #0f172a;
    }
    #vm-ct .vm-q-none-body {
        max-width: none;
        margin-top: 4px;
        font-size: 14px;
        color: #475569;
    }
    #vm-ct .vm-q-none-doors {
        width: auto;
        max-width: none;
        margin-top: 14px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    #vm-ct .vm-q-none-doors a,
    #vm-ct .vm-q-none-doors a:first-child,
    #vm-ct .vm-q-none-doors a + a {
        height: 44px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
    }

    /* The switch at the frames' 46 x 28 in a 52 x 44 hit area. */
    #vm-ct .vm-ct-toggle { width: 52px; }
    #vm-ct .vm-ct-track { width: 46px; background: #cbd5e1; }
    #vm-ct .vm-ct-toggle[aria-pressed="true"] .vm-ct-track { background: #0f6d5c; }
    #vm-ct .vm-ct-toggle[aria-pressed="true"] .vm-ct-knob { left: 21px; }

    @media (hover: hover) {
        #vm-ct .vm-ct-body > .vm-ct-state .vm-ct-retry:hover,
        #vm-ct .vm-q-none-doors a:hover { background: #d3ede6; color: #0f6d5c; }
    }
}


/* --------------------------------------------------------------------
   2. 29a: the band carries the lead (29-d, 29-d-narrow, 29-d-states)
   shared §19's lead band on the header: the glass exit | the key line,
   the list's words at 40, the week, the act at the right. app.css's
   lead card is undone here, where it outweighs §19.
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    /* The counter's name: drawn at 40 while the band has no lead; read,
       not drawn, while the lead shows (shared §13: the owner header names
       the counter). */
    #vm-ct .vm-dt-lead-band > .vm-ct-title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 40px;
        letter-spacing: -1.1px;
        line-height: 1.1;
    }
    #vm-ct .vm-dt-lead-band > .vm-ct-sub { display: none; }

    /* The lead: its words left, the act right, centred on the words. */
    #vm-ct .vm-dt-lead-band > [data-lead] {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 1fr auto auto 1fr;
        column-gap: 24px;
        align-items: center;
    }
    #vm-ct .vm-dt-lead-band > [data-lead] > .vm-ct-lead-in {
        grid-column: 1;
        grid-row: 1 / -1;
        min-width: 0;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-dt-lead-band .vm-ct-lead-k { color: #e2e8f0; }
    #vm-ct .vm-dt-lead-band .vm-ct-lead-h,
    #vm-ct .vm-dt-lead-band .vm-ct-lead-h.is-long,
    #vm-ct .vm-dt-lead-band .vm-ct-lead-h.vm-tb-h {
        margin-top: 4px;
        font-size: 40px;
        letter-spacing: -1.1px;
        line-height: 1.1;
        color: #fff;
    }
    #vm-ct .vm-dt-lead-band .vm-ct-lead-rows,
    #vm-ct .vm-dt-lead-band .vm-cl-rows {
        margin: 0;
        gap: 0;
    }
    #vm-ct .vm-dt-lead-band .vm-ct-lead-row {
        padding: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-dt-lead-band .vm-ct-lead-row > i {
        margin-top: 5px;
        font-size: 13px;
        color: #8ff08b;
    }
    #vm-ct .vm-dt-lead-band .vm-ct-lead-row > span {
        min-width: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        color: #e2e8f0;
    }
    #vm-ct .vm-dt-lead-band .vm-ct-dot { color: #cbd5e1; }

    /* The act(s): §19's solid white pill or glass, at their own width. */
    #vm-ct .vm-dt-lead-band > [data-lead] > button {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        width: auto;
    }
    #vm-ct .vm-dt-lead-band > [data-lead] > .vm-cl-fail {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        max-width: 300px;
        margin-top: 10px;
        font-size: 13.5px;
        color: #fff;
    }

    /* 43e's strip on the mat (29-d-states): one cell a day, the open
       hours in mint. */
    #vm-ct .vm-dt-lead-band .vm-cl-strip {
        max-width: 420px;
        margin-top: 12px;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-dt-lead-band .vm-cl-cells {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 10px;
    }
    #vm-ct .vm-dt-lead-band .vm-cl-cell { gap: 4px; }
    #vm-ct .vm-dt-lead-band .vm-cl-cday {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-align: left;
        color: #e2e8f0;
    }
    #vm-ct .vm-dt-lead-band .vm-cl-bar {
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .18);
    }
    #vm-ct .vm-dt-lead-band .vm-cl-seg {
        border-radius: 999px;
        background: #8ff08b;
    }
    #vm-ct .vm-dt-lead-band .vm-cl-note {
        min-height: 18px;
        font-size: 12px;
        text-align: left;
        color: #e2e8f0;
    }
}


/* --------------------------------------------------------------------
   3. 29a: main — Your page as one ledger of doors | the column
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-home {
        max-width: 764px;
        gap: 20px;
    }
    #vm-ct .vm-ct-group { gap: 14px; }
    #vm-ct .vm-ct-h {
        padding: 0;
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }

    /* The ledger: §14's lifted form (white, the house shadow, no edge),
       its rows §14's door rows (29-d); the hairline here, where the
       phone's own outweighs §14's. */
    #vm-ct [data-doors] .vm-ct-door + .vm-ct-door { border-top: 1px solid #f0f2f4; }
    #vm-ct [data-doors] .vm-ct-door-main { display: contents; }
    #vm-ct [data-doors] .vm-ct-tile,
    #vm-ct [data-close-door] .vm-ct-tile,
    #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    #vm-ct [data-doors] .vm-ct-tile:not(.vm-ct-tile--mono):not(.vm-ct-tile--img) {
        background: #e3f4f0;
        color: #0f6d5c;
    }
    #vm-ct [data-doors] .vm-ct-tile i { font-size: 14px; }
    #vm-ct [data-doors] .vm-ct-door-t {
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        color: #0f172a;
    }
    #vm-ct [data-doors] .vm-ct-door-s {
        min-width: 0;
        margin: 0;
        gap: 1px;
        font-size: 14px;
        line-height: 1.45;
        color: #475569;
        text-wrap: pretty;
        overflow-wrap: normal;
    }
    #vm-ct [data-doors] .vm-ct-door-s strong { font-weight: 600; color: #0f172a; }
    #vm-ct [data-doors] .vm-ct-chev,
    #vm-ct [data-close-door] .vm-ct-chev {
        justify-self: end;
        font-size: 13px;
        color: #64748b;
    }

    /* 48e linked: the row is the link to the lab's page and its quiet
       Unlink, in the chevron's place. */
    #vm-ct [data-doors] .vm-ct-door--link {
        padding: 0 20px 0 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
    }
    #vm-ct [data-doors] .vm-ct-lk-open {
        flex: 1;
        min-width: 0;
        min-height: 64px;
        padding: 11px 0 11px 20px;
        display: grid;
        grid-template-columns: 40px 196px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
    }
    #vm-ct [data-doors] .vm-ct-lk-err { padding-left: 20px; font-size: 13.5px; }

    /* Close for now (29-d's column): one white card, a grey tile. */
    #vm-ct [data-close-door] .vm-ct-door {
        min-height: 68px;
        padding: 12px 18px;
        gap: 14px;
    }
    #vm-ct [data-close-door] .vm-ct-tile { background: #f1f5f9; color: #475569; }
    #vm-ct [data-close-door] .vm-ct-door-t { font-size: 15px; font-weight: 700; color: #0f172a; }

    /* Where this shows: a bordered card, its rows plain. */
    #vm-ct [data-where] {
        padding: 18px 20px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
    }
    #vm-ct [data-where] .vm-ct-info-k {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        color: #0f172a;
    }
    #vm-ct [data-where] .vm-ct-info-rows {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 9px;
        border-radius: 0;
        background: none;
    }
    #vm-ct [data-where] .vm-ct-info-row {
        padding: 0;
        gap: 10px;
        border: 0;
    }
    #vm-ct [data-where] .vm-ct-info-row i {
        width: 16px;
        margin-top: 3px;
        font-size: 13px;
        color: #0f6d5c;
    }
    #vm-ct [data-where] .vm-ct-info-row span {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        color: #334155;
    }
    #vm-ct [data-where] .vm-ct-info-foot {
        margin-top: 12px;
        padding: 12px 0 0;
        border-top: 1px solid #f0f2f4;
        font-size: 13.5px;
        line-height: 1.5;
        color: #475569;
    }

    /* The column: from 901 to 1119 a pair under the ledger (29-d-narrow). */
    #vm-ct .vm-ct-dtcol {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        align-items: start;
    }
    #vm-ct .vm-ct-dtcol > * { min-width: 0; }

    /* 47i: the e-mail door on the page, under the band (29-d-states). */
    #vm-ct .vm-ct-home > [data-tb-rows] {
        border: 0;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-door {
        min-height: 72px;
        padding: 14px 20px;
        gap: 14px;
    }
    #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-tile { background: #e3f4f0; color: #0f6d5c; }
    #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-door-t { font-size: 15px; font-weight: 700; }
    #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-door-s { margin-top: 2px; font-size: 14px; color: #475569; }
    #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-chev { font-size: 13px; color: #64748b; }

    @media (hover: hover) {
        #vm-ct [data-doors] .vm-ct-lk-open:hover,
        #vm-ct [data-close-door] .vm-ct-door:hover,
        #vm-ct .vm-ct-home > [data-tb-rows] .vm-ct-door:hover { background: #f8fafc; }
    }
}

@media (min-width: 1120px) {
    #vm-ct .vm-ct-home {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 20px;
        align-items: start;
    }
    #vm-ct .vm-ct-home > [data-tb-rows] { grid-column: 1; }
    #vm-ct .vm-ct-home > .vm-ct-group { grid-column: 1; grid-row: 1; }
    #vm-ct .vm-ct-home > .vm-ct-dtcol {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}


/* --------------------------------------------------------------------
   4. The views' bands: shared §13's flow band with its line
   (.vm-dt-flow-band--sub: the exit | the title at 40 over the code's
   sub), 22 under the header
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-dt-flow-band { padding-top: 22px; }
    #vm-ct .vm-dt-flow-band > .vm-ct-title { letter-spacing: -1.1px; }
}


/* --------------------------------------------------------------------
   5. The commit bar, the column card and their failure (29b, 29e;
   29-d-states' "not published")
   From 901 to 1119 the phone's bar stays at the window's foot, its
   content in the 764 column; from 1120 counter.js moves it into the
   column's card, under the preview.
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-bar {
        padding: 0 max(24px, calc((100% - 1152px) / 2));
        box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
        border-top: 1px solid #e2e8f0;
    }
    #vm-ct .vm-ct-bar > * { max-width: 764px; }
    #vm-ct .vm-ct-bar-cap {
        padding: 12px 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    #vm-ct .vm-ct-bar-in { padding: 12px 0 14px; }
    #vm-ct .vm-ct-commit {
        min-height: 52px;
        padding: 0 24px 0 20px;
        background: #0f6d5c;
        font-size: 15px;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .25);
    }
    #vm-ct .vm-ct-commit i { font-size: 13px; }

    /* 29g's failure, wherever it stands: the words, then Try again as the
       mint fill (29-d-states). */
    #vm-ct .vm-ct-fail {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        gap: 14px;
    }
    #vm-ct .vm-ct-fail-head { gap: 12px; }
    #vm-ct .vm-ct-fail-tile { width: 40px; height: 40px; border-radius: 12px; background: #f1f5f9; color: #475569; }
    #vm-ct .vm-ct-fail-t { font-size: 15px; font-weight: 700; line-height: 1.4; color: #0f172a; }
    #vm-ct .vm-ct-fail-s { margin-top: 2px; font-size: 14px; line-height: 1.5; color: #475569; text-wrap: pretty; }
    #vm-ct .vm-ct-again {
        height: 48px;
        padding: 0 20px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14.5px;
        box-shadow: none;
    }
    #vm-ct .vm-ct-bar [data-bar-fail] { padding: 14px 0; }
    @media (hover: hover) {
        #vm-ct .vm-ct-commit:not(:disabled):hover { background: #0c5b4c; }
        #vm-ct .vm-ct-again:not(:disabled):hover { background: #d3ede6; }
    }
}

@media (min-width: 1120px) {
    /* main | the column (29-d-hours, 29-d-delivery). */
    #vm-ct .vm-ct-body:has(> .vm-ct-dtside) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 20px;
        align-items: start;
    }
    #vm-ct .vm-ct-body:has(> .vm-ct-dtside) > :not(.vm-ct-dtside) { grid-column: 1; }
    #vm-ct .vm-ct-body > .vm-ct-dtside {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 88px;
        min-width: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }

    /* The preview: the mint block, 14 in from the card's edge (its words
       are section 8's). */
    #vm-ct .vm-ct-dtside > .vm-ct-lead {
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    #vm-ct .vm-ct-dtside > .vm-ct-lead .vm-ct-lead-in { margin: 14px 14px 0; }

    /* The bar, in the card's foot: the caption, then the commit full
       width (not fixed: the column is the sticky one). */
    #vm-ct .vm-ct-dtside > .vm-ct-bar {
        position: static;
        padding: 14px 18px 18px;
        border: 0;
        box-shadow: none;
        background: none;
    }
    #vm-ct .vm-ct-dtside > .vm-ct-bar > * { max-width: none; }
    #vm-ct .vm-ct-dtside .vm-ct-bar-cap { padding: 0; }
    #vm-ct .vm-ct-dtside .vm-ct-bar-in { padding: 12px 0 0; }
    #vm-ct .vm-ct-dtside .vm-ct-bar-in--solo { padding-top: 0; }
    #vm-ct .vm-ct-dtside [data-bar-fail] { padding: 0; }
    #vm-ct .vm-ct-dtside .vm-ct-fail { gap: 14px; }
    #vm-ct .vm-ct-dtside .vm-ct-again { width: 100%; }

    /* 29e: "When you change it" as the foot's line, over Save. */
    #vm-ct .vm-ct-dtside > .vm-ct-info {
        padding: 14px 18px 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-ct-dtside > .vm-ct-info + .vm-ct-bar { padding-top: 12px; }
}


/* --------------------------------------------------------------------
   6. The cards with their act at the foot (29d, 29f; and 29e / 29h's
   card) and their info line as its caption
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-dtcard {
        min-width: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-ct .vm-ct-dtcard--foot {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    #vm-ct .vm-ct-dtcard--foot > :first-child { grid-column: 1 / -1; }
    #vm-ct .vm-ct-dtcard > .vm-ct-card,
    #vm-ct .vm-ct-dtcard > .vm-ct-shot,
    #vm-ct .vm-ct-dtcard > .vm-ct-pincard {
        padding: 0;
        gap: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    /* The info line at the foot's left, the act at its right. */
    #vm-ct .vm-ct-dtcard--foot > .vm-ct-info {
        grid-column: 1;
        min-width: 0;
        padding: 16px 0 16px 24px;
        display: flex;
        align-items: center;
        border-top: 1px solid #f0f2f4;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-ct-dtcard .vm-ct-info-k,
    #vm-ct .vm-ct-dtside .vm-ct-info-k {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    #vm-ct .vm-ct-dtcard .vm-ct-info-rows,
    #vm-ct .vm-ct-dtside .vm-ct-info-rows {
        margin: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-ct-dtcard .vm-ct-info-row,
    #vm-ct .vm-ct-dtside .vm-ct-info-row {
        display: block;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
        text-wrap: pretty;
    }
    #vm-ct .vm-ct-dtcard .vm-ct-info-row i,
    #vm-ct .vm-ct-dtside .vm-ct-info-row i {
        width: auto;
        margin: 0 8px 0 0;
        font-size: 14px;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-dtcard .vm-ct-info-row span,
    #vm-ct .vm-ct-dtside .vm-ct-info-row span {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.5;
        color: #475569;
    }
    #vm-ct .vm-ct-dtcard--foot > .vm-ct-bar,
    #vm-ct .vm-ct-dtcard--foot > [data-photo-acts] {
        grid-column: 2;
        min-width: 0;
        position: static;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 0;
        border-top: 1px solid #f0f2f4;
        box-shadow: none;
        background: none;
    }
    #vm-ct .vm-ct-dtcard--foot > .vm-ct-bar > * { max-width: none; }
    #vm-ct .vm-ct-dtcard--foot .vm-ct-bar-in { padding: 0; }
    #vm-ct .vm-ct-dtcard--foot .vm-ct-commit { width: auto; white-space: nowrap; }

    /* A save that did not go through: the words take the foot's left,
       Try again its right (29-d-states, 29d). */
    #vm-ct .vm-ct-dtcard--foot:has(.vm-ct-fail) > .vm-ct-info { display: none; }
    #vm-ct .vm-ct-dtcard--foot > :has(> .vm-ct-fail),
    #vm-ct .vm-ct-dtcard--foot > .vm-ct-bar:has([data-bar-fail]:not([hidden])) { grid-column: 1 / -1; }
    #vm-ct .vm-ct-dtcard--foot [data-bar-fail] { flex: 1; padding: 0; }
    #vm-ct .vm-ct-dtcard .vm-ct-fail {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }
    #vm-ct .vm-ct-dtcard .vm-ct-fail-head { flex: 1; min-width: 0; }
    #vm-ct .vm-ct-dtcard .vm-ct-again { width: auto; flex-shrink: 0; }
}


/* --------------------------------------------------------------------
   7. Labelled rows (29d, 29e): the label 172 | its control, 28 between,
   hairlines between the rows
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct [data-num-form] > .vm-ct-field,
    #vm-ct [data-num-form] > .vm-ct-wa,
    #vm-ct [data-del-form] > .vm-ct-togrow,
    #vm-ct [data-del-form] .vm-ct-pair > .vm-ct-field,
    #vm-ct .vm-ct-dtcard > .vm-ct-holdcard {
        margin: 0;
        padding: 18px 24px 20px;
        display: grid;
        grid-template-columns: 172px minmax(0, 1fr);
        column-gap: 28px;
        row-gap: 8px;
        align-items: start;
        min-height: 0;
    }
    #vm-ct [data-num-form] > * + *,
    #vm-ct [data-del-form] .vm-ct-pair > .vm-ct-field,
    #vm-ct .vm-ct-dtcard > .vm-ct-holdcard { border-top: 1px solid #f0f2f4; }
    #vm-ct [data-num-form] > .vm-ct-field > *,
    #vm-ct [data-num-form] > .vm-ct-wa > *,
    #vm-ct [data-del-form] .vm-ct-pair > .vm-ct-field > *,
    #vm-ct .vm-ct-dtcard > .vm-ct-holdcard > * { grid-column: 2; min-width: 0; }
    #vm-ct [data-num-form] > .vm-ct-field > .vm-ct-label,
    #vm-ct [data-num-form] > .vm-ct-wa > .vm-ct-label,
    #vm-ct [data-del-form] .vm-ct-pair > .vm-ct-field > .vm-ct-label,
    #vm-ct [data-del-form] > .vm-ct-togrow > .vm-ct-togt,
    #vm-ct .vm-ct-dtcard > .vm-ct-holdcard > .vm-ct-togt {
        grid-column: 1;
        grid-row: 1;
        padding-top: 13px;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.5;
        color: #0f172a;
    }
    #vm-ct [data-del-form] > .vm-ct-togrow > .vm-ct-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        margin-top: 4px;
    }

    /* The boxes: 52 tall, ringed; the country code its own segment. */
    #vm-ct .vm-ct-box {
        height: 52px;
        border: 1.5px solid #cbd5e1;
        border-radius: 12px;
    }
    #vm-ct .vm-ct-box:focus-within { border-color: #0f6d5c; }
    #vm-ct .vm-ct-box[aria-invalid="true"] { border-color: #0f172a; }
    #vm-ct .vm-ct-box--tel {
        width: 300px;
        max-width: 100%;
        padding: 0;
        gap: 0;
    }
    #vm-ct .vm-ct-cc {
        height: 100%;
        padding: 0 12px 0 14px;
        display: flex;
        align-items: center;
        border-right: 1px solid #e2e8f0;
        font-size: 15px;
        font-weight: 400;
        color: #64748b;
    }
    #vm-ct .vm-ct-box--tel .vm-ct-in { padding: 0 14px; }
    #vm-ct .vm-ct-in {
        font-size: 16px;
        font-weight: 600;
        color: #0f172a;
    }
    #vm-ct .vm-ct-box--unit {
        padding: 0 14px 0 16px;
        justify-content: space-between;
    }
    #vm-ct [data-box="delivery_fee"] { width: 160px; }
    #vm-ct [data-box="delivery_radius_km"] { width: 120px; }
    #vm-ct .vm-ct-box--unit .vm-ct-in { font-weight: 600; }
    #vm-ct .vm-ct-box--unit span {
        font-size: 14px;
        font-weight: 400;
        color: #64748b;
    }
    #vm-ct .vm-ct-help {
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
        text-wrap: pretty;
    }
    #vm-ct .vm-ct-err {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        color: #0f172a;
    }

    /* The chips: pills at their own width; the chosen one solid. */
    #vm-ct .vm-ct-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    #vm-ct .vm-ct-chip {
        min-height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #cbd5e1;
        color: #0f172a;
        font-size: 14.5px;
        font-weight: 600;
    }
    #vm-ct .vm-ct-chip[aria-pressed="true"] {
        background: #0f6d5c;
        box-shadow: none;
        color: #fff;
        font-weight: 700;
    }

    /* 29d: WhatsApp's other number under the chips. */
    #vm-ct .vm-ct-field--wa {
        margin-top: 4px;
        gap: 8px;
    }

    /* 29e: the distance's rows. The fee and How far are two rows; the
       line under How far and its refusal sit in its control column. */
    #vm-ct [data-del-form] .vm-ct-deliv:not([hidden]),
    #vm-ct [data-del-form] .vm-ct-pair { display: contents; }
    #vm-ct [data-del-form] .vm-ct-pair > .vm-ct-field:last-child { padding-bottom: 0; }
    #vm-ct [data-del-form] .vm-ct-deliv > .vm-ct-err,
    #vm-ct [data-del-form] .vm-ct-deliv > .vm-ct-help { padding: 8px 24px 0 224px; }
    #vm-ct [data-del-form] .vm-ct-deliv > .vm-ct-help:last-child { padding-bottom: 20px; }
    #vm-ct .vm-ct-dtcard > .vm-ct-holdcard > .vm-ct-help { margin: 0; }

    @media (hover: hover) {
        #vm-ct .vm-ct-chip:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px #475569; }
    }
}


/* --------------------------------------------------------------------
   8. 29b: Open 24 h and the week as one card, the strips on a 00:00-24:00
   scale (29-d-hours)
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-week {
        gap: 0;
        overflow: hidden;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-ct .vm-ct-24,
    #vm-ct .vm-ct-days {
        border: 0;
        border-radius: 0;
    }
    #vm-ct .vm-ct-24row {
        min-height: 0;
        padding: 16px 20px;
        gap: 16px;
    }
    #vm-ct .vm-ct-24 .vm-ct-togt {
        font-size: 15.5px;
        font-weight: 700;
        line-height: 1.5;
        color: #0f172a;
    }
    #vm-ct .vm-ct-togs {
        margin-top: 2px;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    #vm-ct .vm-ct-dtscale {
        padding: 14px 20px 6px calc(20px + 48px + 18px + 150px + 18px);
        padding-right: calc(20px + 16px + 18px);
        display: flex;
        justify-content: space-between;
        font-size: 11.5px;
        line-height: 1.5;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    #vm-ct .vm-ct-day {
        min-height: 60px;
        padding: 10px 20px;
        display: grid;
        grid-template-columns: 48px 150px minmax(0, 1fr) 16px;
        column-gap: 18px;
        align-items: center;
        border-top: 1px solid #f0f2f4;
    }
    #vm-ct .vm-ct-day-main { display: contents; }
    #vm-ct .vm-ct-dtile {
        width: 48px;
        height: 40px;
        border-radius: 12px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 12.5px;
        letter-spacing: .04em;
    }
    #vm-ct .vm-ct-day:has(.vm-ct-day-v.is-closed) .vm-ct-dtile { background: #f1f5f9; color: #475569; }
    #vm-ct .vm-ct-day-v {
        min-width: 0;
        font-size: 15.5px;
        font-weight: 700;
        color: #0f172a;
    }
    #vm-ct .vm-ct-day-v.is-closed { font-weight: 500; color: #64748b; }
    #vm-ct .vm-ct-days .vm-ct-strip,
    #vm-ct .vm-ct-kept .vm-ct-strip {
        height: 10px;
        overflow: hidden;
        background: #eef1f5;
    }
    #vm-ct .vm-ct-days .vm-ct-seg { background: #16a085; }
    #vm-ct .vm-ct-day .vm-ct-chev {
        justify-self: end;
        font-size: 13px;
        color: #64748b;
    }

    /* 24 h on: the week kept, in full ink (29-d-states). */
    #vm-ct .vm-ct-kept {
        padding: 14px 20px;
        gap: 10px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-ct .vm-ct-kept-k {
        width: 48px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 12.5px;
        color: #475569;
    }
    #vm-ct .vm-ct-kept-say {
        padding: 12px 20px 16px;
        border-top: 1px solid #f0f2f4;
        font-size: 14px;
        line-height: 1.5;
        color: #334155;
    }
    @media (hover: hover) {
        #vm-ct .vm-ct-day:hover { background: #f8fafc; }
    }

    /* The preview's words (29-d-hours, 29-d-delivery): the mint block. */
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-in {
        padding: 16px;
        border-radius: 16px;
        background: #e3f4f0;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-k {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f6d5c;
        font-variant-numeric: tabular-nums;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-now {
        margin-top: 8px;
        font-size: 14px;
        color: #475569;
        font-variant-numeric: tabular-nums;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-h,
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-h.is-long {
        margin-top: 6px;
        font-size: 30px;
        letter-spacing: -.8px;
        line-height: 1.15;
        color: #0f172a;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-sub {
        margin-top: 4px;
        font-size: 15px;
        font-weight: 600;
        color: #334155;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-rows {
        margin-top: 14px;
        gap: 0;
        overflow: hidden;
        border-radius: 12px;
        background: #fff;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-row {
        padding: 12px 14px;
        gap: 12px;
        border-radius: 0;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-row > i {
        width: 16px;
        margin-top: 4px;
        font-size: 13px;
        text-align: center;
        color: #0f6d5c;
    }
    #vm-ct :is([data-hours-lead], [data-del-lead]) .vm-ct-lead-row > span {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        color: #0f172a;
        text-wrap: pretty;
    }


    /* From 901 to 1119 the preview stands over the week, as one card. */
    #vm-ct .vm-ct-body > [data-hours-lead],
    #vm-ct .vm-ct-body > [data-del-lead] {
        padding: 14px;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
}


/* --------------------------------------------------------------------
   9. 29e: the no-pin door inside the preview (call 3: one white row
   under "Delivers to you"), from 1120
   -------------------------------------------------------------------- */
@media (min-width: 1120px) {
    #vm-ct .vm-ct-dtside:has(> [data-nopin]:not([hidden])) > [data-del-lead] .vm-ct-lead-in {
        padding-bottom: 0;
        border-radius: 16px 16px 0 0;
    }
    #vm-ct .vm-ct-dtside:has(> [data-nopin]:not([hidden])) > [data-del-lead] .vm-ct-lead-rows { border-radius: 12px 12px 0 0; }
    #vm-ct .vm-ct-dtside > [data-nopin] {
        margin: 0 14px;
        padding: 0 16px 16px;
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 0;
        border-radius: 0 0 16px 16px;
        background: #e3f4f0;
        box-shadow: none;
        overflow: visible;
    }
    #vm-ct .vm-ct-dtside > [data-nopin] > .vm-ct-door {
        order: 1;
        min-height: 44px;
        padding: 11px 14px 2px;
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: start;
        border-top: 1px solid #f0f2f4;
        background: #fff;
    }
    #vm-ct .vm-ct-dtside > [data-nopin] .vm-ct-tile {
        width: 16px;
        height: auto;
        margin-top: 4px;
        border-radius: 0;
        background: none;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-dtside > [data-nopin] .vm-ct-tile i { font-size: 13px; }
    #vm-ct .vm-ct-dtside > [data-nopin] .vm-ct-door-main { min-width: 0; }
    #vm-ct .vm-ct-dtside > [data-nopin] .vm-ct-door-t {
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.5;
        color: #0f172a;
    }
    #vm-ct .vm-ct-dtside > [data-nopin] .vm-ct-chev {
        align-self: center;
        font-size: 13px;
        color: #64748b;
    }
    #vm-ct .vm-ct-dtside > [data-nopin] > .vm-ct-nopin-t {
        order: 2;
        padding: 0 14px 11px 40px;
        border-radius: 0 0 12px 12px;
        background: #fff;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.45;
        color: #334155;
    }
    @media (hover: hover) {
        #vm-ct .vm-ct-dtside > [data-nopin] > .vm-ct-door:hover { background: #f8fafc; }
    }
}


/* --------------------------------------------------------------------
   10. 29f: the picture, what customers see, and the act at the foot
   (29-d-photo; 29-d-states' photo on the page)
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-dtcard > .vm-ct-shot .vm-ct-shot-pic {
        height: 300px;
        margin: 20px 20px 0;
        aspect-ratio: auto;
        border-radius: 14px;
    }
    #vm-ct .vm-ct-dtcard > .vm-ct-shot .vm-ct-shot-pic--none { background: #16a085; }
    #vm-ct .vm-ct-dtcard > .vm-ct-shot:has([data-shot-acts]) .vm-ct-shot-pic { height: 340px; }
    #vm-ct .vm-ct-shot-mono {
        font-size: 120px;
        color: #fff;
    }
    #vm-ct .vm-ct-shot-cap { padding: 16px 24px 18px; }
    #vm-ct .vm-ct-shot-k {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-shot-v {
        margin-top: 4px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.4px;
        line-height: 1.3;
        color: #0f172a;
    }

    /* No photo: the device's chooser is the one act (no camera from 901),
       solid, at the foot's right. */
    #vm-ct [data-photo-acts] [data-photo="camera"] { display: none; }
    #vm-ct .vm-ct-dtcard--foot > [data-photo-acts] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    #vm-ct [data-photo-acts] [data-photo="pick"] {
        width: auto;
        min-height: 52px;
        padding: 0 24px 0 20px;
        gap: 9px;
        background: #0f6d5c;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .25);
        color: #fff;
        font-size: 15px;
        white-space: nowrap;
    }
    #vm-ct [data-photo-acts] [data-photo="pick"] i { font-size: 13px; }
    #vm-ct [data-photo-acts] .vm-ct-photo-err {
        flex-basis: 100%;
        font-size: 14px;
        text-align: right;
    }

    /* A photo on the page: its info line goes; Choose another, Remove the
       photo and its line at the foot. */
    #vm-ct .vm-ct-dtcard:has([data-shot-acts]) > .vm-ct-info { display: none; }
    #vm-ct .vm-ct-shot-acts {
        margin-top: 16px;
        padding: 16px 24px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-ct .vm-ct-shot-acts > .vm-ct-fill {
        width: auto;
        min-height: 48px;
        padding: 0 20px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14.5px;
        white-space: nowrap;
    }
    #vm-ct .vm-ct-shot-acts > .vm-ct-quiet,
    #vm-ct .vm-ct-remove > .vm-ct-quiet {
        width: auto;
        height: 48px;
        padding: 0 20px;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #cbd5e1;
        color: #0f172a;
        font-size: 14.5px;
        white-space: nowrap;
    }
    #vm-ct .vm-ct-shot-acts > .vm-ct-line {
        flex: 1;
        min-width: 0;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
        color: #475569;
    }
    #vm-ct .vm-ct-shot-acts > .vm-ct-photo-err { flex-basis: 100%; font-size: 14px; }
    @media (hover: hover) {
        #vm-ct [data-photo-acts] [data-photo="pick"]:not(:disabled):hover { background: #0c5b4c; }
        #vm-ct .vm-ct-shot-acts > .vm-ct-fill:not(:disabled):hover { background: #d3ede6; }
        #vm-ct .vm-ct-shot-acts > .vm-ct-quiet:not(:disabled):hover,
        #vm-ct .vm-ct-remove > .vm-ct-quiet:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px #475569; }
    }
}


/* --------------------------------------------------------------------
   11. 29h: the pin's block (its words | its rows and the map door) and
   the act at the foot (29-d-map; 29-d-states' placed)
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-ct-pincard-in,
    #vm-ct .vm-ct-pincard-in.is-bare {
        margin: 16px 16px 0;
        padding: 20px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 24px;
        align-items: start;
        border-radius: 16px;
        background: #e3f4f0;
    }
    #vm-ct .vm-ct-pincard-in.is-bare { background: #f1f5f9; }
    #vm-ct .vm-ct-pincard-in:not(:has(> .vm-ct-pinside)) { grid-template-columns: minmax(0, 1fr); }
    #vm-ct .vm-ct-pincard .vm-ct-lead-in {
        padding: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-ct-pincard .vm-ct-lead-k {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-pincard .vm-ct-lead-h {
        margin-top: 6px;
        font-size: 30px;
        letter-spacing: -.8px;
        line-height: 1.15;
    }
    #vm-ct .vm-ct-coords {
        margin-top: 6px;
        font-size: 15px;
        color: #334155;
    }
    #vm-ct .vm-ct-pinside {
        min-width: 0;
        overflow: hidden;
        border-radius: 12px;
        background: #fff;
    }
    #vm-ct .vm-ct-pinside .vm-ct-info-rows {
        margin: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-ct-pinside .vm-ct-info-row {
        padding: 12px 14px;
        gap: 12px;
        border: 0;
    }
    /* The hairlines between the rows stop 14 short of each edge. */
    #vm-ct .vm-ct-pinside .vm-ct-info-row + .vm-ct-info-row,
    #vm-ct .vm-ct-pinside > .vm-ct-info-rows + .vm-ct-mapdoor {
        border-top: 0;
        background: linear-gradient(#f0f2f4, #f0f2f4) 14px 0 / calc(100% - 28px) 1px no-repeat;
    }
    #vm-ct .vm-ct-pinside .vm-ct-info-row i {
        width: 16px;
        margin-top: 4px;
        font-size: 13px;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-pinside .vm-ct-info-row span {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
        color: #0f172a;
        text-wrap: pretty;
    }
    #vm-ct .vm-ct-pinside .vm-ct-info-row span span { font-size: inherit; }
    #vm-ct .vm-ct-pinside .vm-ct-mapdoor {
        min-height: 44px;
        margin: 0;
        padding: 12px 14px;
        gap: 12px;
        border: 0;
    }
    #vm-ct .vm-ct-pinside .vm-ct-mapdoor .vm-ct-tile {
        width: 16px;
        height: auto;
        align-self: flex-start;
        margin-top: 4px;
        border-radius: 0;
        background: none;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-pinside .vm-ct-mapdoor .vm-ct-tile i { font-size: 13px; }
    #vm-ct .vm-ct-pinside .vm-ct-door-t { font-size: 14.5px; font-weight: 700; color: #0f172a; }
    #vm-ct .vm-ct-pinside .vm-ct-door-s { margin-top: 2px; font-size: 13.5px; line-height: 1.45; color: #334155; }
    #vm-ct .vm-ct-pinside .vm-ct-chev { font-size: 13px; color: #64748b; }

    /* The acts: the line at the foot's left, the map's act at its right;
       Remove the pin quiet, its line beside it. */
    #vm-ct .vm-ct-dtcard > [data-pin-acts] { gap: 0; }
    #vm-ct [data-pin-acts] .vm-ct-acts {
        padding: 16px 24px;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: center;
        gap: 24px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-ct [data-pin-acts] .vm-ct-acts > .vm-ct-solid {
        width: auto;
        min-height: 52px;
        padding: 0 24px 0 20px;
        flex-shrink: 0;
        background: #0f6d5c;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .25);
        white-space: nowrap;
    }
    #vm-ct [data-pin-acts] .vm-ct-acts > .vm-ct-solid i { font-size: 13px; }
    #vm-ct [data-pin-acts] .vm-ct-caption {
        flex: 1;
        min-width: 0;
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
        color: #475569;
    }
    #vm-ct [data-pin-acts] .vm-ct-caption.is-said { font-weight: 600; color: #0f172a; }
    #vm-ct [data-pin-acts] .vm-ct-remove {
        padding: 14px 24px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        border-top: 1px solid #f0f2f4;
    }
    #vm-ct [data-pin-acts] > .vm-ct-fail {
        padding: 16px 24px;
        border-top: 1px solid #f0f2f4;
    }
    @media (hover: hover) {
        #vm-ct .vm-ct-pinside .vm-ct-mapdoor:hover { background-color: #f8fafc; }
        #vm-ct [data-pin-acts] .vm-ct-acts > .vm-ct-solid:not(:disabled):hover { background: #0c5b4c; }
    }
}


/* --------------------------------------------------------------------
   12. The sheets as 480 dialogs (29-d-day, 29-d-states' bad day and the
   landmark): radius 20, the head, the mint day block, the pickers, and
   Cancel | the commit at the foot
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
    #vm-ct .vm-sheet--ct.is-open {
        padding: 22px 24px 24px;
        gap: 14px;
        border-radius: 20px;
        max-height: calc(100vh - 96px);
    }
    #vm-ct .vm-ct-shead {
        padding-top: 0;
        gap: 14px;
    }
    #vm-ct .vm-ct-stile {
        width: 48px;
        height: 40px;
        border-radius: 12px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 12.5px;
        letter-spacing: .04em;
    }
    #vm-ct .vm-ct-stitle {
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }
    /* The landmark's head is its title alone (29-d-states). */
    #vm-ct .vm-ct-shead:has(+ .vm-ct-landin) > .vm-ct-stile { display: none; }

    #vm-ct .vm-ct-sday {
        padding: 14px 16px 12px;
        border-radius: 14px;
        background: #e3f4f0;
    }
    #vm-ct .vm-ct-sday .vm-ct-lead-k {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f6d5c;
    }
    #vm-ct .vm-ct-sstrip {
        height: 14px;
        overflow: hidden;
        background: #eef1f5;
    }
    #vm-ct .vm-ct-sstrip .vm-ct-seg { background: #16a085; }
    #vm-ct .vm-ct-sscale {
        margin-top: 6px;
        font-size: 11.5px;
        font-weight: 400;
        color: #475569;
    }
    #vm-ct .vm-ct-picks {
        padding-top: 2px;
        gap: 12px;
    }
    #vm-ct .vm-ct-pickcol .vm-ct-label {
        font-size: 13.5px;
        font-weight: 600;
        color: #334155;
    }
    #vm-ct .vm-ct-pick {
        height: 52px;
        padding: 0 14px 0 16px;
        border: 1.5px solid #cbd5e1;
        font-size: 17px;
    }
    #vm-ct .vm-ct-pick i { font-size: 13px; color: #475569; }
    #vm-ct .vm-ct-pick[aria-expanded="true"] { border-color: #0f6d5c; }
    #vm-ct .vm-ct-pick[aria-invalid="true"] { border-color: #0f172a; }
    #vm-ct .vm-ct-err--day { font-size: 14px; }
    #vm-ct .vm-ct-closedrow {
        margin-top: 2px;
        border-top-color: #f0f2f4;
    }
    #vm-ct .vm-ct-closedrow .vm-ct-togt {
        font-size: 15px;
        font-weight: 600;
        color: #0f172a;
    }
    #vm-ct .vm-ct-same {
        min-height: 48px;
        font-size: 14.5px;
    }
    #vm-ct .vm-ct-sacts:empty { display: none; }

    /* The landmark: the box, its line. */
    #vm-ct .vm-ct-landin {
        min-height: 52px;
        padding: 14px 16px;
        border: 1.5px solid #cbd5e1;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.45;
    }
    #vm-ct .vm-ct-landin:focus { border-color: #0f6d5c; }

    /* The foot: Cancel bordered, then the commit, at the right. */
    #vm-ct .vm-ct-sfoot,
    #vm-ct .vm-ct-sacts--row {
        margin-top: 6px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }
    #vm-ct .vm-ct-sfoot > .vm-ct-cancel,
    #vm-ct .vm-ct-sacts--row > .vm-ct-cancel {
        width: auto;
        height: 48px;
        padding: 0 20px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #cbd5e1;
        color: #0f172a;
        font-size: 14.5px;
        white-space: nowrap;
    }
    /* The quiet foot Cancel: the teal word, no ring (49-d's gallery foot,
       43-d's close dialog), one rule for the two (desktop slice H7b). */
    #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-cancel,
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-cancel {
        height: 48px;
        min-width: 0;
        padding: 0 18px;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        color: #0f6d5c;
        font-size: 14.5px;
        font-weight: 700;
        white-space: nowrap;
    }
    #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-cancel:focus-visible,
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-cancel:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-ct .vm-ct-sfoot > .vm-ct-set,
    #vm-ct .vm-ct-sacts--row > .vm-ct-set {
        width: auto;
        min-height: 48px;
        padding: 0 24px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    #vm-ct .vm-ct-sfoot > .vm-ct-set:not(:disabled),
    #vm-ct .vm-ct-sacts--row > .vm-ct-set:not(:disabled) {
        background: #0f6d5c;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .25);
    }
    @media (hover: hover) {
        #vm-ct .vm-ct-sfoot > .vm-ct-cancel:hover,
        #vm-ct .vm-ct-sacts--row > .vm-ct-cancel:hover { box-shadow: inset 0 0 0 1.5px #475569; }
        #vm-ct .vm-ct-gl-foot .vm-ct-sacts--row > .vm-ct-cancel:hover,
        #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-cancel:hover { background: #e3f4f0; box-shadow: none; }
        #vm-ct .vm-ct-sfoot > .vm-ct-set:not(:disabled):hover,
        #vm-ct .vm-ct-sacts--row > .vm-ct-set:not(:disabled):hover { background: #0c5b4c; }
    }
}