{ "id": "v1-nm-3454", "long_id": "v1.neumorphism.app.s03.p04.t05.u04", "name": "Neumorphism three-pane", "era": { "slug": "neumorphism", "code": "nm", "name": "Neumorphism", "years": [ 2019, 2021 ], "description": "Soft UI, 2019 to 2021: controls pressed out of, or into, a single pale surface by a pair of light and dark blurred shadows, with low contrast and very round corners." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "Neumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes from a pair of blurred shadows, light towards the top left and dark towards the bottom right. This pack is its working application form, the three-pane mail or task client: a raised icon rail at the left edge, a folder column, one tall raised list pane and a reading column, filling the viewport instead of sitting in a centred sheet. It uses the late, restrained variant of the style, a warm off-white surface with 1px hairlines and a shallow relief, near-black text in a humanist sans, a zinc primary button and one orange accent.", "url": "https://chrono.skin/s/v1-nm-3454", "preview_url": "https://chrono.skin/s/v1-nm-3454/specimen.html", "files": { "STYLE.md": "# Neumorphism three-pane\n\n## Summary\n\nNeumorphism, or soft UI, is the interface style of 2019 to 2021 in which the page and everything on it share one pale colour and shape comes from a pair of blurred shadows, light towards the top left and dark towards the bottom right. This pack is its working application form, the three-pane mail or task client: a raised icon rail at the left edge, a folder column, one tall raised list pane and a reading column, filling the viewport instead of sitting in a centred sheet. It uses the late, restrained variant of the style, a warm off-white surface with 1px hairlines and a shallow relief, near-black text in a humanist sans, a zinc primary button and one orange accent.\n\n## Layout\n\n- The frame is `.ds-app`, a grid as wide as `--size-page` (1392px, the 1440px viewport less 24px on each side), with `--space-5` (24px) padding and `--space-6` (32px) between columns. There is no top bar and no centred text column.\n- Navigation is vertical: `.ds-nav` is a raised rail `--size-rail` (112px) wide at the far left, as tall as the frame: the brand at the top, one icon key with a small label per section, and settings at the foot above a rule.\n- Home page, four columns, the rail and the three of `.ds-app__frame`: the rail; the `.ds-sidebar` folder column, `--size-folders` (208px), flat on the page with the compose button at its top and the storage meter at its foot; the `.ds-pane` list column, `--size-pane` (392px), one raised sheet from top to bottom holding title, search, tabs, the `.ds-list` and the pagination at its foot; and `.ds-app__main`, the reading column, which takes the rest (about 590px) and stacks its blocks 32px apart: the `.ds-hero` greeting on the bare page, the `.ds-stat` card, notices, the open item in a `.ds-panel`, and the `.ds-grid` of attachment wells.\n- Inner pages use `.ds-app__frame--inner`, two columns beside the same rail: a wide main column, and a `--size-aside` (400px) `.ds-pane` at the right for a form, a short list or a summary. There is no hero and no folder column. At the top of the main column, in one block, come the `.ds-breadcrumb`, the `.ds-page-header` (title at `--text-h1` left, actions right) and, on a list page, the `.ds-tabs` track (`.ds-tabs--inline`, at least half the column wide); then the `.ds-table` or a form in a `.ds-panel`, and under it `.ds-app__row`, two equal columns for an empty state, a dialog or two panels.\n- Views. The specimen is one site with four views, each `
` inside `.ds-app__views`, the second column of `.ds-app`; the rail and the footer stand outside them and one view shows at a time. `inbox` is the home view: folders, the list pane and the reading column with greeting, figures, notices, the open message and its attachments. `compose` is the form page: an error notice and the message form in a panel, with the drafts and the thread in the pane at the right. `bin` is a list page: the table of deleted threads, under it the dialog that deletes one beside a panel, and a storage pane at the right. `rules` is the settings page: tabs, the table of rules, an empty state beside a panel, and the rule form in the pane. The rail presses in the key of the current view, by one `:has()` rule per view next to `.ds-nav__link.is-current`.\n- Spacing scale: `--space-1` 4px (between list rows, folder links and tab segments), `--space-2` 8px (label to control, between rail keys), `--space-3` 12px (row padding, icon to text, between pagination keys), `--space-4` 16px (between buttons, pane tool gap, rail padding), `--space-5` 24px (pane and panel padding, frame padding, between form fields and sidebar groups, between grid wells), `--space-6` 32px (between columns and between blocks of the reading column), `--space-7` 48px (dialog backdrop padding, between page kinds), `--space-8` 64px (unused by the frame, kept for one-off sections).\n- Other sizes: `--size-avatar` 40px (initials disc), `--size-chip` 36px (colour chip), `--size-glyph` 24px (rail icon), `--size-control-large` 48px (compose button), `--size-dialog` 440px.\n- Raised things need room for their shadows: columns are 32px apart and no raised panel sits inside the pane or inside another panel. Inside the pane use flat rows, wells and rules.\n- `--size-rule` (1px) is the weight of the rules between table rows, stat figures, and above a pane or panel foot; it stays when a surface part sets `--border-width` to 0.\n- Below 1100px the columns stack and the rail turns into a horizontal strip: brand, section keys, the settings key at the right. Stacked, the folder column folds into the compose button and one wrapping row of folder keys (its headings, the labels and the storage meter are hidden), and a list pane shows only its first five rows, the pagination reaching the rest. Below 560px the folder keys are one strip that scrolls sideways from edge to edge and fades at the right, the frame padding drops to `--space-4`, the brand shows its mark only, the stat figures and the attachment wells stack, and table columns marked `.ds-table__opt` are hidden so that the table never scrolls sideways. On a phone (560px and below) the strip keeps the brand as its mark only (`.ds-brand--stacked` hides its name), the `.ds-nav__list` keys tighten and wrap, the current key staying pressed in, and tabs of `.ds-tabs--inline` fill the width.\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-heading` is a rounded geometric face (Quicksand, then Varela Round, Century Gothic and Trebuchet MS) for the brand, titles and every figure; `--font-body` and `--font-ui` are one humanist sans (Open Sans, then Segoe UI and Tahoma) for text, controls and labels. `--font-mono` is for code only.\n- Sizes: `--text-base` 15px, `--text-ui` 14px (buttons, inputs, navigation, table cells, notices, amounts), `--text-small` 12px (meta text, labels, badges, key captions), `--text-large` 18px (lead text, the card number), `--text-h3` 17px (panel and sidebar titles, pot figures), `--text-h2` 22px (stat figures, dialog title), `--text-h1` 30px (page title), `--text-display` 44px for the balance only.\n- Weights: `--weight-body` 400, `--weight-bold` and `--weight-ui` 600, `--weight-heading` and `--weight-display` 700. `--line-body` 1.5, `--line-heading` 1.35, `--line-display` 1.15.\n- Uppercase appears only on table head cells, written in the component. No tracking.\n- One surface: `--color-page`, `--color-canvas`, `--color-surface`, `--color-bar`, `--color-input` and `--color-button-secondary` are the same periwinkle (209 216 236). `--color-surface-alt` and `--color-notice` (216 224 240) are a step lighter, for hovered rows and links and for notices; `--color-surface-strong` (200 208 224) a step darker, for inline code, quiet and status badges and disabled controls.\n- The relief pair: `--color-shadow` (178 184 201) is the dark side and `--color-border-muted` (240 248 255, a bluish white) the light side of every shadow. `--color-border-muted` is used for nothing else.\n- Text is `--color-text` (50 48 52) with slate blue `--color-text-muted` and `--color-heading-alt` (53 64 104) for meta text, lead text, labels and panel titles; `--color-heading` (39 55 76) for titles and figures.\n- Each text token goes with its own fill and no other: `--color-bar-text` on `--fill-bar` (shelf, table head), `--color-bar-alt-text` on `--fill-bar-alt` (footer), `--color-inverse-text` on `--fill-inverse` (the drawn card, a code block), `--color-accent-text` on `--fill-accent` (count badge, current page), `--color-button-text` on `--fill-button` (primary button, brand key, the first round key), `--color-button-secondary-text` on `--fill-button-secondary` (secondary button, round keys, pagination keys, the current tab), `--color-input-text` on `--fill-input` (controls, stat wells, the tab groove, list initials, empty state), `--color-notice-text` on `--color-notice`, `--color-danger` on `--color-danger-surface`, `--color-text` on `--color-surface-alt` and `--color-surface-strong`.\n- `--color-accent` and `--color-button` are one magenta (203 12 159) with white text: the navigation marker, meter bars, the count badge, the current page, switches that are on. `--color-link` is violet (121 40 202), turning magenta on hover; `--color-accent-alt` (blue, 33 82 255) only marks \"scheduled\" or \"new\" as a dot.\n- `--color-fill-1` to `--color-fill-4` (magenta, blue, green, slate) colour the chip and the bar of the four pot tiles and nothing else; no text is set on them.\n- Status: `--color-success` 23 173 55, `--color-warning` 233 130 12, `--color-danger` 234 6 6, as 8px dots; `--color-success` is also the text of an amount that came in, and `--color-danger` the text of errors and of the destructive button.\n- Surface: `--border-width` is 0; `--border-width-strong` (2px) is the focus and error ring. Controls are pills: `--radius-control` and `--radius-pill` 30px; panels are tighter, `--radius-panel` 16px, and the balance card, the drawn card and the dialog take `--radius-page` 24px. `--shadow-control` is 3px offset and 6px blur, `--shadow-control-hover` 6px and 12px, `--shadow-panel` 12px and 24px, `--shadow-control-pressed` 3px and 7px inset, `--shadow-dialog` a 20px offset 60px blur dark side with a 12px light side. Two fills are gradients running to the top left: `--fill-button` (the button colour from 20% darker to 14% lighter) and `--fill-inverse` (the inverse colour to 28% lighter); every other fill is flat. `--shadow-text` is `none`. Transitions run 0.25s.\n- One-off values with no token: discs use `border-radius: 50%`; the tab groove's radius is `--radius-control` plus `--space-1`; inline code uses half of `--radius-control`; a checkbox corner is a quarter of `--size-check` at most; navigation links that are not current, card labels and stat labels are set at opacity 0.7 to 0.8 of their own text token; placeholders are `--color-input-text` at opacity 0.55; the card chip is `--color-inverse-text` at opacity 0.4.\n\n## Components\n\n- `.ds-page`: on ``; paints the surface and sets the base type. The frame is `.ds-app` (the rail and `.ds-app__views`, which holds the screens); `.ds-app__frame` lays out one screen's columns (folders, pane, reading column) and `.ds-app__frame--inner` an inner page's (main, pane); `.ds-app__main` stacks blocks 32px apart; `.ds-app__row` is two equal columns inside it. `.ds-view` is one screen of the specimen (see Layout).\n- `.ds-brand`: the site's mark and name, in the header, linking to the home page: `.ds-brand__mark` is a small raised key (`--size-brand`, 40px) dressed like the primary button (`--fill-button`, `--color-button-text` for the mark, the hairline from `--border-width`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG painted with `currentColor`; `.ds-brand__name` is the name in the heading font at `--text-h3`, in `--color-bar-text` because it stands on the rail. In the rail it takes `.ds-brand--stacked`, which puts the name under the key at `--text-small`. The name `chronoskin` and its mark are placeholders: replace them with the installing project's own name and logo and keep the key.\n- `.ds-nav`: the raised rail. the `.ds-brand` stands at its top; `.ds-nav__list` holds `.ds-nav__link` keys, each a `.ds-nav__glyph` icon above a one-word label; `.ds-nav__foot` pins settings to the bottom. The current key (`is-current`) is pressed in, `is-hover` raises one.\n- `.ds-hero`: the greeting at the top of the reading column, on the bare page and left-aligned: `.ds-hero__date`, `.ds-hero__title` at the display size, `.ds-hero__lead` and `.ds-hero__actions` with one primary and one secondary large button.\n- `.ds-page-header`: head of an inner page instead of the hero: `.ds-page-header__text` with `.ds-page-header__title` and one line of `.ds-page-header__lead`; `.ds-page-header__actions` at the right with at most one primary button. The breadcrumb goes directly above it and the tabs directly below.\n- `.ds-pane`: a tall raised sheet for one column: `.ds-pane__head` with `.ds-pane__title` and a count badge, `.ds-pane__tools` for a search input and tabs (or a whole form on an inner page), then a `.ds-list`, and `.ds-pane__foot`, pinned to the bottom above a rule, for pagination or one button. A pane may hold two titled lists one after the other.\n- `.ds-prose`: running text: h1 to h3, paragraphs, lists, inline `code`; `.ds-prose__lead` for a lead paragraph, `.ds-prose__code` for a dark code block. Put prose inside a `.ds-panel`.\n- `.ds-link`: link in running text; states `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` for undecorated links in tables and titles. `.ds-link__sample` lays out a row of links.\n- `.ds-button`: primary, zinc, 40px high, raised; `is-hover` lifts it, `is-active` sinks it. `.ds-button--secondary` is the same key in the surface colour. `.ds-button--danger` is the destructive action, a surface-coloured key with `--color-danger` text and outline, used once and last in a group. `.ds-button--large` (48px) for the hero and compose; `.ds-button--block` fills its column. `disabled` or `is-disabled` is flat. `.ds-button__row` spaces a group.\n- `.ds-form`: a vertical stack of `.ds-form__field` (a `.ds-form__label` and a control): `.ds-form__input`, `.ds-form__textarea` (`.ds-form__textarea--tall` for a message body), `.ds-form__select` (in `.ds-form__select-wrap` with `.ds-form__chevron`), `.ds-form__range`. `.ds-form__check` is a label row with a `.ds-form__checkbox` or a `.ds-switch`. `is-error` on an input gives a 2px danger ring and is followed by `.ds-form__error`; `.ds-form__hint` is help text; `.ds-form__actions` holds the buttons. Text controls are wells: `--shadow-control-pressed`. On an inner page the form lives in the right-hand pane.\n- `.ds-table`: one raised sheet with a small uppercase head and 1px rules between rows. `.ds-table__num` right-aligns numbers, `.ds-table__meta` is muted, `is-hover` on a row lightens it.\n- `.ds-list`: flat rows inside a pane, 4px apart, no rules. A `.ds-list__item` has a raised `.ds-list__avatar` disc with initials and a `.ds-list__body`: a `.ds-list__line` with `.ds-list__title` and `.ds-list__time`, then one or two single-line `.ds-list__meta` lines that cut off with an ellipsis. A `.ds-list__dot` at the start of a meta line marks state (`--new` unread, `--off` a problem). The open row is `is-current`, a sunk well; `is-hover` lightens a row.\n- `.ds-panel`: the raised card of the reading column: `.ds-panel__title` (with a status badge at its right), an optional `.ds-panel__from` line (avatar, `.ds-panel__who` with `.ds-panel__meta`, a badge), `.ds-panel__body`, and `.ds-panel__foot` for the reply actions above a rule.\n- `.ds-grid`: sunk wells two across, for attachments and linked items. `.ds-grid__cell` (with `--1` to `--4` for the chip colour) holds a raised `.ds-grid__chip` at the left and a `.ds-grid__label` over a `.ds-grid__meta`.\n- `.ds-stat`: the row itself, one raised card; each `.ds-stat__item` is one figure, a `.ds-stat__label` above a `.ds-stat__value` with a `.ds-stat__meta` line under it. Three items, divided by rules, under the hero.\n- `.ds-tabs`: a sunk track as wide as its container with equal `.ds-tabs__item` segments; the `.ds-tabs__tab` with `is-current` is raised out of it. Inside a pane it filters the list; `.ds-tabs--inline` is the view switch under a page header.\n- `.ds-badge`: pill for counts, filled with the accent (`--color-accent-text` on `--fill-accent`). `.ds-badge--quiet` is a flat pill in `--color-surface-strong` with `--color-text`, for neutral counts; it has no shadow, because a well is too deep for a pill this small. Status labels are `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger`: the same flat pill with a leading 8px dot in the status colour. Never colour the whole pill.\n- `.ds-sidebar`: the folder column, flat on the page: groups of a small uppercase `.ds-sidebar__heading` and a `.ds-sidebar__list` of `.ds-sidebar__link` rows, with a count badge at the right or a `.ds-sidebar__dot` (`--1` to `--4`) at the left; the current folder is pressed in. `.ds-sidebar__foot` pins a last group to the bottom; `.ds-sidebar__note` is a small muted line. `.ds-progress` with `.ds-progress__bar` is a sunk track with an accent bar for a quota.\n- `.ds-notice`: a message sunk into the surface, with `.ds-notice__icon` and `.ds-notice__title`; `.ds-notice--error` takes `--color-danger`. `.ds-notice__stack` stacks several.\n- `.ds-pagination`: raised 40px keys, `.ds-pagination__link`, centred in a pane foot; the current page is flat and filled with the accent.\n- `.ds-breadcrumb`: small muted trail, `.ds-breadcrumb__item` separated by slashes, `.ds-breadcrumb__link` for linked levels.\n- `.ds-dialog`: a tinted sheet (`--color-overlay`) with a centred `.ds-dialog__box`, at most 440px wide, raised by `--shadow-dialog`: `.ds-dialog__title`, `.ds-dialog__body`, `.ds-dialog__actions` right-aligned.\n- `.ds-empty`: a sunk well with a raised `.ds-empty__icon` disc, `.ds-empty__title`, `.ds-empty__text` and one primary button.\n- `.ds-footer`: one rounded band in `--fill-bar-alt` as wide as the frame, 32px under it: a line of small text at the left and `.ds-footer__links` with `.ds-footer__link` at the right, inside `.ds-footer__inner`.\n- `.ds-tooltip`: a hint on hover or focus. Wrap the trigger and follow it with `.ds-tooltip__tip` (`role=\"tooltip\"`), a small label in `--fill-inverse`; `--below` drops it under the trigger, `--end` lines it up with the trigger's right edge. Use it for an icon key or a short badge whose meaning needs a word; never force it open.\n- `.ds-avatar`: a person as initials on a raised disc (`.ds-avatar__pic`, `--size-avatar`, `--shadow-control`), with an optional `.ds-avatar__text` holding `.ds-avatar__name` and `.ds-avatar__meta`. Use it wherever a person is named.\n- `.ds-accordion`: one raised sheet of `
` sections; `.ds-accordion__head` is the summary with a round `.ds-accordion__chevron` that is pressed while open, `.ds-accordion__body` the answer. Use it for questions and grouped settings in a side column.\n- `.ds-menu`: the account menu, a `
`: `.ds-menu__toggle` is a sunk well holding the `.ds-avatar` and a `.ds-menu__caret`, `.ds-menu__list` the raised list of `.ds-menu__link` items (`--danger` for signing out) that opens under it.\n\n## Never\n\n- `row-gap <= 8px`: list rows and folder links sit 4px apart; table rows touch.\n- `block-gap <= 48px`: columns and blocks sit 32px apart; 48px between page kinds is the largest gap.\n- `content-width <= 1392px`: the frame fills a 1440px viewport and goes no wider.\n- `font-size <= 44px`: the balance is the largest text.\n- `font-size >= 12px`: meta text and badges are the smallest text.\n- `font-weight <= 700`: titles and figures are bold, never black.\n- `font-families <= 3`: a display face, a text face and one monospace for code.\n- `line-height <= 1.55`: body text is set at 1.5.\n- `letter-spacing = 0`: no tracking on any text.\n- `underlined-links <= 10%`: links are marked by colour and weight; underline is a hover state.\n- `uppercase-text <= 5%`: uppercase is for table heads only.\n- `border-width <= 2px`: nothing is outlined; 1px rules and the 2px ring are the only lines.\n- `border-radius <= 24px`: controls and wells 8px, tiles and the dialog 24px; only capsules and discs go higher.\n- `box-shadow-blur <= 18px`: tiles blur 12px and the dialog 18px; the relief is crisp, not foggy.\n- `text-shadow = none`: text is flat.\n- `gradient-fills <= 15%`: only the tiles are convex; keys, wells, bars and badges are one flat colour each.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and decide first which column it belongs to: navigation between sections is a key in the rail, a way to narrow the list is a link in the sidebar, a collection is rows in a `.ds-pane`, and whatever is opened is a `.ds-panel` in the reading column. A raised container starts from `.ds-panel` (fill, hairline, radius and `--shadow-panel` together); something that shows a state or takes input starts from `.ds-form__input` (`--fill-input`, `--color-input-text`, `--shadow-control-pressed`); something to press starts from `.ds-button--secondary`. Keep every fill equal to the surface behind it, always write the outline as `var(--border-width) var(--border-style)` with a border colour token so that a softer surface part can remove it, and use each shadow token alone as the whole `box-shadow` value, since a token may be `none`. Use tokens only; for a size with no token use `calc()` over `--space-*` or `--size-*`. Keep each text token on the fill it belongs to and the accent to one small element per column.\n", "components.css": "/* Layout tokens (structure part) */\n:root {\n --size-page: 1392px;\n --size-rail: 112px;\n --size-folders: 208px;\n --size-pane: 392px;\n --size-aside: 400px;\n --size-dialog: 440px;\n --size-control: 40px;\n --size-control-large: 48px;\n --size-icon: 16px;\n --size-glyph: 24px;\n --size-dot: 8px;\n --size-chip: 36px;\n --size-avatar: 40px;\n --size-thumb: 20px;\n --size-track: 8px;\n --size-check: 20px;\n --size-rule: 1px;\n --size-brand: 40px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 48px;\n --space-8: 64px;\n}\n\n/* shell: an application frame of panes that fills the viewport */\n.ds-page {\n margin: 0;\n min-height: 100vh;\n background: var(--fill-page);\n background-color: var(--color-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n.ds-app {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: 0 auto;\n padding: var(--space-5);\n}\n.ds-app__views {\n min-width: 0;\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/* frame: the columns of one view, beside the rail */\n.ds-app__frame {\n display: grid;\n grid-template-columns: var(--size-folders) var(--size-pane) minmax(0, 1fr);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-app__frame--inner {\n grid-template-columns: minmax(0, 1fr) var(--size-aside);\n}\n.ds-app__main {\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n min-width: 0;\n}\n.ds-app__row {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-6);\n align-items: stretch;\n}\n\n/* brand: the mark on a small raised key in the primary button's dress, then the name */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-brand);\n height: var(--size-brand);\n background-color: var(--color-button);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n}\n.ds-brand__mark svg {\n width: var(--size-thumb);\n height: var(--size-thumb);\n}\n.ds-brand__name {\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 text-shadow: var(--shadow-text);\n}\n.ds-brand--stacked {\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-brand--stacked .ds-brand__name {\n font-size: var(--text-small);\n}\n\n/* nav: a raised vertical rail at the left edge, one icon key per section */\n.ds-nav {\n display: flex;\n flex-direction: column;\n align-items: center;\n align-self: stretch;\n gap: var(--space-5);\n padding: var(--space-4) var(--space-2);\n background: var(--fill-bar);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-bar-text);\n} \n.ds-nav__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n width: 100%;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-3) var(--space-1);\n border-radius: var(--radius-control);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\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 transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n box-shadow: var(--shadow-control);\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#inbox:target) .ds-nav__link[href=\"#inbox\"],\n.ds-page:has(#compose:target) .ds-nav__link[href=\"#compose\"],\n.ds-page:has(#bin:target) .ds-nav__link[href=\"#bin\"],\n.ds-page:has(#rules:target) .ds-nav__link[href=\"#rules\"] {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-nav__link:focus-visible,\n.ds-nav__link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-nav__glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n}\n.ds-nav__foot {\n width: 100%;\n margin-top: auto;\n padding-top: var(--space-4);\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* sidebar: the folder column, flat on the page, the current folder pressed in */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: var(--space-5);\n}\n.ds-sidebar__heading {\n margin: 0 var(--space-3) var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-sidebar__link {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-control);\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-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__link .ds-badge {\n margin-left: auto;\n}\n.ds-sidebar__link:hover,\n.ds-sidebar__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-sidebar__link.is-current {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-sidebar__dot {\n flex: none;\n width: var(--size-dot);\n height: var(--size-dot);\n border-radius: 50%;\n}\n.ds-sidebar__dot--1 {\n background: var(--color-fill-1);\n}\n.ds-sidebar__dot--2 {\n background: var(--color-fill-2);\n}\n.ds-sidebar__dot--3 {\n background: var(--color-fill-3);\n}\n.ds-sidebar__dot--4 {\n background: var(--color-fill-4);\n}\n.ds-sidebar__foot {\n margin-top: auto;\n padding-bottom: var(--space-4);\n}\n.ds-sidebar__note {\n margin: 0 var(--space-3);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n\n/* meter: a sunk track with an accent bar */\n.ds-progress {\n height: var(--size-track);\n margin: 0 var(--space-3) var(--space-2);\n overflow: hidden;\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-progress--flush {\n margin: 0;\n}\n.ds-progress__bar {\n width: 40%;\n height: 100%;\n background: var(--fill-accent);\n border-radius: var(--size-track);\n}\n\n/* pane: the list column, one tall raised sheet */\n.ds-pane {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n min-width: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-pane__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-5) var(--space-5) var(--space-4);\n}\n.ds-pane__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-pane__tools {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n padding: 0 var(--space-5) var(--space-5);\n}\n.ds-pane__foot {\n display: flex;\n justify-content: center;\n margin-top: auto;\n padding: var(--space-4) var(--space-5) var(--space-5);\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* hero: a greeting on the bare page at the top of the reading column */\n.ds-hero {\n padding: var(--space-2) 0 0;\n}\n.ds-hero__date {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-hero__title {\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\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 text-shadow: var(--shadow-text);\n}\n.ds-hero__lead {\n max-width: 52ch;\n margin: var(--space-3) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-5);\n}\n\n/* page header (inner pages) */\n.ds-page-header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: var(--space-3) 0 var(--space-6);\n}\n.ds-page-header:last-child {\n margin-bottom: 0;\n}\n.ds-page-header__text {\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 text-shadow: var(--shadow-text);\n}\n.ds-page-header__lead {\n margin: var(--space-1) 0 0;\n color: var(--color-text-muted);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n\n/* prose */\n.ds-prose {\n max-width: 76ch;\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: var(--space-6) 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n margin-top: 0;\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n font-size: var(--text-h3);\n}\n.ds-prose p,\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n padding-left: var(--space-5);\n}\n.ds-prose li + li {\n margin-top: var(--space-1);\n}\n.ds-prose strong {\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) / 2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-prose__code {\n margin: 0 0 var(--space-4);\n padding: var(--space-4) var(--space-5);\n overflow: auto;\n background: var(--fill-inverse);\n border-radius: var(--radius-control);\n color: var(--color-inverse-text);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link__sample {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n}\n\n/* buttons: raised at rest, lifted on hover, sunk when pressed */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-5);\n background: var(--fill-button);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n box-shadow: var(--shadow-control-hover);\n color: var(--color-button-hover-text);\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n border-color: var(--color-border);\n color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--fill-panel);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-button--large {\n min-height: var(--size-control-large);\n padding: 0 var(--space-6);\n font-size: var(--text-large);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-disabled-text);\n cursor: default;\n}\n.ds-button__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n}\n/* form: every control is a well sunk into the surface */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n.ds-form__label {\n display: flex;\n justify-content: space-between;\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n min-height: var(--size-control);\n margin: 0;\n padding: 0 var(--space-4);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n 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 transition: var(--transition);\n}\n.ds-form__textarea {\n min-height: calc(2 * var(--size-control) + var(--space-4));\n padding: var(--space-3) var(--space-4);\n border-radius: min(var(--radius-control), var(--radius-panel));\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__textarea--tall {\n min-height: calc(4 * var(--size-control));\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-input-text);\n opacity: 0.55;\n}\n.ds-form__select {\n padding-right: var(--space-7);\n appearance: none;\n -webkit-appearance: none;\n}\n.ds-form__select-wrap {\n position: relative;\n display: block;\n}\n.ds-form__chevron {\n position: absolute;\n top: 50%;\n right: var(--space-4);\n width: var(--size-icon);\n height: var(--size-icon);\n margin-top: calc(var(--size-icon) / -2);\n color: var(--color-input-text);\n pointer-events: none;\n}\n.ds-form__input:focus-visible,\n.ds-form__select:focus-visible,\n.ds-form__textarea:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n.ds-form__input.is-error {\n box-shadow: 0 0 0 var(--border-width-strong) var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-form__checkbox {\n flex: none;\n width: var(--size-check);\n height: var(--size-check);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n padding: var(--space-1);\n background: var(--fill-input);\n border-radius: calc(var(--radius-control) / 2);\n box-shadow: var(--shadow-control);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-form__checkbox:checked,\n.ds-form__checkbox.is-checked {\n background: var(--fill-accent);\n background-clip: content-box;\n}\n.ds-form__checkbox:focus-visible {\n outline: var(--focus-ring);\n outline-offset: var(--space-1);\n}\n/* the era's switch: a sunk pill with a raised thumb */\n.ds-switch {\n position: relative;\n flex: none;\n width: calc(2 * var(--size-thumb) + 2 * var(--space-1));\n height: calc(var(--size-thumb) + 2 * var(--space-1));\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: var(--fill-input);\n border-radius: var(--size-thumb);\n box-shadow: var(--shadow-control-pressed);\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-switch::before {\n content: \"\";\n position: absolute;\n top: var(--space-1);\n left: var(--space-1);\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-panel);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-switch:checked {\n background: var(--fill-accent);\n box-shadow: none;\n}\n.ds-switch:checked::before {\n left: calc(var(--size-thumb) + var(--space-1));\n}\n/* the era's slider: a sunk track with a raised round thumb */\n.ds-form__range {\n width: 100%;\n height: var(--size-thumb);\n margin: 0;\n appearance: none;\n -webkit-appearance: none;\n background: transparent;\n}\n.ds-form__range::-webkit-slider-runnable-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-webkit-slider-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n margin-top: calc((var(--size-track) - var(--size-thumb)) / 2);\n -webkit-appearance: none;\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__range::-moz-range-track {\n height: var(--size-track);\n background: var(--fill-input);\n border-radius: var(--size-track);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-form__range::-moz-range-thumb {\n width: var(--size-thumb);\n height: var(--size-thumb);\n background: var(--fill-accent);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n margin-top: var(--space-2);\n}\n\n/* table: one raised sheet, rows divided by a rule */\n.ds-table {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n font-size: var(--text-ui);\n line-height: var(--line-heading);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-4) var(--space-5);\n text-align: left;\n vertical-align: middle;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table th:first-child {\n border-top-left-radius: var(--radius-panel);\n}\n.ds-table th:last-child {\n border-top-right-radius: var(--radius-panel);\n}\n.ds-table td {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr.is-hover td {\n background: var(--color-surface-alt);\n}\n.ds-table tbody tr:last-child td:first-child {\n border-bottom-left-radius: var(--radius-panel);\n}\n.ds-table tbody tr:last-child td:last-child {\n border-bottom-right-radius: var(--radius-panel);\n}\n.ds-table .ds-table__num {\n white-space: nowrap;\n text-align: right;\n font-variant-numeric: tabular-nums;\n}\n.ds-table .ds-table__meta {\n color: var(--color-text-muted);\n}\n/* panel */\n.ds-panel {\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-5) var(--space-5) 0;\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-panel__body {\n padding: var(--space-5);\n}\n.ds-panel__title + .ds-panel__body {\n padding-top: var(--space-3);\n}\n/* badge */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n border-radius: var(--radius-pill);\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: var(--line-body);\n white-space: nowrap;\n vertical-align: middle;\n}\n/* quiet and status badges: a flat pill one step darker than the surface; status adds a dot */\n.ds-badge--quiet,\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n background: var(--color-surface-strong);\n color: var(--color-text);\n}\n.ds-badge--success::before,\n.ds-badge--warning::before,\n.ds-badge--danger::before {\n content: \"\";\n width: var(--size-dot);\n height: var(--size-dot);\n flex: none;\n border-radius: 50%;\n}\n.ds-badge--success::before {\n background: var(--color-success);\n}\n.ds-badge--warning::before {\n background: var(--color-warning);\n}\n.ds-badge--danger::before {\n background: var(--color-danger);\n}\n/* notice: a message sunk into the surface */\n.ds-notice {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n background: var(--color-notice);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n border-color: var(--color-danger);\n color: var(--color-danger);\n}\n.ds-notice__icon {\n width: var(--size-thumb);\n height: var(--size-thumb);\n flex: none;\n margin-top: calc((var(--text-ui) * var(--line-body) - var(--size-thumb)) / 2);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice__stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n}\n\n/* pagination: raised keys, the current one in the accent */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-pagination__link {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: var(--size-control);\n min-height: var(--size-control);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\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: none;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n box-shadow: var(--shadow-control-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n border-color: transparent;\n box-shadow: none;\n color: var(--color-accent-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-body);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin: 0 var(--space-2);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__link:hover,\n.ds-breadcrumb__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* dialog, shown open in the page flow */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-7) var(--space-5);\n background: var(--color-overlay);\n border-radius: var(--radius-page);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n padding: var(--space-6);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n color: var(--color-text);\n}\n.ds-dialog__title {\n margin: 0 0 var(--space-2);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-dialog__body {\n color: var(--color-text-muted);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-4);\n margin-top: var(--space-6);\n}\n\n/* empty state: a sunk well with a raised icon disc */\n.ds-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: var(--space-6) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--size-control-large);\n height: var(--size-control-large);\n margin-bottom: var(--space-4);\n padding: var(--space-3);\n background: var(--fill-button-secondary);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-empty__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-empty__text {\n max-width: 40ch;\n margin: var(--space-2) 0 var(--space-5);\n font-size: var(--text-ui);\n}\n\n/* full-width button, for the compose key above the folders */\n.ds-button--block {\n display: flex;\n width: 100%;\n}\n\n/* list: flat rows inside the pane; the open row is a sunk well */\n.ds-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n margin: 0;\n padding: 0 var(--space-3) var(--space-3);\n list-style: none;\n}\n.ds-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3);\n border-radius: var(--radius-control);\n color: var(--color-text);\n transition: var(--transition);\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-list__item.is-current {\n background: var(--fill-input);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-list__avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\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: var(--line-heading);\n}\n.ds-list__body {\n flex: 1;\n min-width: 0;\n}\n.ds-list__line {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n}\n.ds-list__title {\n overflow: hidden;\n color: var(--color-link-quiet);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-list__time {\n flex: none;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-list__meta {\n display: block;\n margin-top: var(--space-1);\n overflow: hidden;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-list__item.is-current .ds-list__title,\n.ds-list__item.is-current .ds-list__time,\n.ds-list__item.is-current .ds-list__meta {\n color: inherit;\n}\n.ds-list__dot {\n display: inline-block;\n width: var(--size-dot);\n height: var(--size-dot);\n margin-right: var(--space-1);\n background: var(--color-success);\n border-radius: 50%;\n}\n.ds-list__dot--off {\n background: var(--color-danger);\n}\n.ds-list__dot--new {\n background: var(--color-accent-alt);\n}\n\n/* message head inside a panel: sender, address line and time above the text */\n.ds-panel__from {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5) 0;\n}\n.ds-panel__who {\n flex: 1;\n min-width: 0;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-panel__meta {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n}\n.ds-panel__foot {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n\n/* grid: sunk wells two across, each with a raised colour chip */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n column-gap: var(--space-4);\n align-items: center;\n padding: var(--space-4) var(--space-5);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n}\n.ds-grid__chip {\n grid-row: 1 / span 2;\n width: var(--size-chip);\n height: var(--size-chip);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n}\n.ds-grid__cell--1 .ds-grid__chip {\n background: var(--color-fill-1);\n}\n.ds-grid__cell--2 .ds-grid__chip {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 .ds-grid__chip {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 .ds-grid__chip {\n background: var(--color-fill-4);\n}\n.ds-grid__label {\n overflow: hidden;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-grid__meta {\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* stats: one raised card, three figures divided by rules */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n margin: 0;\n padding: var(--space-4) 0;\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__item {\n padding: 0 var(--space-5);\n}\n.ds-stat__item + .ds-stat__item {\n border-left: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-stat__label {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-stat__value {\n margin: var(--space-1) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n font-variant-numeric: tabular-nums;\n text-shadow: var(--shadow-text);\n}\n.ds-stat__meta {\n display: block;\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-shadow: none;\n}\n\n/* tabs: a sunk track as wide as its pane, equal segments, the current one raised */\n.ds-tabs {\n display: flex;\n gap: var(--space-1);\n margin: 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-tabs__item {\n flex: 1;\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: calc(var(--radius-control) / 2);\n color: var(--color-input-text);\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-align: center;\n text-decoration: none;\n text-transform: var(--ui-transform);\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button-secondary);\n box-shadow: var(--shadow-control);\n color: var(--color-button-secondary-text);\n}\n.ds-tabs--inline {\n align-self: flex-start;\n min-width: 50%;\n}\n\n/* footer: one rounded band under the panes */\n.ds-footer {\n width: 100%;\n max-width: calc(var(--size-page) + 2 * var(--space-5));\n margin: var(--space-6) auto 0;\n padding: 0 var(--space-5) var(--space-5);\n font-size: var(--text-small);\n}\n.ds-footer__inner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3) var(--space-5);\n padding: var(--space-4) var(--space-5);\n background: var(--fill-bar-alt);\n border-radius: var(--radius-page);\n color: var(--color-bar-alt-text);\n}\n.ds-footer__links {\n display: flex;\n gap: var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n}\n\n@media (max-width: 1100px) {\n .ds-app,\n .ds-app__frame,\n .ds-app__frame--inner,\n .ds-app__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-nav {\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n }\n .ds-nav__list {\n flex-direction: row;\n width: auto;\n }\n .ds-nav__link {\n padding: var(--space-2) var(--space-3);\n }\n .ds-nav__foot {\n width: auto;\n margin-top: 0;\n padding-top: 0;\n border-top: 0;\n }\n /* stacked: the folder column folds into one row of folder keys, labels and storage go */\n .ds-sidebar {\n gap: var(--space-4);\n }\n .ds-sidebar > div + div,\n .ds-sidebar__heading {\n display: none;\n }\n .ds-sidebar__list {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--space-2);\n }\n .ds-sidebar__link {\n gap: var(--space-2);\n }\n /* and the list pane shows its first five rows; the pagination reaches the rest */\n .ds-pane .ds-list__item:nth-child(n+6) {\n display: none;\n }\n}\n@media (max-width: 560px) {\n .ds-app {\n gap: var(--space-5);\n padding: var(--space-4);\n }\n .ds-app__frame,\n .ds-app__main {\n gap: var(--space-5);\n }\n .ds-nav {\n gap: var(--space-2);\n padding: var(--space-3) var(--space-2);\n }\n .ds-nav__list {\n gap: var(--space-1);\n }\n .ds-nav__link {\n padding: var(--space-2);\n }\n .ds-brand--stacked .ds-brand__name {\n display: none;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__actions .ds-button {\n flex: 1 1 auto;\n }\n .ds-stat {\n grid-template-columns: minmax(0, 1fr);\n padding: 0 var(--space-5);\n }\n .ds-stat .ds-stat__item {\n padding: var(--space-3) 0;\n border-left: 0;\n }\n .ds-stat .ds-stat__item + .ds-stat__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n gap: var(--space-4);\n }\n .ds-tabs--inline {\n align-self: stretch;\n flex-wrap: wrap;\n }\n .ds-table th,\n .ds-table td {\n padding: var(--space-3);\n }\n .ds-table .ds-table__opt {\n display: none;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-4);\n }\n .ds-dialog__box {\n padding: var(--space-5);\n }\n .ds-dialog__actions,\n .ds-pagination,\n .ds-footer__links {\n flex-wrap: wrap;\n }\n .ds-pagination {\n gap: var(--space-2);\n }\n .ds-pane__foot {\n padding-left: var(--space-4);\n padding-right: var(--space-4);\n }\n}\n\n/* tooltip: a small inverted label by its trigger, on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n}\n.ds-tooltip__tip {\n display: none;\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n padding: var(--space-1) var(--space-3);\n transform: translateX(-50%);\n background-color: var(--color-inverse);\n background: var(--fill-inverse);\n border-radius: min(var(--radius-control), var(--space-3));\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: none;\n white-space: nowrap;\n pointer-events: none;\n}\n.ds-tooltip--below .ds-tooltip__tip {\n top: calc(100% + var(--space-2));\n bottom: auto;\n}\n.ds-tooltip--end .ds-tooltip__tip {\n left: auto;\n right: 0;\n transform: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n display: block;\n}\n\n/* avatar: initials on a raised disc, alone or beside a name */\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n min-width: 0;\n color: inherit;\n text-decoration: none;\n}\n.ds-avatar__pic {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: var(--size-avatar);\n height: var(--size-avatar);\n background-color: var(--color-button-secondary);\n background: var(--fill-button-secondary);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n box-shadow: var(--shadow-control);\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: 1;\n}\n.ds-avatar__text {\n min-width: 0;\n}\n.ds-avatar__name {\n display: block;\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n}\n.ds-avatar__meta {\n display: block;\n font-size: var(--text-small);\n line-height: var(--line-heading);\n opacity: 0.75;\n}\n\n/* accordion: one raised sheet of sections that open and close */\n.ds-accordion {\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n color: var(--color-text);\n}\n.ds-accordion__item + .ds-accordion__item {\n border-top: var(--size-rule) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-4) var(--space-5);\n color: var(--color-heading-alt);\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 list-style: none;\n cursor: pointer;\n}\n.ds-accordion__head::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__head:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-accordion__chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n width: calc(var(--size-icon) + var(--space-3));\n height: calc(var(--size-icon) + var(--space-3));\n border-radius: 50%;\n box-shadow: var(--shadow-control);\n color: inherit;\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron {\n box-shadow: var(--shadow-control-pressed);\n}\n.ds-accordion__chevron svg {\n width: var(--size-icon);\n height: var(--size-icon);\n transition: var(--transition);\n}\n.ds-accordion__item[open] .ds-accordion__chevron svg {\n transform: rotate(180deg);\n}\n.ds-accordion__body {\n padding: 0 var(--space-5) var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* menu: the account disc in a sunk well opens a raised list */\n.ds-menu {\n position: relative;\n}\n.ds-menu__toggle {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);\n background-color: var(--color-input);\n background: var(--fill-input);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--size-avatar);\n box-shadow: var(--shadow-control-pressed);\n color: var(--color-input-text);\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__toggle::-webkit-details-marker {\n display: none;\n}\n.ds-menu__toggle:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu__caret {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-menu__list {\n position: absolute;\n top: calc(100% + var(--space-2));\n right: 0;\n z-index: 5;\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n min-width: 22ch;\n margin: 0;\n padding: var(--space-2);\n list-style: none;\n background-color: var(--color-surface);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: min(var(--radius-panel), var(--space-5));\n box-shadow: var(--shadow-dialog);\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) var(--space-3);\n border-radius: min(var(--radius-control), var(--space-4));\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-menu__link--danger {\n color: var(--color-danger);\n}\n\n.ds-nav__foot .ds-menu__toggle {\n width: fit-content;\n margin: var(--space-3) auto 0;\n padding: var(--space-1);\n}\n.ds-nav__foot .ds-avatar__pic {\n width: var(--size-chip);\n height: var(--size-chip);\n}\n.ds-nav__foot .ds-menu__list {\n top: auto;\n bottom: 0;\n left: calc(100% + var(--space-3));\n right: auto;\n}\n@media (max-width: 1100px) {\n .ds-nav__foot {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n }\n .ds-nav__foot .ds-menu__toggle {\n margin: 0;\n }\n .ds-nav__foot .ds-menu__list {\n top: calc(100% + var(--space-2));\n bottom: auto;\n left: auto;\n right: 0;\n }\n}\n\n/* ---------- phones: the folders are one strip that scrolls sideways from edge to edge, fading at the right ---------- */\n@media (max-width: 560px) {\n .ds-sidebar {\n min-width: 0;\n max-width: 100%;\n }\n .ds-sidebar__list {\n display: flex;\n flex-wrap: nowrap;\n margin: 0 calc(var(--space-4) * -1);\n padding: var(--space-2) var(--space-7) var(--space-2) var(--space-4);\n overflow-x: auto;\n scrollbar-width: none;\n -webkit-mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-7)), transparent);\n mask-image: linear-gradient(to right, var(--color-text) calc(100% - var(--space-7)), transparent);\n }\n .ds-sidebar__list > li {\n flex: none;\n }\n .ds-sidebar__link {\n white-space: nowrap;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: mail\n\n\n\n\n\n
\n\n \n\n
\n\n
\n
\n\n \n\n\n
\n
\n

Inbox

\n 12 unreadFive since yesterday\n
\n
\n \n \n
\n
    \n
  • \n IB\n
    \n
    Ines Baptista09:42
    \n Proofs for the spring catalogue\n The second proof is attached. Two pages changed.\n
    \n
    • \n
  • \n TO\n
    \n
    Tobias Okafor09:10
    \n Paper stock for April\n We can hold the 120 gram until Friday.\n
    \n
    • \n
  • \n HL\n
    \n
    Hanne Lindqvist08:31
    \n Invoice 2041 is ready\n Thirty days from today, same account as before.\n
    \n
    • \n
  • \n RM\n
    \n
    Rafael MoreauTue
    \n Re: binding samples\n The sewn one, without question.\n
    \n
    • \n
  • \n CP\n
    \n
    Courier pickupsTue
    \n Collection missed\n Nobody answered at the side door at 16:05.\n
    \n
    • \n
  • \n AS\n
    \n
    Agnes SatoMon
    \n Sunday lunch\n Bring the folding chairs if they fit in the car.\n
    \n
    • \n
  • \n TO\n
    \n
    Tobias OkaforMon
    \n Delivery note 778\n Four pallets, signed for by the morning shift.\n
    \n
    • \n
  • \n GW\n
    \n
    Guild of Printers3 Mar
    \n Spring meeting, agenda\n Three items and the election of a treasurer.\n
    \n
    • \n
  • \n HL\n
    \n
    Hanne Lindqvist3 Mar
    \n Statement for February\n Nothing is overdue on your account.\n
    \n
    • \n
  • \n NB\n
    \n
    Noor Bakker2 Mar
    \n Type samples\n The narrow cut reads better at nine point.\n
    \n
    • \n
  • \n RM\n
    \n
    Rafael Moreau2 Mar
    \n Workshop keys\n I left the spare set in the top drawer.\n
    \n
    • \n
  • \n IB\n
    \n
    Ines Baptista28 Feb
    \n First proof\n Eleven corrections, most of them on page 14.\n
    \n
    • \n
\n \n
\n\n\n
\n\n
\n Wednesday, 11 March\n

Good morning, Marta

\n

Twelve unread messages, and three people are waiting for an answer from you today.

\n
\n Answer the oldest\n Mark all read\n
\n
\n\n
\n
\n
Unread
\n
12 5 since yesterday
\n
\n
\n
Waiting on you
\n
3 oldest from Monday
\n
\n
\n
Answered
\n
27 this week
\n
\n
\n\n
\n
\n \n
This thread is snoozed until noon. It returns to the top of the inbox then.
\n
\n
\n \n
Your reply of 08:55 was not sent. The attachment is larger than 25 MB.
\n
\n
\n\n
\n

Proofs for the spring catalogue Reply today

\n
\n IB\n Ines Baptista to Marta Keane, 09:42\n 2 files\n
\n
\n
\n

Second proof

\n

Two pages changed since Friday and both are marked in the margin.

\n

Page 14 now carries the corrected price list, and the cover uses the warmer grey you asked for. The file names follow the usual pattern, for example cat-spring-p14.pdf.

\n

What I need from you

\n

A yes or no on the cover by this afternoon, so that the plates can be made tomorrow.

\n

Still open

\n
    \n
  • The back cover address, which the shop has not confirmed.
    • \n
  • Whether the insert is stapled or loose.
    • \n
  • The number of copies for the fair.
    • \n
\n

\n Answer Ines\n First proof\n Print shop rule\n Deleted proofs\n Back to the inbox\n

\n
\n
\n
\n Reply\n Forward\n Delete\n
\n
\n\n
\n
\n \n cat-spring-p14.pdf\n Price list, 1.8 MB\n
\n
\n \n cat-spring-cover.pdf\n Cover, 4.2 MB\n
\n
\n \n Print shop\n Label, 31 threads\n
\n
\n \n Plates on Thursday\n Diary, 08:00\n
\n
\n\n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Inbox
    3. \n
  3. New message
    4. \n
\n
\n
\n

New message

\n

An answer to Ines Baptista, kept as a draft while you write.

\n
\n
\n Back to the inbox\n
\n
\n
\n\n
\n \n
The cover file is 31 MB. Attachments over 25 MB cannot be sent. Share it from Files in its place.
\n
\n\n
\n

Re: Proofs for the spring catalogue Draft, saved 09:58

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n \n
\n
\n
\n Send\n Save draft\n Discard\n
\n
\n\n
\n\n
\n
\n

Drafts

\n 2\n
\n
    \n
  • \n IB\n
    \n
    Ines Baptista09:58
    \n Re: Proofs for the spring catalogue\n Yes to the cover, the warmer grey is right.\n
    \n
    • \n
  • \n TO\n
    \n
    Tobias OkaforTue
    \n Re: Paper stock for April\n Please hold forty reams of the 120 gram.\n
    \n
    • \n
\n
\n

In this thread

\n 4\n
\n
    \n
  • \n IB\n
    \n
    Ines Baptista09:42
    \n Second proof\n Two pages changed since Friday.\n
    \n
    • \n
  • \n MK\n
    \n
    Marta KeaneFri
    \n Re: First proof\n The grey on the cover is too cold.\n
    \n
    • \n
  • \n IB\n
    \n
    Ines Baptista28 Feb
    \n First proof\n Eleven corrections, most of them on page 14.\n
    \n
    • \n
\n \n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Mail
    3. \n
  3. Bin
    4. \n
\n
\n
\n

Bin

\n

Deleted threads stay here for thirty days and are then removed for good.

\n
\n
\n Back to the inbox\n
\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ThreadFromRemoved inSize
Proofs, first roundInes Baptista2 days6.0 MB
Collection booked for MondayCourier pickups9 days0.1 MB
Winter meeting, minutesGuild of Printers14 days0.4 MB
Type samples, old setNoor Bakker21 days11.2 MB
Statement for JanuaryHanne Lindqvist27 days0.2 MB
\n\n
\n
\n
\n

Delete this thread?

\n
Four messages and two files go to the bin and are removed for good after thirty days.
\n
\n \n \n
\n
\n
\n
\n

Before it is gone

\n
\n A thread can be put back in its folder until its last day. Files that other threads still use are kept, and rules never touch the bin.\n
\n
\n Put back\n
\n
\n
\n\n
\n\n
\n
\n

Storage

\n 6.1 of 15 GB\n
\n
\n
\n The bin holds 17.9 MB in five threads.\n
\n
    \n
  • \n IN\n
    \n
    Inbox2.4 GB
    \n 1,912 threads\n Largest: spring catalogue proofs\n
    \n
    • \n
  • \n PS\n
    \n
    Print shop1.9 GB
    \n 31 threads\n Mostly proofs and plates\n
    \n
    • \n
  • \n AR\n
    \n
    Archive1.6 GB
    \n 4,020 threads\n Nothing newer than January\n
    \n
    • \n
  • \n BN\n
    \n
    Bin17.9 MB
    \n 5 threads\n Emptied a little every day\n
    \n
    • \n
\n \n
\n\n
\n
\n\n
\n
\n\n
\n\n
\n
    \n
  1. chronoskin
    2. \n
  2. Settings
    3. \n
  3. Rules
    4. \n
\n
\n
\n

Rules

\n

Five rules sort incoming mail before it reaches the inbox.

\n
\n
\n Back to mail\n New rule\n
\n
\n \n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
RuleStatusMoves mail toMatchedThis week
Invoices from suppliersActiveInvoices4129
Courier noticesActiveArchive1,23831
Print shop threadsActivePrint shop9614
NewslettersPausedWaiting570
Old guild listFailedFolder was deleted80
\n\n\n
\n
\n \n

No rules for the Family label

\n

Mail with this label is sorted by hand until you add a rule for it.

\n Add a rule\n
\n
\n
\n When rules run \n
Each new message is checked against the rules from the top of the list down, and the first one that matches moves it.
\n
\n
\n When a rule fails \n
A failed rule is skipped until its folder exists again. Its mail stays in the inbox meanwhile.
\n
\n
\n Rules and the bin \n
Rules never touch the bin, and a deleted thread is not sorted again when it is put back.
\n
\n
\n
\n\n
\n\n
\n
\n

New rule

\n Draft\n
\n
\n
\n
\n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n Enter at least three characters.\n
\n
\n \n \n
\n
\n \n \n Only you can see this.\n
\n \n \n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.neumorphism.app.s03.p04.t05.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"neumorphism\",\n \"years\": [\n 2019,\n 2021\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-nm-3454\",\n \"short\": \"v1-nm-3454\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: rgb(228 235 245);\n --color-canvas: rgb(228 235 245);\n --color-surface: rgb(228 235 245);\n --color-surface-alt: rgb(237 242 249);\n --color-surface-strong: rgb(210 219 235);\n --color-bar: rgb(228 235 245);\n --color-bar-text: rgb(16 17 18);\n --color-bar-alt: rgb(210 219 235);\n --color-bar-alt-text: rgb(16 17 18);\n --color-inverse: rgb(44 52 64);\n --color-inverse-text: rgb(228 235 245);\n --color-text: rgb(16 17 18);\n --color-text-muted: rgb(70 74 82);\n --color-heading: rgb(16 17 18);\n --color-heading-alt: rgb(70 74 82);\n --color-link: rgb(41 98 255);\n --color-link-quiet: rgb(16 17 18);\n --color-link-visited: rgb(112 128 144);\n --color-link-hover: rgb(16 17 18);\n --color-link-active: rgb(41 121 255);\n --color-border: rgb(206 214 234);\n --color-border-strong: rgb(190 200 228);\n --color-border-muted: rgb(255 255 255);\n --color-accent: rgb(41 121 255);\n --color-accent-text: rgb(255 255 255);\n --color-accent-alt: rgb(0 119 170);\n --color-fill-1: rgb(41 121 255);\n --color-fill-2: rgb(102 153 0);\n --color-fill-3: rgb(221 74 104);\n --color-fill-4: rgb(112 128 144);\n --color-button: rgb(41 121 255);\n --color-button-text: rgb(255 255 255);\n --color-button-hover-text: rgb(255 255 255);\n --color-button-secondary: rgb(228 235 245);\n --color-button-secondary-text: rgb(16 17 18);\n --color-input: rgb(228 235 245);\n --color-input-text: rgb(16 17 18);\n --color-input-border: rgb(190 200 228);\n --color-disabled: rgb(210 219 235);\n --color-disabled-text: rgb(70 74 82 / 0.6);\n --color-danger: rgb(198 40 72);\n --color-danger-surface: rgb(246 228 236);\n --color-success: rgb(102 153 0);\n --color-warning: rgb(214 118 0);\n --color-notice: rgb(237 242 249);\n --color-notice-text: rgb(16 17 18);\n --color-focus: rgb(41 121 255);\n --color-shadow: rgb(190 200 228);\n --color-overlay: rgb(44 52 64 / 0.3);\n}\n\n/* @part type */\n:root {\n --font-body: \"Open Sans\", \"Segoe UI\", Tahoma, \"DejaVu Sans\", sans-serif;\n --font-heading: Quicksand, \"Varela Round\", \"Century Gothic\", \"Trebuchet MS\", sans-serif;\n --font-ui: \"Open Sans\", \"Segoe UI\", Tahoma, \"DejaVu Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 14px;\n --text-large: 18px;\n --text-display: 44px;\n --text-h1: 30px;\n --text-h2: 22px;\n --text-h3: 17px;\n --line-body: 1.5;\n --line-heading: 1.35;\n --line-display: 1.15;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 700;\n --weight-display: 700;\n --weight-ui: 600;\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: 0;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 8px;\n --radius-panel: 8px;\n --radius-pill: 24px;\n --radius-page: 24px;\n --shadow-panel: 6px 6px 12px var(--color-shadow), -6px -6px 12px var(--color-border-muted);\n --shadow-control: 3px 3px 6px var(--color-shadow), -3px -3px 6px var(--color-border-muted);\n --shadow-control-hover: 6px 6px 12px var(--color-shadow), -6px -6px 12px var(--color-border-muted);\n --shadow-control-pressed: inset 2px 2px 5px var(--color-shadow), inset -2px -2px 5px var(--color-border-muted);\n --shadow-dialog: 9px 9px 18px var(--color-shadow), -9px -9px 18px color-mix(in srgb, var(--color-border-muted) 30%, transparent);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: linear-gradient(145deg, color-mix(in srgb, var(--color-surface) 55%, var(--color-border-muted)), color-mix(in srgb, var(--color-surface) 70%, var(--color-shadow)));\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button) 88%, var(--color-border-muted));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;\n --backdrop-blur: 0px;\n}\n" } }