/* ==================================================================== SCREEN 23 — LIST YOUR STRUCTURE, the desktop layer (desktop slice D13, 2026-10-09). exams/list-your-structure.html only, linked after desktop/shared.css; every rule is scoped to #vm-exams-list (and, for the glass header's room, to the body that holds it). Frames: 23-d (23a, filled), 23-d-listed (23b), 23-d-narrow (1000), 23-d-states, in docs/design/pharmacy/screens/23/desktop/frame.html; records screens/desktop-15-25/records/Screen 23 - desktop work order.md and design pass.md (approved and folded, the three calls with it). Brief: briefs/2026-10-09_desktop-slice-D13.md. Tiers: >=901 the layer (the 901-1119 block: one column at 908, the lead card first in two halves, the commit in the foot bar with both its lines beside the pill) · >=1120 main | the sticky 340 column (the lead card, the commit bar its foot, the terms under the commit). Uses desktop/shared.css: §1 the customer's header, glass over 23a's band until the structure is listed (js/exams/desktop.js); §12 the structure side's own header after (owner-head.js, filled by list-your-structure.js, which hides the customer's); §13 the flow band (23a: while the customer's glass header is over it, its light from the top left and its room under the header, .vm-dt-flow-band--under-glass; under the owner header, section 10's) and the one-row band (23b: the identity read, not drawn, .vm-dt-band-id--hidden); §17 the labelled rows (the four sections' cards: .vm-dt-labelled, each field .vm-dt-labelled-row, its label .vm-dt-labelled-label, every control and line of the field in the control column); §2's owner bar (the commit's 860 column, 901-1119); §9's state cards and Try again. All shared since D14. Since E10, §21 (the open flow, 23's and 27's in one place: the page and its column, the sections, the controls and their lines, the pin's row, the lead card, the commit bar, what the page needs) and §13's flow band with its line; this file keeps 23's own values. list-your-structure.js moves the terms under the commit from 901, the lead card and the bar into the column from 1120, and on 23b the Add pill into the Exams and services row and "See the structures list" into the band from 901; this file lays them out. Sections, in the frame's order: 1. The header and the bands 2. 23a: the body, the sections, the labelled rows, the controls 3. 23a: where you are (the address rows, the pin) 4. 23a: the lead card and the commit bar 5. 23b: what your page needs 6. States 7. Hover 8. The narrow window (901-1119) 9. The side tier (1120 and up) ==================================================================== */ @media (min-width: 901px) { /* ================================================================ 1. THE HEADER AND THE BANDS The customer's header (hidden by the page once the owner header takes its place) is glass over 23a's band: the band starts under it, its own 20 more. The phone's tab bar and its spacer give way to the owner header's tabs. ================================================================ */ /* (The tab bar and its spacer: shared §2, since E10.) */ #vm-exams-list > .vm-dt-ohead:empty { display: none; } /* -- 23a: the flow band with its line (shared §13's .vm-dt-flow-band--sub, since E10): the glass exit "Exams" | the title over "Logged in as ..." (kept: the header names no one). */ #vm-exams-list .vm-ex-ly-top { overflow: visible; border-top: 0; border-bottom: 0; } /* -- 23b: the one-row band: "Listed. People can find you now." at 40 with its second line | "See the structures list", the door that proves it. The name and kind are the header's (kept for the reader of the page, the h1, not drawn). */ #vm-exams-list .vm-ex-ly-band { row-gap: 0; } #vm-exams-list .vm-ex-ly-stateblock { grid-column: 1; gap: 0; } #vm-exams-list .vm-ex-ly-bandside { grid-column: 2; grid-row: 1; } #vm-exams-list .vm-ex-ly-bandside > .vm-ex-ly-seelist { align-self: flex-end; height: 44px; min-height: 44px; padding: 0 4px 0 12px; gap: 7px; color: #fff; font-size: 13.5px; white-space: nowrap; } #vm-exams-list .vm-ex-ly-bandside > .vm-ex-ly-seelist i { color: #8ff08b; } #vm-exams-list .vm-ex-ly-bandside > .vm-ex-ly-seelist:focus-visible { outline-color: #fff; } /* ================================================================ 2. 23a — THE BODY, THE SECTIONS, THE LABELLED ROWS (23-d) ================================================================ */ /* (The page, its sections, the labelled rows' cards and the controls 52 tall: §21.) The select's box, and the shorter facts at their own widths. */ #vm-exams-list .vm-ex-ly-select { height: 52px; padding: 0 40px 0 16px; border-radius: 13px; font-size: 16px; } #vm-exams-list #ly-area, #vm-exams-list .vm-dt-labelled-row > .vm-ex-ly-selectbox, #vm-exams-list #ly-licence { max-width: 260px; } #vm-exams-list #ly-phone { max-width: 220px; } #vm-exams-list .vm-ex-ly-input[aria-invalid="true"], #vm-exams-list .vm-ex-ly-textarea[aria-invalid="true"], #vm-exams-list .vm-ex-ly-select[aria-invalid="true"] { border-color: #0f172a; } /* -- The pills: 44 at least, 14; a choice mint with its teal edge. */ #vm-exams-list .vm-ex-ly-pills { gap: 8px; } #vm-exams-list .vm-ex-ly-pill { height: auto; min-height: 44px; padding: 8px 12px; font-size: 14px; line-height: 1.3; color: #334155; } #vm-exams-list .vm-ex-ly-pill[aria-checked="true"], #vm-exams-list .vm-ex-ly-pill[aria-pressed="true"] { color: #0f6d5c; box-shadow: inset 0 0 0 1.5px #16a085; } #vm-exams-list .vm-ex-ly-pill--pay { gap: 7px; } #vm-exams-list .vm-ex-ly-pills[aria-invalid="true"] .vm-ex-ly-pill { box-shadow: inset 0 0 0 1.5px #0f172a; } /* (The lines under a control, the help and what is wrong: §21.) */ /* ================================================================ 3. 23a — WHERE YOU ARE: Street, Area, City and the landmark are rows of their own (the pass refused Area | City on one row), each line of the street and the area under its own row; then the pin row across the card (it stays on desktop). ================================================================ */ #vm-exams-list .vm-ex-ly-where { overflow: hidden; } #vm-exams-list .vm-ex-ly-fields--flat { display: flex; flex-direction: column; } #vm-exams-list .vm-ex-ly-addr { display: contents; } #vm-exams-list .vm-ex-ly-addr > .vm-ex-ly-field:first-child { order: 1; } #vm-exams-list #ly-err-street { order: 2; } #vm-exams-list .vm-ex-ly-addr > .vm-ex-ly-field + .vm-ex-ly-field { order: 3; border-top: 1px solid #f0f2f4; } #vm-exams-list #ly-err-area { order: 4; } #vm-exams-list .vm-ex-ly-fields--flat > .vm-ex-ly-field { order: 5; border-top: 1px solid #f0f2f4; } /* (A line tucked under its row, and the pin's row: §21.) */ /* -- The licence: its number alone (the terms go with the act). */ #vm-exams-list .vm-ex-ly-licence { overflow: visible; } /* ================================================================ 4. 23a — THE LEAD CARD AND THE COMMIT BAR "When people can find you" / "As soon as you list it" at 28 and its two rows. The bar: the commit naming the structure, the terms under it (moved in by the page from 901). ================================================================ */ /* (The lead card and the refusal: §21.) The terms, under the commit. */ #vm-exams-list .vm-ex-ly-bar .vm-ex-ly-terms { margin-top: 0; font-size: 13.5px; line-height: 1.4; color: #475569; } #vm-exams-list .vm-ex-ly-bar .vm-ex-ly-terms a { font-weight: 700; } #vm-exams-list .vm-ex-ly-bar-cap { font-size: 13.5px; color: #334155; } /* ================================================================ 5. 23b — WHAT YOUR PAGE NEEDS (23-d-listed): heading + sub, then one bordered card of three rows; the Exams and services row ends in its act (the solid pill, no chevron); hours and the photograph stay doors. ================================================================ */ #vm-exams-list .vm-ex-ly-lbody { gap: 0; } #vm-exams-list .vm-ex-ly-needs { max-width: 764px; } /* (The heading, its line and the card of door rows: §21.) */ /* ================================================================ 6. STATES (23-d-states): a failed read and an account that already runs a structure are §9's state cards (Try again; the store on a mint tile, at 16 here, and one door to its listing); the header is the structure side's. ================================================================ */ #vm-exams-list .vm-ex-ly-retry { margin-top: 12px; } #vm-exams-list .vm-ex-ly-already > i { font-size: 16px; } /* ================================================================ 7. HOVER (a pointer that can hover) ================================================================ */ @media (hover: hover) { #vm-exams-list button.vm-ex-ly-pin:hover, #vm-exams-list a.vm-ex-ly-door:hover { background: #f4fbf9; } #vm-exams-list .vm-ex-ly-commit:not(:disabled):hover { background: #0c5b4c; color: #fff; } #vm-exams-list .vm-ex-ly-pill:not([aria-checked="true"]):not([aria-pressed="true"]):hover { background: #e2e8f0; } #vm-exams-list .vm-ex-ly-bandside > .vm-ex-ly-seelist:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } } } /* ==================================================================== 8. THE NARROW WINDOW (901-1119): one column at 908. The lead card first, in two halves (the headline | its two rows); the commit bar at the window's foot (the phone's own bar, laid in the 908 column): its two lines, "Listed as soon as you tap." and the terms, right-aligned beside the pill (the headline has scrolled away), a refusal the form cannot place above them. ==================================================================== */ @media (min-width: 901px) and (max-width: 1119px) { /* (§21: the halves, the bar's grid.) The halves equal here. */ #vm-exams-list .vm-ex-ly-lead-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #vm-exams-list .vm-ex-ly-bar .vm-ex-ly-commit { width: auto; padding: 0 28px; white-space: nowrap; } } /* ==================================================================== 9. THE SIDE TIER (1120 and up): the form | the sticky column (call 2): the lead card, the commit its foot with the terms under it. "Listed as soon as you tap." is not said here (the headline says it, the pass's change 1). ==================================================================== */ @media (min-width: 1120px) { /* (§21: the page, the grid, the sticky column and what it holds.) The form and a state card 32 apart; both start on the first row. */ #vm-exams-list .vm-ex-ly-body { row-gap: 32px; } #vm-exams-list .vm-ex-ly-body > [data-form] { grid-row: 1; } #vm-exams-list .vm-ex-ly-col { grid-row: 1; } #vm-exams-list .vm-ex-ly-col .vm-ex-ly-bar-cap { display: none; } #vm-exams-list .vm-ex-ly-col .vm-ex-ly-terms { text-align: center; } }