{ "id": "v1-my-5656", "long_id": "v1.material-you.app.s05.p06.t05.u06", "name": "Tonal calendar app, 2025", "era": { "slug": "material-you", "code": "my", "name": "Material You", "years": [ 2021, 2026 ], "description": "The tonal design of 2021 to 2026: every surface a tint of one key colour, large 16 to 28px corners, pill buttons and navigation indicators, filled tonal controls instead of shadows, big friendly type and plenty of space." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "A calendar in the tonal language of 2021 to 2026, in its dark scheme: a wide navigation rail with labelled destinations and a small month, and the content as rounded tiles laid straight on the page tone, one tile a day. Every colour is a tone of one crimson key colour, with a peach tertiary for the third calendar and for notices; corners are 20 to 28px, buttons, day numbers and indicators are full pills, and nothing casts a shadow but dialogs, the date tile and the floating action button. Headings are set in a bold condensed face (Roboto Condensed) up to 72px over a neutral grotesque for text.", "url": "https://chrono.skin/s/v1-my-5656", "preview_url": "https://chrono.skin/s/v1-my-5656/specimen.html", "files": { "STYLE.md": "# Tonal calendar app, 2025\n\n## Summary\n\nA calendar in the tonal language of 2021 to 2026, in its dark scheme: a wide navigation rail with labelled destinations and a small month, and the content as rounded tiles laid straight on the page tone, one tile a day. Every colour is a tone of one crimson key colour, with a peach tertiary for the third calendar and for notices; corners are 20 to 28px, buttons, day numbers and indicators are full pills, and nothing casts a shadow but dialogs, the date tile and the floating action button. Headings are set in a bold condensed face (Roboto Condensed) up to 72px over a neutral grotesque for text.\n\n## Layout\n\n- Designed at 1440px; `--size-page` is 1440px and the page does not stretch beyond it. Two columns `--space-3` apart with `--space-3` to the window edge: the rail `.ds-nav` (`--size-rail` 272px), a rounded block on `--fill-bar` as tall as the page, and the views. `.ds-footer` is a tonal strip under the views.\n- The rail holds, from the top: `.ds-brand`, the extended floating action button (icon and label), `.ds-nav__links` (each destination a `--size-fab` 56px pill with icon, label and an optional `.ds-nav__count`), and `.ds-mini`, a small month with today on a filled disc.\n- A view is `.ds-main`, a column of blocks `--space-3` apart. On the home view the blocks lie on `--fill-page` without a sheet: `.ds-top` (the `.ds-hero` at 8 parts, a `.ds-panel` with the next events at 4), `.ds-stats`, `.ds-toolbar` (month title, step buttons, view chips, search pill), `.ds-month`, a `.ds-section` with the `.ds-grid` of four calendar tiles, and a `.ds-snackbar`.\n- `.ds-month` has seven equal columns `--space-1` apart: a row of `.ds-month__head` weekday labels, then one `.ds-month__day` tile per day, at least `--size-day` 112px tall, with the number in a `--size-daynum` 28px pill and up to three `.ds-event` chips `--size-event` 22px tall.\n- Spacing: `--space-1` 4px (between day tiles, event chips and rail items), `--space-2` 8px (day tile padding, between buttons and chips), `--space-3` 12px (between blocks, tiles and columns of the shell), `--space-4` 16px (row padding, field gap, rail padding), `--space-5` 24px (card padding, above the month toolbar and the calendars), `--space-6` 32px (sheet padding), `--space-7` 40px (hero top and bottom), `--space-8` 48px (hero sides).\n- Heights: buttons `--size-control` 40px; fields `--size-field` 56px; the floating action button and rail items `--size-fab` 56px; chips `--size-chip` 32px; list rows `--size-row` 64px; table rows, tabs and the search pill `--size-row-dense` 48px; calendar tiles at least `--size-tile` 128px. `--size-measure` 660px caps running text, `--size-dialog` is 380px, the date tile is `--size-art` 176px square.\n- Inner pages have no hero. The rail stays; the working part sits on one `.ds-sheet` (`--color-canvas`, `--radius-page`, `--space-6` of padding) that opens with `.ds-breadcrumb` (where the view is below another), then `.ds-page-header`, then `.ds-tabs`, badges, the table and pagination; or `.ds-columns` with text at 3 parts and a `.ds-stack` at 2; or `.ds-layout`, the form at 3 parts and a stack at 1 (`.ds-layout--nav` turns it round: `.ds-sidebar` at 1, content at 3). Further blocks follow the sheet on the page tone.\n- Views: `month` (home) is today, the month and the calendars. `event` is one event: its text, an invitation shown as the dialog and the attachments. `agenda` is the table of coming events under tabs, then an empty task list and a free-time card. `new` is the event form with its notices. `settings` has the section list and the switches.\n- Below 1100px the paired blocks become one column and the grid two. Below 800px the rail dissolves: brand and the floating action button (icon only) form a top row, `.ds-nav__links` becomes a navigation bar fixed to the bottom edge with the icon in a `--size-indicator` by `--size-chip` pill above a small label, and the small month is dropped. Below 640px day tiles shrink, their numbers centre and event chips become thin coloured bars; stats and form rows stack and `.ds-table__extra` cells are hidden.\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- `--font-heading` is the condensed face (Roboto Condensed, then Barlow Condensed, Archivo Narrow, Avenir Next Condensed, Arial Narrow); `--font-body` and `--font-ui` are Roboto Flex; `--font-mono` (Red Hat Mono) is for code only.\n- Sizes: `--text-base` 16px at `--line-body` 1.5; `--text-small` 12px (event chips, day labels, meta, badges); `--text-ui` 14px (buttons, chips, tabs, navigation, day numbers, table cells); `--text-large` 21px (hero lead, prose lead); `--text-display` 72px at `--line-display` 1 with `--display-tracking` -0.5px (hero title and the day on the date tile); `--text-h1` 44px, `--text-h2` 32px, `--text-h3` 24px at `--line-heading` 1.1.\n- Weights: headings and labels 600, display 700, body 400. `--ui-transform` is `none`: labels are sentence case, the condensed headings too.\n- Links are not underlined at rest (`--link-decoration` `none`), underlined on hover.\n- The era's rule for text on fills, which every layout and every token set of this era keeps: on `--fill-page`, `--color-canvas`, `--color-surface`, `--color-surface-alt`, `--color-surface-strong` and on all four `--color-fill-*` blocks, text is `--color-text`, titles `--color-heading` and captions `--color-text-muted`; the fills are container tones, so the ordinary text colours stay readable on them in a light and in a dark scheme. On `--fill-bar` text is `--color-bar-text`; on `--fill-bar-alt` it is `--color-bar-alt-text`; on `--fill-inverse` it is `--color-inverse-text`; on `--fill-accent` it is `--color-accent-text`; on `--fill-button` it is `--color-button-text`; on `--fill-button-secondary` it is `--color-button-secondary-text`; on `--color-notice` it is `--color-notice-text`; on `--color-danger-surface` the body is `--color-text` and the title and icon are `--color-danger`. A solid block of `--color-danger`, `--color-success`, `--color-warning` or `--color-accent-alt` carries `--color-canvas` as its text colour, because the status colours are dark in a light scheme and pale in a dark one, always opposite to the canvas.\n- Tonal roles: `--color-page` is the surface container behind everything; the bar, rail or drawer and the table head are on `--fill-bar`, which the surface part sets to a neighbouring container tone, so each surface set shows there; `--color-canvas` is the plain surface of the rounded content sheet; `--color-surface` (container low) fills cards and list cards, `--color-surface-alt` (container high) stat tiles and dialogs, `--color-surface-strong` (container highest) tonal cards, inline code and hovered rows. `--color-accent` is the primary container: hero card, floating action button, default badge, the disc of an empty state. `--color-button-secondary` is the secondary container: tonal buttons and every pill indicator behind a current navigation item, chip or tab. `--color-accent-alt` is the tertiary colour, used solid for \"new\" markers. `--color-fill-1` to `--color-fill-4` are the primary, secondary and tertiary containers and the highest surface container.\n- `--color-link` is the primary colour: links, outlined and text button labels, the current tab, list markers. Visited links take the tertiary `--color-link-visited`. `--color-border` (outline variant) draws card outlines, chips and dividers, `--color-border-strong` (outline) the outlined button and the off switch, `--color-border-muted` the dividers inside lists and tables. `--color-input-border` outlines fields; `--color-focus` is the focus line.\n- Status badges are tonal: `--color-success`, `--color-warning` or `--color-danger` mixed at 22% into `--color-canvas`, with `--color-text` and a dot in the full status colour.\n- Shape: every button, badge, search bar, navigation indicator and pagination link uses `--radius-pill`; fields and chips use `--radius-control`; cards, notices, tables and the floating action button use `--radius-panel`; the content sheet, hero, grid tiles, dialogs and empty states use `--radius-page`.\n- One-off values built with `color-mix()` because the vocabulary has no token: an 8% or 10% wash of the label colour for hovered tonal, outlined, text and icon buttons, chips and navigation items; the 22% status tints; the danger colour mixed with 12% of `--color-text` for a hovered danger button.\n- A calendar takes one of the four `--color-fill-*` tones and its events inherit it: `.ds-event` is `--color-fill-1`, `--2`, `--3`, `--4` the others, always with `--color-text`. `.ds-event--solid` (an event that spans days, or free time) is `--fill-button` with `--color-button-text`.\n- Elevation is shown by tone, not shadow. `--shadow-panel` and `--shadow-control` sit on cards and buttons (`none`); `--shadow-control-hover` is on hovered buttons and on the search pill, `--shadow-control-pressed` on a pressed button and the selected chip, `--shadow-dialog` on dialogs, the date tile and the floating action button. `--shadow-text` is on the hero title and button labels (`none`). `--backdrop-blur` blurs what lies behind the dialog scrim (`0px`).\n- Outlines are `--border-width` 2px here; a selected day is ringed with `--border-width-strong` in `--color-link`.\n\n## Components\n\n- `.ds-page` on ``: the two-column shell on `--fill-page`.\n- `.ds-nav`: the wide rail on `--fill-bar`. `.ds-nav__inner` is the sticky column; `.ds-nav__links` holds `.ds-nav__link` items with the icon in a `.ds-nav__pill` and a `.ds-nav__count`. The current item (`is-current`, or the rule for the open view) is filled with `--fill-button-secondary`; on a phone only its pill is.\n- `.ds-mini`: the small month. `.ds-mini__head` is its title row, `.ds-mini__grid` seven columns of `.ds-mini__day` (`--label` for weekday letters, `is-out` for other months, `is-today` filled like the primary button, `is-busy` ringed).\n- `.ds-main`: the column of blocks of a view. `.ds-sheet`: the canvas sheet of an inner view. `.ds-top`: hero and a card side by side.\n- `.ds-hero`: the today card in `--fill-accent`. `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and a `.ds-buttons` group; an outlined button inside it takes the accent text colour. `.ds-date` is the date tile on the canvas tone with `.ds-date__day`, the large number.\n- `.ds-toolbar`: the row above the month, with `.ds-toolbar__steps` for the previous and next buttons.\n- `.ds-month`: the month grid of `.ds-month__head` labels and `.ds-month__day` tiles, each a link with `.ds-month__num` and its events. `is-today` fills the number like the primary button, `is-out` is a day of another month without a tile, `is-current` a selected day.\n- `.ds-event`: a tonal event chip (`--2`, `--3`, `--4`, `--solid`); it also labels a calendar in a table or dialog. Group loose ones with `.ds-events`.\n- `.ds-grid`: four calendar tiles. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) has a `.ds-grid__head` (icon and an optional count), `.ds-grid__title` and `.ds-grid__text`; hovering tightens the corners.\n- `.ds-tabs`: a hairline-ruled row of `.ds-tabs__tab`; `is-current` is link-coloured with a short rounded `--border-width-strong` indicator under the label.\n- `.ds-sidebar`: the section list of the settings view, a filled card with `.ds-sidebar__title` and a `.ds-sidebar__list` of pill-shaped `.ds-sidebar__link` rows; `is-current` is on the secondary container. `.ds-layout--nav` places it beside the content.\n- `.ds-meta`: the facts of an event (time, place, guests) as `.ds-meta__item` rows with a leading icon.\n- `.ds-footer`: a rounded strip on `--fill-bar-alt` with `.ds-footer__legal` and `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-brand`: the site's mark and name, one link. `.ds-brand__mark` is a round tile dressed like the filled button (`--fill-button`, `--color-button-text`, `--radius-pill`, `--shadow-control`, a transparent `--border-width` border) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-page-header`: the head of an inner view, unboxed on the sheet. `.ds-page-header__body` holds `.ds-page-header__title` (`--text-h1`) and `.ds-page-header__text` (one muted line); `.ds-page-header__actions` sits at the right with one filled button at most.\n- `.ds-prose`: long-form text; styles h1 to h3, paragraphs, lists, `strong`, inline `code` and links. `.ds-prose__lead` is the larger opening paragraph.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured, `--more` carries a chevron. `.ds-links` lays several out in a row.\n- `.ds-button`: the filled pill button. `--secondary` is the tonal button, `--outlined` has a `--color-border-strong` outline and a link-coloured label, `--text` has no container, `--danger` is filled with `--color-danger` (with `--text` it is a danger-coloured text button for dialogs), `--large` is the tall form for a hero or an order form, `--icon` is a round icon button, `--fab` is the floating action button, a rounded square in `--fill-accent`, and `--on-inverse` is the button on an inverted block. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`. Never more than one filled button in a group.\n- `.ds-icon`: stroked inline SVG in the current text colour; `--small` inside buttons, chips and tabs.\n- `.ds-chip`: an outlined 32px chip; `is-current` fills it with the secondary container. Group with `.ds-chips`.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (56px, outlined, `--fill-input`; `--area` for a textarea; wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields side by side. `is-focus` shows the focus ring, `is-invalid` on the field plus `.ds-form__error` shows an error, `.ds-form__hint` is help text. `.ds-form__check` with `.ds-form__checkbox` is a checkbox row; `.ds-form__check--between` with `.ds-form__check-text` and a `.ds-switch` is a setting row. `.ds-form__actions` holds the buttons.\n- `.ds-switch`: a checkbox drawn as a pill track; the thumb is small and outline-coloured when off, larger and in `--color-button-text` on a `--fill-button` track when on.\n- `.ds-table`: inside `.ds-table-wrap`, an outlined rounded container. The head row is on `--fill-bar`; rows are divided by `--color-border-muted`; `.ds-table__num` right-aligns numbers, `.ds-table__name` sets a code name, `.ds-table__extra` marks cells a phone can do without; `tr.is-current` is tinted.\n- `.ds-list`: rows of `.ds-list__item`, each with an optional `.ds-list__icon` disc (`--1`, `--3`, `--4` pick the fill), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, and `.ds-list__meta` or a button on the right. `--cards` turns every row into its own filled card, `--space-2` apart, and `is-current` puts the selected one on the secondary container.\n- `.ds-panel`: a filled card with `.ds-panel__title`, `.ds-panel__body` and optional `.ds-panel__head` and `.ds-panel__actions`. `--outlined` is the outlined card on the canvas, `--tonal` the stronger tint, `--accent` the primary container. A card is filled or outlined, never both.\n- `.ds-stat`: one summary figure, a tile with `.ds-stat__value` and `.ds-stat__label`. Three or more sit in a `.ds-stats` row.\n- `.ds-badge`: a small pill in `--fill-accent`; `--new` is the solid tertiary colour, `--count` a solid danger count, and `--success`, `--warning`, `--danger` are the tonal status labels with a dot. Group with `.ds-badges`.\n- `.ds-notice`: a tonal card with a leading icon, `.ds-notice__body` and `.ds-notice__title`; `--error` is on `--color-danger-surface` with a danger-coloured title. Group with `.ds-notices`.\n- `.ds-pagination`: a row of round `.ds-pagination__link`; `is-current` is filled like the primary button, `is-disabled` is grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: a muted trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`.\n- `.ds-dialog`: a `--color-surface-alt` sheet with `--radius-page` corners, an optional `.ds-dialog__icon`, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned text buttons in `.ds-dialog__actions`. It sits on `.ds-overlay`, the scrim.\n- `.ds-empty`: a centred block with `.ds-empty__mark` (a rounded square in `--fill-accent` holding an icon), `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-search`: the search bar, one pill on `--fill-input` with an icon and `.ds-search__text`. `.ds-avatar`: a disc with initials. `.ds-snackbar`: a short message on `--fill-inverse` with `.ds-snackbar__action`.\n- `.ds-section` with `.ds-section__head`, `.ds-section__title` and `.ds-section__label` titles a block; `.ds-columns` (`--even`) puts two blocks side by side and `.ds-stack` piles cards in one of them. `.ds-shapes` with `.ds-shape--1` to `--4` is spare artwork: a circle, a rounded square and a pill.\n- `.ds-menu`: a `
` drop-down. `.ds-menu__button` is its tonal pill (`--dense` at chip height; `.ds-menu__label` is the text); `.ds-menu__list` is a `--color-surface-alt` sheet of `.ds-menu__item` rows, the chosen one `is-current`. `.ds-menu--end` hangs the sheet from the right edge, `--end-wide` only above a phone. Use it for a choice of one among a few: sort order, version, speed.\n- `.ds-tooltip`: wraps an icon button; `.ds-tooltip__text` is a small label on `--fill-inverse` shown under it on hover or focus (`--start` hangs it from the left on a phone). Use it to name a button that has no text.\n- `.ds-accordion`: a group of `
`; each `.ds-accordion__item` is a tonal row with `.ds-accordion__summary` (a title, a `.ds-accordion__hint` line, a chevron) and `.ds-accordion__body`. Use it for questions and for details that most readers skip.\n- `.ds-progress`: a thick track in two parts with a gap, `.ds-progress__bar` in `--fill-button` and `.ds-progress__rest` with a stop dot at its end; `--25`, `--40`, `--60`, `--75` set the share. `.ds-progress__label` is the line above it and `.ds-progress-group` stacks several. Use it for a known share of a whole, never for waiting.\n- `.ds-avatars`: a row of overlapping `.ds-avatar` discs for the people on one thing.\n\n## Never\n\n- `row-gap <= 12px`: list rows and table rows touch.\n- `block-gap <= 40px`: blocks are 4 to 40px apart.\n- `uppercase-text = 0%`: labels and the condensed headings are sentence case.\n- `font-weight <= 700`: bold is kept for the display size.\n- `font-weight >= 400`: no thin text.\n- `font-size >= 12px`: the smallest labels are 12px.\n- `font-size <= 72px`: the hero title is the largest text.\n- `font-families <= 3`: a condensed heading face, a text face and the mono for code.\n- `line-height <= 1.6`: body text is 16px on a 24px line.\n- `underlined-links <= 10%`: links are marked by colour; only the snackbar action is underlined.\n- `gradient-fills = 0%`: every fill is one flat tone.\n- `text-shadow = none`: no text has a shadow.\n- `border-width <= 2px`: outlines are 1px; the tab indicator, checkbox and switch track are 2px.\n- `box-shadow-blur <= 6px`: shadows are hairlines; the largest is under the phone and dialogs.\n- `border-radius <= 24px`: containers are 12 or 16px, the phone body 24px; anything rounder is a full pill.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. Anything that holds content is a `.ds-panel`: filled with a container tone, or outlined on the canvas, with `--radius-panel`. Anything pressed is a `.ds-button` variant and stays a full pill. A selected state is the secondary container (`--fill-button-secondary` with `--color-button-secondary-text`) on a pill or on the item itself. Raise something by moving it to the next surface tone, not by adding a shadow. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and follow the rule for text on fills in \"Typography and colour roles\". Never add a gradient, an uppercase label, a square corner on a container or a second filled button beside the first.\n", "components.css": ":root {\n --size-menu: 248px;\n --size-track: 16px;\n --size-page: 1440px;\n --size-rail: 272px;\n --size-measure: 660px;\n --size-icon: 24px;\n --size-icon-small: 18px;\n --size-mark: 40px;\n --size-control: 40px;\n --size-field: 56px;\n --size-fab: 56px;\n --size-chip: 32px;\n --size-badge: 22px;\n --size-check: 18px;\n --size-switch: 52px;\n --size-thumb: 16px;\n --size-thumb-on: 24px;\n --size-row: 64px;\n --size-row-dense: 48px;\n --size-indicator: 56px;\n --size-area: 104px;\n --size-dialog: 380px;\n --size-empty: 88px;\n --size-art: 176px;\n --size-day: 112px;\n --size-daynum: 28px;\n --size-event: 22px;\n --size-search: 280px;\n --size-tile: 128px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 40px;\n --space-8: 48px;\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.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* icons: stroked inline SVG in the current text colour */\n.ds-icon {\n display: inline-block;\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\n}\n.ds-icon--small {\n width: var(--size-icon-small);\n height: var(--size-icon-small);\n}\n\n/* brand: a round tile dressed like the filled button, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-mark);\n height: var(--size-mark);\n padding: var(--space-2);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n line-height: var(--line-heading);\n}\n\n/* section titles on the canvas */\n.ds-section {\n margin-top: var(--space-7);\n}\n.ds-section__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-4);\n margin-bottom: var(--space-4);\n}\n.ds-section__title {\n margin: 0;\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 color: var(--color-heading);\n}\n.ds-section__label {\n margin: 0 0 var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-columns {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-columns--even {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ds-stack {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n}\n\n/* page header of an inner view */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n margin: var(--space-3) 0 var(--space-5);\n}\n.ds-page-header__body {\n min-width: 0;\n}\n.ds-page-header__title {\n margin: 0;\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 color: var(--color-heading);\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-wrap: wrap;\n max-width: 100%;\n gap: var(--space-2);\n}\n\n/* prose */\n.ds-prose {\n max-width: var(--size-measure);\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-3);\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 color: var(--color-heading);\n}\n.ds-prose h1 { font-size: var(--text-h1); }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose > :first-child { margin-top: 0; }\n.ds-prose > :last-child { margin-bottom: 0; }\n.ds-prose p,\n.ds-prose ul {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul {\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-link);\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-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\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-heading);\n color: var(--color-text-muted);\n}\n\n/* links */\n.ds-links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration);\n border-radius: var(--radius-control);\n transition: var(--transition);\n}\n.ds-link:visited, .ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover, .ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active, .ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible, .ds-link.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n.ds-link--more {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n\n/* buttons: every button is a full pill */\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\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: 1.2;\n text-transform: var(--ui-transform);\n text-decoration: none;\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover, .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, .ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible, .ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:hover, .ds-button--secondary.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n color: var(--color-button-secondary-text);\n}\n.ds-button--outlined {\n background: transparent;\n color: var(--color-link);\n border-color: var(--color-border-strong);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--text {\n padding: 0 var(--space-3);\n background: transparent;\n color: var(--color-link);\n box-shadow: none;\n text-shadow: none;\n}\n.ds-button--outlined:hover, .ds-button--outlined.is-hover,\n.ds-button--text:hover, .ds-button--text.is-hover {\n background: color-mix(in srgb, var(--color-link) 10%, transparent);\n color: var(--color-link);\n box-shadow: none;\n}\n.ds-button--danger {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-button--danger:hover, .ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 88%, var(--color-text));\n color: var(--color-canvas);\n}\n.ds-button--text.ds-button--danger {\n background: transparent;\n color: var(--color-danger);\n}\n.ds-button--text.ds-button--danger:hover, .ds-button--text.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 10%, transparent);\n color: var(--color-danger);\n}\n.ds-button--on-inverse:hover, .ds-button--on-inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 88%, var(--color-inverse));\n color: var(--color-inverse);\n}\n.ds-button--icon {\n width: var(--size-control);\n padding: 0;\n background: transparent;\n color: inherit;\n box-shadow: none;\n}\n.ds-button--icon:hover, .ds-button--icon.is-hover {\n background: color-mix(in srgb, currentColor 10%, transparent);\n color: inherit;\n box-shadow: none;\n}\n.ds-button--fab {\n min-width: var(--size-fab);\n min-height: var(--size-fab);\n padding: 0 var(--space-4);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button--fab:hover, .ds-button--fab.is-hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, var(--color-accent));\n color: var(--color-accent-text);\n box-shadow: var(--shadow-dialog);\n}\n.ds-button:disabled, .ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: transparent;\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n pointer-events: none;\n}\n\n/* chips and badges */\n.ds-chips,\n.ds-badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-chip);\n padding: 0 var(--space-4);\n background: transparent;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-chip:hover, .ds-chip.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-chip.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: transparent;\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n min-height: var(--size-badge);\n padding: 0 var(--space-2);\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-ui);\n line-height: 1.2;\n white-space: nowrap;\n}\n.ds-badge--new {\n background: var(--color-accent-alt);\n color: var(--color-canvas);\n}\n.ds-badge--count {\n background: var(--color-danger);\n color: var(--color-canvas);\n}\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n}\n.ds-badge--success { background: color-mix(in srgb, var(--color-success) 22%, var(--color-canvas)); }\n.ds-badge--warning { background: color-mix(in srgb, var(--color-warning) 22%, var(--color-canvas)); }\n.ds-badge--danger { background: color-mix(in srgb, var(--color-danger) 22%, var(--color-canvas)); }\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: currentColor;\n}\n.ds-badge--success::before { background: var(--color-success); }\n.ds-badge--warning::before { background: var(--color-warning); }\n.ds-badge--danger::before { background: var(--color-danger); }\n\n/* avatar: a tonal disc with initials */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-3);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n}\n\n/* search: one pill */\n.ds-search {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n flex: 1;\n min-width: 0;\n min-height: var(--size-field);\n padding: 0 var(--space-5);\n background: var(--fill-input);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n box-shadow: var(--shadow-control-hover);\n font-family: var(--font-body);\n font-size: var(--text-base);\n text-decoration: none;\n}\n.ds-search__text {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* form: fields with a label above */\n.ds-form {\n display: grid;\n gap: var(--space-5);\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-4);\n align-items: start;\n}\n.ds-form__field {\n display: grid;\n align-content: start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__label {\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-form__control {\n display: block;\n width: 100%;\n min-height: var(--size-field);\n margin: 0;\n padding: 0 var(--space-4);\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);\n font-family: var(--font-body);\n font-size: var(--text-base);\n line-height: var(--line-body);\n appearance: none;\n transition: var(--transition);\n}\n.ds-form__control--area {\n min-height: var(--size-area);\n padding: var(--space-3) var(--space-4);\n resize: vertical;\n}\n.ds-form__control:focus, .ds-form__control.is-focus {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width) * -1);\n border-color: var(--color-focus);\n}\n.ds-form__select {\n position: relative;\n display: block;\n}\n.ds-form__select::after {\n content: \"\";\n position: absolute;\n top: 50%;\n right: var(--space-5);\n width: var(--space-2);\n height: var(--space-2);\n border-right: var(--border-width-strong) solid var(--color-input-text);\n border-bottom: var(--border-width-strong) solid var(--color-input-text);\n transform: translateY(-75%) rotate(45deg);\n pointer-events: none;\n}\n.ds-form__hint {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__error {\n font-size: var(--text-small);\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__label {\n color: var(--color-danger);\n}\n.ds-form__field.is-invalid .ds-form__control {\n border-color: var(--color-danger);\n outline: var(--border-width) solid var(--color-danger);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-control);\n color: var(--color-text);\n}\n.ds-form__check--between {\n justify-content: space-between;\n min-height: var(--size-row);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__check-text {\n display: grid;\n}\n.ds-form__check-text small {\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-form__checkbox {\n position: relative;\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n background: transparent;\n border: var(--border-width-strong) solid var(--color-input-border);\n border-radius: calc(var(--size-check) / 6);\n cursor: pointer;\n}\n.ds-form__checkbox:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-form__checkbox:checked::after {\n content: \"\";\n position: absolute;\n left: 30%;\n top: 5%;\n width: 35%;\n height: 65%;\n border-right: var(--border-width-strong) solid var(--color-button-text);\n border-bottom: var(--border-width-strong) solid var(--color-button-text);\n transform: rotate(45deg);\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* switch: the thumb grows when it is on */\n.ds-switch {\n position: relative;\n flex: none;\n width: var(--size-switch);\n height: var(--size-chip);\n margin: 0;\n appearance: none;\n background: var(--color-surface-strong);\n border: var(--border-width-strong) solid var(--color-border-strong);\n border-radius: var(--radius-pill);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 25%;\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--color-border-strong);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n transition: var(--transition);\n}\n.ds-switch:checked {\n background: var(--fill-button);\n border-color: var(--color-button);\n}\n.ds-switch:checked::before {\n left: 69%;\n width: var(--size-thumb-on);\n height: var(--size-thumb-on);\n background: var(--color-button-text);\n}\n.ds-switch:checked::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 69%;\n width: calc(var(--size-thumb) * 0.3);\n height: calc(var(--size-thumb) * 0.6);\n border-right: calc(var(--size-thumb) / 8) solid var(--color-button);\n border-bottom: calc(var(--size-thumb) / 8) solid var(--color-button);\n transform: translate(-50%, -60%) rotate(45deg);\n}\n.ds-switch:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n\n/* table: an outlined container, the head in the bar tone */\n.ds-table-wrap {\n overflow-x: auto;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n background: var(--color-canvas);\n font-size: var(--text-ui);\n color: var(--color-text);\n}\n.ds-table th,\n.ds-table td {\n height: var(--size-row-dense);\n padding: var(--space-2) var(--space-4);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-weight: var(--weight-ui);\n white-space: nowrap;\n}\n.ds-table td {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table__name {\n font-family: var(--font-mono);\n}\n.ds-table tr.is-current td {\n background: var(--color-surface);\n}\n.ds-table a {\n color: var(--color-link-quiet);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-table a:hover {\n color: var(--color-link-hover);\n}\n\n/* list: rows with a leading tonal disc */\n.ds-list {\n display: grid;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n color: var(--color-text);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-control);\n height: var(--size-control);\n background: var(--color-fill-2);\n color: var(--color-text);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-list__icon--1 { background: var(--color-fill-1); }\n.ds-list__icon--3 { background: var(--color-fill-3); }\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__title {\n display: block;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__title:hover {\n color: var(--color-link-hover);\n}\n.ds-list__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-list__meta {\n flex: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n text-align: right;\n}\n.ds-list--cards .ds-list__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n box-shadow: none;\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__title,\n.ds-list--cards .ds-list__item.is-current .ds-list__text,\n.ds-list--cards .ds-list__item.is-current .ds-list__meta {\n color: var(--color-button-secondary-text);\n}\n.ds-list--cards .ds-list__item.is-current .ds-list__icon {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n\n/* panel: a filled card; outlined and tonal variants */\n.ds-panel {\n display: flex;\n flex-direction: column;\n gap: var(--space-3);\n padding: var(--space-5);\n background: var(--fill-panel);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel--outlined {\n background: var(--color-canvas);\n border-color: var(--color-border);\n box-shadow: none;\n}\n.ds-panel--tonal {\n background: var(--color-surface-strong);\n box-shadow: none;\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-panel__title {\n margin: 0;\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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n color: var(--color-heading);\n}\n.ds-panel__body {\n margin: 0;\n color: var(--color-text-muted);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body p:last-child {\n margin-bottom: 0;\n}\n.ds-panel__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin-top: auto;\n padding-top: var(--space-2);\n}\n\n/* stats: tonal tiles, one figure each */\n.ds-stats {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-stat {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-4) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n font-variant-numeric: tabular-nums;\n color: var(--color-heading);\n}\n.ds-stat__label {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n\n/* tabs: primary tabs with a short rounded indicator */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n overflow-x: auto;\n}\n.ds-tabs__tab {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover, .ds-tabs__tab.is-hover {\n color: var(--color-text);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-link);\n}\n.ds-tabs__tab.is-current::after {\n content: \"\";\n position: absolute;\n left: var(--space-4);\n right: var(--space-4);\n bottom: 0;\n height: var(--border-width-strong);\n background: var(--color-link);\n border-radius: var(--border-width-strong) var(--border-width-strong) 0 0;\n}\n\n/* notices: tonal cards with a leading icon */\n.ds-notices {\n display: grid;\n gap: var(--space-3);\n}\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border-radius: var(--radius-panel);\n}\n.ds-notice__body {\n margin: 0;\n min-width: 0;\n}\n.ds-notice__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-text);\n}\n.ds-notice--error .ds-notice__title,\n.ds-notice--error .ds-icon {\n color: var(--color-danger);\n}\n\n/* pagination: round links, the current one filled */\n.ds-pagination {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n margin: var(--space-5) 0 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n height: var(--size-control);\n padding: 0 var(--space-3);\n color: var(--color-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover, .ds-pagination__link.is-hover {\n background: var(--color-surface-strong);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n pointer-events: none;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"\";\n width: var(--space-2);\n height: var(--space-2);\n border-top: var(--border-width) solid currentColor;\n border-right: var(--border-width) solid currentColor;\n transform: rotate(45deg);\n}\n.ds-breadcrumb__link {\n color: var(--color-text-muted);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover {\n color: var(--color-link-hover);\n}\n.ds-breadcrumb__item.is-current {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n/* dialog: a tinted sheet with the largest corners, on a scrim */\n.ds-overlay {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border-radius: var(--radius-panel);\n backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__icon {\n color: var(--color-link);\n}\n.ds-dialog__title {\n margin: 0;\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 letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-dialog__body {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: var(--space-2);\n}\n\n/* empty state */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-7) var(--space-5);\n background: var(--fill-panel);\n border-radius: var(--radius-page);\n text-align: center;\n}\n.ds-empty__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-empty);\n height: var(--size-empty);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 0;\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 color: var(--color-heading);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-2);\n max-width: 44ch;\n color: var(--color-text-muted);\n}\n\n/* snackbar: the inverted block */\n.ds-snackbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-row-dense);\n padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-size: var(--text-ui);\n}\n.ds-snackbar__action {\n padding: var(--space-2) var(--space-3);\n color: var(--color-inverse-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-decoration: underline;\n}\n\n/* shapes: the soft geometric figures used as artwork */\n.ds-shapes {\n position: relative;\n flex: none;\n width: var(--size-art);\n height: var(--size-art);\n}\n.ds-shape--1 {\n inset: 0 40% 40% 0;\n background: var(--fill-button);\n color: var(--color-button-text);\n border-radius: 50%;\n}\n.ds-hero__copy {\n min-width: 0;\n}\n\n/* shell: a wide rail with labels and a small month, the content in tiles on the page tone */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n align-content: start;\n gap: var(--space-3);\n max-width: var(--size-page);\n min-height: 100vh;\n margin: 0 auto;\n padding: var(--space-3);\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-nav {\n grid-column: 1;\n grid-row: 1 / span 2;\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-radius: var(--radius-page);\n}\n.ds-nav__inner {\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n padding: var(--space-5) var(--space-4);\n}\n.ds-nav .ds-brand {\n padding: 0 var(--space-2);\n}\n.ds-nav .ds-button--fab {\n justify-content: flex-start;\n gap: var(--space-3);\n font-size: var(--text-base);\n}\n.ds-nav__links {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-fab);\n padding: 0 var(--space-4);\n color: var(--color-bar-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-nav__pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-pill);\n}\n.ds-nav__count {\n margin-left: auto;\n font-size: var(--text-small);\n}\n.ds-nav__link:hover, .ds-nav__link.is-hover {\n background: color-mix(in srgb, var(--color-bar-text) 10%, transparent);\n}\n.ds-nav__link:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#month\"],\n.ds-page:has(#month:target) .ds-nav__link[href=\"#month\"],\n.ds-page:has(#event:target) .ds-nav__link[href=\"#month\"],\n.ds-page:has(#agenda:target) .ds-nav__link[href=\"#agenda\"],\n.ds-page:has(#new:target) .ds-nav__link[href=\"#new\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"],\n.ds-nav__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* mini month: the small calendar in the rail */\n.ds-mini {\n display: grid;\n gap: var(--space-2);\n padding: var(--space-2);\n}\n.ds-mini__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-mini__grid {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n justify-items: center;\n row-gap: var(--space-1);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n}\n.ds-mini__day {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--size-daynum);\n height: var(--size-daynum);\n border-radius: var(--radius-pill);\n}\n.ds-mini__day.is-out,\n.ds-mini__day--label {\n opacity: 0.6;\n}\n.ds-mini__day.is-today {\n background: var(--fill-button);\n color: var(--color-button-text);\n font-weight: var(--weight-bold);\n}\n.ds-mini__day.is-busy {\n box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong);\n}\n\n.ds-view {\n grid-column: 2;\n min-width: 0;\n}\n.ds-main {\n display: grid;\n gap: var(--space-3);\n}\n.ds-main > * {\n min-width: 0;\n}\n.ds-sheet {\n padding: var(--space-6);\n background: var(--color-canvas);\n border-radius: var(--radius-page);\n}\n.ds-top {\n display: grid;\n grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);\n gap: var(--space-3);\n align-items: stretch;\n}\n\n/* hero: today, as one tonal card with the date on a tile */\n.ds-hero {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-6);\n padding: var(--space-7) var(--space-8);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-page);\n}\n.ds-hero__kicker {\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 44ch;\n margin: var(--space-3) 0 var(--space-5);\n font-size: var(--text-large);\n line-height: var(--line-heading);\n}\n.ds-hero .ds-button--outlined {\n color: var(--color-accent-text);\n border-color: var(--color-accent-text);\n}\n.ds-hero .ds-button--outlined:hover {\n background: color-mix(in srgb, var(--color-accent-text) 10%, transparent);\n}\n.ds-date {\n display: flex;\n flex: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: var(--size-art);\n height: var(--size-art);\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n}\n.ds-date__day {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n color: var(--color-link);\n}\n.ds-top .ds-list__item {\n padding-left: 0;\n padding-right: 0;\n}\n\n/* month: a toolbar, then seven columns of day tiles */\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3) var(--space-4);\n margin-top: var(--space-5);\n}\n.ds-toolbar .ds-section__title {\n margin-right: auto;\n}\n.ds-toolbar .ds-search {\n flex: 0 1 var(--size-search);\n min-height: var(--size-row-dense);\n}\n.ds-toolbar__steps {\n display: flex;\n gap: var(--space-1);\n}\n.ds-month {\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: var(--space-1);\n}\n.ds-month__head {\n padding: var(--space-1) var(--space-3);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n color: var(--color-text-muted);\n}\n.ds-month__day {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 0;\n min-height: var(--size-day);\n padding: var(--space-2);\n background: var(--color-canvas);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-month__day:hover, .ds-month__day.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-month__day.is-out {\n background: transparent;\n color: var(--color-text-muted);\n}\n.ds-month__day.is-current {\n background: var(--color-surface-alt);\n box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-link);\n}\n.ds-month__num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: flex-start;\n min-width: var(--size-daynum);\n height: var(--size-daynum);\n padding: 0 var(--space-2);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n font-variant-numeric: tabular-nums;\n}\n.ds-month__day.is-today .ds-month__num {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-event {\n display: block;\n min-height: var(--size-event);\n padding: 0 var(--space-2);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--size-event);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ds-event--2 { background: var(--color-fill-2); }\n.ds-event--3 { background: var(--color-fill-3); }\n.ds-event--4 { background: var(--color-fill-4); }\n.ds-event--solid {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-events {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* grid: the calendars, one tonal tile each */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-3);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--space-4);\n min-height: var(--size-tile);\n padding: var(--space-5);\n background: var(--color-fill-1);\n color: var(--color-text);\n border-radius: var(--radius-page);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell:hover, .ds-grid__cell.is-hover {\n border-radius: var(--radius-control);\n}\n.ds-grid__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n}\n.ds-grid__title {\n margin: 0;\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 letter-spacing: var(--heading-tracking);\n color: var(--color-heading);\n}\n.ds-grid__text {\n margin: 0;\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-main > .ds-section {\n margin-top: var(--space-5);\n}\n.ds-snackbar {\n width: 100%;\n max-width: var(--size-dialog);\n margin: var(--space-3) auto 0;\n}\n\n/* inner views sit on one sheet */\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: start;\n}\n.ds-layout--nav {\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n}\n.ds-sheet .ds-badges {\n margin-bottom: var(--space-4);\n}\n.ds-meta {\n display: grid;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-meta__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n}\n.ds-meta__item .ds-icon {\n color: var(--color-text-muted);\n}\n\n/* sidebar: the section list of the settings view */\n.ds-sidebar {\n display: grid;\n gap: var(--space-1);\n padding: var(--space-3);\n background: var(--fill-panel);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-4) var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n color: var(--color-heading-alt);\n}\n.ds-sidebar__list {\n display: grid;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text-muted);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-sidebar__link:hover, .ds-sidebar__link.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-sidebar__link.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* footer: a tonal strip under the content column */\n.ds-footer {\n grid-column: 2;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-radius: var(--radius-page);\n font-size: var(--text-ui);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-ui);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover {\n text-decoration: underline;\n}\n.ds-footer__legal {\n margin: 0;\n}\n\n@media (max-width: 1100px) {\n .ds-top,\n .ds-columns,\n .ds-columns--even,\n .ds-layout,\n .ds-layout--nav {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: wrap;\n }\n}\n@media (max-width: 800px) {\n .ds-page {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-2);\n padding: var(--space-2) var(--space-2) calc(var(--size-row) + var(--space-5));\n }\n .ds-nav,\n .ds-view,\n .ds-footer {\n grid-column: 1;\n }\n .ds-nav {\n grid-row: auto;\n background: transparent;\n }\n .ds-nav__inner {\n position: static;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-1) var(--space-2);\n }\n .ds-nav .ds-button--fab {\n font-size: 0;\n gap: 0;\n }\n .ds-mini {\n display: none;\n }\n .ds-nav__links {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 5;\n display: flex;\n justify-content: space-around;\n padding: var(--space-3) var(--space-2);\n background: var(--fill-bar);\n }\n .ds-nav__link,\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#month\"],\n .ds-page:has(#month:target) .ds-nav__link[href=\"#month\"],\n .ds-page:has(#event:target) .ds-nav__link[href=\"#month\"],\n .ds-page:has(#agenda:target) .ds-nav__link[href=\"#agenda\"],\n .ds-page:has(#new:target) .ds-nav__link[href=\"#new\"],\n .ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n flex-direction: column;\n gap: var(--space-1);\n min-height: 0;\n padding: 0;\n background: transparent;\n color: var(--color-bar-text);\n font-size: var(--text-small);\n }\n .ds-nav__count {\n display: none;\n }\n .ds-nav__pill {\n width: var(--size-indicator);\n height: var(--size-chip);\n }\n .ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#month\"] .ds-nav__pill,\n .ds-page:has(#month:target) .ds-nav__link[href=\"#month\"] .ds-nav__pill,\n .ds-page:has(#event:target) .ds-nav__link[href=\"#month\"] .ds-nav__pill,\n .ds-page:has(#agenda:target) .ds-nav__link[href=\"#agenda\"] .ds-nav__pill,\n .ds-page:has(#new:target) .ds-nav__link[href=\"#new\"] .ds-nav__pill,\n .ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] .ds-nav__pill {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n }\n}\n@media (max-width: 640px) {\n .ds-sheet {\n padding: var(--space-4);\n }\n .ds-hero {\n padding: var(--space-5);\n }\n .ds-date {\n display: none;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__lead {\n font-size: var(--text-base);\n }\n .ds-stats,\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-toolbar .ds-search {\n flex-basis: 100%;\n }\n .ds-month__head {\n padding: var(--space-1) 0;\n text-align: center;\n }\n .ds-month__day {\n min-height: calc(var(--size-day) * 0.6);\n padding: var(--space-1);\n border-radius: var(--radius-control);\n }\n .ds-month__num {\n align-self: center;\n }\n .ds-month .ds-event {\n min-height: var(--space-2);\n height: var(--space-2);\n padding: 0;\n color: transparent;\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-table__extra {\n display: none;\n }\n .ds-footer {\n padding: var(--space-4);\n }\n .ds-prose h1 {\n font-size: var(--text-h2);\n }\n}\n\n/* menu, tooltip, accordion, progress: the same parts as the other layouts of the era */\n/* menu: a tonal sheet under its button */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n padding: 0 var(--space-3) 0 var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n list-style: none;\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button:hover, .ds-menu__button.is-hover {\n background: color-mix(in srgb, var(--color-button-secondary-text) 10%, var(--color-button-secondary));\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-menu[open] .ds-menu__button {\n border-radius: var(--radius-control);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 10;\n display: grid;\n gap: var(--space-1);\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n list-style: none;\n background: var(--color-surface-alt);\n color: var(--color-text);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n min-height: var(--size-row-dense);\n padding: 0 var(--space-4);\n color: var(--color-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-menu__item:hover, .ds-menu__item.is-hover {\n background: color-mix(in srgb, var(--color-text) 8%, transparent);\n}\n.ds-menu__item.is-current {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n\n/* tooltip: a small inverted label under its trigger */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__text {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 10;\n margin-top: var(--space-1);\n padding: var(--space-1) var(--space-2);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n transition: var(--transition);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus-within .ds-tooltip__text,\n.ds-tooltip.is-hover .ds-tooltip__text {\n opacity: 1;\n visibility: visible;\n}\n\n/* accordion: a group of tonal rows that open; only the group's outer corners are large */\n.ds-accordion {\n display: grid;\n gap: var(--space-1);\n}\n.ds-accordion__item {\n background: var(--fill-panel);\n color: var(--color-text);\n border-radius: calc(var(--radius-control) / 2);\n box-shadow: var(--shadow-panel);\n}\n.ds-accordion__item:first-child {\n border-top-left-radius: var(--radius-panel);\n border-top-right-radius: var(--radius-panel);\n}\n.ds-accordion__item:last-child {\n border-bottom-left-radius: var(--radius-panel);\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-height: var(--size-row);\n padding: var(--space-2) var(--space-5);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__summary::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__summary::after {\n content: \"\";\n flex: none;\n width: var(--space-2);\n height: var(--space-2);\n margin-left: auto;\n border-right: var(--border-width-strong) solid currentColor;\n border-bottom: var(--border-width-strong) solid currentColor;\n transform: translateY(-25%) rotate(45deg);\n}\n.ds-accordion__item[open] .ds-accordion__summary::after {\n transform: translateY(25%) rotate(225deg);\n}\n.ds-accordion__summary:focus-visible {\n outline: var(--focus-ring);\n outline-offset: calc(var(--border-width-strong) * -1);\n}\n.ds-accordion__hint {\n display: block;\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n color: var(--color-text-muted);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-4);\n color: var(--color-text-muted);\n}\n.ds-accordion__body p {\n margin: 0 0 var(--space-3);\n}\n\n/* progress: a thick track in two parts with a gap, and a stop dot at the end */\n.ds-progress {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n height: var(--size-track);\n}\n.ds-progress__bar {\n flex: 0 0 50%;\n height: 100%;\n background: var(--fill-button);\n border-radius: var(--radius-pill);\n}\n.ds-progress__rest {\n position: relative;\n flex: 1;\n height: 100%;\n background: var(--fill-button-secondary);\n border-radius: var(--radius-pill);\n}\n.ds-progress__rest::after {\n content: \"\";\n position: absolute;\n top: 25%;\n right: calc(var(--size-track) / 4);\n width: calc(var(--size-track) / 2);\n height: 50%;\n background: var(--color-button);\n border-radius: 50%;\n}\n.ds-progress--60 .ds-progress__bar { flex-basis: 60%; }\n.ds-progress__label {\n display: flex;\n justify-content: space-between;\n gap: var(--space-3);\n align-items: center;\n margin: 0 0 var(--space-2);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n color: var(--color-text-muted);\n}\n.ds-progress__label strong {\n color: var(--color-text);\n font-weight: var(--weight-ui);\n}\n\n.ds-menu__label {\n display: inline;\n}\n.ds-menu--end .ds-menu__list,\n.ds-menu--end-wide .ds-menu__list {\n right: 0;\n left: auto;\n}\n.ds-progress-group {\n display: grid;\n gap: var(--space-4);\n margin: var(--space-4) 0;\n}\n.ds-avatars {\n display: inline-flex;\n align-items: center;\n}\n.ds-avatars .ds-avatar + .ds-avatar {\n margin-left: calc(var(--space-2) * -1);\n}\n@media (max-width: 640px) {\n .ds-menu--end-wide .ds-menu__list {\n right: auto;\n left: 0;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: tonal calendar app specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n New event\n \n
\n
October 2026Week 41
\n
MTWTFSS282930123456789101112131415161718192021222324252627282930311
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Wednesday, week 41

\n

Three things today

\n

Stand-up at 09:30, lunch with Tomas at 13:00 and choir at 19:00. The afternoon is free.

\n
\n New event\n Open the agenda\n
\n
\n
October7Wednesday
\n
\n \n
\n\n
\n

3

Events today

\n

11

Events this week

\n

4

Invitations to answer

\n
\n\n
\n

October 2026

\n \n September\n November\n \n \n Search events\n
\n
\n Mon\n Tue\n Wed\n Thu\n Fri\n Sat\n Sun\n 28\n 29\n 30\n 1Rent due\n 2Dentist, 08:15\n 3Market\n 4\n 5Stand-upBoiler service\n 6Stand-up\n 7Stand-upLunch, TomasChoir\n 8Review, 14:00\n 9Stand-upTrain to Porto\n 10Porto\n 11Porto\n 12Stand-up\n 13\n 14Choir\n 15Planning day\n 16\n 17Allotment\n 18\n 19Stand-up\n 20Ines, birthday\n 21Choir\n 22\n 23ReleaseDinner, 20:00\n 24\n 25\n 26Stand-up\n 27\n 28Choir\n 29Car inspection\n 30\n 31Clocks go back\n 1\n
\n\n
\n

Calendars

Manage
\n
\n 6

Work

Shared with the team

\n

Home

You and Tomas Reyl

\n

Choir

Wednesdays, 14 singers

\n

Add a calendar

New, or by address

\n
\n
\n\n
Review moved to Thursday at 14:00Undo
\n
\n
\n\n
\n
\n
\n
    \n
  1. Month
    2. \n
  2. October 2026
    3. \n
  3. Planning day
    4. \n
\n
\n
\n

Planning day

\n

Thursday 15 October, 09:00 to 16:30, in Work

\n
\n
\n Edit\n Going\n
\n
\n
\n
\n

What the day is for

\n

One room, no laptops before lunch, and a plan for the winter by half past four.

\n

Bring the list from the last review. The shared notes are in planning-q4, and the agenda of the last planning day shows how long each part took.

\n

Order of the day

\n
    \n
  • 09:00, what went well since July
    • \n
  • 11:00, the three things we will not do
    • \n
  • 14:00, who takes what
    • \n
\n

Getting there

\n

Tram 28 to the last stop, then the gate on the left. Lunch is ordered.

\n
\n
\n
\n
\n ChoirClashes with this\n

Choir rehearsal moved

\n
    \n
  • Thursday 15 October, 16:00 to 18:00
    • \n
  • Parish hall, side door
    • \n
  • 14 invited, 9 going
    • \n
\n

9 of 14 have answeredIVTRMO

\n

It overlaps the last half hour of the planning day.

\n
\n Decline\n Accept anyway\n
\n
\n
\n
\n

Attached

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

Agenda

\n

Everything from today to the end of next week, across three calendars.

\n
\n
\n
All calendars
\n New event\n
\n
\n \n
\n 11 events\n New\n Going\n Maybe\n Clash\n
\n
\n \n \n \n \n \n \n \n \n \n
EventCalendarWhenAnswerGuests
Stand-upWorkToday, 09:30Going6
Lunch with TomasHomeToday, 13:00Going2
ReviewWorkThu, 14:00Maybe4
Train to PortoHomeFri, 17:40Going2
Planning dayWork15 Oct, 09:00Clash12
\n
\n
    \n
    • \n
  • 1
    • \n
  • 2
    • \n
  • 3
    • \n
    • \n
\n
\n
\n
\n \n

No tasks due this week

\n

Tasks with a date show up here, beside the events of the same day.

\n Add a task\n
\n
\n

Free this week

\n

Wednesday afternoon and all of Saturday have nothing in them. Thursday is full from nine to six.

\n Wed, 14:00 to 18:00Saturday\n
\n Block some time\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

New event

\n

A draft is kept while you type. Guests hear nothing until you save.

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

Times are in Lisbon timeGuests see them in their own.

\n

Check the end timeAn event cannot end before it starts.

\n
\n
\n

That morning

\n

Saturday 17 October is free until the market at noon.

\n Market, 12:00\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n

Settings

\n

How the calendar looks, what it tells you and who can see it.

\n
\n
\n Back to the month\n
\n
\n
\n \n
\n
\n

View

\n
\n \n \n \n
\n
\n Done\n Reset this section\n
\n
\n
RemindersThirty minutes before, by default

Each calendar can have its own lead time.

SharingTomas Reyl sees Home

People you share with see titles and times, not notes.

SyncEvery five minutes

Changes made offline are sent when the connection returns.

\n

Colours follow the calendarEach calendar takes one of the four tones; events inherit it.

\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.material-you.app.s05.p06.t05.u06\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"material-you\",\n \"years\": [\n 2021,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-my-5656\",\n \"short\": \"v1-my-5656\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ececec;\n --color-canvas: #fafafa;\n --color-surface: #f3f3f3;\n --color-surface-alt: #e6e6e6;\n --color-surface-strong: #dedede;\n --color-bar: #ececec;\n --color-bar-text: #1a1c1c;\n --color-bar-alt: #dadada;\n --color-bar-alt-text: #1a1c1c;\n --color-inverse: #2f3131;\n --color-inverse-text: #f0f1f1;\n --color-text: #1a1c1c;\n --color-text-muted: #454747;\n --color-heading: #101212;\n --color-heading-alt: #004f50;\n --color-link: #006a6b;\n --color-link-quiet: #1a1c1c;\n --color-link-visited: #5d5f5f;\n --color-link-hover: #004f50;\n --color-link-active: #002020;\n --color-border: #c5c7c7;\n --color-border-strong: #757777;\n --color-border-muted: #e2e2e2;\n --color-accent: #c4eceb;\n --color-accent-text: #002020;\n --color-accent-alt: #3c4a4a;\n --color-fill-1: #c4eceb;\n --color-fill-2: #dadada;\n --color-fill-3: #c9cdcd;\n --color-fill-4: #dedede;\n --color-button: #006a6b;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #dadada;\n --color-button-secondary-text: #1a1c1c;\n --color-input: #fafafa;\n --color-input-text: #1a1c1c;\n --color-input-border: #757777;\n --color-disabled: #e4e4e4;\n --color-disabled-text: #9a9c9c;\n --color-danger: #a8201a;\n --color-danger-surface: #f7dcd9;\n --color-success: #3d6b2c;\n --color-warning: #8d6200;\n --color-notice: #d6dada;\n --color-notice-text: #161d1d;\n --color-focus: #1a1c1c;\n --color-shadow: #000000;\n --color-overlay: rgb(26 28 28 / 0.5);\n}\n\n/* @part type */\n:root {\n --font-body: \"Roboto Flex\", Archivo, \"Helvetica Neue\", Arial, sans-serif;\n --font-heading: \"Roboto Condensed\", \"Barlow Condensed\", \"Archivo Narrow\", \"Avenir Next Condensed\", \"Arial Narrow\", sans-serif;\n --font-ui: \"Roboto Flex\", Archivo, \"Helvetica Neue\", Arial, sans-serif;\n --font-mono: \"Red Hat Mono\", \"Roboto Mono\", Menlo, monospace;\n --text-base: 16px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 21px;\n --text-display: 72px;\n --text-h1: 44px;\n --text-h2: 32px;\n --text-h3: 24px;\n --line-body: 1.5;\n --line-heading: 1.1;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 600;\n --weight-display: 700;\n --weight-ui: 600;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: -0.5px;\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: 12px;\n --radius-panel: 12px;\n --radius-pill: 9999px;\n --radius-page: 16px;\n --shadow-panel: 0 1px 2px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent);\n --shadow-control: 0 1px 1px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent);\n --shadow-control-hover: 0 1px 3px 0 color-mix(in srgb, var(--color-shadow) 26%, transparent);\n --shadow-control-pressed: none;\n --shadow-dialog: 0 2px 6px 0 color-mix(in srgb, var(--color-shadow) 28%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-surface);\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: color-mix(in srgb, var(--color-button) 80%, black);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-text);\n --transition: background-color 0.1s linear, color 0.1s linear;\n --backdrop-blur: 0px;\n}\n" } }