/* App-local styles for Bookings. * * Built from @ecosystem/design components; what lives here is the page header with * an action on it, the weekly hours grid, and the booking card — shapes no existing * component covers. * * Per packages/design/README.md this file may consume semantic tokens but must not * redefine any .ds-* component, and must not reach for a primitive ramp or a raw * value. This app's accent lives in @ecosystem/design — css/app-themes.css, keyed * on the `data-app` slug the shell puts on . */ /* --- A page heading with one action on the end ---------------------------- */ .bk-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-4); flex-wrap: wrap; } /* --- The week ------------------------------------------------------------ */ /* One row per weekday, each holding any number of windows. A grid rather than a table because the right-hand side is controls rather than data, and a table would have to pretend otherwise. */ .bk-week { display: grid; gap: var(--ds-space-2); } .bk-day { display: grid; grid-template-columns: 7rem 1fr; gap: var(--ds-space-3); align-items: start; } .bk-day__name { padding-top: var(--ds-space-2); font-weight: 600; } .bk-windows { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; } .bk-window { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); } /* The time inputs sit in a row that must be allowed to wrap on a phone rather than forcing the page sideways. */ .bk-window .ds-input { max-width: 8rem; min-width: 0; } @media (max-width: 40rem) { .bk-day { grid-template-columns: 1fr; } .bk-day__name { padding-top: 0; } } /* --- The clock on a diary row -------------------------------------------- */ /* The time is the thing a diary row is scanned by, so it leads and it is tabular: proportional digits make 09:00 and 11:45 different widths, and a column of times that does not line up is a column you have to read rather than skim. A fixed width rather than a table cell, because the row is a flex list item everywhere else in the ecosystem and turning it into a grid here would make this app's lists structurally different from every other one. */ .bk-clock { display: inline-block; min-width: 4.25rem; font-variant-numeric: tabular-nums; color: var(--ds-text-muted); }