{
  "id": "v1-md-6434",
  "long_id": "v1.material-design.app.s06.p04.t03.u04",
  "name": "Material list and detail tasks, 2016",
  "era": {
    "slug": "material-design",
    "code": "md",
    "name": "Material Design",
    "years": [
      2014,
      2018
    ],
    "description": "Paper and ink, 2014 to 2018: flat sheets that cast soft shadows, a coloured app bar, uppercase medium-weight buttons, two-pixel corners and one bright accent for the floating action."
  },
  "archetype": "app",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "summary": "A signed-in task or mail application in the paper-and-ink manner, built on the list-detail pattern: a coloured bar with the views, a dark strip under it that states where you are, and below that two sheets side by side, a dense two-line list with round avatars at the left and the chosen item open on a raised side sheet at the right. A floating action button rides the lower corner of the list, filters are chips, settings are rows with switches, and nothing is centred or boxed in a column. Inboxes, to-do lists, issue trackers and admin tools built on material frameworks looked like this from about 2015 to 2018.",
  "url": "https://chrono.skin/s/v1-md-6434",
  "preview_url": "https://chrono.skin/s/v1-md-6434/specimen.html",
  "files": {
    "STYLE.md": "# Material list and detail tasks, 2016\n\n## Summary\n\nA signed-in task or mail application in the paper-and-ink manner, built on the list-detail pattern: a coloured bar with the views, a dark strip under it that states where you are, and below that two sheets side by side, a dense two-line list with round avatars at the left and the chosen item open on a raised side sheet at the right. A floating action button rides the lower corner of the list, filters are chips, settings are rows with switches, and nothing is centred or boxed in a column. Inboxes, to-do lists, issue trackers and admin tools built on material frameworks looked like this from about 2015 to 2018.\n\n## Layout\n\n- The page is fluid: `--size-page` is `100%`, and the bar, the strip, the content and the footer span the window with `--space-4` (24px) at the sides. Designed at 1440px. There is no maximum content width and no drawer: sheets stretch with the window, as in an application. Running text is capped at `--size-measure` (640px).\n- Order on the home screen: `.ds-nav` (`--size-bar` 64px: brand, view links with a `--border-width-strong` line under the current one, the account at the right), `.ds-hero` (a strip in the secondary bar fill: the day's headline and one line at the left, a flat button and one raised white button at the right), then `.ds-main` with one `.ds-split`: the `.ds-pane` list sheet (5 parts) and the `.ds-sheet` side sheet (7 parts), `--space-4` apart and equal in height. Then the one-line `.ds-footer`.\n- The list sheet, top to bottom: `.ds-tabs`, `.ds-pane__tools` (filter chips and a short text field), the `.ds-list` of two-line rows (64px, the chosen row tinted with a `--size-stripe` line at its left), `.ds-pane__foot` (row count and pagination) and `.ds-pane__fab`, the floating button in its lower right corner. The side sheet: `.ds-sheet__head` (title and round icon buttons), `.ds-sheet__body` (labels, a `.ds-facts` row, text, a `.ds-checks` list) and `.ds-sheet__actions`.\n- Everything is on an 8px grid. `--space-1` 4px (helper text, meta gaps), `--space-2` 8px (between chips and flat buttons, tool strip padding, row padding), `--space-3` 16px (list row side padding, button side padding, strip padding, figure and card padding), `--space-4` 24px (gutter between sheets, page side padding, sheet padding, field gap), `--space-5` 32px (above a caption inside a sheet), `--space-6` 48px (bottom of the page, overlay padding), `--space-7` 64px and `--space-8` 80px (spare steps).\n- Heights: bar and sheet head `--size-bar` 64px; tabs, table rows and card heads `--size-row` 48px; avatars, side links and icon buttons `--size-row-dense` 40px; buttons and fields `--size-control` 36px; floating button `--size-fab` 56px. Other sizes: `--size-brand` 30px, `--size-side` 248px (settings navigation), `--size-media` 88px (colour head of a list card), `--size-meter` 6px (progress line), `--size-switch` 36px with `--size-track` 14px and `--size-thumb` 20px, `--size-stripe` 4px, `--size-search` 220px, `--size-icon` 24px, `--size-check` 18px, `--size-badge` 22px, `--size-dialog` 440px, `--size-area` 112px.\n- Inner pages (one item in full, an overview, a form, settings) have no `.ds-hero`. Under the same `.ds-nav` comes `.ds-page-header`, the same dark strip in compact form: the `.ds-breadcrumb`, the page title and one line of description at the left, one raised white button at the right. Then `.ds-main`. An item page is a `.ds-split--form` (7 to 5): the text sheet (`.ds-panel--pad`) at the left, a `.ds-stack` with a small card and the notes sheet (`.ds-sheet--bottom`) at the right. An overview page is one `.ds-stack`: `.ds-stats` (four small cards with a coloured top line), the `.ds-grid` of list cards and a `.ds-panel` with a head and the `.ds-table`. A form page is a `.ds-split--form`: the form sheet with its buttons in a ruled strip at the bottom right, and notices and the dialog at the right. A settings page is a `.ds-split--settings`: the `.ds-sidebar` navigation card (`--size-side`) at the left, cards of `.ds-settings` rows at the right. `.ds-stack--fill` lets the last block of a column take the remaining height, so both columns end together.\n- Views: the specimen is one application with five views. `inbox` is the home view: headline strip, the list sheet with tabs, chips, six tasks, pagination and the floating button, and the side sheet of the chosen task. `task` is that task in full: text, related links and labels, beside who is on it and the notes. `lists` is the overview: figures, the four list cards and the table of members. `new` is the form for a task with its actions, an information notice, an error notice and the delete dialog. `settings` has the settings navigation, the reminder switches and the calendars card, shown empty.\n- Below 900px every split becomes one column (the side sheet follows the list, the settings navigation sits above its cards), figures and list cards go two by two and the account name hides. Below 600px the bar wraps into a brand row and a full-width `.ds-nav__links` row whose links spread to both edges (the current one keeps `.is-current`), the account menu `.ds-menu--account` is pinned at the right of the brand row with its name (`.ds-menu__label`) hidden, the strip stacks its buttons under the text, list cards and form rows become one column, facts stack, and table cells marked `.ds-table__extra` 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- `--color-bar` soft teal `#80cbc4` with dark `--color-bar-text` `#212121`: navigation bar and header band carry dark text, not white. `--color-bar-alt` and `--color-inverse` are blue-grey `#455a64` with white text (toolbar, footer).\n- Green is the colour of action: `--color-button`, `--color-link`, `--color-focus` and `--color-success` are `#46873b` with white button text; `--color-link-hover` stays `#46873b`, so hover is shown by elevation; `--color-link-active` is `#455a64`.\n- `--color-accent` mint `#64ffda` with `#212121` text: floating button, count badges. The 3px indicator under the current toolbar link and tab is `--color-link`, which reads on a white sheet under every palette. `--color-accent-alt` is blue-grey `#455a64`.\n- Page `#f3f3f3`, sheets white, `--color-surface-alt` `#fafafa`, `--color-surface-strong` `#e3e3e3`; borders `#dcdcdc`, inner dividers `#ebebec`. Text `#212121`, secondary `#757575`, section titles `#444444`.\n- Block fills: teal `#80cbc4`, mint `#64ffda`, light green `#6ab344` (all with dark text), blue-grey `#455a64` (white text). `--color-danger` `#c2185b`, `--color-warning` amber `#ffc400`, notice `#e3e3e3`.\n- One family, Roboto, for body, headings and UI; `--font-mono` for code only.\n- Dense text: `--text-base` 13px on a 24px line (`--line-body` 1.85), `--text-small` 12px, `--text-ui` 14px.\n- Small regular headings: `--text-display` 34px, `--text-h1` 24px, `--text-h2` 20px, `--text-h3` 15px at `--weight-bold` 500; `--text-large` 18px for the lead.\n- `--ui-transform` is `none`: buttons, navigation and tabs are sentence case at `--weight-ui` 500. No uppercase anywhere, no underlines, no tracking.\n- Raised paper: every sheet floats visibly. `--shadow-panel` is a three-layer shadow (10px blur, 4px drop); `--shadow-control` a deeper one (14px blur, 6px drop) on resting buttons; `--shadow-control-hover` drops 8px; `--shadow-control-pressed` falls back to two tight layers; `--shadow-dialog` is two layers, 14px blur with a 12px drop.\n- All corners are 2px, including `--radius-pill`: badges, chips and pagination cells are small rectangles, not pills.\n- Fills are flat; depth comes from shadow only. `--border-width` 1px, `--border-width-strong` 3px for indicators, stat rules and the focus and error line of a field. A hovered button darkens: `--fill-button-hover` is the button colour mixed with 12% black. `--fill-input` is transparent, so fields are a bottom line only; `--focus-ring` is a solid 3px line; `--transition` is a quick 0.15s ease-out.\n- In this layout the toolbar is a white sheet (`--fill-panel`) with `--color-text-muted` links and a `--color-heading` brand name; `--fill-bar` with `--color-bar-text` fills the hero and the inner page header instead. `--fill-inverse` with `--color-inverse-text` is the dark band and the footer. `--color-surface-strong` is the grey band and the table head, both with `--color-text`.\n- Text on fills follows fixed pairs: `--color-bar-text` on the hero, the page header, `--color-fill-1` and `--color-fill-3`; `--color-accent-text` on the accent, `--color-fill-2` and the warning badge; `--color-inverse-text` on `--color-fill-4`, the dark band and the footer; `--color-button-text` on the primary and danger buttons and on the new, success and danger badges. Links and muted text are used only on the page and on white sheets, never on a grey, coloured or dark band.\n- One-off values built with `color-mix()`, `calc()` or `opacity` because the vocabulary has no token: 87% and 70% of the bar text colour for the hero lead, the page header text and its breadcrumb; 14%, 22% and 40% washes of it for the hero shapes; 87% opacity for card text on a colour block; 87%, 70% and 40% of the inverse text in the dark band and footer; 66% of the quiet link colour for rail links; a 20% grey wash behind a hovered flat button; line heights 1.18, 1.2, 1.43, 1.6 and 1.85.\n\n## Components\n\n- `.ds-page` on `<body>`: the desk, family, 16px/1.6 light text.\n- `.ds-nav`: the 64px bar. `.ds-brand` at its left, `.ds-nav__links` > `.ds-nav__link` uppercase links to the views (`is-current` has full-strength text and a line on the bar's bottom edge), `.ds-nav__account` at the right with a small avatar.\n- `.ds-brand`: the application's mark and name, one link. `.ds-brand__mark` is a `--size-brand` tile dressed like the primary raised button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) with a `--border-width` ring of `--color-bar-text` at 70%, which keeps it apart from the bar when button and bar colours are the same; `.ds-brand__name` is the name at `--text-large` in the heading font. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the headline strip of the home screen in the secondary bar fill. `.ds-hero__body` holds `.ds-hero__title` (34px light) and `.ds-hero__lead`; `.ds-hero__actions` the main action as a raised `.ds-button--secondary`, with at most one `.ds-button--flat` beside it, which takes the strip's text colour. The primary button is not used on the strip, because under some palettes it has the strip's own colour.\n- `.ds-page-header`: the same strip on an inner page. `.ds-page-header__body` holds the breadcrumb, `.ds-page-header__title` (24px) and `.ds-page-header__text`; `.ds-page-header__actions` one raised `.ds-button--secondary`.\n- `.ds-main`, `.ds-split`, `.ds-stack`, `.ds-subhead`: the content area; a two-column grid (5 to 7; `--form` 7 to 5; `--settings` a fixed navigation column; `--start` stops the columns stretching); a column of blocks `--space-4` apart (`--fill` stretches the last); a small uppercase caption inside a sheet.\n- `.ds-pane`: the list sheet. `.ds-pane__tools` is its strip of chips with `.ds-pane__field`, `.ds-pane__foot` its foot with the row count and pagination, `.ds-pane__fab` places the floating button.\n- `.ds-sheet`: a raised sheet for the chosen item, at the side of the list. `.ds-sheet__head` with `.ds-sheet__title` and `.ds-button--icon` buttons, `.ds-sheet__body`, `.ds-sheet__actions` (`.ds-sheet__spacer` pushes the last button right). `--bottom` is the bottom sheet form with square lower corners, used for notes. `.ds-facts` is a row of three labelled values (`.ds-facts__label`, `.ds-facts__value`); `.ds-checks` a list of `.ds-form__check` rows, a finished one in `.ds-checks__done`.\n- `.ds-prose`: long-form text on a `.ds-panel--pad` sheet; styles h1 to h3, paragraphs, lists, `strong`, inline `code`, `pre` and links.\n- `.ds-link`: inline link with `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet` is text-coloured. `.ds-links` lays several out in a row.\n- `.ds-button`: raised button, 36px tall, uppercase. `--secondary` is raised white, `--flat` has no fill or shadow and link-coloured text (inside sheets, cards and dialogs), `--fab` is the 56px accent disc holding one `.ds-icon`, `--icon` a round 40px icon button, `--danger` a raised button filled with `--color-danger` for a destructive action; `--flat` with `--danger` is its flat form. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-icon`: 24px stroked inline SVG in the current text colour.\n- `.ds-form`: stacked fields. `.ds-form__field` wraps a small `.ds-form__label` above a `.ds-form__control` (a bottom line; `--area` for a textarea, wrapped in `.ds-form__select` for a select); `.ds-form__row` puts two fields on one line. `is-focus` thickens the line; `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; `.ds-form__actions` right-aligns buttons inside a form.\n- `.ds-switch`: an on-off setting: a `<label>` holding `.ds-switch__input` (a checkbox) and `.ds-switch__track`, which draws the track and the round thumb; `is-on` shows the on state statically. Use it in `.ds-settings`, a list of `.ds-settings__item` rows with `.ds-settings__body` (`.ds-settings__title`, `.ds-settings__text`) at the left and the switch at the right.\n- `.ds-table`: 48px rows divided by hairlines with a small grey head, inside a `.ds-panel` under a `.ds-panel__head`. `.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`: dense two-line rows. `.ds-list__item` holds a `.ds-list__avatar` disc (`--alt`, `--accent`, `--small`), `.ds-list__body` with `.ds-list__title` and `.ds-list__text`, each cut to one line, and `.ds-list__meta` at the right (a time above a status badge). `is-current` marks the chosen row. `.ds-list--open` lets the text wrap, for notes.\n- `.ds-panel`: a white sheet. `.ds-panel__title` and `.ds-panel__body` for a small card, `.ds-panel__head` (48px, title left, one flat button right) above a table or settings rows, `.ds-panel__actions` (`--end`) a ruled strip of buttons; `--pad` gives a text or form sheet 24px padding.\n- `.ds-stat`: one figure card with a `--border-width-strong` top line in a block colour (`--2`, `--3`, `--4`). Four sit in a `.ds-stats` row, 24px apart. `.ds-stat__value` is the number (24px) and `.ds-stat__label` the small grey caption under it.\n- `.ds-grid`: four list cards. Each `.ds-grid__cell` (`--2`, `--3`, `--4` pick the fill) is one link with a `.ds-grid__media` colour head carrying `.ds-grid__title` and `.ds-grid__count`, a `.ds-grid__text` line and a `.ds-grid__meter` progress line (`.ds-grid__meter-bar`, `--low`, `--high`).\n- `.ds-tabs`: a hairline-ruled row of uppercase `.ds-tabs__tab` along the top of a sheet; `is-current` has a line in `--color-link`.\n- `.ds-badge`: accent count; `--new` navy; `--chip` a 32px grey chip, `is-active` white and pressed in when it is the chosen filter. Status labels `--success`, `--warning`, `--danger` are flat fills with one word in sentence case. Group with `.ds-badges`.\n- `.ds-sidebar`: the navigation card of the settings page: `.ds-sidebar__title` captions above `.ds-sidebar__list` groups of 40px `.ds-sidebar__link` rows; `is-current` is link-coloured on a tint with a stripe at its left.\n- `.ds-notice`: a navy sheet with `.ds-notice__body` and a `.ds-notice__title`; `--error` is a white sheet with a top line and text in the danger colour. Group with `.ds-notices`.\n- `.ds-pagination`: a row of `.ds-pagination__link` cells; `is-current` is filled, `is-disabled` grey; previous and next are chevron icons.\n- `.ds-breadcrumb`: 13px trail of `.ds-breadcrumb__item` with `.ds-breadcrumb__link`, separated by drawn chevrons; the last carries `is-current`. Inside the page header it takes the strip's text colour.\n- `.ds-dialog`: a white sheet with the deepest shadow, `.ds-dialog__title`, `.ds-dialog__body` and right-aligned flat buttons in `.ds-dialog__actions`. Sits on `.ds-overlay`.\n- `.ds-empty`: centred `.ds-empty__mark` disc, `.ds-empty__title`, `.ds-empty__text` and one flat button, inside the card whose content is missing.\n- `.ds-footer`: one dark line: a `.ds-footer__list` of `.ds-footer__link` at the left and `.ds-footer__legal` at the right.\n- `.ds-menu`: a `<details>` whose `.ds-menu__button` (the `<summary>`: an icon, or the account's `.ds-avatar`) opens `.ds-menu__list`, a white sheet with the dialog shadow holding 48px `.ds-menu__link` rows. Use it for the account menu and the overflow (three dots) at the end of the bar; `--start` hangs the sheet from the left, for the menu button that carries the navigation on a phone.\n- `.ds-menu--account`: the account menu in the bar; its `.ds-menu__label` shows the name beside the avatar and is hidden on a phone, where only the avatar is left.\n- `.ds-avatar`: a person as a `--size-control` disc in the accent fill with one initial; use it in the bar as the account button.\n- `.ds-tooltip`: on an icon-only button, with a `.ds-tooltip__text` child naming it; the small dark label shows on hover and focus (`is-open` statically). It sits below; `--left`, `--right` and `--above` move it. Use it on the floating button and bar icons, never on a button that already has a text label.\n- `.ds-progress`: a `--size-progress` line with `.ds-progress__bar` (`--low`, `--high`) for work whose length is known; `--ring` is the small ring for work whose length is not. Put it inside the card or notice it reports on.\n- `.ds-accordion`: expansion panels inside a card: `<details class=\"ds-accordion__item\">` with a `.ds-accordion__head` summary (a chevron is drawn at its right) and a `.ds-accordion__body` paragraph. Use it for short questions and answers, closed by default.\n\n## Never\n\n- `row-gap <= 8px`: list and table rows touch and are divided by hairlines; the steps of a checklist sit 8px apart at most.\n- `block-gap <= 32px`: sheets are one 24px gutter apart.\n- `content-width >= 80%`: the two sheets fill the window; nothing is a centred column.\n- `uppercase-text = 0%`: labels, buttons and navigation are sentence case.\n- `underlined-links = 0%`: links are marked by colour and weight.\n- `font-weight <= 500`: emphasis is medium, never bold.\n- `font-size >= 12px`: captions are the smallest text.\n- `font-size <= 34px`: the header band title is the largest text.\n- `letter-spacing = 0px`: no tracking.\n- `font-families <= 2`: one sans-serif plus the mono for code.\n- `gradient-fills = 0%`: every fill is one flat colour; depth comes from shadow only.\n- `text-shadow = none`: no text has a shadow.\n- `border-radius <= 12px`: controls 3px, cards 6px, chips 12px; only discs and badge pills are rounder.\n- `box-shadow-blur <= 22px`: cards rest on a 4px blur; buttons and the dialog reach 22px.\n- `border-width <= 4px`: hairlines are 1px, indicators 2px, the drawer stripe 4px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen. A new kind of item is a new `.ds-list__item` in the list sheet and opens on the `.ds-sheet` beside it; a new fact about it is one more value in `.ds-facts`; a new on-off choice is a `.ds-settings__item` with a `.ds-switch`. A new overview block is a `.ds-panel` in the page's `.ds-stack`, a new view a `.ds-nav__link` and a `.ds-page-header`. Use tokens only, take heights and gaps from the `--size-*` and `--space-*` scale, and colour a block with one flat `--color-fill-*` and the text colour paired with it above. Never add a drawer, a second floating button, a centred column, an outline around a sheet, or a third sheet beside the list and its detail.\n",
    "components.css": ":root {\n  --size-page: 100%;\n  --size-menu: 208px;\n  --size-progress: 4px;\n  --size-ring: 32px;\n  --size-measure: 640px;\n  --size-side: 248px;\n  --size-bar: 64px;\n  --size-row: 48px;\n  --size-row-dense: 40px;\n  --size-control: 36px;\n  --size-fab: 56px;\n  --size-brand: 30px;\n  --size-icon: 24px;\n  --size-check: 18px;\n  --size-badge: 22px;\n  --size-stripe: 4px;\n  --size-switch: 36px;\n  --size-track: 14px;\n  --size-thumb: 20px;\n  --size-media: 88px;\n  --size-meter: 6px;\n  --size-search: 220px;\n  --size-dialog: 440px;\n  --size-area: 112px;\n  --space-1: 4px;\n  --space-2: 8px;\n  --space-3: 16px;\n  --space-4: 24px;\n  --space-5: 32px;\n  --space-6: 48px;\n  --space-7: 64px;\n  --space-8: 80px;\n}\n\n/* menu: a sheet of choices that drops from a button in the bar */\n.ds-menu {\n  position: relative;\n  display: flex;\n  align-items: center;\n  align-self: center;\n  flex: none;\n}\n.ds-menu__button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  min-width: var(--size-row-dense);\n  height: var(--size-row-dense);\n  border-radius: var(--radius-pill);\n  color: inherit;\n  font-size: var(--text-small);\n  list-style: none;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker { display: none; }\n.ds-menu__button:hover,\n.ds-menu__button.is-hover,\n.ds-menu[open] > .ds-menu__button { background: color-mix(in srgb, currentColor 16%, transparent); }\n.ds-menu__button:focus-visible,\n.ds-menu__button.is-focus { outline: var(--focus-ring); }\n.ds-menu__list {\n  position: absolute;\n  z-index: 20;\n  top: 100%;\n  right: 0;\n  min-width: var(--size-menu);\n  margin: var(--space-1) 0 0;\n  padding: var(--space-2) 0;\n  list-style: none;\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-dialog);\n  color: var(--color-text);\n}\n.ds-menu__link,\n.ds-menu__link:hover {\n  display: flex;\n  align-items: center;\n  min-height: var(--size-row);\n  padding: 0 var(--space-3);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  text-decoration: none;\n  text-transform: none;\n  white-space: nowrap;\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover { background: var(--color-surface-alt); }\n.ds-menu__link:focus-visible { outline: var(--focus-ring); outline-offset: calc(var(--border-width-strong) * -1); }\n\n/* avatar: a person as a disc with an initial */\n.ds-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--size-control);\n  height: var(--size-control);\n  border-radius: 50%;\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n}\n\n/* tooltip: the name of an icon button, shown on hover and focus */\n.ds-tooltip { position: relative; }\n.ds-tooltip__text {\n  position: absolute;\n  z-index: 30;\n  top: calc(100% + var(--space-2));\n  left: 50%;\n  transform: translateX(-50%);\n  padding: var(--space-1) var(--space-2);\n  border-radius: var(--radius-control);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  text-transform: none;\n  white-space: nowrap;\n  visibility: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__text,\n.ds-tooltip:focus-visible > .ds-tooltip__text,\n.ds-tooltip.is-open > .ds-tooltip__text { visibility: visible; opacity: 1; }\n.ds-tooltip--left > .ds-tooltip__text {\n  top: 50%;\n  right: calc(100% + var(--space-2));\n  left: auto;\n  transform: translateY(-50%);\n}\n\n/* progress: a thin line, or a ring while the length is unknown */\n.ds-progress {\n  display: block;\n  height: var(--size-progress);\n  margin: var(--space-3) 0 var(--space-1);\n  overflow: hidden;\n  background: color-mix(in srgb, var(--color-button) 30%, transparent);\n}\n.ds-progress__bar {\n  display: block;\n  width: 60%;\n  height: 100%;\n  background: var(--fill-button);\n}\n\n/* accordion: expansion panels inside a sheet */\n.ds-accordion {\n  margin: var(--space-3) 0 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item + .ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--size-row);\n  color: var(--color-text);\n  font-size: var(--text-ui);\n  list-style: none;\n  cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker { display: none; }\n.ds-accordion__head::after {\n  content: \"\";\n  flex: none;\n  width: var(--space-2);\n  height: var(--space-2);\n  margin: 0 var(--space-1);\n  border-right: var(--border-width-strong) var(--border-style) var(--color-text-muted);\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-text-muted);\n  transform: rotate(45deg);\n}\n.ds-accordion__item[open] > .ds-accordion__head::after { transform: rotate(-135deg); }\n.ds-accordion__head:focus-visible { outline: var(--focus-ring); }\n.ds-accordion__body {\n  margin: 0;\n  padding: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n}\n\n/* shell */\n.ds-page {\n  margin: 0;\n  min-width: 0;\n  width: var(--size-page);\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  -webkit-font-smoothing: antialiased;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n\n.ds-icon {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  flex: none;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n}\n\n/* nav */\n.ds-nav {\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-4);\n  height: var(--size-bar);\n  padding: 0 var(--space-4);\n  background: var(--fill-bar);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  text-shadow: var(--shadow-text);\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-bar-text);\n  font-size: var(--text-large);\n  line-height: 1.2;\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-brand);\n  height: var(--size-brand);\n  flex: none;\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 70%, transparent);\n  border-radius: var(--radius-control);\n  background: var(--color-button);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 72%;\n  height: 72%;\n}\n.ds-brand__name {\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\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-2);\n  height: 100%;\n  padding: 0 var(--space-3);\n  border-top: var(--border-width-strong) var(--border-style) transparent;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: color-mix(in srgb, var(--color-bar-text) 70%, transparent);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: var(--link-decoration-quiet);\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover { color: var(--color-bar-text); }\n.ds-nav__link.is-current {\n  border-bottom-color: var(--color-bar-text);\n  color: var(--color-bar-text);\n}\n.ds-nav__account {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  flex: none;\n  color: color-mix(in srgb, var(--color-bar-text) 87%, transparent);\n  font-size: var(--text-small);\n}\n\n/* hero and page header: the strip under the bar */\n.ds-hero,\n.ds-page-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n}\n.ds-hero { padding-top: var(--space-4); padding-bottom: var(--space-4); }\n.ds-hero__body,\n.ds-page-header__body { flex: 1 1 0; min-width: 0; }\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-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n  max-width: var(--size-measure);\n  margin: var(--space-1) 0 0;\n  color: color-mix(in srgb, var(--color-bar-alt-text) 87%, transparent);\n  font-size: var(--text-large);\n  line-height: 1.4;\n}\n.ds-hero__actions,\n.ds-page-header__actions {\n  display: flex;\n  flex: none;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-page-header__title {\n  margin: var(--space-1) 0 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: 1.25;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: var(--size-measure);\n  margin: 0;\n  color: color-mix(in srgb, var(--color-bar-alt-text) 87%, transparent);\n  font-size: var(--text-base);\n}\n\n/* layout */\n.ds-main { padding: var(--space-4) var(--space-4) var(--space-6); }\n.ds-split {\n  display: grid;\n  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);\n  gap: var(--space-4);\n  align-items: stretch;\n}\n.ds-split--form { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }\n.ds-split--settings { grid-template-columns: var(--size-side) minmax(0, 1fr); }\n.ds-split--start { align-items: start; }\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  min-width: 0;\n}\n.ds-stack--fill > :last-child { flex: 1 1 auto; }\n.ds-subhead {\n  margin: var(--space-5) 0 var(--space-2);\n  color: var(--color-heading-alt);\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  text-transform: var(--ui-transform);\n}\n.ds-subhead:first-child { margin-top: 0; }\n\n/* pane: the list half of the split */\n.ds-pane {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-pane__tools {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-pane__field {\n  flex: 1 1 var(--size-search);\n  margin-left: auto;\n}\n.ds-pane__foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-height: calc(var(--size-row) + var(--space-2));\n  margin-top: auto;\n  padding: 0 calc(var(--size-fab) + var(--space-4)) 0 var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-pane__fab {\n  position: absolute;\n  right: var(--space-3);\n  bottom: var(--space-4);\n}\n\n/* sheet: the side sheet and the bottom sheet */\n.ds-sheet {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border-radius: var(--radius-page);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-sheet__head {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--size-bar);\n  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sheet__title {\n  flex: 1 1 0;\n  min-width: 0;\n  margin: 0;\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-sheet__body {\n  flex: 1 1 auto;\n  padding: var(--space-4);\n}\n.ds-sheet__body p { margin: 0 0 var(--space-3); }\n.ds-sheet__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sheet__spacer { flex: 1 1 auto; }\n.ds-sheet--bottom {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.ds-facts {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-3);\n  margin: var(--space-4) 0;\n  padding: var(--space-3) 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-facts__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-facts__value {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  font-weight: var(--weight-bold);\n}\n.ds-checks {\n  display: grid;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-4);\n  padding: 0;\n  list-style: none;\n}\n.ds-checks__done {\n  color: var(--color-text-muted);\n  text-decoration: line-through;\n}\n\n/* typography */\n.ds-prose { max-width: var(--size-measure); }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-3);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-transform: var(--heading-transform);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); line-height: 1.18; }\n.ds-prose h2 { font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); line-height: 1.6; margin-bottom: var(--space-2); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol { margin: 0 0 var(--space-3); padding-left: var(--space-4); }\n.ds-prose li { margin-bottom: var(--space-1); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-strong);\n  font-family: var(--font-mono);\n  font-size: var(--text-ui);\n}\n.ds-prose pre {\n  margin: 0 0 var(--space-3);\n  padding: var(--space-3);\n  overflow: auto;\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-prose pre code { padding: 0; background: transparent; font-size: inherit; }\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n.ds-prose a:hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n\n/* links */\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-5);\n}\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover { color: var(--color-link-hover); text-decoration: var(--link-decoration-hover); }\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--quiet,\n.ds-link--quiet:visited {\n  color: var(--color-link-quiet);\n  font-weight: var(--weight-body);\n  text-decoration: var(--link-decoration-quiet);\n}\n\n/* buttons */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: calc(var(--size-control) + var(--size-control) + var(--space-3));\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-3);\n  border: 0;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  box-shadow: var(--shadow-control);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  box-shadow: var(--shadow-control-hover);\n  color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active { box-shadow: var(--shadow-control-pressed); }\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--flat,\n.ds-button--flat:active,\n.ds-button--flat.is-active {\n  background: transparent;\n  box-shadow: none;\n  color: var(--color-link);\n}\n.ds-button--flat:hover,\n.ds-button--flat.is-hover {\n  background: color-mix(in srgb, var(--color-text-muted) 20%, transparent);\n  box-shadow: none;\n  color: var(--color-link);\n}\n.ds-button--danger {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: color-mix(in srgb, var(--color-danger) 88%, var(--color-shadow));\n  color: var(--color-button-hover-text);\n}\n.ds-button--flat.ds-button--danger,\n.ds-button--flat.ds-button--danger:active,\n.ds-button--flat.ds-button--danger.is-active {\n  background: transparent;\n  color: var(--color-danger);\n}\n.ds-button--flat.ds-button--danger:hover,\n.ds-button--flat.ds-button--danger.is-hover {\n  background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n  color: var(--color-danger);\n}\n.ds-button--fab,\n.ds-button--fab:hover,\n.ds-button--fab.is-hover {\n  width: var(--size-fab);\n  min-width: 0;\n  height: var(--size-fab);\n  padding: 0;\n  border-radius: 50%;\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-button--fab { box-shadow: var(--shadow-control-hover); }\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  cursor: default;\n}\n\n/* form */\n.ds-form {\n  display: grid;\n  gap: var(--space-4);\n}\n.ds-form__field { display: block; }\n.ds-form__label {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: 1.25;\n}\n.ds-form__control {\n  display: block;\n  width: 100%;\n  height: var(--size-control);\n  margin: 0;\n  padding: var(--space-1) calc(var(--radius-control) * 2);\n  border: 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control) var(--radius-control) 0 0;\n  background: var(--fill-input);\n  color: var(--color-input-text);\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:focus,\n.ds-form__control.is-focus {\n  outline: 0;\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-focus);\n  padding-bottom: calc(var(--space-1) - var(--border-width));\n}\n.ds-form__control--area {\n  height: var(--size-area);\n  resize: vertical;\n}\n.ds-form__select {\n  position: relative;\n  display: block;\n}\n.ds-form__select::after {\n  content: \"\";\n  position: absolute;\n  right: var(--space-1);\n  top: calc(var(--size-control) / 2 - var(--border-width-strong));\n  border: var(--size-stripe) var(--border-style) transparent;\n  border-top-color: var(--color-text-muted);\n  border-bottom: 0;\n  border-left-width: calc(var(--size-stripe) + var(--border-width));\n  border-right-width: calc(var(--size-stripe) + var(--border-width));\n  pointer-events: none;\n}\n.ds-form__hint,\n.ds-form__error {\n  display: block;\n  margin-top: var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: 1.25;\n}\n.ds-form__field.is-invalid .ds-form__label,\n.ds-form__error { color: var(--color-danger); }\n.ds-form__field.is-invalid .ds-form__control {\n  border-bottom: var(--border-width-strong) var(--border-style) var(--color-danger);\n  padding-bottom: calc(var(--space-1) - var(--border-width));\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  width: var(--size-check);\n  height: var(--size-check);\n  margin: 0;\n  flex: none;\n  accent-color: var(--color-button);\n}\n.ds-form__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-2);\n}\n\n/* table */\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n  font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n  height: var(--size-row);\n  padding: 0 var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  text-align: left;\n  vertical-align: middle;\n}\n.ds-table th {\n  height: var(--size-row);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-table tbody tr:last-child td { border-bottom: 0; }\n.ds-table tbody tr:hover,\n.ds-table tbody tr.is-hover { background: var(--color-surface-strong); }\n.ds-table tbody tr.is-current { background: var(--color-surface-alt); }\n.ds-table .ds-table__num { text-align: right; font-variant-numeric: tabular-nums; }\n.ds-table__name { font-family: var(--font-mono); font-size: var(--text-small); }\n\n/* badge */\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n.ds-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-badge);\n  height: var(--size-badge);\n  padding: 0 var(--space-2);\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: 1;\n}\n.ds-badge--new { background: var(--color-accent-alt); color: var(--color-button-text); }\n.ds-badge--success { background: var(--color-success); color: var(--color-button-text); }\n.ds-badge--warning { background: var(--color-warning); color: var(--color-accent-text); }\n.ds-badge--danger { background: var(--color-danger); color: var(--color-button-text); }\n.ds-badge--chip {\n  height: var(--space-5);\n  padding: 0 calc(var(--space-2) + var(--space-1));\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  font-weight: var(--weight-body);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n}\n.ds-pagination__link {\n  display: 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-2);\n  border-radius: var(--radius-pill);\n  color: var(--color-text-muted);\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-pagination__link:hover,\n.ds-pagination__link.is-hover { background: color-mix(in srgb, var(--color-text-muted) 20%, transparent); }\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  background: transparent;\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: var(--line-body);\n}\n.ds-breadcrumb__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n  content: \"\";\n  width: calc(var(--space-1) + var(--border-width-strong));\n  height: calc(var(--space-1) + var(--border-width-strong));\n  border-top: var(--border-width) var(--border-style) currentColor;\n  border-right: var(--border-width) var(--border-style) currentColor;\n  transform: rotate(45deg);\n}\n.ds-breadcrumb__link { color: inherit; text-decoration: var(--link-decoration-quiet); }\n.ds-breadcrumb__link:hover { color: var(--color-link-hover); }\n.ds-breadcrumb__item.is-current { color: var(--color-text); }\n\n/* dialog */\n.ds-overlay {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-6) var(--space-4);\n  background: var(--color-overlay);\n}\n.ds-dialog {\n  width: 100%;\n  max-width: var(--size-dialog);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n  margin: 0;\n  padding: var(--space-4) var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: 1.6;\n}\n.ds-dialog__body {\n  padding: var(--space-3) var(--space-4) var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-base);\n}\n.ds-dialog__body p { margin: 0; }\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  padding: var(--space-2);\n}\n\n/* empty */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: var(--space-6) var(--space-4);\n  color: var(--color-text-muted);\n  text-align: center;\n}\n.ds-empty__mark {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-fab);\n  height: var(--size-fab);\n  margin-bottom: var(--space-3);\n  border-radius: 50%;\n  background: var(--color-surface-strong);\n  color: var(--color-disabled-text);\n}\n.ds-empty__title {\n  margin: 0;\n  color: var(--color-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: 1.6;\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n  font-size: var(--text-ui);\n}\n\n/* controls of this layout */\n.ds-button .ds-icon { margin: 0 var(--space-2) 0 calc(var(--space-1) * -1); }\n.ds-button--fab .ds-icon { margin: 0; }\n.ds-button--icon,\n.ds-button--icon:hover,\n.ds-button--icon.is-hover {\n  width: var(--size-row-dense);\n  min-width: 0;\n  height: var(--size-row-dense);\n  padding: 0;\n  border-radius: 50%;\n  background: transparent;\n  box-shadow: none;\n  color: var(--color-text-muted);\n}\n.ds-button--icon .ds-icon { margin: 0; }\n.ds-button--icon:hover,\n.ds-button--icon.is-hover { background: color-mix(in srgb, var(--color-text-muted) 20%, transparent); }\n.ds-hero .ds-button--flat,\n.ds-hero .ds-button--flat:hover,\n.ds-page-header .ds-button--flat,\n.ds-page-header .ds-button--flat:hover { color: var(--color-bar-alt-text); }\n.ds-hero .ds-button--flat:hover,\n.ds-page-header .ds-button--flat:hover { background: color-mix(in srgb, var(--color-bar-alt-text) 16%, transparent); }\n.ds-badge--chip { text-decoration: none; }\n.ds-badge--chip.is-active {\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control-pressed);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-bold);\n}\n.ds-page-header .ds-breadcrumb { color: color-mix(in srgb, var(--color-bar-alt-text) 70%, transparent); }\n.ds-page-header .ds-breadcrumb__link:hover,\n.ds-page-header .ds-breadcrumb__item.is-current { color: var(--color-bar-alt-text); }\n.ds-panel .ds-table {\n  border-radius: 0;\n  background: transparent;\n  box-shadow: none;\n}\n.ds-overlay { border-radius: var(--radius-panel); align-items: center; }\n.ds-form__row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-4);\n}\n\n/* switch */\n.ds-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  flex: none;\n  width: var(--size-switch);\n  height: var(--size-thumb);\n  cursor: pointer;\n}\n.ds-switch__input {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  opacity: 0;\n  cursor: pointer;\n}\n.ds-switch__track {\n  width: 100%;\n  height: var(--size-track);\n  border-radius: var(--radius-pill);\n  background: var(--color-border-strong);\n  transition: var(--transition);\n}\n.ds-switch__track::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: var(--size-thumb);\n  height: var(--size-thumb);\n  border-radius: 50%;\n  background: var(--fill-button-secondary);\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track { background: color-mix(in srgb, var(--color-button) 50%, transparent); }\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n  left: calc(100% - var(--size-thumb));\n  background: var(--fill-button);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track { outline: var(--focus-ring); outline-offset: var(--border-width-strong); }\n.ds-settings {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-settings__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  min-height: calc(var(--size-row) + var(--space-3));\n  padding: var(--space-2) var(--space-4);\n}\n.ds-settings__item + .ds-settings__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-settings__body { flex: 1 1 0; min-width: 0; }\n.ds-settings__title { display: block; color: var(--color-text); font-weight: var(--weight-bold); }\n.ds-settings__text {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel */\n.ds-panel {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--size-row);\n  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n  margin: 0;\n  padding: var(--space-3) var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-bold);\n  line-height: 1.3;\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__head .ds-panel__title { padding: 0; }\n.ds-panel__body {\n  flex: 1 1 auto;\n  padding: var(--space-3) var(--space-4) var(--space-4);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n  line-height: 1.43;\n}\n.ds-panel__body p { margin: 0 0 var(--space-3); }\n.ds-panel__body p:last-child { margin-bottom: 0; }\n.ds-panel__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  padding: var(--space-2);\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__actions--end { justify-content: flex-end; padding: var(--space-3) var(--space-4); }\n.ds-panel--pad .ds-panel__body {\n  padding: var(--space-4);\n  color: var(--color-text);\n  font-size: inherit;\n  line-height: inherit;\n}\n\n/* stats */\n.ds-stats {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stat {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-fill-1);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n}\n.ds-stat--2 { border-top-color: var(--color-fill-2); }\n.ds-stat--3 { border-top-color: var(--color-fill-3); }\n.ds-stat--4 { border-top-color: var(--color-fill-4); }\n.ds-stat__value {\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: 1.25;\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  line-height: var(--line-body);\n}\n\n/* grid: cards of task lists */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--radius-page);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover { box-shadow: var(--shadow-control-hover); }\n.ds-grid__media {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-2);\n  min-height: var(--size-media);\n  padding: var(--space-3);\n  background: var(--color-fill-1);\n  color: var(--color-bar-text);\n}\n.ds-grid__cell--2 .ds-grid__media { background: var(--color-fill-2); color: var(--color-accent-text); }\n.ds-grid__cell--3 .ds-grid__media { background: var(--color-fill-3); color: var(--color-bar-text); }\n.ds-grid__cell--4 .ds-grid__media { background: var(--color-fill-4); color: var(--color-inverse-text); }\n.ds-grid__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}\n.ds-grid__count {\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  white-space: nowrap;\n}\n.ds-grid__text {\n  flex: 1 1 auto;\n  margin: 0;\n  padding: var(--space-3) var(--space-3) var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n  line-height: 1.43;\n}\n.ds-grid__meter {\n  height: var(--size-meter);\n  margin: 0 var(--space-3) var(--space-3);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n}\n.ds-grid__meter-bar {\n  display: block;\n  width: 60%;\n  height: 100%;\n  background: var(--fill-button);\n}\n.ds-grid__meter-bar--low { width: 25%; }\n.ds-grid__meter-bar--high { width: 85%; }\n\n/* list: dense two-line rows */\n.ds-list {\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-3);\n  min-height: calc(var(--size-row) + var(--space-3));\n  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) - var(--size-stripe));\n  border-left: var(--size-stripe) var(--border-style) transparent;\n  transition: var(--transition);\n}\n.ds-list__item + .ds-list__item { border-top: var(--border-width) var(--border-style) var(--color-border-muted); }\n.ds-list__item:hover,\n.ds-list__item.is-hover { background: var(--color-surface-alt); }\n.ds-list__item.is-current {\n  border-left-color: var(--color-link);\n  background: var(--color-surface-alt);\n}\n.ds-list__avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-row-dense);\n  height: var(--size-row-dense);\n  flex: none;\n  border-radius: 50%;\n  background: var(--color-fill-3);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n}\n.ds-list__avatar--alt { background: var(--color-fill-1); }\n.ds-list__avatar--accent { background: var(--color-fill-2); color: var(--color-accent-text); }\n.ds-list__avatar--small {\n  width: var(--size-icon);\n  height: var(--size-icon);\n  font-size: var(--text-small);\n}\n.ds-list__body { flex: 1 1 0; min-width: 0; }\n.ds-list__title {\n  display: block;\n  overflow: hidden;\n  color: var(--color-link-quiet);\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: 1.4;\n  text-decoration: var(--link-decoration-quiet);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-list__title:hover { color: var(--color-link-hover); }\n.ds-list__text {\n  display: block;\n  overflow: hidden;\n  color: var(--color-text-muted);\n  font-size: var(--text-ui);\n  line-height: 1.43;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ds-list__meta {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: var(--space-1);\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  line-height: 1.25;\n}\n.ds-pane .ds-list { padding-bottom: var(--space-4); }\n.ds-list--open .ds-list__title,\n.ds-list--open .ds-list__text { white-space: normal; }\n.ds-list--open .ds-list__item { align-items: flex-start; }\n\n/* sidebar */\n.ds-sidebar {\n  align-self: start;\n  min-width: 0;\n  padding: var(--space-2) 0;\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  box-shadow: var(--shadow-panel);\n  font-family: var(--font-ui);\n}\n.ds-sidebar__title {\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-body);\n  text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__link {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  height: var(--size-row-dense);\n  padding: 0 var(--space-4) 0 calc(var(--space-4) - var(--size-stripe));\n  border-left: var(--size-stripe) var(--border-style) transparent;\n  color: var(--color-link-quiet);\n  font-size: var(--text-ui);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover { background: var(--color-surface-strong); }\n.ds-sidebar__link.is-current {\n  border-left-color: var(--color-link);\n  background: var(--color-surface-alt);\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n}\n\n/* notice */\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-3) var(--space-4);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-notice-text);\n  font-size: var(--text-ui);\n  line-height: 1.43;\n}\n.ds-notice__body { flex: 1 1 0; min-width: 0; }\n.ds-notice__title {\n  display: block;\n  font-size: var(--text-base);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-body);\n}\n.ds-notice--error {\n  border-top: var(--border-width-strong) var(--border-style) var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n\n/* tabs */\n.ds-tabs {\n  display: flex;\n  margin: 0;\n  padding: 0 var(--space-2);\n  list-style: none;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  font-family: var(--font-ui);\n}\n.ds-tabs__tab {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  height: var(--size-row);\n  padding: 0 var(--space-3);\n  margin-bottom: calc(var(--border-width) * -1);\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: var(--color-text-muted);\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,\n.ds-tabs__tab.is-hover { color: var(--color-text); }\n.ds-tabs__tab.is-current {\n  color: var(--color-text);\n  border-bottom-color: var(--color-link);\n}\n\n/* footer */\n.ds-footer {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n  font-size: var(--text-small);\n}\n.ds-footer__list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: color-mix(in srgb, var(--color-inverse-text) 70%, transparent);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover { color: var(--color-inverse-text); }\n.ds-footer__legal {\n  margin: 0 0 0 auto;\n  color: color-mix(in srgb, var(--color-inverse-text) 70%, transparent);\n}\n\n/* views */\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.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#inbox:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#task:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#lists:target) .ds-nav__link[href=\"#lists\"],\n.ds-page:has(#new:target) .ds-nav__link[href=\"#new\"],\n.ds-page:has(#settings:target) .ds-nav__link[href=\"#settings\"] {\n  border-bottom-color: var(--color-bar-text);\n  color: var(--color-bar-text);\n}\n\n@media (max-width: 900px) {\n  .ds-nav__account { display: none; }\n  .ds-split,\n  .ds-split--form,\n  .ds-split--settings { grid-template-columns: minmax(0, 1fr); }\n  .ds-stats,\n  .ds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  .ds-sidebar { align-self: stretch; }\n  .ds-footer__legal { margin-left: 0; }\n}\n@media (max-width: 600px) {\n  .ds-nav {\n    flex-wrap: wrap;\n    gap: 0;\n    height: auto;\n    padding: 0 var(--space-3);\n  }\n  .ds-brand { width: 100%; height: var(--size-row); padding-top: var(--space-2); }\n  .ds-nav__links {\n    height: var(--size-row);\n    margin-left: calc(var(--space-2) * -1);\n    overflow: auto;\n  }\n  .ds-nav__link { padding: 0 var(--space-2); }\n  .ds-hero,\n  .ds-page-header {\n    flex-direction: column;\n    align-items: flex-start;\n    padding: var(--space-3);\n  }\n  .ds-hero__title { font-size: var(--text-h1); }\n  .ds-hero__lead { font-size: var(--text-base); }\n  .ds-main { padding: var(--space-3) var(--space-3) var(--space-5); }\n  .ds-pane__foot { white-space: nowrap; }\n  .ds-stats,\n  .ds-grid { gap: var(--space-3); }\n  .ds-grid { grid-template-columns: minmax(0, 1fr); }\n  .ds-stat { padding: var(--space-3); }\n  .ds-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }\n  .ds-form__row { grid-template-columns: minmax(0, 1fr); }\n  .ds-sheet__head { padding-left: var(--space-3); }\n  .ds-sheet__body { padding: var(--space-3); }\n  .ds-sheet__actions { padding: var(--space-3); }\n  .ds-panel--pad .ds-panel__body { padding: var(--space-3); }\n  .ds-panel__head { padding-left: var(--space-3); }\n  .ds-panel__actions--end { padding: var(--space-3); }\n  .ds-settings__item { padding: var(--space-2) var(--space-3); gap: var(--space-3); }\n  .ds-table th,\n  .ds-table td { padding: 0 var(--space-2); }\n  .ds-table .ds-table__extra { display: none; }\n  .ds-tabs { overflow: auto; }\n  .ds-links { gap: var(--space-3) var(--space-4); }\n  .ds-overlay { padding: var(--space-4) var(--space-3); }\n}\n\n/* the account menu keeps the bar's top right corner on a phone */\n@media (max-width: 600px) {\n  .ds-nav { position: relative; }\n  .ds-nav > .ds-menu--account {\n    position: absolute;\n    top: var(--space-2);\n    right: var(--space-3);\n  }\n  .ds-menu__label { display: none; }\n}\n\n.ds-menu--account { margin-left: var(--space-2); }\n.ds-menu--account .ds-menu__button { padding: 0 var(--space-2) 0 var(--space-1); color: var(--color-bar-text); }\n\n/* phones: the links spread across the bar */\n@media (max-width: 600px) {\n  .ds-nav__links {\n    flex: 1 1 100%;\n    justify-content: space-between;\n    margin-right: calc(var(--space-2) * -1);\n  }\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin tasks</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <a class=\"ds-brand\" data-component=\"brand\" href=\"#\">\n    <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M4 3h8.5v8.5H21V21H4z\"/><path d=\"M14.5 3l6.5 6.5h-6.5z\" fill-opacity=\"0.55\"/></svg></span>\n    <span class=\"ds-brand__name\">chronoskin</span>\n  </a>\n  <ul class=\"ds-nav__links\">\n    <li><a class=\"ds-nav__link\" href=\"#inbox\">Inbox</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#lists\">Lists</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#new\">New task</a></li>\n    <li><a class=\"ds-nav__link\" href=\"#settings\">Settings</a></li>\n  </ul>\n  <details class=\"ds-menu ds-menu--account\" data-component=\"menu\">\n    <summary class=\"ds-menu__button\" aria-label=\"Account\"><span class=\"ds-avatar\" data-component=\"avatar\">A</span><span class=\"ds-menu__label\">Anouk Verhey</span></summary>\n    <ul class=\"ds-menu__list\">\n      <li><a class=\"ds-menu__link\" href=\"#settings\">Settings</a></li>\n      <li><a class=\"ds-menu__link\" href=\"#lists\">Your lists</a></li>\n      <li><a class=\"ds-menu__link\" href=\"#new\">New task</a></li>\n    </ul>\n  </details>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"inbox\">\n\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-hero__body\">\n      <h1 class=\"ds-hero__title\">Five tasks for today</h1>\n      <p class=\"ds-hero__lead\">Two are overdue. The print shop closes at four, so start with the posters.</p>\n    </div>\n    <div class=\"ds-hero__actions\">\n      <a class=\"ds-button ds-button--flat\" href=\"#lists\">See all lists</a>\n      <a class=\"ds-button ds-button--secondary\" href=\"#new\">New task</a>\n    </div>\n  </div>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-split\">\n\n      <section class=\"ds-pane\">\n        <ul class=\"ds-tabs\" data-component=\"tabs\">\n          <li><a class=\"ds-tabs__tab is-current\" href=\"#inbox\">Today <span class=\"ds-badge\">5</span></a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#inbox\">This week</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#inbox\">Mine</a></li>\n          <li><a class=\"ds-tabs__tab\" href=\"#inbox\">Done</a></li>\n        </ul>\n        <div class=\"ds-pane__tools\">\n          <a class=\"ds-badge ds-badge--chip is-active\" href=\"#inbox\">All lists</a>\n          <a class=\"ds-badge ds-badge--chip\" href=\"#inbox\">Open day</a>\n          <a class=\"ds-badge ds-badge--chip\" href=\"#inbox\">Workshop</a>\n          <label class=\"ds-pane__field\">\n            <input class=\"ds-form__control\" type=\"text\" placeholder=\"Find a task\" aria-label=\"Find a task\">\n          </label>\n        </div>\n        <ul class=\"ds-list\" data-component=\"list\">\n          <li class=\"ds-list__item is-current\">\n            <span class=\"ds-list__avatar ds-list__avatar--alt\">J</span>\n            <span class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#task\">Collect the posters from the print shop</a>\n              <span class=\"ds-list__text\">Jonas Abara. Forty copies, paid in advance.</span>\n            </span>\n            <span class=\"ds-list__meta\">Today, 16:00 <span class=\"ds-badge ds-badge--danger\">Overdue</span></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__avatar ds-list__avatar--accent\">A</span>\n            <span class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#task\">Book the hall for the open day</a>\n              <span class=\"ds-list__text\">Anouk Verhey. Ask about the side room too.</span>\n            </span>\n            <span class=\"ds-list__meta\">Today <span class=\"ds-badge ds-badge--warning\">Waiting</span></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__avatar\">S</span>\n            <span class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#task\">Sharpen the plane irons</a>\n              <span class=\"ds-list__text\">Sorin Okonkwo. Both benches, before Thursday class.</span>\n            </span>\n            <span class=\"ds-list__meta\">Today <span class=\"ds-badge ds-badge--success\">Started</span></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__avatar ds-list__avatar--alt\">J</span>\n            <span class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#task\">Order sandpaper and glue</a>\n              <span class=\"ds-list__text\">Jonas Abara. Three grits, two litres.</span>\n            </span>\n            <span class=\"ds-list__meta\">Today</span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__avatar ds-list__avatar--accent\">A</span>\n            <span class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#task\">Write the welcome sheet</a>\n              <span class=\"ds-list__text\">Anouk Verhey. One page, large type.</span>\n            </span>\n            <span class=\"ds-list__meta\">Today <span class=\"ds-badge ds-badge--new\">New</span></span>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__avatar\">L</span>\n            <span class=\"ds-list__body\">\n              <a class=\"ds-list__title\" href=\"#task\">Check the first aid box</a>\n              <span class=\"ds-list__text\">Leila Marchetti. Plasters ran out last month.</span>\n            </span>\n            <span class=\"ds-list__meta\">Tomorrow</span>\n          </li>\n        </ul>\n        <div class=\"ds-pane__foot\">\n          <span>1 to 6 of 14</span>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#inbox\" aria-label=\"Previous\">\n              <svg class=\"ds-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M15 6l-6 6 6 6\" stroke=\"currentColor\" fill=\"none\"/></svg>\n            </a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#inbox\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#inbox\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#inbox\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#inbox\" aria-label=\"Next\">\n              <svg class=\"ds-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 6l6 6-6 6\" stroke=\"currentColor\" fill=\"none\"/></svg>\n            </a></li>\n          </ul>\n        </div>\n        <a class=\"ds-button ds-button--fab ds-pane__fab ds-tooltip ds-tooltip--left\" href=\"#new\" aria-label=\"New task\"><span class=\"ds-tooltip__text\" role=\"tooltip\">New task</span>\n          <svg class=\"ds-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\" stroke=\"currentColor\" fill=\"none\"/></svg>\n        </a>\n      </section>\n\n      <aside class=\"ds-sheet\">\n        <div class=\"ds-sheet__head\">\n          <h2 class=\"ds-sheet__title\">Collect the posters from the print shop</h2>\n          <a class=\"ds-button ds-button--icon\" href=\"#task\" aria-label=\"Open the task\">\n            <svg class=\"ds-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M14 5h5v5M19 5l-8 8M10 7H5v12h12v-5\" stroke=\"currentColor\" fill=\"none\"/></svg>\n          </a>\n          <a class=\"ds-button ds-button--icon\" href=\"#inbox\" aria-label=\"Close\">\n            <svg class=\"ds-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" stroke=\"currentColor\" fill=\"none\"/></svg>\n          </a>\n        </div>\n        <div class=\"ds-sheet__body\">\n          <div class=\"ds-badges\">\n            <span class=\"ds-badge ds-badge--danger\">Overdue</span>\n            <span class=\"ds-badge ds-badge--chip\">Open day</span>\n            <span class=\"ds-badge ds-badge--chip\">Errand</span>\n          </div>\n          <div class=\"ds-facts\">\n            <div><span class=\"ds-facts__label\">Assigned to</span><p class=\"ds-facts__value\"><span class=\"ds-list__avatar ds-list__avatar--small ds-list__avatar--alt\">J</span> Jonas Abara</p></div>\n            <div><span class=\"ds-facts__label\">Due</span><p class=\"ds-facts__value\">Today, 16:00</p></div>\n            <div><span class=\"ds-facts__label\">List</span><p class=\"ds-facts__value\">Open day</p></div>\n          </div>\n          <p>The shop holds the order under the workshop's name. Take the van: the tubes do not fit in a bicycle basket. Leave ten posters at the library on the way back.</p>\n          <p class=\"ds-subhead\">Steps</p>\n          <span class=\"ds-progress\" data-component=\"progress\" role=\"progressbar\" aria-label=\"Two of four steps done\"><span class=\"ds-progress__bar\"></span></span>\n          <ul class=\"ds-checks\">\n            <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span class=\"ds-checks__done\">Confirm the order is ready</span></label></li>\n            <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> <span class=\"ds-checks__done\">Borrow the van key</span></label></li>\n            <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>Collect before four</span></label></li>\n            <li><label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\"> <span>Drop ten at the library</span></label></li>\n          </ul>\n        </div>\n        <div class=\"ds-sheet__actions\">\n          <a class=\"ds-button\" href=\"#inbox\">Mark as done</a>\n          <a class=\"ds-button ds-button--flat\" href=\"#task\">Open</a>\n          <span class=\"ds-sheet__spacer\"></span>\n          <a class=\"ds-button ds-button--flat\" href=\"#new\">Edit</a>\n        </div>\n      </aside>\n\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"task\">\n\n  <header class=\"ds-page-header\" data-component=\"page-header\">\n    <div class=\"ds-page-header__body\">\n      <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#inbox\">Inbox</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#lists\">Open day</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Posters</li>\n      </ol>\n      <h1 class=\"ds-page-header__title\">Collect the posters from the print shop</h1>\n      <p class=\"ds-page-header__text\">Due today at 16:00, assigned to Jonas Abara.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#inbox\">Mark as done</a>\n    </div>\n  </header>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-split ds-split--form\">\n\n      <div class=\"ds-panel ds-panel--pad\">\n        <div class=\"ds-panel__body\">\n          <article class=\"ds-prose\" data-component=\"typography\">\n            <h1>What needs doing</h1>\n            <p>The shop holds the order under the workshop's name. Take the van: the tubes do not fit in a bicycle basket. The reference on the receipt is <code>WS 2291</code>.</p>\n            <h2>On the way back</h2>\n            <p>Leave ten posters at the library desk and ask them to put two in the window. The rest go in the store room, flat, not rolled. The <a href=\"#lists\">open day list</a> has the other errands.</p>\n            <ul>\n              <li>Check the date on every poster before you leave the shop.</li>\n              <li>Keep the receipt for the treasurer.</li>\n              <li>Return the van key to the hook.</li>\n            </ul>\n            <h3>If the shop is shut</h3>\n            <p>Ring the bell at the side door. They work late on weekdays.</p>\n          </article>\n          <p class=\"ds-subhead\">Related</p>\n          <div class=\"ds-links\" data-component=\"links\">\n            <a class=\"ds-link\" href=\"#task\">Book the hall</a>\n            <a class=\"ds-link is-visited\" href=\"#task\">Write the welcome sheet</a>\n            <a class=\"ds-link is-hover\" href=\"#task\">Order sandpaper</a>\n            <a class=\"ds-link is-active\" href=\"#lists\">Open day list</a>\n          </div>\n          <p class=\"ds-subhead\">Labels</p>\n          <div class=\"ds-badges\" data-component=\"badge\">\n            <span class=\"ds-badge\">3</span>\n            <span class=\"ds-badge ds-badge--new\">New</span>\n            <span class=\"ds-badge ds-badge--success\">Started</span>\n            <span class=\"ds-badge ds-badge--warning\">Waiting</span>\n            <span class=\"ds-badge ds-badge--danger\">Overdue</span>\n            <span class=\"ds-badge ds-badge--chip\">Errand</span>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"ds-stack ds-stack--fill\">\n        <div class=\"ds-panel\" data-component=\"panel\">\n          <h3 class=\"ds-panel__title\">Who is on it</h3>\n          <div class=\"ds-panel__body\">\n            <p>Jonas has the van until five. Anouk can take over if the hall booking runs late.</p>\n            <div class=\"ds-accordion\" data-component=\"accordion\">\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__head\">If Jonas is delayed</summary>\n                <p class=\"ds-accordion__body\">Anouk takes the van key from the hook and collects before four.</p>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__head\">Who to ring</summary>\n                <p class=\"ds-accordion__body\">The print shop desk. The number is on the receipt in the office tray.</p>\n              </details>\n              <details class=\"ds-accordion__item\">\n                <summary class=\"ds-accordion__head\">Receipts</summary>\n                <p class=\"ds-accordion__body\">Hand the receipt to the treasurer the same day.</p>\n              </details>\n            </div>\n          </div>\n          <div class=\"ds-panel__actions\">\n            <a class=\"ds-button ds-button--flat\" href=\"#new\">Reassign</a>\n            <a class=\"ds-button ds-button--flat\" href=\"#lists\">Open the list</a>\n          </div>\n        </div>\n        <div class=\"ds-sheet ds-sheet--bottom\">\n          <div class=\"ds-sheet__head\">\n            <h2 class=\"ds-sheet__title\">Notes</h2>\n            <a class=\"ds-button ds-button--flat\" href=\"#new\">Add a note</a>\n          </div>\n          <ul class=\"ds-list ds-list--open\">\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__avatar ds-list__avatar--alt\">J</span>\n              <span class=\"ds-list__body\">\n                <span class=\"ds-list__title\">Jonas Abara</span>\n                <span class=\"ds-list__text\">Shop says ready after two. Going at half past three.</span>\n              </span>\n              <span class=\"ds-list__meta\">11:40</span>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__avatar ds-list__avatar--accent\">A</span>\n              <span class=\"ds-list__body\">\n                <span class=\"ds-list__title\">Anouk Verhey</span>\n                <span class=\"ds-list__text\">Library wants twelve, not ten.</span>\n              </span>\n              <span class=\"ds-list__meta\">09:15</span>\n            </li>\n            <li class=\"ds-list__item\">\n              <span class=\"ds-list__avatar\">S</span>\n              <span class=\"ds-list__body\">\n                <span class=\"ds-list__title\">Sorin Okonkwo</span>\n                <span class=\"ds-list__text\">Van key is on the hook by the lathe.</span>\n              </span>\n              <span class=\"ds-list__meta\">Mon</span>\n            </li>\n          </ul>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"lists\">\n\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__body\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#inbox\">Inbox</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Lists</li>\n      </ol>\n      <h1 class=\"ds-page-header__title\">Lists</h1>\n      <p class=\"ds-page-header__text\">Every task belongs to one list. Four are active this month.</p>\n    </div>\n    <div class=\"ds-page-header__actions\">\n      <a class=\"ds-button ds-button--secondary\" href=\"#new\">New task</a>\n    </div>\n  </header>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-stack\">\n\n      <ul class=\"ds-stats\" data-component=\"stats\">\n        <li class=\"ds-stat\"><span class=\"ds-stat__value\">14</span><span class=\"ds-stat__label\">Open tasks</span></li>\n        <li class=\"ds-stat ds-stat--2\"><span class=\"ds-stat__value\">5</span><span class=\"ds-stat__label\">Due today</span></li>\n        <li class=\"ds-stat ds-stat--3\"><span class=\"ds-stat__value\">2</span><span class=\"ds-stat__label\">Overdue</span></li>\n        <li class=\"ds-stat ds-stat--4\"><span class=\"ds-stat__value\">31</span><span class=\"ds-stat__label\">Done this month</span></li>\n      </ul>\n\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <a class=\"ds-grid__cell\" href=\"#inbox\">\n          <span class=\"ds-grid__media\"><span class=\"ds-grid__title\">Open day</span><span class=\"ds-grid__count\">6 open</span></span>\n          <span class=\"ds-grid__text\">Hall, posters, welcome sheet and the tea urn.</span>\n          <span class=\"ds-grid__meter\"><span class=\"ds-grid__meter-bar\"></span></span>\n        </a>\n        <a class=\"ds-grid__cell ds-grid__cell--2\" href=\"#inbox\">\n          <span class=\"ds-grid__media\"><span class=\"ds-grid__title\">Workshop</span><span class=\"ds-grid__count\">4 open</span></span>\n          <span class=\"ds-grid__text\">Tools, stock and the Thursday evening class.</span>\n          <span class=\"ds-grid__meter\"><span class=\"ds-grid__meter-bar ds-grid__meter-bar--high\"></span></span>\n        </a>\n        <a class=\"ds-grid__cell ds-grid__cell--3\" href=\"#inbox\">\n          <span class=\"ds-grid__media\"><span class=\"ds-grid__title\">Building</span><span class=\"ds-grid__count\">3 open</span></span>\n          <span class=\"ds-grid__text\">Roof gutter, first aid box and the back door lock.</span>\n          <span class=\"ds-grid__meter\"><span class=\"ds-grid__meter-bar ds-grid__meter-bar--low\"></span></span>\n        </a>\n        <a class=\"ds-grid__cell ds-grid__cell--4\" href=\"#inbox\">\n          <span class=\"ds-grid__media\"><span class=\"ds-grid__title\">Accounts</span><span class=\"ds-grid__count\">1 open</span></span>\n          <span class=\"ds-grid__text\">Receipts, the grant report and the year end.</span>\n          <span class=\"ds-grid__meter\"><span class=\"ds-grid__meter-bar ds-grid__meter-bar--high\"></span></span>\n        </a>\n      </div>\n\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\">\n          <h2 class=\"ds-panel__title\">Who has what</h2>\n          <a class=\"ds-button ds-button--flat\" href=\"#settings\">Manage members</a>\n        </div>\n        <table class=\"ds-table\" data-component=\"table\">\n          <thead>\n            <tr><th>Member</th><th class=\"ds-table__extra\">Main list</th><th>Next due</th><th class=\"ds-table__num\">Open</th><th class=\"ds-table__num ds-table__extra\">Overdue</th><th class=\"ds-table__num ds-table__extra\">Done this month</th></tr>\n          </thead>\n          <tbody>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#inbox\">Anouk Verhey</a></td><td class=\"ds-table__extra\">Open day</td><td><span class=\"ds-badge ds-badge--warning\">Today</span></td><td class=\"ds-table__num\">5</td><td class=\"ds-table__num ds-table__extra\">0</td><td class=\"ds-table__num ds-table__extra\">11</td></tr>\n            <tr class=\"is-current\"><td><a class=\"ds-link ds-link--quiet\" href=\"#inbox\">Jonas Abara</a></td><td class=\"ds-table__extra\">Open day</td><td><span class=\"ds-badge ds-badge--danger\">Overdue</span></td><td class=\"ds-table__num\">4</td><td class=\"ds-table__num ds-table__extra\">2</td><td class=\"ds-table__num ds-table__extra\">8</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#inbox\">Sorin Okonkwo</a></td><td class=\"ds-table__extra\">Workshop</td><td><span class=\"ds-badge ds-badge--success\">Thursday</span></td><td class=\"ds-table__num\">3</td><td class=\"ds-table__num ds-table__extra\">0</td><td class=\"ds-table__num ds-table__extra\">9</td></tr>\n            <tr><td><a class=\"ds-link ds-link--quiet\" href=\"#inbox\">Leila Marchetti</a></td><td class=\"ds-table__extra\">Building</td><td><span class=\"ds-badge ds-badge--success\">Tomorrow</span></td><td class=\"ds-table__num\">2</td><td class=\"ds-table__num ds-table__extra\">0</td><td class=\"ds-table__num ds-table__extra\">3</td></tr>\n          </tbody>\n        </table>\n      </div>\n\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"new\">\n\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__body\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#inbox\">Inbox</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#lists\">Workshop</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">New task</li>\n      </ol>\n      <h1 class=\"ds-page-header__title\">New task</h1>\n      <p class=\"ds-page-header__text\">Say what needs doing, who does it and by when.</p>\n    </div>\n  </header>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-split ds-split--form\">\n\n      <div class=\"ds-panel ds-panel--pad\">\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\">\n            <label class=\"ds-form__field\">\n              <span class=\"ds-form__label\">Task</span>\n              <input class=\"ds-form__control\" type=\"text\" value=\"Oil the bench vices\">\n            </label>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__field\">\n                <span class=\"ds-form__label\">List</span>\n                <span class=\"ds-form__select\">\n                  <select class=\"ds-form__control\">\n                    <option>Workshop</option>\n                    <option>Open day</option>\n                    <option>Building</option>\n                    <option>Accounts</option>\n                  </select>\n                </span>\n              </label>\n              <label class=\"ds-form__field is-invalid\">\n                <span class=\"ds-form__label\">Due</span>\n                <input class=\"ds-form__control\" type=\"text\" value=\"31 June\">\n                <span class=\"ds-form__error\">June has 30 days. Pick another date.</span>\n              </label>\n            </div>\n            <label class=\"ds-form__field\">\n              <span class=\"ds-form__label\">Notes</span>\n              <textarea class=\"ds-form__control ds-form__control--area\">All six, front and tail. The oil can is on the shelf above the grinder.</textarea>\n              <span class=\"ds-form__hint\">Plain text. Others on the list can read this.</span>\n            </label>\n            <label class=\"ds-form__check\">\n              <input class=\"ds-form__checkbox\" type=\"checkbox\" checked>\n              <span>Remind me the day before</span>\n            </label>\n          </form>\n        </div>\n        <div class=\"ds-panel__actions ds-panel__actions--end ds-buttons\" data-component=\"buttons\">\n          <button class=\"ds-button ds-button--danger\" type=\"button\">Delete</button>\n          <button class=\"ds-button ds-button--secondary\" type=\"button\">Save as draft</button>\n          <button class=\"ds-button is-disabled\" type=\"button\" disabled>Assign</button>\n          <a class=\"ds-button\" href=\"#inbox\">Add task</a>\n        </div>\n      </div>\n\n      <div class=\"ds-stack ds-stack--fill\">\n        <div class=\"ds-notices\" data-component=\"notice\">\n          <div class=\"ds-notice\">\n            <div class=\"ds-notice__body\">\n              <strong class=\"ds-notice__title\">Sorin is away next week</strong>\n              Tasks you assign to him will wait until the 14th.\n            </div>\n          </div>\n          <div class=\"ds-notice ds-notice--error\">\n            <div class=\"ds-notice__body\">\n              <strong class=\"ds-notice__title\">The task was not saved</strong>\n              The due date is not a real date.\n            </div>\n          </div>\n        </div>\n        <div class=\"ds-overlay\">\n          <div class=\"ds-dialog\" role=\"dialog\" aria-labelledby=\"dialog-title\" data-component=\"dialog\">\n            <h3 class=\"ds-dialog__title\" id=\"dialog-title\">Delete this task?</h3>\n            <div class=\"ds-dialog__body\">\n              <p>Its notes and steps go with it. Others on the list will no longer see it.</p>\n            </div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--flat\" href=\"#new\">Keep it</a>\n              <a class=\"ds-button ds-button--flat ds-button--danger\" href=\"#inbox\">Delete</a>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"settings\">\n\n  <header class=\"ds-page-header\">\n    <div class=\"ds-page-header__body\">\n      <ol class=\"ds-breadcrumb\">\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#inbox\">Inbox</a></li>\n        <li class=\"ds-breadcrumb__item\"><a class=\"ds-breadcrumb__link\" href=\"#settings\">Settings</a></li>\n        <li class=\"ds-breadcrumb__item is-current\">Reminders</li>\n      </ol>\n      <h1 class=\"ds-page-header__title\">Settings</h1>\n      <p class=\"ds-page-header__text\">How and when chronoskin tells you about your tasks.</p>\n    </div>\n  </header>\n\n  <div class=\"ds-main\">\n    <div class=\"ds-split ds-split--settings ds-split--start\">\n\n      <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n        <h2 class=\"ds-sidebar__title\">Settings</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link is-current\" href=\"#settings\">Reminders</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#settings\">Account</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#settings\">Members <span class=\"ds-badge\">4</span></a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#settings\">Calendars</a></li>\n        </ul>\n        <h2 class=\"ds-sidebar__title\">Go to</h2>\n        <ul class=\"ds-sidebar__list\">\n          <li><a class=\"ds-sidebar__link\" href=\"#inbox\">Inbox</a></li>\n          <li><a class=\"ds-sidebar__link\" href=\"#lists\">Lists</a></li>\n        </ul>\n      </nav>\n\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\">\n            <h2 class=\"ds-panel__title\">Reminders</h2>\n          </div>\n          <ul class=\"ds-settings\">\n            <li class=\"ds-settings__item\">\n              <span class=\"ds-settings__body\"><span class=\"ds-settings__title\">Morning summary</span><span class=\"ds-settings__text\">One message at eight with the tasks due that day.</span></span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Morning summary\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n            <li class=\"ds-settings__item\">\n              <span class=\"ds-settings__body\"><span class=\"ds-settings__title\">Day before</span><span class=\"ds-settings__text\">A reminder at six in the evening for tomorrow's tasks.</span></span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" checked aria-label=\"Day before\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n            <li class=\"ds-settings__item\">\n              <span class=\"ds-settings__body\"><span class=\"ds-settings__title\">When someone adds a note</span><span class=\"ds-settings__text\">Only for tasks assigned to you.</span></span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" aria-label=\"When someone adds a note\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n            <li class=\"ds-settings__item\">\n              <span class=\"ds-settings__body\"><span class=\"ds-settings__title\">Quiet at weekends</span><span class=\"ds-settings__text\">Hold everything from Friday evening to Monday morning.</span></span>\n              <label class=\"ds-switch\"><input class=\"ds-switch__input\" type=\"checkbox\" aria-label=\"Quiet at weekends\"><span class=\"ds-switch__track\"></span></label>\n            </li>\n          </ul>\n          <div class=\"ds-panel__actions ds-panel__actions--end\">\n            <a class=\"ds-button ds-button--flat\" href=\"#settings\">Reset</a>\n            <a class=\"ds-button\" href=\"#inbox\">Save</a>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\">\n            <h2 class=\"ds-panel__title\">Calendars</h2>\n          </div>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <span class=\"ds-empty__mark\">\n              <svg class=\"ds-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 6h14v13H5zM5 10h14M9 4v4M15 4v4\" stroke=\"currentColor\" fill=\"none\"/></svg>\n            </span>\n            <h3 class=\"ds-empty__title\">No calendar connected</h3>\n            <p class=\"ds-empty__text\">Connect one and due dates appear beside your appointments.</p>\n            <a class=\"ds-button ds-button--flat\" href=\"#settings\">Connect a calendar</a>\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <ul class=\"ds-footer__list\">\n    <li><a class=\"ds-footer__link\" href=\"#inbox\">Inbox</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#lists\">Lists</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#new\">New task</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#settings\">Settings</a></li>\n  </ul>\n  <p class=\"ds-footer__legal\">chronoskin is a sample task list for a small workshop.</p>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.material-design.app.s06.p04.t03.u04\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"material-design\",\n    \"years\": [\n      2014,\n      2018\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-md-6434\",\n  \"short\": \"v1-md-6434\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #e9e9e9;\n  --color-canvas: #e9e9e9;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f9f9f9;\n  --color-surface-strong: #eeeeee;\n  --color-bar: #1867c0;\n  --color-bar-text: #ffffff;\n  --color-bar-alt: #263238;\n  --color-bar-alt-text: #ffffff;\n  --color-inverse: #212121;\n  --color-inverse-text: #ffffff;\n  --color-text: #333333;\n  --color-text-muted: #747474;\n  --color-heading: #333333;\n  --color-heading-alt: #555555;\n  --color-link: #1867c0;\n  --color-link-quiet: #333333;\n  --color-link-visited: #1867c0;\n  --color-link-hover: #2196f3;\n  --color-link-active: #212121;\n  --color-border: #d8d8d8;\n  --color-border-strong: #999999;\n  --color-border-muted: #eeeeee;\n  --color-accent: #ffb731;\n  --color-accent-text: #333333;\n  --color-accent-alt: #e91e63;\n  --color-fill-1: #1867c0;\n  --color-fill-2: #ff9800;\n  --color-fill-3: #009688;\n  --color-fill-4: #8bc34a;\n  --color-button: #2196f3;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #333333;\n  --color-input: #ffffff;\n  --color-input-text: #333333;\n  --color-input-border: #999999;\n  --color-disabled: #eeeeee;\n  --color-disabled-text: #999999;\n  --color-danger: #f44336;\n  --color-danger-surface: #ffffff;\n  --color-success: #009688;\n  --color-warning: #ff9800;\n  --color-notice: #2196f3;\n  --color-notice-text: #ffffff;\n  --color-focus: #2196f3;\n  --color-shadow: #000000;\n  --color-overlay: rgb(0 0 0 / 0.54);\n}\n\n/* @part type */\n:root {\n  --font-body: Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-heading: Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-ui: Roboto, \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  --font-mono: \"Roboto Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n  --text-base: 13px;\n  --text-small: 12px;\n  --text-ui: 14px;\n  --text-large: 18px;\n  --text-display: 34px;\n  --text-h1: 24px;\n  --text-h2: 20px;\n  --text-h3: 15px;\n  --line-body: 1.85;\n  --line-heading: 1.33;\n  --line-display: 1.18;\n  --weight-body: 400;\n  --weight-bold: 500;\n  --weight-heading: 400;\n  --weight-display: 400;\n  --weight-ui: 500;\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: none;\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: 3px;\n  --radius-panel: 6px;\n  --radius-pill: 12px;\n  --radius-page: 6px;\n  --shadow-panel: 0 1px 4px 0 color-mix(in srgb, var(--color-shadow) 14%, transparent);\n  --shadow-control: 0 12px 20px -10px color-mix(in srgb, var(--color-shadow) 28%, transparent), 0 4px 20px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent), 0 7px 8px -5px color-mix(in srgb, var(--color-shadow) 20%, transparent);\n  --shadow-control-hover: 0 14px 22px -12px color-mix(in srgb, var(--color-shadow) 42%, transparent), 0 4px 22px 0 color-mix(in srgb, var(--color-shadow) 12%, transparent), 0 8px 10px -5px color-mix(in srgb, var(--color-shadow) 20%, transparent);\n  --shadow-control-pressed: 0 2px 5px 0 color-mix(in srgb, var(--color-shadow) 30%, transparent);\n  --shadow-dialog: 0 12px 22px 0 color-mix(in srgb, var(--color-shadow) 34%, transparent);\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: color-mix(in srgb, var(--color-button) 82%, black);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: transparent;\n  --focus-ring: 2px solid color-mix(in srgb, var(--color-focus) 70%, transparent);\n  --transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n  --backdrop-blur: 0px;\n}\n"
  }
}