/* ====================================================================
   SCREEN 43 — CLOSED FOR NOW, the desktop layer (desktop slice H1,
   2026-10-10). pharmacy/counter.html only, linked after
   desktop/29-counter.css.

   Frames: 43-d (the dialog open over 29-d, back on Monday 12 October)
   and 43-d-states (until I open it again with the duty rows and the
   checkbox; Today only, saving; could not save; while the days are read;
   the read failed) in docs/design/pharmacy/screens/43/desktop/
   frame.html; the sheet docs/design/pharmacy/screens/43/desktop/
   FACTS.md; brief briefs/2026-10-10_desktop-slice-H1.md, rules
   briefs/2026-10-10_desktop-build-rules-43-49.md §3.

   43b from 901 is a 480 dialog in 31-d-states' family (the lab's close
   dialog): radius 20, 72 from the top, the title alone in its head,
   three radio rows of 52 (the picked one mint) with the code's rules
   between them, the day chips a rail of five whole and a cut sixth
   under "Until a day I pick" (aligned with its words, 46 in) with the
   row's two 36 arrows, the grey block between the choices and the note,
   the note's count on its label row, and Cancel | the commit at the
   foot, the failure one line over it. counter.js moves Cancel into the
   foot and makes the arrows' row (placeClose / placeDayArrows); below
   901 it puts every node back.

   Every rule is scoped by the sheet's own hook, .vm-sheet--cl (the
   counter's one sheet host also carries 29c, the landmark, About us,
   Photos and 48d). Every rule sits inside the min-width query: the phone
   is byte-frozen. No yellow, no orange, no prescription blue.
   ==================================================================== */

