/* ====================================================================
   SCREEN 31 — YOUR STRUCTURE, the desktop layer (desktop slice E0,
   2026-10-09)

   Frames built: 31-d (31a at 1280), 31-d-numbers (31b), 31-d-where (31c,
   the pin as the form's last labelled row), 31-d-payment (31d),
   31-d-doctor (31e), 31-d-about (the 480 dialog), 31-d-narrow (31a at
   1000), 31-d-states (the close in the band, the linked pharmacy, a save
   that failed, the pin's rows, the Photos and Close for now dialogs, the
   read failed, nothing listed, not yours). The map dialog itself is
   css/exams/map-pin.css's.
   Source: docs/design/pharmacy/screens/31/desktop/FACTS.md, the records
   in screens/desktop-26-34/records/ (the design pass wins), and
   briefs/2026-10-09_desktop-build-rules-26-34.md.

   Tiers: >=901 the structure side's own header (shared §12), 31a's lead
   card as the band (shared §19), the views' flow band (shared §13), ONE
   card per view with its act at the card's foot (not fixed), the sheets
   as 480 dialogs with Cancel | commit; 31a one column, the column's two
   cards side by side under the ledger · >=1120 31a's main | 340 column
   (not sticky), the headline at 40. Nothing here reaches the phone: every
   rule sits inside a min-width query. js/exams/your-structure.js moves
   the nodes this file lays out (and back below 901).
   Written against the page's own prefix (.vm-ys-) and the wrappers the
   page makes (.vm-ys-dt-main, .vm-ys-dt-aside).
   From shared.css since E10 (the consolidation): the views' flow band
   with its line (§13's .vm-dt-flow-band--sub), the name read, not drawn
   while the lead shows (§13), the headline at 40 at both tiers (§19),
   Your page and the column's Close for now as §14's lifted ledger, the
   doors' 40 | 196 | 1fr | 16 row (§14's .vm-dt-ledger-row--door), the
   states as §9's lifted state card, the dialogs' Cancel (§15's
   .vm-dt-act-cancel).
   ==================================================================== */

