{ "id": "v1-dd-2713", "long_id": "v1.dev-dark.app.s02.p07.t01.u03", "name": "Dark developer tools issue tracker", "era": { "slug": "dev-dark", "code": "dd", "name": "Dark developer tools", "years": [ 2019, 2026 ], "description": "Developer products of 2019 to 2026: a near-black page, hairline borders in translucent white, small precise sans type, subtle glows and gradients behind a hero, monospace details and one bright accent." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the signed-in side of a developer tool from 2019 to 2026: an issue tracker on a blue-black page, with a rail of icon links down the left edge, a top bar whose search field is the entry to a command palette, and a work area of hairline boxes. Rows are dense and led by a status dot; ids, commits, counts and dates are set in monospace, and here the headings and controls are monospace too. The one accent colour marks the primary action and the progress of the running cycle, over a single faint glow in the first card.", "url": "https://chrono.skin/s/v1-dd-2713", "preview_url": "https://chrono.skin/s/v1-dd-2713/specimen.html", "files": { "STYLE.md": "# Dark developer tools issue tracker\n\n## Summary\n\nThis is the signed-in side of a developer tool from 2019 to 2026: an issue tracker on a blue-black page, with a rail of icon links down the left edge, a top bar whose search field is the entry to a command palette, and a work area of hairline boxes. Rows are dense and led by a status dot; ids, commits, counts and dates are set in monospace, and here the headings and controls are monospace too. The one accent colour marks the primary action and the progress of the running cycle, over a single faint glow in the first card.\n\n## Layout\n\n- Designed for a 1440px viewport, not fluid beyond it. `.ds-page` is a grid of two columns: the rail (`.ds-nav`, `--size-rail` 232px) for the whole height, and beside it `.ds-topbar` (`--size-top` 48px, sticky), the showing view and the footer line. `.ds-content` is centred in the work area, at most `--size-page` (1120px) wide, padded by `--space-5` and `--space-6`, and stacks its children `--space-5` (24px) apart.\n- Navigation is the rail on `--fill-bar-alt`: `.ds-nav__head` with the brand and a key cap, groups of links under mono group names, each link an icon or a team dot, a label and an optional count; the current link sits on a 14% wash of the rail's text colour. The account is at the foot. `.ds-topbar` on `--fill-bar` holds a mono location, `.ds-search` (the palette field with its `Ctrl K` key cap) in the middle and two small buttons at the right.\n- The home view stacks: `.ds-hero`, one card with the state of the cycle and a meter of small squares; `.ds-stat`, four figures in one ruled box; `.ds-cols` (2 to 1) with the issue list panel beside a panel of deployments and the inverted `.ds-tip`; and `.ds-grid`, four project cards under a `.ds-colhead`.\n- Inner pages have no hero. `.ds-content` opens with `.ds-page-header`: the breadcrumb, a `--text-h2` title and a meta line at the left, at most two buttons at the right, and a rule below. Then the work: `.ds-cols--side` puts a `--size-side` (300px) column of properties at the right, `.ds-cols--even` halves, `.ds-cols--menu` puts a `.ds-subnav` of sections at the left of a settings page. Tabs are underlined and sit on the head of the panel that holds the table; the pagination is in its `.ds-table__foot`.\n- Views. The specimen has four. `issues` is the home view described above. `issue` is one issue: its description as prose, the activity list and the open delete dialog in the main column; the properties sidebar, the action buttons and linked items at the right. `deploys` is the table of deployments with tabs and pagination, then an empty state beside the environments. `settings` is the workspace form under its notices, beside the section menu, with the label key and the danger zone below.\n- Spacing scale: `--space-1` 4px (rail link and small button vertical padding, meter gaps), `--space-2` 8px (list row and button vertical padding, gaps between buttons and badges), `--space-3` 12px (panel head and table cell vertical padding), `--space-4` 16px (panel, stat and card padding), `--space-5` 24px (between blocks, hero padding), `--space-6` 32px (work area side padding, around a dialog), `--space-7` 48px (below the last block).\n- Other sizes: `--size-search` 420px, `--size-id` 68px (the id column of an issue row), `--size-icon` 16px, `--size-mark` 22px, `--size-dot` 8px, `--size-glow` 420px, `--size-dialog` 440px.\n- Below 1000px the rail becomes a block across the top with its links in one row that scrolls sideways, cards stand two across and column pairs stack. Below 640px everything is one column, an issue row wraps its labels under its title, and a wide table scrolls inside `.ds-table__wrap`.\n- On a phone the rail is a bar across the top from 1000px down: `.ds-nav__links--main` is one row that scrolls sideways, `.ds-nav__group`, `.ds-nav__foot`, the `.ds-kbd` and the other link lists are not shown, and `.ds-subnav` becomes a scrolling row whose current link has an `--color-accent-alt` line under it. At 640px and below each `.ds-nav__link` keeps only its `.ds-nav__label` (icon, badge and code are not shown) with tighter padding, the `.ds-menu` in `.ds-topbar__actions` keeps only its avatar (`.ds-menu__label` is not shown) and sits at the right, and a tooltip in a panel title opens under its line.\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\nThese are the conventions of the era. Every layout and every token set of dev-dark keeps to them.\n\n- Which text sits on which fill. `--color-text`, `--color-heading` and `--color-text-muted` sit on `--color-page`, `--color-canvas`, `--fill-panel`, `--color-surface-alt` and `--color-surface-strong`. `--color-bar-text` sits on `--fill-bar` (the top bar). `--color-bar-alt-text` sits on `--fill-bar-alt` (a side rail, the title strip of a code block, a table head, the footer); a heading on that fill may use `--color-heading`. `--color-inverse-text` sits on `--fill-inverse`, which is used for exactly one block per view. `--color-button-text` sits on `--fill-button`, `--color-button-secondary-text` on `--fill-button-secondary`, `--color-accent-text` on `--fill-accent`, `--color-input-text` on `--fill-input` (form controls and code blocks), `--color-notice-text` on `--color-notice`.\n- `--color-fill-1` to `--color-fill-4` never carry text. They are glows and tints: mixed with `transparent` at 12% to 34% behind text in the ordinary text colours, and at full strength or mixed 72% into `--color-heading` only for drawings, bars, cells and icons. `--color-fill-1` is the palette's glow colour: the hero, the page header, the featured plan. A palette may make any fill light or dark.\n- `--color-accent-alt` is a text and line colour, not a fill: mono labels, keywords in code, the marker of the current item, the \"new\" badge. It must read on the page and on a panel.\n- `--color-success`, `--color-warning` and `--color-danger` are used as a dot, as text, or as a 12% tint with a 32% hairline and the colour itself as text. Nothing is ever filled solid with them, so they need no text colour of their own. The destructive button is built the same way.\n- Borders: `--color-border` on every box and bar, `--color-border-strong` on secondary buttons, the dialog, the product window and the dashed empty state, `--color-border-muted` between rows inside a box and between bands. All `--border-width`; `--border-width-strong` is the focus offset and the ring around a status dot.\n- Type. One sans family for body, headings and controls, with `--font-mono` for data. `--text-base` 15px at `--line-body` 1.6; `--text-ui` 13px for navigation, buttons, forms, tables and card text; `--text-small` 12px for badges, mono labels, dates and table heads; `--text-large` 17px for the hero lead. `--text-display` 56px is the hero title only; `--text-h1` 36px page titles, section statements, figures and prices; `--text-h2` 24px column heads; `--text-h3` 15px panel and card titles in `--weight-bold`. Headings are `--weight-heading` 500 with slight negative tracking.\n- Uppercase appears only on mono labels (`.ds-eyebrow`, table heads, sidebar and footer titles), tracked by 6% of the font size; `--ui-transform` applies to buttons, tabs and navigation.\n- Links are `--color-link` without underline and gain one on hover; quiet links in breadcrumbs, the sidebar and the footer are `--color-link-quiet` and turn `--color-heading`.\n- Surface. `--radius-control` 6px for buttons, inputs and the brand tile, `--radius-panel` 8px for panels, code blocks, notices and the empty state, `--radius-page` 12px for the product window, grid cards, plans, the dialog and the inverted block, `--radius-pill` for badges and the announcement pill. `--shadow-panel` is on panels and cards, `--shadow-control` on buttons and the brand tile, `--shadow-dialog` on the dialog and the product window. `--shadow-text` reaches navigation links and buttons.\n- One-off values written with `calc()` and `color-mix()` because the vocabulary has no token: the glows (a fill at 18% to 34% over transparent), the drawing colour (72% of a fill in `--color-heading`), the wash behind the current navigation link (`--color-bar-text` at 9%), status tints (12% and 32%), the hovered destructive button (22%), the hovered inverse button (82% of `--color-inverse-text` in `--color-inverse`), the notice border (22% and 40%), key cap and inline code corners (half of `--radius-control`), the segmented control's corner (`--radius-control` plus `--space-1`), mono label tracking. Navigation links are at `opacity` 0.66 until current, customer names at 0.82, the text of the inverted block at 0.7. The empty state's outline is dashed.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill and makes the two-column grid; `.ds-nav`, `.ds-topbar`, the views and `.ds-footer` are its direct children.\n- `.ds-content`, `.ds-cols` (`--side`, `--even`, `--menu`), `.ds-stack`: the padded column of a view, the column pairs and a vertical stack. `.ds-panel--grow` fills spare height.\n- `.ds-brand`: the mark on a 22px tile dressed like the primary button, and the name. Placeholders for the installing project's own name and logo.\n- `.ds-nav`: the rail. `.ds-nav__head`, `.ds-nav__group`, `.ds-nav__links` (`--main` for the links that follow the view) of `.ds-nav__link` with `.ds-nav__icon`, `.ds-nav__label` and an optional badge or mono code; `.ds-nav__foot` with an avatar and `.ds-nav__who`. A project sets `is-current` on the current link.\n- `.ds-topbar`: `.ds-topbar__where`, `.ds-search` (`.ds-search__icon`, `.ds-search__text`, a `.ds-kbd`) and `.ds-topbar__actions`.\n- `.ds-hero`: home view only, one card: `.ds-hero__copy` with a `.ds-eyebrow`, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions`; `.ds-hero__art` holds `.ds-meter`, a grid of `.ds-meter__cell` (`--done`, `--doing`, `--late`) over `.ds-meter__key`.\n- `.ds-page-header`: `.ds-page-header__copy` (breadcrumb, `.ds-page-header__title`, `.ds-page-header__text`, which may start with a status badge) and `.ds-page-header__actions`.\n- `.ds-prose`: h1, h2, h3, p, lists, `code`, `strong`, inside a panel; `.ds-prose__lead`.\n- `.ds-code`: code block with `.ds-code__head`, `.ds-code__name`, `.ds-code__body` and the spans `__k`, `__s`, `__c`, `__n`.\n- `.ds-eyebrow`, `.ds-mono`, `.ds-kbd`, `.ds-dot` (`--success`, `--warning`, `--danger`, `--accent`, `--ring`), `.ds-avatar`: the small parts every row is made of.\n- `.ds-link`: `is-visited`, `is-hover`, `is-active`, `is-focus`; `--quiet`, `--more`. `.ds-linkrow`.\n- `.ds-button`: `--secondary`, `--danger`, `--inverse` (on `.ds-tip` only), `--small`, `--large`; `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow`.\n- `.ds-form`: `.ds-form__row`, `.ds-form__field`, `.ds-form__label`, `.ds-form__input` (`--mono`), `.ds-form__select`, `.ds-form__textarea` (`--mono`), `is-error` with `.ds-form__error`, `.ds-form__hint`, `.ds-form__check`, `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: in a panel under the tabs: mono uppercase head on `--fill-bar-alt`, hairline rows, `.ds-table__num`, `.ds-table__state`. `.ds-table__wrap`, `.ds-table__foot`.\n- `.ds-list`: issue rows in a panel. `.ds-list__group` heads a state; `.ds-list__item` is a dot, the mono `.ds-list__id`, the `.ds-list__title` link and `.ds-list__meta` (label badge, avatar, date).\n- `.ds-panel`: `.ds-panel__head`, `.ds-panel__title`, `.ds-panel__body`, `.ds-panel__rows` of `.ds-panel__row` with `.ds-panel__key`.\n- `.ds-stat`: the ruled box of four `.ds-stat__item`: a mono `.ds-stat__label` led by a dot, the `.ds-stat__figure` and a `.ds-stat__delta` (`--down`).\n- `.ds-grid`: four project cards. `.ds-grid__cell` (`--2`, `--3`, `--4`) is a link holding a mono key, `.ds-grid__title`, `.ds-grid__text`, `.ds-grid__bar` (`--50`, `--75`, `--90`) and `.ds-grid__foot`. `.ds-colhead` with `.ds-colhead__title` names the row.\n- `.ds-tabs`: underlined `.ds-tabs__tab` row on a panel head, each with an optional mono count; `is-current`.\n- `.ds-badge`: `--quiet`, `--outline`, `--new`, `--mono`; status `--success`, `--warning`, `--danger`. `.ds-badgerow`.\n- `.ds-sidebar`: the properties box: `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item`, each a `.ds-sidebar__key` and a link or value.\n- `.ds-subnav`: the sections of a settings page, `.ds-subnav__link` along a rule; `is-current`.\n- `.ds-activity`: `.ds-activity__item` rows of avatar, `.ds-activity__text` and a mono time.\n- `.ds-tip`: the inverted card: `.ds-tip__title`, a paragraph, one `.ds-button--inverse`.\n- `.ds-notice`: `--error`, `.ds-notice__title`, `.ds-noticerow`.\n- `.ds-pagination`: `.ds-pagination__link`, `is-current`, `is-disabled`.\n- `.ds-breadcrumb`: `.ds-breadcrumb__item`, `.ds-breadcrumb__current`.\n- `.ds-dialog`: `.ds-dialog__box`, `.ds-dialog__head`, `.ds-dialog__title`, `.ds-dialog__close`, `.ds-dialog__body`, `.ds-dialog__actions`.\n- `.ds-empty`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one small button, in a dashed box where a panel would be.\n- `.ds-footer`: one mono line on `--fill-bar-alt`: `.ds-footer__status`, the build, `.ds-footer__links` of `.ds-footer__link`.\n- `.ds-menu`: a drop-down behind a button in the bar (`.ds-menu__button`, `.ds-menu__list`); it lists every view, so on a phone it is the full navigation.\n- `.ds-menu__item`: one link of the drop-down; the current view carries the accent line and the stronger fill.\n- `.ds-menu__item--view`: an item of the menu that names a view of the site; the current view's item is marked by one `:has()` rule per view, like the bar links, so the menu is a second way to every view on a phone.\n- `.ds-menu__title`: a small mono label over a group of links in the drop-down.\n- `.ds-tooltip`: a small question mark beside a title; `.ds-tooltip__tip` opens on hover or focus, never by default.\n- `.ds-switch`: an on or off setting that takes effect at once, drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, `.ds-switch__label`).\n- `.ds-progress`: a thin bar for a build, a rollout or a quota, with a mono line above (`.ds-progress__head`, `.ds-progress__value`, `.ds-progress__bar`).\n\n## Never\n\n- `block-gap <= 32px`: blocks are 24px apart.\n- `font-size >= 12px`: badges, mono labels and dates are the smallest text.\n- `font-size <= 56px`: the hero title is the largest text.\n- `font-weight <= 600`: headings are medium, labels semibold; nothing is bold or black.\n- `font-families <= 2`: one sans-serif family and one monospace.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 5%`: only mono labels are uppercase.\n- `underlined-links <= 5%`: links are told apart by colour and underline on hover only.\n- `letter-spacing <= 3px`: only the mono customer names are spaced out, by 2px.\n- `border-width <= 2px`: rules are 1px; 2px marks the current section and the stat rules.\n- `border-radius <= 20px`: 10px on controls, 14px on panels, 20px on cards and the dialog; pills are shapes.\n- `box-shadow-blur <= 50px`: the dialog and the hero code block cast the widest shadow.\n- `text-shadow = none`: text is flat on every fill.\n- `gradient-fills <= 8%`: gradients are the glow, the faint light on panels and the primary button; no box is filled with a strong gradient.\n- `animation = none`: nothing moves by itself.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. Anything new in the work area is a `.ds-panel` with a `.ds-panel__head`, 24px from its neighbours; a new kind of record is a `.ds-list__item` or a table row led by a `.ds-dot`; a new destination is a `.ds-nav__link` with a 16px stroke icon; anything a developer would copy is `.ds-mono` or a `.ds-kbd`. Keep to the era's conventions for which text sits on which fill, tint with the fills and the status colours instead of filling with them, and use one glow and one inverted card per view. Spacing comes from the `--space-*` scale, and any one-off shade is a `color-mix()` of tokens noted next to the rule.\n", "components.css": ":root {\n --size-page: 1120px;\n --size-rail: 232px;\n --size-top: 48px;\n --size-side: 300px;\n --size-search: 420px;\n --size-mark: 22px;\n --size-dot: 8px;\n --size-icon: 16px;\n --size-id: 68px;\n --size-dialog: 440px;\n --size-glow: 420px;\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}\n\n/* shell: a rail for the whole height at the left; the top bar, the view and a status line beside it */\n.ds-page {\n display: grid;\n grid-template-columns: var(--size-rail) minmax(0, 1fr);\n grid-template-rows: auto 1fr auto;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n background: var(--fill-page);\n color: var(--color-text);\n font-family: var(--font-body);\n font-size: var(--text-base);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n.ds-view {\n grid-column: 2;\n grid-row: 2;\n min-width: 0;\n}\n.ds-content {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n max-width: var(--size-page);\n margin: 0 auto;\n padding: var(--space-5) var(--space-6) var(--space-7);\n}\n.ds-cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);\n gap: var(--space-5);\n align-items: stretch;\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) var(--size-side);\n}\n.ds-cols--menu {\n grid-template-columns: calc(var(--size-rail) - var(--space-7)) minmax(0, 1fr);\n}\n.ds-cols--even {\n grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n}\n.ds-stack {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n.ds-stack > .ds-panel--grow {\n flex: 1 0 auto;\n}\n\n/* nav: the rail on the secondary bar; workspace on top, icon links in groups, the account at the foot */\n.ds-nav {\n grid-column: 1;\n grid-row: 1 / span 3;\n position: sticky;\n top: 0;\n display: flex;\n flex-direction: column;\n align-self: start;\n min-width: 0;\n height: 100vh;\n padding: 0 var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-right: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-2);\n min-height: var(--size-top);\n padding: 0 var(--space-2);\n color: var(--color-heading);\n}\n.ds-nav__group {\n margin: var(--space-4) 0 var(--space-1);\n padding: 0 var(--space-2);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n opacity: 0.7;\n}\n.ds-nav__links {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: inherit;\n border-radius: var(--radius-control);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\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 background: color-mix(in srgb, var(--color-bar-alt-text) 8%, transparent);\n color: var(--color-bar-alt-text);\n}\n.ds-nav__link.is-current {\n background: color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n color: var(--color-bar-alt-text);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links--main .ds-nav__link[href=\"#issues\"],\n.ds-page:has(#issues:target) .ds-nav__links--main .ds-nav__link[href=\"#issues\"],\n.ds-page:has(#issue:target) .ds-nav__links--main .ds-nav__link[href=\"#issues\"],\n.ds-page:has(#deploys:target) .ds-nav__links--main .ds-nav__link[href=\"#deploys\"],\n.ds-page:has(#settings:target) .ds-nav__links--main .ds-nav__link[href=\"#settings\"] {\n background: color-mix(in srgb, var(--color-bar-alt-text) 14%, transparent);\n color: var(--color-heading);\n}\n.ds-nav__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-nav__label {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-nav__foot {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-top: auto;\n padding: var(--space-3) var(--space-2);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-nav__who {\n display: block;\n color: var(--color-heading);\n font-size: var(--text-ui);\n}\n\n/* top bar: a search field in the form of a command palette, then the one primary action */\n.ds-topbar {\n grid-column: 2;\n grid-row: 1;\n position: sticky;\n top: 0;\n z-index: 5;\n display: flex;\n align-items: center;\n gap: var(--space-4);\n min-width: 0;\n min-height: var(--size-top);\n padding: var(--space-2) var(--space-6);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n -webkit-backdrop-filter: blur(var(--backdrop-blur));\n backdrop-filter: blur(var(--backdrop-blur));\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-topbar__where {\n flex: 0 0 auto;\n font-family: var(--font-mono);\n font-size: var(--text-small);\n text-shadow: var(--shadow-text);\n opacity: 0.7;\n}\n.ds-search {\n display: flex;\n align-items: center;\n flex: 0 1 var(--size-search);\n gap: var(--space-2);\n min-width: 0;\n margin: 0 auto;\n padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);\n background: var(--fill-input);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n line-height: var(--line-body);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-search:hover,\n.ds-search.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-search:focus-visible,\n.ds-search.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n}\n.ds-search__icon {\n flex: 0 0 auto;\n width: var(--size-icon);\n height: var(--size-icon);\n}\n.ds-search__text {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-topbar__actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n}\n\n/* hero: the state of the running cycle in one glowing card */\n.ds-hero {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-5) var(--space-6);\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 overflow: hidden;\n}\n.ds-hero::before {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n width: 70%;\n height: var(--size-glow);\n background: radial-gradient(ellipse 60% 50% at 80% 0, color-mix(in srgb, var(--color-fill-1) 30%, transparent), transparent 72%);\n pointer-events: none;\n}\n.ds-hero__copy {\n position: relative;\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-hero__title {\n margin: var(--space-2) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-hero__lead {\n max-width: 56ch;\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n.ds-hero__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-hero__art {\n position: relative;\n flex: 0 0 34%;\n min-width: 0;\n}\n.ds-meter {\n display: grid;\n grid-template-columns: repeat(12, minmax(0, 1fr));\n gap: var(--space-1);\n margin: 0 0 var(--space-3);\n}\n.ds-meter__cell {\n aspect-ratio: 1;\n background: var(--color-surface-strong);\n border-radius: calc(var(--radius-control) * 0.5);\n}\n.ds-meter__cell--done {\n background: var(--color-fill-1);\n}\n.ds-meter__cell--doing {\n background: color-mix(in srgb, var(--color-fill-1) 40%, var(--color-surface-strong));\n}\n.ds-meter__cell--late {\n background: var(--color-warning);\n}\n.ds-meter__key {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: var(--space-1) var(--space-3);\n}\n\n/* page header: breadcrumb, title and a meta line at the left, actions at the right, a rule below */\n.ds-page-header {\n display: flex;\n align-items: flex-end;\n gap: var(--space-5);\n padding-bottom: var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-page-header__copy {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-page-header__title {\n margin: var(--space-2) 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 letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-page-header__actions {\n display: flex;\n flex-wrap: wrap;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* stats: four figures in one ruled box */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin: 0;\n padding: 0;\n list-style: none;\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 min-width: 0;\n padding: var(--space-4);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__label {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-stat__figure {\n display: block;\n margin: var(--space-2) 0 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h2);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n font-variant-numeric: tabular-nums;\n}\n.ds-stat__delta {\n display: block;\n color: var(--color-success);\n font-size: var(--text-small);\n}\n.ds-stat__delta--down {\n color: var(--color-danger);\n}\n\n/* list: issue rows; a state mark, the id, the title, labels, who and when */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-list__group {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-weight: var(--weight-ui);\n}\n.ds-list__item {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:last-child {\n border-bottom: 0;\n}\n.ds-list__item:hover,\n.ds-list__item.is-hover {\n background: var(--color-surface-alt);\n}\n.ds-list__id {\n flex: 0 0 var(--size-id);\n}\n.ds-list__title {\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-list__title:hover,\n.ds-list__title.is-hover {\n color: var(--color-link);\n}\n.ds-list__meta {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* grid: project cards; the key, the name, a thin bar of progress in the card's fill colour */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-4);\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n min-width: 0;\n padding: var(--space-4);\n background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-1) 12%, transparent), transparent 60%), var(--color-surface);\n color: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-panel);\n text-decoration: none;\n transition: var(--transition);\n}\n.ds-grid__cell--2 {\n background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-2) 12%, transparent), transparent 60%), var(--color-surface);\n color: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-3) 12%, transparent), transparent 60%), var(--color-surface);\n color: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: linear-gradient(180deg, color-mix(in srgb, var(--color-fill-4) 12%, transparent), transparent 60%), var(--color-surface);\n color: var(--color-fill-4);\n}\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n border-color: var(--color-border-strong);\n}\n.ds-grid__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-grid__text {\n flex: 1 0 auto;\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-grid__bar {\n display: block;\n height: var(--space-1);\n background: var(--color-surface-strong);\n border-radius: var(--radius-pill);\n overflow: hidden;\n}\n.ds-grid__bar span {\n display: block;\n width: 25%;\n height: 100%;\n background: currentColor;\n}\n.ds-grid__bar--50 span { width: 50%; }\n.ds-grid__bar--75 span { width: 75%; }\n.ds-grid__bar--90 span { width: 90%; }\n.ds-grid__foot {\n display: flex;\n justify-content: space-between;\n gap: var(--space-2);\n}\n.ds-colhead {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin: var(--space-2) 0 calc(var(--space-2) * -1);\n}\n.ds-colhead__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n\n/* tabs: an underlined row on the head of a panel */\n.ds-tabs {\n display: flex;\n gap: var(--space-4);\n margin: 0;\n padding: 0 var(--space-4);\n list-style: none;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-tabs__tab {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-bottom: calc(var(--border-width) * -1);\n padding: var(--space-3) 0;\n color: var(--color-text-muted);\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\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 white-space: nowrap;\n transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n color: var(--color-heading);\n border-bottom-color: var(--color-accent-alt);\n}\n\n/* sidebar: the properties of the open item, a key and a value per row */\n.ds-sidebar {\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 font-size: var(--text-ui);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n color: var(--color-text-muted);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-2) var(--space-4);\n list-style: none;\n}\n.ds-sidebar__item {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) 0;\n}\n.ds-sidebar__key {\n flex: 0 0 38%;\n color: var(--color-text-muted);\n}\n\n/* menu: the sections of a settings page */\n.ds-subnav {\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-subnav__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n color: var(--color-link-quiet);\n border-left: var(--border-width) var(--border-style) var(--color-border);\n line-height: var(--line-body);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-subnav__link:hover,\n.ds-subnav__link.is-hover {\n color: var(--color-heading);\n}\n.ds-subnav__link.is-current {\n color: var(--color-heading);\n border-left-color: var(--color-accent-alt);\n}\n\n/* activity: who did what, newest last */\n.ds-activity {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-activity__item {\n display: flex;\n align-items: flex-start;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-activity__item:last-child {\n border-bottom: 0;\n}\n.ds-activity__text {\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-activity__text strong {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n\n/* footer: one mono status line under the view */\n.ds-footer {\n grid-column: 2;\n grid-row: 3;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2) var(--space-5);\n min-width: 0;\n padding: var(--space-3) var(--space-6);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-footer__status {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-footer__links {\n display: flex;\n flex-wrap: wrap;\n flex: 1 1 auto;\n justify-content: flex-end;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-bar-alt-text);\n text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n color: var(--color-heading);\n}\n\n/* brand: the mark on a tile dressed like the primary button, the name beside it */\n.ds-brand {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n gap: var(--space-2);\n color: inherit;\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 72%;\n height: 72%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n\n/* small parts used everywhere: the mono label, the key cap, the status dot, the avatar */\n.ds-eyebrow {\n display: block;\n margin: 0;\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n letter-spacing: calc(var(--text-small) * 0.06);\n text-transform: uppercase;\n}\n.ds-eyebrow--accent {\n color: var(--color-accent-alt);\n}\n.ds-kbd {\n display: inline-block;\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n white-space: nowrap;\n}\n.ds-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: var(--size-dot);\n height: var(--size-dot);\n background: var(--color-text-muted);\n border-radius: 50%;\n}\n.ds-dot--success {\n background: var(--color-success);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-success) 22%, transparent);\n}\n.ds-dot--warning {\n background: var(--color-warning);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-warning) 22%, transparent);\n}\n.ds-dot--danger {\n background: var(--color-danger);\n box-shadow: 0 0 0 var(--border-width-strong) color-mix(in srgb, var(--color-danger) 22%, transparent);\n}\n.ds-dot--accent {\n background: var(--color-accent-alt);\n}\n.ds-dot--ring {\n background: transparent;\n border: var(--border-width-strong) var(--border-style) var(--color-text-muted);\n}\n.ds-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--size-mark);\n height: var(--size-mark);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: 50%;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n}\n.ds-mono {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n}\n\n/* typography */\n.ds-prose {\n color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n margin: 0 0 var(--space-3);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: 0 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: 0 0 var(--space-4);\n padding-left: var(--space-5);\n}\n.ds-prose li {\n margin-bottom: var(--space-1);\n}\n.ds-prose li::marker {\n color: var(--color-text-muted);\n}\n.ds-prose strong {\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-prose code {\n padding: 0 var(--space-1);\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: calc(var(--radius-control) * 0.5);\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n}\n.ds-prose a {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n}\n.ds-prose > :last-child {\n margin-bottom: 0;\n}\n.ds-prose__lead {\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n\n/* code block: a title strip on the secondary bar, lines in the mono font on the input fill */\n.ds-code {\n min-width: 0;\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-code__head {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-2) var(--space-4);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-code__name {\n flex: 1 1 auto;\n min-width: 0;\n}\n.ds-code__body {\n display: block;\n margin: 0;\n padding: var(--space-4);\n overflow-x: auto;\n font-family: var(--font-mono);\n font-size: var(--text-ui);\n line-height: var(--line-body);\n white-space: pre;\n}\n\n/* links */\n.ds-link {\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n outline: var(--focus-ring);\n outline-offset: var(--border-width-strong);\n}\n.ds-link--quiet,\n.ds-link--quiet:visited {\n color: var(--color-link-quiet);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--quiet:hover,\n.ds-link--quiet.is-hover {\n color: var(--color-heading);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-link--more::after {\n content: \" \\2192\";\n}\n.ds-linkrow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-5);\n margin: 0;\n font-size: var(--text-ui);\n}\n\n/* buttons */\n.ds-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n text-decoration: none;\n text-shadow: var(--shadow-text);\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 color: var(--color-button-hover-text);\n box-shadow: var(--shadow-control-hover);\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(--border-width-strong);\n}\n.ds-button--secondary {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-border-strong);\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-button-secondary-text);\n border-color: var(--color-text-muted);\n}\n.ds-button--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 45%, transparent);\n}\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: color-mix(in srgb, var(--color-danger) 22%, transparent);\n color: var(--color-danger);\n border-color: var(--color-danger);\n}\n.ds-button--inverse {\n background: var(--color-inverse-text);\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 82%, var(--color-inverse));\n color: var(--color-inverse);\n box-shadow: none;\n}\n.ds-button--small {\n padding: var(--space-1) var(--space-3);\n}\n.ds-button:disabled,\n.ds-button.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n border-color: var(--color-border-muted);\n box-shadow: none;\n cursor: default;\n}\n.ds-buttonrow {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n}\n\n/* form */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-form__row {\n display: flex;\n gap: var(--space-4);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n flex: 1 1 0;\n min-width: 0;\n}\n.ds-form__label {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n width: 100%;\n margin: 0;\n padding: var(--space-2) var(--space-3);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n 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__input--mono,\n.ds-form__textarea--mono {\n font-family: var(--font-mono);\n}\n.ds-form__textarea {\n min-height: calc(var(--space-7) * 2);\n line-height: var(--line-body);\n resize: vertical;\n}\n.ds-form__input::placeholder,\n.ds-form__textarea::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n}\n.ds-form__input:hover,\n.ds-form__select:hover,\n.ds-form__textarea:hover {\n border-color: var(--color-border-strong);\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n border-color: var(--color-focus);\n outline: var(--focus-ring);\n outline-offset: 0;\n}\n.ds-form__input.is-error {\n border-color: var(--color-danger);\n}\n.ds-form__error {\n color: var(--color-danger);\n font-size: var(--text-small);\n}\n.ds-form__hint {\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-form__check {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n}\n.ds-form__checkbox {\n margin: 0;\n accent-color: var(--color-button);\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* badge: a small label; the status variants are a tint of their colour with a hairline */\n.ds-badge {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: 0 var(--space-2);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: var(--line-body);\n letter-spacing: 0;\n text-transform: var(--ui-transform);\n vertical-align: middle;\n white-space: nowrap;\n}\n.ds-badge--quiet {\n background: var(--color-surface-strong);\n color: var(--color-text);\n border-color: var(--color-border);\n}\n.ds-badge--new {\n background: color-mix(in srgb, var(--color-accent-alt) 12%, transparent);\n color: var(--color-accent-alt);\n border-color: color-mix(in srgb, var(--color-accent-alt) 32%, transparent);\n}\n.ds-badge--success {\n background: color-mix(in srgb, var(--color-success) 12%, transparent);\n color: var(--color-success);\n border-color: color-mix(in srgb, var(--color-success) 32%, transparent);\n}\n.ds-badge--warning {\n background: color-mix(in srgb, var(--color-warning) 12%, transparent);\n color: var(--color-warning);\n border-color: color-mix(in srgb, var(--color-warning) 32%, transparent);\n}\n.ds-badge--danger {\n background: color-mix(in srgb, var(--color-danger) 12%, transparent);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 32%, transparent);\n}\n.ds-badgerow {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--color-text-muted);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-breadcrumb__item + .ds-breadcrumb__item::before {\n content: \"/\";\n margin-right: var(--space-2);\n color: var(--color-border-strong);\n}\n.ds-breadcrumb__current {\n color: var(--color-heading);\n}\n\n/* table: hairline rows; the head is a strip of small mono labels on the secondary bar */\n.ds-table {\n width: 100%;\n border-collapse: collapse;\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-3) var(--space-4);\n text-align: left;\n vertical-align: middle;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-table thead th {\n padding-top: var(--space-2);\n padding-bottom: var(--space-2);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: calc(var(--text-small) * 0.04);\n text-transform: uppercase;\n white-space: nowrap;\n}\n.ds-table tbody tr:last-child th,\n.ds-table tbody tr:last-child td {\n border-bottom: 0;\n}\n.ds-table tbody th {\n color: var(--color-heading);\n font-weight: var(--weight-ui);\n}\n.ds-table tbody tr:hover td,\n.ds-table tbody tr:hover th,\n.ds-table tbody tr.is-hover td,\n.ds-table tbody tr.is-hover th {\n background: var(--color-surface-alt);\n}\n.ds-table .ds-table__num {\n text-align: right;\n font-family: var(--font-mono);\n font-variant-numeric: tabular-nums;\n}\n.ds-table__state {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n white-space: nowrap;\n}\n.ds-table__wrap {\n overflow-x: auto;\n}\n.ds-table__foot {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n color: var(--color-text-muted);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-small);\n}\n\n/* panel: a hairline box on the surface fill */\n.ds-panel {\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-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-panel__title {\n margin: 0;\n color: var(--color-heading-alt);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\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-4);\n}\n.ds-panel__body p {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__body > :last-child {\n margin-bottom: 0;\n}\n.ds-panel > .ds-code {\n border: 0;\n border-radius: 0 0 calc(var(--radius-panel) - var(--border-width)) calc(var(--radius-panel) - var(--border-width));\n}\n.ds-panel__rows {\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--text-ui);\n}\n.ds-panel__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-panel__row:last-child {\n border-bottom: 0;\n}\n.ds-panel__key {\n color: var(--color-text-muted);\n}\n\n/* notice */\n.ds-notice {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-notice-text) 22%, transparent);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-notice--error {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n display: flex;\n flex-direction: column;\n gap: var(--space-2);\n}\n\n/* pagination */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__link {\n display: block;\n min-width: calc(var(--space-6) - var(--space-1));\n padding: var(--space-1) var(--space-2);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-control);\n line-height: var(--line-heading);\n text-align: center;\n text-decoration: var(--link-decoration-quiet);\n font-variant-numeric: tabular-nums;\n transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-heading);\n border-color: var(--color-border);\n}\n.ds-pagination__link.is-current {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n}\n.ds-pagination__link.is-disabled {\n color: var(--color-disabled-text);\n}\n\n/* dialog: a dimmed block with the box in its middle */\n.ds-dialog {\n display: flex;\n justify-content: center;\n padding: var(--space-6) var(--space-4);\n background: var(--color-overlay);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n background: var(--color-surface-alt);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-page);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-4) 0;\n}\n.ds-dialog__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-dialog__close {\n color: var(--color-text-muted);\n text-decoration: none;\n}\n.ds-dialog__close::before {\n content: \"\";\n display: inline-block;\n width: calc(var(--text-base) * 0.75);\n height: calc(var(--text-base) * 0.75);\n background: currentColor;\n clip-path: polygon(calc(50% - var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) 0, calc(50% + var(--space-2) / 8) calc(50% - var(--space-2) / 8), 100% calc(50% - var(--space-2) / 8), 100% calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) calc(50% + var(--space-2) / 8), calc(50% + var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) 100%, calc(50% - var(--space-2) / 8) calc(50% + var(--space-2) / 8), 0 calc(50% + var(--space-2) / 8), 0 calc(50% - var(--space-2) / 8), calc(50% - var(--space-2) / 8) calc(50% - var(--space-2) / 8));\n rotate: 45deg;\n vertical-align: middle;\n}\n.ds-dialog__body {\n padding: var(--space-2) var(--space-4) var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\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);\n}\n\n/* empty state */\n.ds-empty {\n padding: var(--space-6) var(--space-4);\n border: var(--border-width) dashed var(--color-border-strong);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__icon {\n width: var(--space-6);\n height: var(--space-6);\n color: var(--color-text-muted);\n}\n.ds-empty__title {\n margin: var(--space-2) 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n margin: 0 auto var(--space-4);\n max-width: 44ch;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n.ds-panel__body > .ds-linkrow {\n margin-top: var(--space-4);\n}\n.ds-panel__body > .ds-badgerow + p {\n margin-top: var(--space-3);\n}\n\n/* the inverted card: the one place the palette turns over */\n.ds-tip {\n padding: var(--space-4);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-panel);\n font-size: var(--text-ui);\n}\n.ds-tip__title {\n display: block;\n font-weight: var(--weight-bold);\n}\n.ds-tip .ds-mono {\n color: inherit;\n}\n.ds-tip p {\n margin: var(--space-1) 0 var(--space-3);\n opacity: 0.75;\n}\n\n/* medium windows: the rail becomes a block across the top with its links in one row */\n@media (max-width: 1000px) {\n .ds-page {\n display: block;\n min-height: 0;\n }\n .ds-nav {\n position: static;\n flex-direction: row;\n align-items: center;\n gap: var(--space-2);\n height: auto;\n overflow-x: auto;\n border-right: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-nav__group,\n .ds-nav__foot,\n .ds-nav__head .ds-kbd {\n display: none;\n }\n .ds-nav__links {\n display: flex;\n gap: var(--space-1);\n }\n .ds-nav__link {\n white-space: nowrap;\n }\n .ds-nav__label {\n overflow: visible;\n }\n .ds-grid {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-cols,\n .ds-cols--side,\n .ds-cols--even,\n .ds-cols--menu {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-subnav {\n display: flex;\n overflow-x: auto;\n }\n .ds-subnav__link {\n border-left: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n white-space: nowrap;\n }\n .ds-subnav__link.is-current {\n border-bottom-color: var(--color-accent-alt);\n }\n}\n\n/* narrow windows: everything in one column */\n@media (max-width: 640px) {\n .ds-topbar {\n padding: var(--space-2) var(--space-4);\n gap: var(--space-2);\n }\n .ds-topbar__where,\n .ds-search .ds-kbd {\n display: none;\n }\n .ds-content {\n gap: var(--space-4);\n padding: var(--space-4) var(--space-4) var(--space-6);\n }\n .ds-hero {\n flex-direction: column;\n align-items: stretch;\n gap: var(--space-4);\n padding: var(--space-4);\n }\n .ds-hero__copy,\n .ds-hero__art {\n flex: 0 0 auto;\n }\n .ds-hero__title {\n font-size: var(--text-h2);\n }\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat__item:nth-child(odd) {\n border-left: 0;\n }\n .ds-stat__item:nth-child(n + 3) {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n }\n .ds-list__item {\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-2);\n padding: var(--space-3) var(--space-4);\n }\n .ds-list__id {\n flex: 0 0 auto;\n }\n .ds-list__title {\n flex: 1 1 60%;\n white-space: normal;\n }\n .ds-list__meta {\n flex: 1 1 100%;\n flex-wrap: wrap;\n }\n .ds-grid {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-page-header {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-3);\n }\n .ds-page-header__copy {\n flex: 0 0 auto;\n }\n .ds-tabs {\n overflow-x: auto;\n }\n .ds-table {\n min-width: 64ch;\n }\n .ds-form__row {\n flex-direction: column;\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n .ds-footer {\n padding: var(--space-3) var(--space-4);\n }\n .ds-footer__links {\n justify-content: flex-start;\n }\n}\n\n/* menu: a drop-down behind a button in the bar; on a phone it is the way to every view */\n.ds-menu {\n position: relative;\n display: inline-block;\n flex: 0 0 auto;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n line-height: var(--line-heading);\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button::after {\n content: \"\";\n width: var(--space-1);\n height: var(--space-1);\n margin-left: var(--space-1);\n border-right: var(--border-width) var(--border-style) currentColor;\n border-bottom: var(--border-width) var(--border-style) currentColor;\n transform: rotate(45deg);\n}\n.ds-menu__button .ds-avatar {\n margin: calc(var(--space-1) * -1) 0;\n}\n.ds-menu__button:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-menu[open] > .ds-menu__button {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 30;\n min-width: calc(var(--size-mark) * 9);\n margin: var(--space-1) 0 0;\n padding: var(--space-1);\n list-style: none;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n text-align: left;\n}\n.ds-menu__title {\n padding: var(--space-2) var(--space-2) var(--space-1);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n white-space: nowrap;\n}\n.ds-menu__title--rule {\n margin-top: var(--space-1);\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-menu__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-1) var(--space-2);\n color: var(--color-text);\n border-left: var(--border-width-strong) var(--border-style) var(--color-surface);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n text-decoration: var(--link-decoration-quiet);\n white-space: nowrap;\n}\n.ds-menu__item:hover,\n.ds-menu__item:focus-visible {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-left-color: var(--color-surface-strong);\n}\n.ds-menu__hint {\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n\n/* tooltip: a hint that opens on hover or focus */\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--space-4);\n height: var(--space-4);\n margin-left: var(--space-1);\n vertical-align: middle;\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n line-height: 1;\n letter-spacing: 0;\n text-transform: none;\n cursor: help;\n}\n.ds-tooltip:focus-visible {\n outline: var(--focus-ring);\n}\n.ds-tooltip__tip {\n position: absolute;\n bottom: 100%;\n left: 0;\n z-index: 20;\n display: none;\n width: max-content;\n max-width: calc(var(--size-mark) * 10);\n margin-bottom: var(--space-2);\n padding: var(--space-2) var(--space-3);\n background: var(--color-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-control);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n text-align: left;\n white-space: normal;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip {\n display: block;\n}\n\n/* switch: an on and off setting drawn over a checkbox */\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n.ds-switch__track {\n position: relative;\n flex: 0 0 auto;\n width: calc(var(--space-4) * 2 + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-pill);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: var(--border-width-strong);\n bottom: var(--border-width-strong);\n left: var(--border-width-strong);\n width: 40%;\n background: var(--color-text-muted);\n border-radius: var(--radius-pill);\n}\n.ds-switch__input:checked + .ds-switch__track {\n background: var(--color-accent);\n border-color: var(--color-accent);\n}\n.ds-switch__input:checked + .ds-switch__track::after {\n left: auto;\n right: var(--border-width-strong);\n background: var(--color-accent-text);\n}\n.ds-switch__input:focus-visible + .ds-switch__track {\n outline: var(--focus-ring);\n}\n.ds-switch__label {\n font-size: var(--text-ui);\n}\n\n/* progress: a thin bar for a build, a rollout or a quota */\n.ds-progress {\n display: block;\n min-width: 0;\n}\n.ds-progress__head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--space-3);\n margin-bottom: var(--space-2);\n color: var(--color-text-muted);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n line-height: var(--line-heading);\n}\n.ds-progress__value {\n color: var(--color-heading);\n font-variant-numeric: tabular-nums;\n}\n.ds-progress__bar {\n display: block;\n width: 100%;\n height: var(--size-dot);\n overflow: hidden;\n appearance: none;\n -webkit-appearance: none;\n background: var(--color-surface-strong);\n color: var(--color-accent);\n border: 0;\n border-radius: var(--radius-pill);\n}\n.ds-progress__bar::-webkit-progress-bar {\n background: var(--color-surface-strong);\n}\n.ds-progress__bar::-webkit-progress-value {\n background: var(--color-accent);\n}\n.ds-progress__bar::-moz-progress-bar {\n background: var(--color-accent);\n}\n.ds-page:not(:has(.ds-view:target)) .ds-menu__item--view[href=\"#issues\"],\n.ds-page:has(#issues:target) .ds-menu__item--view[href=\"#issues\"],\n.ds-page:has(#issue:target) .ds-menu__item--view[href=\"#issues\"],\n.ds-page:has(#deploys:target) .ds-menu__item--view[href=\"#deploys\"],\n.ds-page:has(#settings:target) .ds-menu__item--view[href=\"#settings\"] {\n background: var(--color-surface-strong);\n color: var(--color-heading);\n border-left-color: var(--color-accent);\n font-weight: var(--weight-bold);\n}\n@media (max-width: 640px) {\n .ds-menu__label {\n display: none;\n }\n}\n@media (max-width: 1000px) {\n .ds-nav__links:not(.ds-nav__links--main) {\n display: none;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__icon {\n display: none;\n }\n}\n@media (max-width: 640px) {\n .ds-nav {\n gap: var(--space-1);\n padding-right: var(--space-3);\n padding-left: var(--space-3);\n }\n .ds-nav .ds-nav__link {\n padding-right: var(--space-2);\n padding-left: var(--space-2);\n }\n .ds-nav .ds-nav__link > :not(.ds-nav__label) {\n display: none;\n }\n}\n\n/* phones: the tooltip stays inside the window; the search field takes its own row above the actions */\n@media (max-width: 640px) {\n .ds-panel__title {\n position: relative;\n }\n .ds-panel__title .ds-tooltip {\n position: static;\n }\n .ds-panel__title .ds-tooltip__tip {\n max-width: min(calc(var(--size-mark) * 10), calc(100vw - var(--space-4) * 4));\n }\n .ds-topbar {\n flex-wrap: wrap;\n }\n .ds-search,\n .ds-topbar__actions {\n flex: 1 0 100%;\n }\n .ds-topbar__actions > .ds-menu {\n margin-left: auto;\n }\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: dark developer tools issue tracker specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n G I\n
\n

Workspace

\n \n

Teams

\n \n
\n RV\n Runa VestergaardNorthwind, admin\n
\n
\n\n
\n northwind / web\n \n \n Search issues or run a command\n Ctrl K\n \n
\n Deploy\n New issue\n
RVRuna
\n
\n
\n\n
\n
\n
\n
\n Cycle 14 / ends Friday\n

9 of 23 issues done, 3 days left

\n

The team closes about four issues a day, so this cycle lands on time if nothing new is pulled in.

\n
\n New issue\n See what shipped\n
\n
\n
\n
\n \n \n
\n
9 done6 in progress2 blocked6 todo
\n
\n
\n\n \n\n
\n
\n
\n

Active issues

\n All 23\n
\n \n
\n\n
\n
\n

Latest deployments ?Every push builds a deployment. The time is since the build finished.

All
\n
\n
    \n
  • main7be02d1 / 4m
    • \n
  • fix/retry-uploadsa41f9c2 / now
    • \n
  • feat/usage-exportc93a771 / 26m
    • \n
  • chore/bump-runtime19d4e0b / 1h
    • \n
  • docs/shortcuts52f8a36 / 3h
    • \n
\n
\n
\n
\n Close issues from a commit\n

Write fixes WEB-142 in the message and the issue closes when the commit is deployed.

\n Connect a repository\n
\n
\n
\n\n

Projects

4 active
\n
\n \n WEB / Q1\n

Resilient uploads

\n

Uploads survive a dropped connection.

\n \n 9 of 12due 28 Mar\n \n \n WEB / Q1\n

Billing exports

\n

Usage and invoices as files.

\n \n 4 of 8due 4 Apr\n \n \n PLT / Q1\n

Cache migration

\n

Sessions move to the new cluster.

\n \n 10 of 11due 21 Mar\n \n \n MOB / Q2\n

Offline mode

\n

Drafts and comments without a signal.

\n \n 3 of 14due 30 May\n \n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Issues
    2. \n
  2. Web
    3. \n
  3. WEB-142
    4. \n
\n

Retry uploads that time out on slow connections

\n

In progress Opened by Imre Solvang on 10 March 2025, 4 comments

\n
\n
\n Back to issues\n Mark as done\n
\n
\n\n
\n
\n
\n
\n
\n

What goes wrong

\n

An upload over 20 MB fails for good when the connection stalls for more than ten seconds.

\n

The client sends the file in one request. When that request times out the whole upload is thrown away, and the user starts again from zero.

\n

Proposed fix

\n
    \n
  • Send the file in parts of 5 MB
    • \n
  • Retry a failed part up to three times, waiting longer each time
    • \n
  • Keep finished parts for an hour so a reload can resume
    • \n
\n

How to check it

\n

Throttle the network to 200 kbit/s, upload fixtures/large.bin and pull the cable for fifteen seconds.

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

Activity

newest last
\n
    \n
  • ISImre Solvang opened the issue and added the label Bug10 Mar
    • \n
  • RVRuna Vestergaard moved it from Todo to In progress11 Mar
    • \n
  • RVRuna Vestergaard pushed a41f9c2 to fix/retry-uploads. The preview is building.now
    • \n
\n
\n\n
\n
\n
\n

Delete WEB-142?

\n \n
\n
\n

The issue, its 4 comments and its history are removed for everyone. The branch and its deployments stay.

\n
\n
\n Keep it\n Delete issue\n
\n
\n
\n
\n\n
\n \n
\n

Actions

\n
\n
\n Mark as done\n Assign\n \n Delete\n
\n
\n
\n
\n

Linked

\n
\n \n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Northwind
    2. \n
  2. Deployments
    3. \n
\n

Deployments

\n

Every build of every branch, and the issues each one closed.

\n
\n
\n Environments\n Deploy main\n
\n
\n\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n
BranchCommitStateClosesByBuild, sSize, kB
fix/retry-uploadsa41f9c2BuildingWEB-142Runa V.41812
main7be02d1ProductionWEB-136Imre S.38806
feat/usage-exportc93a771PreviewWEB-139Imre S.44831
chore/bump-runtime19d4e0bFailednoneKofi O.120
docs/shortcuts52f8a36PreviewWEB-147Ada O.36806
spike/edge-cachee07b115ExpirednoneKofi O.52904
\n
\n
\n Showing 6 of 128 deployments\n \n
\n
\n\n
\n
\n \n

No incidents this cycle

\n

A failed production deployment or a rollback would be listed here with the issue that caused it.

\n Set up alerts\n
\n
\n

Environments

Manage
\n
\n
    \n
  • Production7be02d1 / 3 regions
    • \n
  • Stagingc93a771 / 1 region
    • \n
  • Preview12 live / expire in 14 d
    • \n
  • Sandboxpaused
    • \n
\n
\n
Building fix/retry-uploads, a41f9c2step 5 of 8
62%
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. Northwind
    2. \n
  2. Settings
    3. \n
  3. Workspace
    4. \n
\n

Workspace settings

\n

Name, address and defaults for everyone in Northwind.

\n
\n
\n Discard changes\n
\n
\n\n
\n \n\n
\n
\n

Changes apply to all 14 members. Their open tabs pick them up on the next reload.

\n

The settings were not saved. Fix the highlighted field and save again.

\n
\n
\n

General

id ws_8f2c41
\n
\n
\n
\n \n \n
\n
\n \n \n
\n \n \n
\n \n Reset\n
\n
\n
\n
\n\n
\n
\n

Labels

Edit
\n
\n
\n Release\n Feature\n Idea\n Shipped\n Infra\n Bug\n
\n

\n Import labels\n Label guide\n Archive unused\n Sort by use\n

\n
\n
\n
\n

Danger zone

\n
\n

Deleting the workspace removes 1,204 issues and every deployment record. This cannot be undone.

\n
\n Export everything\n Delete workspace\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.dev-dark.app.s02.p07.t01.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"dev-dark\",\n \"years\": [\n 2019,\n 2026\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-dd-2713\",\n \"short\": \"v1-dd-2713\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #131312;\n --color-canvas: #131312;\n --color-surface: #191918;\n --color-surface-alt: #1f1f1d;\n --color-surface-strong: #2b2b28;\n --color-bar: #131312;\n --color-bar-text: #e8e8e2;\n --color-bar-alt: #0e0e0d;\n --color-bar-alt-text: #9c9c94;\n --color-inverse: #c8f23a;\n --color-inverse-text: #11150a;\n --color-text: #c7c7c0;\n --color-text-muted: #86867f;\n --color-heading: #f6f6f0;\n --color-heading-alt: #deded7;\n --color-link: #c8f23a;\n --color-link-quiet: #9c9c94;\n --color-link-visited: #a9bd6a;\n --color-link-hover: #e4ff80;\n --color-link-active: #9fc41f;\n --color-border: #2f2f2c;\n --color-border-strong: #56564f;\n --color-border-muted: #232321;\n --color-accent: #c8f23a;\n --color-accent-text: #11150a;\n --color-accent-alt: #d6fb52;\n --color-fill-1: #c8f23a;\n --color-fill-2: #f6f6f0;\n --color-fill-3: #6fd3c7;\n --color-fill-4: #6c6c65;\n --color-button: #c8f23a;\n --color-button-text: #11150a;\n --color-button-hover-text: #11150a;\n --color-button-secondary: #191918;\n --color-button-secondary-text: #f6f6f0;\n --color-input: #0e0e0d;\n --color-input-text: #f6f6f0;\n --color-input-border: #45453f;\n --color-disabled: #1f1f1d;\n --color-disabled-text: #5f5f58;\n --color-danger: #ff5d4a;\n --color-danger-surface: #241311;\n --color-success: #58d68d;\n --color-warning: #ffb224;\n --color-notice: #1b1e10;\n --color-notice-text: #dcefa0;\n --color-focus: #e4ff80;\n --color-shadow: rgb(0 0 0 / 0.55);\n --color-overlay: rgb(8 8 7 / 0.76);\n}\n\n/* @part type */\n:root {\n --font-body: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-heading: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-ui: Inter, \"SF Pro Display\", -apple-system, system-ui, \"Segoe UI\", Roboto, sans-serif;\n --font-mono: \"Geist Mono\", ui-monospace, \"SF Mono\", Menlo, Consolas, monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 17px;\n --text-display: 56px;\n --text-h1: 36px;\n --text-h2: 24px;\n --text-h3: 15px;\n --line-body: 1.6;\n --line-heading: 1.25;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 600;\n --weight-heading: 500;\n --weight-display: 500;\n --weight-ui: 500;\n --heading-transform: none;\n --heading-tracking: -0.3px;\n --display-tracking: -1.6px;\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: 10px;\n --radius-panel: 14px;\n --radius-pill: 9999px;\n --radius-page: 20px;\n --shadow-panel: inset 0 1px 0 color-mix(in srgb, white 6%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 60%, transparent);\n --shadow-control: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 1px 3px var(--color-shadow);\n --shadow-control-hover: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 0 20px color-mix(in srgb, var(--color-button) 40%, transparent);\n --shadow-control-pressed: inset 0 2px 4px var(--color-shadow);\n --shadow-dialog: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 24px 50px var(--color-shadow);\n --shadow-text: none;\n --fill-page: radial-gradient(ellipse 70% 480px at 50% 0, color-mix(in srgb, var(--color-fill-1) 9%, transparent), transparent) no-repeat, var(--color-page);\n --fill-bar: color-mix(in srgb, var(--color-bar) 55%, transparent);\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(180deg, color-mix(in srgb, var(--color-surface) 95%, white), var(--color-surface));\n --fill-button: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 86%, white), var(--color-button));\n --fill-button-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-button) 74%, white), color-mix(in srgb, var(--color-button) 92%, white));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n --backdrop-blur: 0px;\n}\n" } }