@media (min-width: 901px) {

    /* -- The dialog: 480 (shared §3's modifier), radius 20 (29-counter
       §12), 72 from the top and centred across, so a choice that grows
       or shrinks the rows never moves its head. ------------------------- */
    #vm-ct .vm-sheet--ct.vm-sheet--cl.is-open {
        top: 72px;
        transform: translateX(-50%);
        max-height: calc(100vh - 96px);
        padding: 22px 24px 20px;
        gap: 14px;
    }

    /* -- The head: the title alone (Cancel is at the foot). ------------ */
    #vm-ct .vm-sheet--cl .vm-cl-head {
        padding: 0;
        margin-bottom: 4px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-title {
        font-size: 20px;
        letter-spacing: -.4px;
        line-height: 1.2;
        color: #0f172a;
    }

    /* -- While the days are read; when they could not be. ------------- */
    #vm-ct .vm-sheet--cl .vm-cl-loading {
        padding: 4px 0 8px;
        font-size: 14px;
        color: #475569;
    }
    #vm-ct .vm-sheet--cl .vm-cl-readfail {
        padding: 2px 0 4px;
        gap: 12px;
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        background: none;
    }
    #vm-ct .vm-sheet--cl .vm-cl-readfail .vm-ct-state-t {
        font-size: 15px;
        line-height: 1.4;
        color: #0f172a;
    }
    #vm-ct .vm-sheet--cl .vm-cl-readfail .vm-ct-retry {
        width: auto;
        height: 44px;
        margin-top: 0;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 0;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-readfail .vm-ct-retry i { font-size: 12.5px; }

    /* -- The three radio rows: 52, a ring at the start (the phone's
       check at the end goes), the picked one mint, the code's rules. ---- */
    #vm-ct .vm-sheet--cl .vm-cl-choice {
        min-height: 52px;
        padding: 0 14px;
        gap: 12px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-choice:has(.vm-cl-choice-s) { padding: 8px 14px; }
    #vm-ct .vm-sheet--cl .vm-cl-choice::before {
        content: "";
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 999px;
        border: 2px solid #94a3b8;
    }
    #vm-ct .vm-sheet--cl .vm-cl-choice[aria-checked="true"] { background: #e3f4f0; }
    #vm-ct .vm-sheet--cl .vm-cl-choice[aria-checked="true"]::before {
        border-color: #0f6d5c;
        background: radial-gradient(circle, #0f6d5c 0 4.5px, transparent 5px);
    }
    #vm-ct .vm-sheet--cl .vm-cl-choice:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    #vm-ct .vm-sheet--cl .vm-cl-mark { display: none; }
    #vm-ct .vm-sheet--cl .vm-cl-choice-t {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        letter-spacing: 0;
        color: #0f172a;
    }
    #vm-ct .vm-sheet--cl .vm-cl-choice[aria-checked="true"] .vm-cl-choice-t { color: #0f6d5c; }
    #vm-ct .vm-sheet--cl .vm-cl-choice-s {
        margin-top: 1px;
        font-size: 13px;
        color: #475569;
    }
    #vm-ct .vm-sheet--cl .vm-cl-rule {
        margin: 2px 14px;
        background: #f0f2f4;
    }

    /* "Until a day I pick" and its two arrows on one row (counter.js
       makes the row from 901): the row is mint while the choice is
       picked; the arrows show only then, and only while the rail has
       more than it shows. */
    #vm-ct .vm-sheet--cl .vm-cl-pick {
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 12px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-pick > .vm-cl-choice { flex: 1 1 auto; min-width: 0; }
    #vm-ct .vm-sheet--cl .vm-cl-pick:has(> .vm-cl-choice[aria-checked="true"]) { background: #e3f4f0; }
    #vm-ct .vm-sheet--cl .vm-cl-pick:has(> .vm-cl-arrows:not([hidden])) { padding-right: 8px; }
    #vm-ct .vm-sheet--cl .vm-cl-arrows { flex-shrink: 0; gap: 6px; }
    /* Home's arrow (shared §5's .vm-dt-rail-arrow) at 36, 43-d's size. */
    #vm-ct .vm-sheet--cl .vm-cl-arrow {
        width: 36px;
        height: 36px;
        border: 0;
        box-shadow: inset 0 0 0 1px #e2e8f0;
        color: #0f6d5c;
        font-size: 12px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-arrow[disabled] { color: #cbd5e1; }

    /* The day chips: a rail of 62 x 60 chips 6 apart, under the choice's
       words (46 in), 386 wide: five whole and 46 of the sixth. It hides
       its overflow as on the phone; drag and the keys walk it, the
       arrows page it five at a time. */
    #vm-ct .vm-sheet--cl .vm-cl-days {
        gap: 6px;
        margin: 6px 0 4px 46px;
        padding: 2px 0;
    }
    #vm-ct .vm-sheet--cl .vm-cl-chip {
        border-radius: 12px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #e2e8f0;
    }
    #vm-ct .vm-sheet--cl .vm-cl-dday { font-size: 13px; color: #0f172a; }
    #vm-ct .vm-sheet--cl .vm-cl-dtime { font-size: 12px; color: #64748b; }
    #vm-ct .vm-sheet--cl .vm-cl-chip[aria-checked="true"] { background: #0f6d5c; box-shadow: none; }
    #vm-ct .vm-sheet--cl .vm-cl-chip[aria-checked="true"] .vm-cl-dday { color: #fff; }
    #vm-ct .vm-sheet--cl .vm-cl-chip[aria-checked="true"] .vm-cl-dtime { color: #e3f4f0; }
    /* Inside the chip: the rail clips its overflow at the chip's edge. */
    #vm-ct .vm-sheet--cl .vm-cl-chip:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    #vm-ct .vm-sheet--cl .vm-cl-chip[aria-checked="true"]:focus-visible { outline-color: #fff; outline-offset: -4px; }

    /* -- The grey block, between the choices and the note: white rows;
       the duty checkbox a 44 row inside the first duty night's row. ----- */
    #vm-ct .vm-sheet--cl .vm-cl-facts {
        padding: 8px;
        gap: 6px;
        border-radius: 14px;
        background: #f1f5f9;
    }
    #vm-ct .vm-sheet--cl .vm-cl-fact { padding: 10px 12px; gap: 10px; }
    #vm-ct .vm-sheet--cl .vm-cl-fact i { color: #475569; }
    #vm-ct .vm-sheet--cl .vm-cl-fact span {
        font-size: 13.5px;
        color: #0f172a;
    }
    #vm-ct .vm-sheet--cl .vm-cl-duty {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-skip {
        width: auto;
        margin: 0 0 4px 24px;
        padding: 0 12px;
        gap: 10px;
        border-top: 0;
        border-radius: 10px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-skip > span:last-child { font-size: 14px; color: #0f172a; }
    #vm-ct .vm-sheet--cl .vm-cl-skip[aria-checked="true"] .vm-cl-box { background: #0f6d5c; border-color: #0f6d5c; }
    #vm-ct .vm-sheet--cl .vm-cl-skip:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    /* -- The note: its count on the label row. ------------------------ */
    #vm-ct .vm-sheet--cl .vm-cl-word { margin-top: 2px; }
    #vm-ct .vm-sheet--cl .vm-cl-word-k { padding: 0; gap: 12px; }
    #vm-ct .vm-sheet--cl .vm-cl-word-k label { font-size: 13.5px; color: #0f172a; }
    #vm-ct .vm-sheet--cl .vm-cl-word-k label span { color: #64748b; }
    #vm-ct .vm-sheet--cl .vm-cl-count { font-size: 13px; color: #475569; }
    #vm-ct .vm-sheet--cl .vm-cl-notein {
        padding: 0 14px;
        border-color: #cbd5e1;
        font-size: 15px;
        color: #0f172a;
    }
    /* Its ring is the focus (43-d: 1.5 #16a085), not the page's outline. */
    #vm-ct .vm-sheet--cl .vm-cl-notein:focus { border-color: #16a085; }
    #vm-ct .vm-sheet--cl .vm-cl-notein:focus-visible { outline: none; }

    /* -- The foot: Cancel | the commit at the right; a failure one line
       over them, at the right too, the choice and the note kept. -------- */
    #vm-ct .vm-sheet--cl .vm-cl-go {
        margin-top: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 16px 10px;
    }
    #vm-ct .vm-sheet--cl .vm-cl-go:has(> .vm-cl-fail:not([hidden])) { margin-top: 0; }
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-fail {
        order: -1;
        flex: 0 0 100%;
        justify-content: flex-end;
        gap: 8px;
        font-size: 13px;
        line-height: 1.45;
        color: #0f172a;
    }
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-fail i { color: #475569; }
    /* Cancel: the quiet teal word, 29-counter.css §12's foot Cancel. */
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-commit {
        width: auto;
        height: 48px;
        min-height: 48px;
        padding: 0 24px;
        flex: 0 0 auto;
        font-size: 14.5px;
        white-space: nowrap;
    }
    /* Saving…: the commit keeps its words, inert (43-d-states). */
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-commit:disabled {
        background: #e2e8f0;
        color: #475569;
        box-shadow: none;
        cursor: default;
    }
    #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-commit:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    @media (hover: hover) {
        #vm-ct .vm-sheet--cl .vm-cl-choice:not([aria-checked="true"]):hover { background: #f8fafc; }
        #vm-ct .vm-sheet--cl .vm-cl-arrow:not([disabled]):hover { background: #e3f4f0; color: #0f6d5c; }
        #vm-ct .vm-sheet--cl .vm-cl-chip:not([aria-checked="true"]):hover { box-shadow: inset 0 0 0 1.5px #16a085; }
        #vm-ct .vm-sheet--cl .vm-cl-skip:hover { background: #f8fafc; }
        #vm-ct .vm-sheet--cl .vm-cl-readfail .vm-ct-retry:hover { background: #d3ede6; }
        #vm-ct .vm-sheet--cl .vm-cl-go > .vm-cl-commit:not(:disabled):hover { background: #0c5b4c; }
    }
}