@media (min-width: 901px) {
    /* -- The page ------------------------------------------------------- */
    #vm-exams-ys {
        background: linear-gradient(180deg, #f4fbf9 0%, #f8fafc 560px);
    }

    /* -- The bands: no phone edges; the views' title over its line ------ */
    #vm-exams-ys .vm-ys-band {
        border-top: 0;
        border-bottom: 0;
    }
    /* (§13's flow band with its line: the exit | the title over it.) */
    #vm-exams-ys .vm-ys-band.vm-dt-flow-band { padding-top: 22px; }
    .vm-ys-band.vm-dt-flow-band > .vm-ys-toprow { height: auto; }

    /* -- 31a: the lead card is the band (shared §19; the name read, not
       drawn, while the lead shows: §13) -------------------------------- */
    .vm-ys-band--lead > .vm-ys-toprow { height: auto; }
    .vm-ys-band--lead > .vm-ys-card {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 24px;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
    .vm-ys-band--lead .vm-ys-block {
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .vm-ys-band--lead .vm-ys-k { color: #e2e8f0; }
    .vm-ys-band--lead .vm-ys-num { white-space: nowrap; }
    .vm-ys-band--lead .vm-ys-num .vm-ys-cc {
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 0;
        color: #e2e8f0;
    }
    .vm-ys-band--lead .vm-ys-num.is-none { font-size: 40px; letter-spacing: -1px; }
    .vm-ys-band--lead .vm-ys-closed-h { letter-spacing: -1.1px; }
    .vm-ys-band--lead .vm-ys-rows-in { margin-top: 0; gap: 0; }
    .vm-ys-band--lead .vm-ys-row {
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .vm-ys-band--lead .vm-ys-row-t {
        font-size: inherit;
        font-weight: 400;
        line-height: inherit;
        color: inherit;
    }
    .vm-ys-band--lead .vm-ys-row--grey i { color: #8ff08b; }
    .vm-ys-band--lead .vm-ys-solid {
        width: auto;
        height: 48px;
    }
    .vm-ys-band--lead .vm-ys-err {
        flex: 1 0 100%;
        justify-content: flex-end;
        color: #fff;
    }
    /* The close's strip on the mat (29-d's states): a day over an 8 bar. */
    .vm-ys-band--lead .vm-ys-strip {
        margin-top: 12px;
        max-width: 420px;
        padding: 0;
        gap: 10px;
        background: none;
        border-radius: 0;
    }
    .vm-ys-band--lead .vm-ys-strip-cell { gap: 4px; }
    .vm-ys-band--lead .vm-ys-strip-cell.is-jump { border-left-color: rgba(255, 255, 255, .4); padding-left: 8px; }
    .vm-ys-band--lead .vm-ys-strip-d {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        color: #e2e8f0;
        text-align: left;
    }
    .vm-ys-band--lead .vm-ys-strip-bar {
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .18);
    }
    .vm-ys-band--lead .vm-ys-strip-bar.is-until {
        background: linear-gradient(90deg, #8ff08b 0 var(--a, 0%), rgba(255, 255, 255, .18) var(--a, 0%) 100%);
    }
    .vm-ys-band--lead .vm-ys-strip-bar.is-from {
        background: linear-gradient(90deg, rgba(255, 255, 255, .18) 0 var(--a, 0%), #8ff08b var(--a, 0%) 100%);
    }
    .vm-ys-band--lead .vm-ys-strip-n {
        min-height: 18px;
        font-size: 12px;
        color: #e2e8f0;
        text-align: left;
    }

    /* -- 31a: the main column and the column ---------------------------- */
    .vm-ys-body--facts {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 24px 64px;
        gap: 24px;
    }
    .vm-ys-body--facts > .vm-ys-state,
    .vm-ys-body--facts > .vm-loading { max-width: 640px; }
    .vm-ys-facts { gap: 24px; }
    .vm-ys-dt-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .vm-ys-dt-aside {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
        align-items: start;
    }

    /* The lead card while a close holds the band: white, one row. */
    .vm-ys-dt-main > .vm-ys-lead {
        padding: 20px 24px;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-block {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        background: none;
    }
    /* (Its nodes carry §19's classes for the band: here they are undone.) */
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-k { font-size: 13.5px; color: #475569; }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-num {
        font-size: 30px;
        letter-spacing: -.8px;
        color: #0f172a;
        white-space: nowrap;
    }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-num .vm-ys-cc { font-size: 17px; color: #64748b; }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-rows-in { margin-top: 0; }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-row { margin-top: 6px; padding: 0; background: none; color: #475569; }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-row > i { color: #0f6d5c; }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-row-t { font-size: 14px; font-weight: 400; color: #475569; }
    .vm-ys-dt-main > .vm-ys-lead .vm-ys-solid {
        width: auto;
        height: 48px;
        padding: 0 22px 0 18px;
        flex-shrink: 0;
        background: #0f6d5c;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .26);
        color: #fff;
        font-size: 14.5px;
        white-space: nowrap;
    }

    /* "Your page": its heading over the code's sub, then the ledger. */
    .vm-ys-group { gap: 14px; }
    .vm-ys-group > .vm-ys-h {
        padding: 0;
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }
    .vm-ys-group > .vm-ys-sub {
        margin: -10px 0 0;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    /* (Its ledger and the column's are §14's lifted ledger.) */

    /* The ledger's rows: §14's door rows (tile 40 | label 196 | the code's
       lines | chevron); their insides and the hairline's colour here. */
    [data-doors] > .vm-ys-door:has(.vm-ys-door-s > :nth-child(2)) { min-height: 74px; }
    [data-doors] > .vm-ys-door + .vm-ys-door { border-top-color: #f0f2f4; }
    [data-doors] .vm-ys-door-main { display: contents; }
    [data-doors] .vm-ys-tile {
        grid-column: 1;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    [data-doors] .vm-ys-door-t {
        grid-column: 2;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }
    [data-doors] .vm-ys-door-s {
        grid-column: 3;
        min-width: 0;
        margin: 0;
        gap: 1px;
        font-size: 14px;
        line-height: 1.45;
        color: #475569;
        text-wrap: pretty;
    }
    [data-doors] .vm-ys-chev {
        grid-column: 4;
        justify-self: end;
        font-size: 13px;
        color: #64748b;
    }
    /* 48e: the row opens the pharmacy; a quiet Unlink sits inside it. */
    [data-doors] > .vm-ys-door.vm-ys-linkdoor {
        min-height: 0;
        padding: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0;
        align-items: center;
    }
    .vm-ys-linkdoor > .vm-ys-linkdoor-go {
        min-height: 64px;
        padding: 11px 20px;
        display: grid;
        grid-template-columns: 40px 196px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
    }
    .vm-ys-linkdoor > .vm-ys-unlink {
        height: 44px;
        margin: 0 16px 0 0;
        padding: 0 4px;
        background: transparent;
        color: #475569;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }
    .vm-ys-linkdoor > .vm-ys-linkdoor-fail { grid-column: 1 / -1; padding: 0 20px 12px; }

    /* The column: Close for now, then the facts fixed at listing. */
    .vm-ys-dt-aside .vm-ys-door {
        min-height: 68px;
        padding: 12px 18px;
        gap: 14px;
    }
    .vm-ys-dt-aside .vm-ys-tile {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .vm-ys-dt-aside .vm-ys-door-t { font-size: 15px; font-weight: 700; }
    .vm-ys-dt-aside .vm-ys-chev { color: #64748b; }
    .vm-ys-dt-aside > .vm-ys-held {
        padding: 18px 20px;
        gap: 6px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
    }
    .vm-ys-held-t { font-size: 14px; line-height: 1.5; color: #334155; }
    .vm-ys-held-go { min-height: 44px; height: auto; font-size: 14px; }
    .vm-ys-held-go i { font-size: 12px; }

    /* The states around 31a: §9's lifted state card; its acts. */
    .vm-ys-state > .vm-ys-fill,
    .vm-ys-state > .vm-ys-solid {
        width: auto;
        margin-top: 6px;
        padding: 0 20px;
        white-space: nowrap;
    }
    .vm-ys-state > .vm-ys-solid { height: 52px; padding: 0 26px; }

    /* -- 31b-31e: ONE card, its act at its foot ------------------------- */
    .vm-ys-view > .vm-ys-body:not(.vm-ys-body--facts) {
        flex: 0 0 auto;
        width: calc(100% - 48px);
        max-width: 764px;
        margin: 32px auto 64px;
        padding: 0;
        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-ys-body:not(.vm-ys-body--facts) > .vm-ys-card {
        padding: 0;
        gap: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* The labelled rows: label 172 | control 460 (23-d's). */
    .vm-ys-form > .vm-ys-pair { display: contents; }
    .vm-ys-form > .vm-ys-field,
    .vm-ys-form > .vm-ys-pair > .vm-ys-field,
    .vm-ys-form > .vm-ys-wa {
        padding: 16px 24px;
        display: grid;
        grid-template-columns: 172px minmax(0, 460px);
        column-gap: 24px;
        row-gap: 8px;
        align-items: start;
        border-top: 1px solid #f0f2f4;
    }
    .vm-ys-form > .vm-ys-field > *,
    .vm-ys-form > .vm-ys-pair > .vm-ys-field > *,
    .vm-ys-form > .vm-ys-wa > * { grid-column: 2; min-width: 0; }
    .vm-ys-form .vm-ys-field > .vm-ys-label,
    .vm-ys-form > .vm-ys-wa > .vm-ys-label {
        grid-column: 1;
        grid-row: 1;
        padding-top: 13px;
        font-size: 14.5px;
        font-weight: 700;
        color: #0f172a;
    }
    .vm-ys-form > .vm-ys-wa > .vm-ys-field { display: flex; }
    .vm-ys-form .vm-ys-help {
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
        text-wrap: pretty;
    }
    .vm-ys-form .vm-ys-err { font-size: 13.5px; }
    .vm-ys-form > .vm-ys-err--tuck {
        margin: 0;
        padding: 0 24px 14px 220px;
    }
    .vm-ys-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .vm-ys-chip {
        height: 44px;
        padding: 0 16px;
        background: #f1f5f9;
        color: #334155;
        font-size: 14px;
        font-weight: 700;
    }
    .vm-ys-chip[aria-pressed="true"] { background: #0f6d5c; color: #fff; }

    /* 31b's "Once you save": the sentence left, the booked line right. */
    .vm-ys-body > .vm-ys-note {
        margin: 16px 16px 0;
        padding: 20px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 20px;
        row-gap: 4px;
        align-items: center;
        border-radius: 16px;
        background: #e3f4f0;
    }
    .vm-ys-note > .vm-ys-k {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .01em;
        color: #475569;
    }
    .vm-ys-note > .vm-ys-note-rows { display: contents; }
    .vm-ys-note-rows > .vm-ys-row:first-child {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        padding: 0;
        background: none;
        border-radius: 0;
    }
    .vm-ys-note-rows > .vm-ys-row:first-child > i { display: none; }
    .vm-ys-note-rows > .vm-ys-row:first-child > .vm-ys-row-t {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.5px;
        line-height: 1.2;
        color: #0f172a;
        text-wrap: pretty;
    }
    .vm-ys-note-rows > .vm-ys-row:last-child {
        grid-column: 2;
        grid-row: 1 / span 2;
        padding: 12px 14px;
        gap: 10px;
        border-radius: 12px;
    }

    /* 31d / 31e's "Your page will say": the new words left, the rows right. */
    .vm-ys-body > .vm-ys-lead .vm-ys-block {
        margin: 16px 16px 0;
        padding: 20px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 20px;
        align-items: center;
        border-radius: 16px;
        background: #e3f4f0;
    }
    .vm-ys-body > .vm-ys-lead .vm-ys-k {
        grid-column: 1;
        grid-row: 1;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .01em;
        color: #475569;
    }
    .vm-ys-body > .vm-ys-lead .vm-ys-now {
        grid-column: 1;
        grid-row: 2;
        margin-top: 6px;
        font-size: 14px;
        color: #475569;
    }
    .vm-ys-body > .vm-ys-lead .vm-ys-new {
        grid-column: 1;
        grid-row: 3;
        font-size: 26px;
        letter-spacing: -.5px;
        line-height: 1.2;
    }
    .vm-ys-body > .vm-ys-lead .vm-ys-rows-in {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin: 0;
        padding: 12px 14px;
        gap: 8px;
        border-radius: 12px;
        background: #fff;
    }
    .vm-ys-body > .vm-ys-lead .vm-ys-row { padding: 0; gap: 10px; border-radius: 0; }
    .vm-ys-body > .vm-ys-lead .vm-ys-row-t,
    .vm-ys-note-rows > .vm-ys-row:last-child > .vm-ys-row-t {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.45;
        color: #334155;
    }

    /* 31d's ticks and 31e's two answers, as the card's own rows. */
    .vm-ys-body > .vm-ys-checkwrap { margin-top: 16px; gap: 0; }
    #vm-exams-ys .vm-ys-checks,
    #vm-exams-ys .vm-ys-radios {
        border: 0;
        border-radius: 0;
        background: none;
    }
    .vm-ys-check {
        min-height: 56px;
        padding: 0 24px;
        gap: 14px;
        border-top: 1px solid #f0f2f4;
    }
    .vm-ys-check-t { font-size: 15.5px; }
    .vm-ys-checkwrap > .vm-ys-help--pad {
        padding: 6px 24px 0;
        font-size: 13.5px;
        color: #475569;
    }
    .vm-ys-radio {
        min-height: 68px;
        padding: 12px 24px;
        gap: 14px;
        border-top: 1px solid #f0f2f4;
    }
    .vm-ys-radios > .vm-ys-radio:first-child { border-top: 0; }
    .vm-ys-radio-t { font-size: 15.5px; font-weight: 700; }
    .vm-ys-radio-s { font-size: 14px; color: #475569; }

    /* The card's foot: the page's rule (or the failure) beside the act. */
    .vm-ys-body > .vm-ys-bar {
        position: static;
        margin-top: 4px;
        padding: 16px 24px 18px;
        display: flex;
        align-items: center;
        gap: 20px;
        border-top: 1px solid #f0f2f4;
        background: none;
        box-shadow: none;
    }
    .vm-ys-bar-say {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
        text-wrap: pretty;
    }
    .vm-ys-body > .vm-ys-bar > .vm-ys-fail {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 14px;
    }
    .vm-ys-bar > .vm-ys-fail:not([hidden]) + .vm-ys-bar-say { display: none; }
    .vm-ys-body > .vm-ys-bar > .vm-ys-commit {
        width: auto;
        height: 52px;
        padding: 0 26px;
        flex-shrink: 0;
        white-space: nowrap;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .26);
    }

    /* -- 31c: the pin, the form's last labelled row ---------------------- */
    .vm-ys-form > .vm-ys-pincard {
        padding: 16px 24px;
        display: grid;
        grid-template-columns: 196px max-content max-content minmax(0, 1fr);
        column-gap: 0;
        row-gap: 8px;
        align-items: center;
        border-top: 1px solid #f0f2f4;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .vm-ys-pin-label {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 172px;
        padding-top: 13px;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.5;
        color: #0f172a;
    }
    .vm-ys-pincard > .vm-ys-pinhead {
        grid-column: 2 / -1;
        grid-row: 1;
        max-width: 460px;
        padding-top: 12px;
    }
    .vm-ys-pincard .vm-ys-pinhead > .vm-ys-tile { display: none; }
    .vm-ys-pincard .vm-ys-pin-t { font-size: 15.5px; font-weight: 700; }
    .vm-ys-pincard .vm-ys-pin-s { font-size: 14px; line-height: 1.5; color: #475569; }
    .vm-ys-pincard > .vm-ys-fill {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        height: 44px;
        padding: 0 20px;
        justify-self: start;
        white-space: nowrap;
    }
    .vm-ys-pincard > .vm-ys-fill i { font-size: 12.5px; }
    .vm-ys-pincard > .vm-ys-quiet {
        grid-column: 3;
        grid-row: 2;
        width: auto;
        margin: 0 0 0 12px;
        padding: 0 4px;
        color: #475569;
        font-size: 14px;
        white-space: nowrap;
    }
    .vm-ys-pincard > .vm-ys-pin-say {
        grid-column: 2 / -1;
        grid-row: 3;
        max-width: 460px;
        margin: 0;
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
        text-align: left;
        text-wrap: pretty;
    }

    /* -- The sheets: 480 dialogs, Cancel | commit at the foot ----------- */
    #vm-exams-ys .vm-ys-sheet.vm-dt-dialog.is-open { padding: 22px 24px 20px; gap: 14px; }
    .vm-ys-sheet .vm-ys-grab { display: none; }
    .vm-ys-sheet-title {
        font-size: 20px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }
    .vm-ys-about-sub,
    .vm-ys-phs-sub { margin-top: -10px; font-size: 13.5px; color: #475569; }
    .vm-ys-about-in {
        min-height: 150px;
        padding: 12px 14px;
        font-size: 15px;
        line-height: 1.55;
    }
    .vm-ys-about-help,
    .vm-ys-about-count { font-size: 13px; color: #475569; }
    .vm-ys-about-acts {
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin-top: 4px;
    }
    .vm-ys-about-acts .vm-ys-about-save,
    .vm-ys-closego > .vm-ys-commit {
        flex: 0 0 auto;
        width: auto;
        height: 48px;
        padding: 0 24px;
        font-size: 14.5px;
        white-space: nowrap;
    }
    .vm-ys-about-save:disabled,
    .vm-ys-closego > .vm-ys-commit:disabled {
        opacity: 1;
        background: #e2e8f0;
        color: #64748b;
        box-shadow: none;
    }
    .vm-ys-phs-help { font-size: 13px; color: #475569; }
    .vm-ys-phadd .vm-ys-phadd-go { height: 44px; padding: 0 20px; }
    .vm-ys-phadd .vm-ys-phadd-go .fa-camera::before { content: "\f03e"; }
    .vm-ys-phadd-k { font-size: 13px; font-weight: 400; color: #475569; }
    /* -- Close for now: 43's desktop shape (desktop slice H7a, 2026-10-10)
       One close dialog across both hubs: the pharmacy's 43b
       (css/pharmacy/desktop/43-close.css, 43-d) where 31-d-states draws
       this one. 72 from the top and growing down, so a choice that grows
       or shrinks the rows never moves its head; the title alone in the
       head; three radio rows of 52, a ring at the start (the phone's check
       hidden), the picked one mint, the code's rules between; the "Until
       a day I pick" row carries the two 36 arrows (js/exams/rail.js) while
       it is picked, its rail 46 in and 386 wide (five whole chips and 46 of
       the sixth), shown only then; the people booked keep their #f1f5f9
       block (EXAMS_HUB §7.21's ruling for 31); the count at 13 under the
       field, at its right (31-d-states); Cancel | the commit at the foot,
       a failure one line over them. your-structure.js moves Cancel, makes
       the day row and, while the days are read or could not be, a foot
       holding Cancel alone (placeClose / placeCloseDay). Scoped by the
       sheet's own hook, [data-close-sheet]. ------------------------------ */
    #vm-exams-ys .vm-ys-sheet.vm-dt-dialog.is-open[data-close-sheet] {
        top: 72px;
        transform: translateX(-50%);
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-sheet-head {
        padding: 0;
        margin-bottom: 4px;
    }

    /* While the days are read; when they could not be. */
    #vm-exams-ys [data-close-sheet] .vm-loading {
        padding: 4px 0 8px;
        font-size: 14px;
        color: #475569;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-sheetfail { padding: 2px 0 4px; gap: 12px; }
    #vm-exams-ys [data-close-sheet] .vm-ys-sheetfail-t {
        font-size: 15px;
        line-height: 1.4;
        color: #0f172a;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-retry {
        height: 44px;
        padding: 0 18px;
        font-size: 14px;
    }

    /* The three radio rows. */
    #vm-exams-ys [data-close-sheet] .vm-ys-choice {
        min-height: 52px;
        padding: 0 14px;
        gap: 12px;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice:has(.vm-ys-choice-s) { padding: 8px 14px; }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice::before {
        content: "";
        box-sizing: border-box;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 999px;
        border: 2px solid #94a3b8;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice[aria-checked="true"] { background: #e3f4f0; }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice[aria-checked="true"]::before {
        border-color: #0f6d5c;
        background: radial-gradient(circle, #0f6d5c 0 4.5px, transparent 5px);
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice-mark { display: none; }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice-t {
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        letter-spacing: 0;
        color: #0f172a;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice[aria-checked="true"] .vm-ys-choice-t { color: #0f6d5c; }
    #vm-exams-ys [data-close-sheet] .vm-ys-choice-s {
        margin-top: 1px;
        font-size: 13px;
        color: #475569;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-hair {
        margin: 2px 14px;
        background: #f0f2f4;
    }

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

    /* The day chips: 62 x 60, 6 apart, under the choice's words (46 in);
       the rail hides its overflow as on the phone (it no longer bleeds);
       drag and the keys walk it, the arrows page it five at a time. It is
       the chips' offset parent, so revealDayChip measures inside it. */
    #vm-exams-ys [data-close-sheet] .vm-ys-rail {
        position: relative;
        gap: 6px;
        margin: 6px 0 4px 46px;
        padding: 2px 0;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip {
        border-radius: 12px;
        background: #fff;
        box-shadow: inset 0 0 0 1.5px #e2e8f0;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip-d { font-size: 13px; color: #0f172a; }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip-t { font-size: 12px; color: #64748b; }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip[aria-pressed="true"] { background: #0f6d5c; box-shadow: none; }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip[aria-pressed="true"] .vm-ys-daychip-d { color: #fff; }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip[aria-pressed="true"] .vm-ys-daychip-t { color: #e3f4f0; }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }
    #vm-exams-ys [data-close-sheet] .vm-ys-daychip[aria-pressed="true"]:focus-visible { outline-color: #fff; outline-offset: -4px; }

    /* The note: its label at 13.5, the field at 15, the count at 13. */
    #vm-exams-ys [data-close-sheet] .vm-ys-word-l {
        padding: 0;
        font-size: 13.5px;
        color: #0f172a;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-word-l span { color: #64748b; }
    #vm-exams-ys [data-close-sheet] .vm-ys-input--word {
        padding: 0 14px;
        border-color: #cbd5e1;
        font-size: 15px;
        color: #0f172a;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-input--word:focus { border-color: #16a085; }
    #vm-exams-ys [data-close-sheet] .vm-ys-count {
        padding: 0;
        font-size: 13px;
        color: #475569;
        text-align: right;
    }

    /* 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-exams-ys [data-close-sheet] .vm-ys-closego {
        margin-top: 2px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 16px 10px;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-closego:has(> .vm-ys-err:not([hidden])) { margin-top: 0; }
    #vm-exams-ys [data-close-sheet] .vm-ys-closego > .vm-ys-err {
        order: -1;
        flex: 0 0 100%;
        justify-content: flex-end;
        gap: 8px;
        font-size: 13px;
        line-height: 1.45;
        color: #0f172a;
    }
    #vm-exams-ys [data-close-sheet] .vm-ys-closego > .vm-ys-err i { color: #475569; }
    #vm-exams-ys [data-close-sheet] .vm-ys-closego > .vm-ys-cancel { min-width: 0; }
    /* Saving: the commit keeps its words, inert (43-d-states). */
    #vm-exams-ys [data-close-sheet] .vm-ys-closego > .vm-ys-commit:disabled { color: #475569; cursor: default; }
    #vm-exams-ys [data-close-sheet] .vm-ys-closego > :is(.vm-ys-cancel, .vm-ys-commit):focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    @media (hover: hover) {
        .vm-ys-linkdoor > .vm-ys-linkdoor-go:hover,
        .vm-ys-dt-aside .vm-ys-door:hover,
        .vm-ys-check:hover,
        .vm-ys-radio:hover { background: #f8fafc; color: #0f172a; }
        .vm-ys-linkdoor > .vm-ys-unlink:hover,
        .vm-ys-pincard > .vm-ys-quiet:hover { color: #0f172a; }
        .vm-ys-chip:not([aria-pressed="true"]):not(:disabled):hover { background: #e2e8f0; }
        .vm-ys-pincard > .vm-ys-fill:hover { background: #d3ede6; }
        .vm-ys-body > .vm-ys-bar > .vm-ys-commit:not(:disabled):hover { background: #0c5b4c; }
        .vm-ys-held-go:hover { color: #0c5b4c; }
        .vm-ys-band--lead .vm-ys-solid:hover { background: #f4fbf9; color: #0f6d5c; }
        .vm-ys-dt-main > .vm-ys-lead .vm-ys-solid:hover { background: #0c5b4c; color: #fff; }
        /* Close for now (H7a, 43-d's). */
        #vm-exams-ys [data-close-sheet] .vm-ys-choice:not([aria-checked="true"]):hover { background: #f8fafc; }
        #vm-exams-ys [data-close-sheet] .vm-ys-arrow:not([disabled]):hover { background: #e3f4f0; color: #0f6d5c; }
        #vm-exams-ys [data-close-sheet] .vm-ys-daychip:not([aria-pressed="true"]):hover { box-shadow: inset 0 0 0 1.5px #16a085; }
        #vm-exams-ys [data-close-sheet] .vm-ys-retry:hover { background: #d3ede6; }
        #vm-exams-ys [data-close-sheet] .vm-ys-closego > .vm-ys-commit:not(:disabled):hover { background: #0c5b4c; }
    }
}

@media (min-width: 1120px) {
    /* 31a: main 764 | the 340 column, not sticky, its cards from the
       ledger's top (the "Your page" heading's 50). */
    .vm-ys-facts {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        align-items: start;
    }
    .vm-ys-dt-aside {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding-top: 50px;
    }
}