/* Schedule to the design (design/DESIGN_GUIDE.md; audit design/previews/visit-redesign/audit/app-gaps.json). Desktop and the web only: every rule is scoped :root:not(.android):not(.ios) or wrapped in @media (min-width:768px); the phones keep their tiers. Colours through tokens.css only (rule I-3). Source lines refer to design/DocVoc-Visit-Handoff-2026-09-23/source/DocVoc Redesign.dc.html. */ @media (min-width:768px){ /* ---- Month grid: a busy day is a filled accent-soft cell (no dot), a resting day reads ink2, the selected fill wins over the today ring. studio.css's two ::after dot rules (busy/active) were deleted — the dot is not in the design. ---------- */ :root:not(.android):not(.ios) .calendar-date{color:var(--secondary)} :root:not(.android):not(.ios) .calendar-date.busy{background:var(--accent-tint);color:var(--accent-text);font-weight:600} :root:not(.android):not(.ios) .calendar-date.active{box-shadow:none} /* ---- The jump-to-date input keeps the owner's 44px control height but the design's mono type and panel2 fill (studio.css's "one input size everywhere" pass pushed it to 14px sans and a white input background). --------------------------------- */ :root:not(.android):not(.ios) .calendar-jump input{font-size:12.5px!important;font-family:var(--font-mono)!important;border:1px solid var(--line)!important;background:var(--row-highlight)!important} /* ---- Day list header: New booking reads the same open or closed (no shadow on a small in-card accent button). ---------- */ :root:not(.android):not(.ios) .calendar-day-head button.primary{box-shadow:none} /* ---- Booking composer: Cancel is bordered and neutral, not a borderless blue text button. ------------------------------ */ :root:not(.android):not(.ios) .booking-row>button.quiet{border:1px solid var(--border);background:var(--card);color:var(--secondary);padding:0 11px;font-weight:400} /* On a day card the month card leaves narrow, the row's own flex-wrap (faithful to the source) can drop Book/Cancel onto a second line that sits where the patient picker's popover opens; keeping the buttons above it (the popover is z-index 25) means they still show and work while the picker is open, not just once it closes. */ :root:not(.android):not(.ios) .booking-row>button{position:relative;z-index:26} /* Book (and Move, when the composer is moving an appointment): no shadow, and a flat neutral look when disabled — never a washed-out blue. */ :root:not(.android):not(.ios) .booking-book{box-shadow:none} :root:not(.android):not(.ios) .booking-book:disabled{opacity:1;background:var(--row-highlight);color:var(--hint);border-color:transparent} /* Patient button, date, time and reason: the owner's 44px height stands, but the accent-line border, panel fill and the design's type sizes come back (studio.css's blanket input pass pushed these to 14px on a plain --line border). --------- */ :root:not(.android):not(.ios) .booking-row>input{font-size:12.5px!important;border:1px solid var(--accent-line)!important;background:var(--panel)!important} :root:not(.android):not(.ios) .booking-row>#booking-reason{font-size:13px!important;flex:1 1 150px!important;min-width:120px!important} :root:not(.android):not(.ios) .booking-patient{font-size:13px!important;font-weight:400;border:1px solid var(--accent-line)!important;background:var(--panel)!important} :root:not(.android):not(.ios) .booking-patient .icon:last-child{width:14px;height:14px} :root:not(.android):not(.ios) .booking-picker{flex:1 1 190px;min-width:160px} /* Picker rows: initials weight 600 (the shared .patient-avatar rule is 650), the New patient foot pulled off the divider with its own 5px gap and full 7px corners (the build ran the button straight into the rule with no top padding). ------- */ :root:not(.android):not(.ios) .booking-option .patient-avatar{font-weight:600} :root:not(.android):not(.ios) .booking-new{padding-top:5px;border-radius:7px;gap:8px} :root:not(.android):not(.ios) .booking-more{display:block;padding:4px 9px;font-size:13px;color:var(--hint)} /* Dark theme: the picker popover sits on the card colour, not the (lighter) popover token. --------------------------- */ :root:not(.android):not(.ios) .booking-pop{background:var(--card)} /* ---- Day list rows: the design's padding and font weight for the plain (quiet) row actions, never the icon-buttons' Home/Review weight-600; Start visit (an addition beyond the design, kept for "a way forward on every screen") stays tonal and is left out of this rule. A narrow day card wraps its actions onto their own labelled line instead of hiding the words. ------------------------------------------------------------------------------------------------------------ */ /* 60px is what the row's own content already comes to (padding 10+10 over its tallest cell, the two-line name); pinning it stops a one-line-shorter free-slot row from rounding to a pixel less than the visit rows beside it. */ :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{padding:10px 17px!important;min-height:60px!important} :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{grid-template-columns:52px minmax(0,1fr) minmax(128px,.55fr) minmax(312px,1.3fr)!important} /* Each row is its own grid (not one grid shared down the card), so a cell's own content can otherwise pull its track wider than another row's — exactly what the owner's "no track depends on what a cell holds" table rule (23 Sept) forbids. The status chip and the actions group never need more than their declared track to lay out their content without wrapping, so stopping their intrinsic size from bidding for extra space keeps every row's columns at the same x, whatever the words. */ :root:not(.android):not(.ios) .calendar-row>.status-chip,:root:not(.android):not(.ios) .calendar-row>.row-actions{min-width:0} :root:not(.android):not(.ios) .calendar-row>.status-chip{width:128px;flex:none;justify-content:flex-start} :root:not(.android):not(.ios) .calendar-row .row-button.quiet{border-radius:8px;font-weight:400;color:var(--secondary);gap:6px} :root:not(.android):not(.ios) .calendar-row>.row-actions{gap:8px} :root:not(.android):not(.ios) .calendar-row>.row-actions>button{padding:0 12px!important} :root:not(.android):not(.ios) .calendar-row>.row-actions>button .icon{width:15px;height:15px} :root:not(.android):not(.ios) .status-chip.free{background:var(--row-highlight);color:var(--secondary)} :root:not(.android):not(.ios) .calendar-row .status-chip .icon{width:13px;height:13px} /* Out-specify studio.css's generic ".patient-name small{display:block}" (0,4,1 vs this rule's 0,4,0): the status-repeat line stays off until the ≤720px container query (below) turns it on, once the chip itself has nowhere to sit. */ :root:not(.android):not(.ios) .calendar-row .patient-name .calendar-status-inline{display:none} /* ---- Day list card: fills the room the month card leaves it (the design's own card hugs five fixed rows; the owner's "tables fill the card height" rule and a fixed pager foot win here), the month card keeps its own hugging height. ------ */ :root:not(.android):not(.ios) .calendar-day{align-self:stretch;height:100%} @container (max-width:720px){ /* The wrapped two-line row settles a pixel taller than this (117px, over its two-line name and the actions line below); the same one-pixel rounding the wide row's min-height guards against would otherwise show up here too. */ :root:not(.android):not(.ios) .calendar-day .table-rows>.table-row.calendar-row{display:flex!important;flex-wrap:wrap;row-gap:6px;min-height:117px!important} /* studio.css's grid pass set .patient-name flex:none (grid ignores it there); back in flex flow here, it has to grow again so the name column always ends at the same x, whatever the status chip's own words. */ :root:not(.android):not(.ios) .calendar-row>.patient-name{flex:1 1 auto;min-width:0} :root:not(.android):not(.ios) .calendar-row>.row-actions{flex:1 0 100%;justify-content:flex-start} :root:not(.android):not(.ios) .calendar-row>.row-actions>button:not(:first-child){width:auto!important;min-width:0!important;padding:0 12px!important;justify-content:flex-start!important} :root:not(.android):not(.ios) .calendar-row>.row-actions>button:not(:first-child) .action-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:nowrap} /* The status is already the small line under the name at this width (gap 18: "keep the chip hidden only if the status is repeated in the name's small line") — actions wrapping to their own line leaves no row for the chip to sit in anyway. */ :root:not(.android):not(.ios) .calendar-row>.status-chip{display:none!important} :root:not(.android):not(.ios) .calendar-row .patient-name .calendar-status-inline{display:block;margin-top:2px;font-size:12.5px;color:var(--secondary)} } /* ---- Empty day: the action sits left, like every other blocking-screen action, labelled "Walk-in visit" with New booking's own plus glyph (not a literal "+" in the copy). ------------------------------------------------------------- */ :root:not(.android):not(.ios) .calendar-day .empty-state{align-items:flex-start;text-align:left;margin:auto 0} Colours through tokens.css only (rule I-3). */ /* One label style for every dialog form (the New patient dialog’s 13px/550 from the design): the appointment dialog matches. */ @media (min-width:768px){ :root:not(.android):not(.ios) #clinical-dialog.appointment-dialog .field-grid label{font-size:13px;font-weight:550;color:var(--ink);gap:8px} } @media (min-width:768px){ :root:not(.android):not(.ios) .booking-row label{font-size:13px;font-weight:550;color:var(--ink)} } /* ---- Sept 2026 redesign (Schedule board) ---------------------------------------------------------------------------- Day numbers in the interface face, a busy day marked with the accent dot under its number (and a legend), the selected day a solid accent fill, the day named in Newsreader, and an empty day's message centred in the list rather than stranded at its lower left. */ @media (min-width:768px){ :root:not(.android):not(.ios) .calendar-date{position:relative;font-family:var(--font-sans);font-variant-numeric:tabular-nums} :root:not(.android):not(.ios) .calendar-date.busy::after{content:'';position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)} :root:not(.android):not(.ios) .calendar-date.active{background:var(--accent);color:var(--on-accent);font-weight:600} :root:not(.android):not(.ios) .calendar-date.active::after{background:var(--on-accent)} :root:not(.android):not(.ios) .calendar-legend{display:flex;align-items:center;gap:8px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--row-border);color:var(--secondary);font-size:var(--text-secondary)} :root:not(.android):not(.ios) .calendar-legend::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent)} :root:not(.android):not(.ios) .calendar-day-head strong{font-family:var(--font-serif);font-size:26px;font-weight:400;letter-spacing:-.01em} :root:not(.android):not(.ios) .calendar-day .empty-state{align-items:center;text-align:center;margin:auto;max-width:360px} } /* The booking picker's patients read as a left-aligned list (avatar, name, record number), never centred in the row. */ @media (min-width:768px){:root:not(.android):not(.ios) .booking-option{justify-content:flex-start;text-align:left}:root:not(.android):not(.ios) .booking-option>span:not(.patient-avatar){display:flex;flex-direction:column;align-items:flex-start;min-width:0}} @media (min-width:768px){ /* A narrow day card (Genie's panel docked beside the page at 1100–1279px): the day's name takes its own line and New booking sits under it, never past the card's edge. */ @container (max-width:420px){ :root:not(.android):not(.ios) .calendar-day-head{flex-wrap:wrap;row-gap:8px} :root:not(.android):not(.ios) .calendar-day-head strong{flex:1 1 100%;min-width:0} } /* …and Move · Cancel keep their glyphs beside Start visit (their words stay their names and titles). */ @container (max-width:360px){ :root:not(.android):not(.ios) .calendar-row>.row-actions>button:not(:first-child){width:36px!important;min-width:36px!important;padding:0!important;justify-content:center!important} :root:not(.android):not(.ios) .calendar-row>.row-actions>button:not(:first-child) .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } }