/* ==================================================================== SCREEN 21 — WHO IS COMING, the desktop layer (desktop slice D12, 2026-10-09). exams/desk.html only, linked after desktop/shared.css; every rule is scoped to #vm-exams-desk. Frames: 21-d (Thursday 07:40, at rest), 21-d-open (a row's card in the column), 21-d-found (the lookup holding 2194), 21-d-narrow (1000), 21-d-states, in docs/design/pharmacy/screens/21/desktop/frame.html; records screens/desktop-15-25/records/Screen 21 - desktop work order.md and design pass.md (the pass approved and folded with the call). Brief: briefs/2026-10-09_desktop-slice-D12.md. Tiers: >=901 the layer: the structure side's own header (shared.css §12, drawn by desk.js through js/exams/owner-head.js) with the lookup pill in its centre slot and the "/" chip (09-d's folded pill); the band is §13's one-row band: the state sentence (36, 40 from 1120) and its second line | What came in over "Your structure" in a right block (300; 340 from 1120); while a query is held the band folds away and the structure's name (the page's h1, never drawn here: the header says it) stays for assistive tech; the tab bar is not drawn (the header has the tabs); one column: the day's list as a ledger (tile 40 | name, "For …" on its baseline, over the typed names | reference 80 | told 120, ink, only where it differs | money 100 | chevron), Coming days under it, a row's card pushed the phone's way (the code's) · >=1120 main | the 340 column (gap 48, not sticky: §16's aside--flow): desk.js moves the sections into the two; a row opens its card in the column over Coming days (no history entry), the row lit; the lookup's rows sit in main and its first card in the column. The two sheets are 480 dialogs; "Offer another time" ends in a row, Cancel then the commit (desk.js moves Cancel beside it from 901). The day's list is §14's container (.vm-dt-ledger on .vm-ex-dk-list: radius 18, the #f0f2f4 hairline; D14). Its rows are the page's own (.vm-ex-dk-row): desk.js draws one row for the day's list, 34a's heads, the lapsed rows and the lookup, so §14's row classes (and its mint form) cannot go on them without reaching rows that sit in no ledger; the row's grid, its ink name, its 17 money and its #f8fafc hover stay here (the mint tile is the phone's own). §13's fold keeps the band's identity (.vm-dt-band-id) for assistive tech (D14). Since E10 (the 26-34 consolidation): 34's ask-card head is section 4's ledger row (one rule set for both), its "Change to ..." is shared §15's quiet act, the offer dialog's Cancel §15's teal Cancel, and the D12 rules 34 had overridden are gone (the foot's hairline, the slot's gap and heading, the line area of an offer and an ask). Still here on purpose (D14): the header's find pill and its "/" chip are 09-d's (pharmacy 09-queue.css .vm-fd-key) and 10-home-search.css's .vm-ex-pill-kbd, one pill written against each page's own field; the offer sheet's grid (its acts sit inside it). Sections, in the frame's order: 1. The header's centre slot: the find pill and its "/" chip 2. The band: one row, its right block, the fold, the closed band 3. The page: one column; the tab bar not drawn 4. The day's list as a ledger, and its lit row 5. Coming days 6. The card (the column's, and the pushed one below 1120) 7. The lookup's line 8. The sheets as dialogs 9. States 10. >=1120: main | the column 11. Hover (a pointer that can hover) ==================================================================== */ @media (min-width: 901px) { /* ================================================================ 1. THE HEADER'S CENTRE SLOT (21-d, 21-d-found): the band's pill, moved in, 48 tall, 440 at most, white on the header's teal with a soft shadow; while the field has the focus a 2px #8ff08b ring. The "/" chip while it is empty; the clear round (transparent, 44) while it holds something. The header emptied (no structure) is not drawn. ================================================================ */ #vm-exams-desk .vm-dt-ohead:empty { display: none; } #vm-exams-desk .vm-dt-ohead-mid > .vm-ex-dk-pill { width: 100%; max-width: 440px; height: 48px; padding: 0 2px 0 16px; gap: 11px; box-shadow: 0 4px 14px rgba(3, 32, 26, .22); } #vm-exams-desk .vm-dt-ohead-mid > .vm-ex-dk-pill.has-value { padding-right: 2px; } #vm-exams-desk .vm-dt-ohead-mid > .vm-ex-dk-pill:focus-within { box-shadow: 0 0 0 2px #8ff08b, 0 4px 14px rgba(3, 32, 26, .22); } #vm-exams-desk .vm-dt-ohead-mid .vm-ex-dk-pill-g { color: #64748b; } #vm-exams-desk .vm-dt-ohead-mid .vm-ex-dk-q { font-size: 15px; font-weight: 600; letter-spacing: normal; color: #0f172a; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-dt-ohead-mid .vm-ex-dk-q::placeholder { font-size: 14.5px; color: #64748b; } #vm-exams-desk .vm-ex-dk-kbd { min-width: 24px; height: 24px; margin-right: 10px; padding: 0 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; box-shadow: inset 0 -1px 0 #e2e8f0; font-family: 'Inter', -apple-system, sans-serif; font-size: 12px; font-weight: 600; line-height: 1; color: #475569; } #vm-exams-desk .vm-ex-dk-pill.has-value .vm-ex-dk-kbd { display: none; } #vm-exams-desk .vm-dt-ohead-mid .vm-ex-dk-qclear { background: transparent; color: #64748b; } /* ================================================================ 2. THE BAND (21-d): §13's one row, laid as five rows on the left (the exit on a pushed view, the name where no header is drawn, the closed headline, the state block, Open again now) and the right block across them, at their foot. Rows carry their own space, so a row not drawn costs nothing. The name (the h1) is not drawn while the header says it; the day line never (the header's line). ================================================================ */ #vm-exams-desk .vm-ex-dk-band { row-gap: 0; /* The right block: 300 at 1000 (21-d-narrow), 340 from 1120. */ grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "exit side" "title side" "closed side" "state side" "reopen side"; grid-template-rows: auto auto auto minmax(0, 1fr) auto; } #vm-exams-desk .vm-ex-dk-toprow { grid-area: exit; margin-bottom: 16px; } #vm-exams-desk .vm-ex-dk-id { display: contents; } #vm-exams-desk .vm-ex-dk-name { grid-area: title; margin: 0 0 12px; padding: 0; font-size: 36px; letter-spacing: -1.2px; line-height: 1.1; } #vm-exams-desk:has(> .vm-dt-ohead:not(:empty)) .vm-ex-dk-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #vm-exams-desk .vm-ex-dk-day { display: none; } #vm-exams-desk .vm-ex-dk-closed { grid-area: closed; gap: 0; } #vm-exams-desk .vm-ex-dk-stateblock { grid-area: state; align-self: end; gap: 0; } #vm-exams-desk .vm-ex-dk-reopen { grid-area: reopen; align-items: flex-start; margin-top: 18px; gap: 10px; } #vm-exams-desk .vm-ex-dk-side { grid-area: side; align-self: end; } #vm-exams-desk .vm-ex-dk-band > .vm-ex-dk-pill { grid-area: state; } /* The right block: What came in (36b) over "Your structure" (31). */ #vm-exams-desk .vm-ex-dk-side .vm-dk-news { padding: 8px 14px 8px 10px; gap: 12px; } #vm-exams-desk .vm-ex-dk-side .vm-dk-news-s { font-size: 12.5px; } #vm-exams-desk .vm-ex-dk-side .vm-ex-dk-ys { position: static; align-self: flex-end; height: 44px; padding: 0 4px 0 12px; gap: 7px; font-size: 13.5px; } #vm-exams-desk .vm-ex-dk-side .vm-ex-dk-ys i { font-size: 12px; color: #8ff08b; } /* While a query is held (21-d-found) the band folds away: §13's fold draws nothing and keeps the identity (.vm-dt-band-id: the h1) and the news row's live line for assistive tech. Its door is not kept. */ #vm-exams-desk .vm-ex-dk-band.is-folded .vm-ex-dk-ys { display: none; } /* 43c's pattern on this band: the close is the headline, its meaning under it, the state sentence in the second voice, Open again now a white pill at its words' width. */ #vm-exams-desk .vm-ex-dk-closed-h { font-size: 36px; letter-spacing: -1.2px; line-height: 1.1; text-wrap: balance; } #vm-exams-desk .vm-ex-dk-closed-s { margin-top: 10px; font-size: 16px; color: #e2e8f0; line-height: 1.5; } #vm-exams-desk .vm-ex-dk-band.is-closed .vm-ex-dk-stateblock { margin-top: 16px; } #vm-exams-desk .vm-ex-dk-band.is-closed .vm-ex-dk-state { font-size: 16px; line-height: 1.5; } #vm-exams-desk .vm-ex-dk-reopen-go { width: auto; padding: 0 24px; gap: 9px; background: #fff; white-space: nowrap; } /* 43-d-desk / 43-d-states: the failure under the pill, the band's accent on its glyph (the white words carry the meaning). */ #vm-exams-desk .vm-ex-dk-reopen-fail { gap: 8px; font-size: 13.5px; line-height: 1.45; } #vm-exams-desk .vm-ex-dk-reopen-fail i { margin-top: 4px; color: #8ff08b; } /* ================================================================ 3. THE PAGE (21-d-narrow): the 1200 column, 28 under the band; the sections 36 apart. The tab bar and its spacer are not drawn: the header carries the three tabs. ================================================================ */ #vm-exams-desk .vm-ex-dk-body { width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 24px 64px; gap: 36px; } /* (The tab bar and its spacer: shared §2, since E10.) */ #vm-exams-desk .vm-ex-dk-sec { min-width: 0; gap: 14px; } #vm-exams-desk .vm-ex-dk-head { gap: 4px; padding: 0; } #vm-exams-desk .vm-ex-dk-h { font-size: 21px; letter-spacing: -.4px; line-height: 1.25; } #vm-exams-desk .vm-ex-dk-h--pad { padding: 0; } #vm-exams-desk .vm-ex-dk-headsub { font-size: 14px; color: #475569; } #vm-exams-desk .vm-ex-dk-slot-h { padding: 0; } /* ================================================================ 4. THE DAY'S LIST AS A LEDGER (21-d, the pass's change 1): one bordered container (shared.css §14: radius 18, hairlines #f0f2f4) of rows 64 at least: tile 40 | the name (15/700) with "For …" on its baseline, over the typed names (13.5) | the reference 80 | what they were told 120, ink, only where it differs (the code prints it only then) | the money 100 (17, FCFA 10.5) | the chevron. The meta line's other words (a result sent, an offer, an ask) take a quiet line under the names; "New" leads the names' line (36-d-desk: desk.js writes it there from 901). No column headers. The row opened in the column is lit (aria-current): mint, its tile white. 34's ask-card head is the same row (E10: one rule set; its "from" is 34's own, below). ================================================================ */ #vm-exams-desk .vm-ex-dk-list > .vm-ex-dk-row, #vm-exams-desk .vm-dk-ask > .vm-dk-head { min-height: 64px; padding: 10px 18px 10px 16px; display: grid; grid-template-columns: 40px minmax(0, max-content) minmax(0, 1fr) 80px 120px 100px 14px; grid-template-areas: "tile name for ref told money chev" "tile names names ref told money chev" "tile line line ref told money chev"; column-gap: 16px; row-gap: 0; align-items: center; background: #fff; } #vm-exams-desk .vm-ex-dk-list > .vm-ex-dk-row:focus-visible, #vm-exams-desk .vm-dk-ask > .vm-dk-head:focus-visible { outline-offset: -2px; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-tile { grid-area: tile; width: 40px; height: 40px; border-radius: 12px; font-size: 14px; letter-spacing: 0; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-main, #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-meta { display: contents; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-rname { grid-area: name; align-self: baseline; font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: #0f172a; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-for { grid-area: for; align-self: baseline; margin-left: -8px; font-size: 13px; line-height: 1.3; color: #64748b; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-exams { grid-area: names; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: #334155; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-ref { grid-area: ref; font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: #64748b; white-space: nowrap; font-variant-numeric: tabular-nums; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-told { grid-area: told; font-size: 13px; font-weight: 600; line-height: 1.4; color: #0f172a; white-space: nowrap; font-variant-numeric: tabular-nums; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-sent { grid-area: line; margin-top: 2px; font-size: 13px; line-height: 1.4; color: #475569; font-variant-numeric: tabular-nums; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-money { grid-area: money; min-width: 0; padding-top: 0; justify-content: flex-end; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-money-num { font-size: 17px; letter-spacing: -.3px; color: #0f172a; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-money-cur { font-size: 10.5px; color: #64748b; } #vm-exams-desk .vm-ex-dk-list .vm-ex-dk-from { color: #475569; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-ask { font-size: 13px; color: #475569; } #vm-exams-desk :is(.vm-ex-dk-list, .vm-dk-head) .vm-ex-dk-chev { grid-area: chev; justify-self: center; } #vm-exams-desk .vm-ex-dk-list > .vm-ex-dk-row[aria-current="true"], #vm-exams-desk .vm-dk-ask > .vm-dk-head[aria-current="true"] { background: #e3f4f0; } #vm-exams-desk .vm-ex-dk-list > .vm-ex-dk-row[aria-current="true"] .vm-ex-dk-tile, #vm-exams-desk .vm-dk-ask > .vm-dk-head[aria-current="true"] .vm-ex-dk-tile { background: #fff; } /* ================================================================ 5. COMING DAYS (21-d): its heading at 17, the same container; rows 64 at least, the date tile 44 (the weekday at 10 over the date at 16), the day at 14.5/700 over its line at 13. ================================================================ */ #vm-exams-desk [data-coming-sec] { gap: 12px; } #vm-exams-desk [data-coming-sec] .vm-ex-dk-h { font-size: 17px; letter-spacing: -.3px; } #vm-exams-desk .vm-ex-dk-crow { min-height: 64px; padding: 10px 14px 10px 12px; gap: 12px; } #vm-exams-desk .vm-ex-dk-crow + .vm-ex-dk-crow { border-top-color: #f0f2f4; } #vm-exams-desk .vm-ex-dk-crow:focus-visible { outline-offset: -2px; } #vm-exams-desk .vm-ex-dk-dtile { width: 44px; height: 44px; border-radius: 12px; } #vm-exams-desk .vm-ex-dk-dtile-w { font-size: 10px; } #vm-exams-desk .vm-ex-dk-dtile-d { font-size: 16px; } #vm-exams-desk .vm-ex-dk-ct { font-size: 14.5px; font-weight: 700; } #vm-exams-desk .vm-ex-dk-cs { font-size: 13px; color: #64748b; } /* ================================================================ 6. THE CARD (21-d-open): the head 18 in (the tile 44, the name at 18, the number at 13; the reference at 16; Close, a 44 round, on the column's card she opened), the told block (the window at 30), Arrived a 48 white pill; the exams at 14.5 with their figures at 17; Call (solid, the rest of the row) beside WhatsApp (mint, its words' width); the door "Send the result" with a grey tile. Below 1120 the pushed card keeps 560 at most (the owner column's width). ================================================================ */ #vm-exams-desk .vm-ex-dk-cards > .vm-ex-dk-card { width: 100%; max-width: 560px; } #vm-exams-desk .vm-ex-dk-chead { padding: 18px 18px 0; align-items: flex-start; gap: 12px; } #vm-exams-desk .vm-ex-dk-cname { font-size: 18px; letter-spacing: -.3px; line-height: 1.25; } #vm-exams-desk .vm-ex-dk-cphone { font-size: 13px; color: #475569; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-ex-dk-cfor { font-size: 13px; color: #475569; } #vm-exams-desk .vm-ex-dk-cref { padding-top: 2px; font-size: 16px; letter-spacing: 0; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-ex-dk-cclose { width: 44px; height: 44px; margin: -6px -8px 0 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: #64748b; line-height: normal; } #vm-exams-desk .vm-ex-dk-cclose i { font-size: 15px; } #vm-exams-desk .vm-ex-dk-toldwrap { padding: 14px 14px 0; } #vm-exams-desk .vm-ex-dk-toldblock { padding: 13px 14px 14px; } #vm-exams-desk .vm-ex-dk-told-k { font-size: 12px; } #vm-exams-desk .vm-ex-dk-told-w { font-size: 30px; letter-spacing: -.9px; line-height: 1.05; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-ex-dk-told-row, #vm-exams-desk .vm-ex-dk-toldblock .vm-dk-line { margin-top: 12px; padding: 10px 12px; } #vm-exams-desk .vm-ex-dk-told-row span, #vm-exams-desk .vm-ex-dk-toldblock .vm-dk-line > span { font-size: 13px; } #vm-exams-desk .vm-dk-marks { margin-top: 12px; gap: 8px; } #vm-exams-desk .vm-dk-mark { border-radius: 999px; font-size: 14.5px; } #vm-exams-desk .vm-dk-mark i { font-size: 13px; } #vm-exams-desk .vm-ex-dk-items { padding: 16px 18px 0; } #vm-exams-desk .vm-ex-dk-item-n { font-size: 14.5px; } #vm-exams-desk .vm-ex-dk-fig-num { font-size: 17px; letter-spacing: -.3px; } #vm-exams-desk .vm-ex-dk-pay { font-size: 13px; color: #64748b; } #vm-exams-desk .vm-ex-dk-act { padding: 16px 18px 18px; } #vm-exams-desk .vm-ex-dk-call { font-size: 14.5px; box-shadow: 0 6px 16px rgba(15, 109, 92, .24); } #vm-exams-desk .vm-ex-dk-call i { font-size: 12px; } #vm-exams-desk .vm-ex-dk-wa { flex: 0 0 auto; padding: 0 18px; font-size: 14.5px; } #vm-exams-desk .vm-ex-dk-wa i { font-size: 15px; } #vm-exams-desk .vm-ex-dk-door { min-height: 60px; padding: 10px 18px; border-top-color: #f0f2f4; } #vm-exams-desk .vm-ex-dk-door-g { background: #f1f5f9; color: #475569; } #vm-exams-desk .vm-ex-dk-door-h { font-size: 14px; font-weight: 700; } #vm-exams-desk .vm-ex-dk-door-s { margin-top: 1px; font-size: 12.5px; color: #64748b; } /* ================================================================ 7. THE LOOKUP'S LINE (21-d-found, 21-d-states): "1 visit found", and the line that says why nothing was found or the search failed, at 15/700 ink. ================================================================ */ #vm-exams-desk .vm-ex-dk-found { gap: 14px; } #vm-exams-desk .vm-ex-dk-count, #vm-exams-desk .vm-ex-dk-found.is-none .vm-ex-dk-count { padding: 0; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: #0f172a; line-height: 1.4; font-variant-numeric: tabular-nums; } /* ================================================================ 8. THE SHEETS AS DIALOGS (§3's 18-25 dialog, 480: radius 20, the title 20 over the sub 13; "What came in"'s foot on §3's hairline). "Offer another time" laid as one grid: the head (titles), the days, the times, the info, then Cancel (shared §15's teal Cancel) and the commit in a row on the right (desk.js moves Cancel beside the commit from 901), 34-d-offer's 16 between, no hairline. "What came in": 480 and as tall as the window allows (720 at most), its list scrolling inside, its head and foot fixed. ================================================================ */ #vm-exams-desk .vm-dk-sheet { padding: 22px 24px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "head head head" "days days days" "times times times" "info info info" ". cancel commit"; column-gap: 10px; row-gap: 16px; align-items: center; } #vm-exams-desk .vm-dk-sheet-head { grid-area: head; padding: 0; } #vm-exams-desk .vm-dk-days { grid-area: days; } #vm-exams-desk .vm-dk-times { grid-area: times; } #vm-exams-desk .vm-dk-info { grid-area: info; } #vm-exams-desk .vm-dk-sheet > .vm-dk-sheet-x { grid-area: cancel; margin-top: 2px; } #vm-exams-desk .vm-dk-commit { grid-area: commit; width: auto; height: 48px; margin-top: 2px; padding: 0 24px; font-size: 14.5px; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 6px 16px rgba(15, 109, 92, .26); } #vm-exams-desk .vm-sheet.vm-dk-came.is-open { height: min(720px, calc(100vh - 96px)); overflow: hidden; } /* ================================================================ 9. STATES (21-d-states): Loading at 14; a failed read and no structure on this account are §9's state cards (Try again; the hospital on a mint tile and the three doors in a row), at main's width. Nobody has told you: the band says so and the day's list is absent (the code's); Coming days stays. ================================================================ */ #vm-exams-desk .vm-ex-dk-body .vm-loading { padding: 4px 2px; font-size: 14px; color: #64748b; } #vm-exams-desk .vm-ex-none, #vm-exams-desk .vm-ex-dk-noowner { max-width: 764px; } #vm-exams-desk .vm-ex-dk-retry { margin-top: 12px; } } @media (min-width: 1120px) { /* ================================================================ 10. >=1120 (21-d, 21-d-open, 21-d-found): main | the 340 column, 48 apart, 32 under the band. Main: the sections 36 apart. The column scrolls with the page (§16): the row's card over Coming days, 32 apart. The band's right block is 340 (§13). ================================================================ */ #vm-exams-desk .vm-ex-dk-body { padding-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 48px; align-items: start; } #vm-exams-desk .vm-ex-dk-dtmain, #vm-exams-desk .vm-ex-dk-dtcol { min-width: 0; display: flex; flex-direction: column; } #vm-exams-desk .vm-ex-dk-dtmain { gap: 36px; } #vm-exams-desk .vm-ex-dk-dtcol { gap: 32px; } #vm-exams-desk .vm-ex-dk-colcard > .vm-ex-dk-card { width: 100%; } #vm-exams-desk .vm-ex-dk-name, #vm-exams-desk .vm-ex-dk-closed-h { font-size: 40px; } #vm-exams-desk .vm-ex-dk-band { grid-template-columns: minmax(0, 1fr) 340px; } } /* ==================================================================== 11. HOVER (a pointer that can hover; 21-d's style-hover values) ==================================================================== */ @media (min-width: 901px) { @media (hover: hover) { #vm-exams-desk .vm-ex-dk-list > .vm-ex-dk-row:hover, #vm-exams-desk .vm-dk-ask > .vm-dk-head:hover, #vm-exams-desk .vm-ex-dk-crow:hover, #vm-exams-desk .vm-ex-dk-door:hover { background: #f8fafc; } #vm-exams-desk .vm-ex-dk-list > .vm-ex-dk-row[aria-current="true"]:hover, #vm-exams-desk .vm-dk-ask > .vm-dk-head[aria-current="true"]:hover { background: #e3f4f0; } #vm-exams-desk .vm-ex-dk-side .vm-dk-news:hover { background: rgba(255, 255, 255, .17); } #vm-exams-desk .vm-ex-dk-side .vm-ex-dk-ys:hover { color: #8ff08b; } #vm-exams-desk .vm-dt-ohead-mid .vm-ex-dk-qclear:hover, #vm-exams-desk .vm-ex-dk-cclose:hover { background: #f1f5f9; color: #0f172a; } #vm-exams-desk .vm-ex-dk-call:hover { background: #0c5b4c; color: #fff; } #vm-exams-desk .vm-ex-dk-wa:hover, #vm-exams-desk .vm-dk-mark:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px #0f6d5c; color: #0f6d5c; } #vm-exams-desk .vm-dk-commit:not(:disabled):hover { background: #0c5b4c; } #vm-exams-desk .vm-ex-dk-reopen-go:not(:disabled):hover { background: #f4fbf9; } } } /* 34 — the desk answers */ /* ==================================================================== SCREEN 34 — THE DESK ANSWERS, the desktop layer (desktop slice E6, 2026-10-09), appended to 21's file: the same page, the same scope. 21's rules above are not rewritten; where 34's frames settle a value 21's sections also touch (the slot desk's time heading, the offer dialog's foot), the rule here comes later and wins. Frames: 34-d (Friday 09:40, two to answer), 34-d-offer (the 480 dialog), 34-d-came (who came, in the column), 34-d-narrow (1000), 34-d-states, in docs/design/pharmacy/screens/34/desktop/frame.html; records screens/desktop-26-34/records/Screen 34 - desktop work order.md and design pass.md (the pass approved and folded). Sheet: screens/34/desktop/FACTS.md. Brief: briefs/2026-10-09_desktop-slice-E6.md. From 901 (both tiers, 34-d and 34-d-narrow alike): 12. To answer: a lifted card above This morning; its head is 21-d's ledger row (still the door to the visit); under it ONE row (the pass): the asked time at 30 | the white room row | the answers side by side (Confirm solid, Offer tinted; full: Offer alone, solid). desk.js draws the answers inside the block from 901. A write that did not go through: one quiet ink line under the block, on the right. A Confirm refused as lapsed greys in place. 13. The day's rows: an offer and a request nobody answered carry their one line on the right ("Offered 14:00 · not yet accepted", "Asked for 08:30"), no figure; the slot desk's time heading at 13.5/700 ink. 14. The card (the column's from 1120): a request's answers stacked under its room row, inside the block; who came: Arrived | Did not come, equal white fills; after: the desk's word and its clock, then "Change to ..." as a bordered 44 pill (32's take-back rule), never underlined, never red. 15. "Offer another time" (34b), the 480 dialog: the day tiles in one row of 6-7 (a full day struck and unpickable), every free half hour six across, the label naming the full ones, the two lines, then Cancel | the commit at the foot (no hairline: the frame's). 16. Hover. ==================================================================== */ @media (min-width: 901px) { /* ================================================================ 12. TO ANSWER (34-d, 34-d-narrow, 34-d-states) ================================================================ */ /* The head: 21-d's ledger row (section 4's rules, which name it); its "from" before the figure is 34-d's own. */ #vm-exams-desk .vm-dk-head .vm-ex-dk-from { margin-right: 2px; font-size: 11.5px; font-weight: 400; color: #64748b; } /* The block, one row: the asked time (its label over it) | the white room row | the answers. Two rows carry the label and the time, so the pair sits in the middle when the room row wraps. */ #vm-exams-desk .vm-dk-ask > .vm-ex-dk-toldwrap { padding: 0 14px 14px; } #vm-exams-desk .vm-dk-ask > .vm-ex-dk-toldwrap:has(+ .vm-dk-quiet) { padding-bottom: 0; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-toldblock { padding: 12px 12px 12px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-told-k { grid-column: 1; grid-row: 1; align-self: end; white-space: nowrap; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-told-w { grid-column: 1; grid-row: 2; align-self: start; margin-top: 2px; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-toldblock > .vm-dk-line { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 9px 12px; text-wrap: pretty; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-toldblock:not(:has(> .vm-dk-acts)) > .vm-dk-line { grid-column: 2 / -1; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-toldblock > .vm-dk-line > span { line-height: 1.45; } #vm-exams-desk .vm-dk-ask .vm-ex-dk-toldblock > .vm-dk-acts { grid-column: 3; grid-row: 1 / span 2; padding: 0; gap: 8px; } /* The answers: 48 pills at their words' width (on a card, below, the card's width); Confirm solid, Offer tinted, Offer alone solid when the time is full. */ #vm-exams-desk .vm-dk-go, #vm-exams-desk .vm-dk-offer { height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-dk-go, #vm-exams-desk .vm-dk-offer.is-solid { box-shadow: 0 6px 16px rgba(15, 109, 92, .26); } #vm-exams-desk .vm-dk-ask .vm-dk-go, #vm-exams-desk .vm-dk-ask .vm-dk-offer { flex: 0 0 auto; padding: 0 20px; } /* A write that did not go through: one quiet ink line, under the block on the right; the acts stay. */ #vm-exams-desk .vm-dk-quiet { font-size: 13px; font-weight: 400; color: #334155; line-height: 1.45; } #vm-exams-desk .vm-dk-ask > .vm-dk-quiet { padding: 8px 18px 14px; text-align: right; } /* A thing that is over (the Confirm refused as lapsed): grey in place. */ #vm-exams-desk .vm-ex-dk-toldblock.is-over { background: #f1f5f9; } #vm-exams-desk .vm-ex-dk-toldblock.is-over .vm-ex-dk-told-k { color: #475569; } #vm-exams-desk .vm-ex-dk-toldblock.is-over .vm-ex-dk-told-w, #vm-exams-desk .vm-ex-dk-toldblock.is-over .vm-dk-line > span { color: #334155; } #vm-exams-desk .vm-ex-dk-toldblock.is-over .vm-dk-line > i { color: #64748b; } /* ================================================================ 13. THE DAY'S ROWS (34-d, 34-d-came): the slot desk's time over its people (13.5/700 ink, 8 above its ledger, the groups 16 apart); an offer's line and a lapsed request's on the right, across the reference and the figure, no figure; the lapsed name in slate. ================================================================ */ #vm-exams-desk .vm-ex-dk-slot { gap: 8px; } #vm-exams-desk .vm-ex-dk-slot + .vm-ex-dk-slot { margin-top: 2px; } #vm-exams-desk .vm-ex-dk-slot-h { font-size: 13.5px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-ex-dk-list .vm-dk-offered, #vm-exams-desk .vm-ex-dk-list .vm-dk-asked { grid-column: ref-start / money-end; grid-row: 1 / -1; justify-self: end; align-self: center; margin-top: 0; font-size: 13.5px; line-height: 1.4; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-ex-dk-list .vm-dk-offered { font-weight: 600; color: #0f172a; } #vm-exams-desk .vm-ex-dk-list .vm-dk-asked { font-weight: 400; color: #475569; } #vm-exams-desk [data-late] .vm-ex-dk-rname { color: #334155; } /* ================================================================ 14. THE CARD (34-d-came, 34-d-states) ================================================================ */ /* A request opened: the answers stacked under the room row, inside the block, the card's width. */ #vm-exams-desk .vm-ex-dk-card .vm-ex-dk-toldblock > .vm-dk-acts { margin-top: 10px; padding: 0; flex-direction: column; gap: 8px; } #vm-exams-desk .vm-ex-dk-card .vm-ex-dk-toldblock > .vm-dk-acts > * { flex: none; width: 100%; } /* Who came: two equal white fills, both in the ground's teal; the customer's own word above them (13, slate), 8 over the fills. */ #vm-exams-desk .vm-dk-mark { gap: 8px; color: #0f6d5c; white-space: nowrap; } #vm-exams-desk .vm-dk-said { margin-top: 12px; font-size: 13px; color: #334155; } #vm-exams-desk .vm-dk-said + .vm-dk-marks { margin-top: 8px; } /* After the desk's word: "Change to ...", shared §15's quiet act (a ringed 44 pill at its words' width, never underlined, never red), on its own line, in ink. */ #vm-exams-desk .vm-dk-undo { width: auto; margin-top: 10px; display: flex; color: #0f172a; white-space: nowrap; } #vm-exams-desk .vm-dk-undo:disabled { opacity: .7; cursor: default; } /* ================================================================ 15. "OFFER ANOTHER TIME" (34-d-offer, 34-d-states): the head 22 in, the sections 16 apart, the foot 18 under the lines (no hairline), Cancel (teal words) then the commit: section 8's grid and acts. ================================================================ */ #vm-exams-desk .vm-dk-sheet-s { margin-top: 4px; font-size: 14px; color: #475569; } /* The days: one row of 6 (7 when seven are open), equal tiles 56 tall; a full day drawn struck and unpickable. */ #vm-exams-desk .vm-dk-days { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding-bottom: 0; } #vm-exams-desk .vm-dk-days:has(> :nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); } #vm-exams-desk .vm-dk-days:empty { display: none; } #vm-exams-desk .vm-dk-day { min-width: 0; max-width: none; height: 56px; border-radius: 12px; background: #f1f5f9; color: #334155; line-height: 1.15; } #vm-exams-desk .vm-dk-day-w { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: inherit; } #vm-exams-desk .vm-dk-day-d { font-size: 17px; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-dk-day.is-on { background: #0f6d5c; color: #fff; } #vm-exams-desk .vm-dk-day[aria-disabled="true"] { background: #f8fafc; color: #94a3b8; text-decoration: line-through; } /* Every free half hour, six across. */ #vm-exams-desk .vm-dk-times { gap: 10px; } #vm-exams-desk .vm-dk-times-h { padding: 0; font-size: 13.5px; font-weight: 700; color: #0f172a; } #vm-exams-desk .vm-dk-times-full { font-weight: 500; color: #475569; } #vm-exams-desk .vm-dk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } #vm-exams-desk .vm-dk-time { height: 44px; border-radius: 10px; background: #f8fafc; box-shadow: inset 0 0 0 1px #e2e8f0; color: #334155; font-size: 13.5px; font-weight: 700; } #vm-exams-desk .vm-dk-time.is-on { background: #0f6d5c; box-shadow: inset 0 0 0 1px #0f6d5c; color: #fff; } #vm-exams-desk .vm-dk-grid > .vm-loading { padding: 0; font-size: 14px; color: #475569; } #vm-exams-desk .vm-dk-taken { padding: 0; font-size: 14px; font-weight: 600; color: #0f172a; } /* The two lines: what they see on a mint row, the message line bare. */ #vm-exams-desk .vm-dk-info { padding: 0; border-radius: 0; background: transparent; gap: 8px; } #vm-exams-desk .vm-dk-info .vm-dk-line { margin: 0; padding: 0 2px; border-radius: 0; background: transparent; gap: 9px; } #vm-exams-desk .vm-dk-info .vm-dk-line > span { font-size: 13.5px; font-weight: 400; color: #334155; line-height: 1.45; } #vm-exams-desk .vm-dk-info [data-offer-sees-row] { padding: 11px 13px; border-radius: 12px; background: #e3f4f0; } #vm-exams-desk .vm-dk-info [data-offer-sees-row] > span { font-weight: 600; color: #0f172a; } } /* 16. HOVER (34's style-hover values; a pointer that can hover) */ @media (min-width: 901px) { @media (hover: hover) { #vm-exams-desk .vm-dk-go:not(:disabled):hover, #vm-exams-desk .vm-dk-offer.is-solid:not(:disabled):hover { background: #0c5b4c; color: #fff; } #vm-exams-desk .vm-dk-offer:not(.is-solid):not(:disabled):hover { background: #d3ede6; color: #0f6d5c; } } } /* 36 — what came in, the desk's side */ /* ==================================================================== SCREEN 36 — WHAT CAME IN on the desk (desktop slice G2, 2026-10-09), appended to 21's file: the same page, the same scope. 21's section 8 keeps "What came in"'s 480, min(720, window - 96), its list scrolling; the paddings 36's frames settle are here only (section 8's were folded away by desktop slice G9). Frames: 36-d-desk (09:40, a quiet re-read brought Marie Ngo's request: "New · Consultation gynécologue"), 36-d-desk-list (09:41, the list), 36-d-states (scrolled into Yesterday; loading; could not load; nothing came in; every row read; capped; Mark all failed; the gone row), in docs/design/pharmacy/screens/36/desktop/frame.html; records screens/desktop-35-42/records/Screen 36 - desktop work order.md and design pass.md (the pass wins). Sheet: screens/36/desktop/FACTS.md. Brief: briefs/2026-10-09_desktop-slice-G2.md. From 901 (both tiers alike), ONE dialog with the counter's (pharmacy desktop/36-came-in.css, the same values against the desk's own classes): 17. (The dialog: the sheet's .vm-dt-dialog, shared.css section 3: radius 20 and 09-d-sheets' shadow, the counter's family.) 18. The head (the design pass): the title 20 | Close; the count line | "Mark all as read" (44, #f1f5f9, its own width): desk.js moves the foot into the head from 901; its failed line under them, one ink line. The grab, the head's top row and the foot are not boxes of their own here. 19. The list: 18 24 20 on #f8fafc; each day title sticky under the head on a #f8fafc bar, its hairline once stuck (.is-stuck, set by desk.js on the body's scroll: 09-d's idiom); day cards radius 16; rows 11 14, the name 600 #334155; the gone line under its row, no hairline between; the end marker. 20. States: Loading 14; could not load and nothing came in, centred. 21. (The day's rows: "New" leads the line under the name; desk.js writes it into .vm-ex-dk-exams from 901, the work order, and it takes the line's own size: no rule of its own since G9.) 22. Hover. ==================================================================== */ @media (min-width: 901px) { /* ================================================================ 18. THE HEAD: one grid of the code's own nodes, the title | Close the count line | Mark all as read (only while rows show) a failed save, one ink line, the full width ================================================================ */ #vm-exams-desk .vm-dk-came-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title close" "sub act" "fail fail"; column-gap: 12px; row-gap: 0; align-items: center; padding: 16px 14px 12px 24px; border-bottom: 1px solid #f0f2f4; } #vm-exams-desk .vm-dk-came-top, #vm-exams-desk .vm-dk-came-titles, #vm-exams-desk .vm-dk-came-head > .vm-dk-came-foot:not([hidden]) { display: contents; } #vm-exams-desk .vm-dk-came-t { grid-area: title; font-size: 20px; letter-spacing: -.4px; line-height: 1.25; color: #0f172a; } #vm-exams-desk .vm-dk-came-x { grid-area: close; justify-self: end; background: transparent; color: #475569; } #vm-exams-desk .vm-dk-came-x i { font-size: 16px; } #vm-exams-desk .vm-dk-came-s { grid-area: sub; margin-top: 2px; font-size: 14px; color: #475569; line-height: 1.4; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-dk-came-s .vm-dk-came-n { color: #0f172a; } #vm-exams-desk .vm-dk-came-s .vm-ex-dk-dot { color: #cbd5e1; } #vm-exams-desk .vm-dk-came-head .vm-dk-came-all { grid-area: act; justify-self: end; width: auto; height: 44px; margin-top: 2px; padding: 0 20px; background: #f1f5f9; color: #0f172a; font-size: 14px; white-space: nowrap; } #vm-exams-desk .vm-dk-came-head .vm-dk-came-note:not([hidden]) { grid-area: fail; margin-top: 6px; padding: 0 10px 0 0; gap: 8px; font-size: 13px; color: #334155; } #vm-exams-desk .vm-dk-came-head .vm-dk-came-note > i { color: #475569; } /* ================================================================ 19. THE LIST (36-d-desk-list, 36-d-states' scrolled desk) ================================================================ */ #vm-exams-desk .vm-dk-came-body { padding: 18px 24px 20px; gap: 18px; background: #f8fafc; } #vm-exams-desk .vm-dk-cg-h { position: sticky; top: -18px; z-index: 2; margin: -10px -24px -8px; padding: 10px 28px 8px; background: #f8fafc; color: #334155; line-height: 1.5; } #vm-exams-desk .vm-dk-cg-h.is-stuck { box-shadow: 0 1px 0 #e2e8f0, 0 8px 16px -12px rgba(15, 23, 42, .18); } #vm-exams-desk .vm-dk-cg-list { border-color: #e2e8f0; border-radius: 16px; } #vm-exams-desk .vm-dk-cr { padding: 11px 14px; } #vm-exams-desk .vm-dk-cr-l2 { color: #475569; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-dk-cr-l2 .vm-dk-seg--name { font-weight: 600; color: #334155; } #vm-exams-desk .vm-dk-cg-list > .vm-dk-cr + .vm-dk-cr-line { border-top: 0; } #vm-exams-desk .vm-dk-cr-line { padding: 0 14px 12px 64px; gap: 8px; background: #fff; font-size: 13px; font-weight: 600; color: #334155; line-height: 1.45; font-variant-numeric: tabular-nums; } #vm-exams-desk .vm-dk-cr-line > i { color: #475569; } #vm-exams-desk .vm-dk-came-end { gap: 6px; padding: 2px 4px 0; } #vm-exams-desk .vm-dk-came-mark { padding: 0; } #vm-exams-desk .vm-dk-came-mark-t { font-size: 12.5px; color: #64748b; } #vm-exams-desk .vm-dk-came-still { font-size: 13px; color: #475569; } /* ================================================================ 20. STATES (36-d-states): Loading 14; could not load and nothing came in sit centred in the list: a 14.5/600 line with Try again as a 44 mint pill, or a 48 mint tile. ================================================================ */ #vm-exams-desk .vm-dk-came-body > .vm-loading { padding: 6px 4px; font-size: 14px; color: #64748b; } #vm-exams-desk .vm-dk-came-body.is-empty { padding: 18px 24px 20px; } #vm-exams-desk .vm-dk-came-fail, #vm-exams-desk .vm-dk-came-empty { flex: 1; align-self: stretch; min-height: 200px; justify-content: center; gap: 12px; padding: 24px; text-align: center; } #vm-exams-desk .vm-dk-came-ft { font-size: 14.5px; font-weight: 600; color: #0f172a; line-height: 1.45; } #vm-exams-desk .vm-dk-came-retry { width: auto; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: #e3f4f0; color: #0f6d5c; font-size: 14px; font-weight: 700; } #vm-exams-desk .vm-dk-came-etile { width: 48px; height: 48px; border-radius: 14px; } #vm-exams-desk .vm-dk-came-etile i { font-size: 17px; } #vm-exams-desk .vm-dk-came-et { font-family: 'Inter', -apple-system, sans-serif; font-size: 14.5px; font-weight: 600; color: #334155; letter-spacing: 0; line-height: 1.45; } /* ================================================================ 22. HOVER (36-d-desk-list's style-hover values) ================================================================ */ @media (hover: hover) { #vm-exams-desk .vm-dk-came-x:hover { background: #f1f5f9; } #vm-exams-desk .vm-dk-came-all:not(:disabled):hover { background: #e2e8f0; } #vm-exams-desk button.vm-dk-cr:hover { background: #f8fafc; } #vm-exams-desk button.vm-dk-cr.is-unread:hover { background: #e3f4f0; } #vm-exams-desk .vm-dk-came-retry:hover { background: #d3ede6; } } } /* ==================================================================== 45 — TAKE IT BACK on the desk (desktop slice H3, 2026-10-10), appended to 21's file: the same page, the same scope. Frame: 45-d-states in docs/design/pharmacy/screens/45/desktop/ frame.html; the sheet screens/45/desktop/FACTS.md; brief briefs/2026-10-10_desktop-slice-H3.md. The take-back lives on the opened visit's result door (section 6's door, desk.js's sendDoorHtml): "Result sent · 15:42" before, "Result taken back · 16:10" / "Kept on your record. No account can open it." after, opening 45e. The ledger row's line (sentLine) is 21's, untouched. The door's two lines at the frame's 1.5 (45-d-states, as 21-d-open): in the 340 card 45e's sub wraps to two lines, so the line height shows; every card door takes it, so the door reads the same before and after. ==================================================================== */ @media (min-width: 901px) { #vm-exams-desk .vm-ex-dk-card .vm-ex-dk-door-h, #vm-exams-desk .vm-ex-dk-card .vm-ex-dk-door-s { line-height: 1.5; } }