{ "id": "v1-bs-3232", "long_id": "v1.bootstrap-era.app.s03.p02.t03.u02", "name": "Framework default admin dashboard", "era": { "slug": "bootstrap-era", "code": "bs", "name": "Framework default", "years": [ 2011, 2014 ], "description": "The framework look of 2011 to 2014: a dark or white bar across the top, a big grey hero block, rows of three columns, wells and bordered panels, blue primary and coloured status buttons, Helvetica at 14px." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1280, "fluid": false, "responsive": true }, "summary": "The framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit, with a bar fixed across the top, a grey hero block, wells, bordered panels with tinted heading strips and coloured status buttons and labels. This pack is the dark theme of the time, as an admin dashboard: charcoal surfaces, a bar in the brand colour, square corners, slab-serif headings over a plain sans-serif. Free and paid themes like it sat behind most small back offices built in those years.", "url": "https://chrono.skin/s/v1-bs-3232", "preview_url": "https://chrono.skin/s/v1-bs-3232/specimen.html", "files": { "STYLE.md": "# Framework default admin dashboard\n\n## Summary\n\nThe framework look of 2011 to 2014: pages assembled from one widely used front-end toolkit, with a bar fixed across the top, a grey hero block, wells, bordered panels with tinted heading strips and coloured status buttons and labels. This pack is the dark theme of the time, as an admin dashboard: charcoal surfaces, a bar in the brand colour, square corners, slab-serif headings over a plain sans-serif. Free and paid themes like it sat behind most small back offices built in those years.\n\n## Layout\n\n- The application fills the window: the top bar, then `.ds-app`, a grey rail of `--size-rail` (220px) at the left with the list groups and the work in `.ds-app__main` at the right, then the footer strip. There is no centred container; at the 1280px design width the working column is about 1000px (`--size-page`).\n- The top bar is `--size-nav` (50px) tall and fixed (`position: sticky`); its inner row is `--size-bar` (the full width): brand, links, then the signed-in name and a small button at the right.\n- Dashboard (home): a compact grey hero block with a greeting and the main action, a row of four stat panels with tinted heading strips, then a wide panel holding a toolbar and a striped table with action buttons beside a `--size-sidebar` (280px) column with an alert and an activity panel, then four thumbnails. Blocks are `--space-4` apart.\n- Inner pages have no hero. They start with the `.ds-breadcrumb` strip, then `.ds-page-header` (title, one grey line, actions at the right, a rule under it). A list page continues with `.ds-tabs`, a boxed `.ds-toolbar` and the table with its pagination. A detail or settings page uses a `.ds-row`: the work (action row, text, form) in the main column and stacked panels in the 280px side column. The rail and the bar stay as they are on every page.\n- Views. The specimen is the back office of a bike hire shop in five views. `home` is the dashboard described above. `bookings` is the list page: tabs with counts, a search toolbar, the table with a button group in every row, pagination and the status legend. `booking` is one booking: the action row, the hire agreement in a well, the open cancel modal, and payment, customer and history panels at the side. `customers` is a list of people in a panel with a row of links, beside an empty waiting list. `settings` is the shop form in a panel under two alerts, with hours, last changes and a well at the side.\n- Responsive: this was the first responsive generation. Below 1000px the stat panels and thumbnails fold to two columns. Below 980px the rail is hidden, the links of the bar fold into the menu button at its right (`.ds-menu--nav`), which stands in for both, and every row of columns stacks. The fold is a `
` whose `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`); it opens the list of every view as a full row under the bar, and the current view's item has the same darker plate as a current bar link. The rail is not shown; the list stands in for both. Below 760px the welcome block and page headers stack too, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 5px (inside labels, between a label and its field), `--space-2` 10px (between adjacent controls, cell padding, alert padding), `--space-3` 15px (the column gutter half, panel padding, paragraph gap), `--space-4` 20px (between stacked blocks, well padding), `--space-5` 30px (the gutter between columns, between sections), `--space-6` 40px (around featurettes and above the footer), `--space-7` 60px (hero padding). Controls are padded by `--space-control-y` (5px) and `--space-control-x` (12px).\n- Other sizes: `--size-tile` 72px (thumbnail colour block), `--size-icon` 36px, `--size-mark` 26px, `--size-dialog` 520px, `--size-search` 220px.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two families: a slab serif for headings, the brand name and figures (`--font-heading`: Roboto Slab, then Rockwell, then Georgia) and a plain sans-serif for everything else (`--font-body` and `--font-ui`: Open Sans, then Helvetica Neue). The references used a commercial slab and a commercial sans; these are the nearest open and system faces. `--font-mono` (Consolas, Menlo) is for code.\n- Body is `--text-base` 14px at `--line-body` 1.5 in light grey `--color-text` #cccccc. Headings are regular weight (`--weight-heading` 400) in white: `--text-h1` 32px, `--text-h2` 26px, `--text-h3` 20px; `--text-display` is 48px. `--text-large` 18px is the hero line and large buttons; `--text-ui` 13px bold (`--weight-ui` 700) is buttons and navigation; `--text-small` 12px is meta and labels.\n- Surfaces are charcoal, darkest outside: `--color-page` #111111, `--color-surface` #1b1b1b for panels and rows, `--color-surface-alt` #222222 for stripes, wells and the rail, `--color-surface-strong` #333333 for the hero block and panel heading strips. Borders are 1px `--color-border` #333333.\n- Teal green is the brand colour: the bar (`--color-bar` #1fa67a with pale `--color-bar-text` #d2ebe3), the primary button, links (`--color-link` #21b384), the current list item (`--color-accent` #1b926c). Small titles are mint `--color-heading-alt` #a5d8c7. The inverted block is light (`--color-inverse` #eeeeee with dark text): the footer strip.\n- Square and flat: every radius is 0, every `--fill-*` token is a single colour, there are no drop shadows and no text shadows; the modal has only a 1px dark outline. `--border-width-strong` is 3px, under a table head.\n\n- Text on fills, the convention every layout and token set of this era keeps:\n - on `--color-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt` and `--color-surface-strong`: body text `--color-text`, headings `--color-heading`, small titles (panel strip, sidebar heading, h3) `--color-heading-alt`, meta `--color-text-muted`, links `--color-link`. A token set keeps these five fills on one side, all light or all dark, so that the same text reads on each;\n - on the top bar (`--fill-bar`): `--color-bar-text` only, for the name, the links and plain text. Hover and current items get a plate of `--color-bar-text` mixed into transparent at 9% and 18%, never a second colour;\n - on the secondary bar (`--fill-bar-alt`): `--color-bar-alt-text`; a link there is `.ds-link` or inherits and is underlined;\n - on `--fill-inverse`: `--color-inverse-text`, with `opacity` for the quieter line;\n - on `--color-fill-1` to `--color-fill-4`, `--fill-accent`, `--color-accent-alt`, `--color-success`, `--color-warning` and `--color-danger` used as a fill (buttons, labels, tiles, the masthead, the current list item): `--color-accent-text`. A token set keeps all of these dark or saturated enough for it;\n - on `--fill-button`: `--color-button-text`; on `--fill-button-secondary`: `--color-button-secondary-text`;\n - on `--color-notice`: `--color-notice-text`; on `--color-danger-surface`: `--color-danger`;\n - the grey count label is `--color-text-muted` with `--color-canvas` text.\n- Status colours: `--color-success` (green), `--color-warning` (amber), `--color-danger` (red) and `--color-accent-alt` (the light blue \"info\") fill buttons and labels; mixed at 20% into `--color-surface` they tint the heading strip of a contextual panel, whose text stays `--color-heading`.\n- `--fill-button` is either the flat `--color-button` or a translucent gloss laid over it. The status buttons reuse it with `background-color` set to their own colour, so a token set must not bake an opaque gradient into `--fill-button` or `--fill-button-hover`.\n- Inputs, wells and the current bar item take `--shadow-control-pressed` (the inset shadow); buttons and the brand tile take `--shadow-control`. Button and brand tile borders are `--color-shadow`, a translucent dark edge on any fill.\n- Links are never underlined at rest (`--link-decoration: none`) and underline on hover. `--color-link-visited` equals the link colour.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the bar's bottom edge (`--color-bar-text` at 22% over `--color-bar`), bar hover and current plates (9% and 18%), the hovered secondary button (its text colour at 12% into its fill), contextual panel strips (20%) and their borders (45% into `--color-border`), notice borders (the text colour at 25% into the notice fill).\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, the text colour and `--fill-page`.\n- `.ds-container`: the centred column, `--size-page` wide plus a `--space-3` gutter each side. `.ds-row` lays `.ds-col` columns side by side with a `--space-5` gutter: three plain columns are the era's standard row; `.ds-col--wide` takes two shares, `.ds-col--side` is `--size-sidebar` wide, `.ds-col--stack` stacks blocks `--space-4` apart and `.ds-grow` on its last block makes both columns end on one line (with `.ds-row--level`). `.ds-row--flush` drops the bottom margin. `.ds-col__title`, `.ds-col__text` and `.ds-col__icon` (a round grey plate) dress a column of a three-column row, which ends in a `.ds-button--secondary` reading \"View details\". `.ds-rule` is the faint horizontal rule between sections. `.ds-title` is a section heading (`--small` for h3 size) with a muted `.ds-title__small` after it; `.ds-lead` is a paragraph at `--text-large`; `.ds-muted` greys a phrase; `.ds-spaced` puts `--space-4` under a block.\n- `.ds-well`: the inset grey box (`--color-surface-alt`, faint border, inset shadow) for an aside or a call to action. `.ds-code` is a block of code in the same grey with a border; `.ds-code--inverse` sets it on `--fill-inverse` for a terminal line; `.ds-code__comment` and `.ds-code__key` colour parts of it. `.ds-figure` is a placeholder picture, a grey bordered block with its size written on it (`--tall` doubles the height); replace it with a real picture.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.ds-brand__mark` is a `--size-mark` tile dressed like the primary button (`--fill-button`, `--color-button-text`, a `--color-shadow` border, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-large` in `--color-bar-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the bar fixed across the top (`position: sticky`), on `--fill-bar` with a 1px bottom edge. `.ds-nav__inner` is `--size-bar` wide and `--size-nav` tall; it holds the `.ds-brand`, `.ds-nav__links` with full-height `.ds-nav__link` items (current: `is-current`, a darker plate with the inset shadow) and `.ds-nav__aside` on the right for `.ds-nav__text`, a small button or a `.ds-nav__search` field. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself. Below 980px the bar stops being fixed, the row of links is hidden and the `.ds-menu--nav` button at the right of the bar opens them as a stack. The aside holds the signed-in person as a `.ds-nav__user` link (a small `.ds-avatar` and the name) with a `.ds-menu--end` drop-down for settings and signing out.\n- `.ds-hero`: a compact grey block (`--color-surface-strong`, `--radius-page`) that opens the dashboard: `.ds-hero__copy` with `.ds-hero__title` (h1 size) and one `.ds-hero__lead` line, and `.ds-hero__actions` at the right with one large primary button. `.ds-app` is the frame under the bar: `.ds-app__side` is the grey rail, `.ds-app__main` the padded working area that holds the views.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__copy` with `.ds-page-header__title` (a status label may follow the text) and one grey `.ds-page-header__text` line, `.ds-page-header__actions` at the right on the baseline with at most one primary button, and a faint rule under it all. Place it directly after the breadcrumb.\n- `.ds-prose`: running text: h1, h2, h3 (in `--color-heading-alt`), p, lists, `strong`, and inline `code` in `--color-danger` on a faint grey chip. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover` (darker and underlined), `is-active`, `is-focus`. `--quiet` is grey for meta. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the primary button on `--fill-button` with a translucent dark border and `--radius-control`. Variants: `--secondary` (the pale default button, `--fill-button-secondary` with a `--color-border-strong` border; the usual choice), `--danger` (red, for destructive actions), `--success` (green), `--warning` (amber), `--info` (light blue), `--large` (hero actions), `--small` (table rows, the bar), `--block` (full width). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons `--space-2` apart; `.ds-buttongroup` joins small buttons into one strip for the actions of a table row.\n- `.ds-form`: vertical form. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps a bold `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea` (`.ds-form__input--small` in bars). Error: `is-error` on the field and the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`. `.ds-form__actions` is the grey strip that closes a form inside a panel; `--inline` sets a form in one row; `--flush` removes the gap when the form wraps a panel body and its action strip.\n- `.ds-table`: striped data table: a rule above every row, odd rows on `--color-surface-alt`, a `--border-width-strong` rule under the bold head, no fill on the head. `--bordered` adds the outer box and vertical rules. `.ds-table__num` right-aligns numbers; `.ds-table__actions` is the right-aligned cell for a `.ds-buttongroup`; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it with the pagination at the left and a legend at the right.\n- `.ds-list`: rows divided by faint rules. `.ds-list__item` holds a bold link `.ds-list__title`, `.ds-list__text` and small grey `.ds-list__meta`.\n- `.ds-panel`: bordered box with `--radius-panel` and `--shadow-panel`: a tinted `.ds-panel__title` strip (`--color-surface-strong`, `--color-heading-alt`, a label may float right in it), `.ds-panel__body`, optional grey `.ds-panel__foot`. `.ds-panel__figure` is a large figure (a price, a total). Contextual variants colour the strip and the border: `--primary` (the button fill), `--success`, `--warning`, `--danger`, `--info` (20% tints). `.ds-panels` sets three panels side by side.\n- `.ds-stat`: the row of four stat panels. `.ds-stat` is the row; each `.ds-stat__item` is also a contextual `.ds-panel` (`--primary`, `--success`, `--warning`, `--danger`) whose `.ds-panel__title` strip names the figure and whose body holds a `.ds-stat__figure` (h1 size, heading font) over a small grey `.ds-stat__label`. `.ds-toolbar` is the grey secondary bar (`--fill-bar-alt`) above a table: a `.ds-toolbar__field` search input, a small button and a right-aligned `.ds-toolbar__text` count; inside a panel it sits between the heading strip and `.ds-panel__table` (the wrapper that aligns the table with the panel padding), on its own it is `--boxed`. `.ds-facts` is a list of label and value rows (`.ds-facts__row`, `.ds-facts__label`, `.ds-facts__value`) for a detail panel.\n- `.ds-grid`: four bordered thumbnails in a row. Each `.ds-grid__cell` is a white box with `--space-1` padding holding a `.ds-grid__tile` (`--color-fill-1`; `--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` in `--color-accent-text`, then a `.ds-grid__caption` with `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-tabs`: boxed tabs standing on a rule. `.ds-tabs__tab` is a link; `is-current` has a border on three sides, `--color-canvas` behind it and body-coloured text. A count label may follow the text.\n- `.ds-badge`: the small bold label on `--fill-accent` with `--radius-pill`. Variants: `--info` (light blue), `--success` (green), `--warning` (amber), `--danger` (red), all with `--color-accent-text`; `--quiet` is the grey count. `.ds-badgerow` for several.\n- `.ds-sidebar`: the list groups in the left rail, written once outside the views. A small `.ds-sidebar__title`, then a `.ds-sidebar__list` of joined bordered `.ds-sidebar__link` rows on `--color-surface`, each with an optional count label at the right; the current row is filled with `--fill-accent` (`is-current`, or in the specimen the row of `.ds-sidebar__list--main` that matches the view). `.ds-sidebar__note` is a small grey line under the lists. The rail is hidden below 980px.\n- `.ds-notice`: the alert: a tinted box (`--color-notice`, `--color-notice-text`) with a 1px border of the same hue; `--error` uses `--color-danger-surface` and `--color-danger`; `--callout` adds a `--space-1` left edge for a note inside documentation. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: joined bordered boxes of `.ds-pagination__link`; `is-current` is filled with `--fill-accent`, `is-disabled` is grey. The first and last box carry the `--radius-control` corners.\n- `.ds-breadcrumb`: a grey rounded strip (`--color-surface-alt`) of `.ds-breadcrumb__item` separated by slashes; the last item is `.ds-breadcrumb__current`, plain grey text.\n- `.ds-dialog`: the modal, shown open: a `--color-overlay` backdrop block centring `.ds-dialog__box` (bordered, `--radius-page`, `--shadow-dialog`) with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`) over a rule, `.ds-dialog__body`, and a grey `.ds-dialog__actions` strip with the buttons at the right, the confirming one last.\n- `.ds-empty`: a centred message in a well: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one `.ds-button--secondary`. It stands where a list would be.\n- `.ds-footer`: a full-width strip on `--fill-inverse` at the foot of the window, small text: `.ds-footer__text` at the left and `.ds-footer__links` of underlined `.ds-footer__link` at the right.\n\n- `.ds-menu`: a drop-down under a navigation item. The list item carries `.ds-menu`, its link `.ds-nav__link.ds-menu__toggle` (which adds the small caret), and the list `.ds-menu__list` of `.ds-menu__item` links with `.ds-menu__divider` rules between groups; `.ds-menu--end` hangs the list from the right edge of its item. It opens on hover and on keyboard focus (`.is-open` shows it statically) as a sheet on `--fill-panel` hanging from the bar, with the accent fill on the hovered item. `.ds-menu--nav` is the same component as the bar's fold: a `
` whose `.ds-menu__toggle` is the bordered button with three `.ds-menu__bars`; below 980px the row of links is hidden and this button opens them as a stack inside the bar, in the bar's own colours.\n- `.ds-menu--nav`: the phone navigation. A `
` placed in the bar after the links; hidden above 980px, where `.ds-nav__links` shows. Its `.ds-menu__toggle` summary shows three bars (`.ds-menu__bars`), and the list opens in the flow as a full row under the bar, one `.ds-menu__item` per view (a divider and the call to action may follow), the current one on a darker plate.\n- `.ds-accordion`: stacked groups for questions and settings that open one at a time. Each group is a `
` with a `.ds-accordion__head` summary (the panel title strip with a small triangle) and a `.ds-accordion__body`. Give the groups one `name` so that opening one closes the others.\n- `.ds-tooltip`: a hint on hover or focus. The trigger carries `.ds-tooltip` and `tabindex=\"0\"` and holds a `.ds-tooltip__tip`: a small bubble in `--color-inverse` with `--color-inverse-text` and an arrow, above the trigger. `.ds-tooltip--start` aligns the bubble with the trigger's left edge and `.ds-tooltip--end` with its right edge (use them near the edges of a column, so that the bubble stays inside a narrow window), `.ds-tooltip--plain` drops the underline for a badge or button, `.is-open` shows it statically.\n- `.ds-switch`: the sliding on and off control of the period, drawn over a checkbox: a label holding `.ds-switch__input`, the `.ds-switch__track` (it writes ON on the primary button fill or OFF on the disabled fill beside a pale handle) and the `.ds-switch__label`. Use it for a setting that takes effect at once; keep `.ds-form__check` for a box that is sent with a form.\n- `.ds-progress`: a sunken track holding a `.ds-progress__bar` in the primary button fill. The bar's length is one of `--20`, `--40`, `--60`, `--80`, `--100`; `--success`, `--warning` and `--danger` recolour it; `.ds-progress--small` is the thin form inside a panel or a row. `.ds-progress__label` is the line of small text above it.\n- `.ds-avatar`: a person's or account's initial on a `--color-fill-1` square with `--color-accent-text` (`--2` to `--4` take the other fills, `--small` is the size of the mark, `--round` a circle). `.ds-person` sets one beside a `.ds-person__body` of name and meta text.\n\n## Never\n\n- `font-families <= 3`: a slab serif for headings, a sans-serif for text, monospace for code.\n- `font-size >= 12px`: meta text and labels are the smallest.\n- `font-size <= 32px`: page titles and stat figures are the largest text; a dashboard has no display type.\n- `letter-spacing = 0`: text is not tracked.\n- `uppercase-text = 0%`: navigation, buttons and headings are in sentence case.\n- `underlined-links <= 20%`: links are underlined only on hover and in the footer.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills = 0%`: every background is one solid colour.\n- `border-width <= 5px`: borders are 1px; a callout has a 5px left edge.\n- `border-radius <= 10px`: labels are rounded to 10px; controls and boxes have 4px corners, the masthead tile and the modal 6px.\n- `box-shadow-blur <= 15px`: only the modal casts a soft shadow.\n- `animation = none`: nothing moves on its own.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new box is a `.ds-panel` (border, heading strip, body) or a `.ds-well`; a new action is a `.ds-button`, pale `--secondary` unless it is the one main action of the view; a new status is one of the four status colours with `--color-accent-text` on it. Lay new content out in a `.ds-row` of `.ds-col` columns. Controls take `--radius-control`, boxes `--radius-panel`, labels `--radius-pill`, the hero and the dialog `--radius-page`. Spacing comes from the `--space-*` scale; any one-off shade is a `color-mix()` of tokens, noted next to the rule. Keep to the text-on-fill convention above, so that the component still reads with another palette of the era.\n", "components.css": ":root {\n --size-page: 1000px;\n --size-bar: 100%;\n --size-nav: 50px;\n --size-mark: 26px;\n --size-search: 220px;\n --size-sidebar: 280px;\n --size-rail: 220px;\n --size-tile: 72px;\n --size-icon: 36px;\n --size-dialog: 520px;\n --space-control-y: 5px;\n --space-control-x: 12px;\n --space-1: 5px;\n --space-2: 10px;\n --space-3: 15px;\n --space-4: 20px;\n --space-5: 30px;\n --space-6: 40px;\n --space-7: 60px;\n}\n\n/* shell */\n.ds-page {\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* container, rows and columns: the fixed centred column and its equal columns */\n.ds-container {\n max-width: calc(var(--size-page) + var(--space-3) * 2);\n margin: 0 auto;\n padding: 0 var(--space-3);\n}\n.ds-row {\n display: flex;\n align-items: flex-start;\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n.ds-row--level {\n align-items: stretch;\n}\n.ds-row--flush {\n margin-bottom: 0;\n}\n.ds-col {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-col--wide {\n flex: 2 1 0;\n}\n.ds-col--side {\n flex: 0 0 var(--size-sidebar);\n}\n.ds-col--stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n.ds-col--stack > .ds-grow {\n flex: 1 0 auto;\n}\n.ds-col__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-col__text {\n margin: 0 0 var(--space-3);\n}\n.ds-col__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-3);\n padding: var(--space-2);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n}\n.ds-col__icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-rule {\n height: 0;\n margin: var(--space-5) 0;\n border: 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-title {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-title--small {\n font-size: var(--text-h3);\n}\n.ds-title__small {\n color: var(--color-text-muted);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n}\n.ds-lead {\n margin: 0 0 var(--space-4);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-muted {\n color: var(--color-text-muted);\n}\n\n/* well: an inset grey box */\n.ds-well {\n padding: var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-well > :last-child {\n margin-bottom: 0;\n}\n\n/* code block */\n.ds-code {\n display: block;\n margin: 0 0 var(--space-3);\n padding: var(--space-2) var(--space-3);\n overflow-x: auto;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n white-space: pre;\n}\n.ds-code__comment {\n color: var(--color-text-muted);\n}\n.ds-code__key {\n color: var(--color-link);\n}\n.ds-code--inverse {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-color: transparent;\n}\n\n/* placeholder picture: a grey block with its size written on it */\n.ds-figure {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--size-tile);\n padding: var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-align: center;\n}\n\n/* nav: the bar fixed across the top */\n.ds-nav {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--color-bar);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, var(--color-bar));\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n max-width: var(--size-bar);\n min-height: var(--size-nav);\n margin: 0 auto;\n padding: 0 var(--space-3);\n display: flex;\n align-items: stretch;\n gap: var(--space-3);\n}\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n margin-right: var(--space-2);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 76%;\n height: 76%;\n}\n.ds-brand__name {\n color: var(--color-bar-text);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-nav__links {\n display: flex;\n align-items: stretch;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__links > li {\n display: flex;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n padding: 0 var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n}\n.ds-nav__link.is-current {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__aside {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-left: auto;\n}\n.ds-nav__text {\n color: var(--color-bar-text);\n}\n.ds-nav__search {\n width: var(--size-search);\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n margin-top: var(--space-4);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n margin-top: var(--space-4);\n color: var(--color-heading-alt);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-2);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-2);\n padding-left: var(--space-4);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-alt);\n color: var(--color-danger);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose a:hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-prose__lead {\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-link-hover);\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-4);\n margin: 0;\n}\n\n/* buttons: the primary fill, a pale default, and four status colours */\n.ds-button {\n display: inline-block;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-shadow);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n text-align: center;\n text-decoration: none;\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover,\n.ds-button--secondary:active,\n.ds-button--secondary.is-active {\n background: linear-gradient(color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)), color-mix(in srgb, var(--color-button-secondary) 88%, var(--color-button-secondary-text)));\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger {\n background: var(--fill-button);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success {\n background: var(--fill-button);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--warning {\n background: var(--fill-button);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info {\n background: var(--fill-button);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover,\n.ds-button--danger:active,\n.ds-button--danger.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-danger);\n color: var(--color-accent-text);\n}\n.ds-button--success:hover,\n.ds-button--success.is-hover,\n.ds-button--success:active,\n.ds-button--success.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-success);\n color: var(--color-accent-text);\n}\n.ds-button--warning:hover,\n.ds-button--warning.is-hover,\n.ds-button--warning:active,\n.ds-button--warning.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-warning);\n color: var(--color-accent-text);\n}\n.ds-button--info:hover,\n.ds-button--info.is-hover,\n.ds-button--info:active,\n.ds-button--info.is-active {\n background: var(--fill-button-hover);\n background-color: var(--color-accent-alt);\n color: var(--color-accent-text);\n}\n.ds-button--large {\n padding: var(--space-2) var(--space-4);\n border-radius: var(--radius-page);\n font-size: var(--text-large);\n}\n.ds-button--small {\n padding: calc(var(--space-control-y) / 3) var(--space-2);\n font-size: var(--text-small);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-buttongroup {\n display: inline-flex;\n vertical-align: middle;\n}\n.ds-buttongroup > .ds-button {\n border-radius: 0;\n}\n.ds-buttongroup > .ds-button + .ds-button {\n margin-left: calc(var(--border-width) * -1);\n}\n.ds-buttongroup > .ds-button:first-child {\n border-top-left-radius: var(--radius-control);\n border-bottom-left-radius: var(--radius-control);\n}\n.ds-buttongroup > .ds-button:last-child {\n border-top-right-radius: var(--radius-control);\n border-bottom-right-radius: var(--radius-control);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n margin: 0;\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form--flush {\n gap: 0;\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-3);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-text);\n font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n transition: var(--transition);\n}\n.ds-form__input--small {\n padding: calc(var(--space-control-y) / 2) var(--space-2);\n}\n.ds-form__textarea {\n min-height: var(--space-7);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__field.is-error .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: var(--space-1);\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n\n/* table: striped rows, a rule above every row, a strong rule under the head */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-surface);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2);\n text-align: left;\n vertical-align: middle;\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table thead th {\n color: var(--color-heading);\n border-top: 0;\n border-bottom: var(--border-width-strong) var(--border-style) var(--color-border);\n font-weight: var(--weight-bold);\n vertical-align: bottom;\n}\n.ds-table tbody th {\n font-weight: var(--weight-body);\n}\n.ds-table tbody tr:nth-child(odd) td,\n.ds-table tbody tr:nth-child(odd) th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__actions {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table__caption {\n caption-side: bottom;\n padding-top: var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-align: left;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin-top: var(--space-3);\n}\n\n/* list: media rows divided by faint rules */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n padding: var(--space-2) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-list__item:last-child {\n padding-bottom: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-list__text {\n display: block;\n margin: 0;\n}\n.ds-list__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* panel: a bordered box with a tinted heading strip */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-panel__title .ds-badge {\n float: right;\n}\n.ds-panel__body {\n padding: var(--space-3);\n}\n.ds-panel__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel__foot {\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n font-size: var(--text-small);\n}\n.ds-panel__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-panel--primary {\n border-color: var(--color-button);\n}\n.ds-panel--primary > .ds-panel__title {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n border-bottom-color: var(--color-button);\n text-shadow: var(--shadow-text);\n}\n.ds-panel--success {\n border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel--success > .ds-panel__title {\n background: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));\n}\n.ds-panel--warning {\n border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));\n}\n.ds-panel--warning > .ds-panel__title {\n background: color-mix(in srgb, var(--color-warning) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border));\n}\n.ds-panel--danger {\n border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));\n}\n.ds-panel--danger > .ds-panel__title {\n background: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border));\n}\n.ds-panel--info {\n border-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel--info > .ds-panel__title {\n background: color-mix(in srgb, var(--color-accent-alt) 20%, var(--color-surface));\n color: var(--color-heading);\n border-bottom-color: color-mix(in srgb, var(--color-accent-alt) 45%, var(--color-border));\n}\n.ds-panel.ds-grow {\n display: flex;\n flex-direction: column;\n}\n.ds-panel.ds-grow > .ds-panel__body {\n flex: 1 0 auto;\n}\n.ds-panels {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-5);\n margin-bottom: var(--space-5);\n}\n\n/* grid: bordered thumbnails, each a colour block over a caption */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n}\n.ds-grid__cell {\n min-width: 0;\n padding: var(--space-1);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-grid__tile {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--size-tile);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: calc(var(--radius-panel) / 2);\n}\n.ds-grid__tile--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__tile--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__tile--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-grid__caption {\n padding: var(--space-2);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-grid__text {\n margin: var(--space-1) 0 var(--space-2);\n}\n\n/* tabs: boxed tabs standing on a rule */\n.ds-tabs {\n display: flex;\n gap: var(--border-width-strong);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: block;\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-3);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: var(--link-decoration-quiet);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-strong);\n border-color: var(--color-surface-strong) var(--color-surface-strong) var(--color-border);\n}\n.ds-tabs__tab.is-current {\n background: var(--color-canvas);\n color: var(--color-text);\n border-color: var(--color-border) var(--color-border) var(--color-canvas);\n}\n.ds-tabs__tab .ds-badge {\n margin-left: var(--space-1);\n}\n\n/* badge: the small label; status colours and a count */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-1);\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n vertical-align: baseline;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-text-muted);\n color: var(--color-canvas);\n text-shadow: none;\n}\n.ds-badge--info {\n background: var(--color-accent-alt);\n}\n.ds-badge--success {\n background: var(--color-success);\n}\n.ds-badge--warning {\n background: var(--color-warning);\n}\n.ds-badge--danger {\n background: var(--color-danger);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n}\n\n/* notice: the tinted alert box */\n.ds-notice {\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 25%, var(--color-notice));\n border-radius: var(--radius-panel);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-danger-surface));\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n margin-bottom: var(--space-4);\n}\n\n/* pagination: joined boxes */\n.ds-pagination {\n display: inline-flex;\n margin: 0;\n padding: 0;\n list-style: none;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-panel);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n margin-left: calc(var(--border-width) * -1);\n padding: var(--space-control-y) var(--space-control-x);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-pagination > li:first-child .ds-pagination__link {\n margin-left: 0;\n border-radius: var(--radius-control) 0 0 var(--radius-control);\n}\n.ds-pagination > li:last-child .ds-pagination__link {\n border-radius: 0 var(--radius-control) var(--radius-control) 0;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* breadcrumb: a grey strip with slashes */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1);\n margin: 0 0 var(--space-4);\n padding: var(--space-2) var(--space-3);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n border-radius: var(--radius-panel);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-1);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-text-muted);\n}\n\n/* dialog: the modal, shown open on its backdrop */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-5) var(--space-3);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-2) var(--space-3);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-h3) * 0.6);\n height: calc(var(--text-h3) * 0.6);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-3);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--color-surface-alt);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 0 0 calc(var(--radius-page) - var(--border-width)) calc(var(--radius-page) - var(--border-width));\n}\n\n/* empty state: a well with a message and one button */\n.ds-empty {\n padding: var(--space-5) var(--space-4);\n background: var(--color-surface-alt);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-icon);\n height: var(--size-icon);\n margin-bottom: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-3);\n color: var(--color-text-muted);\n}\n\n/* spacing helper: a block that is followed by another */\n.ds-page .ds-spaced {\n margin-bottom: var(--space-4);\n}\n\n/* the current view marks its item in the top bar and in the side list; a booking marks Bookings */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#home\"],\n.ds-page:not(:has(.ds-view:target)) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-menu--nav .ds-menu__item[href=\"#home\"],\n.ds-page:has(#bookings:target) .ds-nav__link[href=\"#bookings\"],\n.ds-page:has(#bookings:target) .ds-menu--nav .ds-menu__item[href=\"#bookings\"],\n.ds-page:has(#booking:target) .ds-nav__link[href=\"#bookings\"],\n.ds-page:has(#booking:target) .ds-menu--nav .ds-menu__item[href=\"#bookings\"],\n.ds-page:has(#customers:target) .ds-nav__link[href=\"#customers\"],\n.ds-page:has(#customers:target) .ds-menu--nav .ds-menu__item[href=\"#customers\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-page:has(#settings:target) .ds-menu--nav .ds-menu__item[href=\"#settings\"] {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-sidebar__list--main .ds-sidebar__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-sidebar__list--main .ds-sidebar__link[href=\"#home\"],\n.ds-page:has(#bookings:target) .ds-sidebar__list--main .ds-sidebar__link[href=\"#bookings\"],\n.ds-page:has(#booking:target) .ds-sidebar__list--main .ds-sidebar__link[href=\"#bookings\"],\n.ds-page:has(#customers:target) .ds-sidebar__list--main .ds-sidebar__link[href=\"#customers\"],\n.ds-page:has(#settings:target) .ds-sidebar__list--main .ds-sidebar__link[href=\"#settings\"] {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n text-shadow: var(--shadow-text);\n}\n\n/* app: a grey rail on the left with the list groups, the work on the right, full width */\n.ds-app {\n display: flex;\n align-items: stretch;\n}\n.ds-app__side {\n flex: 0 0 var(--size-rail);\n padding: var(--space-4) var(--space-3);\n background: var(--color-surface-alt);\n border-right: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-app__main {\n flex: 1 1 0;\n min-width: 0;\n padding: var(--space-4) var(--space-5) var(--space-6);\n}\n\n/* sidebar: list groups in the rail */\n.ds-sidebar {\n font-family: var(--font-ui);\n}\n.ds-sidebar__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-sidebar__list {\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__link {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-2);\n margin-top: calc(var(--border-width) * -1);\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-sidebar__list > li:first-child .ds-sidebar__link {\n margin-top: 0;\n border-radius: var(--radius-panel) var(--radius-panel) 0 0;\n}\n.ds-sidebar__list > li:last-child .ds-sidebar__link {\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-sidebar__link.is-current {\n position: relative;\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-accent);\n}\n.ds-sidebar__note {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* hero: a compact grey block that opens the dashboard */\n.ds-hero {\n display: flex;\n align-items: center;\n gap: var(--space-5);\n margin-bottom: var(--space-4);\n padding: var(--space-5);\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-radius: var(--radius-page);\n}\n.ds-hero__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-hero__lead {\n margin: 0;\n font-size: var(--text-large);\n line-height: var(--line-body);\n}\n.ds-hero__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* page header: title with a rule under it */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding-bottom: var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__title .ds-badge {\n vertical-align: middle;\n}\n.ds-page-header__text {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* stats: four panels in a row, each a tinted heading strip over one figure */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: var(--space-4);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n}\n.ds-stat__item {\n min-width: 0;\n}\n.ds-stat__figure {\n display: block;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* toolbar: the grey secondary bar above a table */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background-color: var(--color-bar-alt);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-toolbar--boxed {\n margin-bottom: var(--space-3);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-toolbar__field {\n flex: 0 1 var(--size-search);\n}\n.ds-toolbar__text {\n margin-left: auto;\n font-size: var(--text-small);\n}\n.ds-panel__table .ds-table th:first-child,\n.ds-panel__table .ds-table td:first-child {\n padding-left: var(--space-3);\n}\n.ds-panel__table .ds-table th:last-child,\n.ds-panel__table .ds-table td:last-child {\n padding-right: var(--space-3);\n}\n\n/* definition rows: a label and its value, used in detail panels */\n.ds-facts {\n margin: 0;\n}\n.ds-facts__row {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__row:first-child {\n padding-top: 0;\n border-top: 0;\n}\n.ds-facts__label {\n color: var(--color-text-muted);\n}\n.ds-facts__value {\n margin: 0;\n text-align: right;\n}\n\n/* footer: an inverted strip across the page */\n.ds-footer {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-2) var(--space-4);\n padding: var(--space-3) var(--space-5);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n font-size: var(--text-small);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: inherit;\n text-decoration: underline;\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: none;\n}\n\n/* menu: a drop-down under a navigation item, open on hover or keyboard focus */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border-left: var(--space-1) solid transparent;\n border-right: var(--space-1) solid transparent;\n border-top: var(--space-1) solid currentColor;\n vertical-align: calc(var(--space-1) / 2);\n margin-left: var(--space-1);\n opacity: 0.7;\n}\n.ds-menu__list {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 20;\n min-width: calc(var(--size-icon) * 4);\n margin: 0;\n padding: var(--space-1) 0;\n list-style: none;\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu:hover > .ds-menu__list,\n.ds-menu:has(:focus-visible) > .ds-menu__list,\n.ds-menu.is-open > .ds-menu__list {\n display: block;\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-1) var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item.is-hover,\n.ds-menu__item:focus-visible {\n background-color: var(--color-accent);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n}\n.ds-menu--end > .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-menu__divider {\n height: 0;\n margin: var(--space-1) 0;\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* menu in the bar: on a narrow window the links fold away behind a button with three bars */\n.ds-menu--nav {\n display: none;\n position: static;\n}\n.ds-menu--nav > .ds-menu__toggle {\n position: absolute;\n top: var(--space-1);\n right: var(--space-3);\n display: flex;\n align-items: center;\n justify-content: center;\n height: calc(var(--size-nav) - var(--space-2));\n padding: 0 var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 35%, transparent);\n border-radius: var(--radius-control);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu--nav > .ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu--nav > .ds-menu__toggle::after {\n content: none;\n}\n.ds-menu--nav > .ds-menu__toggle:hover,\n.ds-menu--nav[open] > .ds-menu__toggle {\n background: color-mix(in srgb, var(--color-bar-text) 18%, transparent);\n}\n.ds-menu--nav > .ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__bars {\n display: block;\n width: var(--space-4);\n height: calc(var(--space-2) + var(--border-width-strong) * 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu__bars::before {\n content: \"\";\n display: block;\n margin-top: calc((var(--space-2) - var(--border-width-strong)) / 2);\n border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-menu--nav > .ds-menu__list {\n display: block;\n position: static;\n min-width: 0;\n padding: var(--space-1) 0 var(--space-2);\n background: transparent;\n border: 0;\n border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n border-radius: 0;\n box-shadow: none;\n}\n.ds-menu--nav .ds-menu__item {\n padding: var(--space-2) var(--space-3);\n color: var(--color-bar-text);\n font-weight: var(--weight-ui);\n text-shadow: var(--shadow-text);\n text-transform: var(--ui-transform);\n white-space: normal;\n}\n.ds-menu--nav .ds-menu__item:hover,\n.ds-menu--nav .ds-menu__item.is-hover,\n.ds-menu--nav .ds-menu__item:focus-visible {\n background: color-mix(in srgb, var(--color-bar-text) 9%, transparent);\n color: var(--color-bar-text);\n}\n.ds-menu--nav .ds-menu__divider {\n border-top-color: color-mix(in srgb, var(--color-bar-text) 22%, transparent);\n}\n\n/* accordion: stacked groups, each a heading that opens its body */\n.ds-accordion {\n margin: 0 0 var(--space-4);\n}\n.ds-accordion__item {\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__item + .ds-accordion__item {\n margin-top: var(--space-1);\n}\n.ds-accordion__head {\n display: block;\n padding: var(--space-2) var(--space-3);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\n border-radius: calc(var(--radius-panel) - var(--border-width));\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head::before {\n content: \"\";\n display: inline-block;\n width: 0;\n height: 0;\n margin-right: calc(var(--space-3) - var(--space-1) * 1.2);\n border-top: var(--space-1) solid transparent;\n border-bottom: var(--space-1) solid transparent;\n border-left: calc(var(--space-1) * 1.2) solid currentColor;\n color: var(--color-text-muted);\n}\n.ds-accordion__item[open] > .ds-accordion__head {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width)) 0 0;\n}\n.ds-accordion__item[open] > .ds-accordion__head::before {\n rotate: 90deg;\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n text-decoration: underline;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: var(--space-3);\n}\n.ds-accordion__body > p {\n margin: 0 0 var(--space-2);\n}\n.ds-accordion__body > :last-child {\n margin-bottom: 0;\n}\n\n/* tooltip: a small inverted bubble above its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-block;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\n cursor: help;\n}\n.ds-tooltip--plain {\n border-bottom: 0;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 30;\n width: max-content;\n max-width: var(--size-sidebar);\n padding: var(--space-1) var(--space-2);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-align: center;\n text-shadow: none;\n text-transform: none;\n white-space: normal;\n transform: translateX(-50%);\n}\n.ds-tooltip__tip::after {\n content: \"\";\n position: absolute;\n top: 100%;\n left: 50%;\n width: var(--space-2);\n height: var(--space-2);\n margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-1) * -1);\n background: var(--color-inverse);\n transform: rotate(45deg);\n}\n.ds-tooltip--start > .ds-tooltip__tip {\n left: 0;\n transform: none;\n}\n.ds-tooltip--start > .ds-tooltip__tip::after {\n left: var(--space-4);\n}\n.ds-tooltip--end > .ds-tooltip__tip {\n right: 0;\n left: auto;\n transform: none;\n}\n.ds-tooltip--end > .ds-tooltip__tip::after {\n right: var(--space-4);\n left: auto;\n}\n.ds-tooltip:hover > .ds-tooltip__tip,\n.ds-tooltip:focus > .ds-tooltip__tip,\n.ds-tooltip:focus-within > .ds-tooltip__tip,\n.ds-tooltip.is-open > .ds-tooltip__tip {\n display: block;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n\n/* switch: the sliding on and off control drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-2);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n opacity: 0;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-7) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n transition: var(--transition);\n}\n.ds-switch__track::before {\n content: \"OFF\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50%;\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 50%;\n background: var(--fill-button-secondary);\n border-right: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: calc(var(--radius-control) - var(--border-width)) 0 0 calc(var(--radius-control) - var(--border-width));\n box-shadow: var(--shadow-control);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background-color: var(--color-button);\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-switch__input:checked + .ds-switch__track::before {\n content: \"ON\";\n right: auto;\n left: 0;\n text-shadow: var(--shadow-text);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n right: 0;\n left: auto;\n border-right: 0;\n border-left: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: 0 calc(var(--radius-control) - var(--border-width)) calc(var(--radius-control) - var(--border-width)) 0;\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__input:disabled + .ds-switch__track {\n opacity: 0.6;\n}\n.ds-switch__label {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* progress: a sunken track with a filled bar; the bar's length is one of five steps */\n.ds-progress {\n height: var(--space-4);\n margin: 0 0 var(--space-3);\n background: var(--color-surface-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n overflow: hidden;\n}\n.ds-progress__bar {\n width: 50%;\n height: 100%;\n background-color: var(--color-button);\n background: var(--fill-button);\n}\n.ds-progress__bar--20 {\n width: 20%;\n}\n.ds-progress__bar--60 {\n width: 60%;\n}\n.ds-progress__bar--80 {\n width: 80%;\n}\n.ds-progress__bar--success {\n background: var(--fill-button);\n background-color: var(--color-success);\n}\n.ds-progress__bar--warning {\n background: var(--fill-button);\n background-color: var(--color-warning);\n}\n.ds-progress--small {\n height: var(--space-2);\n}\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n margin: 0 0 var(--space-1);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n\n/* avatar: a person's initial on a colour square */\n.ds-avatar {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n background: var(--color-fill-1);\n color: var(--color-accent-text);\n border-radius: var(--radius-control);\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: 1;\n text-shadow: none;\n vertical-align: middle;\n align-content: center;\n text-align: center;\n text-box: trim-both cap alphabetic;\n}\n.ds-avatar--2 {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 {\n background: var(--color-fill-4);\n}\n.ds-avatar--small {\n width: var(--size-mark);\n height: var(--size-mark);\n font-size: var(--text-small);\n}\n.ds-person {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-person__body {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* the signed-in person at the right of the bar, with their menu */\n.ds-nav__aside > .ds-menu {\n display: flex;\n align-self: stretch;\n}\n.ds-nav__user {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-bar-text);\n text-decoration: var(--link-decoration-quiet);\n text-shadow: var(--shadow-text);\n}\n.ds-title--gap {\n margin-top: var(--space-4);\n}\n.ds-grid__caption > .ds-progress {\n margin: 0 0 var(--space-2);\n}\n\n/* medium windows: the links of the bar fold into the menu button */\n@media (max-width: 980px) {\n .ds-nav {\n position: static;\n }\n .ds-nav__inner {\n position: relative;\n flex-wrap: wrap;\n gap: 0 var(--space-2);\n }\n .ds-nav__links {\n display: none;\n }\n .ds-brand {\n min-height: var(--size-nav);\n }\n .ds-nav__aside {\n min-height: var(--size-nav);\n margin-right: calc(var(--space-6) + var(--space-3));\n }\n .ds-menu--nav {\n display: block;\n flex: 0 0 100%;\n order: 9;\n }\n .ds-nav__aside {\n align-items: stretch;\n }\n .ds-app {\n display: block;\n }\n .ds-app__side {\n display: none;\n }\n .ds-app__main {\n padding: var(--space-3) var(--space-3) var(--space-5);\n }\n .ds-row {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n }\n .ds-col,\n .ds-col--wide,\n .ds-col--side {\n flex: 0 0 auto;\n }\n}\n\n/* medium windows: the stat panels and tiles fold to two columns */\n@media (max-width: 1000px) {\n .ds-stat,\n .ds-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* narrow windows: wide tables scroll, wide tables scroll in their own box */\n@media (max-width: 760px) {\n .ds-nav__text {\n display: none;\n }\n .ds-hero {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-2);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-stat,\n .ds-grid {\n gap: var(--space-3);\n }\n .ds-panels {\n grid-template-columns: 1fr;\n gap: var(--space-4);\n }\n .ds-tabs {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ds-table {\n min-width: 64ch;\n }\n .ds-toolbar__field {\n flex: 1 1 100%;\n }\n .ds-toolbar__text {\n margin-left: 0;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-4) var(--space-2);\n }\n .ds-dialog__actions {\n flex-wrap: wrap;\n }\n .ds-pagination {\n flex-wrap: wrap;\n }\n .ds-footer {\n padding: var(--space-3);\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: framework default dashboard specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n
\n MMarta L.\n \n
\n
\n
\n \n \n
\n
\n
\n\n
\n
\n \n
\n
\n\n
\n
\n
\n

Good morning, Marta

\n

Twelve bikes go out today and six come back. Two are still in the workshop.

\n
\n
\n New booking\n
\n
\n\n
    \n
  • \n

    Out today

    \n
    12pick-ups before noon: 9
    \n
    • \n
  • \n

    Taken this week

    \n
    $3,480up 8% on last weekHire and late charges. Deposits are not counted.
    \n
    • \n
  • \n

    Due back

    \n
    6one of them is late
    \n
    • \n
  • \n

    In for repair

    \n
    2ready on Thursday
    \n
    • \n
\n\n
\n
\n
\n

Pick-ups today

\n
\n \n Search\n 4 of 12 shown\n
\n
\n \n \n \n \n \n \n \n \n \n \n
TimeCustomerBikeStatusDaysActions
8:30Anouk VisserCity 7, bluePaid3ViewHand over
9:00Rui PachecoCargo 2Deposit due1ViewHand over
10:15Greta HolmElectric 4Paid7ViewHand over
11:45Tomas OkaforChild 12Card failed2ViewTake payment
\n
\n
See all 23 bookings
\n
\n
\n
\n

Rain after 15:00. Put the covers on the cargo bikes.

\n
\n

Just now

\n
\n \n
\n
\n
\n
\n\n

The fleet what is in the shop right now

\n
\n
\n
\n
\n

City bikes

\n

14 of 22 in the shop

\n
\n Book one\n
\n
\n
\n
\n
\n

Cargo bikes

\n

3 of 5 in the shop

\n
\n Book one\n
\n
\n
\n
\n
\n

Electric

\n

2 of 8 in the shop

\n
\n Book one\n
\n
\n
\n
\n
\n

Children

\n

9 of 12 in the shop

\n
\n Book one\n
\n
\n
\n
\n\n
\n
    \n
  1. Dashboard
    2. \n
  2. Bookings
    3. \n
\n
\n
\n

Bookings

\n

Every hire from the Harbour shop, newest first.

\n
\n
\n Export\n New booking\n
\n
\n\n \n\n
\n \n Search\n Showing 1 to 6 of 23\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n
Totals include the deposit. Times are shop time.
No.CustomerBikeOutBackStatusTotalActions
2041Anouk VisserCity 7, blue12 May15 MayPaid$84.00ViewEditCancel
2040Rui PachecoCargo 212 May13 MayDeposit due$45.00ViewEditCancel
2039Greta HolmElectric 412 May19 MayPaid$266.00ViewEditCancel
2038Tomas OkaforChild 1212 May14 MayCard failed$22.00ViewEditCancel
2037Ilse BrandtCity 3, green9 May12 MayOut now$84.00ViewEditCancel
2036Pavel NovakCity 11, red8 May11 MayLate$96.00ViewEditCancel
\n
\n
\n \n
\n Status:\n Booked\n Out now\n Paid\n Deposit due\n Late\n 23\n
\n
\n
\n\n
\n
    \n
  1. Dashboard
    2. \n
  2. Bookings
    3. \n
  3. 2041
    4. \n
\n
\n
\n

Booking 2041 Paid

\n

Anouk Visser, City 7 in blue, 12 to 15 May.

\n
\n
\n Back to the list\n
\n
\n\n
\n
\n
\n Hand over the bike\n Print the agreement\n Cancel the booking\n The deposit goes back when the bike does.\n
\n
\n
\n

Hire agreement

\n

Three days from Monday 12 May at 8:30. The bike is due back on Thursday 15 May before 18:00; a late return is charged by the day.

\n

What goes with the bike

\n
    \n
  • A lock with two keys
    • \n
  • Front and rear lights
    • \n
  • A helmet, size M
    • \n
\n

Note from the customer

\n

Asked for the saddle to be set high. The reference on the tag is B-2041.

\n
\n
\n
\n
\n
\n

Cancel this booking?

\n \n
\n
\n

City 7 goes back on the shelf for 12 to 15 May and $84.00 is refunded to the card.

\n
\n
\n Keep it\n Cancel the booking\n
\n
\n
\n
\n
\n
\n

Payment

\n
\n $84.00\n
\n
Hire, 3 days
$54.00
\n
Deposit
$30.00
\n
Paid by
Card, 10 May
\n
\n
\n
\n
\n

Customer

\n
\n
\n
Name
Anouk Visser
\n
Phone
555 0142
\n
Hires so far
4
\n
\n
\n
\n
\n

History

\n
\n
    \n
  • Booked on the website9 May, 21:14
    • \n
  • Paid in full by card10 May, 8:02
    • \n
  • Saddle note added11 May, 16:40, by Jonas
    • \n
\n
\n
\n
\n
\n
\n\n
\n
    \n
  1. Dashboard
    2. \n
  2. Customers
    3. \n
\n
\n
\n

Customers

\n

412 people have hired from the Harbour shop.

\n
\n
\n Add a customer\n
\n
\n\n
\n
\n
\n

Hired this month

\n
\n
    \n
  • \n A\n
    \n Anouk Visser\n

    City 7 in blue, out until Thursday.

    \n 4 hires, customer since March 2012, 555 0142\n
    \n
    • \n
  • \n G\n
    \n Greta Holm\n

    Electric 4 for a week, first booking.

    \n 1 hire, customer since May 2014, 555 0187\n
    \n
    • \n
  • \n P\n
    \n Pavel Novak\n

    City 11 in red, one day late.

    \n 9 hires, customer since June 2011, 555 0110\n
    \n
    • \n
  • \n R\n
    \n Rui Pacheco\n

    Cargo 2 for the day, deposit still to pay.

    \n 2 hires, customer since April 2014, 555 0163\n
    \n
    • \n
\n
\n
Showing 4 of 37 this month.
\n
\n

\n More lists:\n Everyone, A to Z\n Regulars\n Owing a deposit\n Out now\n Export as a file\n

\n
\n
\n
\n \n

Nobody is waiting

\n

When every bike of a kind is out, people who ask for one are listed here.

\n Add a name\n
\n
\n
\n
\n\n
\n
    \n
  1. Dashboard
    2. \n
  2. Settings
    3. \n
\n
\n
\n

Settings

\n

Shop details that are printed on every agreement.

\n
\n
\n Back to the dashboard\n
\n
\n\n \n\n
\n
\n
\n

Note. Agreements already printed keep the details they were printed with.

\n

Not saved. Check the field marked below and save again.

\n
\n
\n

Shop details

\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n
\n
\n \n Cancel\n
\n
\n
\n

Messages to customers

\n
\n
\n The evening before a bike is due back\n

A text with the closing time and the address of the shop. Sent at 18:00.

\n
\n
\n When a bike is late\n

A text at opening time on the next day, with the daily charge.

\n
\n
\n After the return\n

An email with the receipt and the deposit that went back to the card.

\n
\n
\n
\n
\n
\n

Online booking

\n
\n \n
\n
\n
\n

Opening hours

\n
\n
\n
Monday to Friday
8:00 to 18:30
\n
Saturday
9:00 to 17:00
\n
Sunday
Closed
\n
\n
\n
\n
\n

Last changes

\n
\n
    \n
  • Closing time2 May, by Marta
    • \n
  • Late return charge18 April, by Marta
    • \n
  • Shop phone6 January, by Jonas
    • \n
\n
\n
\n
\n

A second shop?

\n

Each shop has its own fleet, hours and staff, under one sign-in.

\n Add a shop\n
\n
\n
\n
\n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.bootstrap-era.app.s03.p02.t03.u02\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"bootstrap-era\",\n \"years\": [\n 2011,\n 2014\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1280,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-bs-3232\",\n \"short\": \"v1-bs-3232\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #f9f9f9;\n --color-surface-strong: #eeeeee;\n --color-bar: #f8f8f8;\n --color-bar-text: #777777;\n --color-bar-alt: #f5f5f5;\n --color-bar-alt-text: #777777;\n --color-inverse: #2a2730;\n --color-inverse-text: #ffffff;\n --color-text: #333333;\n --color-text-muted: #777777;\n --color-heading: #333333;\n --color-heading-alt: #563d7c;\n --color-link: #563d7c;\n --color-link-quiet: #777777;\n --color-link-visited: #563d7c;\n --color-link-hover: #866ab3;\n --color-link-active: #3b2a55;\n --color-border: #dddddd;\n --color-border-strong: #cdbfe3;\n --color-border-muted: #eeeeee;\n --color-accent: #6f5499;\n --color-accent-text: #ffffff;\n --color-accent-alt: #5bc0de;\n --color-fill-1: #5fb0e4;\n --color-fill-2: #6f5499;\n --color-fill-3: #5cb85c;\n --color-fill-4: #f0ad4e;\n --color-button: #6f5499;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #563d7c;\n --color-input: #ffffff;\n --color-input-text: #555555;\n --color-input-border: #cccccc;\n --color-disabled: #eeeeee;\n --color-disabled-text: #999999;\n --color-danger: #d9534f;\n --color-danger-surface: #f2dede;\n --color-success: #5cb85c;\n --color-warning: #f0ad4e;\n --color-notice: #d9edf7;\n --color-notice-text: #31708f;\n --color-focus: #66afe9;\n --color-shadow: rgb(0 0 0 / 0.1);\n --color-overlay: rgb(0 0 0 / 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-heading: \"Roboto Slab\", Rockwell, Georgia, \"Times New Roman\", serif;\n --font-ui: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n --font-mono: Consolas, Menlo, Monaco, \"Courier New\", monospace;\n --text-base: 14px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 48px;\n --text-h1: 32px;\n --text-h2: 26px;\n --text-h3: 20px;\n --line-body: 1.5;\n --line-heading: 1.25;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: none;\n --link-decoration-hover: underline;\n --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n --border-width: 1px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 4px;\n --radius-panel: 4px;\n --radius-pill: 10px;\n --radius-page: 6px;\n --shadow-panel: 0 1px 1px var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 0 3px 5px var(--color-shadow);\n --shadow-dialog: 0 5px 15px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: linear-gradient(color-mix(in srgb, black 12%, transparent), color-mix(in srgb, black 12%, transparent)), var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 3px solid color-mix(in srgb, var(--color-focus) 45%, transparent);\n --transition: border-color 0.15s ease-in-out;\n --backdrop-blur: 0px;\n}\n" } }