{
  "id": "v1-w2-7ba2",
  "long_id": "v1.web-2-0-gloss.app.s07.p11.t10.u02",
  "name": "Web 2.0 gloss to-do app",
  "era": {
    "slug": "web-2-0-gloss",
    "code": "w2",
    "name": "Web 2.0 gloss",
    "years": [
      2005,
      2009
    ],
    "description": "The start-up web, 2005 to 2009: glossy gradient bars and buttons, rounded hairline boxes, friendly lower-case wordmarks, big claims in a pale hero, and badges that say new."
  },
  "archetype": "app",
  "mode": "mix",
  "viewport": {
    "width": 1024,
    "fluid": false
  },
  "summary": "The working screen of a small hosted web application in the Web 2.0 look: a thin dark bar with the sections as one segmented control, and under it rounded windows with glassy title bars floating on a coloured page, each holding a pale left pane of lists and a white pane of ticked and unticked rows. It was common from about 2005 to 2009 on to-do lists, calendars, issue trackers and other \"web office\" tools sold to small teams. Everything sits in a window with a drop shadow; gloss is the two-step glass of the title bars, buttons and badges, and type is small Lucida Grande under bold Helvetica headings.",
  "url": "https://chrono.skin/s/v1-w2-7ba2",
  "preview_url": "https://chrono.skin/s/v1-w2-7ba2/specimen.html",
  "files": {
    "STYLE.md": "# Web 2.0 gloss to-do app\n\n## Summary\n\nThe working screen of a small hosted web application in the Web 2.0 look: a thin dark bar with the sections as one segmented control, and under it rounded windows with glassy title bars floating on a coloured page, each holding a pale left pane of lists and a white pane of ticked and unticked rows. It was common from about 2005 to 2009 on to-do lists, calendars, issue trackers and other \"web office\" tools sold to small teams. Everything sits in a window with a drop shadow; gloss is the two-step glass of the title bars, buttons and badges, and type is small Lucida Grande under bold Helvetica headings.\n\n## Layout\n\n- Page width is fixed: `--size-page` = 940px, centred in a 1024px viewport. It does not stretch.\n- The page itself is a coloured desktop (`--fill-page`). Nothing but the one-line footer sits on it directly, and text on the bare page uses `--color-text` only; everything else is inside a window, the hero strip or a panel.\n- Navigation is one bar across the viewport (`.ds-nav`, `--size-nav` 42px, `--fill-inverse`), its content in a centred `--size-page` box (`.ds-nav__inner`): the brand at the left, the sections as a segmented control in the middle (`.ds-nav__tabs`), the account line at the right. There is no second navigation row, no search field and no sidebar outside the windows.\n- `.ds-page__wrap` (940px, transparent) holds the views. Home page, top to bottom: the hero strip (greeting and quick-add field on the left, the day's three figures in a tinted part `--size-figures` 330px wide on the right); the main window `.ds-app` (title bar, then `.ds-app__body`: `.ds-app__pane` of `--size-pane` 200px on the left with the lists and people, `.ds-app__main` of 738px with the tabs, the to-do list and the pagination); then `.ds-page__split`, a row with the week window (five day cells) and one `.ds-panel` of `--size-rail` 240px beside it, equally tall.\n- Spacing scale: `--space-1` 3px (inside badges and tabs, between a title and its meta line), `--space-2` 6px (control padding, gaps between buttons, list row padding, table cell padding), `--space-3` 10px (gaps between grid cells, under the tabs and the toolbar, notice padding), `--space-4` 14px (pane and panel padding, title bar padding, form rows), `--space-5` 20px (hero padding, main pane padding, gap between windows, between pane blocks), `--space-6` 28px (hero side padding, gap above a headed section; the largest gap on the page).\n- Fixed sizes: buttons and inputs `--size-control` 24px tall, the hero field and button `--size-control-large` 34px, a window title bar `--size-bar` 30px, a tick box `--size-check` 15px, a day cell at least `--size-day` 96px, the textarea `--size-textarea` 80px, the dialog `--size-dialog` 400px.\n- Views: the specimen is one example site of five screens, each a `.ds-view` section inside `.ds-page__wrap`, with the bar and the footer written once around them. `home` is Today (hero strip with the figures, the day's window with lists pane, tabs, to-dos and pagination, the week window and a panel). `list` is one list (page header and figures in the window's head, a toolbar, the to-do table with state badges and their key, the confirming dialog). `add` is the form for a new to-do (notices, the form; the lists and a tip in the pane). `calendar` is one week (dated to-dos under day headings, an empty state for a day without any; what is shown and what is coming up in the pane). `help` is a help article (prose and onward links beside the topics). Links are plain `href=\"#name\"`. The segment of the showing view is marked by a `.ds-page:has(#name:target)` rule, Today also when no view is named, Lists also for `add`.\n- Inner pages drop the hero strip, the week window and the panel beside it: an inner page is one window. Inside `.ds-app`, top to bottom: the title bar `.ds-app__bar` (the section name and one or two small links), then `.ds-app__head`, a white strip with a rule under it that holds `.ds-breadcrumb`, `.ds-page-header` in the hero's place (title and one line on the left, at most two buttons on the right) and an optional `.ds-stats--line`; then `.ds-app__body` with the same two panes. The left pane keeps `.ds-sidebar` blocks and at most one flat `.ds-panel`; the main pane starts with the notices above a form, or a `.ds-buttons--bar` toolbar above a table, or the list itself. `.ds-tabs` sit at the top of the main pane directly above the list they switch. Further blocks follow in the main pane as `.ds-section` blocks 28px apart under a ruled `.ds-section__label`; an open dialog is such a section, after the table that opened it. The panes are always equally tall because they share the window.\n- List entries and table rows are rows divided by 1px `--color-border-muted` rules, never cards; windows, the hero strip, panels and day cells are the only boxes.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Two families: `--font-body` is \"Lucida Grande\", Verdana, sans-serif; `--font-heading` and `--font-ui` are \"Trebuchet MS\", Tahoma, sans-serif. `--font-mono` (Monaco) for inline code only.\n- `--text-base` 12px at `--line-body` 1.4; `--text-small` 10px for meta lines, tags and the footer; `--text-ui` 12px bold (`--weight-ui` 700) for buttons, tabs, table text and labels.\n- Headings are bold Trebuchet: `--text-display` 26px (the name in the header, hero title), `--text-h1` 22px, `--text-h2` 16px (list, panel and sidebar titles), `--text-h3` 14px, at `--line-heading` 1.2. `--text-large` 14px for the hero lead and the large button.\n- No tracking and no uppercase: `--heading-tracking`, `--display-tracking` 0; `--heading-transform`, `--ui-transform` none.\n- No link is underlined at rest: `--link-decoration` and `--link-decoration-quiet` are none, `--link-decoration-hover` underline. Links are told apart by their pale colour and, in titles, by weight.\n\n- Olive, cream and rust on a white page. `--color-page`, `--color-canvas` and `--color-surface` are #ffffff; `--color-surface-alt` is the cream #f3f3cc (alternate rows, quoted lines, the empty state) and `--color-surface-strong` a light olive tint #dde7b0 (title strips, tags, inactive tabs).\n- `--color-bar` #666633, a dark olive with cream `--color-bar-text` #ffffcc, fills the site bar, the table head and the dialog title. `--color-bar-alt` is the cream #f3f3cc with `--color-bar-alt-text` #333300. `--color-inverse` #333300 with #ffffcc text is the footer band.\n- Text is a warm near-black: `--color-text` and `--color-heading` #333300, `--color-text-muted` #999999. `--color-heading-alt` #933100, a rust, for panel and sidebar titles and prose h2.\n- `--color-link` #336699, a slate blue; hover turns rust (#933100), visited #666666, active #333300. `--color-link-quiet` #666633 for names, tags and minor tools.\n- `--color-button` #a94400, a burnt orange with white text, is the primary button; `--color-button-secondary` is cream with #333300 text in a `--color-border-strong` #999966 outline. Fields are a very pale blue (`--color-input` #f8fdff) in the same olive outline.\n- `--color-accent` #9eb847, a leaf green with #333300 `--color-accent-text`: count blocks, the pill badge, the current page. `--color-accent-alt` is the rust: the NEW marker only.\n- Block fills: `--color-fill-1` #f3f3cc (hero), `--color-fill-2` #f8fdff, `--color-fill-3` #dde7b0, `--color-fill-4` #ffffcc.\n- Borders: `--color-border` #aaaaaa, `--color-border-strong` #999966, `--color-border-muted` #d6d6ad (the cream, darkened) between rows.\n- Status: `--color-danger` #aa0000 on `--color-danger-surface` #fde8dc, `--color-success` #5c7a1a, `--color-warning` #ffe840, as error text and badge fills only. `--color-notice` #ffffcc with #333300 text. `--color-focus` #336699; `--color-shadow` #333300.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets the page fill, base font and colour. `.ds-page__wrap` (940px) holds the views; `.ds-page__split` is a row of one window and one panel. `.ds-section` with a ruled `.ds-section__label` separates blocks inside a pane (`.ds-section--tight` for 14px). `.ds-view` is one screen of the example site (`.ds-view--home` the one shown first).\n- `.ds-nav`: the bar across the viewport, with `.ds-nav__inner` holding the `.ds-brand`, `.ds-nav__tabs` (each `.ds-nav__item` a `.ds-nav__tab`; first and last are rounded, the current one `is-current` takes the accent gloss) and `.ds-nav__account` with underlined `.ds-nav__tool` links.\n- `.ds-brand`: the site's mark and name at the left end of the bar, linking home; one per page. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, a darker outline, `--radius-control`, `--shadow-control`) with the mark in `--color-button-text`, 1.5 times the size of the name. `.ds-brand__name` is the name in `--font-heading` at `--text-h2`, in `--color-inverse-text` for the bar it sits on. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-app`: a window, the frame of every working screen. `.ds-app__bar` is its glassy title bar with `.ds-app__title` and `.ds-app__tools` of underlined `.ds-app__tool` links; `.ds-app__head` the white strip for breadcrumb, page header and figures on an inner page; `.ds-app__body` the row of `.ds-app__pane` (left, tinted) and `.ds-app__main`.\n- `.ds-hero`: the day's strip on the home page: `.ds-hero__main` with `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__action` (a `.ds-form__input--large` and a `.ds-button--large`) and `.ds-hero__note`; `.ds-hero__figures` on the right holds the `.ds-stats`. One per site, on the home page only.\n- `.ds-page-header`: the head of an inner page, inside `.ds-app__head`: `.ds-page-header__main` with `.ds-page-header__title` and one `.ds-page-header__text` line, `.ds-page-header__actions` on the right. Never together with a hero.\n- `.ds-stat`: one figure; three or four sit in a `.ds-stats` row divided by hairlines (first one `is-first`). `.ds-stat__number` over `.ds-stat__label`, with an optional `.ds-stat__note` holding a badge. In the hero the row is centred and takes the hero's text colour; `.ds-stats--line` is the left-aligned form for a window head.\n- `.ds-prose`: long text: h1, h2, h3, p, ul, ol, code, strong, mark and links are styled. For help pages.\n- `.ds-link`: any link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--title` for titles and rows, `.ds-link--quiet` for minor tools. `.ds-links` lays several out in a row.\n- `.ds-button`: the primary action, green glass with bold white text. Variants `.ds-button--secondary` (pale glass; the usual button), `.ds-button--danger` (red glass, only for what cannot be undone), `.ds-button--large` (the hero action). States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttons` is a row; `.ds-buttons--bar` the toolbar above a table, where `.ds-buttons__gap` pushes the destructive button to the right end.\n- `.ds-form`: labels above their fields. `.ds-form__row` holds a `.ds-form__label` and a `.ds-form__input`, `.ds-form__select` or `.ds-form__textarea`; `.ds-form__row--pair` puts several `.ds-form__field` side by side; `.ds-form__hint` and `.ds-form__error` under a control; `is-error`, `is-focus`, `is-disabled` on the control; `.ds-form__check` with `.ds-form__checkbox`; `.ds-form__actions` under a rule. `.ds-form__input--large` is the hero field.\n- `.ds-table`: one rounded frame, a pale `.ds-table__head` row, `.ds-table__row` (`is-first`, `is-alt`) of `.ds-table__cell` with hairlines between; `is-numeric` right-aligns and bolds. `.ds-table__note` is a line under it.\n- `.ds-list`: to-dos. `.ds-list__group` is a day or state heading (`is-first` on the first). Each `.ds-list__item` has a `.ds-list__check` box (ticked and green when the item `is-done`, its title then struck through), `.ds-list__body` with `.ds-list__title` (a `.ds-link--title`), `.ds-list__meta` and an optional `.ds-list__text`, and `.ds-list__side` at the right for a badge or a time.\n- `.ds-panel`: a small window for a tip or an invitation: `.ds-panel__title`, `.ds-panel__body` with `.ds-panel__text` and `.ds-panel__actions` (`.ds-panel__more` for a small link). `.ds-panel--flat` (no shadow) inside a pane.\n- `.ds-grid`: the week: five `.ds-grid__cell` (`--1` to `--4` for the fills, `is-current` for today), each with `.ds-grid__day`, the date as `.ds-grid__title`, one `.ds-grid__text` line and `.ds-grid__count`. Also for any row of up to five equal summary cells inside a window.\n- `.ds-tabs`: pills in a sunken strip: `.ds-tabs__tab`, the current one `is-current` (white, outlined, bold), `.ds-tabs__count` for a number, `.ds-tabs__more` for one link at the right end. For two to four views of the list directly under it.\n- `.ds-badge`: small bold pill, yellow glass by default (open, a time). `.ds-badge--count` (button colour, a number), `.ds-badge--new` (orange marker), and the states `.ds-badge--success` (done), `.ds-badge--warning` (due) and `.ds-badge--danger` (late). `.ds-badges` is a key of several with words.\n- `.ds-sidebar`: a block in the left pane: a ruled `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` rows (current: `is-current`), each with an optional `.ds-sidebar__dot` (`--2` to `--4` for other colours), a link and a right-aligned `.ds-sidebar__count`; `.ds-sidebar__text` for a line of words. `is-last` on the last block of a pane.\n- `.ds-notice`: one message in a rounded pale box with an accent border and a bold `.ds-notice__title`. Variant `.ds-notice--error`.\n- `.ds-pagination`: pills: `.ds-pagination__link`, `is-current`, `is-disabled`, `.ds-pagination__gap`, and `.ds-pagination__note` for a count at the right.\n- `.ds-breadcrumb`: 11px trail of `.ds-link` items with `.ds-breadcrumb__sep` and a bold `.ds-breadcrumb__current`.\n- `.ds-dialog`: a small window: glassy `.ds-dialog__title` bar holding `.ds-dialog__close`, `.ds-dialog__body` with `.ds-dialog__text`, a tinted `.ds-dialog__actions` strip with the buttons at the right, and `--shadow-dialog`. It sits on `.ds-dialog__backdrop`, a dimmed rounded field.\n- `.ds-empty`: a tinted rounded box with `.ds-empty__title`, `.ds-empty__text` and one secondary button, in place of the rows that are missing.\n- `.ds-footer`: one line on the page under the last window: `.ds-footer__text` on the left, `.ds-footer__links` of underlined `.ds-footer__link` on the right, all in `--color-text`.\n- `.ds-menu`: a drop-down under a segment of the header's tab strip, for the lists a person opens most. The `li.ds-nav__item` also carries `.ds-menu`, its tab gets a `.ds-menu__caret`, and `.ds-menu__list` holds `.ds-menu__item` rows of `.ds-menu__link`; `is-ruled` draws a hairline above the last row, the action. A white rounded hairline box with the dialog's shadow that opens on hover and on keyboard focus (`is-open` shows it statically). One level only.\n- `.ds-tooltip`: a small round question mark (`.ds-tooltip__trigger`, a link to the help page) that shows `.ds-tooltip__tip`, a pale speech bubble in the notice colours, above it on hover or focus. It follows a column heading or a field label and explains it in one sentence; in a right-aligned heading the bubble opens toward the left.\n- `.ds-accordion`: questions that open and close: a hairline box of `details.ds-accordion__item` (first: `is-first`), each a pale glossy `.ds-accordion__title` strip with a plus or minus sign and a `.ds-accordion__body` line. For three or four short questions in the left pane of the help page.\n- `.ds-progress`: how much of the work is done: a `.ds-progress__label` line (the count in `.ds-progress__name`, the share on the right) over `progress.ds-progress__bar`, a pill-shaped track filled with the glossy button fill. Variants of the bar: `.ds-progress__bar--success` (done), `--warning`, `--danger` (late). One in the left pane under the people, or under the head of a list.\n- `.ds-avatar`: the picture of a person: an 18px tile with a head and shoulders drawn in CSS, tinted by `.ds-avatar--1` to `--4`; a person keeps one tint everywhere. It opens a `.ds-sidebar__item` before the name; `.ds-avatar--large` doubles it. Decorative: the name always follows it.\n\n## Never\n\n- `row-gap <= 20px`: rows touch, divided by a rule.\n- `block-gap <= 28px`: sections are at most 28px apart.\n- `content-width <= 940px`: all text stays inside the 940px column.\n- `palette-colours <= 32`: olive in three steps, cream, rust, burnt orange, one slate blue, greys and the status colours.\n- `font-size <= 26px`: the name in the header and the hero title are the largest text.\n- `font-size >= 10px`: meta text is 10px and nothing is smaller.\n- `font-weight <= 700`: bold is the heaviest weight.\n- `font-families <= 3`: Lucida Grande, Trebuchet MS and a monospace for inline code.\n- `line-height <= 1.4`: body text is 12px on 16.8px.\n- `letter-spacing = 0px`: no tracking anywhere.\n- `uppercase-text = 0%`: nothing is uppercased by CSS.\n- `underlined-links <= 5%`: links are not underlined until hovered.\n- `border-radius <= 0px`: every box is square.\n- `border-width <= 2px`: hairlines are 1px, the dialog frame 2px.\n- `box-shadow = none`: nothing casts a shadow.\n- `text-shadow = none`: text is flat on its bar.\n- `gradient-fills <= 3%`: bars, buttons, blocks and panels are flat colour.\n- `transition = none`: states change instantly.\n- `animation = none`: nothing moves.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new screen is a `.ds-app` window: put its name in the title bar, what it is about in `.ds-app__head`, navigation within it in the left pane as `.ds-sidebar` blocks and the work in the main pane. Anything that can be ticked is a `.ds-list__item`; anything with columns of figures is a `.ds-table`; a short invitation is a `.ds-panel`. Never put text other than the footer on the bare page, and on a bar or the hero strip use only that fill's own text token. Keep glass to title bars, buttons and badges, and make any extra shade with `color-mix()` over existing tokens rather than adding a colour.\n",
    "components.css": ":root {\n  --size-page: 940px;\n  --size-pane: 200px;\n  --size-rail: 240px;\n  --size-figures: 330px;\n  --size-nav: 42px;\n  --size-bar: 30px;\n  --size-control: 24px;\n  --size-control-large: 34px;\n  --size-check: 15px;\n  --size-day: 96px;\n  --size-textarea: 80px;\n  --size-dialog: 400px;\n  --space-1: 3px;\n  --space-2: 6px;\n  --space-3: 10px;\n  --space-4: 14px;\n  --space-5: 20px;\n  --space-6: 28px;\n  --size-drop: 180px;\n  --size-tip: 180px;\n  --size-meter: 12px;\n  --size-avatar: 18px;\n}\n\n/* shell: a coloured desktop; everything sits in windows on it */\n.ds-page {\n  margin: 0;\n  padding: 0;\n  background: var(--fill-page);\n  background-color: var(--color-page);\n  min-height: 100vh;\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after { box-sizing: border-box; }\n.ds-page__wrap {\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: var(--space-5) 0 var(--space-3);\n}\n.ds-page__split {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-5);\n  margin: 0 0 var(--space-5);\n}\n.ds-page__split .ds-app {\n  flex: 1 1 0;\n  min-width: 0;\n  margin: 0;\n}\n.ds-page__split .ds-panel {\n  flex: 0 0 var(--size-rail);\n  width: var(--size-rail);\n  margin: 0;\n}\n.ds-section { margin: var(--space-6) 0 0; }\n.ds-section--tight { margin-top: var(--space-4); }\n.ds-section__label {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\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\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n/* nav: a thin dark bar across the viewport, the sections as one segmented control */\n.ds-nav {\n  min-width: var(--size-page);\n  margin: 0;\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse) 60%, var(--color-shadow));\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: center;\n  gap: var(--space-5);\n  width: var(--size-page);\n  height: var(--size-nav);\n  margin: 0 auto;\n}\n.ds-brand {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n  text-decoration: none;\n}\n.ds-brand__mark {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--text-h2) * 1.5);\n  height: calc(var(--text-h2) * 1.5);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 70%, var(--color-shadow));\n  border-radius: var(--radius-control);\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: 74%;\n  height: 74%;\n}\n.ds-brand__name {\n  color: var(--color-inverse-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\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-nav__tabs {\n  display: flex;\n  align-items: center;\n  margin: 0 auto;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__item { margin: 0 0 0 calc(0px - var(--border-width)); }\n.ds-nav__tab {\n  display: block;\n  height: var(--size-control);\n  padding: 0 var(--space-5);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-inverse-text) 45%, transparent);\n  background: color-mix(in srgb, var(--color-inverse-text) 10%, transparent);\n  color: var(--color-inverse-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n  text-decoration: none;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-nav__item:first-child .ds-nav__tab { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }\n.ds-nav__item:last-child .ds-nav__tab { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }\n.ds-nav__tab:hover,\n.ds-nav__tab.is-hover { background: color-mix(in srgb, var(--color-inverse-text) 24%, transparent); }\n.ds-nav__tab.is-current {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__tab[href=\"#home\"] { background: var(--fill-accent); color: var(--color-accent-text); }\n.ds-page:has(#home:target) .ds-nav__tab[href=\"#home\"] { background: var(--fill-accent); color: var(--color-accent-text); }\n.ds-page:has(#list:target) .ds-nav__tab[href=\"#list\"] { background: var(--fill-accent); color: var(--color-accent-text); }\n.ds-page:has(#add:target) .ds-nav__tab[href=\"#list\"] { background: var(--fill-accent); color: var(--color-accent-text); }\n.ds-page:has(#calendar:target) .ds-nav__tab[href=\"#calendar\"] { background: var(--fill-accent); color: var(--color-accent-text); }\n.ds-page:has(#help:target) .ds-nav__tab[href=\"#help\"] { background: var(--fill-accent); color: var(--color-accent-text); }\n.ds-nav__account {\n  flex: 0 0 auto;\n  margin: 0;\n  color: var(--color-inverse-text);\n  font-size: var(--text-small);\n}\n.ds-nav__tool {\n  color: var(--color-inverse-text);\n  text-decoration: underline;\n}\n\n/* window: the frame every working screen sits in */\n.ds-app {\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  background: var(--color-canvas);\n  box-shadow: var(--shadow-panel);\n  overflow: hidden;\n}\n.ds-app__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  min-height: var(--size-bar);\n  padding: var(--space-1) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  text-shadow: var(--shadow-text);\n}\n.ds-app__title {\n  margin: 0;\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-app__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n  margin: 0;\n  font-size: var(--text-small);\n}\n.ds-app__tool {\n  color: var(--color-bar-text);\n  text-decoration: underline;\n}\n.ds-app__head {\n  padding: var(--space-3) var(--space-5) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface);\n}\n.ds-app__body {\n  display: flex;\n  align-items: stretch;\n}\n.ds-app__pane {\n  flex: 0 0 var(--size-pane);\n  width: var(--size-pane);\n  padding: var(--space-4);\n  border-right: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--color-surface-alt);\n}\n.ds-app__main {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: var(--space-4) var(--space-5) var(--space-5);\n  background: var(--color-surface);\n}\n\n/* hero: the day's strip; greeting and quick-add on the left, the day's figures on the right */\n.ds-hero {\n  display: flex;\n  align-items: stretch;\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-page);\n  background: var(--fill-bar-alt);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-bar-alt-text);\n  overflow: hidden;\n}\n.ds-hero__main {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: var(--space-5) var(--space-6);\n}\n.ds-hero__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-bar-alt-text);\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  margin: 0 0 var(--space-4);\n  font-size: var(--text-large);\n  line-height: var(--line-body);\n}\n.ds-hero__action {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-hero__note {\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-small);\n  opacity: 0.75;\n}\n.ds-hero__figures {\n  display: flex;\n  flex: 0 0 var(--size-figures);\n  align-items: center;\n  width: var(--size-figures);\n  padding: var(--space-4) var(--space-3);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 22%, transparent);\n  background: color-mix(in srgb, var(--color-bar-alt-text) 6%, transparent);\n}\n\n/* stats: large numerals divided by hairlines; takes the colour of what it sits on */\n.ds-stats {\n  display: flex;\n  flex: 1 1 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-stats--line { margin-top: var(--space-4); }\n.ds-stat {\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 var(--space-3);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 22%, transparent);\n  text-align: center;\n}\n.ds-stat.is-first { border-left: 0; }\n.ds-stat__number {\n  display: block;\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}\n.ds-stat__label {\n  display: block;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-stat__note {\n  display: inline-block;\n  margin-top: var(--space-1);\n}\n.ds-stats--line .ds-stat {\n  padding: 0 var(--space-4);\n  text-align: left;\n}\n.ds-stats--line .ds-stat.is-first { padding-left: 0; }\n.ds-stats--line .ds-stat__number {\n  color: var(--color-heading);\n  font-size: var(--text-h1);\n}\n.ds-stats--line .ds-stat__label { color: var(--color-text-muted); }\n\n/* page header: head of an inner page, inside the window's head */\n.ds-page-header {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  margin: var(--space-2) 0 0;\n}\n.ds-page-header__main {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n/* grid: the days of the week as cells */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-4);\n  list-style: none;\n}\n.ds-grid__cell {\n  min-height: var(--size-day);\n  padding: var(--space-2) var(--space-3) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n}\n.ds-grid__cell--1 { background: var(--color-fill-1); }\n.ds-grid__cell--2 { background: var(--color-fill-2); }\n.ds-grid__cell--3 { background: var(--color-fill-3); }\n.ds-grid__cell--4 { background: var(--color-fill-4); }\n.ds-grid__cell.is-current {\n  border-color: var(--color-border-strong);\n  border-top: var(--border-width-strong) var(--border-style) var(--color-accent);\n}\n.ds-grid__day {\n  margin: 0;\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-grid__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-display);\n}\n.ds-grid__text {\n  margin: 0;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-grid__count {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* tabs: pills in a sunken strip */\n.ds-tabs {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0 0 var(--space-3);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: calc(var(--radius-pill) + var(--space-1));\n  background: var(--color-surface-strong);\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-1) var(--space-4);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-pill);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n  text-transform: var(--ui-transform);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover { color: var(--color-heading); }\n.ds-tabs__tab.is-current {\n  border-color: var(--color-border-strong);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-control);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-tabs__count {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n.ds-tabs__more {\n  margin-left: auto;\n  padding: 0 var(--space-3);\n  font-size: var(--text-small);\n}\n\n/* typography */\n.ds-prose { margin: 0; }\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: var(--space-5) 0 var(--space-2);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 { margin-top: 0; font-size: var(--text-h1); }\n.ds-prose h2 { color: var(--color-heading-alt); font-size: var(--text-h2); }\n.ds-prose h3 { font-size: var(--text-h3); }\n.ds-prose p { margin: 0 0 var(--space-3); }\n.ds-prose ul,\n.ds-prose ol {\n  margin: 0 0 var(--space-3);\n  padding: 0 0 0 var(--space-5);\n}\n.ds-prose li { margin: 0 0 var(--space-1); }\n.ds-prose strong { font-weight: var(--weight-bold); }\n.ds-prose mark {\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-alt);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a { color: var(--color-link); text-decoration: var(--link-decoration); }\n\n/* links */\n.ds-links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-4);\n  margin: 0;\n}\n.ds-link {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-link:visited,\n.ds-link.is-visited { color: var(--color-link-visited); }\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active { color: var(--color-link-active); }\n.ds-link:focus-visible,\n.ds-link.is-focus { outline: var(--focus-ring); }\n.ds-link--title { text-decoration: var(--link-decoration-quiet); }\n.ds-link--quiet {\n  color: var(--color-link-quiet);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover { color: var(--color-link); }\n\n/* buttons: glass */\n.ds-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0;\n}\n.ds-buttons--bar { margin: 0 0 var(--space-3); }\n.ds-buttons .ds-buttons__gap { margin-left: auto; }\n.ds-button {\n  display: inline-block;\n  height: var(--size-control);\n  margin: 0;\n  padding: 0 var(--space-4);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-button) 72%, var(--color-shadow));\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-bold);\n  line-height: calc(var(--size-control) - var(--border-width) - var(--border-width));\n  text-align: center;\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  transition: var(--transition);\n  cursor: pointer;\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 {\n  background: var(--color-button);\n  box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus { outline: var(--focus-ring); }\n.ds-button--large {\n  height: var(--size-control-large);\n  padding: 0 var(--space-5);\n  font-size: var(--text-large);\n  line-height: calc(var(--size-control-large) - var(--border-width) - var(--border-width));\n}\n.ds-button--secondary {\n  border-color: var(--color-border-strong);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-weight: var(--weight-ui);\n  text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-link-quiet);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--secondary:active,\n.ds-button--secondary.is-active { background: var(--color-button-secondary); }\n.ds-button--danger {\n  border-color: color-mix(in srgb, var(--color-danger) 72%, var(--color-shadow));\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 40%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 14%) 50%, var(--color-danger) 50%, color-mix(in srgb, var(--color-danger), var(--color-surface) 12%) 100%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-danger), var(--color-surface) 50%) 0, color-mix(in srgb, var(--color-danger), var(--color-surface) 24%) 50%, color-mix(in srgb, var(--color-danger), var(--color-surface) 8%) 50%, color-mix(in srgb, var(--color-danger), var(--color-surface) 20%) 100%);\n  color: var(--color-button-text);\n}\n.ds-button--danger:active,\n.ds-button--danger.is-active { background: var(--color-danger); }\n.ds-button:disabled,\n.ds-button.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  box-shadow: none;\n  color: var(--color-disabled-text);\n  text-shadow: none;\n  cursor: default;\n}\n\n/* form: labels above their fields */\n.ds-form { margin: 0; }\n.ds-form__row { margin: 0 0 var(--space-4); }\n.ds-form__row--pair {\n  display: flex;\n  gap: var(--space-4);\n}\n.ds-form__field {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-form__label {\n  display: block;\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  display: block;\n  width: 100%;\n  margin: 0;\n  padding: var(--space-1) var(--space-2);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  background-color: var(--color-input);\n  color: var(--color-input-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select { height: var(--size-control); }\n.ds-form__input--large {\n  flex: 1 1 0;\n  min-width: 0;\n  height: var(--size-control-large);\n  padding: var(--space-1) var(--space-3);\n  font-size: var(--text-large);\n}\n.ds-form__textarea {\n  height: var(--size-textarea);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__input.is-focus,\n.ds-form__select:focus,\n.ds-form__select.is-focus,\n.ds-form__textarea:focus,\n.ds-form__textarea.is-focus {\n  outline: var(--focus-ring);\n  border-color: var(--color-focus);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n  border-color: var(--color-border);\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-form__error {\n  margin: var(--space-1) 0 0;\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  font-size: var(--text-ui);\n}\n.ds-form__checkbox { margin: 0; }\n.ds-form__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: var(--space-4) 0 0;\n  padding: var(--space-3) 0 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n\n/* table: pale head, hairline rows, one rounded frame */\n.ds-table {\n  width: 100%;\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  border-collapse: separate;\n  border-spacing: 0;\n  font-size: var(--text-base);\n  line-height: var(--line-heading);\n}\n.ds-table__head {\n  padding: var(--space-2) var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  text-align: left;\n  text-transform: var(--ui-transform);\n}\n.ds-table__head:first-child { border-top-left-radius: calc(var(--radius-panel) - var(--border-width)); }\n.ds-table__head:last-child { border-top-right-radius: calc(var(--radius-panel) - var(--border-width)); }\n.ds-table__cell {\n  padding: var(--space-2) var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n  vertical-align: middle;\n}\n.ds-table__row.is-first .ds-table__cell { border-top: 0; }\n.ds-table__row.is-alt .ds-table__cell { background: var(--color-surface-alt); }\n.ds-table__head.is-numeric,\n.ds-table__cell.is-numeric { text-align: right; }\n.ds-table__cell.is-numeric { font-weight: var(--weight-bold); }\n.ds-table__note {\n  margin: var(--space-2) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* list: to-dos; a tick box, the thing to do, who and when */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__group {\n  margin: var(--space-3) 0 0;\n  padding: var(--space-1) var(--space-3);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-alt);\n  color: var(--color-heading-alt);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-list__group.is-first { margin-top: 0; }\n.ds-list__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__check {\n  display: block;\n  flex: 0 0 var(--size-check);\n  width: var(--size-check);\n  height: var(--size-check);\n  margin-top: var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--color-input);\n  color: transparent;\n}\n.ds-list__check svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-list__item.is-done .ds-list__check {\n  border-color: var(--color-success);\n  background: var(--color-success);\n  color: var(--color-button-text);\n}\n.ds-list__body {\n  flex: 1 1 0;\n  min-width: 0;\n}\n.ds-list__title {\n  margin: 0;\n  font-size: var(--text-large);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n}\n.ds-list__item.is-done .ds-list__title { opacity: 0.6; }\n.ds-list__item.is-done .ds-link { text-decoration: line-through; }\n.ds-list__meta {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-list__text { margin: var(--space-1) 0 0; }\n.ds-list__side {\n  flex: 0 0 auto;\n  padding-top: var(--space-1);\n  font-size: var(--text-small);\n  text-align: right;\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\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: calc(var(--text-small) + var(--space-2));\n  text-decoration: none;\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n.ds-badge--count {\n  background: var(--color-button);\n  color: var(--color-button-text);\n}\n.ds-badge--new {\n  background: var(--color-accent-alt);\n  color: var(--color-button-text);\n}\n.ds-badge--success {\n  background: var(--color-success);\n  color: var(--color-button-text);\n}\n.ds-badge--warning {\n  background: var(--color-warning);\n  color: var(--color-accent-text);\n}\n.ds-badge--danger {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-badges {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel: a small window of its own, for a tip or an invitation */\n.ds-panel {\n  margin: 0 0 var(--space-5);\n  padding: var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  background-color: var(--color-surface);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel--flat { box-shadow: none; border-color: var(--color-border); }\n.ds-panel__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-heading-alt);\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-panel__body { margin: 0; }\n.ds-panel__text { margin: 0 0 var(--space-3); }\n.ds-panel__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n.ds-panel__more { font-size: var(--text-small); }\n\n/* sidebar block: a ruled title and a list of rows, in the window's left pane */\n.ds-sidebar { margin: 0 0 var(--space-5); }\n.ds-sidebar.is-last { margin-bottom: 0; }\n.ds-sidebar__title {\n  margin: 0 0 var(--space-2);\n  padding: 0 0 var(--space-1);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-heading-alt);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 calc(0px - var(--space-2));\n  padding: var(--space-1) var(--space-2);\n  border-radius: var(--radius-control);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-strong);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__dot {\n  flex: 0 0 var(--space-3);\n  width: var(--space-3);\n  height: var(--space-3);\n  border-radius: 50%;\n  background: var(--color-accent);\n}\n.ds-sidebar__dot--2 { background: var(--color-accent-alt); }\n.ds-sidebar__dot--3 { background: var(--color-success); }\n.ds-sidebar__dot--4 { background: var(--color-button); }\n.ds-sidebar__count {\n  margin-left: auto;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  white-space: nowrap;\n}\n.ds-sidebar__text {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* notice */\n.ds-notice {\n  margin: 0 0 var(--space-3);\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-accent);\n  border-radius: var(--radius-panel);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-notice__title { font-weight: var(--weight-bold); }\n.ds-notice--error {\n  border-color: var(--color-danger);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--space-1);\n  margin: var(--space-4) 0 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-small);\n  line-height: var(--line-heading);\n}\n.ds-pagination__link {\n  display: block;\n  padding: var(--space-1) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface);\n  color: var(--color-link);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover { border-color: var(--color-link); }\n.ds-pagination__link.is-current {\n  border-color: var(--color-button);\n  background: var(--color-button);\n  color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n  border-color: var(--color-border-muted);\n  color: var(--color-disabled-text);\n  font-weight: var(--weight-body);\n}\n.ds-pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted); }\n.ds-pagination__note {\n  margin-left: auto;\n  color: var(--color-text-muted);\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-heading);\n}\n.ds-breadcrumb__sep { color: var(--color-text-muted); }\n.ds-breadcrumb__current { color: var(--color-text); font-weight: var(--weight-bold); }\n\n/* dialog: a small window with its own title bar and a deep shadow */\n.ds-dialog__backdrop {\n  display: flex;\n  justify-content: center;\n  padding: var(--space-6) var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--color-overlay);\n  backdrop-filter: blur(var(--backdrop-blur));\n}\n.ds-dialog {\n  width: var(--size-dialog);\n  max-width: 100%;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  overflow: hidden;\n}\n.ds-dialog__title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  padding: var(--space-2) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar) 65%, var(--color-shadow));\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  text-shadow: var(--shadow-text);\n}\n.ds-dialog__close {\n  color: var(--color-bar-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  text-decoration: underline;\n}\n.ds-dialog__body { padding: var(--space-4); }\n.ds-dialog__text { margin: 0; }\n.ds-dialog__actions {\n  display: flex;\n  justify-content: flex-end;\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-muted);\n  background: var(--color-surface-alt);\n}\n\n/* empty state */\n.ds-empty {\n  margin: 0 0 var(--space-3);\n  padding: var(--space-5) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-alt);\n  text-align: center;\n}\n.ds-empty__title {\n  margin: 0 0 var(--space-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n}\n.ds-empty__text {\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n}\n\n/* footer: one line on the desktop, under the last window */\n.ds-footer {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-5);\n  width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-2) var(--space-6);\n  color: var(--color-text);\n  font-size: var(--text-small);\n}\n.ds-footer__text { margin: 0; }\n.ds-footer__links {\n  display: flex;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: var(--color-text);\n  text-decoration: underline;\n}\n\n/* menu: a drop-down under a navigation item; it opens on hover and on keyboard focus */\n.ds-menu { position: relative; }\n.ds-menu__caret {\n  display: inline-block;\n  width: calc(var(--text-small) * 0.6);\n  height: calc(var(--text-small) * 0.36);\n  background: currentColor;\n  clip-path: polygon(0 0, 100% 0, 50% 100%);\n  margin-left: var(--space-1);\n  font-size: var(--text-small);\n  vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__list {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  width: var(--size-drop);\n  margin: 0;\n  padding: var(--space-1) 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--color-surface);\n  box-shadow: var(--shadow-dialog);\n  list-style: none;\n  text-align: left;\n  text-shadow: none;\n}\n.ds-menu:hover .ds-menu__list,\n.ds-menu:focus-within .ds-menu__list,\n.ds-menu.is-open .ds-menu__list { display: block; }\n.ds-menu__item.is-ruled {\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-menu__link {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  color: var(--color-link);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-link-hover);\n}\n.ds-menu__link:focus-visible,\n.ds-menu__link.is-focus { outline: var(--focus-ring); }\n\n/* accordion: questions that open and close, one glossy strip each */\n.ds-accordion {\n  margin: 0 0 var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface);\n  overflow: hidden;\n}\n.ds-accordion__item { border-top: var(--border-width) var(--border-style) var(--color-border); }\n.ds-accordion__item.is-first { border-top: 0; }\n.ds-accordion__title {\n  display: block;\n  padding: var(--space-2) var(--space-3);\n  background: linear-gradient(to bottom, var(--color-surface-alt) 0, var(--color-surface-strong) 100%);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n  cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker { display: none; }\n.ds-accordion__title::before {\n  content: \"\";\n  display: inline-block;\n  width: calc(var(--text-ui) * 0.7);\n  height: calc(var(--text-ui) * 0.7);\n  margin-right: calc(var(--space-4) - calc(var(--text-ui) * 0.7));\n  background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-ui) * 0.12)) 100% no-repeat;\n  color: var(--color-link-quiet);\n}\n.ds-accordion__item[open] > .ds-accordion__title::before { background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat; }\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover { color: var(--color-link); }\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus { outline: var(--focus-ring); }\n.ds-accordion__body {\n  margin: 0;\n  padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + var(--space-4));\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n}\n\n/* tooltip: a question mark that shows a speech-bubble hint on hover or focus */\n.ds-tooltip {\n  display: inline-block;\n  position: relative;\n  vertical-align: baseline;\n}\n.ds-tooltip__trigger {\n  display: inline-block;\n  width: calc(var(--text-small) * 1.5);\n  height: calc(var(--text-small) * 1.5);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: 50%;\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n  line-height: calc(var(--text-small) * 1.5 - var(--border-width) - var(--border-width));\n  text-align: center;\n  text-decoration: none;\n  text-shadow: none;\n  cursor: help;\n}\n.ds-tooltip__trigger:focus-visible,\n.ds-tooltip__trigger.is-focus { outline: var(--focus-ring); }\n.ds-tooltip__tip {\n  display: none;\n  position: absolute;\n  bottom: calc(100% + var(--space-3));\n  left: calc(0px - var(--space-3));\n  z-index: 30;\n  width: var(--size-tip);\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n  border-radius: var(--radius-control);\n  background: var(--color-notice);\n  box-shadow: var(--shadow-panel);\n  color: var(--color-notice-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-align: left;\n  text-shadow: none;\n  white-space: normal;\n}\n.ds-tooltip__tip::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: calc(var(--space-3) + var(--text-small) * 0.75 - var(--space-2));\n  width: calc(var(--space-2) * 2);\n  height: calc(var(--space-2) * 2);\n  margin-top: calc(0px - var(--space-2));\n  border-right: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 45%, var(--color-notice));\n  background: var(--color-notice);\n  transform: rotate(45deg);\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip { display: block; }\n\n/* progress: a glossy bar in a track, with a line saying what it measures */\n.ds-progress { margin: 0 0 var(--space-3); }\n.ds-progress__label {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-1);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-progress__name { color: var(--color-text); }\n.ds-progress__bar {\n  display: block;\n  width: 100%;\n  height: var(--size-meter);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n  appearance: none;\n}\n.ds-progress__bar::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress__bar::-webkit-progress-value { background: var(--fill-button); }\n.ds-progress__bar::-moz-progress-bar { background: var(--fill-button); }\n.ds-progress__bar--success::-webkit-progress-value { background: var(--color-success); }\n.ds-progress__bar--success::-moz-progress-bar { background: var(--color-success); }\n.ds-progress__bar--warning::-moz-progress-bar { background: var(--color-warning); }\n.ds-progress__bar--danger::-moz-progress-bar { background: var(--color-danger); }\n\n/* avatar: the picture of a member who has not sent one, a head and shoulders on a small tile */\n.ds-avatar {\n  display: inline-block;\n  flex: 0 0 auto;\n  position: relative;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n  vertical-align: middle;\n}\n.ds-avatar::before,\n.ds-avatar::after {\n  content: \"\";\n  position: absolute;\n  border-radius: 50%;\n  background: var(--color-text-muted);\n  opacity: 0.55;\n}\n.ds-avatar::before {\n  top: 16%;\n  left: 32%;\n  width: 36%;\n  height: 36%;\n}\n.ds-avatar::after {\n  top: 58%;\n  left: 12%;\n  width: 76%;\n  height: 76%;\n}\n.ds-avatar--1 { background: var(--color-fill-1); }\n.ds-avatar--2 { background: var(--color-fill-2); }\n.ds-avatar--3 { background: var(--color-fill-3); }\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--large {\n  width: calc(var(--size-avatar) * 2);\n  height: calc(var(--size-avatar) * 2);\n}\n\n/* where the added pieces sit in this layout */\n.ds-nav__item .ds-menu__list { border-radius: var(--radius-panel); }\n.ds-table__head .ds-tooltip { margin-left: var(--space-1); }\n.ds-table__head.is-numeric .ds-tooltip__tip {\n  right: calc(0px - var(--space-3));\n  left: auto;\n}\n.ds-table__head.is-numeric .ds-tooltip__tip::after {\n  right: calc(var(--space-3) + var(--text-small) * 0.75 - var(--space-2));\n  left: auto;\n}\n.ds-app__pane .ds-accordion { margin-bottom: var(--space-5); }\n.ds-sidebar .ds-progress { margin: 0; }\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>chronoskin: Web 2.0 gloss to-do app specimen</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  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#\"><span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M2.5 10.5V8a5 5 0 0 1 5-5h9a5 5 0 0 1 5 5v2.5z\" opacity=\".55\"/><path d=\"M2.5 10.5h19V13a5 5 0 0 1-5 5H12l-4.5 3.8V18a5 5 0 0 1-5-5z\"/></svg></span><span class=\"ds-brand__name\">chronoskin</span></a>\n    <ul class=\"ds-nav__tabs\">\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__tab\" href=\"#home\">Today</a></li>\n      <li class=\"ds-nav__item ds-menu\" data-component=\"menu\"><a class=\"ds-nav__tab\" href=\"#list\">Lists <span class=\"ds-menu__caret\"></span></a>\n        <ul class=\"ds-menu__list\">\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#list\">Office move</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#list\">Spring catalogue</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#list\">Hiring a printer</a></li>\n          <li class=\"ds-menu__item\"><a class=\"ds-menu__link\" href=\"#list\">Kitchen rota</a></li>\n          <li class=\"ds-menu__item is-ruled\"><a class=\"ds-menu__link\" href=\"#add\">Add a to-do</a></li>\n        </ul>\n      </li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__tab\" href=\"#calendar\">Calendar</a></li>\n      <li class=\"ds-nav__item\"><a class=\"ds-nav__tab\" href=\"#help\">Help</a></li>\n    </ul>\n    <p class=\"ds-nav__account\">Ines Varga at Harbour Street studio. <a class=\"ds-nav__tool\" href=\"#help\">Account</a> <a class=\"ds-nav__tool\" href=\"#home\">Sign out</a></p>\n  </div>\n</header>\n\n<div class=\"ds-page__wrap\">\n\n  <section class=\"ds-view ds-view--home\" id=\"home\">\n\n    <div class=\"ds-hero\" data-component=\"hero\">\n      <div class=\"ds-hero__main\">\n        <h1 class=\"ds-hero__title\">Good morning, Ines</h1>\n        <p class=\"ds-hero__lead\">Five things are due today and two are late. Add another before you forget it.</p>\n        <form class=\"ds-hero__action\" action=\"#\">\n          <input class=\"ds-form__input ds-form__input--large is-focus\" type=\"text\" value=\"Ring the movers about the lift\" aria-label=\"A new to-do\">\n          <a class=\"ds-button ds-button--large\" href=\"#add\">Add to-do</a>\n        </form>\n        <p class=\"ds-hero__note\">It goes to your Inbox list. Start the line with a list name and a colon to file it at once.</p>\n      </div>\n      <div class=\"ds-hero__figures\">\n        <ul class=\"ds-stats\" data-component=\"stats\">\n          <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">5</span><span class=\"ds-stat__label\">due today</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">2</span><span class=\"ds-stat__label\">late</span><span class=\"ds-stat__note ds-badge ds-badge--new\">chase</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">14</span><span class=\"ds-stat__label\">done this week</span></li>\n        </ul>\n      </div>\n    </div>\n\n    <div class=\"ds-app\">\n      <div class=\"ds-app__bar\">\n        <h2 class=\"ds-app__title\">Today, Wednesday 7 October</h2>\n        <p class=\"ds-app__tools\"><a class=\"ds-app__tool\" href=\"#calendar\">Open the calendar</a><a class=\"ds-app__tool\" href=\"#help\">Print this day</a></p>\n      </div>\n      <div class=\"ds-app__body\">\n        <aside class=\"ds-app__pane\">\n          <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n            <h2 class=\"ds-sidebar__title\">Lists</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Office move</a><span class=\"ds-sidebar__count\">12 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--2\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Spring catalogue</a><span class=\"ds-sidebar__count\">7 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--3\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Hiring a printer</a><span class=\"ds-sidebar__count\">4 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--4\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Kitchen rota</a><span class=\"ds-sidebar__count\">3 open</span></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#add\">Start a new list</a></li>\n            </ul>\n          </nav>\n          <nav class=\"ds-sidebar\">\n            <h2 class=\"ds-sidebar__title\">People</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--1\" data-component=\"avatar\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Ines Varga</a><span class=\"ds-sidebar__count\">5 to do</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--2\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Tobias Renn</a><span class=\"ds-sidebar__count\">4 to do</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--3\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Marta Olin</a><span class=\"ds-sidebar__count\">3 to do</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--4\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Per Aldous</a><span class=\"ds-sidebar__count\">none</span></li>\n            </ul>\n          </nav>\n          <div class=\"ds-sidebar is-last\">\n            <h2 class=\"ds-sidebar__title\">This week</h2>\n            <div class=\"ds-progress\" data-component=\"progress\">\n              <p class=\"ds-progress__label\"><span class=\"ds-progress__name\">14 of 21 done</span><span>67%</span></p>\n              <progress class=\"ds-progress__bar ds-progress__bar--success\" value=\"14\" max=\"21\">14 of 21</progress>\n            </div>\n          </div>\n        </aside>\n        <div class=\"ds-app__main\">\n          <ul class=\"ds-tabs\" data-component=\"tabs\">\n            <li><a class=\"ds-tabs__tab is-current\" href=\"#home\">Yours <span class=\"ds-tabs__count\">7</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#home\">Everyone <span class=\"ds-tabs__count\">19</span></a></li>\n            <li><a class=\"ds-tabs__tab\" href=\"#home\">Done today <span class=\"ds-tabs__count\">3</span></a></li>\n            <li class=\"ds-tabs__more\"><a class=\"ds-link ds-link--quiet\" href=\"#add\">Add several at once</a></li>\n          </ul>\n          <ul class=\"ds-list\" data-component=\"list\">\n            <li class=\"ds-list__group is-first\">Late</li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Send the floor plan to the landlord</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Ines. Was due Monday.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge ds-badge--danger\">2 days late</span></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Count the boxes we still need</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Ines. Was due yesterday.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge ds-badge--danger\">1 day late</span></div>\n          </li>\n            <li class=\"ds-list__group\">Today</li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Choose the cover paper</a></h3>\n              <p class=\"ds-list__meta\">Spring catalogue, for Ines and Marta. 3 comments.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge ds-badge--warning\">by noon</span></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Book the van for Saturday</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Ines. Tobias added a note.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge\">today</span></div>\n          </li>\n          <li class=\"ds-list__item is-done\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Order new door keys</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Ines.</p>\n            </div>\n            <div class=\"ds-list__side\">done at 9:12</div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Ask two printers for a price</a></h3>\n              <p class=\"ds-list__meta\">Hiring a printer, for Ines. 1 comment.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge\">today</span></div>\n          </li>\n          <li class=\"ds-list__item is-done\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Water the plants</a></h3>\n              <p class=\"ds-list__meta\">Kitchen rota, for Ines.</p>\n            </div>\n            <div class=\"ds-list__side\">done at 8:40</div>\n          </li>\n          </ul>\n          <ul class=\"ds-pagination\" data-component=\"pagination\">\n            <li><a class=\"ds-pagination__link is-disabled\" href=\"#home\">Earlier</a></li>\n            <li><a class=\"ds-pagination__link is-current\" href=\"#home\">1</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#home\">2</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#home\">3</a></li>\n            <li><a class=\"ds-pagination__link\" href=\"#home\">Later</a></li>\n            <li class=\"ds-pagination__note\">7 of 19 to-dos</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"ds-page__split\">\n      <div class=\"ds-app\">\n        <div class=\"ds-app__bar\">\n          <h2 class=\"ds-app__title\">The week ahead</h2>\n          <p class=\"ds-app__tools\"><a class=\"ds-app__tool\" href=\"#calendar\">Whole month</a></p>\n        </div>\n        <ul class=\"ds-grid\" data-component=\"grid\">\n          <li class=\"ds-grid__cell ds-grid__cell--1 is-current\"><p class=\"ds-grid__day\">Wed, today</p><h3 class=\"ds-grid__title\">7</h3><p class=\"ds-grid__text\">Cover paper by noon</p><p class=\"ds-grid__count\">5 to-dos</p></li>\n          <li class=\"ds-grid__cell ds-grid__cell--2\"><p class=\"ds-grid__day\">Thu</p><h3 class=\"ds-grid__title\">8</h3><p class=\"ds-grid__text\">Printer visits at 10</p><p class=\"ds-grid__count\">3 to-dos</p></li>\n          <li class=\"ds-grid__cell ds-grid__cell--3\"><p class=\"ds-grid__day\">Fri</p><h3 class=\"ds-grid__title\">9</h3><p class=\"ds-grid__text\">Nothing planned</p><p class=\"ds-grid__count\">0 to-dos</p></li>\n          <li class=\"ds-grid__cell ds-grid__cell--4\"><p class=\"ds-grid__day\">Sat</p><h3 class=\"ds-grid__title\">10</h3><p class=\"ds-grid__text\">Moving day</p><p class=\"ds-grid__count\">6 to-dos</p></li>\n          <li class=\"ds-grid__cell\"><p class=\"ds-grid__day\">Mon</p><h3 class=\"ds-grid__title\">12</h3><p class=\"ds-grid__text\">First day upstairs</p><p class=\"ds-grid__count\">2 to-dos</p></li>\n        </ul>\n      </div>\n      <section class=\"ds-panel\" data-component=\"panel\">\n        <h2 class=\"ds-panel__title\">Send it by mail</h2>\n        <div class=\"ds-panel__body\">\n          <p class=\"ds-panel__text\">Forward a message to your chronoskin address and it lands in the Inbox list as a to-do, subject first.</p>\n          <p class=\"ds-panel__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#help\">Show my address</a><a class=\"ds-link ds-panel__more\" href=\"#help\">How it works</a></p>\n        </div>\n      </section>\n    </div>\n\n  </section>\n\n  <section class=\"ds-view\" id=\"list\">\n    <div class=\"ds-app\">\n      <div class=\"ds-app__bar\">\n        <h2 class=\"ds-app__title\">Lists</h2>\n        <p class=\"ds-app__tools\"><a class=\"ds-app__tool\" href=\"#help\">Feed of this list</a><a class=\"ds-app__tool\" href=\"#help\">Print</a></p>\n      </div>\n      <div class=\"ds-app__head\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-link\" href=\"#home\">Harbour Street studio</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li><a class=\"ds-link\" href=\"#list\">Lists</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li class=\"ds-breadcrumb__current\">Office move</li>\n        </ol>\n        <div class=\"ds-page-header\" data-component=\"page-header\">\n          <div class=\"ds-page-header__main\">\n            <h1 class=\"ds-page-header__title\">Office move</h1>\n            <p class=\"ds-page-header__text\">Everything between here and the first day upstairs. Shared with four people.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button\" href=\"#add\">Add a to-do</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#help\">Share</a>\n          </div>\n        </div>\n        <ul class=\"ds-stats ds-stats--line\">\n          <li class=\"ds-stat is-first\"><span class=\"ds-stat__number\">12</span><span class=\"ds-stat__label\">open</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">2</span><span class=\"ds-stat__label\">late</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">9</span><span class=\"ds-stat__label\">done</span></li>\n          <li class=\"ds-stat\"><span class=\"ds-stat__number\">31.5</span><span class=\"ds-stat__label\">hours logged</span></li>\n        </ul>\n      </div>\n      <div class=\"ds-app__body\">\n        <aside class=\"ds-app__pane\">\n          <nav class=\"ds-sidebar\">\n            <h2 class=\"ds-sidebar__title\">Lists</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item is-current\"><span class=\"ds-sidebar__dot\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Office move</a><span class=\"ds-sidebar__count\">12 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--2\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Spring catalogue</a><span class=\"ds-sidebar__count\">7 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--3\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Hiring a printer</a><span class=\"ds-sidebar__count\">4 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--4\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Kitchen rota</a><span class=\"ds-sidebar__count\">3 open</span></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#add\">Start a new list</a></li>\n            </ul>\n          </nav>\n          <nav class=\"ds-sidebar is-last\">\n            <h2 class=\"ds-sidebar__title\">People</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--1\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Ines Varga</a><span class=\"ds-sidebar__count\">5 to do</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--2\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Tobias Renn</a><span class=\"ds-sidebar__count\">4 to do</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--3\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Marta Olin</a><span class=\"ds-sidebar__count\">3 to do</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-avatar ds-avatar--4\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Per Aldous</a><span class=\"ds-sidebar__count\">none</span></li>\n            </ul>\n          </nav>\n        </aside>\n        <div class=\"ds-app__main\">\n          <div class=\"ds-buttons ds-buttons--bar\" data-component=\"buttons\">\n            <a class=\"ds-button\" href=\"#add\">Add a to-do</a>\n            <button class=\"ds-button ds-button--secondary\" type=\"button\">Reorder</button>\n            <button class=\"ds-button is-disabled\" type=\"button\" disabled>Archive the done</button>\n            <button class=\"ds-button ds-button--danger ds-buttons__gap\" type=\"button\">Delete this list</button>\n          </div>\n          <table class=\"ds-table\" data-component=\"table\">\n            <thead>\n              <tr>\n                <th class=\"ds-table__head\">To-do</th>\n                <th class=\"ds-table__head\">Who</th>\n                <th class=\"ds-table__head\">Due</th>\n                <th class=\"ds-table__head is-numeric\">Hours <span class=\"ds-tooltip\" data-component=\"tooltip\"><a class=\"ds-tooltip__trigger\" href=\"#help\" aria-describedby=\"tip-hours\">?</a><span class=\"ds-tooltip__tip\" id=\"tip-hours\" role=\"tooltip\">What the person wrote down when ticking it, in hours.</span></span></th>\n                <th class=\"ds-table__head\">State</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr class=\"ds-table__row is-first\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Send the floor plan to the landlord</a></td><td class=\"ds-table__cell\">Ines</td><td class=\"ds-table__cell\">Mon 5 Oct</td><td class=\"ds-table__cell is-numeric\">1.5</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">late</span></td></tr>\n              <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Count the boxes we still need</a></td><td class=\"ds-table__cell\">Ines</td><td class=\"ds-table__cell\">Tue 6 Oct</td><td class=\"ds-table__cell is-numeric\">0.5</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--danger\">late</span></td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Book the van for Saturday</a></td><td class=\"ds-table__cell\">Ines</td><td class=\"ds-table__cell\">Wed 7 Oct</td><td class=\"ds-table__cell is-numeric\">1.0</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--warning\">due today</span></td></tr>\n              <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Label the shelves by room</a></td><td class=\"ds-table__cell\">Tobias</td><td class=\"ds-table__cell\">Fri 9 Oct</td><td class=\"ds-table__cell is-numeric\">4.0</td><td class=\"ds-table__cell\"><span class=\"ds-badge\">open</span></td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Move the telephone line</a></td><td class=\"ds-table__cell\">Marta</td><td class=\"ds-table__cell\">Fri 9 Oct</td><td class=\"ds-table__cell is-numeric\">2.5</td><td class=\"ds-table__cell\"><span class=\"ds-badge\">open</span></td></tr>\n              <tr class=\"ds-table__row is-alt\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Order new door keys</a></td><td class=\"ds-table__cell\">Ines</td><td class=\"ds-table__cell\">Wed 7 Oct</td><td class=\"ds-table__cell is-numeric\">0.5</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">done</span></td></tr>\n              <tr class=\"ds-table__row\"><td class=\"ds-table__cell\"><a class=\"ds-link ds-link--title\" href=\"#add\">Tell the post office</a></td><td class=\"ds-table__cell\">Per</td><td class=\"ds-table__cell\">Thu 1 Oct</td><td class=\"ds-table__cell is-numeric\">1.0</td><td class=\"ds-table__cell\"><span class=\"ds-badge ds-badge--success\">done</span></td></tr>\n            </tbody>\n          </table>\n          <p class=\"ds-badges\" data-component=\"badge\">\n            <span><span class=\"ds-badge\">open</span> nobody has ticked it</span>\n            <span><span class=\"ds-badge ds-badge--warning\">due today</span> or tomorrow</span>\n            <span><span class=\"ds-badge ds-badge--danger\">late</span> past its day</span>\n            <span><span class=\"ds-badge ds-badge--success\">done</span> ticked</span>\n            <span><span class=\"ds-badge ds-badge--count\">3</span> comments</span>\n          </p>\n\n          <section class=\"ds-section\">\n            <h2 class=\"ds-section__label\">You asked to delete this list</h2>\n            <div class=\"ds-dialog__backdrop\">\n              <div class=\"ds-dialog\" data-component=\"dialog\" role=\"dialog\" aria-labelledby=\"dlg-title\">\n                <h2 class=\"ds-dialog__title\" id=\"dlg-title\">Delete Office move? <a class=\"ds-dialog__close\" href=\"#list\">close</a></h2>\n                <div class=\"ds-dialog__body\">\n                  <p class=\"ds-dialog__text\">Its 21 to-dos, their comments and the 31.5 logged hours go with it, for all four people. This cannot be undone.</p>\n                </div>\n                <div class=\"ds-dialog__actions\">\n                  <button class=\"ds-button ds-button--danger\" type=\"button\">Delete the list</button>\n                  <a class=\"ds-button ds-button--secondary\" href=\"#list\">Keep it</a>\n                </div>\n              </div>\n            </div>\n          </section>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"add\">\n    <div class=\"ds-app\">\n      <div class=\"ds-app__bar\">\n        <h2 class=\"ds-app__title\">Lists</h2>\n        <p class=\"ds-app__tools\"><a class=\"ds-app__tool\" href=\"#help\">Add by mail instead</a></p>\n      </div>\n      <div class=\"ds-app__head\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-link\" href=\"#home\">Harbour Street studio</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li><a class=\"ds-link\" href=\"#list\">Office move</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li class=\"ds-breadcrumb__current\">Add a to-do</li>\n        </ol>\n        <div class=\"ds-page-header\">\n          <div class=\"ds-page-header__main\">\n            <h1 class=\"ds-page-header__title\">Add a to-do</h1>\n            <p class=\"ds-page-header__text\">One thing, one person, one day. The rest is optional.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#list\">Back to the list</a>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-app__body\">\n        <aside class=\"ds-app__pane\">\n          <nav class=\"ds-sidebar\">\n            <h2 class=\"ds-sidebar__title\">Lists</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item is-current\"><span class=\"ds-sidebar__dot\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Office move</a><span class=\"ds-sidebar__count\">12 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--2\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Spring catalogue</a><span class=\"ds-sidebar__count\">7 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--3\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Hiring a printer</a><span class=\"ds-sidebar__count\">4 open</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--4\"></span><a class=\"ds-link ds-link--title\" href=\"#list\">Kitchen rota</a><span class=\"ds-sidebar__count\">3 open</span></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--quiet\" href=\"#add\">Start a new list</a></li>\n            </ul>\n          </nav>\n          <section class=\"ds-panel ds-panel--flat\">\n            <h2 class=\"ds-panel__title\">Quicker</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Type in the box on the Today page and press return. It files the line in your Inbox.</p>\n              <p class=\"ds-panel__actions\"><a class=\"ds-link\" href=\"#home\">Go to Today</a></p>\n            </div>\n          </section>\n        </aside>\n        <div class=\"ds-app__main\">\n          <div data-component=\"notice\">\n            <p class=\"ds-notice\"><span class=\"ds-notice__title\">Saved as a draft.</span> Nothing is added to the list until the form below goes through.</p>\n            <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">One field needs another look.</span> The day you gave has already passed.</p>\n          </div>\n          <form class=\"ds-form\" data-component=\"form\" action=\"#\">\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-what\">What needs doing</label>\n              <input class=\"ds-form__input\" id=\"f-what\" type=\"text\" value=\"Ring the movers about the lift\">\n            </div>\n            <div class=\"ds-form__row ds-form__row--pair\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-list\">List</label>\n                <select class=\"ds-form__select\" id=\"f-list\"><option>Office move</option><option>Spring catalogue</option><option>Hiring a printer</option><option>Kitchen rota</option></select>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-who\">Who</label>\n                <select class=\"ds-form__select\" id=\"f-who\"><option>Ines Varga</option><option>Tobias Renn</option><option>Marta Olin</option><option>Per Aldous</option></select>\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"f-due\">Due</label>\n                <input class=\"ds-form__input is-error\" id=\"f-due\" type=\"text\" value=\"5 October\">\n                <p class=\"ds-form__error\">That day has passed. Try 8 October or later.</p>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__label\" for=\"f-note\">Notes</label>\n              <textarea class=\"ds-form__textarea\" id=\"f-note\">The lift is booked from 9 to 11. Ask whether the long table fits or goes by the stairs.</textarea>\n              <p class=\"ds-form__hint\">Plain text. Everyone on the list can read it.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> Send me a message when it is ticked</label>\n            </div>\n            <div class=\"ds-form__actions\">\n              <button class=\"ds-button\" type=\"button\">Add to the list</button>\n              <a class=\"ds-button ds-button--secondary\" href=\"#list\">Cancel</a>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"calendar\">\n    <div class=\"ds-app\">\n      <div class=\"ds-app__bar\">\n        <h2 class=\"ds-app__title\">Calendar</h2>\n        <p class=\"ds-app__tools\"><a class=\"ds-app__tool\" href=\"#calendar\">Last week</a><a class=\"ds-app__tool\" href=\"#calendar\">Next week</a></p>\n      </div>\n      <div class=\"ds-app__head\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-link\" href=\"#home\">Harbour Street studio</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li><a class=\"ds-link\" href=\"#calendar\">Calendar</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li class=\"ds-breadcrumb__current\">Week of 5 October</li>\n        </ol>\n        <div class=\"ds-page-header\">\n          <div class=\"ds-page-header__main\">\n            <h1 class=\"ds-page-header__title\">Week of 5 October</h1>\n            <p class=\"ds-page-header__text\">To-dos with a day, from every list you can see.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button\" href=\"#add\">Add a to-do</a>\n            <a class=\"ds-button ds-button--secondary\" href=\"#help\">Subscribe</a>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-app__body\">\n        <aside class=\"ds-app__pane\">\n          <nav class=\"ds-sidebar\">\n            <h2 class=\"ds-sidebar__title\">Show</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item is-current\"><span class=\"ds-sidebar__dot\"></span><a class=\"ds-link ds-link--title\" href=\"#calendar\">Office move</a><span class=\"ds-sidebar__count\">9</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--2\"></span><a class=\"ds-link ds-link--title\" href=\"#calendar\">Spring catalogue</a><span class=\"ds-sidebar__count\">4</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--3\"></span><a class=\"ds-link ds-link--title\" href=\"#calendar\">Hiring a printer</a><span class=\"ds-sidebar__count\">2</span></li>\n              <li class=\"ds-sidebar__item\"><span class=\"ds-sidebar__dot ds-sidebar__dot--4\"></span><a class=\"ds-link ds-link--title\" href=\"#calendar\">Kitchen rota</a><span class=\"ds-sidebar__count\">1</span></li>\n            </ul>\n          </nav>\n          <nav class=\"ds-sidebar is-last\">\n            <h2 class=\"ds-sidebar__title\">Coming up</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#list\">Moving day</a><span class=\"ds-sidebar__count\">Sat 10</span></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#list\">Catalogue to print</a><span class=\"ds-sidebar__count\">Tue 20</span></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#list\">Old lease ends</a><span class=\"ds-sidebar__count\">Sat 31</span></li>\n            </ul>\n          </nav>\n        </aside>\n        <div class=\"ds-app__main\">\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__group is-first\">Thursday 8 October</li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Two printers visit at 10</a></h3>\n              <p class=\"ds-list__meta\">Hiring a printer, for Ines and Per.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge\">10:00</span></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Proofs back to the binder</a></h3>\n              <p class=\"ds-list__meta\">Spring catalogue, for Marta.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge ds-badge--warning\">by 4</span></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Pack the reference shelf</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Tobias.</p>\n            </div>\n            <div class=\"ds-list__side\">all day</div>\n          </li>\n            <li class=\"ds-list__group\">Friday 9 October</li>\n          </ul>\n          <div class=\"ds-empty\" data-component=\"empty\">\n            <h2 class=\"ds-empty__title\">Nothing has a day on Friday</h2>\n            <p class=\"ds-empty__text\">Four to-dos on Office move have no day yet. Give one of them Friday, or enjoy it.</p>\n            <a class=\"ds-button ds-button--secondary\" href=\"#list\">See the four</a>\n          </div>\n          <ul class=\"ds-list\">\n            <li class=\"ds-list__group is-first\">Saturday 10 October</li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Van at the door at 8</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Ines.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge\">8:00</span></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Lift booked from 9 to 11</a></h3>\n              <p class=\"ds-list__meta\">Office move, for everyone.</p>\n            </div>\n            <div class=\"ds-list__side\"><span class=\"ds-badge\">9:00</span></div>\n          </li>\n          <li class=\"ds-list__item\">\n            <span class=\"ds-list__check\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M3 7.5l2.8 2.8L11 4.5\"/></svg></span>\n            <div class=\"ds-list__body\">\n              <h3 class=\"ds-list__title\"><a class=\"ds-link ds-link--title\" href=\"#list\">Hand back the old keys</a></h3>\n              <p class=\"ds-list__meta\">Office move, for Per.</p>\n            </div>\n            <div class=\"ds-list__side\">by evening</div>\n          </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </section>\n\n  <section class=\"ds-view\" id=\"help\">\n    <div class=\"ds-app\">\n      <div class=\"ds-app__bar\">\n        <h2 class=\"ds-app__title\">Help</h2>\n        <p class=\"ds-app__tools\"><a class=\"ds-app__tool\" href=\"#help\">Write to us</a></p>\n      </div>\n      <div class=\"ds-app__head\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-link\" href=\"#home\">Harbour Street studio</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li><a class=\"ds-link\" href=\"#help\">Help</a></li>\n          <li class=\"ds-breadcrumb__sep\">&rsaquo;</li>\n          <li class=\"ds-breadcrumb__current\">Lists and to-dos</li>\n        </ol>\n        <div class=\"ds-page-header\">\n          <div class=\"ds-page-header__main\">\n            <p class=\"ds-page-header__title\">Help</p>\n            <p class=\"ds-page-header__text\">Short answers, written by the people who make chronoskin.</p>\n          </div>\n          <div class=\"ds-page-header__actions\">\n            <a class=\"ds-button ds-button--secondary\" href=\"#home\">Back to Today</a>\n          </div>\n        </div>\n      </div>\n      <div class=\"ds-app__body\">\n        <aside class=\"ds-app__pane\">\n          <nav class=\"ds-sidebar\">\n            <h2 class=\"ds-sidebar__title\">Topics</h2>\n            <ul class=\"ds-sidebar__list\">\n              <li class=\"ds-sidebar__item is-current\"><a class=\"ds-link ds-link--title\" href=\"#help\">Lists and to-dos</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Adding by mail</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">The calendar feed</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Sharing a list</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Logging hours</a></li>\n              <li class=\"ds-sidebar__item\"><a class=\"ds-link ds-link--title\" href=\"#help\">Your account</a></li>\n            </ul>\n          </nav>\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n            <details class=\"ds-accordion__item is-first\" open>\n              <summary class=\"ds-accordion__title\">Can a to-do have two owners?</summary>\n              <p class=\"ds-accordion__body\">No. One name, so that somebody ticks it.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__title\">Where do ticked ones go?</summary>\n              <p class=\"ds-accordion__body\">To the foot of the list, struck through, for a week.</p>\n            </details>\n            <details class=\"ds-accordion__item\">\n              <summary class=\"ds-accordion__title\">Can I undo a delete?</summary>\n              <p class=\"ds-accordion__body\">A to-do, for a day. A whole list, never.</p>\n            </details>\n          </div>\n          <section class=\"ds-panel ds-panel--flat\">\n            <h2 class=\"ds-panel__title\">Still stuck?</h2>\n            <div class=\"ds-panel__body\">\n              <p class=\"ds-panel__text\">Write to us. A person answers, usually the same day.</p>\n              <p class=\"ds-panel__actions\"><a class=\"ds-button ds-button--secondary\" href=\"#help\">Write to us</a></p>\n            </div>\n          </section>\n        </aside>\n        <div class=\"ds-app__main\">\n          <div class=\"ds-prose\" data-component=\"typography\">\n            <h1>Lists and to-dos</h1>\n            <p>A list is a heading with to-dos under it. A to-do is one line that somebody can tick. That is the whole idea, and the rest of chronoskin is there to keep those lines <strong>short, owned and dated</strong>.</p>\n            <h2>Writing a good to-do</h2>\n            <p>Start with a verb and name one thing. <mark>If it needs the word \"and\", it is two to-dos.</mark> Give it to one person; a to-do for everyone is a to-do for nobody.</p>\n            <ul>\n              <li>A day is optional, but only dated to-dos show on the calendar.</li>\n              <li>Notes are for what the next person needs to know, not for the history.</li>\n              <li>Hours are logged when you tick, or later from the list.</li>\n            </ul>\n            <h3>Filing from the quick box</h3>\n            <p>The box on the Today page files into your Inbox. Begin the line with a list name and a colon, as in <code>Office move: ring the movers</code>, and it goes straight to that list. Add <code>!fri</code> at the end to give it Friday.</p>\n            <h2>When a list is finished</h2>\n            <ol>\n              <li>Tick or delete what is left.</li>\n              <li>Choose Archive the done. The list leaves the left pane.</li>\n              <li>Find it again under Lists, in the archive, for as long as you keep the account.</li>\n            </ol>\n          </div>\n          <section class=\"ds-section\">\n            <h2 class=\"ds-section__label\">Read next</h2>\n            <p class=\"ds-links\" data-component=\"links\">\n              <a class=\"ds-link\" href=\"#help\">Adding by mail</a>\n              <a class=\"ds-link is-visited\" href=\"#help\">Sharing a list</a>\n              <a class=\"ds-link is-hover\" href=\"#calendar\">The calendar feed</a>\n              <a class=\"ds-link is-active\" href=\"#list\">Back to Office move</a>\n            </p>\n          </section>\n        </div>\n      </div>\n    </div>\n  </section>\n\n</div>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <p class=\"ds-footer__text\">chronoskin keeps lists for small teams. All times are yours, Harbour Street.</p>\n  <ul class=\"ds-footer__links\">\n    <li><a class=\"ds-footer__link\" href=\"#help\">Help</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#help\">Terms</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#help\">Privacy</a></li>\n    <li><a class=\"ds-footer__link\" href=\"#help\">Write to us</a></li>\n  </ul>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.web-2-0-gloss.app.s07.p11.t10.u02\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"web-2-0-gloss\",\n    \"years\": [\n      2005,\n      2009\n    ]\n  },\n  \"archetype\": \"app\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1024,\n    \"fluid\": false\n  },\n  \"source\": \"https://chrono.skin/s/v1-w2-7ba2\",\n  \"short\": \"v1-w2-7ba2\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #ffffff;\n  --color-canvas: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-alt: #f3f3cc;\n  --color-surface-strong: #dde7b0;\n  --color-bar: #666633;\n  --color-bar-text: #ffffcc;\n  --color-bar-alt: #f3f3cc;\n  --color-bar-alt-text: #333300;\n  --color-inverse: #333300;\n  --color-inverse-text: #ffffcc;\n  --color-text: #333300;\n  --color-text-muted: #999999;\n  --color-heading: #333300;\n  --color-heading-alt: #933100;\n  --color-link: #336699;\n  --color-link-quiet: #666633;\n  --color-link-visited: #666666;\n  --color-link-hover: #933100;\n  --color-link-active: #333300;\n  --color-border: #aaaaaa;\n  --color-border-strong: #999966;\n  --color-border-muted: #d6d6ad;\n  --color-accent: #9eb847;\n  --color-accent-text: #333300;\n  --color-accent-alt: #933100;\n  --color-fill-1: #f3f3cc;\n  --color-fill-2: #f8fdff;\n  --color-fill-3: #dde7b0;\n  --color-fill-4: #ffffcc;\n  --color-button: #a94400;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffcc;\n  --color-button-secondary: #f3f3cc;\n  --color-button-secondary-text: #333300;\n  --color-input: #f8fdff;\n  --color-input-text: #333300;\n  --color-input-border: #999966;\n  --color-disabled: #eeeeee;\n  --color-disabled-text: #999999;\n  --color-danger: #aa0000;\n  --color-danger-surface: #fde8dc;\n  --color-success: #5c7a1a;\n  --color-warning: #ffe840;\n  --color-notice: #ffffcc;\n  --color-notice-text: #333300;\n  --color-focus: #336699;\n  --color-shadow: #333300;\n  --color-overlay: rgba(51, 51, 0, 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: \"Lucida Grande\", Verdana, sans-serif;\n  --font-heading: \"Trebuchet MS\", Tahoma, sans-serif;\n  --font-ui: \"Trebuchet MS\", Tahoma, sans-serif;\n  --font-mono: Monaco, \"Courier New\", monospace;\n  --text-base: 12px;\n  --text-small: 10px;\n  --text-ui: 12px;\n  --text-large: 14px;\n  --text-display: 26px;\n  --text-h1: 22px;\n  --text-h2: 16px;\n  --text-h3: 14px;\n  --line-body: 1.4;\n  --line-heading: 1.2;\n  --line-display: 1.1;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 700;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: 0;\n  --display-tracking: 0;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: underline;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 2px;\n  --border-style: solid;\n  --radius-control: 0;\n  --radius-panel: 0;\n  --radius-pill: 0;\n  --radius-page: 0;\n  --shadow-panel: none;\n  --shadow-control: none;\n  --shadow-control-hover: none;\n  --shadow-control-pressed: none;\n  --shadow-dialog: none;\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-alt);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button), white 18%);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 2px dotted var(--color-focus);\n  --transition: none;\n  --backdrop-blur: 0px;\n}\n"
  }
}