{ "id": "v1-wk-5344", "long_id": "v1.wiki-2000s.app.s05.p03.t04.u04", "name": "Team wiki, header bar and page tree, 2003 to 2010", "era": { "slug": "wiki-2000s", "code": "wk", "name": "Wiki", "years": [ 2003, 2010 ], "description": "Collaborative reference sites of 2003 to 2010: a narrow column of links at the left, tabs above a white article sheet, blue and red links, grey bordered boxes for contents and facts, small sans text and tables of plain data." }, "archetype": "app", "mode": "mix", "viewport": { "width": 1024, "fluid": true }, "summary": "This is the team or project wiki that offices ran from about 2005: a glossy blue header bar with the name, the main sections as tabs and a search box, a pale strip of space links under it, and below that a pane with the tree of pages beside the pane with the page itself. A page has a trail, a title with its author line, a row of operation tabs, tinted note and tip boxes, ruled tables, a strip of labels, its attachments and a thread of comments with people drawn as initials. Text is 12px Tahoma, corners are barely rounded, bars and buttons carry a short gradient, and only dialogs cast a shadow.", "url": "https://chrono.skin/s/v1-wk-5344", "preview_url": "https://chrono.skin/s/v1-wk-5344/specimen.html", "files": { "STYLE.md": "# Team wiki, header bar and page tree, 2003 to 2010\n\n## Summary\n\nThis is the team or project wiki that offices ran from about 2005: a glossy blue header bar with the name, the main sections as tabs and a search box, a pale strip of space links under it, and below that a pane with the tree of pages beside the pane with the page itself. A page has a trail, a title with its author line, a row of operation tabs, tinted note and tip boxes, ruled tables, a strip of labels, its attachments and a thread of comments with people drawn as initials. Text is 12px Tahoma, corners are barely rounded, bars and buttons carry a short gradient, and only dialogs cast a shadow.\n\n## Layout\n\n- The page is fluid. `--size-page` is `100%`; the header `.ds-nav` runs edge to edge. Designed at 1024px; it does not reflow for phones.\n- Order from the top: the header (the bar `.ds-nav__bar` in the bar fill, the strip `.ds-nav__sub` in the secondary bar fill); `.ds-page__body`, a grid of the `--size-tree` (214px) tree pane `.ds-sidebar` and the content pane `.ds-page__main`, with `--space-4` (8px) around and between them; the footer band in the inverse fill. Both panes are `--color-canvas` with a 1px outline. No text sits on the page colour, which shows only as the gaps.\n- Views. The specimen is a four-screen example team wiki; the bar has one tab per view and the current one takes the canvas colour. `dashboard` (home) is the welcome panel, four counters, the spaces grid, then the recently updated list beside two panels. `page` is one wiki page: trail, title, operation tabs, the text beside a tinted facts panel and a note, the steps table, labels, attachments and comments. `pages` lists the pages of a space: tabs, table, paging and an empty section. `edit` is the editor: two notices, the form beside notation help, and the page properties dialog.\n- Inner pages (every view but `dashboard`) start with `.ds-breadcrumb`, then `.ds-page-header` in place of the welcome panel (title and a muted author line at the left, buttons at the right, no rule), then `.ds-tabs` on a thick bar-coloured rule, then the working blocks in `.ds-view__body`, `--space-5` (10px) apart.\n- Two-column areas inside the content pane use `.ds-layout` (fluid column and a `--size-help` (220px) column) or `.ds-layout--even` (3 to 2), with `.ds-layout__col` for a column of several blocks.\n- Form rows are a right-aligned `--size-label` (120px) label cell and the field cell; inputs are `--size-field` (320px), the header search `--size-search` (150px), the editor `--size-editor` (150px) tall. An avatar is `--size-avatar` (26px) square. A dialog is `--size-dialog` (460px) wide.\n- Spacing scale: `--space-1` 2px, `--space-2` 3px, `--space-3` 5px, `--space-4` 8px, `--space-5` 10px, `--space-6` 15px, `--space-7` 22px.\n - `--space-1`: gap between tabs, padding of tree rows.\n - `--space-2`: vertical padding of tabs, table cells, strips and buttons.\n - `--space-3`: vertical padding of bar tabs and list rows, gap between buttons.\n - `--space-4`: horizontal padding of cells and boxes; the gap around and between the panes; gap between cards.\n - `--space-5`: gap between blocks, padding of panel bodies.\n - `--space-6`: side padding of the content pane, gap between its columns, indent of a tree level.\n - `--space-7`: indent of a reply in the comments.\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- Text on fills follows the era's conventions (see the first layout of this era): no text on `--color-page`; body, muted, heading and link colours, `--color-danger` and `--color-success` on the canvas, the three surfaces, `--fill-panel` and the four fills; only `--color-bar-text` on `--fill-bar`, `--color-bar-alt-text` on `--fill-bar-alt`, `--color-inverse-text` on `--fill-inverse`, `--color-accent-text` on `--fill-accent`, `--color-notice-text` on `--color-notice`, and `--color-text` on `--color-danger-surface`. Links on a bar take the bar's text colour and are told apart by underline.\n- `--color-page` is kraft brown with fine vertical lines from `--fill-page`; the sheet `--color-canvas` is cream. `--color-surface` fills margin boxes, tables and the calendar leaf; `--color-surface-alt` the letter strip, idle tabs, language headings and alternate rows; `--color-surface-strong` panel titles, translation bars and the current letter.\n- `--fill-bar` (dark brown) with `--color-bar-text` is the section bar, table heads and the dialog title. `--fill-bar-alt` (straw) with `--color-bar-alt-text` is the masthead and the titles of margin boxes. `--fill-inverse` is the footer band.\n- `--color-heading` is for titles and headwords; `--color-heading-alt` (rust) for part-of-speech headings, panel titles, figures and the drop capitals of the grid. Links are `--color-link` (ink blue) and underlined; a missing entry is `.ds-link--new`.\n- `--color-border-strong` frames the book and rules the page header (as a `double` line of `--border-width-strong`); `--color-border` outlines boxes; `--color-border-muted` rules rows.\n- `--color-accent` with `--color-accent-text` is the current bar item, the month strip of the calendar leaf, the current page number and badges; `--color-accent-alt` is the top rule of a notice.\n- `--color-fill-1` to `--color-fill-4` are the straw, sage, clay and stone of the shelf cells.\n- One family: `--font-body`, `--font-heading` and `--font-ui` are all Georgia, headings at weight 400; italic marks parts of speech, labels and quotations. `--font-mono` is for respellings.\n- Sizes: `--text-base` 14px; `--text-ui` 12px for bar, tabs, buttons, tables and margin boxes; `--text-small` 11px for meta and the footer; `--text-large` 16px for the definition of the day, panel titles and shelf names; `--text-h3` 15px, `--text-h2` 20px, `--text-h1` 25px, `--text-display` 30px for the wordmark and the word of the day.\n- One-off choices outside the token set: `double` rules on the hero, page header and footer; `dotted` row rules in tables; the notice's top rule is `--border-width-strong`; status badges are tints made with `color-mix()`.\n\n## Components\n\n- `.ds-page`: on ``. `.ds-page__body` is the grid of the two panes, `.ds-page__main` the content pane. Views are `.ds-view` with a `.ds-view__body` column; `.ds-layout` (`--even`) and `.ds-layout__col` make columns. `.ds-sprite` hides the SVG symbol sheet and `.ds-icon` sizes an inline icon.\n- `.ds-nav`: the header. `.ds-nav__bar` holds the brand, the `.ds-nav__menu` of `.ds-nav__link` tabs (`is-current` in the canvas colour) and the `.ds-nav__search` form with its `.ds-nav__field`. `.ds-nav__sub` is the strip with two `.ds-nav__tools` lists of `.ds-nav__sublink` items.\n- `.ds-brand`: mark and name at the left of the bar. `.ds-brand__mark` is a tile 1.25 times `--text-display`, dressed like the primary button; `.ds-brand__name` is the bold name in `--color-bar-text`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo: replace both, keep the tile.\n- `.ds-sidebar`: the tree pane. Each `.ds-sidebar__block` has a `.ds-sidebar__title` strip and either a `.ds-tree` or a `.ds-sidebar__list` of `.ds-sidebar__item` rows. `.ds-tree` is the nested page tree: `.ds-tree__item`, a `.ds-tree__row` (`is-current`) with a `.ds-tree__toggle` box (`--leaf` for a page without children) and a link.\n- `.ds-avatar`: a person as two initials on a small tile; `--2`, `--3`, `--4` take the other fills, `--small` is for running text.\n- `.ds-breadcrumb`: the location line: `.ds-breadcrumb__link`, `.ds-breadcrumb__current`.\n- `.ds-hero`: the welcome panel of the dashboard in the first fill: `.ds-hero__title`, `.ds-hero__lead`, and buttons in `.ds-hero__action` at the right.\n- `.ds-page-header`: the head of an inner page: `.ds-page-header__title`, `.ds-page-header__desc` (the author line), `.ds-page-header__action`.\n- `.ds-tabs`: the operations of a page; `.ds-tabs__tab`, `is-current` in the bar fill, with an optional `.ds-tabs__count`.\n- `.ds-stat`: the row; four `.ds-stat__item` counters with a bar-coloured top edge, each a `.ds-stat__value` over a `.ds-stat__label`.\n- `.ds-section`: a heading on a rule, with an optional small `.ds-section__more` link at the right.\n- `.ds-grid`: four space cards in a row: `.ds-grid__cell` (`--2`, `--3`, `--4`) with a monospace `.ds-grid__key`, a `.ds-grid__name` link and `.ds-grid__meta`.\n- `.ds-list`: recent changes: `.ds-list__item` is an avatar, a `.ds-list__title` link with a `.ds-list__meta` line, and a `.ds-list__time`; even rows are tinted.\n- `.ds-panel`: a macro box: `.ds-panel__title` in the secondary bar fill and a `.ds-panel__body` of `.ds-panel__line` paragraphs or a `.ds-panel__items` list of `.ds-panel__item` rows (label left, value right). `.ds-panel--note` and `.ds-panel--tip` tint the box.\n- `.ds-prose`: page text: h1, h2 (on a hairline), h3, p, ul, ol, strong, code. `.ds-edit` is a small edit link in a heading.\n- `.ds-labels`: the strip of labels under a page, each a `.ds-labels__tag`.\n- `.ds-table`: a fully ruled table with a bar-fill head; `.ds-table__num` right-aligns numbers, `.ds-table__row--alt` tints a row, `.ds-table__nowrap` keeps a cell on one line, `.ds-table__file` puts an icon before a file or page name.\n- `.ds-comments`: the thread under a page: `.ds-comments__item` (`--reply` is indented) is an avatar beside a `.ds-comments__box` with a `.ds-comments__head` line and a `.ds-comments__text`.\n- `.ds-notice`: a macro box with a `.ds-notice__mark` at the left and, beside it, text that opens with a bold `.ds-notice__title`; `.ds-notice--error` is outlined in `--color-danger` on `--color-danger-surface`. `.ds-notice__link` is an underlined link in the text colour.\n- `.ds-form`: a bordered table of rows: `.ds-form__row` is a tinted right-aligned `.ds-form__label` and a `.ds-form__field` holding a `.ds-form__input` (`--wide`, `--auto`, `--text`; `is-invalid`, `is-disabled`) with `.ds-form__hint` or `.ds-form__error`, `.ds-form__check` and `.ds-form__checkbox`; `.ds-form__actions` is the foot, with `.ds-form__spacer` pushing the destructive button to the right. `.ds-toolbar` with `.ds-toolbar__key` is the strip of markup keys over the editor.\n- `.ds-link`: every link in text. States `is-visited`, `is-hover`, `is-active`, `is-focus`; `.ds-link--new` (in `--color-danger`) for a page nobody has written, `.ds-link--quiet` for tool and outside links, `.ds-link--strong` for bold.\n- `.ds-button`: primary action. `.ds-button--secondary` is the plain button, `.ds-button--danger` the destructive one (error text on the error surface), `.ds-button--small` a smaller one. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. Group with `.ds-buttons`.\n- `.ds-badge`: a small label in the accent fill for counts and \"new\". `.ds-badge--success`, `.ds-badge--warning` and `.ds-badge--danger` are status labels: a 14 to 22% tint of the status colour over `--color-surface`, body text and a 1px outline in the status colour.\n- `.ds-pagination`: a line of small bordered `.ds-pagination__link` steps (`is-current` in the accent fill, `is-disabled` plain) with a muted `.ds-pagination__label`.\n- `.ds-dialog`: a box in the page flow, centred in the `.ds-dialog__backdrop` band (`--color-overlay`, no text on it): `.ds-dialog__title` in the bar fill, `.ds-dialog__body`, `.ds-dialog__text`, `.ds-dialog__actions`. It never floats over the page.\n- `.ds-empty`: a dashed box on `--color-surface` with `.ds-empty__title`, `.ds-empty__text` and one secondary button. The dialog here also shows `.ds-dialog__props`, a list of `.ds-dialog__term` and `.ds-dialog__value` pairs.\n- `.ds-footer`: the band under the panes: `.ds-footer__text` and a `.ds-footer__row` of `.ds-footer__link` items.\n- `.ds-clear` ends floats.\n- `ds-accordion` (with `__summary`, `__body`): a collapsible box, a `
` section for contents, tips or rules.\n- `ds-menu` (with `__summary`, `__list`, `__item`): a page-actions or language drop-down, a `
` opened by click.\n- `ds-tooltip` (with `__tip`): a small hint box on a link, shown on hover or focus.\n- `ds-progress` (inside `ds-meter`): a native progress bar for completeness or a drive.\n\n## Never\n\n- `content-width >= 75%`: the panes fill the window.\n- `font-size <= 30px`: the word of the day, 30px, is the largest text.\n- `font-size >= 11px`: meta text is 11px; nothing is smaller.\n- `font-families <= 2`: one serif for everything, monospace for respellings.\n- `letter-spacing <= 0px`: no reference tracks its text.\n- `uppercase-text <= 0%`: no text is transformed to uppercase.\n- `line-height <= 1.6`: body text is set at 1.55.\n- `border-radius <= 2px`: every box is square; only badges have 2px corners.\n- `box-shadow-blur <= 0px`: shadows are hard one-pixel offsets, never soft.\n- `text-shadow = none`: no text shadow was measured in any reference.\n- `transition = none`: hover states switch at once.\n- `animation = none`: nothing moves.\n- `border-width <= 3px`: rules are 1px; double rules and the notice edge are 3px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen: a box in the tree pane from `.ds-sidebar__block`, a macro from `.ds-panel` or `.ds-notice`, a row of people from `.ds-avatar`, a threaded item from `.ds-comments__item`. Build it as a 1px `--color-border` outline on `--color-surface` or one of the four fills, keep text on fills as the conventions above say, and use tokens only: no raw colours or lengths, no shadow or transition of its own, no font size outside the type tokens, and `--space-5` as the gap to the next block.\n", "components.css": "/* Layout tokens (structure part). A header bar, then a page-tree pane beside\n the content pane; widths and gaps as team and project wikis of 2005 to\n 2009 set them. */\n:root {\n --size-page: 100%;\n --size-tree: 214px;\n --size-help: 220px;\n --size-search: 150px;\n --size-label: 120px;\n --size-field: 320px;\n --size-editor: 150px;\n --size-dialog: 460px;\n --size-icon: 14px;\n --size-avatar: 26px;\n --space-1: 2px;\n --space-2: 3px;\n --space-3: 5px;\n --space-4: 8px;\n --space-5: 10px;\n --space-6: 15px;\n --space-7: 22px;\n}\n/* ---------- shell ---------- */\n.ds-page {\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-sprite {\n position: absolute;\n}\n.ds-icon {\n flex: none;\n width: var(--size-icon);\n height: var(--size-icon);\n vertical-align: middle;\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__body {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n}\n.ds-clear {\n clear: both;\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}\n\n/* Tool, meta and outside links. */\n.ds-link--quiet,\n.ds-link--quiet:visited,\n.ds-link--quiet.is-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-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n\n/* A link to a page that does not exist yet. */\n.ds-link--new,\n.ds-link--new:visited,\n.ds-link--new.is-visited {\n color: var(--color-danger);\n}\n.ds-link--strong {\n font-weight: var(--weight-bold);\n}\n\n/* ---------- buttons ---------- */\n.ds-button {\n display: inline-block;\n box-sizing: border-box;\n margin: 0;\n padding: var(--space-1) var(--space-4);\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\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-bold);\n line-height: var(--line-body);\n text-decoration: none;\n text-transform: var(--ui-transform);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n transition: var(--transition);\n cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n background: var(--fill-button-hover);\n 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}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border-color: var(--color-input-border);\n font-weight: var(--weight-ui);\n text-shadow: none;\n}\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n border-color: var(--color-border-strong);\n}\n\n/* Destructive action: the error pair. */\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n background: var(--color-danger-surface);\n color: var(--color-danger);\n border-color: var(--color-danger);\n text-shadow: none;\n}\n.ds-button--small {\n padding: 0 var(--space-3);\n font-size: var(--text-small);\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-disabled-text);\n box-shadow: none;\n text-shadow: none;\n cursor: default;\n}\n.ds-buttons {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- form ---------- */\n.ds-form {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n}\n.ds-form__row {\n display: grid;\n grid-template-columns: var(--size-label) minmax(0,1fr);\n gap: var(--space-1) var(--space-5);\n align-items: baseline;\n}\n.ds-form__label {\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-form__field {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--space-1);\n min-width: 0;\n}\n.ds-form__input {\n box-sizing: border-box;\n width: var(--size-field);\n max-width: 100%;\n margin: 0;\n padding: var(--space-1) var(--space-2);\n background: var(--fill-input);\n color: var(--color-input-text);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n line-height: var(--line-body);\n}\n.ds-form__input--auto {\n width: auto;\n}\n.ds-form__input--text {\n display: block;\n width: 100%;\n height: var(--size-editor);\n resize: vertical;\n}\n.ds-form__input:focus-visible,\n.ds-form__input.is-focus {\n outline: var(--focus-ring);\n}\n.ds-form__input:disabled,\n.ds-form__input.is-disabled {\n background: var(--color-disabled);\n color: var(--color-disabled-text);\n}\n.ds-form__input.is-invalid {\n border-color: 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 font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-form__check {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n font-size: var(--text-ui);\n}\n.ds-form__checkbox {\n margin: 0;\n}\n.ds-form__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n}\n.ds-form__spacer {\n flex: 1 1 0;\n}\n\n/* ---------- badge ---------- */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-3);\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-radius: var(--radius-pill);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-style: normal;\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n white-space: nowrap;\n}\n\n/* Status labels: a tint of the status colour over the surface, body text,\n and the status colour as the outline. */\n.ds-badge--success,\n.ds-badge--warning,\n.ds-badge--danger {\n color: var(--color-text);\n font-weight: var(--weight-body);\n border: var(--border-width) solid var(--color-success);\n}\n.ds-badge--success {\n background: color-mix(in srgb,var(--color-success) 16%,var(--color-surface));\n}\n.ds-badge--warning {\n background: color-mix(in srgb,var(--color-warning) 22%,var(--color-surface));\n border-color: var(--color-warning);\n}\n.ds-badge--danger {\n background: color-mix(in srgb,var(--color-danger) 14%,var(--color-surface));\n border-color: var(--color-danger);\n}\n\n/* ---------- notice ---------- */\n.ds-notice {\n display: flow-root;\n margin: 0;\n padding: var(--space-3) var(--space-5);\n background: var(--color-notice);\n color: var(--color-notice-text);\n border: var(--border-width) var(--border-style) var(--color-border);\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-text);\n}\n.ds-notice__title {\n font-weight: var(--weight-bold);\n}\n.ds-notice--error .ds-notice__title {\n color: var(--color-danger);\n}\n.ds-notice__link {\n color: inherit;\n text-decoration: underline;\n}\n\n/* ---------- pagination ---------- */\n.ds-pagination {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-pagination__label {\n padding: 0 var(--space-3);\n color: var(--color-text-muted);\n}\n.ds-pagination__link {\n display: block;\n padding: 0 var(--space-3);\n background: var(--color-surface);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-control);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-pagination__link.is-current {\n background: var(--fill-accent);\n color: var(--color-accent-text);\n border-color: var(--color-border-strong);\n font-weight: var(--weight-bold);\n text-decoration: none;\n}\n.ds-pagination__link.is-disabled {\n background: transparent;\n color: var(--color-text-muted);\n text-decoration: none;\n}\n\n/* ---------- typography ---------- */\n.ds-prose {\n line-height: var(--line-body);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\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: 0 0 var(--space-4);\n font-size: var(--text-h1);\n}\n.ds-prose h2 {\n margin: var(--space-6) 0 var(--space-3);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin: var(--space-5) 0 var(--space-2);\n font-size: var(--text-h3);\n}\n.ds-prose > :first-child {\n margin-top: 0;\n}\n.ds-prose p {\n margin: var(--space-3) 0 var(--space-4);\n}\n.ds-prose ul,\n.ds-prose ol {\n margin: var(--space-2) 0 var(--space-4);\n padding: 0 0 0 var(--space-7);\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-alt);\n border: var(--border-width) solid var(--color-border-muted);\n border-radius: var(--radius-control);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-edit {\n float: right;\n margin: 0 0 0 var(--space-5);\n color: var(--color-text-muted);\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}\n\n/* ---------- table ---------- */\n.ds-table {\n width: 100%;\n box-sizing: border-box;\n border-collapse: collapse;\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-size: var(--text-ui);\n}\n.ds-table th,\n.ds-table td {\n padding: var(--space-2) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n text-align: left;\n vertical-align: top;\n}\n.ds-table th {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-bottom-color: var(--color-border);\n font-family: var(--font-ui);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n white-space: nowrap;\n}\n.ds-table .ds-table__num {\n text-align: right;\n white-space: nowrap;\n}\n.ds-table .ds-table__nowrap {\n white-space: nowrap;\n}\n.ds-table__row--alt td {\n background: var(--color-surface-alt);\n}\n\n/* ---------- dialog: a box in the page flow ---------- */\n.ds-dialog__backdrop {\n padding: var(--space-6);\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 {\n width: var(--size-dialog);\n max-width: 100%;\n box-sizing: border-box;\n margin: 0 auto;\n overflow: hidden;\n background: var(--color-canvas);\n border: var(--border-width-strong) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-shadow: var(--shadow-text);\n}\n.ds-dialog__body {\n padding: var(--space-5);\n}\n.ds-dialog__text {\n margin: 0 0 var(--space-5);\n}\n.ds-dialog__actions {\n display: flex;\n justify-content: flex-end;\n gap: var(--space-3);\n}\n\n/* ---------- empty state ---------- */\n.ds-empty {\n padding: var(--space-6) var(--space-5);\n background: var(--color-surface);\n border: var(--border-width) dashed var(--color-border);\n border-radius: var(--radius-panel);\n text-align: center;\n}\n.ds-empty__title {\n margin: 0 0 var(--space-1);\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n}\n.ds-empty__text {\n margin: 0 0 var(--space-4);\n color: var(--color-text-muted);\n}\n/* ---------- nav: the header bar and the strip of space links ---------- */\n.ds-nav {\n display: block;\n}\n.ds-nav__bar {\n display: flex;\n align-items: stretch;\n gap: var(--space-6);\n padding: 0 var(--space-5);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n text-shadow: var(--shadow-text);\n}\n.ds-brand {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n padding: var(--space-3) 0;\n color: var(--color-bar-text);\n text-decoration: none;\n}\n.ds-brand__mark {\n display: flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: calc(var(--text-display) * 1.25);\n height: calc(var(--text-display) * 1.25);\n box-sizing: border-box;\n background: var(--fill-button);\n color: var(--color-button-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n display: block;\n width: 74%;\n height: 74%;\n}\n.ds-brand__name {\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-display);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-nav__menu {\n display: flex;\n flex: 1 1 0;\n align-items: flex-end;\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 font-weight: var(--weight-bold);\n text-transform: var(--ui-transform);\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-3) var(--space-5);\n color: var(--color-bar-text);\n border: var(--border-width) var(--border-style) transparent;\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n text-decoration: underline;\n}\n.ds-nav__link.is-current {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n\n/* The current view's tab, and the dashboard tab when no view is named. */\n.ds-page:not(:has(.ds-view:target)) .ds-nav__link[href=\"#dashboard\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#dashboard:target) .ds-nav__link[href=\"#dashboard\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#page:target) .ds-nav__link[href=\"#page\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#pages:target) .ds-nav__link[href=\"#pages\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-page:has(#edit:target) .ds-nav__link[href=\"#edit\"] {\n background: var(--color-canvas);\n color: var(--color-heading);\n border-color: var(--color-border-strong);\n text-shadow: none;\n}\n.ds-nav__search {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin: 0;\n}\n.ds-nav__field {\n width: var(--size-search);\n}\n.ds-nav__sub {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n padding: var(--space-2) var(--space-5);\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-strong);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n}\n.ds-nav__tools {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__sublink {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-bar-alt-text);\n text-decoration: underline;\n}\n\n/* ---------- avatar: a person drawn as initials ---------- */\n.ds-avatar {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-avatar);\n height: var(--size-avatar);\n box-sizing: border-box;\n background: var(--color-surface-strong);\n color: var(--color-heading);\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-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n vertical-align: middle;\n}\n.ds-avatar--2 {\n background: var(--color-fill-2);\n}\n.ds-avatar--3 {\n background: var(--color-fill-3);\n}\n.ds-avatar--4 {\n background: var(--color-fill-4);\n}\n.ds-avatar--small {\n width: calc(var(--size-avatar) * 0.7);\n height: calc(var(--size-avatar) * 0.7);\n}\n\n/* ---------- body: the tree pane and the content pane ---------- */\n.ds-page__body {\n display: grid;\n grid-template-columns: var(--size-tree) minmax(0,1fr);\n gap: var(--space-4);\n width: var(--size-page);\n box-sizing: border-box;\n padding: var(--space-4);\n}\n.ds-page__main {\n min-width: 0;\n padding: var(--space-5) var(--space-6) var(--space-6);\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-layout {\n display: grid;\n grid-template-columns: minmax(0,1fr) var(--size-help);\n gap: var(--space-6);\n align-items: start;\n}\n.ds-layout--even {\n grid-template-columns: minmax(0,3fr) minmax(0,2fr);\n}\n.ds-layout__col {\n display: flex;\n flex-direction: column;\n gap: var(--space-5);\n min-width: 0;\n}\n\n/* ---------- sidebar: the tree pane ---------- */\n.ds-sidebar {\n display: flex;\n flex-direction: column;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-page);\n}\n.ds-sidebar__block {\n padding: 0 0 var(--space-4);\n}\n.ds-sidebar__title {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-strong);\n color: var(--color-heading-alt);\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 font-weight: var(--weight-bold);\n line-height: var(--line-body);\n text-transform: var(--ui-transform);\n}\n.ds-sidebar__block + .ds-sidebar__block .ds-sidebar__title {\n border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-sidebar__list {\n margin: 0;\n padding: var(--space-3) var(--space-4) 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-sidebar__item {\n padding: var(--space-1) 0;\n}\n\n/* The page tree: nested lists with a toggle box before each branch. */\n.ds-tree {\n margin: 0;\n padding: var(--space-3) var(--space-4) 0;\n list-style: none;\n font-size: var(--text-small);\n}\n.ds-tree .ds-tree {\n padding: 0 0 0 var(--space-6);\n border-left: var(--border-width) dotted var(--color-border-strong);\n margin: 0 0 0 var(--space-3);\n}\n.ds-tree__item {\n padding: var(--space-1) 0 0;\n}\n.ds-tree__row {\n display: flex;\n align-items: baseline;\n gap: var(--space-3);\n}\n.ds-tree__toggle {\n position: relative;\n top: calc(var(--text-small) * 0.1);\n box-sizing: border-box;\n display: inline-block;\n flex: none;\n width: calc(var(--text-small) * 0.9);\n height: calc(var(--text-small) * 0.9);\n color: var(--color-text-muted);\n border: var(--border-width) solid var(--color-border-strong);\n background: linear-gradient(currentColor, currentColor) center / 60% var(--border-width) no-repeat, linear-gradient(currentColor, currentColor) center / var(--border-width) 60% no-repeat, var(--color-surface);\n}\n.ds-tree__toggle--open {\n background: linear-gradient(currentColor, currentColor) center / 60% var(--border-width) no-repeat, var(--color-surface);\n}\n.ds-tree__toggle--leaf {\n background: transparent;\n border-color: transparent;\n}\n.ds-tree__row.is-current {\n background: var(--color-fill-2);\n font-weight: var(--weight-bold);\n}\n.ds-tree__row.is-current .ds-link {\n color: var(--color-text);\n}\n\n/* ---------- breadcrumb: the location line of the content pane ---------- */\n.ds-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0 0 var(--space-4);\n padding: 0;\n list-style: none;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-breadcrumb__link {\n color: var(--color-link-quiet);\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.ds-breadcrumb__current {\n color: var(--color-text);\n}\n\n/* ---------- hero: the welcome panel of the dashboard ---------- */\n.ds-hero {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-7);\n padding: var(--space-5) var(--space-6);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-hero__title {\n margin: 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}\n.ds-hero__lead {\n margin: var(--space-2) 0 0;\n font-size: var(--text-large);\n}\n.ds-hero__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- page header ---------- */\n.ds-page-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: var(--space-6);\n margin: 0 0 var(--space-5);\n}\n.ds-page-header__title {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-page-header__desc {\n margin: var(--space-2) 0 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-page-header__action {\n display: flex;\n flex: none;\n gap: var(--space-3);\n margin: 0;\n}\n\n/* ---------- tabs: the operations of a page, on a bar-coloured rule ---------- */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-end;\n gap: var(--space-1);\n margin: 0 0 var(--space-5);\n padding: 0;\n list-style: none;\n border-bottom: var(--border-width-strong) solid var(--color-bar);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n}\n.ds-tabs__tab {\n display: block;\n padding: var(--space-2) var(--space-5);\n background: var(--color-surface-alt);\n color: var(--color-link);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-bottom: 0;\n border-radius: var(--radius-control) var(--radius-control) 0 0;\n text-decoration: none;\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n background: var(--color-surface-strong);\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-bar);\n color: var(--color-bar-text);\n border-color: var(--color-bar);\n font-weight: var(--weight-bold);\n text-shadow: var(--shadow-text);\n}\n.ds-tabs__count {\n font-weight: var(--weight-body);\n}\n\n/* ---------- stats: four counters with a coloured top edge ---------- */\n.ds-stat {\n display: grid;\n grid-template-columns: repeat(4,minmax(0,1fr));\n gap: var(--space-4);\n margin: 0;\n}\n.ds-stat__item {\n padding: var(--space-3) var(--space-5);\n background: var(--fill-panel);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-top: var(--border-width-strong) solid var(--color-bar);\n border-radius: var(--radius-panel);\n}\n.ds-stat__value {\n display: block;\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}\n.ds-stat__label {\n display: block;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n text-transform: var(--ui-transform);\n}\n\n/* ---------- section heading ---------- */\n.ds-section {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: var(--space-5);\n margin: 0;\n padding: 0 0 var(--space-2);\n color: var(--color-heading);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-strong);\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-section__more {\n font-family: var(--font-body);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n text-transform: none;\n}\n\n/* ---------- grid: the spaces of the wiki ---------- */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4,minmax(0,1fr));\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-grid__cell {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n padding: var(--space-4) var(--space-5);\n background: var(--color-fill-1);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-grid__cell--2 {\n background: var(--color-fill-2);\n}\n.ds-grid__cell--3 {\n background: var(--color-fill-3);\n}\n.ds-grid__cell--4 {\n background: var(--color-fill-4);\n}\n.ds-grid__key {\n align-self: flex-start;\n padding: 0 var(--space-3);\n background: var(--color-canvas);\n color: var(--color-text-muted);\n border: var(--border-width) var(--border-style) var(--color-border);\n font-family: var(--font-mono);\n font-size: var(--text-small);\n}\n.ds-grid__name {\n color: var(--color-link);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-grid__name:hover,\n.ds-grid__name.is-hover {\n color: var(--color-link-hover);\n text-decoration: var(--link-decoration-hover);\n}\n.ds-grid__meta {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n\n/* ---------- list: recent changes, each with its author's initials ---------- */\n.ds-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-list__item {\n display: grid;\n grid-template-columns: auto minmax(0,1fr) auto;\n column-gap: var(--space-4);\n align-items: start;\n padding: var(--space-3) var(--space-2);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:nth-child(even) {\n background: var(--color-surface);\n}\n.ds-list__title {\n font-weight: var(--weight-bold);\n}\n.ds-list__meta {\n display: block;\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-list__time {\n font-size: var(--text-small);\n color: var(--color-text-muted);\n white-space: nowrap;\n}\n\n/* ---------- panel: a tinted macro box ---------- */\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 overflow: hidden;\n}\n.ds-panel--tip {\n background: var(--color-fill-3);\n}\n.ds-panel--note {\n background: var(--color-fill-2);\n}\n.ds-panel__title {\n margin: 0;\n padding: var(--space-2) var(--space-5);\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-ui);\n font-size: var(--text-base);\n font-weight: var(--weight-bold);\n line-height: var(--line-body);\n}\n.ds-panel__body {\n padding: var(--space-4) var(--space-5);\n}\n.ds-panel__line {\n margin: 0 0 var(--space-3);\n}\n.ds-panel__line:last-child {\n margin: 0;\n}\n.ds-panel__items {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-panel__item {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n padding: var(--space-2) 0;\n border-bottom: var(--border-width) dotted var(--color-border);\n}\n.ds-panel__item:last-child {\n border-bottom: 0;\n}\n\n/* ---------- prose and the page's label strip ---------- */\n.ds-prose h2 {\n padding: 0 0 var(--space-1);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-prose h3 {\n color: var(--color-heading-alt);\n}\n.ds-labels {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-3);\n margin: 0;\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-labels__tag {\n padding: 0 var(--space-3);\n background: var(--color-surface-alt);\n color: var(--color-link-quiet);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-pill);\n text-decoration: none;\n}\n\n/* ---------- notice: a macro box with a mark at the left ---------- */\n.ds-notice {\n display: flex;\n align-items: baseline;\n gap: var(--space-4);\n border-color: color-mix(in srgb,var(--color-warning) 45%,var(--color-border));\n}\n.ds-notice--error {\n border-color: var(--color-danger);\n}\n.ds-notice__mark {\n flex: none;\n font-weight: var(--weight-bold);\n}\n.ds-notice--error .ds-notice__mark {\n color: var(--color-danger);\n}\n\n/* ---------- table ---------- */\n.ds-table th,\n.ds-table td {\n border: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-table td {\n background: var(--color-canvas);\n}\n.ds-table .ds-table__row--alt td {\n background: var(--color-surface);\n}\n.ds-table__file {\n display: inline-flex;\n align-items: center;\n gap: var(--space-3);\n}\n\n/* ---------- comments: a thread under the page ---------- */\n.ds-comments {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-comments__item {\n display: grid;\n grid-template-columns: auto minmax(0,1fr);\n column-gap: var(--space-4);\n}\n.ds-comments__item--reply {\n margin: 0 0 0 var(--space-7);\n}\n.ds-comments__box {\n background: var(--color-surface);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-comments__head {\n display: flex;\n justify-content: space-between;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n color: var(--color-text-muted);\n}\n.ds-comments__text {\n margin: 0;\n padding: var(--space-3) var(--space-4);\n}\n\n/* ---------- form: labels in a tinted column ---------- */\n.ds-form {\n gap: 0;\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n overflow: hidden;\n}\n.ds-form__row {\n gap: 0;\n align-items: stretch;\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-form__label {\n padding: var(--space-3) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n text-align: right;\n}\n.ds-form__field {\n padding: var(--space-3) var(--space-4);\n background: var(--color-canvas);\n}\n.ds-form__input--text {\n font-family: var(--font-mono);\n font-size: var(--text-base);\n}\n.ds-form__actions {\n padding: var(--space-4);\n background: var(--color-surface);\n}\n.ds-toolbar {\n display: flex;\n flex-wrap: wrap;\n align-self: stretch;\n gap: var(--space-1);\n padding: var(--space-1);\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-input-border);\n border-bottom: 0;\n}\n.ds-toolbar__key {\n min-width: calc(var(--text-ui) * 1.8);\n padding: 0 var(--space-3);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-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 line-height: var(--line-body);\n text-align: center;\n}\n\n/* ---------- dialog body: a list of properties ---------- */\n.ds-dialog__props {\n display: grid;\n grid-template-columns: auto minmax(0,1fr);\n gap: var(--space-2) var(--space-5);\n margin: 0 0 var(--space-5);\n font-size: var(--text-ui);\n}\n.ds-dialog__term {\n color: var(--color-text-muted);\n}\n.ds-dialog__value {\n margin: 0;\n}\n\n/* ---------- footer ---------- */\n.ds-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--space-6);\n margin: 0 var(--space-4) var(--space-4);\n padding: var(--space-3) var(--space-5);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n border-radius: var(--radius-page);\n font-size: var(--text-small);\n}\n.ds-footer__text {\n margin: 0;\n}\n.ds-footer__row {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-footer__link {\n color: var(--color-inverse-text);\n text-decoration: underline;\n}\n\n/* Components of the period: collapsible boxes, page-action menu, hint box, meter. */\n.ds-extras {\n grid-column: 1 / -1;\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n gap: var(--space-4) var(--space-5);\n margin: var(--space-4) 0;\n font-family: var(--font-ui);\n font-size: var(--text-small);\n color: var(--color-text);\n}\n.ds-extras > .ds-accordion { flex: 1 1 var(--size-fold); }\n.ds-accordion {\n box-sizing: border-box;\n background: var(--color-surface);\n color: var(--color-text);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n}\n.ds-accordion__summary {\n cursor: pointer;\n padding: var(--space-2) var(--space-4);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n.ds-accordion[open] > .ds-accordion__summary {\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__body { padding: var(--space-3) var(--space-4); }\n.ds-accordion__body p { margin: 0; }\n.ds-menu { position: relative; display: inline-block; }\n.ds-menu__summary {\n cursor: pointer;\n list-style: none;\n padding: var(--space-2) var(--space-4);\n background: var(--fill-button-secondary);\n color: var(--color-button-secondary-text);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n box-shadow: var(--shadow-control);\n font-weight: var(--weight-ui);\n}\n.ds-menu__summary::-webkit-details-marker { display: none; }\n.ds-menu__summary::after { content: \"\"; display: inline-block; width: 0; height: 0; border: calc(var(--text-base) * 0.3) solid transparent; border-top: calc(var(--text-base) * 0.36) solid currentColor; border-bottom-width: 0; margin-left: calc(var(--text-base) * 0.45); vertical-align: calc(var(--text-base) * 0.12); }\n.ds-menu__list {\n position: absolute;\n z-index: 5;\n top: 100%;\n left: 0;\n min-width: var(--size-menu);\n margin: var(--space-1) 0 0;\n padding: var(--space-2) 0;\n list-style: none;\n background: var(--color-canvas);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n}\n.ds-menu__item {\n display: block;\n padding: var(--space-2) var(--space-4);\n color: var(--color-link);\n text-decoration: var(--link-decoration);\n white-space: nowrap;\n}\n.ds-menu__item:hover, .ds-menu__item:focus {\n background: var(--color-surface-alt);\n color: var(--color-link-hover);\n}\n.ds-tooltip { position: relative; display: inline-block; }\n.ds-tooltip__tip {\n position: absolute;\n z-index: 5;\n bottom: 100%;\n left: 0;\n width: var(--size-tip);\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) var(--color-border-strong);\n box-shadow: var(--shadow-panel);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n text-align: left;\n visibility: hidden;\n opacity: 0;\n pointer-events: none;\n}\n.ds-tooltip:hover > .ds-tooltip__tip, .ds-tooltip:focus-within > .ds-tooltip__tip {\n visibility: visible;\n opacity: 1;\n}\n.ds-meter { display: inline-flex; align-items: center; gap: var(--space-3); }\n.ds-progress {\n -webkit-appearance: none;\n appearance: none;\n width: var(--size-meter);\n height: var(--size-meter-h);\n box-sizing: border-box;\n background: var(--color-surface-strong);\n border: var(--border-width) var(--border-style) var(--color-border-strong);\n border-radius: var(--radius-control);\n overflow: hidden;\n vertical-align: middle;\n}\n.ds-progress::-webkit-progress-bar { background: var(--color-surface-strong); }\n.ds-progress::-webkit-progress-value { background: var(--color-accent); }\n.ds-progress::-moz-progress-bar { background: var(--color-accent); }\n\n:root {\n --size-fold: 18em;\n --size-menu: 12em;\n --size-tip: 15em;\n --size-meter: 14em;\n --size-meter-h: 1em;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: team wiki specimen\n\n\n\n\n\n\n \n \n \n\n\n
\n
\n \n \n chronoskin\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

Welcome to the chronoskin team wiki

\n

One place for plans, notes and checklists. Anyone on the team can edit any page.

\n
\n

\n Add a page\n Browse pages\n

\n
\n\n
\n
1,286
Pages
\n
74
Edits this week
\n
412
Attachments
\n
38
People
\n
\n\n

Spaces All 9 spaces

\n \n\n
\n
\n

Recently updated More

\n
    \n
  • LKRelease checklist 3 newedited by Lena Kowal in Platform team: \"added the smoke test step\"10:42
    • \n
  • TBMeeting notes, 12 Junecreated by Tomas Brandt in Platform team09:15
    • \n
  • ARLoad test resultsattachment added by Asha Rao in Test plans: results-june.csvYesterday
    • \n
  • JOOn-call rotacommented by Jonas Oduya in OperationsYesterday
    • \n
  • LKGlossaryedited by Lena Kowal in Handbook: \"two new terms\"10 June
    • \n
\n
\n
\n
Space tools [show]

Export the space, set restrictions and manage labels from the administration page.

\n
\n

Your favourite pages

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

Tip of the week

\n
\n

Put a label on a page and it turns up in every list for that label. Try release or how-to.

\n
\n
\n
\n
\n
\n
\n\n \n
\n
    \n
  1. Dashboard
    2. \n
  2. >
    3. \n
  3. Platform team
    4. \n
  4. >
    5. \n
  5. Releases
    6. \n
  6. >
    7. \n
  7. Release checklist
    8. \n
\n
\n
\n

Release checklist

\n

LK Added by Tomas Brandt, last edited by Lena Kowal on 13 June 2008 (view change)

\n
Tools
Owner: Lena KowalPlatform team. Last edited this page on 13 June 2008.
\n
\n

EditAdd comment

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

Before the release

\n

Work through this list for every release of the platform. Each step has one owner; if you cannot finish yours, say so on this page before the freeze, not after.

\n
    \n
  • Freeze the branch with make freeze VERSION=2.4.
    • \n
  • Run the smoke tests on the staging machines.
    • \n
  • Write the release notes from the change log.
    • \n
\n

After the release

\n

Watch the error log for an hour, then close the release page and open the next one. See the rollback plan if anything goes wrong.

\n

Links on this wiki

\n \n
\n
\n
\n

Release 2.4

\n
\n
    \n
  • Freeze16 June
    • \n
  • Release19 June
    • \n
  • ManagerLena Kowal
    • \n
  • Statein progress
    • \n
\n
\n
\n

(!)Freeze moved. The freeze is now on Monday 16 June. See the meeting notes.

\n
\n
\n\n \n \n \n \n \n \n \n \n \n \n \n
StepOwnerDays before releaseOpen issuesState
Freeze the branchTomas Brandt30done
Smoke tests on stagingAsha Rao24in progress
Release notesLena Kowal21in progress
Database migration rehearsalJonas Oduya17blocked
Announce to supportLena Kowal00not started
\n\n

Labels: release checklist platform Edit labels

\n\n

Attachments (3) Attach a file

\n \n \n \n \n \n \n \n \n \n
NameSizeAdded byDateComment
smoke-tests.txt14 kBAsha Rao13 June 2008Output of the last run
freeze-plan.pdf212 kBTomas Brandt10 June 2008Version 2, replaces the May plan
schedule.csv3 kBLena Kowal2 June 2008Dates for 2.4 and 2.5
\n\n

Comments (3) Add comment

\n
    \n
  • AR

    Asha Rao says:12 June 2008, 16:20

    Four smoke tests still fail on the second staging machine. I have attached the output; it looks like a stale configuration file.

    • \n
  • JO

    Jonas Oduya says:12 June 2008, 17:05

    It is. I will rebuild that machine tomorrow morning and run them again.

    • \n
  • LK

    Lena Kowal says:13 June 2008, 10:42

    Added the smoke test step to the table so we stop forgetting who owns it.

    • \n
\n
\n
\n\n \n
\n
    \n
  1. Dashboard
    2. \n
  2. >
    3. \n
  3. Platform team
    4. \n
  4. >
    5. \n
  5. All pages
    6. \n
\n
\n
\n

Pages in Platform team

\n

214 pages, newest change first. Showing 1 to 8.

\n
\n
\n

Add a page

\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PageLast changed byChangedVersionsCommentsFiles
Release checklistLena Kowal13 June 20082733
Meeting notes, 12 JuneTomas Brandt13 June 2008200
On-call rotaJonas Oduya12 June 20086181
Release 2.4 notesLena Kowal11 June 2008910
Architecture overviewAsha Rao2 March 20081456
GlossaryLena Kowal10 June 20083300
How to rebuild a staging machineJonas Oduya6 June 2008521
Release 2.3 notesTomas Brandt21 April 20081242
\n \n

Orphaned pages

\n
\n

No orphaned pages

\n

Every page in this space is linked from at least one other page. Pages nobody links to will be listed here.

\n Add a page\n
\n
\n
\n\n \n
\n
    \n
  1. Dashboard
    2. \n
  2. >
    3. \n
  3. Release checklist
    4. \n
  4. >
    5. \n
  5. Edit
    6. \n
\n
\n
\n

Edit page: Release checklist

\n

Version 28, based on version 27 by Lena Kowal. Your draft was saved at 10:51.

\n
Notation help [show]

h2. makes a heading, asterisks make bold text, and square brackets link a page.

\n
\n

View page

\n
\n
\n
\n

(i)Asha Rao is also editing this page. She started 4 minutes ago. Whoever saves second will be asked to merge.

\n

(x)The page was not saved. A page called \"Release checklist 2.4\" already exists in this space. Choose another title.

\n
\n
\n
\n
\n \n This title is already in use.\n
\n
\n \n \n
\n
\n \n \n BIh2.*#[link]||table||{note}\n \n \n
\n
\n \n A minor change sends no mail.\n
\n
\n \n Preview\n \n Cancel\n \n Remove page\n
\n
\n
\n

Notation help

\n
\n
    \n
  • h2. Titleheading
    • \n
  • *bold*strong text
    • \n
  • * itembullet
    • \n
  • [Page name]link
    • \n
  • {note}...{note}note box
    • \n
\n
\n
\n
\n
\n
\n

Page properties

\n
\n
\n
Space
Platform team (PLAT)
\n
Created
Tomas Brandt, 4 February 2008
\n
Versions
27, by 5 people
\n
Restrictions
Anyone on the team can edit
\n
\n

Removing the page also removes its 3 attachments and 3 comments. It can be restored from the space's bin for 30 days.

\n
\n Close\n Remove page\n
\n
\n
\n
\n
\n
\n\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.wiki-2000s.app.s05.p03.t04.u04\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"wiki-2000s\",\n \"years\": [\n 2003,\n 2010\n ]\n },\n \"archetype\": \"app\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1024,\n \"fluid\": true\n },\n \"source\": \"https://chrono.skin/s/v1-wk-5344\",\n \"short\": \"v1-wk-5344\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f6f9ed;\n --color-canvas: #ffffff;\n --color-surface: #f8f8f8;\n --color-surface-alt: #eef3e2;\n --color-surface-strong: #e0e0c0;\n --color-bar: #5b8c2a;\n --color-bar-text: #ffffff;\n --color-bar-alt: #e7edff;\n --color-bar-alt-text: #1c3d5a;\n --color-inverse: #2f4a14;\n --color-inverse-text: #f6f9ed;\n --color-text: #111111;\n --color-text-muted: #6a6a6a;\n --color-heading: #1f1f1f;\n --color-heading-alt: #3f6a12;\n --color-link: #006398;\n --color-link-quiet: #3f6a12;\n --color-link-visited: #5b4a8c;\n --color-link-hover: #1068a0;\n --color-link-active: #802b28;\n --color-border: #dddddd;\n --color-border-strong: #bbbbbb;\n --color-border-muted: #eeeeee;\n --color-accent: #e8770e;\n --color-accent-text: #ffffff;\n --color-accent-alt: #802b28;\n --color-fill-1: #e7edff;\n --color-fill-2: #eef3e2;\n --color-fill-3: #fff3d0;\n --color-fill-4: #f0f0f0;\n --color-button: #5b8c2a;\n --color-button-text: #ffffff;\n --color-button-hover-text: #f6f9ed;\n --color-button-secondary: #eeeeee;\n --color-button-secondary-text: #111111;\n --color-input: #ffffff;\n --color-input-text: #111111;\n --color-input-border: #999999;\n --color-disabled: #e6e6e6;\n --color-disabled-text: #989898;\n --color-danger: #c0392b;\n --color-danger-surface: #fdecea;\n --color-success: #3f8a1f;\n --color-warning: #e8a200;\n --color-notice: #e8f0f8;\n --color-notice-text: #111111;\n --color-focus: #e8770e;\n --color-shadow: #333333;\n --color-overlay: #d8e8f0;\n}\n\n/* @part type */\n:root {\n --font-body: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-heading: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-ui: Georgia, \"Times New Roman\", \"DejaVu Serif\", serif;\n --font-mono: \"Andale Mono\", \"Courier New\", Courier, monospace;\n --text-base: 14px;\n --text-small: 11px;\n --text-ui: 12px;\n --text-large: 16px;\n --text-display: 30px;\n --text-h1: 25px;\n --text-h2: 20px;\n --text-h3: 15px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 400;\n --weight-display: 400;\n --weight-ui: 400;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0.1em;\n --ui-transform: none;\n --link-decoration: underline;\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: 3px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 2px;\n --radius-page: 0;\n --shadow-panel: 1px 1px 0 var(--color-shadow);\n --shadow-control: none;\n --shadow-control-hover: none;\n --shadow-control-pressed: inset 1px 1px 0 var(--color-shadow);\n --shadow-dialog: 3px 3px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: repeating-linear-gradient(to right, var(--color-page) 0, var(--color-page) 3px, color-mix(in srgb, var(--color-page), black 4%) 3px, color-mix(in srgb, var(--color-page), black 4%) 4px);\n --fill-bar: linear-gradient(to bottom, color-mix(in srgb, var(--color-bar), white 10%), var(--color-bar));\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: var(--color-inverse);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-canvas);\n --fill-button: var(--color-button);\n --fill-button-hover: color-mix(in srgb, var(--color-button), black 22%);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: linear-gradient(to bottom, color-mix(in srgb, var(--color-input), black 5%), var(--color-input) 4px);\n --focus-ring: 1px dashed var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }